wix-style-react
Version:
57 lines (56 loc) • 2.5 kB
JavaScript
export default {
description:
'Color input allows the user to specify a color, either by using a visual color picker or by entering the HEX color code manually into a text field.',
do: ['Use it to specify the custom color of a physical or digital item'],
dont: [
'Don’t use it to select color from a predefined list of options. Use <Swatches/> instead. ',
],
featureExamples: [
{
title: 'Size',
description: `Adjust the component size using \`size\` prop. It supports 3 sizes:<br/>
 - \`large\` - use where input needs more emphasis<br/>
 - \`medium\` (default) - use in all common cases<br/>
 - \`small\` - use in dense and narrow layouts`,
example: '_size',
},
{
title: 'Status',
description: `Control component status using \`status\` prop. It supports 3 states:<br/>
 - \`error\` - use to highlight an invalid color value<br/>
 - \`warning\` - use to highlight inputs that impact other elements or can’t be validated<br/>
 - \`loading\` - use to show that the value is being uploaded to the server`,
example: '_status',
},
{
title: 'Status Message',
description: `Explain the status with \`statusMessage\` prop. The message is revealed when a user mouse hovers over the status icon.
The placement of a tooltip is controlled with \`tooltipPlacement\` prop.`,
example: '_statusMessage',
},
{
title: 'Disabled',
description: `Disable all input interactions with \`disabled\` prop. Use to highlight unavailable functions.`,
example: '_readOnlyAndDisabled',
},
{
title: 'Popover',
description: `Control color picker popover by passing \`<Popover/>\` properties via \`popoverProps\`.
Check <a href="https://www.wix-style-react.com/?path=/story/components-api-components--popover">\`<Popover/>\`</a> API for a full list.`,
example: '_popover',
},
{
title: 'Add color presets',
description: `Add a color to the swatches list by clicking the add color button.
Use combination of \`colorPickerChildren\` and \`onAddColor\` properties. `,
example: '_addColorPresets',
},
],
commonUseCaseExamples: [
{
title: 'Custom text color',
description: `Use color input in a variety of composers to define custom colors for text, background fills, icons, etc.`,
example: '_customTextColor',
},
],
};