wix-style-react
Version:
89 lines (88 loc) • 4.22 kB
JavaScript
export default {
description:
'The DropdownBase is a mechanism that allows the user to open up a dropdown layout via a specified trigger element and return a selected value for it.',
do: ['Use it to build custom filters.', 'Use it to build “sort by” actions.'],
dont: [
'Don’t use it to select relevant value in forms. Use standard <Dropdown/> instead.',
'Don’t use it to build menus. Use <PopoverMenu/> instead.',
],
featureExamples: [
{
title: '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: '_structure',
},
{
title: 'Trigger action',
description: 'Call out a popover on click or hover interactions.',
example: '_triggerAction',
},
{
title: 'Placement',
description: `Control the dropdown layout location around a trigger with the \`placement\` prop. It accepts all
<a target="_blank" href="https://www.wix-style-react.com/?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: '_placement',
},
{
title: 'Dimensions',
description: `Control dropdown layout dimensions with:<br/>
 - \`maxHeight\` - limit the height for longer list of options.<br/>
 - \`minWidth\` - control minimum width when the trigger element is narrow.<br/>
 - \`maxWidth\` - limit the width when the list contains long titles.<br/>
 - \`dynamicWidth\` - match the dropdown width to the trigger element width.<br/>`,
example: '_dimensions',
},
{
title: 'Arrow',
description:
'Control the popover arrow visibility with the `showArrow` prop. It’s not displayed by default.',
example: '_arrow',
},
{
title: 'List item builders',
description: `Build custom dropdown layouts with:<br/>
 - \`listItemSectionBuilder\` - use this element to group items into sections by type. See
<a target="_blank" href="https://www.wix-style-react.com/?path=/story/components-api-components--listitemsection">ListItemSection</a> for more details.<br/>
 - \`listItemActionBuilder\` - use this element to add text button for related list actions, e.g. "Manage categories". See
<a target="_blank" href="https://www.wix-style-react.com/?path=/story/components-api-components--listitemaction">ListItemAction</a> for more details.<br/>
 - \`listItemSelectBuilder\` - use this element to build custom list designs. See
<a target="_blank" href="https://www.wix-style-react.com/?path=/story/components-api-components--listitemselect">ListItemSelect</a> for more details.<br/>`,
example: '_listItemBuilders',
},
{
title: 'Focus on option',
description: `Control a focused element inside of dropdown with:<br/>
 - \`focusOnOption\` - control which option is highlighted when nothing is selected yet.<br/>
 - \`focusOnSelectedOption\` - scrolls list to display selected option when dropdown is opened.<br/>`,
example: '_focusOnOption',
},
{
title: 'Infinite scroll',
description:
'Load a long list of items gradually with the `infiniteScroll`, `loadMore` and `hasMore` props.',
example: '_infiniteScroll',
},
{
title: 'Animate',
description:
'Create smooth transitions by adding enter and exit animations to the popover with the `animate` prop.',
example: '_animate',
},
],
commonUseCaseExamples: [
{
title: 'Content filters',
description:
'Use DropdownBase to build custom filters for page or card content.',
example: '_contentFilters',
},
{
title: '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: '_assignTaskOrItem',
},
],
};