@wix/design-system/dist/docs/components/ColorPickerExamples.md

@wix/design-system

## Feature Examples


### 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: 
```jsx 
<ColorPicker
  value="#3899EC"
>
  <StorybookComponents.Placeholder>
    Any required content
  </StorybookComponents.Placeholder>
</ColorPicker>;
```

### 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: 
```jsx 
<StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <ColorPicker value="#3899EC" />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack height="100%">
    <ColorPicker value="#3899EC" showConverter={false} />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

### 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: 
```jsx 
<ColorPicker value="#3899EC" showConverter={false} showInput={false} />;
```

### History bar
- description: Compare the currently active color with a newly picked one before confirming a change with a history bar.
- example: 
```jsx 
<ColorPicker value="#3899EC" showHistory={true} />;
```

### 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: 
```jsx 
<ColorPicker allowEmpty={true} emptyPlaceholder={'No color picked..'} />;
```

### 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: 
```jsx 
() => {
  const [value, setValue] = React.useState('#3899EC');
  const [presets, setPresets] = React.useState([
    'midnightblue',
    'darkmagenta',
    'lightcoral',
  ]);
  return (
    <ColorPicker
      value={value}
      onAdd={color => setPresets([...presets, color])}
      addTooltipContent="Add color"
    >
      <Swatches colors={presets} onClick={setValue} />
    </ColorPicker>
  );
};
```




    


## Common Use Case Examples


### Listing color options
- description: Call out the picker popover on any component click, for example `<Multiselect/>`.
- example: 
```jsx 
() => {
  const [colors, setColors] = React.useState([
    { id: 1, color: 'red' },
    { id: 2, color: 'blue' },
    { id: 3, color: 'green' },
  ]);
  const updateColors = ({ id, color }) =>
    setColors(colors.map(item => (item.id === id ? { ...item, color } : item)));
  const TagThumb = ({ color }) => (
    <Box
      backgroundColor={color}
      marginTop="24%"
      marginLeft="24%"
      borderRadius="50%"
      height="50%"
      width="50%"
    />
  );
  const TagPopover = props => {
    const [color, setColor] = React.useState(props.color);
    const [shown, setShown] = React.useState(false);
    return (
      <Popover
        showArrow
        shown={shown}
        appendTo="window"
        onClick={() => setShown(!shown)}
        onClickOutside={() => setShown(false)}
      >
        <Popover.Element>
          <Text>{color}</Text>
        </Popover.Element>
        <Popover.Content>
          <ColorPicker
            value={color}
            onCancel={() => setShown(!shown)}
            onConfirm={value => {
              setShown(false);
              updateColors({ id: props.id, color: value.hex() });
              setColor(value.hex());
            }}
            onChange={() => {}}
          />
        </Popover.Content>
      </Popover>
    );
  };
  const tags = colors.map(({ color, id }) => ({
    id,
    label: <TagPopover color={color} id={id} />,
    thumb: <TagThumb color={color} />,
  }));
  return (
    <MultiSelect
      tags={tags}
      mode="select"
      placeholder="Select tags from a list"
    />
  );
};
```

### 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: 
```jsx 
() => {
  const [value, setValue] = React.useState('#3899EC');
  const [colors, setColors] = React.useState([
    'midnightblue',
    'darkmagenta',
    'lightcoral',
  ]);

  return (
    <ColorPicker
      value={value}
      onChange={setValue}
      onCancel={setValue}
      onAdd={color => setColors([...colors, color])}
    >
      {({ changeColor }) => (
        <Swatches
          colors={colors}
          onClick={color => {
            changeColor(color);
          }}
        />
      )}
    </ColorPicker>
  );
};
```