Skip to content

Commit f991f6b

Browse files
rnuinoci[bot]M-i-k-e-l
rnuinoci[bot]
and
M-i-k-e-l
authored
Update colorpicker api.json (#3573)
* wix-noci: update api.json * Update ReactLiveScope and fix space --------- Co-authored-by: rnuinoci[bot] <182611266+rnuinoci[bot]@users.noreply.github.com> Co-authored-by: M-i-k-e-l <[email protected]>
1 parent 8ea6473 commit f991f6b

File tree

2 files changed

+110
-5
lines changed

2 files changed

+110
-5
lines changed

‎docuilib/src/theme/ReactLiveScope/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import Carousel from 'react-native-ui-lib/carousel';
1111
import Checkbox from 'react-native-ui-lib/checkbox';
1212
import Chip from 'react-native-ui-lib/chip';
1313
import ColorPalette from 'react-native-ui-lib/colorPalette';
14+
import ColorPicker from 'react-native-ui-lib/colorPicker';
1415
import ColorSwatch from 'react-native-ui-lib/colorSwatch';
1516
import Constants from 'react-native-ui-lib/constants';
1617
import Drawer from 'react-native-ui-lib/drawer';
@@ -72,9 +73,10 @@ const ReactLiveScope = {
7273
Checkbox,
7374
Chip,
7475
ColorPalette,
76+
ColorPicker,
77+
Colors,
7578
ColorSwatch,
7679
Constants,
77-
Colors,
7880
Drawer,
7981
Hint,
8082
Icon,

‎src/components/colorPicker/colorPicker.api.json

Lines changed: 107 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@
1313
"type": "string[]",
1414
"description": "Array of colors for the picker's color palette (hex values)"
1515
},
16-
{"name": "value", "type": "string", "description": "The value of the selected swatch"},
16+
{
17+
"name": "value",
18+
"type": "string",
19+
"description": "The value of the selected swatch"
20+
},
1721
{
1822
"name": "animatedIndex",
1923
"type": "number",
@@ -31,8 +35,16 @@
3135
"description": "Accessibility labels as an object of strings",
3236
"default": "{\n addButton: 'add custom color using hex code',\n dismissButton: 'dismiss',\n doneButton: 'done',\n input: 'custom hex color code'\n}"
3337
},
34-
{"name": "testID", "type": "string", "description": "The test id for e2e tests"},
35-
{"name": "backgroundColor", "type": "string", "description": "The ColorPicker's background color"}
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+
}
3648
],
3749
"snippet": [
3850
"<ColorPicker",
@@ -43,5 +55,96 @@
4355
" onSubmit={() => console.log('submit')$5}",
4456
" onValueChange={() => console.log('value changed')$6}",
4557
"/>"
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+
}
47150
}

0 commit comments

Comments
 (0)