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 -->
174 lines
5.6 KiB
TypeScript
174 lines
5.6 KiB
TypeScript
// GENERAL
|
|
|
|
export * from './src/components/Button'
|
|
export * from './src/components/FloatingPlate'
|
|
export * from './src/components/Icon/IconBackground'
|
|
|
|
// NAV
|
|
|
|
export * from './src/components/Menu'
|
|
export * from './src/components/NavMenu'
|
|
|
|
// OVERLAYS
|
|
|
|
export * from './src/components/SidePanel'
|
|
|
|
// HTML
|
|
export {
|
|
Heading,
|
|
getAnchor,
|
|
removeAnchor,
|
|
highlightSelectedNavItem,
|
|
} from './src/components/CustomHTMLElements'
|
|
|
|
// UTILITIES
|
|
|
|
export * from './src/components/Loading'
|
|
export * from './src/components/LogoLoader'
|
|
export * from './src/components/AnimatedCounter'
|
|
export * from './src/lib/utils'
|
|
export { controlRadiusBySize } from './src/lib/raised-control-surface'
|
|
|
|
// DATA ENTRY
|
|
export * from './src/components/ExpandingTextArea'
|
|
|
|
// layout
|
|
export * from './src/components/LoadingLine'
|
|
|
|
// ai icon
|
|
export * from './src/layout/ai-icon-animation'
|
|
export { default as aiIconAnimationStyles } from './src/layout/ai-icon-animation/ai-icon-animation-style.module.css'
|
|
|
|
// theme switcher
|
|
export * from './src/components/ThemeProvider/singleThemes'
|
|
|
|
// shadcn
|
|
export * from './src/components/shadcn/ui/dropdown-menu'
|
|
export * from './src/components/shadcn/ui/sonner'
|
|
export * from './src/components/shadcn/ui/sonner-progress'
|
|
export * from './src/components/shadcn/ui/separator'
|
|
export * from './src/components/shadcn/ui/sheet'
|
|
export * from './src/components/shadcn/ui/badge'
|
|
export * from './src/components/shadcn/ui/input-otp'
|
|
export * from './src/components/shadcn/ui/alert-dialog'
|
|
export * from './src/components/shadcn/ui/avatar'
|
|
export * from './src/components/shadcn/ui/drawer'
|
|
export * from './src/components/shadcn/ui/menubar'
|
|
export * from './src/components/shadcn/ui/navigation-menu'
|
|
export * from './src/components/shadcn/ui/progress'
|
|
export * from './src/components/shadcn/ui/skeleton'
|
|
export * from './src/components/shadcn/ui/slider'
|
|
export * from './src/components/shadcn/ui/textarea'
|
|
export * from './src/components/shadcn/ui/toggle-group'
|
|
export * from './src/components/shadcn/ui/toggle'
|
|
export * from './src/components/shadcn/ui/card'
|
|
|
|
export * from './src/components/shadcn/ui/command'
|
|
|
|
export * from './src/components/shadcn/ui/context-menu'
|
|
|
|
export * from './src/components/shadcn/ui/dialog'
|
|
|
|
export * from './src/components/shadcn/ui/alert'
|
|
|
|
export * from './src/components/shadcn/ui/field'
|
|
|
|
export * from './src/components/shadcn/ui/form'
|
|
|
|
export * from './src/components/shadcn/ui/popover'
|
|
|
|
export * from './src/components/shadcn/ui/accordion'
|
|
|
|
export * from './src/components/shadcn/ui/select'
|
|
|
|
export * from './src/components/shadcn/ui/radio-group'
|
|
|
|
export * from './src/components/shadcn/ui/slider'
|
|
|
|
export * from './src/components/shadcn/ui/input'
|
|
|
|
export { Button as Button_Shadcn_ } from './src/components/shadcn/ui/button'
|
|
|
|
export * from './src/components/shadcn/ui/button-group'
|
|
|
|
export * from './src/components/shadcn/ui/breadcrumb'
|
|
|
|
export * from './src/components/shadcn/ui/text-area'
|
|
|
|
export * from './src/components/shadcn/ui/label'
|
|
|
|
export * from './src/components/shadcn/ui/input-group'
|
|
|
|
export * from './src/components/shadcn/ui/switch'
|
|
|
|
export * from './src/components/shadcn/ui/checkbox'
|
|
|
|
export * from './src/components/shadcn/ui/scroll-area'
|
|
|
|
export * from './src/components/shadcn/ui/hover-card'
|
|
|
|
export * from './src/components/shadcn/ui/aspect-ratio'
|
|
|
|
export * from './src/components/shadcn/ui/table'
|
|
export * from './src/components/ShadowScrollArea'
|
|
|
|
export * from './src/components/shadcn/ui/collapsible'
|
|
|
|
export * from './src/components/shadcn/ui/tabs'
|
|
export * from './src/components/shadcn/ui/useTabIndicator'
|
|
|
|
export * from './src/components/shadcn/ui/tooltip'
|
|
|
|
export * from './src/components/shadcn/ui/hover-card'
|
|
|
|
export * from './src/components/shadcn/ui/calendar'
|
|
|
|
export * from './src/components/shadcn/ui/scroll-area'
|
|
|
|
export * from './src/components/shadcn/ui/separator'
|
|
|
|
export * from './src/components/shadcn/ui/resizable'
|
|
|
|
export * from './src/components/radio-group-stacked'
|
|
export * from './src/components/radio-group-card'
|
|
|
|
export * from './src/components/TreeView'
|
|
|
|
export * from './src/components/shadcn/ui/chart'
|
|
export * from './src/components/shadcn/ui/sidebar'
|
|
|
|
// ICONS
|
|
export * from './src/components/StatusIcon'
|
|
export * from './src/components/SuccessCheck'
|
|
|
|
// export icons
|
|
export * from './src/components/Icon/icons/IconBriefcase2'
|
|
export * from './src/components/Icon/icons/IconBroadcast'
|
|
export * from './src/components/Icon/icons/IconChangelog'
|
|
export * from './src/components/Icon/icons/IconDatabaseChanges'
|
|
export * from './src/components/Icon/icons/IconDiscord'
|
|
export * from './src/components/Icon/icons/IconDiscussions'
|
|
export * from './src/components/Icon/icons/IconDocumentation'
|
|
export * from './src/components/Icon/icons/IconGitHubSolid'
|
|
export * from './src/components/Icon/icons/IconInstagram'
|
|
export * from './src/components/Icon/icons/IconIntegrations'
|
|
export * from './src/components/Icon/icons/IconLifeBuoy2'
|
|
export * from './src/components/Icon/icons/IconLinkedinSolid'
|
|
export * from './src/components/Icon/icons/IconMicSolid'
|
|
export * from './src/components/Icon/icons/IconPartners'
|
|
export * from './src/components/Icon/icons/IconPresence'
|
|
export * from './src/components/Icon/icons/IconProductHunt'
|
|
export * from './src/components/Icon/icons/IconTikTok'
|
|
export * from './src/components/Icon/icons/IconTwitterX'
|
|
export * from './src/components/Icon/icons/IconYCombinator'
|
|
export * from './src/components/Icon/icons/IconYoutubeSolid'
|
|
|
|
// Export hooks
|
|
export * from './src/lib/Hooks'
|
|
export * from './src/components/hooks/use-mobile'
|
|
|
|
export * from './src/components/KeyboardShortcut/KeyboardShortcut'
|
|
|
|
export * as colors from './src/lib/tailwind-demo-classes'
|
|
export * from './src/lib/constants'
|