react-native-ui-lib 7.38.1-snapshot.6367 → 7.38.1-snapshot.6373
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
|
@@ -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
|
}
|
|
@@ -157,7 +157,17 @@
|
|
|
157
157
|
"Top",
|
|
158
158
|
"Bottom"
|
|
159
159
|
],
|
|
160
|
-
"items": [
|
|
160
|
+
"items": [
|
|
161
|
+
{
|
|
162
|
+
"title": "Left"
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"title": "Center"
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"title": "Right"
|
|
169
|
+
}
|
|
170
|
+
],
|
|
161
171
|
"title": "Alignment",
|
|
162
172
|
"description": "The Hint component supports different alignments, so it works well with elements anywhere on the screen."
|
|
163
173
|
},
|
|
@@ -167,16 +177,37 @@
|
|
|
167
177
|
"Prop",
|
|
168
178
|
"Preview"
|
|
169
179
|
],
|
|
170
|
-
"items": [
|
|
180
|
+
"items": [
|
|
181
|
+
{
|
|
182
|
+
"title": "None"
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
"title": "Icon"
|
|
186
|
+
}
|
|
187
|
+
],
|
|
171
188
|
"title": "Accessories"
|
|
172
189
|
},
|
|
173
190
|
{
|
|
174
191
|
"type": "section",
|
|
175
|
-
"title": "Position"
|
|
192
|
+
"title": "Position",
|
|
193
|
+
"layout": "horizontal",
|
|
194
|
+
"content": [
|
|
195
|
+
{
|
|
196
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_position.png"
|
|
197
|
+
}
|
|
198
|
+
],
|
|
199
|
+
"description": "Distance\nKeep a distance of S2 from the component the hint is pointing at."
|
|
176
200
|
},
|
|
177
201
|
{
|
|
178
202
|
"type": "section",
|
|
179
|
-
"title": "Spec"
|
|
203
|
+
"title": "Spec",
|
|
204
|
+
"layout": "horizontal",
|
|
205
|
+
"content": [
|
|
206
|
+
{
|
|
207
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_spec.png"
|
|
208
|
+
}
|
|
209
|
+
],
|
|
210
|
+
"description": "The Hint component adjusts to its content.\nMax width: screen width, S4 margins."
|
|
180
211
|
}
|
|
181
212
|
]
|
|
182
213
|
}
|