mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
Danny White
bfe07a5937
## What kind of change does this PR introduce?
Bug fix and design-system documentation update.
## What is the current behaviour?
Multi-select examples inconsistently hide the default trigger icon,
which makes the component default difficult to understand from the
design-system page.
The empty trigger label and selected badges also use different content
heights. Selecting or removing the first item causes the default 34px
trigger to grow or shrink slightly.
## What is the new behaviour?
- Shows the default trigger icon in every existing multi-select example
- Adds a dedicated **Without trigger icon** example for
`showIcon={false}`
- Normalises the label and badge content rows to 20px so the default
trigger remains 34px when the first item is selected or removed
- Adds regression coverage for the default trigger height classes
This follows the 34px trigger sizing introduced in
[#48696](https://github.com/supabase/supabase/pull/48696).
## To test
1. Open [Design System > Fragment Components > Multi
Select](https://design-system-git-dnywh-fixmulti-select-icon-ex-772e13-supabase.vercel.app/design-system/docs/fragments/multi-select).
2. Confirm every existing example shows the default trigger icon.
3. Confirm the new **Without trigger icon** example is the only example
without it.
4. In the first example, select and remove the first fruit. The trigger
should remain the same height throughout.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a multi-select example that hides the trigger icon.
* Added documentation and a preview for using multi-select without a
trigger icon.
* **Bug Fixes**
* Improved multi-select badge and label alignment.
* Preserved consistent trigger height when selecting the first item.
* Updated examples to display the trigger icon by default.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import { useState } from 'react'
|
|
import {
|
|
MultiSelector,
|
|
MultiSelectorContent,
|
|
MultiSelectorItem,
|
|
MultiSelectorList,
|
|
MultiSelectorTrigger,
|
|
} from 'ui-patterns/multi-select'
|
|
|
|
export default function MultiSelectDemo() {
|
|
const [selectedValues, setSelectedValues] = useState<string[]>(['Apple'])
|
|
|
|
return (
|
|
<MultiSelector values={selectedValues} onValuesChange={setSelectedValues}>
|
|
<MultiSelectorTrigger
|
|
mode="inline-combobox"
|
|
className="w-72"
|
|
label="Select fruits"
|
|
deletableBadge
|
|
badgeLimit="wrap"
|
|
/>
|
|
<MultiSelectorContent>
|
|
<MultiSelectorList>
|
|
<MultiSelectorItem value="Apple">Apple</MultiSelectorItem>
|
|
<MultiSelectorItem value="Banana">Banana</MultiSelectorItem>
|
|
<MultiSelectorItem value="Cherry">Cherry</MultiSelectorItem>
|
|
<MultiSelectorItem value="Date">Date</MultiSelectorItem>
|
|
<MultiSelectorItem value="Elderberrie">Elderberrie</MultiSelectorItem>
|
|
<MultiSelectorItem value="Fig">Fig</MultiSelectorItem>
|
|
<MultiSelectorItem value="Grape">Grape</MultiSelectorItem>
|
|
<MultiSelectorItem value="Kiwi">Kiwi</MultiSelectorItem>
|
|
<MultiSelectorItem value="Mango">Mango</MultiSelectorItem>
|
|
<MultiSelectorItem value="Strawberry">Strawberry</MultiSelectorItem>
|
|
</MultiSelectorList>
|
|
</MultiSelectorContent>
|
|
</MultiSelector>
|
|
)
|
|
}
|