wix-style-react
Version:
104 lines (103 loc) • 5.16 kB
JavaScript
export default {
description:
'Autocomplete allows users to select a single item from a predefined list of options. Component provides an editable input field for filtering the list. If entry is not validated by the application it cannot be entered into a field.',
do: [
'Use it to select an item from large lists of options (10 and above).',
'Use it to select user generated data (i.e., staff member list, custom categories, labels, products, etc.)',
],
dont: [
'Don’t use it to select a single item from a short list of predefined options (less than 10). Use simple <Dropdown/> instead.',
],
featureExamples: [
{
title: 'Size',
description: `Adjust the component size using \`size\` prop. It supports 3 sizes:<br/>
 - \`large\` - use it in onboarding flows, where input needs emphasis.<br/>
 - \`medium\` (default) - use in all common cases.<br/>
 - \`small\` - use in more dense and narrow layouts.<br/>`,
example: '_size',
},
{
title: 'Border',
description: `Style the component using \`border\` prop. It supports 3 styles:<br/>
 - \`default\` - use in all common cases.<br/>
 - \`round\`(default) - use to build filters.<br/>
 - \`bottomLine\` - use as a title which can be edited on the click.<br/>`,
example: '_border',
},
{
title: 'Status',
description: `Control component status using \`status\` prop. It supports 3 states:<br/>
 - \`error\` - use to highlight invalid search keyword that have no matching results.<br/>
 - \`warning\` - use to highlight value that impact user business or can’t be validated.<br/>
 - \`loading\` - use to show that the selected value is being uploaded to the server.<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 over the status icon. The tooltip placement of a tooltip is controlled with \`tooltipPlacement\` prop.<br/>`,
example: '_statusMessage',
},
{
title: 'Disabled',
description: `Disable all input interactions with \`disabled\` prop. Use to highlight unavailable functions.`,
example: '_disabled',
},
{
title: 'Affix',
description: `Explain field 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 selected 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 list related actions to fixed footer or header areas. Areas keep their position on scroll. `,
example: '_fixedHeaderAndFooter',
},
{
title: 'List item builders',
description: `Build custom layouts with:<br/>
 - \`listItemSectionBuilder\` - use to group list items into sections by type. See ListItemSection for more details.<br/>
 - \`listItemActionBuilder\` - use to add text button for related list actions, i.e. ‘Manage categories’. See ListItemAction for more details.<br/>
 - \`listItemSelectBuilder\` - use to build custom list designs. See ListItemSelect for more details.<br/>`,
example: '_listItemBuilders',
},
{
title: 'List container dimensions',
description: `Control container size 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/>`,
example: '_listContainerDimensions',
},
{
title: 'Marked option',
description: `Control what to highlight with a hover state when autocomplete dropdown is opened with \`markedOption\` prop.`,
example: '_markedOption',
},
{
title: 'Infinite scroll',
description: `Load items gradually with \`infiniteScroll\`, \`loadMore\` and \`hasMore\` props.`,
example: '_infiniteScroll',
},
{
title: 'Text overflow',
description: `Control text overflow for:</br>
 - Field itself. Set \`textOverflow\` prop either to \`clip\` or \`ellipsis\`.<br/>
 - Dropdown layout. It wraps longer values by default. In order to have ellipsis select items have to be rendered with listItemSelectBuilder..<br/>`,
example: '_textOverflow',
},
],
commonUseCaseExamples: [
{
title: 'Custom lists',
description: `Use \`listItemSelectBuilder\` to create a custom options layout. I.e. with avatars, icons, images.`,
example: '_customLists',
},
],
};