fix: normalize combobox & select to 32px field height + keyboard focus fixes#141
Open
boramyi-ts wants to merge 4 commits into
Open
fix: normalize combobox & select to 32px field height + keyboard focus fixes#141boramyi-ts wants to merge 4 commits into
boramyi-ts wants to merge 4 commits into
Conversation
- Combobox single field now matches the Select trigger: h-10 (40px) + bg-card, and items use gap-1.5 — the two controls were visually inconsistent in height and background. - Combobox chips: bg-card background + keyboard-only focus indicator (has-[chip-input:focus-visible] instead of focus-within, which fired on mouse click too). - Slider thumb: focus shadow scoped to :focus-visible only (was also showing on hover and active drag). - Accordion trigger: removed the orphan focus-visible:after:border-ring (no ::after geometry — a dead no-op). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Brings Select (default 40px -> 32px; sm -> 28px) and Combobox (was 40px) down to the standard 32px field height shared by Input, Input Group, Button, and Toggle. Combobox now inherits the InputGroup base height rather than overriding it. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
54321jenn-ts
approved these changes
Jun 23, 2026
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
54321jenn-ts
approved these changes
Jun 23, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
This PR aligns Combobox and Select with the library’s standard 32px field height and tightens several focus-indicator behaviors to be keyboard-accurate (:focus-visible) across UI primitives.
Changes:
- Normalize
SelectTriggerheights to 32px (default) and 28px (sm). - Adjust
Comboboxstyling to better matchSelect(field background, item spacing, and chips focus-ring behavior scoped to keyboard focus). - Fix focus indicator behavior by scoping slider thumb halo to
:focus-visibleand removing a no-op accordion trigger class; relax PR title subject requirements to allow optional Jira prefix.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/ui/combobox.tsx | Aligns combobox field/chips background and focus behavior, and tweaks item spacing for consistency with Select. |
| src/components/ui/select.tsx | Updates trigger height tokens to match the 32px/28px field-height standard. |
| src/components/ui/slider.tsx | Ensures thumb focus halo appears only for keyboard focus (:focus-visible). |
| src/components/ui/accordion.tsx | Removes an orphaned focus-visible:after:* utility that had no effect. |
| .github/workflows/pr-title-checker.yml | Allows optional Jira prefix while still requiring a non-empty semantic subject. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Normalizes Combobox and Select to the standard 32px field height, and corrects several keyboard-focus indicators. (The input-group focus inner-shadow bug is split into its own PR — SW-2043 / #142.)
Field height → 32px (consistency)
h-10(40px) →h-8(32px);sm→h-7(28px).Combobox ↔ Select consistency
bg-cardbackground + itemgap-1.5(match Select).bg-card+ keyboard-only focus (has-[[data-slot=combobox-chip-input]:focus-visible]instead offocus-within, which also fired on mouse click).Focus-shadow fixes (keyboard
:focus-visiblecorrectness):focus-visibleonly (was also on hover + active drag).focus-visible:after:border-ring(no::aftergeometry — a dead no-op).Files:
combobox.tsx,select.tsx,slider.tsx,accordion.tsx.yarn lint+yarn typecheckpass.Prototypes
Field height — 40px vs 32px (the same form rendered at both heights, all controls):
Focus before/after (slider, accordion, combobox chips, + Input/Textarea/Select reference rows):
🤖 Generated with Claude Code