wix-style-react
Version:
41 lines (40 loc) • 1.74 kB
JavaScript
export default {
description:
'A Status Indicator highlights the status of UI elements with an explanatory message that’s displayed in a tooltip. It’s an internal component of various form inputs.',
do: ['Use it as a building part for components that require validation.'],
dont: [
"Don't use it as a standalone item to indicate loading for lists or layouts, use <Loader/> instead.",
],
featureExamples: [
{
title: 'Status',
description: `Controls the indication type with the status prop. It supports 3 options:<br/>
 - \`error\` - Use it to highlight invalid values, failed actions and processes.<br/>
 - \`warning\` - Use it to highlight areas that require extra attention, like if a filled password was compromised.<br/>
 - \`loading\` - Use it to show that an input value is being loaded.`,
example: '_status',
},
{
title: 'Message',
description: `Explain the status with a message prop.
The \`message\` is revealed in a tooltip when the users’ mouse hovers over the status icon. `,
example: '_message',
},
{
title: 'Tooltip placement',
description: `Position the tooltip with the \`tooltipPlacement\` prop. It can appear on 4 sides:<br/>
 - \`top (default)\` <br/>
 - \`right\` <br/>
 - \`bottom\` <br/>
 - \`left\``,
example: '_tooltipPlacement',
},
],
commonUseCaseExamples: [
{
title: 'Integral part of form elements',
description: `A status indicator is used as a building block for a variety of form components that require validation or data processing.`,
example: '_formElements',
},
],
};