wix-style-react
Version:
123 lines (122 loc) • 5.97 kB
JavaScript
export default {
description:
'Dropdown allows users to select an item from a predefined list of options.',
do: [
'Use it to select a single item from a relatively short list of options (i.e., 5 to 10 items).',
'Use it when a full list of available options is secondary information and don’t have to be revealed right away.',
],
dont: [
'Don’t use it for boolean operations. Use <ToggleSwitch/> instead.',
'Don’t use it to select an item from a few available options (i.e., 2-4 options). Use <RadioGroup/> instead.',
'Don’t use it to select an item from large lists of options (i.e. 11 and above). Use <Autocomplete/> or <SelectorList/> instead.',
],
featureExamples: [
{
title: 'Size',
description: `Adjust the component size using the \`size\` prop. It supports 3 sizes:<br/>
 - \`large\` - use it in onboarding flows, where field needs emphasis<br/>
 - \`medium\` (default) - use in all common cases<br/>
 - \`small\` - use in more dense and narrow layouts`,
example: '_size',
},
{
title: 'Border',
description: `Style the component using the \`border\` prop. It supports 3 styles:<br/>
 - \`standard\` (default) - use in forms<br/>
 - \`round\` - use when component is used as a filter<br/>
 - \`bottomLine\` - use as a title which can be edited on the click`,
example: '_border',
},
{
title: 'Status',
description: `Control component status using the \`status\` prop. It supports 3 states:<br/>
 - \`error\` - use to highlight invalid selection<br/>
 - \`warning\` - use to highlight value that impact user business or can’t be validated<br/>
 - \`loading\` - use to show that the value is being uploaded to the server<br/>
<br/>
Hide status suffix and indicate state with border colour only by setting \`hideStatusSuffix\` to true.`,
example: '_status',
},
{
title: 'Status Message',
description: `Explain the status with \`statusMessage\` prop.
The message is revealed when a user mouse hovers the status icon. The placement of a tooltip is controlled with \`tooltipPlacement\` prop.`,
example: '_statusMessage',
},
{
title: 'Disabled',
description: `Disable all input interactions with \`disabled\` prop. Use to highlight unavailable functions.`,
example: '_disabled',
},
{
title: 'Affix',
description: `Support dropdown value with additional information added to \`prefix\` and \`suffix\` props.
Props can contain text, icons and even buttons.`,
example: '_affix',
},
{
title: 'Clear Button',
description: `Enable a button that clears dropdown value by using \`clearButton\` prop.
Show it when field value is optional or often has to be clear.`,
example: '_clearButton',
},
{
title: 'Fixed header and footer',
description: `Add related actions to fixed footer or header areas. Areas keep their position on scroll.`,
example: '_fixedHeaderAndFooter',
},
{
title: 'List item builders',
description: `Build custom options layouts with:<br/>
 - \`listItemSectionBuilder\` - use to group items into sections by type. See <a href="https://www.wix-style-react.com/?path=/story/components-api-components--listitemsection">ListItemSection</a> for more details.<br/>
 - \`listItemActionBuilder\` - use to add text button for related list actions, i.e. ‘Manage categories’. See <a href="https://www.wix-style-react.com/?path=/story/components-api-components--listitemaction">ListItemAction</a> for more details. <br/>
 - \`listItemSelectBuilder\` - use to build custom list designs. See <a href="https://www.wix-style-react.com/?path=/story/components-api-components--listitemselect">ListItemSelect</a> for more details.`,
example: '_listItemBuilders',
},
{
title: 'List container dimensions',
description: `Control the container size for options with:<br/>
 - \`maxHeightPixels\` - use to specify maximum height for longer lists<br/>
 - \`dropdownWidth\` - set width to ‘auto’ or ‘max-content’ to match content width or specify it in pixels<br/>
 - \`minWidthPixels\` - use to increase dropdown popover width manually<br/>
<br/>
By default, the dropdown matches the input field width.`,
example: '_listContainerDimensions',
},
{
title: 'Marked option',
description: `Control what to highlight with a hover state once the dropdown is opened with the \`markedOption\` prop.`,
example: '_markedOption',
},
{
title: 'Native support',
description: `Switch to native support for mobile usage. Avoid using it for desktop applications.`,
example: '_nativeSupport',
},
{
title: 'Lazy loading',
description: `Load items gradually with \`infiniteScroll\`, \`loadMore\` and \`hasMore\` props.`,
example: '_lazyLoading',
},
{
title: 'Text overflow',
description: `Control text overflow for:<br/>
 - The field itself. Set the \`textOverflow\` prop either to \`clip\` or \`ellipsis\`<br/>
 - The dropdown layout. It wraps longer values by default.
In order to have ellipses, select the items that have to be rendered with the \`listItemSelectBuilder\`.`,
example: '_textOverflow',
},
],
commonUseCaseExamples: [
{
title: 'Members list',
description: `Use \`listItemSelectBuilder\` to create a custom option layout. I.e. with avatars, icons, images.`,
example: '_membersList',
},
{
title: 'Grouping',
description: `Use \`listItemSectionBuilder\` to group options into categories.`,
example: '_grouping',
},
],
};