wix-style-react
Version:
48 lines (47 loc) • 1.97 kB
JavaScript
export default {
description:
'Fill button allows to add a new color swatch to an existing list of options. It’s used as a building part for `<Swatches/>` component.',
do: [
'Use it to add a new swatch to the list of colors or gradients.',
'Use it to call out the color picker popover.',
'Use it to call out Media Manager to pick an image.',
],
dont: [
'Don’t use it as a standalone element. It should be accompanied by a list of <FillPreview/> elements or be a part of <Swatches/>.',
],
featureExamples: [
{
title: 'Icon size',
description: `Control plus icon size inside of a button:<br/>
 - \`small\` (default) - use it when the button’s width is 30 pixels or smaller.<br/>
 - \`medium\` - use it when the button's width is larger than 30 pixels.`,
example: '_iconSize',
},
{
title: 'Fill',
description: `Set the button's fill-in HEX color or linear gradient. Component allows control of the gradient direction.`,
example: '_fill',
},
{
title: 'Disabled',
description: `Restrict button interactions with \`disabled\` prop. This will prevent users from adding a new swatch.`,
example: '_disabled',
},
{
title: 'Tooltip',
description: `Explain the action with a message in a tooltip.
Control the tooltip position and behaviour by passing relevant properties via \`tooltipProps\`.`,
example: '_tooltip',
},
],
commonUseCaseExamples: [
{
title: 'Adding custom swatch',
description: `Use a fill button to add new fill options to the existing list.
It’s recommended to place it as the first item on the list, because it won’t be moved down when new colors appear, letting the user always find it.<br/>
<br/>
It can be used with \`<FileUpload/>\` to open a native file picker to upload images.`,
example: '_addingCustomSwatch',
},
],
};