Skip to content

[pull] master from supabase:master #1224

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pull merged 2 commits into from
Sep 7, 2026
Merged

[pull] master from supabase:master #1224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0474793
fix(ui-patterns): align badges and input in the tiny multi-select tri…
SaxonF Sep 6, 2026
7996410
Bump reviewdog action misspell (#50071)
joshenlim Sep 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/avoid-typos.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ jobs:
with:
persist-credentials: false
- name: misspell
uses: reviewdog/action-misspell@9daa94af4357dddb6fd3775de806bc0a8e98d3e4 # v1.26.3
uses: reviewdog/action-misspell@ba7ac4030fa6812f8c8b2d4e516af8bc99553c32 # v1.28.0
with:
github_token: ${{ secrets.github_token }}
locale: 'US'
Expand Down
6 changes: 4 additions & 2 deletions packages/ui-patterns/src/multi-select/multi-select.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,14 @@ function MultiSelectDemo() {
describe('multi-select', () => {
it('supports the tiny control size', () => {
render(
<MultiSelector size="tiny" values={[]} onValuesChange={() => undefined}>
<MultiSelector size="tiny" values={['Apple']} onValuesChange={() => undefined}>
<MultiSelectorTrigger label="Select fruits" />
</MultiSelector>
)

expect(screen.getByRole('combobox')).toHaveClass('h-[26px]', 'p-0.5')
const trigger = screen.getByRole('combobox')
expect(trigger).toHaveClass('h-[26px]', 'p-0.5')
expect(trigger.firstElementChild).toHaveClass('gap-0.5')
})

it('renders selected values with a custom label', () => {
Expand Down
116 changes: 101 additions & 15 deletions packages/ui-patterns/src/multi-select/multi-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,14 +229,97 @@ export interface MultiSelectorTriggerProps extends React.HTMLAttributes<HTMLButt
renderValue?: (value: string) => React.ReactNode
}

// The tiny control has no vertical padding to spare, so its children stretch to the
// control height and drop their line-height; the larger sizes center normally.
const MultiSelectorTriggerVariants = cva('', {
variants: {
size: {
tiny: 'h-[26px] p-0.5 text-xs',
small: 'min-h-[34px] px-3 py-1.5 text-sm',
medium: 'min-h-[38px] px-4 py-2 text-sm',
large: 'min-h-[42px] px-4 py-2 text-base',
xlarge: 'min-h-[50px] px-6 py-3 text-base',
tiny: 'h-[26px] p-0.5 text-xs items-stretch',
small: 'min-h-[34px] px-3 py-1.5 text-sm items-center',
medium: 'min-h-[38px] px-4 py-2 text-sm items-center',
large: 'min-h-[42px] px-4 py-2 text-base items-center',
xlarge: 'min-h-[50px] px-6 py-3 text-base items-center',
},
},
defaultVariants: {
size: SIZE_VARIANTS_DEFAULT,
},
})

const MultiSelectorBadgesVariants = cva('flex overflow-hidden flex-1 min-w-0', {
variants: {
size: {
tiny: 'h-full min-h-0 items-center gap-0.5',
small: 'gap-1 -ml-1',
medium: 'gap-1 -ml-1',
large: 'gap-1 -ml-1',
xlarge: 'gap-1 -ml-1',
},
},
defaultVariants: {
size: SIZE_VARIANTS_DEFAULT,
},
})

const MultiSelectorBadgeVariants = cva(
'rounded-sm shrink-0 px-1.5 bg-surface-75 dark:bg-white/5 normal-case tracking-normal text-xs',
{
variants: {
size: {
tiny: 'h-full py-0 leading-none',
small: '',
medium: '',
large: '',
xlarge: '',
},
},
defaultVariants: {
size: SIZE_VARIANTS_DEFAULT,
},
}
)

const MultiSelectorLabelVariants = cva(
'text-foreground-muted whitespace-nowrap opacity-0 transition-opacity hidden',
{
variants: {
size: {
tiny: 'leading-none',
small: 'ml-1 leading-5.5',
medium: 'ml-1 leading-5.5',
large: 'ml-1 leading-5.5',
xlarge: 'ml-1 leading-5.5',
},
},
defaultVariants: {
size: SIZE_VARIANTS_DEFAULT,
},
}
)

const MultiSelectorInlineInputWrapperVariants = cva('px-0 flex-1 border-none truncate min-w-0', {
variants: {
size: {
tiny: 'h-full',
small: '',
medium: '',
large: '',
xlarge: '',
},
},
defaultVariants: {
size: SIZE_VARIANTS_DEFAULT,
},
})

const MultiSelectorInlineInputVariants = cva('py-0 truncate', {
variants: {
size: {
tiny: 'px-0',
small: 'px-1',
medium: 'px-1',
large: 'px-1',
xlarge: 'px-1',
},
},
defaultVariants: {
Expand Down Expand Up @@ -277,6 +360,7 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
const IS_BADGE_LIMIT_WRAP = badgeLimit === 'wrap'
const IS_NUMERIC_LIMIT = typeof badgeLimit === 'number'
const IS_INLINE_MODE = mode === 'inline-combobox'
const HAS_TINY_PLACEHOLDER = size === 'tiny' && values.length === 0

React.useEffect(() => {
if (!inputRef?.current || !badgesRef.current) return
Expand All @@ -290,8 +374,7 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
}
}, [values, badgeLimit])

const badgeClasses =
'rounded-sm shrink-0 px-1.5 bg-surface-75 dark:bg-white/5 normal-case tracking-normal text-xs'
const badgeClasses = MultiSelectorBadgeVariants({ size })

const handleTriggerClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(
(event) => {
Expand Down Expand Up @@ -326,7 +409,7 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
type="button"
role="combobox"
className={cn(
'flex w-full min-w-[200px] items-center justify-between rounded-md border',
'flex w-full min-w-[200px] justify-between rounded-md border',
'border-strong',
// Empty: raised plate. Filled: sunk well for chips.
values.length > 0 ? 'bg-field' : 'bg-control-raised',
Expand All @@ -343,8 +426,7 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
<div
ref={badgesRef}
className={cn(
'flex gap-1 overflow-hidden flex-1',
size !== 'tiny' && '-ml-1',
MultiSelectorBadgesVariants({ size }),
IS_BADGE_LIMIT_WRAP && 'flex-wrap',
!IS_BADGE_LIMIT_WRAP &&
'overflow-x-auto scrollbar-thin scrollbar-track-transparent transition-colors scrollbar-thumb-muted-foreground dark:scrollbar-thumb-muted scrollbar-thumb-rounded-lg'
Expand Down Expand Up @@ -378,7 +460,8 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
)}
<span
className={cn(
'text-foreground-muted whitespace-nowrap leading-5.5 ml-1 opacity-0 transition-opacity hidden',
MultiSelectorLabelVariants({ size }),
HAS_TINY_PLACEHOLDER && 'ml-2',
!IS_INLINE_MODE &&
(persistLabel || values.length === 0) &&
'opacity-100 visible inline'
Expand All @@ -394,10 +477,13 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
placeholder={values.length === 0 ? label : undefined}
autoFocus={false}
wrapperClassName={cn(
'px-0 flex-1 border-none truncate',
MultiSelectorInlineInputWrapperVariants({ size }),
IS_BADGE_LIMIT_WRAP && 'min-w-[85px]'
)}
className="py-0 px-1 truncate"
className={cn(
MultiSelectorInlineInputVariants({ size }),
HAS_TINY_PLACEHOLDER && 'pl-2'
)}
/>
)}
</div>
Expand All @@ -406,7 +492,7 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
<ChevronsUpDown
size={16}
strokeWidth={1.5}
className="text-foreground-lighter shrink-0 ml-1.5"
className="text-foreground-lighter shrink-0 ml-1.5 self-center"
/>
)}
</button>
Expand Down Expand Up @@ -494,7 +580,7 @@ const MultiSelectorInput = React.forwardRef<
wrapperClassName={wrapperClassName}
className={cn(
MultiSelectorInputVariants({ size }),
'text-sm bg-transparent h-full grow border-none outline-hidden placeholder:text-foreground-muted flex-1',
'bg-transparent h-full grow border-none outline-hidden placeholder:text-foreground-muted flex-1',
activeIndex !== -1 && 'caret-transparent',
className
)}
Expand Down
Loading