react-native-ui-lib 7.40.1-snapshot.6845 → 7.40.1-snapshot.6855
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 +1 -1
- package/scripts/docs/buildDocsCommon.js +2 -1
- package/src/components/WheelPicker/wheelPicker.api.json +85 -13
- package/src/components/chip/chip.api.json +7 -1
- package/src/components/chipsInput/chipsInput.api.json +55 -9
- package/src/components/colorPalette/ColorPalette.api.json +12 -5
- package/src/components/colorPicker/colorPicker.api.json +19 -11
- package/src/components/drawer/drawer.api.json +112 -19
- package/src/components/image/image.api.json +82 -14
- package/src/components/numberInput/numberInput.api.json +50 -6
- package/src/components/pageControl/pageControl.api.json +43 -5
- package/src/components/pieChart/pieChart.api.json +43 -5
- package/src/components/radioButton/radioButton.api.json +8 -4
- package/src/components/radioGroup/radioGroup.api.json +7 -6
- package/src/components/segmentedControl/segmentedControl.api.json +10 -12
- package/src/components/slider/slider.api.json +2 -2
- package/src/components/sortableGridList/sortableGridList.api.json +31 -3
- package/src/components/stepper/stepper.api.json +3 -1
- package/src/components/test.api.json +1 -1
- package/src/incubator/slider/slider.api.json +6 -6
package/package.json
CHANGED
|
@@ -26,7 +26,8 @@ const VALID_COMPONENTS_CATEGORIES = [
|
|
|
26
26
|
'incubator',
|
|
27
27
|
'infra',
|
|
28
28
|
// non components categories
|
|
29
|
-
'services'
|
|
29
|
+
'services',
|
|
30
|
+
'dev' // development category for components we don't want to render in our docs (used in test.api.json)
|
|
30
31
|
];
|
|
31
32
|
|
|
32
33
|
function buildDocs(apiFolders, componentsPreProcess) {
|
|
@@ -6,16 +6,58 @@
|
|
|
6
6
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/WheelPickerScreen.tsx",
|
|
7
7
|
"images": [],
|
|
8
8
|
"props": [
|
|
9
|
-
{
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
{
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
9
|
+
{
|
|
10
|
+
"name": "initialValue",
|
|
11
|
+
"type": "number | string",
|
|
12
|
+
"description": "Initial value (uncontrolled)"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"name": "items",
|
|
16
|
+
"type": "WheelPickerItemProps[]",
|
|
17
|
+
"description": "Data source for WheelPicker"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"name": "itemHeight",
|
|
21
|
+
"type": "number",
|
|
22
|
+
"description": "Height of each item in the WheelPicker",
|
|
23
|
+
"default": "44"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"name": "numberOfVisibleRows",
|
|
27
|
+
"type": "number",
|
|
28
|
+
"description": "Number of rows visible",
|
|
29
|
+
"default": "5"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"name": "activeTextColor",
|
|
33
|
+
"type": "string",
|
|
34
|
+
"description": "Text color for the focused row"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "inactiveTextColor",
|
|
38
|
+
"type": "string",
|
|
39
|
+
"description": "Text color for other, non-focused rows"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"name": "textStyle",
|
|
43
|
+
"type": "TextStyle",
|
|
44
|
+
"description": "Row text custom style"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "label",
|
|
48
|
+
"type": "string",
|
|
49
|
+
"description": "Additional label to render next to the items text"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"name": "labelStyle",
|
|
53
|
+
"type": "TextStyle",
|
|
54
|
+
"description": "Additional label's style"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"name": "labelProps",
|
|
58
|
+
"type": "TextProps",
|
|
59
|
+
"description": "Additional label's props"
|
|
60
|
+
},
|
|
19
61
|
{
|
|
20
62
|
"name": "onChange",
|
|
21
63
|
"type": "(item: string | number, index: number) => void",
|
|
@@ -33,8 +75,16 @@
|
|
|
33
75
|
"description": "Align the content to center, right ot left",
|
|
34
76
|
"default": "center"
|
|
35
77
|
},
|
|
36
|
-
{
|
|
37
|
-
|
|
78
|
+
{
|
|
79
|
+
"name": "separatorsStyle",
|
|
80
|
+
"type": "ViewStyle",
|
|
81
|
+
"description": "Extra style for the separators"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"name": "testID",
|
|
85
|
+
"type": "string",
|
|
86
|
+
"description": "test identifier"
|
|
87
|
+
},
|
|
38
88
|
{
|
|
39
89
|
"name": "flatListProps",
|
|
40
90
|
"type": "FlatListProps",
|
|
@@ -47,5 +97,27 @@
|
|
|
47
97
|
" initialValue={'yes'$2}",
|
|
48
98
|
" onChange={() => console.log('changed')$3}",
|
|
49
99
|
"/>"
|
|
50
|
-
]
|
|
100
|
+
],
|
|
101
|
+
"docs": {
|
|
102
|
+
"hero": {
|
|
103
|
+
"title": "WheelPicker",
|
|
104
|
+
"description": "A customizable WheelPicker component"
|
|
105
|
+
},
|
|
106
|
+
"tabs": [
|
|
107
|
+
{
|
|
108
|
+
"title": "UX Guidelines",
|
|
109
|
+
"sections": [
|
|
110
|
+
{
|
|
111
|
+
"type": "section",
|
|
112
|
+
"content": [
|
|
113
|
+
{
|
|
114
|
+
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=13-134250&embed-host=share",
|
|
115
|
+
"height": 1600
|
|
116
|
+
}
|
|
117
|
+
]
|
|
118
|
+
}
|
|
119
|
+
]
|
|
120
|
+
}
|
|
121
|
+
]
|
|
122
|
+
}
|
|
51
123
|
}
|
|
@@ -53,6 +53,12 @@
|
|
|
53
53
|
{"name": "testID", "type": "string", "description": "The test id for e2e tests"}
|
|
54
54
|
],
|
|
55
55
|
"snippet": [
|
|
56
|
-
"<
|
|
56
|
+
"<View flex center gap-s4>",
|
|
57
|
+
"<Chip label={'Chip'} onPress={() => console.log('pressed')}/>",
|
|
58
|
+
"<Chip label={'Square'} borderRadius={2} backgroundColor={Colors.blue50}/>",
|
|
59
|
+
"<Chip label={'Badge'} badgeProps={{label: '2', backgroundColor: Colors.red30}}/>",
|
|
60
|
+
"<Chip label={'Avatar'} avatarProps={{source: {uri: 'https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/avatar_1.jpg'}}}/>",
|
|
61
|
+
"<Chip label={'Accessories'} rightElement={<Icon source={Assets.icons.demo.chevronRight}/>}/>",
|
|
62
|
+
"</View>"
|
|
57
63
|
]
|
|
58
64
|
}
|
|
@@ -2,12 +2,22 @@
|
|
|
2
2
|
"name": "ChipsInput",
|
|
3
3
|
"category": "form",
|
|
4
4
|
"description": "A chips input",
|
|
5
|
-
"extends": [
|
|
6
|
-
|
|
5
|
+
"extends": [
|
|
6
|
+
"form/TextField"
|
|
7
|
+
],
|
|
8
|
+
"modifiers": [
|
|
9
|
+
"margin",
|
|
10
|
+
"color",
|
|
11
|
+
"typography"
|
|
12
|
+
],
|
|
7
13
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ChipsInputScreen.tsx",
|
|
8
14
|
"images": [],
|
|
9
15
|
"props": [
|
|
10
|
-
{
|
|
16
|
+
{
|
|
17
|
+
"name": "chips",
|
|
18
|
+
"type": "ChipProps[]",
|
|
19
|
+
"description": "List of chips to render"
|
|
20
|
+
},
|
|
11
21
|
{
|
|
12
22
|
"name": "defaultChipProps",
|
|
13
23
|
"type": "ChipProps",
|
|
@@ -18,12 +28,48 @@
|
|
|
18
28
|
"type": "(newChips, changeReason, updatedChip) => void",
|
|
19
29
|
"description": "Callback for chips change (adding or removing chip)"
|
|
20
30
|
},
|
|
21
|
-
{
|
|
31
|
+
{
|
|
32
|
+
"name": "maxChips",
|
|
33
|
+
"type": "number",
|
|
34
|
+
"description": "The maximum chips to allow adding"
|
|
35
|
+
}
|
|
22
36
|
],
|
|
23
37
|
"snippet": [
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
|
|
27
|
-
"
|
|
28
|
-
|
|
38
|
+
"function Example(props) {",
|
|
39
|
+
" const [chips, setChips] = useState([{label: 'Falcon 9'}, {label: 'Enterprise'}]);",
|
|
40
|
+
|
|
41
|
+
" return (",
|
|
42
|
+
" <View flex padding-s5>",
|
|
43
|
+
" <ChipsInput",
|
|
44
|
+
" onChange={setChips}",
|
|
45
|
+
" placeholder={'Placeholder'}",
|
|
46
|
+
" defaultChipProps={{borderRadius: 0}}",
|
|
47
|
+
" chips={chips}",
|
|
48
|
+
" />",
|
|
49
|
+
" </View>",
|
|
50
|
+
" );",
|
|
51
|
+
"}"
|
|
52
|
+
],
|
|
53
|
+
"docs": {
|
|
54
|
+
"hero": {
|
|
55
|
+
"title": "ChipsInput",
|
|
56
|
+
"description": "A chips input"
|
|
57
|
+
},
|
|
58
|
+
"tabs": [
|
|
59
|
+
{
|
|
60
|
+
"title": "UX Guidelines",
|
|
61
|
+
"sections": [
|
|
62
|
+
{
|
|
63
|
+
"type": "section",
|
|
64
|
+
"content": [
|
|
65
|
+
{
|
|
66
|
+
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=13-114418&embed-host=share",
|
|
67
|
+
"height": 1600
|
|
68
|
+
}
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
]
|
|
72
|
+
}
|
|
73
|
+
]
|
|
74
|
+
}
|
|
29
75
|
}
|
|
@@ -79,11 +79,18 @@
|
|
|
79
79
|
}
|
|
80
80
|
],
|
|
81
81
|
"snippet": [
|
|
82
|
-
"
|
|
83
|
-
"
|
|
84
|
-
"
|
|
85
|
-
"
|
|
86
|
-
"
|
|
82
|
+
"function Example(props) {",
|
|
83
|
+
" const [value, setValue] = useState(Colors.yellow30);",
|
|
84
|
+
" return (",
|
|
85
|
+
" <View flex padding-s5 gap-s4>",
|
|
86
|
+
" <ColorPalette",
|
|
87
|
+
" colors={['transparent', Colors.green30, Colors.yellow30, Colors.red30]}",
|
|
88
|
+
" value={value}",
|
|
89
|
+
" onValueChange={setValue}",
|
|
90
|
+
" />",
|
|
91
|
+
" </View>",
|
|
92
|
+
" );",
|
|
93
|
+
"}"
|
|
87
94
|
],
|
|
88
95
|
"docs": {
|
|
89
96
|
"hero": {
|
|
@@ -47,14 +47,22 @@
|
|
|
47
47
|
}
|
|
48
48
|
],
|
|
49
49
|
"snippet": [
|
|
50
|
-
"
|
|
51
|
-
" colors
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
50
|
+
"function Example(props) {",
|
|
51
|
+
" const [colors, setColors] = useState([Colors.green30, Colors.yellow30, Colors.red30]);",
|
|
52
|
+
" const [color, setColor] = useState();",
|
|
53
|
+
" return (",
|
|
54
|
+
" <View flex padding-s5>",
|
|
55
|
+
" <ColorPicker",
|
|
56
|
+
" colors={colors}",
|
|
57
|
+
" initialColor={Colors.green10}",
|
|
58
|
+
" value={color}",
|
|
59
|
+
" onDismiss={() => console.log('dismissed')}",
|
|
60
|
+
" onSubmit={(newColor) => setColors([newColor, ...colors])}",
|
|
61
|
+
" onValueChange={setColor}",
|
|
62
|
+
" />",
|
|
63
|
+
" </View>",
|
|
64
|
+
" );",
|
|
65
|
+
"}"
|
|
58
66
|
],
|
|
59
67
|
"docs": {
|
|
60
68
|
"hero": {
|
|
@@ -77,7 +85,7 @@
|
|
|
77
85
|
"items": [
|
|
78
86
|
{
|
|
79
87
|
"title": "",
|
|
80
|
-
"description": "markdown:1. Tapping 'Add New' in the Color Palette opens a color picker dialog.
|
|
88
|
+
"description": "markdown: 1. Tapping 'Add New' in the Color Palette opens a color picker dialog.
|
|
81
89
|
"content": [
|
|
82
90
|
{
|
|
83
91
|
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_usage1.png"
|
|
@@ -113,7 +121,7 @@
|
|
|
113
121
|
"items": [
|
|
114
122
|
{
|
|
115
123
|
"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. ",
|
|
124
|
+
"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
125
|
"content": [
|
|
118
126
|
{
|
|
119
127
|
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex1.png"
|
|
@@ -122,7 +130,7 @@
|
|
|
122
130
|
},
|
|
123
131
|
{
|
|
124
132
|
"title": "",
|
|
125
|
-
"description": "markdown:3. ‘#’ symbol is permanent and cant be deleted. \n4. Once hex value is valid (6 characters), background color changes accordingly. ",
|
|
133
|
+
"description": "markdown: 3. ‘#’ symbol is permanent and cant be deleted. \n4. Once hex value is valid (6 characters), background color changes accordingly. ",
|
|
126
134
|
"content": [
|
|
127
135
|
{
|
|
128
136
|
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex2.png"
|
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
"category": "lists",
|
|
4
4
|
"description": "Drawer Component",
|
|
5
5
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DrawerScreen.tsx",
|
|
6
|
-
"images": [
|
|
6
|
+
"images": [
|
|
7
|
+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Drawer/Drawer.gif?raw=true"
|
|
8
|
+
],
|
|
7
9
|
"props": [
|
|
8
10
|
{
|
|
9
11
|
"name": "rightItems",
|
|
@@ -15,20 +17,53 @@
|
|
|
15
17
|
"type": "ItemProps",
|
|
16
18
|
"description": "The bottom layer's item to appear when opened from the left (a single item)"
|
|
17
19
|
},
|
|
18
|
-
{
|
|
19
|
-
|
|
20
|
+
{
|
|
21
|
+
"name": "bounciness",
|
|
22
|
+
"type": "number",
|
|
23
|
+
"description": "The drawer animation bounciness"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"name": "itemsMinWidth",
|
|
27
|
+
"type": "number",
|
|
28
|
+
"description": "Set a different minimum width"
|
|
29
|
+
},
|
|
20
30
|
{
|
|
21
31
|
"name": "itemsTintColor",
|
|
22
32
|
"type": "string",
|
|
23
33
|
"description": "The color for the text and icon tint of the items",
|
|
24
34
|
"default": "Colors.white"
|
|
25
35
|
},
|
|
26
|
-
{
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
36
|
+
{
|
|
37
|
+
"name": "itemsIconSize",
|
|
38
|
+
"type": "number",
|
|
39
|
+
"description": "The items' icon size",
|
|
40
|
+
"default": "24"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"name": "itemsTextStyle",
|
|
44
|
+
"type": "TextStyle",
|
|
45
|
+
"description": "The items' text style"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "useNativeAnimations",
|
|
49
|
+
"type": "boolean",
|
|
50
|
+
"description": "Perform the animation in natively"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"name": "fullSwipeLeft",
|
|
54
|
+
"type": "boolean",
|
|
55
|
+
"description": "Whether to allow a full left swipe"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "fullLeftThreshold",
|
|
59
|
+
"type": "number",
|
|
60
|
+
"description": "Threshold for a left full swipe (0-1)"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"name": "onFullSwipeLeft",
|
|
64
|
+
"type": "() => void",
|
|
65
|
+
"description": "Callback for left item full swipe"
|
|
66
|
+
},
|
|
32
67
|
{
|
|
33
68
|
"name": "onWillFullSwipeLeft",
|
|
34
69
|
"type": "() => void",
|
|
@@ -39,24 +74,82 @@
|
|
|
39
74
|
"type": "() => {rowWidth, leftWidth, dragX, resetItemPosition}",
|
|
40
75
|
"description": "Callback for left item toggle swipe"
|
|
41
76
|
},
|
|
42
|
-
{
|
|
43
|
-
|
|
44
|
-
|
|
77
|
+
{
|
|
78
|
+
"name": "fullSwipeRight",
|
|
79
|
+
"type": "boolean",
|
|
80
|
+
"description": "Whether to allow a full right swipe"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"name": "fullRightThreshold",
|
|
84
|
+
"type": "number",
|
|
85
|
+
"description": "Threshold for a right full swipe (0-1)"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"name": "onFullSwipeRight",
|
|
89
|
+
"type": "() => void",
|
|
90
|
+
"description": "Callback for right item full swipe"
|
|
91
|
+
},
|
|
45
92
|
{
|
|
46
93
|
"name": "onWillFullSwipeRight",
|
|
47
94
|
"type": "() => void",
|
|
48
95
|
"description": "Callback for just before right item full swipe"
|
|
49
96
|
},
|
|
50
|
-
{
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
97
|
+
{
|
|
98
|
+
"name": "disableHaptic",
|
|
99
|
+
"type": "boolean",
|
|
100
|
+
"description": "Whether to disable the haptic"
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"name": "onDragStart",
|
|
104
|
+
"type": "() => any",
|
|
105
|
+
"description": "Called when drag gesture starts"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"name": "onSwipeableWillOpen",
|
|
109
|
+
"type": "() => void",
|
|
110
|
+
"description": "Callback for open action"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"name": "onSwipeableWillClose",
|
|
114
|
+
"type": "() => void",
|
|
115
|
+
"description": "Callback for close action"
|
|
116
|
+
},
|
|
54
117
|
{
|
|
55
118
|
"name": "customValue",
|
|
56
119
|
"type": "any",
|
|
57
120
|
"description": "Custom value of any type to pass on to the component and receive back in the action callbacks"
|
|
58
121
|
},
|
|
59
|
-
{
|
|
60
|
-
|
|
61
|
-
|
|
122
|
+
{
|
|
123
|
+
"name": "style",
|
|
124
|
+
"type": "ViewStyle",
|
|
125
|
+
"description": "Component's style"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"name": "testID",
|
|
129
|
+
"type": "string",
|
|
130
|
+
"description": "The test id for e2e tests"
|
|
131
|
+
}
|
|
132
|
+
],
|
|
133
|
+
"docs": {
|
|
134
|
+
"hero": {
|
|
135
|
+
"title": "Drawer",
|
|
136
|
+
"description": "Drawer Component"
|
|
137
|
+
},
|
|
138
|
+
"tabs": [
|
|
139
|
+
{
|
|
140
|
+
"title": "UX Guidelines",
|
|
141
|
+
"sections": [
|
|
142
|
+
{
|
|
143
|
+
"type": "section",
|
|
144
|
+
"content": [
|
|
145
|
+
{
|
|
146
|
+
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=5958-379805&embed-host=share",
|
|
147
|
+
"height": 1600
|
|
148
|
+
}
|
|
149
|
+
]
|
|
150
|
+
}
|
|
151
|
+
]
|
|
152
|
+
}
|
|
153
|
+
]
|
|
154
|
+
}
|
|
62
155
|
}
|
|
@@ -2,10 +2,16 @@
|
|
|
2
2
|
"name": "Image",
|
|
3
3
|
"category": "media",
|
|
4
4
|
"description": "Image wrapper with extra functionality like source transform and assets support",
|
|
5
|
-
"extends": [
|
|
6
|
-
|
|
5
|
+
"extends": [
|
|
6
|
+
"Image"
|
|
7
|
+
],
|
|
8
|
+
"extendsLink": [
|
|
9
|
+
"https://reactnative.dev/docs/image"
|
|
10
|
+
],
|
|
7
11
|
"note": "please note that for SVG support you need to add both `react-native-svg` and `react-native-svg-transformer` and also configure them (see `metro.config.js`)",
|
|
8
|
-
"modifiers": [
|
|
12
|
+
"modifiers": [
|
|
13
|
+
"margin"
|
|
14
|
+
],
|
|
9
15
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ImageScreen.tsx",
|
|
10
16
|
"props": [
|
|
11
17
|
{
|
|
@@ -13,9 +19,21 @@
|
|
|
13
19
|
"type": "(props: any) => ImageSourcePropType",
|
|
14
20
|
"description": "custom source transform handler for manipulating the image source (great for size control)"
|
|
15
21
|
},
|
|
16
|
-
{
|
|
17
|
-
|
|
18
|
-
|
|
22
|
+
{
|
|
23
|
+
"name": "assetName",
|
|
24
|
+
"type": "string",
|
|
25
|
+
"description": "if provided image source will be driven from asset name"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"name": "assetGroup",
|
|
29
|
+
"type": "string",
|
|
30
|
+
"description": "the asset group, default is icons"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"name": "tintColor",
|
|
34
|
+
"type": "string",
|
|
35
|
+
"description": "the asset tint"
|
|
36
|
+
},
|
|
19
37
|
{
|
|
20
38
|
"name": "supportRTL",
|
|
21
39
|
"type": "boolean",
|
|
@@ -26,7 +44,11 @@
|
|
|
26
44
|
"type": "boolean",
|
|
27
45
|
"description": "Show image as a cover, full width, image (according to aspect ratio, default: 16:8)"
|
|
28
46
|
},
|
|
29
|
-
{
|
|
47
|
+
{
|
|
48
|
+
"name": "aspectRatio",
|
|
49
|
+
"type": "number",
|
|
50
|
+
"description": "The aspect ratio for the image"
|
|
51
|
+
},
|
|
30
52
|
{
|
|
31
53
|
"name": "overlayType",
|
|
32
54
|
"type": "VERTICAL | TOP | BOTTOM | SOLID",
|
|
@@ -39,14 +61,60 @@
|
|
|
39
61
|
"description": "OverlayIntensityType",
|
|
40
62
|
"default": "Image.overlayIntensityType.LOW"
|
|
41
63
|
},
|
|
42
|
-
{
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
{
|
|
64
|
+
{
|
|
65
|
+
"name": "overlayColor",
|
|
66
|
+
"type": "string",
|
|
67
|
+
"description": "Pass a custom color for the overlay"
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"name": "customOverlayContent",
|
|
71
|
+
"type": "JSX.Element",
|
|
72
|
+
"description": "Render an overlay with custom content"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"name": "errorSource",
|
|
76
|
+
"type": "ImageSourcePropType",
|
|
77
|
+
"description": "Default image source in case of an error"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "imageId",
|
|
81
|
+
"type": "string",
|
|
82
|
+
"description": "An imageId that can be used in sourceTransformer logic"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"name": "recorderTag",
|
|
86
|
+
"type": "'mask' | 'unmask'",
|
|
87
|
+
"description": "Recorder Tag"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "useBackgroundContainer",
|
|
91
|
+
"type": "boolean",
|
|
92
|
+
"description": "Use a container for the Image, this can solve issues on Android when animation needs to be performed on the same view; i.e. animation related crashes on Android."
|
|
93
|
+
}
|
|
48
94
|
],
|
|
49
95
|
"snippet": [
|
|
50
96
|
"<Image width={50} height={50} source={{uri: 'https://images.pexels.com/photos/748837/pexels-photo-748837.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}$1}/>"
|
|
51
|
-
]
|
|
97
|
+
],
|
|
98
|
+
"docs": {
|
|
99
|
+
"hero": {
|
|
100
|
+
"title": "Image",
|
|
101
|
+
"description": "Image wrapper with extra functionality like source transform and assets support"
|
|
102
|
+
},
|
|
103
|
+
"tabs": [
|
|
104
|
+
{
|
|
105
|
+
"title": "UX Guidelines",
|
|
106
|
+
"sections": [
|
|
107
|
+
{
|
|
108
|
+
"type": "section",
|
|
109
|
+
"content": [
|
|
110
|
+
{
|
|
111
|
+
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=10088-640358&embed-host=share",
|
|
112
|
+
"height": 1600
|
|
113
|
+
}
|
|
114
|
+
]
|
|
115
|
+
}
|
|
116
|
+
]
|
|
117
|
+
}
|
|
118
|
+
]
|
|
119
|
+
}
|
|
52
120
|
}
|
|
@@ -22,11 +22,31 @@
|
|
|
22
22
|
"description": "Number of digits after the decimal point. Must be in the range 0 - 20, inclusive.",
|
|
23
23
|
"default": "2"
|
|
24
24
|
},
|
|
25
|
-
{
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
25
|
+
{
|
|
26
|
+
"name": "leadingText",
|
|
27
|
+
"type": "string",
|
|
28
|
+
"description": "A leading text"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"name": "leadingTextStyle",
|
|
32
|
+
"type": "TextStyle",
|
|
33
|
+
"description": "The style of the leading text"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "trailingText",
|
|
37
|
+
"type": "string",
|
|
38
|
+
"description": "A trailing text"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"name": "trailingTextStyle",
|
|
42
|
+
"type": "TextStyle",
|
|
43
|
+
"description": "The style of the trailing text"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"name": "containerStyle",
|
|
47
|
+
"type": "ViewStyle",
|
|
48
|
+
"description": "Container style of the whole component"
|
|
49
|
+
},
|
|
30
50
|
{
|
|
31
51
|
"name": "contextMenuHidden",
|
|
32
52
|
"type": "boolean",
|
|
@@ -40,5 +60,29 @@
|
|
|
40
60
|
"description": "Most of TextField's props can be applied, except for ones that are passed directly via named props."
|
|
41
61
|
}
|
|
42
62
|
],
|
|
43
|
-
"snippet": [
|
|
63
|
+
"snippet": [
|
|
64
|
+
"<NumberInput initialValue={1506$1} onChange={onChange$2} placeholder={'Price$3'}/>"
|
|
65
|
+
],
|
|
66
|
+
"docs": {
|
|
67
|
+
"hero": {
|
|
68
|
+
"title": "NumberInput",
|
|
69
|
+
"description": "Number Input to create an input with a formatted number"
|
|
70
|
+
},
|
|
71
|
+
"tabs": [
|
|
72
|
+
{
|
|
73
|
+
"title": "UX Guidelines",
|
|
74
|
+
"sections": [
|
|
75
|
+
{
|
|
76
|
+
"type": "section",
|
|
77
|
+
"content": [
|
|
78
|
+
{
|
|
79
|
+
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=8539-460248&embed-host=share",
|
|
80
|
+
"height": 1600
|
|
81
|
+
}
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
]
|
|
87
|
+
}
|
|
44
88
|
}
|
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
"category": "navigation",
|
|
4
4
|
"description": "Page indicator, typically used in paged scroll-views",
|
|
5
5
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PageControlScreen.tsx",
|
|
6
|
-
"images": [
|
|
6
|
+
"images": [
|
|
7
|
+
"https://user-images.githubusercontent.com/1780255/107114259-2e278d00-686d-11eb-866c-59f3d410d6c3.gif"
|
|
8
|
+
],
|
|
7
9
|
"props": [
|
|
8
10
|
{
|
|
9
11
|
"name": "limitShownPages",
|
|
@@ -15,8 +17,18 @@
|
|
|
15
17
|
"type": "ViewStyle",
|
|
16
18
|
"description": "Additional styles for the top container"
|
|
17
19
|
},
|
|
18
|
-
{
|
|
19
|
-
|
|
20
|
+
{
|
|
21
|
+
"name": "numOfPages",
|
|
22
|
+
"required": true,
|
|
23
|
+
"type": "number",
|
|
24
|
+
"description": "Total number of pages"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"name": "currentPage",
|
|
28
|
+
"required": true,
|
|
29
|
+
"type": "number",
|
|
30
|
+
"description": "Zero-based index of the current page"
|
|
31
|
+
},
|
|
20
32
|
{
|
|
21
33
|
"name": "onPagePress",
|
|
22
34
|
"type": "(index: number) => void",
|
|
@@ -51,9 +63,35 @@
|
|
|
51
63
|
"description": "The space between the siblings page indicators",
|
|
52
64
|
"default": "4"
|
|
53
65
|
},
|
|
54
|
-
{
|
|
66
|
+
{
|
|
67
|
+
"name": "testID",
|
|
68
|
+
"type": "string",
|
|
69
|
+
"description": "Used to identify the pageControl in tests"
|
|
70
|
+
}
|
|
55
71
|
],
|
|
56
72
|
"snippet": [
|
|
57
73
|
"<PageControl numOfPages={5$1} currentPage={0$2}/>"
|
|
58
|
-
]
|
|
74
|
+
],
|
|
75
|
+
"docs": {
|
|
76
|
+
"hero": {
|
|
77
|
+
"title": "PageControl",
|
|
78
|
+
"description": "Page indicator, typically used in paged scroll-views"
|
|
79
|
+
},
|
|
80
|
+
"tabs": [
|
|
81
|
+
{
|
|
82
|
+
"title": "UX Guidelines",
|
|
83
|
+
"sections": [
|
|
84
|
+
{
|
|
85
|
+
"type": "section",
|
|
86
|
+
"content": [
|
|
87
|
+
{
|
|
88
|
+
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=22898-649490&embed-host=share",
|
|
89
|
+
"height": 1600
|
|
90
|
+
}
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
]
|
|
94
|
+
}
|
|
95
|
+
]
|
|
96
|
+
}
|
|
59
97
|
}
|
|
@@ -4,12 +4,50 @@
|
|
|
4
4
|
"description": "Pie Chart",
|
|
5
5
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PieChartScreen.tsx",
|
|
6
6
|
"props": [
|
|
7
|
-
{
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
{
|
|
8
|
+
"name": "segments",
|
|
9
|
+
"type": "PieChartSegmentProps[]",
|
|
10
|
+
"description": "Pie chart segments array"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"name": "diameter",
|
|
14
|
+
"type": "number",
|
|
15
|
+
"description": "Pie chart diameter"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"name": "dividerWidth",
|
|
19
|
+
"type": "number",
|
|
20
|
+
"description": "The width of the divider between the segments"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"name": "dividerColor",
|
|
24
|
+
"type": "ColorValue",
|
|
25
|
+
"description": "The color of the divider between the segments"
|
|
26
|
+
}
|
|
11
27
|
],
|
|
12
28
|
"snippet": [
|
|
13
29
|
"<PieChart segments={[{percentage: 50, color: Colors.blue30}, {percentage: 30, color: Colors.red30}, {percentage: 20, color: Colors.green30}]} diameter={144}/>"
|
|
14
|
-
]
|
|
30
|
+
],
|
|
31
|
+
"docs": {
|
|
32
|
+
"hero": {
|
|
33
|
+
"title": "PieChart",
|
|
34
|
+
"description": "Pie Chart"
|
|
35
|
+
},
|
|
36
|
+
"tabs": [
|
|
37
|
+
{
|
|
38
|
+
"title": "UX Guidelines",
|
|
39
|
+
"sections": [
|
|
40
|
+
{
|
|
41
|
+
"type": "section",
|
|
42
|
+
"content": [
|
|
43
|
+
{
|
|
44
|
+
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=22898-888932&embed-host=share",
|
|
45
|
+
"height": 1600
|
|
46
|
+
}
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
]
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
}
|
|
15
53
|
}
|
|
@@ -87,11 +87,15 @@
|
|
|
87
87
|
],
|
|
88
88
|
"snippet": [
|
|
89
89
|
"function Example(props) {",
|
|
90
|
-
" const [value, setValue] = useState(false
|
|
90
|
+
" const [value, setValue] = useState(false);",
|
|
91
|
+
" const [value2, setValue2] = useState(false);",
|
|
92
|
+
" const [value3, setValue3] = useState(false);",
|
|
91
93
|
" return (",
|
|
92
|
-
" <
|
|
93
|
-
" <RadioButton label={'
|
|
94
|
-
"
|
|
94
|
+
" <View flex padding-s5 gap-s4>",
|
|
95
|
+
" <RadioButton label={'Radio Button'} selected={value} onPress={() => setValue(!value)}/>",
|
|
96
|
+
" <RadioButton label={'Green Radio Button'} color={Colors.green30} selected={value2} onPress={() => setValue2(!value2)}/>",
|
|
97
|
+
" <RadioButton label={'Square Radio Button'} borderRadius={0} size={20} selected={value3} onPress={() => setValue3(!value3)}/>",
|
|
98
|
+
" </View>",
|
|
95
99
|
" );",
|
|
96
100
|
"}"
|
|
97
101
|
],
|
|
@@ -23,14 +23,15 @@
|
|
|
23
23
|
],
|
|
24
24
|
"snippet": [
|
|
25
25
|
"function Example(props) {",
|
|
26
|
-
" const [currentValue, setCurrentValue] = useState('yes'
|
|
26
|
+
" const [currentValue, setCurrentValue] = useState('yes');",
|
|
27
27
|
" return (",
|
|
28
|
-
" <
|
|
29
|
-
" <RadioGroup initialValue={currentValue
|
|
30
|
-
" <RadioButton value={'yes'
|
|
31
|
-
" <RadioButton
|
|
28
|
+
" <View flex padding-s5>",
|
|
29
|
+
" <RadioGroup initialValue={currentValue} onValueChange={setCurrentValue} gap-s4>",
|
|
30
|
+
" <RadioButton value={'yes'} label={'Yes'}/>",
|
|
31
|
+
" <RadioButton value={'no'} label={'No'}/>",
|
|
32
|
+
" <RadioButton value={'maybe'} label={'Maybe'}/>",
|
|
32
33
|
" </RadioGroup>",
|
|
33
|
-
" </
|
|
34
|
+
" </View>",
|
|
34
35
|
" );",
|
|
35
36
|
"}"
|
|
36
37
|
]
|
|
@@ -96,18 +96,22 @@
|
|
|
96
96
|
"description": "Pass props for the SegmentedControl label"
|
|
97
97
|
},
|
|
98
98
|
{
|
|
99
|
-
"name":"preset",
|
|
99
|
+
"name": "preset",
|
|
100
100
|
"type": "SegmentedControlPreset",
|
|
101
101
|
"description": "Preset of the SegmentedControl [default, form]"
|
|
102
102
|
}
|
|
103
103
|
],
|
|
104
104
|
"snippet": [
|
|
105
|
-
"<
|
|
105
|
+
"<View flex padding-s5 gap-s4>",
|
|
106
|
+
"<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]}/>",
|
|
107
|
+
"<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]} preset='form'/>",
|
|
108
|
+
"<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]} borderRadius={12} outlineColor={Colors.yellow30} outlineWidth={3} activeColor={Colors.yellow20}/>",
|
|
109
|
+
"</View>"
|
|
106
110
|
],
|
|
107
111
|
"docs": {
|
|
108
112
|
"hero": {
|
|
109
113
|
"title": "SegmentedControl",
|
|
110
|
-
"description": "A segmented control is a linear set of two or more segments.
|
|
114
|
+
"description": "A segmented control is a linear set of two or more segments.
|
|
111
115
|
"type": "hero",
|
|
112
116
|
"layout": "horizontal",
|
|
113
117
|
"content": [
|
|
@@ -131,10 +135,7 @@
|
|
|
131
135
|
},
|
|
132
136
|
{
|
|
133
137
|
"type": "table",
|
|
134
|
-
"columns": [
|
|
135
|
-
"Property",
|
|
136
|
-
"Preview"
|
|
137
|
-
],
|
|
138
|
+
"columns": ["Property", "Preview"],
|
|
138
139
|
"items": [
|
|
139
140
|
{
|
|
140
141
|
"title": "Default",
|
|
@@ -147,7 +148,7 @@
|
|
|
147
148
|
},
|
|
148
149
|
{
|
|
149
150
|
"title": "Form",
|
|
150
|
-
"description": "
|
|
151
|
+
"description": "Suitable for form or settings screens, matches with other related components such as textField, Picker and others. \n preset=\"form\"",
|
|
151
152
|
"content": [
|
|
152
153
|
{
|
|
153
154
|
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SegmentedControl/segmentedControl_style_form.png"
|
|
@@ -159,10 +160,7 @@
|
|
|
159
160
|
},
|
|
160
161
|
{
|
|
161
162
|
"type": "table",
|
|
162
|
-
"columns": [
|
|
163
|
-
"Property",
|
|
164
|
-
"Preview"
|
|
165
|
-
],
|
|
163
|
+
"columns": ["Property", "Preview"],
|
|
166
164
|
"items": [
|
|
167
165
|
{
|
|
168
166
|
"title": "Full width",
|
|
@@ -227,7 +227,7 @@
|
|
|
227
227
|
}
|
|
228
228
|
],
|
|
229
229
|
"title": "Spec",
|
|
230
|
-
"description": "
|
|
230
|
+
"description": "markdown:\n\n**Linear slider**\n\n**Default**\nThumb: 24px \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
|
|
231
231
|
},
|
|
232
232
|
{
|
|
233
233
|
"type": "section",
|
|
@@ -237,7 +237,7 @@
|
|
|
237
237
|
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_range.png"
|
|
238
238
|
}
|
|
239
239
|
],
|
|
240
|
-
"description": "
|
|
240
|
+
"description": "markdown:\n\n**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
241
|
}
|
|
242
242
|
]
|
|
243
243
|
}
|
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
"category": "lists",
|
|
4
4
|
"description": "An sortable grid list (based on GridList component)",
|
|
5
5
|
"note": "This component supports square items only",
|
|
6
|
-
"extends": [
|
|
6
|
+
"extends": [
|
|
7
|
+
"lists/GridList"
|
|
8
|
+
],
|
|
7
9
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SortableGridListScreen.tsx",
|
|
8
10
|
"props": [
|
|
9
11
|
{
|
|
@@ -12,7 +14,11 @@
|
|
|
12
14
|
"note": "Do not update 'data' in 'onOrderChange' (i.e. for each order change); only update it when you change the items (i.g. adding and removing an item).",
|
|
13
15
|
"description": "Data of items with an id prop as unique identifier"
|
|
14
16
|
},
|
|
15
|
-
{
|
|
17
|
+
{
|
|
18
|
+
"name": "renderItem",
|
|
19
|
+
"type": "FlatListProps['renderItem']",
|
|
20
|
+
"description": "Custom render item callback"
|
|
21
|
+
},
|
|
16
22
|
{
|
|
17
23
|
"name": "onOrderChange",
|
|
18
24
|
"type": "(newData: T[], newOrder: ItemsOrder) => void",
|
|
@@ -73,5 +79,27 @@
|
|
|
73
79
|
" </View>",
|
|
74
80
|
" );",
|
|
75
81
|
"}"
|
|
76
|
-
]
|
|
82
|
+
],
|
|
83
|
+
"docs": {
|
|
84
|
+
"hero": {
|
|
85
|
+
"title": "SortableGridList",
|
|
86
|
+
"description": "An sortable grid list (based on GridList component)"
|
|
87
|
+
},
|
|
88
|
+
"tabs": [
|
|
89
|
+
{
|
|
90
|
+
"title": "UX Guidelines",
|
|
91
|
+
"sections": [
|
|
92
|
+
{
|
|
93
|
+
"type": "section",
|
|
94
|
+
"content": [
|
|
95
|
+
{
|
|
96
|
+
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=16685-543834&embed-host=share",
|
|
97
|
+
"height": 1600
|
|
98
|
+
}
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
}
|
|
77
105
|
}
|
|
@@ -100,10 +100,10 @@
|
|
|
100
100
|
],
|
|
101
101
|
"snippet": [
|
|
102
102
|
"<Incubator.Slider",
|
|
103
|
-
" value={0
|
|
104
|
-
" minimumValue={0
|
|
105
|
-
" maximumValue={10
|
|
106
|
-
" onValueChange={value => console.log(\\`value changed: \\${value}\\`)
|
|
103
|
+
" value={0}",
|
|
104
|
+
" minimumValue={0}",
|
|
105
|
+
" maximumValue={10}",
|
|
106
|
+
" onValueChange={value => console.log(\\`value changed: \\${value}\\`)}",
|
|
107
107
|
"/>"
|
|
108
108
|
],
|
|
109
109
|
"docs": {
|
|
@@ -187,7 +187,7 @@
|
|
|
187
187
|
}
|
|
188
188
|
],
|
|
189
189
|
"title": "Spec",
|
|
190
|
-
"description": "**Linear slider**\n\n**Default**\nThumb: 24px \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
|
|
190
|
+
"description": "markdown: **Linear slider**\n\n**Default**\nThumb: 24px \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
|
|
191
191
|
},
|
|
192
192
|
{
|
|
193
193
|
"type": "section",
|
|
@@ -197,7 +197,7 @@
|
|
|
197
197
|
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_range.png"
|
|
198
198
|
}
|
|
199
199
|
],
|
|
200
|
-
"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"
|
|
200
|
+
"description": "markdown: **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"
|
|
201
201
|
}
|
|
202
202
|
]
|
|
203
203
|
}
|