wix-style-react
Version:
64 lines (63 loc) • 2.7 kB
JavaScript
export default {
description:
'Variable input allows you to display `<Tag/>` components in between plain text. Each tag represents a known variable. Input recognizes predefined text strings and matches them with an assigned variable when input loses focus (on blur).',
do: [
'Use it to automatically generate a message or a value that includes one or multiple dynamic values',
],
dont: [
'Don’t use it to add multiple new values as tags. Use <Multiselect/> with manual input feature instead',
],
featureExamples: [
{
title: 'Size',
description: `Adjust the component size using the size prop. It supports 3 sizes:<br/>
 - \`large\` - use when the input needs emphasis<br/>
 - \`medium\` (default) - use for all common cases<br/>
 - \`small\` - use in dense and narrow layouts`,
example: '_size',
},
{
title: 'Status',
description: `Control the component status using the \`status\` prop. It supports 3 states:<br/>
 - \`error\` - use to highlight an invalid input<br/>
 - \`warning\` - use to highlight inputs that impact users or can’t be validated<br/>
 - \`loading\` - use to show that the value is being uploaded to the server<br/>`,
example: '_status',
},
{
title: 'Status Message',
description: `Explain the status with the \`statusMessage\` prop. A tooltip pops up when a user mouse hovers over the status icon.`,
example: '_statusMessage',
},
{
title: 'Read-Only and Disabled',
description: `Control input interaction with:<br/>
 - \`readOnly\` - disables writing new values, but allows to copy the current value<br/>
 - \`disabled\` - disables all input interactions. Use to highlight unavailable functions.<br/>`,
example: '_readOnlyAndDisabled',
},
{
title: 'Rows',
description: `Set the height of a component to fit a specified number of rows.`,
example: '_rows',
},
{
title: 'Multiline',
description: `Control content scroll direction with the \`multiline\` prop. Multiline is allowed by default.
Disabling it results in content scrolling horizontally inside of an input.`,
example: '_multiline',
},
],
commonUseCaseExamples: [
{
title: 'Manual embed',
description: `Use a button outside of an input to allow user to embed variables from a predefined list manually.`,
example: '_manualEmbed',
},
{
title: 'Automations',
description: `Use the variable input to send personalized messages and updates.`,
example: '_automations',
},
],
};