feat(ui): Select, Checkbox/Radio, Switch primitives, and Tabs segmented variant - #449
Conversation
Compact Base UI Select with trigger, popup, groups, separators, and selected/disabled item states. Supports arrow-key navigation, typeahead, and Enter/Escape like the existing dropdown-menu and popover primitives.
Compact selection controls built on Base UI's checkbox and radio primitives, with checked/indeterminate states, visible focus rings, and disabled styling consistent with the other form controls.
Compact switch for binary preferences built on Base UI's switch primitive. Works controlled and uncontrolled, and expands its hit area to a 44px touch target without growing the visible track.
Introduces a `segmented` variant as the explicit name for the existing default style, kept as a backwards-compatible alias so current call sites are unaffected. Active tabs in the segmented/default variant now get a subtle shadow so selection isn't communicated by color alone.
|
@meshackyaro is attempting to deploy a commit to the Ijai's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@meshackyaro Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
|
For reviewers: this PR is based on Suggested merge order: #448 first, then rebase/merge this one. Otherwise CI here may hit the same pre-existing |
1 participant
Summary
Implements four Stellar Wave design-system issues, all built on the existing
@base-ui/reactprimitives and matching the compact sizing / overlay-token conventions already used bypopover.tsxanddropdown-menu.tsx.packages/ui/src/components/select.tsx: Select with trigger, popup, groups, separators, selected/disabled item states. Arrow keys, Enter, Escape, and typeahead all work via Base UI's built-in behavior.packages/ui/src/components/checkbox.tsx,radio-group.tsx: Checkbox with checked/indeterminate states; RadioGroup with keyboard navigation. Both expose visible focus rings and disabled styling.packages/ui/src/components/switch.tsx: controlled/uncontrolled switch with checked/focus/disabled states and a 44px touch target (via an invisible expanded hit area) without growing the visible track.packages/ui/src/components/tabs.tsx: adds an explicitsegmentedvariant as the canonical name for the existing default style (defaultkept as a backwards-compatible alias, so all current call sites are unaffected). Active segmented tabs now get a subtle shadow so selection isn't communicated by color alone;line's underline indicator is untouched.Each component ships with a
*.test.tsxcovering accessibility (axe), mouse interaction, keyboard navigation, and disabled states, following the pattern indialog.test.tsx/slider.test.tsx/tabs.test.tsx.Note: while setting up the repo I found
bun installwas broken onmaindue to unrelated corruption (duplicate script key inapps/web/package.json, corruptedbun.lock). Fixed separately in #448 rather than bundling it here.Closes #406, Closes #407, Closes #408, Closes #409
Test plan
bun run testinpackages/ui— all 5 new/updated test files pass (29 tests)bun run typecheckinpackages/ui— clean (pre-existing unrelated errors instat.tsxand@repo/vitest-configuntouched)bun run linton the touched files — clean