@wix/design-system
Version:
@wix/design-system
70 lines (43 loc) • 1.65 kB
Markdown
## Feature Examples
### Colors
- description: Specify a list of colors to show as swatches. Accepts HEX, RGB, HSL and string values.
- example:
```jsx
```
### Columns
- description: Define the number of columns in a single row with the `columns` prop.
- example:
```jsx
```
### Gap
- description: Define the gap between color swatches using the `gap` prop. It supports pixel units.
- example:
```jsx
```
### 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
```
### 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 <br/>
 - `popoverProps` - control the color picker popover by passing props
- example:
```jsx
```
### 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
```
## Common Use Case Examples
### Inside Color Picker
- description: Use swatches in composer panels to let users create color palettes for their product.
- example:
```jsx
```