wix-style-react
Version:
92 lines (91 loc) • 4.1 kB
JavaScript
export default {
description:
'Search allows users to input a query into a text field to view related results from a selection of data.',
do: [
'Use it to find relevant information inside of a page.',
'Use it to filter data sets inside of a table.',
],
dont: [
'Don’t use it to find addresses. Use <AtlasAddressInput/> or <AddressInput/> 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 it in all common cases.<br/>
 - \`small\` - use it in more dense and narrow layouts.`,
example: '_size',
},
{
title: 'Border',
description: `Style the component using \`border\` prop. It supports 3 styles:<br/>
 - \`round\` (default) - use it in all common cases.<br/>
 - \`standard\` - use it when search is part of a form.<br/>
 - \`bottomLine\` - use it as a title which can be edited on the click.`,
example: '_border',
},
{
title: 'Status',
description: `Control a component's status using \`status\` prop. It supports 3 states:<br/>
 - \`loading\` - use it to show that a value is being uploaded to the server or that an options list is loading.<br/>
 - \`error\` - inherited from input, there's no use case at the moment.<br/>
 - \`warning\` - inherited from input, there's no use case at the moment.`,
example: '_status',
},
{
title: 'Status Message',
description: `Explain the status with \`statusMessage\` prop. The message is revealed when a user hovers over the status icon.
The placement of a tooltip is controlled with \`tooltipPlacement\` prop.`,
example: '_statusMessage',
},
{
title: 'Read-Only and Disabled',
description: `Control input interaction with:<br/>
 - \`readOnly\` - disables writing new values, but allows you to copy or remove the entered value.<br/>
 - \`disabled\` - disables all input interactions. Use to highlight unavailable function.`,
example: '_readOnlyAndDisabled',
},
{
title: 'Clear Button',
description: `Remove entered keywords quickly with a clear button.
The button is enabled by default for all search fields. Avoid removing it if possible.`,
example: '_clearButton',
},
{
title: 'Options',
description: `Provide common suggestions by passing an array of \`options\` to a component.
A \`predicate\` function can be used to filter these options.<br/>
<br/>
In this example \`predicate\` makes the search input case sensitive. `,
example: '_options',
},
{
title: 'Options container dimensions',
description: `Control container size with:<br/>
 - \`maxHeightPixels\` - use it to specify maximum height for longer lists.<br/>
 - \`dropdownWidth\` - set the width to ‘auto’ or ‘max-content’ to match the content width or specify it in pixels.<br/>
 - \`minWidthPixels\` - use it to increase dropdown popover width manually.`,
example: '_optionsContainerDimensions',
},
{
title: 'Expandable',
description: `Collapse the search input into an icon button and only expand it intentionally on click with \`expandable\` prop.
Control the width of expanded input with \`expandWidth\`.`,
example: '_expandable',
},
{
title: 'Debounce',
description: `Control the delay of a search in milliseconds with \`debounceMs\` prop.
Use it to prevent sending a query to the server before the user finishes typing.`,
example: '_debounce',
},
],
commonUseCaseExamples: [
{
title: 'Filtering the list',
description: `Use search as an action inside tables or cards to filter large data sets.`,
example: '_filteringTheList',
},
],
};