wix-style-react/src/ColorPicker/docs/ColorPicker.content.js

wix-style-react

export default {
  description: `Color picker allows users to select a color value by dragging the cursor inside of a color spectrum. It’s a popover that should be called out via \`<ColorInput/>\`, \`<Button/>\` or another component.
      It uses this color manipulation library: [https://github.com/Qix-/color](https://github.com/Qix-/color)`,
  do: [
    'Use it to freely select any solid color.',
    'Use it to show the full spectrum of available colors to select.',
  ],
  dont: [
    'Don’t use it to select one color from a predefined set of colors. Use <Swatches/> instead.',
  ],
  featureExamples: [
    {
      title: 'Structure',
      description: `Component consists of a color spectrum canvas, an input area and a \`children\` area which is used to add swatches.
        Use the \`value\` prop to set the initial color.`,
      example: '_structure',
    },
    {
      title: 'Color converter',
      description: `Enables to view and edit color codes in HEX/RGB/HSB formats.
        Converter is visible by default and can be hidden on demand by setting the \`showConverter\` to false. `,
      example: '_colorConverter',
    },
    {
      title: 'Color value input',
      description: `Forbid manual color code edit by setting \`showInput\` to false.
        Input cannot be hidden if the color converter is visible.`,
      example: '_colorValueInput',
    },
    {
      title: 'History bar',
      description: `Compare the currently active color with a newly picked one before confirming a change with a history bar.`,
      example: '_historyBar',
    },
    {
      title: 'Accept empty value',
      description: `Allow to submit an empty value with \`allowEmpty\` prop. Use for non-mandatory color selection.
        Define the placeholder message for HEX value input with \`emptyPlaceholder\` prop.`,
      example: '_acceptEmptyValue',
    },
    {
      title: 'Add color presets',
      description: `Add a color to the swatches list by clicking the add color button.
        Pass \`<Swatches/>\` component to children and use \`onAdd\` property to add a new swatch.`,
      example: '_addColorPresets',
    },
  ],
  commonUseCaseExamples: [
    {
      title: 'Listing color options',
      description: `Call out the picker popover on any component click, for example \`<Multiselect/>\`.`,
      example: '_listingColorOptions',
    },
    {
      title: 'Color swatches',
      description: `Allow users to select a color from a list of presets by adding \`<Swatches/>\` to the \`children\` area above the submit actions.`,
      example: '_colorSwatches',
    },
  ],
};