mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +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 -->
packages/ui
Supabase's shared React component library. Built on Radix UI primitives and shadcn/ui, styled with Tailwind CSS, and used across all Supabase apps.
Usage
Import from the 'ui' package alias:
import { Badge, Button, Input } from 'ui'
Some of the components have the _Shadcn_ suffix. These components should be preferred, they're in a process of replacing the other ones.
Utilities
// deep object merge (used for themes)
import { clipboard, cn, mergeDeep } from 'ui' // Tailwind class merging (shadcn-ui/cn)
// copy-to-clipboard helper
Styling conventions
- Tailwind only — no inline styles or CSS modules.
- Prefer shadcn semantic pairs (
bg-card text-card-foreground,bg-muted text-muted-foreground,bg-tertiary text-tertiary-foreground) over hardcoded colors. Legacy utilities such astext-foreground-lightandborder-defaultare compatibility aliases only. - Control surface roles (
bg-field,bg-control-raised,border-control-hover; CSS--controlaliases raised) live inbuild/css/source/semantic.css. Prefer those over inventing fills. Legacybg-controlis still the accent wash alias. - Themes set the core
--hue(or the split--surface-hue/--primary-hue),--chroma,--surface,--foreground-lightness, and--contrastinputs, plus their--muted-foreground-leveland--tertiary-foreground-levelhierarchy. Semantic colors are derived from them in OKLCH;--contrast: 1is the baseline and the supported adjustment range is0.75to1.25. - The workspace root owns the actual
tailwind.config.js. The file in this package is a stub for IntelliSense only.