@wix/design-system

## Feature Examples ### Structure - description: This component consists of a list of options inside a popover that is called out via a `trigger` element. The `trigger` can be any interactive WSR component. Usually it’s `TextButton.` - example: ```jsx () => { const options = [ { id: 0, value: 'Option 1' }, { id: 1, value: 'Option 2' }, { id: 2, value: 'Option 3' }, { id: 3, value: 'Option 4' }, { id: 4, value: 'Option 5' }, ]; return ( <DropdownBase options={options}> {({ toggle }) => ( <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}> Open Dropdown Layout </TextButton> )} </DropdownBase> ); }; ``` ### Trigger action - description: Call out a popover on click or hover interactions. - example: ```jsx () => { const [openedDropdown, setOpenedDropdown] = React.useState(false); const openDropdown = () => setOpenedDropdown(true); const closeDropdown = () => setOpenedDropdown(false); const options = [ { id: 0, value: 'Option 1' }, { id: 1, value: 'Option 2' }, { id: 2, value: 'Option 3' }, { id: 3, value: 'Option 4' }, { id: 4, value: 'Option 5' }, ]; return ( <StorybookComponents.Stack> <DropdownBase options={options}> {({ toggle }) => ( <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}> Click to open dropdown </TextButton> )} </DropdownBase> <DropdownBase options={options} onMouseEnter={openDropdown} onMouseLeave={closeDropdown} onSelect={closeDropdown} open={openedDropdown} > {() => ( <TextButton suffixIcon={<Icons.ChevronDown />}> Hover to open dropdown </TextButton> )} </DropdownBase> </StorybookComponents.Stack> ); }; ``` ### Placement - description: Control the dropdown layout location around a trigger with the `placement` prop. It accepts all <a target="_blank" href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-api-components--popover">\<Popover/></a> placement options. Move it farther from the trigger on X and Y axis with the `moveBy` prop. - example: ```jsx <DropdownBase options={[ { id: 0, value: 'Option 1' }, { id: 1, value: 'Option 2' }, { id: 2, value: 'Option 3' }, ]} placement="right-start" moveBy={{ x: 6, y: 0 }} > {({ toggle }) => ( <TextButton onClick={toggle} suffixIcon={<Icons.ChevronRight />}> Right-Start </TextButton> )} </DropdownBase>; ``` ### Dimensions - description: Control dropdown layout dimensions with: &emsp;- `maxHeight` - limit the height for longer list of options. &emsp;- `minWidth` - control minimum width when the trigger element is narrow. &emsp;- `maxWidth` - limit the width when the list contains long titles. &emsp;- `dynamicWidth` - match the dropdown width to the trigger element width. - example: ```jsx () => { const options = [ { id: 0, value: 'Option 1' }, { id: 1, value: 'Option 2' }, { id: 2, value: 'Option 3' }, { id: 3, value: 'Option 4 is quite wider than other options' }, { id: 4, value: 'Option 5' }, ]; return ( <StorybookComponents.Stack> <DropdownBase maxHeight="200px" minWidth="300px" maxWidth="800px" options={options} > {({ toggle, selectedOption = {} }) => ( <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}> {selectedOption.value || 'Controlled width'} </TextButton> )} </DropdownBase> <DropdownBase dynamicWidth options={options}> {({ toggle, selectedOption = {} }) => ( <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}> {selectedOption.value || 'Dynamic width'} </TextButton> )} </DropdownBase> </StorybookComponents.Stack> ); }; ``` ### Arrow - description: Control the popover arrow visibility with the `showArrow` prop. It’s not displayed by default. - example: ```jsx () => { const options = [ { id: 0, value: 'Option 1' }, { id: 1, value: 'Option 2' }, { id: 2, value: 'Option 3' }, ]; return ( <StorybookComponents.Stack> <DropdownBase options={options}> {({ toggle }) => ( <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}> Popover without arrow </TextButton> )} </DropdownBase> <DropdownBase showArrow options={options}> {({ toggle }) => ( <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}> Popover with arrow </TextButton> )} </DropdownBase> </StorybookComponents.Stack> ); }; ``` ### List item builders - description: Build custom dropdown layouts with: &emsp;- `listItemSectionBuilder` - use this element to group items into sections by type. See <a target="_blank" href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-api-components--listitemsection">ListItemSection</a> for more details. &emsp;- `listItemActionBuilder` - use this element to add text button for related list actions, e.g. "Manage categories". See <a target="_blank" href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-api-components--listitemaction">ListItemAction</a> for more details. &emsp;- `listItemSelectBuilder` - use this element to build custom list designs. See <a target="_blank" href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-api-components--listitemselect">ListItemSelect</a> for more details. - example: ```jsx <DropdownBase options={[ listItemSectionBuilder({ type: 'title', title: 'Group Title', }), listItemSelectBuilder({ id: 0, title: 'Title 1', subtitle: 'Subtitle', suffix: 'Suffix', label: 'Title 1', }), listItemSelectBuilder({ id: 1, title: 'Title 2', subtitle: 'Subtitle', suffix: 'Suffix', label: 'Title 2', }), listItemSectionBuilder({ type: 'divider', }), listItemActionBuilder({ title: 'Action', }), ]} > {({ toggle }) => ( <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}> Options using list item builders </TextButton> )} </DropdownBase>; ``` ### Focus on option - description: Control a focused element inside of dropdown with: &emsp;- `focusOnOption` - control which option is highlighted when nothing is selected yet. &emsp;- `focusOnSelectedOption` - scrolls list to display selected option when dropdown is opened. - example: ```jsx <StorybookComponents.Stack> <DropdownBase focusOnOption={1} options={[ { id: 0, value: 'Option 1' }, { id: 1, value: 'Option 2' }, { id: 2, value: 'Option 3' }, { id: 3, value: 'Option 4' }, { id: 4, value: 'Option 5' }, ]} > {({ toggle, selectedOption = {} }) => ( <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}> {selectedOption.value || 'Highlight on option 2'} </TextButton> )} </DropdownBase> <DropdownBase selectedId={11} focusOnSelectedOption options={[ { id: 0, value: 'Option 1' }, { id: 1, value: 'Option 2' }, { id: 2, value: 'Option 3' }, { id: 3, value: 'Option 4' }, { id: 4, value: 'Option 5' }, { id: 5, value: 'Option 6' }, { id: 6, value: 'Option 7' }, { id: 7, value: 'Option 8' }, { id: 8, value: 'Option 9' }, { id: 9, value: 'Option 10' }, { id: 10, value: 'Option 11' }, { id: 11, value: 'Scrolled list to selected option 12' }, { id: 12, value: 'Option 13' }, { id: 13, value: 'Option 14' }, { id: 14, value: 'Option 15' }, ]} > {({ toggle, selectedOption = {} }) => ( <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}> {selectedOption.value || 'Click to see highlight on Option 2'} </TextButton> )} </DropdownBase> </StorybookComponents.Stack>; ``` ### Animate - description: Create smooth transitions by adding enter and exit animations to the popover with the `animate` prop. - example: ```jsx () => { const options = [ { id: 0, value: 'Option 1' }, { id: 1, value: 'Option 2' }, { id: 2, value: 'Option 3' }, { id: 3, value: 'Option 4' }, { id: 4, value: 'Option 5' }, ]; return ( <StorybookComponents.Stack> <DropdownBase options={options}> {({ toggle }) => ( <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}> Without animation </TextButton> )} </DropdownBase> <DropdownBase animate options={options}> {({ toggle }) => ( <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}> With animation </TextButton> )} </DropdownBase> </StorybookComponents.Stack> ); }; ``` ## Common Use Case Examples ### Content filters - description: Use DropdownBase to build custom filters for page or card content. - example: ```jsx <Card> <Card.Header title="Invoice Stats" suffix={ <DropdownBase selectedId={1} focusOnSelectedOption options={[ { id: 0, value: 'Last 30 Days' }, { id: 1, value: 'This Month' }, { id: 2, value: 'This Quarter' }, { id: 3, value: 'Last Quarter' }, { id: 4, value: 'This Year' }, { id: 5, value: 'Last Year' }, ]} > {({ toggle, selectedOption = {} }) => ( <TextButton onClick={toggle} skin="dark" suffixIcon={<Icons.ChevronDown />} > {selectedOption.value} </TextButton> )} </DropdownBase> } /> <Card.Divider /> <Card.Content> <StorybookComponents.Placeholder height="200px"> Various charts </StorybookComponents.Placeholder> </Card.Content> </Card>; ``` ### Assign task or item - description: Use DropdownBase to call out popovers for the user to assign a person. Once selected, replace the trigger button with a tag representing the user. - example: ```jsx () => { const ListItem = ({ title }) => ( <TableListItem verticalPadding="small" showDivider options={[ { value: title }, { value: ( <DropdownBase options={[ listItemSelectBuilder({ id: 0, prefix: <Avatar size="size30" name="Joe Harold" />, title: 'Joe Harold', subtitle: 'joe@hotmail.com', label: 'Joe Harold', }), listItemSelectBuilder({ id: 1, prefix: <Avatar size="size30" name="Kim Lee" />, title: 'Kim Lee', subtitle: 'kim@gmail.com', label: 'Kim Lee', }), ]} > {({ toggle, selectedOption = {} }) => ( <Button size="small" skin="inverted" onClick={toggle} prefixIcon={<Icons.UserSmall />} > {selectedOption.label || 'Assign a person'} </Button> )} </DropdownBase> ), align: 'right', }, ]} /> ); return ( <Layout cols={1} gap={0}> <ListItem title="Task 1" /> <ListItem title="Task 2" /> <ListItem title="Task 3" /> </Layout> ); }; ```