wix-style-react
Version:
63 lines (62 loc) • 2.57 kB
JavaScript
export default {
description:
'Rich text input area allows you to insert long sections of text, with the possibility to apply custom formatting, such as bold text, lists and links.',
do: [
'Use it to insert multiple lines of text.',
'Use it to allow users to apply a custom style to the text they write.',
],
dont: ['Don’t use it to insert short lines of text. Use <Input/> instead.'],
featureExamples: [
{
title: 'Height',
description: `Control the height of the text area (toolbar not included) with:<br/>
 - \`minHeight\` - use it to set minimum height in pixels.<br/>
 - \`maxHeight\` - use it to set the maximum height in pixels. After the limit is reached an inner scroll appears.<br/>
<br/>
If undefined, the text area height is dynamic and grows or shrinks according to the user input.`,
example: '_height',
},
{
title: 'Status',
description: `Control component status using \`status\` prop. It supports 3 states:<br/>
 - \`error\` - use it to highlight an invalid value.<br/>
 - \`warning\` - use it to highlight something that impacts the user 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.`,
example: '_statusMessage',
},
{
title: 'Text format',
description: `This component supports the following formatting:<br/>
 - Bold <br/>
 - Italic <br/>
 - Underline <br/>
 - Hyperlink <br/>
 - Bullet point list <br/>
 - Numbered list`,
example: '_textFormat',
},
{
title: 'Custom button labels',
description: `Customize the label for each action via \`toolbarButtons\` prop.`,
example: '_customButtonLabels',
},
{
title: 'Spell check',
description: `Enable standard browser spell check functionality with \`spellCheck\` prop. This does not affect IE browsers.`,
example: '_spellCheck',
},
],
commonUseCaseExamples: [
{
title: 'Form',
description: `The rich text input area is often used for writing a product description that spans multiple paragraphs.
In complex product descriptions, text formatting improves readability.`,
example: '_form',
},
],
};