studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(react) add monoline props to multi select

Browse Source 
We want to enable a mode that prevent the pills the wrap on multiple
lines in order to control any height overflowing. In monoline mode the
selected items are displayed as text to allow text ellipsis, and the
menu renders the list items with checkboxes.
This commit is contained in:
Nathan Vasse
2023-11-21 16:51:32 +01:00
committed by NathanVss
parent 7c13badeb2
commit 94b32be5d3
14 changed files with 490 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/react/src/components/Forms/Select/multi.mdx
View File

@@ -88,6 +88,18 @@ For some reasons you might want to hide the label of the Multi-Select. You can d
<Story id="components-forms-select-multi--hidden-label"/>
</Canvas>
## Monoline
You can use `monoline` props in order to make sure the component will never wrap on multiple lines.
When using this mode the selected options will be kept in the menu with checkboxes in order to make sure the user can
always see the full list of selected options without having to scroll.
> At the moment this props cannot be used in conjunction with `searchable` props.
<Canvas sourceState="shown">
<Story id="components-forms-select-multi--monoline"/>
</Canvas>
## Custom render option
You can give customize the look of the options by providing `render` callback.