mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 18:35:07 +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 -->
Supabase UI Patterns
This package should be used for components which are built using NPM libraries (react-markdown, reactflow for example),
which make no sense to be included in all apps. It should also be used for components which are constructed using various
components from the ui package.
This package does not have a barrel file - each component has to be imported from its index
(ui-patterns/PrivacySettings, for example). This is intentional so that adding a new component which is used only in
1 or 2 apps doesn't burden the rest of the apps.