mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Danny White
b10511052d
## Problem Select, combobox and empty multi-select triggers use a flat border treatment, while the default Button has a raised surface and shadow. This makes dropdown controls look inconsistent when closed. ## Solution Share the existing Button shadow variables and raised surface classes with the select trigger CVA. SelectTrigger and ComboboxTrigger keep their own layout, focus, and disabled behaviour. The multi-select shares the raised surface when empty and keeps a sunk field surface for selected chips. Static size classes keep its empty and single-row selected states at the same height; wrapped badges can still grow. The caret stays aligned as values are selected. Select, Combobox and Multi-select share Button's size-specific corner radii. Button's existing styling is preserved. | Before | After | | --- | --- | | <img width="518" height="180" alt="CleanShot 2026-09-24 at 13 36 32@2x" src="https://github.com/user-attachments/assets/3822e51f-b1c5-46a2-b268-0bf08a03ae06" /> | <img width="534" height="224" alt="CleanShot 2026-09-24 at 13 36 41@2x" src="https://github.com/user-attachments/assets/e553c973-3d21-4228-ae6f-d3c098d051d3" /> | | <img width="638" height="148" alt="CleanShot 2026-09-24 at 15 08 01@2x" src="https://github.com/user-attachments/assets/6d0c3dfe-3392-4b76-ae61-b6aa7a09583d" /> | <img width="658" height="148" alt="CleanShot 2026-09-24 at 15 08 17@2x" src="https://github.com/user-attachments/assets/184c50c3-b951-410e-89d5-3b1c2ee8f3b8" /> | | <img width="482" height="162" alt="CleanShot 2026-09-24 at 15 07 22@2x" src="https://github.com/user-attachments/assets/a088d832-d0a9-45c5-a272-9c84cc601d1d" /> | <img width="490" height="168" alt="CleanShot 2026-09-24 at 14 59 52@2x" src="https://github.com/user-attachments/assets/4df0ca29-53d8-4926-80db-1cafb705faad" /> | ## Review instructions 1. Open the design system [Select](https://design-system-git-dnywh-dropdown-trigger-surface-supabase.vercel.app/design-system/docs/components/select), [Combobox](https://design-system-git-dnywh-dropdown-trigger-surface-supabase.vercel.app/design-system/docs/components/combobox) and [Multi-select](https://design-system-git-dnywh-dropdown-trigger-surface-supabase.vercel.app/design-system/docs/fragments/multi-select) examples. 2. Compare the closed surfaces and corner radii with a default Button, then check hover, focus and open states. 3. Select one or two multi-select items. Check that a single row remains the same height as the empty control, the caret stays aligned and the chip field remains distinct. Add enough items to check wrapping. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary * **Style** * Default buttons display a raised surface with a subtle shadow and size-appropriate rounded corners. * Select and combobox triggers share a raised, card-like appearance, with consistent shadows and rounded corners at small sizes. Invalid select triggers display a border. * Empty multi-select controls use a raised surface, while controls with selected values use a field-style surface. * Small and tiny multi-select controls have updated spacing and sizing in empty and selected states. <!-- end of auto-generated comment: release notes by coderabbit.ai -->