wix-style-react
Version:
76 lines (75 loc) • 3.32 kB
JavaScript
export default {
description:
'Input area lets users insert long text values. The large size of the field indicates that a user is expected to insert a few sentences at the least.',
do: ['Use it to insert multiple lines of text.'],
dont: ['Don’t use it to insert short text values. Use <Input/> instead.'],
featureExamples: [
{
title: 'Size',
description: `Adjust the component size using \`size\` prop. It supports 2 sizes:<br/>
 - \`medium\` (default) - use in all common cases<br/>
 - \`small\` - use in dense or narrow layouts`,
example: '_size',
},
{
title: 'Height',
description: `Control the height of an area with:<br/>
 - \`minHeight\` - use it to define the minimum height in pixels.<br/>
 - \`maxHeight\` - use it to define the maximum height in pixels.<br/>
 - \`rows\` - use it to define the height to fit a specified number of rows.`,
example: '_height',
},
{
title: 'Status',
description: `Control component status using \`status\` prop. It supports 3 states:<br/>
 - \`error\` - use it to highlight invalid value<br/>
 - \`warning\` - use it to highlight value that impact user business or can’t be validated<br/>
 - \`loading\` - use it to show that a value is being uploaded to the server<br/>`,
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 the tooltip is controlled with \`tooltipPlacement\` prop.`,
example: '_statusMessage',
},
{
title: 'Disabled and Read-Only',
description: `Control input interaction with:<br/>
 - \`readOnly\` - use it to disable writing new values, but allow copying the currently inserted value.<br/>
 - \`disabled\` - use it to disable all area interactions. Use it to highlight unavailable functions.<br/>`,
example: '_disabledAndReadOnly',
},
{
title: 'Resize',
description: `Allow users to manually adjust the size of the input area by enabling \`resizable\` prop.`,
example: '_resize',
},
{
title: 'Character count',
description: `Indicate how many characters the input area contains by enabling \`hasCounter\` prop.
In order to display a counter, you have to state the \`maxLength\` of characters allowed in the field.`,
example: '_characterCount',
},
{
title: 'Auto grow',
description: `Grow and shrink area size according to user input by enabling \`autoGrow\`.
Specify the starting height of an area with \`minRowsAutoGrow\`.`,
example: '_autoGrow',
},
{
title: 'Auto select',
description: `Select all the text in the element on focus with \`autoSelect\` prop.`,
example: '_autoSelect',
},
],
commonUseCaseExamples: [
{
title: 'Form',
description: `Use a text area in a form where the user is expected to enter more than one sentence (e.g., product descriptions, policies, etc.).
Use \`<FormField/>\` to provide a label for a field.`,
example: '_form',
},
],
};