react-native-ui-lib 7.38.1-snapshot.6362 → 7.38.1-snapshot.6370
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -8,8 +8,16 @@
|
|
|
8
8
|
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPalette/ColorPalette.gif?raw=true"
|
|
9
9
|
],
|
|
10
10
|
"props": [
|
|
11
|
-
{
|
|
12
|
-
|
|
11
|
+
{
|
|
12
|
+
"name": "colors",
|
|
13
|
+
"type": "string[]",
|
|
14
|
+
"description": "Array of colors to render in the palette"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"name": "value",
|
|
18
|
+
"type": "string",
|
|
19
|
+
"description": "The value of the selected swatch"
|
|
20
|
+
},
|
|
13
21
|
{
|
|
14
22
|
"name": "usePagination",
|
|
15
23
|
"type": "boolean",
|
|
@@ -22,7 +30,12 @@
|
|
|
22
30
|
"description": "Whether the colors pagination scrolls in a loop",
|
|
23
31
|
"default": "true"
|
|
24
32
|
},
|
|
25
|
-
{
|
|
33
|
+
{
|
|
34
|
+
"name": "numberOfRows",
|
|
35
|
+
"type": "number",
|
|
36
|
+
"description": "The number of color rows from 2 to 5",
|
|
37
|
+
"default": "3"
|
|
38
|
+
},
|
|
26
39
|
{
|
|
27
40
|
"name": "animatedIndex",
|
|
28
41
|
"type": "number",
|
|
@@ -34,12 +47,36 @@
|
|
|
34
47
|
"type": "(value: string, colorInfo: ColorInfo) => void",
|
|
35
48
|
"description": "Invoked once when value changes by selecting one of the swatches in the palette"
|
|
36
49
|
},
|
|
37
|
-
{
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
{
|
|
50
|
+
{
|
|
51
|
+
"name": "swatchStyle",
|
|
52
|
+
"type": "ViewStyle",
|
|
53
|
+
"description": "Style to pass all the ColorSwatches in the palette"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"name": "containerWidth",
|
|
57
|
+
"type": "number",
|
|
58
|
+
"description": "The container margins"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"name": "containerStyle",
|
|
62
|
+
"type": "ViewStyle",
|
|
63
|
+
"description": "Component's container style"
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"name": "style",
|
|
67
|
+
"type": "ViewStyle",
|
|
68
|
+
"description": "Component's style"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"name": "testID",
|
|
72
|
+
"type": "string",
|
|
73
|
+
"description": "The test id for e2e tests"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"name": "backgroundColor",
|
|
77
|
+
"type": "string",
|
|
78
|
+
"description": "The ColorPalette's background color"
|
|
79
|
+
}
|
|
43
80
|
],
|
|
44
81
|
"snippet": [
|
|
45
82
|
"<ColorPalette",
|
|
@@ -47,5 +84,61 @@
|
|
|
47
84
|
" value={selectedColor$2}",
|
|
48
85
|
" onValueChange={() => console.log('value changed')$3}",
|
|
49
86
|
"/>"
|
|
50
|
-
]
|
|
87
|
+
],
|
|
88
|
+
"docs": {
|
|
89
|
+
"hero": {
|
|
90
|
+
"title": "ColorPalette",
|
|
91
|
+
"description": "markdown:Our Color Palette is basically an arrangement of Color Swatches representing various colors and styles. \nIn ColorPalette only a single color swatch can be selected.",
|
|
92
|
+
"type": "hero",
|
|
93
|
+
"layout": "horizontal",
|
|
94
|
+
"content": [
|
|
95
|
+
{
|
|
96
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPalette/ColorPalette_cover.png"
|
|
97
|
+
}
|
|
98
|
+
]
|
|
99
|
+
},
|
|
100
|
+
"tabs": [
|
|
101
|
+
{
|
|
102
|
+
"title": "Overview",
|
|
103
|
+
"sections": [
|
|
104
|
+
{
|
|
105
|
+
"type": "list",
|
|
106
|
+
"items": [
|
|
107
|
+
{
|
|
108
|
+
"title": "Color Palette large (multiple rows):",
|
|
109
|
+
"description": "markdown:In some cases, product or flow will benefit from a bigger palette. \nThis type of palette is navigated with pagination. \nMinimum number of rows is 2 and maximum is 5. \nThe palette adapts to the screen width, with a minimum spacing of S5 between colors swatches.",
|
|
110
|
+
"content": [
|
|
111
|
+
{
|
|
112
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPalette/ColorPalette_types_large.png"
|
|
113
|
+
}
|
|
114
|
+
]
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"title": "Color Palette small (single row):",
|
|
118
|
+
"description": "markdown:In screens with a limited space a smaller palette can be used. \nIf the amount of color swatches is larger than the screen width, the Color Palette becomes scrollable. \nTapping the “+” button will open the Color Picker dialog, allowing user to create a custom color. \nWhen Color Palette is scrollable, “add” button will be sticky to screen left. \nAfter the custom color is created, it’s added as a Color Swatch to the right of the “add” button, and selected as the main color. \nIf the selected color is outside of the view port when screen is loaded, the palette will be scrolled to the primary swatch. \nTransparent swatches are fixed to the left of other (regular) Color Swatches.",
|
|
119
|
+
"content": [
|
|
120
|
+
{
|
|
121
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPalette/ColorPalette_types_small.png"
|
|
122
|
+
}
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
],
|
|
126
|
+
"layout": "horizontal",
|
|
127
|
+
"title": "Palette Types",
|
|
128
|
+
"description": "Color Palette can be a single row of Color Swatches or have multiple rows:"
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"type": "section",
|
|
132
|
+
"layout": "horizontal",
|
|
133
|
+
"content": [
|
|
134
|
+
{
|
|
135
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPalette/ColorPalette_types_spec.png"
|
|
136
|
+
}
|
|
137
|
+
],
|
|
138
|
+
"title": "Spec"
|
|
139
|
+
}
|
|
140
|
+
]
|
|
141
|
+
}
|
|
142
|
+
]
|
|
143
|
+
}
|
|
51
144
|
}
|
|
@@ -13,7 +13,11 @@
|
|
|
13
13
|
"type": "string[]",
|
|
14
14
|
"description": "Array of colors for the picker's color palette (hex values)"
|
|
15
15
|
},
|
|
16
|
-
{
|
|
16
|
+
{
|
|
17
|
+
"name": "value",
|
|
18
|
+
"type": "string",
|
|
19
|
+
"description": "The value of the selected swatch"
|
|
20
|
+
},
|
|
17
21
|
{
|
|
18
22
|
"name": "animatedIndex",
|
|
19
23
|
"type": "number",
|
|
@@ -31,8 +35,16 @@
|
|
|
31
35
|
"description": "Accessibility labels as an object of strings",
|
|
32
36
|
"default": "{\n addButton: 'add custom color using hex code',\n dismissButton: 'dismiss',\n doneButton: 'done',\n input: 'custom hex color code'\n}"
|
|
33
37
|
},
|
|
34
|
-
{
|
|
35
|
-
|
|
38
|
+
{
|
|
39
|
+
"name": "testID",
|
|
40
|
+
"type": "string",
|
|
41
|
+
"description": "The test id for e2e tests"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "backgroundColor",
|
|
45
|
+
"type": "string",
|
|
46
|
+
"description": "The ColorPicker's background color"
|
|
47
|
+
}
|
|
36
48
|
],
|
|
37
49
|
"snippet": [
|
|
38
50
|
"<ColorPicker",
|
|
@@ -43,5 +55,96 @@
|
|
|
43
55
|
" onSubmit={() => console.log('submit')$5}",
|
|
44
56
|
" onValueChange={() => console.log('value changed')$6}",
|
|
45
57
|
"/>"
|
|
46
|
-
]
|
|
58
|
+
],
|
|
59
|
+
"docs": {
|
|
60
|
+
"hero": {
|
|
61
|
+
"title": "ColorPicker",
|
|
62
|
+
"description": "markdown:Picking color for background, typography and other elements is possible by various means, among these are: \nColor Swatch, Color Palette and Color Picker Dialog. \nAll these can be implemented in the color picking flow. ",
|
|
63
|
+
"type": "hero",
|
|
64
|
+
"layout": "horizontal",
|
|
65
|
+
"content": [
|
|
66
|
+
{
|
|
67
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_cover.png"
|
|
68
|
+
}
|
|
69
|
+
]
|
|
70
|
+
},
|
|
71
|
+
"tabs": [
|
|
72
|
+
{
|
|
73
|
+
"title": "Overview",
|
|
74
|
+
"sections": [
|
|
75
|
+
{
|
|
76
|
+
"type": "list",
|
|
77
|
+
"items": [
|
|
78
|
+
{
|
|
79
|
+
"title": "",
|
|
80
|
+
"description": "markdown:1. Tapping 'Add New' in the Color Palette opens a color picker dialog.
\n2. Using HLS controls (or even typing actual HEX value) user can achieve any color. ",
|
|
81
|
+
"content": [
|
|
82
|
+
{
|
|
83
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_usage1.png"
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"title": "",
|
|
89
|
+
"description": "markdown:3. Changes are saved by tapping on ‘V’. \n4. New color styles is saved in the Color Palette and selected as the theme color. ",
|
|
90
|
+
"content": [
|
|
91
|
+
{
|
|
92
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_usage2.png"
|
|
93
|
+
}
|
|
94
|
+
]
|
|
95
|
+
}
|
|
96
|
+
],
|
|
97
|
+
"layout": "horizontal",
|
|
98
|
+
"title": "Usage Example",
|
|
99
|
+
"description": "In this example, user picks his own theme color."
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"type": "section",
|
|
103
|
+
"title": "Additional entry points examples",
|
|
104
|
+
"description": "As mentioned, Color Picker dialog can be triggered by various entry points. ",
|
|
105
|
+
"content": [
|
|
106
|
+
{
|
|
107
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_entryPoints.png"
|
|
108
|
+
}
|
|
109
|
+
]
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"type": "list",
|
|
113
|
+
"items": [
|
|
114
|
+
{
|
|
115
|
+
"title": "",
|
|
116
|
+
"description": "markdown:1. Tapping on the HEX value will “activate” the input field (Main Input) and display the keyboard. New color can be created either by typing a hex value or by pasting a specific value. \n2. Until new valid hex value is provided, the initial color background is kept. Hex value is highlighted with either white at 25% or black at 25%, depending on the background color. ",
|
|
117
|
+
"content": [
|
|
118
|
+
{
|
|
119
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex1.png"
|
|
120
|
+
}
|
|
121
|
+
]
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"title": "",
|
|
125
|
+
"description": "markdown:3. ‘#’ symbol is permanent and cant be deleted. \n4. Once hex value is valid (6 characters), background color changes accordingly. ",
|
|
126
|
+
"content": [
|
|
127
|
+
{
|
|
128
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex2.png"
|
|
129
|
+
}
|
|
130
|
+
]
|
|
131
|
+
}
|
|
132
|
+
],
|
|
133
|
+
"layout": "horizontal",
|
|
134
|
+
"title": "Adding HEX values manually",
|
|
135
|
+
"description": "Color Picker dialog allows manual entry of the HEX values:"
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"type": "section",
|
|
139
|
+
"title": "Spec",
|
|
140
|
+
"content": [
|
|
141
|
+
{
|
|
142
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_spec.png"
|
|
143
|
+
}
|
|
144
|
+
]
|
|
145
|
+
}
|
|
146
|
+
]
|
|
147
|
+
}
|
|
148
|
+
]
|
|
149
|
+
}
|
|
47
150
|
}
|