wix-style-react
Version:
127 lines (126 loc) • 5.99 kB
JavaScript
export default {
description:
'MultiSelectCheckbox allows to select multiple items from a predefined list of options.',
do: [
'Use it to select multiple items from a list of options.',
'Use it as a filter for data sets.',
],
dont: [
'Don’t use it to select a single item only. Use <Dropdown/> instead.',
'Don’t use it if user should be able to add new values to the list as well. Use <Multiselect/> 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 the 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 the component is used as a filter<br/>
 - \`bottomLine\` - use as a title that can be edited on click.`,
example: '_border',
},
{
title: 'Status',
description: `Control the component status using a \`status\` prop. It supports 3 states:<br/>
 - \`error\` - use to highlight an invalid selection<br/>
 - \`warning\` - use to highlight a value that impacts the user or that can’t be validated<br/>
 - \`loading\` - use to show that the value is being uploaded to the server<br/>
<br/>
Hide the status suffix and indicate the state with border color 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 the input value with additional information added to the \`prefix\` and \`suffix\` props.
Props can contain text, icons and even badges.`,
example: '_affix',
},
{
title: 'Clear Button',
description: `Enable a button that clears the dropdown value by using \`clearButton\` prop.
Show it when the field value is optional or needs to be cleared.`,
example: '_clearButton',
},
{
title: 'Fixed header and footer',
description: `Add related actions to fixed the 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: 'Delimiter',
description: `Specify what character to use to separate selected options with the \`delimiter\` prop.`,
example: '_delimiter',
},
{
title: 'Lazy loading',
description: `Indicate that options are loading from a server or load a large list of items gradually with the \`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',
},
{
title: 'Selected items value',
description: `Customize how the selected values are represented inside of an input.`,
example: '_selectedItemsValue',
},
],
commonUseCaseExamples: [
{
title: 'Form element',
description: `Use MultiSelectCheckbox in forms to apply multiple values.`,
example: '_formElement',
},
{
title: 'List item builders',
description: `Build custom layouts within a list item builder for advanced filters.`,
example: '_commonUseCaseListBuilders',
},
],
};