Skip to content

Commit 30c4653

Browse files
wix-noci: update api.json (#3426)
Co-authored-by: rnuinoci[bot] <182611266+rnuinoci[bot]@users.noreply.github.com>
1 parent 26c5fa9 commit 30c4653

File tree

1 file changed

+173
-16
lines changed

1 file changed

+173
-16
lines changed

src/components/slider/slider.api.json

Lines changed: 173 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,37 @@
33
"category": "controls",
44
"description": "A Slider component",
55
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SliderScreen.tsx",
6-
"images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Slider/Slider.gif?raw=true"],
6+
"images": [
7+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Slider/Slider.gif?raw=true"
8+
],
79
"props": [
8-
{"name": "value", "type": "number", "description": "Initial value"},
9-
{"name": "minimumValue", "type": "number", "description": "Track minimum value"},
10-
{"name": "maximumValue", "type": "number", "description": "Track maximum value"},
11-
{"name": "initialMinimumValue", "type": "number", "description": "Initial minimum value", "note": "Only when `useRange` is true"},
12-
{"name": "initialMaximumValue", "type": "number", "description": "Initial maximum value", "note": "Only when `useRange` is true"},
10+
{
11+
"name": "value",
12+
"type": "number",
13+
"description": "Initial value"
14+
},
15+
{
16+
"name": "minimumValue",
17+
"type": "number",
18+
"description": "Track minimum value"
19+
},
20+
{
21+
"name": "maximumValue",
22+
"type": "number",
23+
"description": "Track maximum value"
24+
},
25+
{
26+
"name": "initialMinimumValue",
27+
"type": "number",
28+
"description": "Initial minimum value",
29+
"note": "Only when `useRange` is true"
30+
},
31+
{
32+
"name": "initialMaximumValue",
33+
"type": "number",
34+
"description": "Initial maximum value",
35+
"note": "Only when `useRange` is true"
36+
},
1337
{
1438
"name": "step",
1539
"type": "number",
@@ -31,14 +55,26 @@
3155
"type": "string",
3256
"description": "The color used for the track from minimum value to current value"
3357
},
34-
{"name": "maximumTrackTintColor", "type": "string", "description": "The track color"},
58+
{
59+
"name": "maximumTrackTintColor",
60+
"type": "string",
61+
"description": "The track color"
62+
},
3563
{
3664
"name": "renderTrack",
3765
"type": "() => ReactElement | ReactElement[]",
3866
"description": "Custom render instead of rendering the track"
3967
},
40-
{"name": "thumbTintColor", "type": "string", "description": "Thumb color"},
41-
{"name": "onValueChange", "type": "SliderOnValueChange", "description": "Callback for onValueChange"},
68+
{
69+
"name": "thumbTintColor",
70+
"type": "string",
71+
"description": "Thumb color"
72+
},
73+
{
74+
"name": "onValueChange",
75+
"type": "SliderOnValueChange",
76+
"description": "Callback for onValueChange"
77+
},
4278
{
4379
"name": "onRangeChange",
4480
"type": "SliderOnRangeChange",
@@ -59,10 +95,26 @@
5995
"type": "() => void",
6096
"description": "Callback that notifies when the reset function was invoked"
6197
},
62-
{"name": "containerStyle", "type": "ViewStyle", "description": "The container style"},
63-
{"name": "trackStyle", "type": "ViewStyle", "description": "The track style"},
64-
{"name": "thumbStyle", "type": "ViewStyle", "description": "The thumb style"},
65-
{"name": "activeThumbStyle", "type": "ViewStyle", "description": "The active (during press) thumb style"},
98+
{
99+
"name": "containerStyle",
100+
"type": "ViewStyle",
101+
"description": "The container style"
102+
},
103+
{
104+
"name": "trackStyle",
105+
"type": "ViewStyle",
106+
"description": "The track style"
107+
},
108+
{
109+
"name": "thumbStyle",
110+
"type": "ViewStyle",
111+
"description": "The thumb style"
112+
},
113+
{
114+
"name": "activeThumbStyle",
115+
"type": "ViewStyle",
116+
"description": "The active (during press) thumb style"
117+
},
66118
{
67119
"name": "disableActiveStyling",
68120
"type": "boolean",
@@ -83,7 +135,112 @@
83135
"type": "boolean",
84136
"description": "If true the component will have accessibility features enabled"
85137
},
86-
{"name": "testID", "type": "string", "description": "The component test id"},
87-
{"name": "migrate", "type": "boolean", "description": "Temporary prop required for migration to the Slider's new implementation"}
88-
]
138+
{
139+
"name": "testID",
140+
"type": "string",
141+
"description": "The component test id"
142+
},
143+
{
144+
"name": "migrate",
145+
"type": "boolean",
146+
"description": "Temporary prop required for migration to the Slider's new implementation"
147+
}
148+
],
149+
"docs": {
150+
"hero": {
151+
"title": "Slider",
152+
"description": "Sliders allow users to make selections from a range of values in a quick and interactive way.\nSliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.",
153+
"type": "hero",
154+
"layout": "horizontal",
155+
"content": [
156+
{
157+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_hero.png"
158+
}
159+
]
160+
},
161+
"tabs": [
162+
{
163+
"title": "Overview",
164+
"sections": [
165+
{
166+
"type": "section",
167+
"title": "Usage examples",
168+
"description": "Sliders can be used for various types of user input and controls, for example an amount, or a specific setting.",
169+
"content": [
170+
{
171+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_section_examples.png"
172+
}
173+
]
174+
},
175+
{
176+
"type": "table",
177+
"columns": [
178+
"Slider type",
179+
"Preview"
180+
],
181+
"items": [
182+
{
183+
"title": "Linear slider",
184+
"description": "Use this slider to allow the user to select a numeric value from a range of numbers.",
185+
"content": [
186+
{
187+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_table_linear.png"
188+
}
189+
]
190+
},
191+
{
192+
"title": "Centered slider",
193+
"description": "This type allows the user to select negative values.",
194+
"content": [
195+
{
196+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_table_centered.png"
197+
}
198+
]
199+
},
200+
{
201+
"title": "Range slider",
202+
"description": "Use this slider to allow the user to select a range of values.",
203+
"content": [
204+
{
205+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_table_range.png"
206+
}
207+
]
208+
},
209+
{
210+
"title": "Color slider",
211+
"description": "Use this slider to allow the user to select a color from a gradient range of colors.",
212+
"content": [
213+
{
214+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_table_color.png"
215+
}
216+
]
217+
}
218+
],
219+
"title": "Slider types"
220+
},
221+
{
222+
"type": "section",
223+
"layout": "horizontal",
224+
"content": [
225+
{
226+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_linear.png"
227+
}
228+
],
229+
"title": "Spec",
230+
"description": "**Linear slider**\n\n**Default**\nThumb: 24px \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
231+
},
232+
{
233+
"type": "section",
234+
"layout": "horizontal",
235+
"content": [
236+
{
237+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_range.png"
238+
}
239+
],
240+
"description": "**Range slider**\n\n**Initial state**\nWidest range is displayed by default.\n\n**Thumbs**\nThumbs should not cross each other and keep minimum distance between them of S2 (8px). Thumbs shouldn’t overlap each other when idle.\n\n**Spacing**\nMinimum spacing between idle Thumbs - S2"
241+
}
242+
]
243+
}
244+
]
245+
}
89246
}

0 commit comments

Comments
 (0)