UNPKG

@wix/design-system

Version:

@wix/design-system

www.wixdesignsystem.com

56 lines (52 loc) • 2.12 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
### colors - type: array - description: Defines an array of colors to be shown as swatches. ### selected - type: string - description: Specifies which color from the list is in a selected state. ### dataHook - type: string - description: Applies a data-hook HTML attribute that can be used in the tests ### onClick - type: func - description: Defines a callback function for user click on a swatch. Returns color HEX string representation. ### size - type: enum - description: Size of swatches ### showClear - type: bool - description: Specifies whether to display a 'No color' option as a first item on a list or not. ### showClearMessage - type: node - description: Defines a message to display on 'No color' option hover. `showClear` must be set to true. ### onAdd - type: func - description: Defines a callback function for 'Add' button click. Returns color HEX string representation once user selects a color to be added. ### onChange - type: func - description: Defines a callback function for color change. Returns color HEX string representation. ### onCancel - type: func - description: Defines a callback function for color picker popover 'Cancel' action (user closes it without picking color). ### showAddButton - type: bool - description: Specifies whether New color' button is displayed or not. Add button opens up a color picker. ### addButtonMessage - type: string - description: Specifies a message to display on 'Add' button hover. If not provided, the tooltip won't be displayed. ### addButtonIconSize - type: enum - description: Controls the size of a plus icon inside of the add button. ### columns - type: number - description: Specifies a number of columns in a single row. Default value is 6. ### gap - type: number - description: Specifies a gap between swatches in pixels. Default value is 12px. ### popoverProps - type: shape - description: Props that get passed to New color popover. ### renderColorPicker - type: func - description: Custom render function for the color picker. Provides full control over the color picker UI and behavior.