Skip to content

Commit ee8a437

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

File tree

1 file changed

+68
-19
lines changed

1 file changed

+68
-19
lines changed

‎src/components/badge/badge.api.json

Lines changed: 68 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
"docs": {
9696
"hero": {
9797
"title": "Badge",
98-
"description": "Badge is a global component used for pimples, numeric notifications and icon badges. Badge indicates new threads in the child view and creates a “trail” user can follow. \nUse a Pimple Badge to indicate a notification or new activity of an item (e.g. new activity inside a group) or a status (online, unread).\n\nBadges usually appear on or near other components like Icons, Avatars, Chips and Lists.",
98+
"description": "markdown:\nBadge is a global component used for pimples, numeric notifications and icon badges. Badge indicates new threads in the child view and creates a “trail” user can follow. \nUse a Pimple Badge to indicate a notification or new activity of an item (e.g. new activity inside a group) or a status (online, unread).\n\nBadges usually appear on or near other components like Icons, Avatars, Chips and Lists.",
9999
"type": "hero",
100100
"layout": "horizontal",
101101
"content": [
@@ -121,15 +121,19 @@
121121
{
122122
"props": [
123123
{
124-
"label": "1"
124+
"label": "1",
125+
"backgroundColor": "#FC3D2F",
126+
"labelFormatterLimit": 2
125127
},
126128
{
127129
"label": "1002",
128-
"labelFormatterLimit": 3
130+
"labelFormatterLimit": 3,
131+
"backgroundColor": "#FC3D2F"
129132
},
130133
{
131134
"label": "102",
132135
"labelFormatterLimit": 2,
136+
"backgroundColor": "#FC3D2F",
133137
"icon": {
134138
"uri": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/notificationsFillSmall.png"
135139
}
@@ -143,7 +147,8 @@
143147
"content": [
144148
{
145149
"props": {
146-
"label": "New"
150+
"label": "New",
151+
"backgroundColor": "#FC3D2F"
147152
}
148153
}
149154
]
@@ -153,7 +158,8 @@
153158
"content": [
154159
{
155160
"props": {
156-
"label": ""
161+
"label": "",
162+
"backgroundColor": "#FC3D2F"
157163
}
158164
}
159165
]
@@ -163,6 +169,7 @@
163169
"content": [
164170
{
165171
"props": {
172+
"backgroundColor": "#FC3D2F",
166173
"icon": {
167174
"uri": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/socialFacebook.png"
168175
}
@@ -186,11 +193,16 @@
186193
"content": [
187194
{
188195
"props": {
189-
"label": "2"
196+
"label": "2",
197+
"labelFormatterLimit": 2,
198+
"backgroundColor": "#FC3D2F"
190199
}
191200
},
192201
{
193202
"props": {
203+
"label": "",
204+
"backgroundColor": "#FC3D2F",
205+
"size": "small"
194206
}
195207
}
196208
]
@@ -200,14 +212,16 @@
200212
"content": [
201213
{
202214
"props": {
203-
"label": "2",
204-
"backgroundColor": "#00A87E"
215+
"label": "",
216+
"backgroundColor": "#FC3D2F",
217+
"labelFormatterLimit": 2,
218+
"size": "small"
205219
}
206220
},
207221
{
208222
"props": {
209223
"label": "",
210-
"backgroundColor": "#00A87E"
224+
"backgroundColor": "#FC3D2F"
211225
}
212226
}
213227
]
@@ -219,7 +233,7 @@
219233
"type": "table",
220234
"columns": [
221235
"Property",
222-
"Counter Badge",
236+
"Counter",
223237
"Pimple"
224238
],
225239
"items": [
@@ -228,11 +242,17 @@
228242
"description": "Used for notifications or new items. ",
229243
"content": [
230244
{
231-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Badge/badge_style_counter_red.png"
245+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Badge/badge_style_counter_red.png",
246+
"props": {
247+
"label": "2",
248+
"labelFormatterLimit": 2,
249+
"backgroundColor": "#FC3D2F"
250+
}
232251
},
233252
{
234253
"props": {
235-
"label": ""
254+
"label": "",
255+
"backgroundColor": "#FC3D2F"
236256
}
237257
}
238258
]
@@ -242,7 +262,12 @@
242262
"description": "Used for live visitors or an “online” indication. ",
243263
"content": [
244264
{
245-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Badge/badge_style_counter_green.png"
265+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Badge/badge_style_counter_green.png",
266+
"props": {
267+
"label": "2",
268+
"labelFormatterLimit": 2,
269+
"backgroundColor": "#00A87E"
270+
}
246271
},
247272
{
248273
"props": {
@@ -257,12 +282,15 @@
257282
"description": "Used for chat messages.",
258283
"content": [
259284
{
260-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Badge/badge_style_counter_blue.png"
285+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Badge/badge_style_counter_blue.png",
286+
"props": {
287+
"label": "2",
288+
"labelFormatterLimit": 2
289+
}
261290
},
262291
{
263292
"props": {
264-
"label": "",
265-
"backgroundColor": "#116DFF"
293+
"label": ""
266294
}
267295
}
268296
]
@@ -272,7 +300,12 @@
272300
"description": "Used for passive counters.",
273301
"content": [
274302
{
275-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Badge/badge_style_counter_grey.png"
303+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Badge/badge_style_counter_grey.png",
304+
"props": {
305+
"label": "2",
306+
"labelFormatterLimit": 2,
307+
"backgroundColor": "#A6ACB1"
308+
}
276309
},
277310
{
278311
"props": {
@@ -297,7 +330,23 @@
297330
"description": "Icon can be added as an accessory to counter badge, or cover the entire badge",
298331
"content": [
299332
{
300-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Badge/badge_accessory_icon.png"
333+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Badge/badge_accessory_icon.png",
334+
"props": [
335+
{
336+
"label": "102",
337+
"labelFormatterLimit": 2,
338+
"backgroundColor": "#FC3D2F",
339+
"icon": {
340+
"uri": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/notificationsFillSmall.png"
341+
}
342+
},
343+
{
344+
"label": "",
345+
"icon": {
346+
"uri": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/socialFacebook.png"
347+
}
348+
}
349+
]
301350
}
302351
]
303352
}
@@ -309,7 +358,7 @@
309358
"items": [
310359
{
311360
"title": "Badge size recommendations",
312-
"description": "On Icon: Large Pimple or Small Badge\nOn Thumbnail: Large Badge\nOn Avatar:
Avatar 3XSmall, XXSmall - Pimple Small
Avatar XSmall, Small, Medium - Pimple Large
Avatar Large, XLarge - Pimple 14x14",
361+
"description": "markdown:\nOn Icon: Large Pimple or Small Badge\n\nOn Thumbnail: Large Badge\n\nOn Avatar:
Avatar xxxSmall, xxSmall - Pimple Small
Avatar xSmall, Small, Medium - Pimple Large
Avatar Large, xLarge - Pimple Large
(the badge is positioned using pythagoras)",
313362
"content": [
314363
{
315364
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=487-40121&embed-host=share"

0 commit comments

Comments
 (0)