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

@wix/design-system

## Feature Examples


### Colors
- description: Specify a list of colors to show as swatches. Accepts HEX, RGB, HSL and string values.
- example: 
```jsx 
<StorybookComponents.Stack>
  <Swatches
    colors={[
      '#3370fb',
      '#17b0e2',
      '#c53e99',
      'rgb(200,250,0)',
      'hsl(10,100%,50%)',
      'teal',
    ]}
  />
</StorybookComponents.Stack>;
```

### Columns
- description: Define the number of columns in a single row with the `columns` prop.
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack>
    6 columns:
    <Swatches
      columns={6}
      colors={[
        '#3370fb',
        '#7852d2',
        '#17b0e2',
        '#c53e99',
        '#fdb10c',
        '#3d9fa1',
      ]}
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    3 columns:
    <Swatches
      columns={3}
      colors={[
        '#3370fb',
        '#7852d2',
        '#17b0e2',
        '#c53e99',
        '#fdb10c',
        '#3d9fa1',
      ]}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

### Gap
- description: Define the gap between color swatches using the `gap` prop. It supports pixel units.
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack>
    12px gap:
    <Swatches
      gap={12}
      colors={[
        '#3370fb',
        '#7852d2',
        '#17b0e2',
        '#c53e99',
        '#fdb10c',
        '#3d9fa1',
      ]}
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    24px gap:
    <Swatches
      gap={24}
      colors={[
        '#3370fb',
        '#7852d2',
        '#17b0e2',
        '#c53e99',
        '#fdb10c',
        '#3d9fa1',
      ]}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

### 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: 
```jsx 
<StorybookComponents.Stack>
  <Swatches
    showClear
    showClearMessage="Clear color"
    colors={[
      '#3370fb',
      '#7852d2',
      '#17b0e2',
      '#c53e99',
      '#fdb10c',
      '#3d9fa1',
      '#2bc759',
      '#ff0165',
    ]}
  />
</StorybookComponents.Stack>;
```

### Add button
- description: Add a new color swatch using the:<br/>
        &emsp;- `showAddButton` - specify whether to add button is visible<br/>
        &emsp;- `addButtonIconSize` - control the plus icon size within the button<br/>
        &emsp;- `showAddButtonMessage` -  show action description in a tooltip <br/>
        &emsp;- `onAdd` - calls assigned function <br/>
        &emsp;- `popoverProps` - control the color picker popover by passing props
- example: 
```jsx 
<StorybookComponents.Stack>
  <Swatches
    showAddButton
    addButtonIconSize="small"
    addButtonMessage="Message explaining add action"
    onAdd={() => {}}
    colors={['#3370fb', '#7852d2', '#17b0e2', '#c53e99', '#fdb10c']}
  />
</StorybookComponents.Stack>;
```

### ColorPicker customization
- description: Customize the ColorPicker by using `renderColorPicker` prop. This render prop provides full control over the color picker UI. Use it to configure the default ColorPicker with custom props like `showInput` and `showConverter`.
- example: 
```jsx 
<StorybookComponents.Stack>
  <Swatches
    showAddButton
    addButtonIconSize="small"
    addButtonMessage="Add color with input"
    renderColorPicker={({ cancel, confirm, setColor, currentColor }) => (
      <ColorPicker
        value={currentColor}
        showInput={true}
        showConverter={true}
        onCancel={cancel}
        onConfirm={confirm}
        onChange={setColor}
      />
    )}
    onAdd={() => {}}
    colors={['#3370fb', '#7852d2', '#17b0e2', '#c53e99', '#fdb10c']}
  />
</StorybookComponents.Stack>;
```




    


## Common Use Case Examples


### Inside Color Picker
- description: Use swatches in composer panels to let users create color palettes for their product.
- example: 
```jsx 
() => {
  const [value, setValue] = React.useState(null);
  const [colors, setColors] = React.useState([
    '#3370fb',
    '#7852d2',
    '#17b0e2',
    '#c53e99',
    '#fdb10c',
    '#3d9fa1',
    '#2bc759',
    '#ff0165',
  ]);

  return (
    <FormField label="Fill">
      <Box>
        <Swatches
          showAddButton
          addButtonIconSize="small"
          addButtonMessage="Add color"
          onAdd={color => setColors([...colors, color])}
          showClear
          showClearMessage="Clear color"
          colors={colors}
          onClick={setValue}
          selected={value}
        />
      </Box>
    </FormField>
  );
};
```