wix-style-react
Version:
53 lines (52 loc) • 1.99 kB
JavaScript
export default {
description:
'Swatches allows to display a list of predefined color options to choose from.',
do: [
'Use it to select a single color from a predefined color palette.',
'Use it to display solid color options.',
'Use it to create a list of color options when used with ColorPicker.',
],
dont: [
'Don’t use it to display gradient or image fill options. Use <FillPreview/> instead.',
'Don’t use it to select a custom color, use <ColorInput/> instead.',
],
featureExamples: [
{
title: 'Colors',
description: `Specify a list of colors to show as swatches. Accepts HEX, RGB, HSL and string values.`,
example: '_colors',
},
{
title: 'Columns',
description: `Define the number of columns in a single row with the \`columns\` prop.`,
example: '_columns',
},
{
title: 'Gap',
description: `Define the gap between color swatches using the \`gap\` prop. It supports pixel units.`,
example: '_gap',
},
{
title: 'Clear color',
description: `Allows user to select a ‘Clear color’ option. This option is added as a first item on the list using the \`showClear\` prop.
Provide an explanatory message with the \`showClearMessage\` prop.`,
example: '_clearColor',
},
{
title: 'Add button',
description: `Add a new color swatch using the:<br/>
 - \`showAddButton\` - specify whether to add button is visible<br/>
 - \`addButtonIconSize\` - control the plus icon size within the button<br/>
 - \`showAddButtonMessage\` - show action description in a tooltip <br/>
 - \`onAdd\` - calls assigned function`,
example: '_addButton',
},
],
commonUseCaseExamples: [
{
title: 'Inside Color Picker',
description: `Use swatches in composer panels to let users create color palettes for their product.`,
example: '_insideColorPicker',
},
],
};