react-native-ui-lib 7.38.1-snapshot.6408 → 7.38.1-snapshot.6412
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
|
@@ -4,10 +4,27 @@
|
|
|
4
4
|
"description": "Progress bar",
|
|
5
5
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressBarScreen.tsx",
|
|
6
6
|
"props": [
|
|
7
|
-
{
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
{
|
|
8
|
+
"name": "progress",
|
|
9
|
+
"type": "number",
|
|
10
|
+
"description": "The progress of the bar from 0 to 100",
|
|
11
|
+
"default": "0"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"name": "fullWidth",
|
|
15
|
+
"type": "boolean",
|
|
16
|
+
"description": "FullWidth Ui preset"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"name": "style",
|
|
20
|
+
"type": "ViewStyle",
|
|
21
|
+
"description": "Override container style"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"name": "progressColor",
|
|
25
|
+
"type": "string",
|
|
26
|
+
"description": "Progress color"
|
|
27
|
+
},
|
|
11
28
|
{
|
|
12
29
|
"name": "customElement",
|
|
13
30
|
"type": "JSX.Element",
|
|
@@ -16,5 +33,137 @@
|
|
|
16
33
|
],
|
|
17
34
|
"snippet": [
|
|
18
35
|
"<ProgressBar progress={55$1} progressColor={Colors.red30$2}/>"
|
|
19
|
-
]
|
|
36
|
+
],
|
|
37
|
+
"docs": {
|
|
38
|
+
"hero": {
|
|
39
|
+
"title": "ProgressBar",
|
|
40
|
+
"description": "ProgressBar is a linear progress indicators, that express the length of a process. It should be used when the process completion rate can be detected. As the completion rate increases, the track fills from 0 to 100%. The ProgressBar can be accompanied by a textual representation of the progress in a percent format.",
|
|
41
|
+
"type": "hero",
|
|
42
|
+
"layout": "horizontal",
|
|
43
|
+
"content": [
|
|
44
|
+
{
|
|
45
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_cover.png"
|
|
46
|
+
}
|
|
47
|
+
]
|
|
48
|
+
},
|
|
49
|
+
"tabs": [
|
|
50
|
+
{
|
|
51
|
+
"title": "Overview",
|
|
52
|
+
"sections": [
|
|
53
|
+
{
|
|
54
|
+
"type": "list",
|
|
55
|
+
"items": [
|
|
56
|
+
{
|
|
57
|
+
"title": "Inline (Default)",
|
|
58
|
+
"description": "Inline Progress Bar attached to a container, such as a card, can indicate the process applies to that particular item.",
|
|
59
|
+
"content": [
|
|
60
|
+
{
|
|
61
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_usage_inline.png"
|
|
62
|
+
}
|
|
63
|
+
]
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"title": "Full Width",
|
|
67
|
+
"description": "Indicates progress with the screen’s content.",
|
|
68
|
+
"content": [
|
|
69
|
+
{
|
|
70
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_usage_fullWidth.png"
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"title": "Animated",
|
|
76
|
+
"description": "In cases where the progress will take about a minute to complete, use an animated progress bar with a stripes pattern ",
|
|
77
|
+
"content": [
|
|
78
|
+
{
|
|
79
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_usage_animated.png"
|
|
80
|
+
}
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
],
|
|
84
|
+
"layout": "horizontal",
|
|
85
|
+
"title": "Usage Examples"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"type": "table",
|
|
89
|
+
"columns": [
|
|
90
|
+
"Property",
|
|
91
|
+
"Preview"
|
|
92
|
+
],
|
|
93
|
+
"items": [
|
|
94
|
+
{
|
|
95
|
+
"title": "Default",
|
|
96
|
+
"content": [
|
|
97
|
+
{
|
|
98
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_default.png"
|
|
99
|
+
}
|
|
100
|
+
]
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"title": "AnimatedStripes",
|
|
104
|
+
"content": [
|
|
105
|
+
{
|
|
106
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_AnimatedStripes.png"
|
|
107
|
+
}
|
|
108
|
+
]
|
|
109
|
+
}
|
|
110
|
+
],
|
|
111
|
+
"title": "Types"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"type": "table",
|
|
115
|
+
"columns": [
|
|
116
|
+
"Property",
|
|
117
|
+
"Preview"
|
|
118
|
+
],
|
|
119
|
+
"items": [
|
|
120
|
+
{
|
|
121
|
+
"title": "Inline (default)",
|
|
122
|
+
"content": [
|
|
123
|
+
{
|
|
124
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_default.png"
|
|
125
|
+
}
|
|
126
|
+
]
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
"title": "FullWidth",
|
|
130
|
+
"content": [
|
|
131
|
+
{
|
|
132
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_fullWidth.png"
|
|
133
|
+
}
|
|
134
|
+
]
|
|
135
|
+
}
|
|
136
|
+
],
|
|
137
|
+
"title": "Size"
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"type": "section"
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"type": "list",
|
|
144
|
+
"items": [
|
|
145
|
+
{
|
|
146
|
+
"title": "Phone spec",
|
|
147
|
+
"content": [
|
|
148
|
+
{
|
|
149
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_spec_phone.png"
|
|
150
|
+
}
|
|
151
|
+
]
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"title": "Tablet spec",
|
|
155
|
+
"content": [
|
|
156
|
+
{
|
|
157
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_spec_tablet.png"
|
|
158
|
+
}
|
|
159
|
+
]
|
|
160
|
+
}
|
|
161
|
+
],
|
|
162
|
+
"title": "Spec",
|
|
163
|
+
"layout": "horizontal"
|
|
164
|
+
}
|
|
165
|
+
]
|
|
166
|
+
}
|
|
167
|
+
]
|
|
168
|
+
}
|
|
20
169
|
}
|
|
@@ -2,12 +2,8 @@
|
|
|
2
2
|
"name": "Timeline",
|
|
3
3
|
"category": "lists",
|
|
4
4
|
"description": "A timeline item to render as part of a timeline list",
|
|
5
|
-
"extends": [
|
|
6
|
-
|
|
7
|
-
],
|
|
8
|
-
"extendsLink": [
|
|
9
|
-
"https://reactnative.dev/docs/view"
|
|
10
|
-
],
|
|
5
|
+
"extends": ["View"],
|
|
6
|
+
"extendsLink": ["https://reactnative.dev/docs/view"],
|
|
11
7
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TimelineScreen.tsx",
|
|
12
8
|
"images": [],
|
|
13
9
|
"props": [
|
|
@@ -111,23 +107,42 @@
|
|
|
111
107
|
"layout": "horizontal"
|
|
112
108
|
},
|
|
113
109
|
{
|
|
114
|
-
"type": "
|
|
115
|
-
"
|
|
116
|
-
"description": "markdown:\nThe Timeline consists of points and lines, each with different styles and states. These elements can be combined in various ways to suit different product goals. \nPoints create visual breakpoints that make your timeline easier to read, they act as bullet points, representing each step or activity. The icons and colors can be customized. \nLines can either match the state and color of the points or be styled differently or in neutral tokens to emphasize the points.",
|
|
117
|
-
"layout": "horizontal",
|
|
118
|
-
"content": [
|
|
110
|
+
"type": "list",
|
|
111
|
+
"items": [
|
|
119
112
|
{
|
|
120
|
-
"
|
|
113
|
+
"title": "",
|
|
114
|
+
"description": "markdown:\nThe Timeline consists of points and lines, each with different styles and states. These elements can be combined in various ways to suit different product goals. \nPoints create visual breakpoints that make your timeline easier to read, they act as bullet points, representing each step or activity. The icons and colors can be customized. \nLines can either match the state and color of the points or be styled differently or in neutral tokens to emphasize the points.",
|
|
115
|
+
"content": [
|
|
116
|
+
{
|
|
117
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_structure.png"
|
|
118
|
+
}
|
|
119
|
+
]
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"title": "Points aligned to center (default)",
|
|
123
|
+
"description": "The timeline points are aligned with the center of the element on the right.",
|
|
124
|
+
"content": [
|
|
125
|
+
{
|
|
126
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_structure_center.png"
|
|
127
|
+
}
|
|
128
|
+
]
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"title": "Points aligned to anchor ref",
|
|
132
|
+
"description": "The Timeline can be configured to align its points to one of the elements on the right. In the example, the points are aligned with the titles in the cards.",
|
|
133
|
+
"content": [
|
|
134
|
+
{
|
|
135
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_structure_anchorRef.png"
|
|
136
|
+
}
|
|
137
|
+
]
|
|
121
138
|
}
|
|
122
|
-
]
|
|
139
|
+
],
|
|
140
|
+
"layout": "horizontal",
|
|
141
|
+
"title": "Structure"
|
|
123
142
|
},
|
|
124
143
|
{
|
|
125
144
|
"type": "table",
|
|
126
|
-
"columns": [
|
|
127
|
-
"Property",
|
|
128
|
-
"Preview",
|
|
129
|
-
"DELETE ME"
|
|
130
|
-
],
|
|
145
|
+
"columns": ["Property", "Preview"],
|
|
131
146
|
"items": [
|
|
132
147
|
{
|
|
133
148
|
"title": "Current",
|
|
@@ -229,10 +244,7 @@
|
|
|
229
244
|
},
|
|
230
245
|
{
|
|
231
246
|
"type": "table",
|
|
232
|
-
"columns": [
|
|
233
|
-
"Property",
|
|
234
|
-
"Preview"
|
|
235
|
-
],
|
|
247
|
+
"columns": ["Property", "Preview"],
|
|
236
248
|
"items": [
|
|
237
249
|
{
|
|
238
250
|
"title": "Bullet",
|
|
@@ -252,10 +264,7 @@
|
|
|
252
264
|
},
|
|
253
265
|
{
|
|
254
266
|
"type": "table",
|
|
255
|
-
"columns": [
|
|
256
|
-
"Property",
|
|
257
|
-
"Preview"
|
|
258
|
-
],
|
|
267
|
+
"columns": ["Property", "Preview"],
|
|
259
268
|
"items": [
|
|
260
269
|
{
|
|
261
270
|
"title": "Text",
|
|
@@ -296,82 +305,9 @@
|
|
|
296
305
|
],
|
|
297
306
|
"name": "Point Accessories"
|
|
298
307
|
},
|
|
299
|
-
{
|
|
300
|
-
"type": "section",
|
|
301
|
-
"title": "Orientation",
|
|
302
|
-
"description": "markdown:\nThe Timeline can be displayed in either ascending or descending order, depending on the context: \n\n - **Ascending:** Numbers increase as you move forward. \n - **Descending:** Numbers decrease as you move forward.",
|
|
303
|
-
"content": [
|
|
304
|
-
{
|
|
305
|
-
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=2325-449060&embed-host=share"
|
|
306
|
-
}
|
|
307
|
-
]
|
|
308
|
-
},
|
|
309
|
-
{
|
|
310
|
-
"type": "list",
|
|
311
|
-
"items": [
|
|
312
|
-
{
|
|
313
|
-
"title": "Aligned to top",
|
|
314
|
-
"description": "The Timeline can be configured to align its points with the top of a specific group of elements on the right. In the example, the points are aligned with the top of the first element within the Card.",
|
|
315
|
-
"content": [
|
|
316
|
-
{
|
|
317
|
-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_overview_spec1.png"
|
|
318
|
-
}
|
|
319
|
-
]
|
|
320
|
-
},
|
|
321
|
-
{
|
|
322
|
-
"title": "Aligned to center",
|
|
323
|
-
"description": "The timeline points are aligned with the center of the element on the right.",
|
|
324
|
-
"content": [
|
|
325
|
-
{
|
|
326
|
-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_overview_spec2.png"
|
|
327
|
-
}
|
|
328
|
-
]
|
|
329
|
-
}
|
|
330
|
-
],
|
|
331
|
-
"layout": "horizontal",
|
|
332
|
-
"title": "Spec",
|
|
333
|
-
"description": "markdown:\n**Key rules:** \n- Maintain a minimum distance of S2 between the Timeline and the elements on the right. \n- Points can be aligned either to the top or the center of the elements on the right. \n- When points are center-aligned with the elements, set the line length to auto, with a minimum of 20px."
|
|
334
|
-
},
|
|
335
|
-
{
|
|
336
|
-
"type": "list",
|
|
337
|
-
"items": [
|
|
338
|
-
{
|
|
339
|
-
"title": "",
|
|
340
|
-
"description": "markdown:\nThe Timeline consists of points and lines, each with different styles and states. These elements can be combined in various ways to suit different product goals. \nPoints create visual breakpoints that make your timeline easier to read, they act as bullet points, representing each step or activity. The icons and colors can be customized. \nLines can either match the state and color of the points or be styled differently or in neutral tokens to emphasize the points.",
|
|
341
|
-
"content": [
|
|
342
|
-
{
|
|
343
|
-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_structure.png"
|
|
344
|
-
}
|
|
345
|
-
]
|
|
346
|
-
},
|
|
347
|
-
{
|
|
348
|
-
"title": "Points aligned to center (default)",
|
|
349
|
-
"description": "The timeline points are aligned with the center of the element on the right.",
|
|
350
|
-
"content": [
|
|
351
|
-
{
|
|
352
|
-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_structure_center.png"
|
|
353
|
-
}
|
|
354
|
-
]
|
|
355
|
-
},
|
|
356
|
-
{
|
|
357
|
-
"title": "Points aligned to anchor ref",
|
|
358
|
-
"description": "The Timeline can be configured to align its points to one of the elements on the right. In the example, the points are aligned with the titles in the cards.",
|
|
359
|
-
"content": [
|
|
360
|
-
{
|
|
361
|
-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_structure_anchorRef.png"
|
|
362
|
-
}
|
|
363
|
-
]
|
|
364
|
-
}
|
|
365
|
-
],
|
|
366
|
-
"layout": "horizontal",
|
|
367
|
-
"title": "Structure"
|
|
368
|
-
},
|
|
369
308
|
{
|
|
370
309
|
"type": "table",
|
|
371
|
-
"columns": [
|
|
372
|
-
"Property",
|
|
373
|
-
"Preview"
|
|
374
|
-
],
|
|
310
|
+
"columns": ["Property", "Preview"],
|
|
375
311
|
"items": [
|
|
376
312
|
{
|
|
377
313
|
"title": "Solid",
|
|
@@ -387,10 +323,7 @@
|
|
|
387
323
|
},
|
|
388
324
|
{
|
|
389
325
|
"type": "table",
|
|
390
|
-
"columns": [
|
|
391
|
-
"Property",
|
|
392
|
-
"Preview"
|
|
393
|
-
],
|
|
326
|
+
"columns": ["Property", "Preview"],
|
|
394
327
|
"items": [
|
|
395
328
|
{
|
|
396
329
|
"title": "Entry",
|
|
@@ -399,6 +332,16 @@
|
|
|
399
332
|
],
|
|
400
333
|
"name": "Line Accessories"
|
|
401
334
|
},
|
|
335
|
+
{
|
|
336
|
+
"type": "section",
|
|
337
|
+
"title": "Orientation",
|
|
338
|
+
"description": "markdown:\nThe Timeline can be displayed in either ascending or descending order, depending on the context: \n\n - **Ascending:** Numbers increase as you move forward. \n - **Descending:** Numbers decrease as you move forward.",
|
|
339
|
+
"content": [
|
|
340
|
+
{
|
|
341
|
+
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=2325-449060&embed-host=share"
|
|
342
|
+
}
|
|
343
|
+
]
|
|
344
|
+
},
|
|
402
345
|
{
|
|
403
346
|
"type": "section",
|
|
404
347
|
"title": "Spec",
|