playbook_ui_docs 16.11.0.pre.rc.0 → 16.11.0.pre.rc.1
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_playground.json +149 -237
- data/app/pb_kits/playbook/pb_dropdown/docs/_playground.overrides.json +58 -74
- data/app/pb_kits/playbook/pb_icon/docs/_playground.json +2 -16
- data/app/pb_kits/playbook/pb_icon/docs/_playground.overrides.json +2 -13
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3f609213cca04d26639951a31e33caaa37196ee606be1a7b4d6f236d528f7f57
|
|
4
|
+
data.tar.gz: 5a4f99a56d0675389b50bb56e957b7e3f14457e962d5ab419a7f357245584f4f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f6120c03f348ee94b493478738c396af098c13cb67ca11414d5316953e8e6009c4abc50cc521823f1ee62e55dd4362dad9bf5e50acc93ff680dca440c760a64a
|
|
7
|
+
data.tar.gz: 2d8ae9ec419707fe1d6502aed0b5b9f0bf97977a6f0f3d99a6969789b724661e28b29f82b0cf43e031fbe2211182ec473ab2d151b18442554014cbc8b01db4cb
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
"clearable": true,
|
|
8
8
|
"closeOnClick": "any",
|
|
9
9
|
"constrainHeight": false,
|
|
10
|
+
"disabled": false,
|
|
10
11
|
"multiSelect": false,
|
|
11
12
|
"separators": true,
|
|
12
13
|
"variant": "default",
|
|
@@ -25,12 +26,59 @@
|
|
|
25
26
|
{
|
|
26
27
|
"label": "Canada",
|
|
27
28
|
"value": "canada",
|
|
28
|
-
"id": "ca"
|
|
29
|
+
"id": "ca",
|
|
30
|
+
"disabled": true
|
|
29
31
|
},
|
|
30
32
|
{
|
|
31
33
|
"label": "Pakistan",
|
|
32
34
|
"value": "pakistan",
|
|
33
35
|
"id": "pk"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"label": "Mexico",
|
|
39
|
+
"value": "mexico",
|
|
40
|
+
"id": "mx",
|
|
41
|
+
"disabled": true
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"label": "United Kingdom",
|
|
45
|
+
"value": "unitedKingdom",
|
|
46
|
+
"id": "gb"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"label": "India",
|
|
50
|
+
"value": "india",
|
|
51
|
+
"id": "in"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"label": "Australia",
|
|
55
|
+
"value": "australia",
|
|
56
|
+
"id": "au"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"label": "New Zealand",
|
|
60
|
+
"value": "newZealand",
|
|
61
|
+
"id": "nz"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"label": "Italy",
|
|
65
|
+
"value": "italy",
|
|
66
|
+
"id": "it"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"label": "Germany",
|
|
70
|
+
"value": "germany",
|
|
71
|
+
"id": "de"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"label": "Brazil",
|
|
75
|
+
"value": "brazil",
|
|
76
|
+
"id": "br"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"label": "Philippines",
|
|
80
|
+
"value": "philippines",
|
|
81
|
+
"id": "ph"
|
|
34
82
|
}
|
|
35
83
|
],
|
|
36
84
|
"placeholder": "Select a country"
|
|
@@ -75,7 +123,8 @@
|
|
|
75
123
|
"separators",
|
|
76
124
|
"formPillProps",
|
|
77
125
|
"activeStyle",
|
|
78
|
-
"dark"
|
|
126
|
+
"dark",
|
|
127
|
+
"disabled"
|
|
79
128
|
]
|
|
80
129
|
},
|
|
81
130
|
{
|
|
@@ -90,72 +139,28 @@
|
|
|
90
139
|
"name": "Default trigger",
|
|
91
140
|
"props": {
|
|
92
141
|
"variant": "default",
|
|
93
|
-
"placeholder": "Select a country"
|
|
94
|
-
"options": [
|
|
95
|
-
{
|
|
96
|
-
"label": "United States",
|
|
97
|
-
"value": "unitedStates",
|
|
98
|
-
"id": "us"
|
|
99
|
-
},
|
|
100
|
-
{
|
|
101
|
-
"label": "Canada",
|
|
102
|
-
"value": "canada",
|
|
103
|
-
"id": "ca"
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
"label": "Mexico",
|
|
107
|
-
"value": "mexico",
|
|
108
|
-
"id": "mx"
|
|
109
|
-
}
|
|
110
|
-
]
|
|
142
|
+
"placeholder": "Select a country"
|
|
111
143
|
}
|
|
112
144
|
},
|
|
113
145
|
{
|
|
114
146
|
"name": "With label",
|
|
115
147
|
"props": {
|
|
116
148
|
"label": "Select a Country",
|
|
117
|
-
"placeholder": "Choose a country"
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
"label": "Canada",
|
|
126
|
-
"value": "canada",
|
|
127
|
-
"id": "ca"
|
|
128
|
-
},
|
|
129
|
-
{
|
|
130
|
-
"label": "Pakistan",
|
|
131
|
-
"value": "pakistan",
|
|
132
|
-
"id": "pk"
|
|
133
|
-
}
|
|
134
|
-
]
|
|
149
|
+
"placeholder": "Choose a country"
|
|
150
|
+
}
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"name": "Disabled options",
|
|
154
|
+
"props": {
|
|
155
|
+
"label": "Select a Country",
|
|
156
|
+
"placeholder": "Choose a country"
|
|
135
157
|
}
|
|
136
158
|
},
|
|
137
159
|
{
|
|
138
160
|
"name": "Subtle Variant",
|
|
139
161
|
"props": {
|
|
140
162
|
"variant": "subtle",
|
|
141
|
-
"separators": false
|
|
142
|
-
"options": [
|
|
143
|
-
{
|
|
144
|
-
"label": "Alpha",
|
|
145
|
-
"value": "alpha",
|
|
146
|
-
"id": "a"
|
|
147
|
-
},
|
|
148
|
-
{
|
|
149
|
-
"label": "Beta",
|
|
150
|
-
"value": "beta",
|
|
151
|
-
"id": "b"
|
|
152
|
-
},
|
|
153
|
-
{
|
|
154
|
-
"label": "Gamma",
|
|
155
|
-
"value": "gamma",
|
|
156
|
-
"id": "g"
|
|
157
|
-
}
|
|
158
|
-
]
|
|
163
|
+
"separators": false
|
|
159
164
|
}
|
|
160
165
|
},
|
|
161
166
|
{
|
|
@@ -222,29 +227,7 @@
|
|
|
222
227
|
"props": {
|
|
223
228
|
"variant": "default",
|
|
224
229
|
"multiSelect": true,
|
|
225
|
-
"placeholder": "Select
|
|
226
|
-
"options": [
|
|
227
|
-
{
|
|
228
|
-
"label": "North",
|
|
229
|
-
"value": "north",
|
|
230
|
-
"id": "n"
|
|
231
|
-
},
|
|
232
|
-
{
|
|
233
|
-
"label": "South",
|
|
234
|
-
"value": "south",
|
|
235
|
-
"id": "s"
|
|
236
|
-
},
|
|
237
|
-
{
|
|
238
|
-
"label": "East",
|
|
239
|
-
"value": "east",
|
|
240
|
-
"id": "e"
|
|
241
|
-
},
|
|
242
|
-
{
|
|
243
|
-
"label": "West",
|
|
244
|
-
"value": "west",
|
|
245
|
-
"id": "w"
|
|
246
|
-
}
|
|
247
|
-
]
|
|
230
|
+
"placeholder": "Select countries"
|
|
248
231
|
}
|
|
249
232
|
},
|
|
250
233
|
{
|
|
@@ -266,48 +249,6 @@
|
|
|
266
249
|
"label": "Italy",
|
|
267
250
|
"value": "italy"
|
|
268
251
|
}
|
|
269
|
-
],
|
|
270
|
-
"options": [
|
|
271
|
-
{
|
|
272
|
-
"label": "United States",
|
|
273
|
-
"value": "unitedStates",
|
|
274
|
-
"id": "us"
|
|
275
|
-
},
|
|
276
|
-
{
|
|
277
|
-
"label": "United Kingdom",
|
|
278
|
-
"value": "unitedKingdom",
|
|
279
|
-
"id": "gb"
|
|
280
|
-
},
|
|
281
|
-
{
|
|
282
|
-
"label": "Canada",
|
|
283
|
-
"value": "canada",
|
|
284
|
-
"id": "ca"
|
|
285
|
-
},
|
|
286
|
-
{
|
|
287
|
-
"label": "Pakistan",
|
|
288
|
-
"value": "pakistan",
|
|
289
|
-
"id": "pk"
|
|
290
|
-
},
|
|
291
|
-
{
|
|
292
|
-
"label": "India",
|
|
293
|
-
"value": "india",
|
|
294
|
-
"id": "in"
|
|
295
|
-
},
|
|
296
|
-
{
|
|
297
|
-
"label": "Australia",
|
|
298
|
-
"value": "australia",
|
|
299
|
-
"id": "au"
|
|
300
|
-
},
|
|
301
|
-
{
|
|
302
|
-
"label": "New Zealand",
|
|
303
|
-
"value": "newZealand",
|
|
304
|
-
"id": "nz"
|
|
305
|
-
},
|
|
306
|
-
{
|
|
307
|
-
"label": "Italy",
|
|
308
|
-
"value": "italy",
|
|
309
|
-
"id": "it"
|
|
310
|
-
}
|
|
311
252
|
]
|
|
312
253
|
}
|
|
313
254
|
},
|
|
@@ -317,19 +258,7 @@
|
|
|
317
258
|
"variant": "default",
|
|
318
259
|
"label": "Required field",
|
|
319
260
|
"placeholder": "Required field",
|
|
320
|
-
"error": "Please make a selection."
|
|
321
|
-
"options": [
|
|
322
|
-
{
|
|
323
|
-
"label": "Option A",
|
|
324
|
-
"value": "a",
|
|
325
|
-
"id": "a"
|
|
326
|
-
},
|
|
327
|
-
{
|
|
328
|
-
"label": "Option B",
|
|
329
|
-
"value": "b",
|
|
330
|
-
"id": "b"
|
|
331
|
-
}
|
|
332
|
-
]
|
|
261
|
+
"error": "Please make a selection."
|
|
333
262
|
}
|
|
334
263
|
},
|
|
335
264
|
{
|
|
@@ -337,93 +266,14 @@
|
|
|
337
266
|
"props": {
|
|
338
267
|
"variant": "default",
|
|
339
268
|
"autocomplete": true,
|
|
340
|
-
"placeholder": "Search
|
|
341
|
-
"options": [
|
|
342
|
-
{
|
|
343
|
-
"label": "Apple",
|
|
344
|
-
"value": "apple",
|
|
345
|
-
"id": "1"
|
|
346
|
-
},
|
|
347
|
-
{
|
|
348
|
-
"label": "Apricot",
|
|
349
|
-
"value": "apricot",
|
|
350
|
-
"id": "2"
|
|
351
|
-
},
|
|
352
|
-
{
|
|
353
|
-
"label": "Banana",
|
|
354
|
-
"value": "banana",
|
|
355
|
-
"id": "3"
|
|
356
|
-
}
|
|
357
|
-
]
|
|
269
|
+
"placeholder": "Search..."
|
|
358
270
|
}
|
|
359
271
|
},
|
|
360
272
|
{
|
|
361
273
|
"name": "Constrained height",
|
|
362
274
|
"props": {
|
|
363
275
|
"label": "Choose an Option",
|
|
364
|
-
"constrainHeight": true
|
|
365
|
-
"options": [
|
|
366
|
-
{
|
|
367
|
-
"label": "Option 1",
|
|
368
|
-
"value": "option_1",
|
|
369
|
-
"id": "opt_1"
|
|
370
|
-
},
|
|
371
|
-
{
|
|
372
|
-
"label": "Option 2",
|
|
373
|
-
"value": "option_2",
|
|
374
|
-
"id": "opt_2"
|
|
375
|
-
},
|
|
376
|
-
{
|
|
377
|
-
"label": "Option 3",
|
|
378
|
-
"value": "option_3",
|
|
379
|
-
"id": "opt_3"
|
|
380
|
-
},
|
|
381
|
-
{
|
|
382
|
-
"label": "Option 4",
|
|
383
|
-
"value": "option_4",
|
|
384
|
-
"id": "opt_4"
|
|
385
|
-
},
|
|
386
|
-
{
|
|
387
|
-
"label": "Option 5",
|
|
388
|
-
"value": "option_5",
|
|
389
|
-
"id": "opt_5"
|
|
390
|
-
},
|
|
391
|
-
{
|
|
392
|
-
"label": "Option 6",
|
|
393
|
-
"value": "option_6",
|
|
394
|
-
"id": "opt_6"
|
|
395
|
-
},
|
|
396
|
-
{
|
|
397
|
-
"label": "Option 7",
|
|
398
|
-
"value": "option_7",
|
|
399
|
-
"id": "opt_7"
|
|
400
|
-
},
|
|
401
|
-
{
|
|
402
|
-
"label": "Option 8",
|
|
403
|
-
"value": "option_8",
|
|
404
|
-
"id": "opt_8"
|
|
405
|
-
},
|
|
406
|
-
{
|
|
407
|
-
"label": "Option 9",
|
|
408
|
-
"value": "option_9",
|
|
409
|
-
"id": "opt_9"
|
|
410
|
-
},
|
|
411
|
-
{
|
|
412
|
-
"label": "Option 10",
|
|
413
|
-
"value": "option_10",
|
|
414
|
-
"id": "opt_10"
|
|
415
|
-
},
|
|
416
|
-
{
|
|
417
|
-
"label": "Option 11",
|
|
418
|
-
"value": "option_11",
|
|
419
|
-
"id": "opt_11"
|
|
420
|
-
},
|
|
421
|
-
{
|
|
422
|
-
"label": "Option 12",
|
|
423
|
-
"value": "option_12",
|
|
424
|
-
"id": "opt_12"
|
|
425
|
-
}
|
|
426
|
-
]
|
|
276
|
+
"constrainHeight": true
|
|
427
277
|
}
|
|
428
278
|
}
|
|
429
279
|
],
|
|
@@ -492,6 +342,11 @@
|
|
|
492
342
|
"message": "constrainHeight restricts the height of the dropdown menu and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.",
|
|
493
343
|
"type": "info"
|
|
494
344
|
},
|
|
345
|
+
"disabled_options_info": {
|
|
346
|
+
"presetName": "Disabled options",
|
|
347
|
+
"message": "Set disabled: true on individual option objects to keep them visible while preventing selection.",
|
|
348
|
+
"type": "info"
|
|
349
|
+
},
|
|
495
350
|
"subcomponent_structure_info": {
|
|
496
351
|
"message": "Switch Structure to “With Subcomponents” to see the explicit Dropdown.Trigger, Dropdown.Container, and Dropdown.Option composition API.",
|
|
497
352
|
"type": "info"
|
|
@@ -502,33 +357,90 @@
|
|
|
502
357
|
"modes": {
|
|
503
358
|
"simple": {
|
|
504
359
|
"label": "Simple",
|
|
505
|
-
"template": "<Dropdown{{props}} />",
|
|
360
|
+
"template": "<Dropdown options={options}{{props}} />",
|
|
506
361
|
"children": ""
|
|
507
362
|
},
|
|
508
363
|
"subcomponents": {
|
|
509
364
|
"label": "With Subcomponents",
|
|
510
|
-
"template": "<Dropdown{{props}}>\n <Dropdown.Trigger />\n <Dropdown.Container>\n
|
|
511
|
-
"children": ""
|
|
512
|
-
"props": {
|
|
513
|
-
"options": [
|
|
514
|
-
{
|
|
515
|
-
"label": "United States",
|
|
516
|
-
"value": "unitedStates",
|
|
517
|
-
"id": "us"
|
|
518
|
-
},
|
|
519
|
-
{
|
|
520
|
-
"label": "Canada",
|
|
521
|
-
"value": "canada",
|
|
522
|
-
"id": "ca"
|
|
523
|
-
},
|
|
524
|
-
{
|
|
525
|
-
"label": "Pakistan",
|
|
526
|
-
"value": "pakistan",
|
|
527
|
-
"id": "pk"
|
|
528
|
-
}
|
|
529
|
-
]
|
|
530
|
-
}
|
|
365
|
+
"template": "<Dropdown options={options}{{props}}>\n <Dropdown.Trigger />\n <Dropdown.Container>\n {options.map((option) => (\n <Dropdown.Option key={option.id} option={option} />\n ))}\n </Dropdown.Container>\n</Dropdown>",
|
|
366
|
+
"children": ""
|
|
531
367
|
}
|
|
532
368
|
}
|
|
369
|
+
},
|
|
370
|
+
"customProps": {
|
|
371
|
+
"options": {
|
|
372
|
+
"type": "array",
|
|
373
|
+
"platforms": [
|
|
374
|
+
"react",
|
|
375
|
+
"rails"
|
|
376
|
+
],
|
|
377
|
+
"description": "Dropdown option data with label, value, id, and optional disabled state."
|
|
378
|
+
}
|
|
379
|
+
},
|
|
380
|
+
"requiredProps": {
|
|
381
|
+
"options": [
|
|
382
|
+
{
|
|
383
|
+
"label": "United States",
|
|
384
|
+
"value": "unitedStates",
|
|
385
|
+
"id": "us"
|
|
386
|
+
},
|
|
387
|
+
{
|
|
388
|
+
"label": "Canada",
|
|
389
|
+
"value": "canada",
|
|
390
|
+
"id": "ca",
|
|
391
|
+
"disabled": true
|
|
392
|
+
},
|
|
393
|
+
{
|
|
394
|
+
"label": "Pakistan",
|
|
395
|
+
"value": "pakistan",
|
|
396
|
+
"id": "pk"
|
|
397
|
+
},
|
|
398
|
+
{
|
|
399
|
+
"label": "Mexico",
|
|
400
|
+
"value": "mexico",
|
|
401
|
+
"id": "mx",
|
|
402
|
+
"disabled": true
|
|
403
|
+
},
|
|
404
|
+
{
|
|
405
|
+
"label": "United Kingdom",
|
|
406
|
+
"value": "unitedKingdom",
|
|
407
|
+
"id": "gb"
|
|
408
|
+
},
|
|
409
|
+
{
|
|
410
|
+
"label": "India",
|
|
411
|
+
"value": "india",
|
|
412
|
+
"id": "in"
|
|
413
|
+
},
|
|
414
|
+
{
|
|
415
|
+
"label": "Australia",
|
|
416
|
+
"value": "australia",
|
|
417
|
+
"id": "au"
|
|
418
|
+
},
|
|
419
|
+
{
|
|
420
|
+
"label": "New Zealand",
|
|
421
|
+
"value": "newZealand",
|
|
422
|
+
"id": "nz"
|
|
423
|
+
},
|
|
424
|
+
{
|
|
425
|
+
"label": "Italy",
|
|
426
|
+
"value": "italy",
|
|
427
|
+
"id": "it"
|
|
428
|
+
},
|
|
429
|
+
{
|
|
430
|
+
"label": "Germany",
|
|
431
|
+
"value": "germany",
|
|
432
|
+
"id": "de"
|
|
433
|
+
},
|
|
434
|
+
{
|
|
435
|
+
"label": "Brazil",
|
|
436
|
+
"value": "brazil",
|
|
437
|
+
"id": "br"
|
|
438
|
+
},
|
|
439
|
+
{
|
|
440
|
+
"label": "Philippines",
|
|
441
|
+
"value": "philippines",
|
|
442
|
+
"id": "ph"
|
|
443
|
+
}
|
|
444
|
+
]
|
|
533
445
|
}
|
|
534
446
|
}
|
|
@@ -4,23 +4,39 @@
|
|
|
4
4
|
"modes": {
|
|
5
5
|
"simple": {
|
|
6
6
|
"label": "Simple",
|
|
7
|
-
"template": "<Dropdown{{props}} />",
|
|
7
|
+
"template": "<Dropdown options={options}{{props}} />",
|
|
8
8
|
"children": ""
|
|
9
9
|
},
|
|
10
10
|
"subcomponents": {
|
|
11
11
|
"label": "With Subcomponents",
|
|
12
|
-
"template": "<Dropdown{{props}}>\n <Dropdown.Trigger />\n <Dropdown.Container>\n
|
|
13
|
-
"children": ""
|
|
14
|
-
"props": {
|
|
15
|
-
"options": [
|
|
16
|
-
{ "label": "United States", "value": "unitedStates", "id": "us" },
|
|
17
|
-
{ "label": "Canada", "value": "canada", "id": "ca" },
|
|
18
|
-
{ "label": "Pakistan", "value": "pakistan", "id": "pk" }
|
|
19
|
-
]
|
|
20
|
-
}
|
|
12
|
+
"template": "<Dropdown options={options}{{props}}>\n <Dropdown.Trigger />\n <Dropdown.Container>\n {options.map((option) => (\n <Dropdown.Option key={option.id} option={option} />\n ))}\n </Dropdown.Container>\n</Dropdown>",
|
|
13
|
+
"children": ""
|
|
21
14
|
}
|
|
22
15
|
}
|
|
23
16
|
},
|
|
17
|
+
"customProps": {
|
|
18
|
+
"options": {
|
|
19
|
+
"type": "array",
|
|
20
|
+
"platforms": ["react", "rails"],
|
|
21
|
+
"description": "Dropdown option data with label, value, id, and optional disabled state."
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"requiredProps": {
|
|
25
|
+
"options": [
|
|
26
|
+
{ "label": "United States", "value": "unitedStates", "id": "us" },
|
|
27
|
+
{ "label": "Canada", "value": "canada", "id": "ca", "disabled": true },
|
|
28
|
+
{ "label": "Pakistan", "value": "pakistan", "id": "pk" },
|
|
29
|
+
{ "label": "Mexico", "value": "mexico", "id": "mx", "disabled": true },
|
|
30
|
+
{ "label": "United Kingdom", "value": "unitedKingdom", "id": "gb" },
|
|
31
|
+
{ "label": "India", "value": "india", "id": "in" },
|
|
32
|
+
{ "label": "Australia", "value": "australia", "id": "au" },
|
|
33
|
+
{ "label": "New Zealand", "value": "newZealand", "id": "nz" },
|
|
34
|
+
{ "label": "Italy", "value": "italy", "id": "it" },
|
|
35
|
+
{ "label": "Germany", "value": "germany", "id": "de" },
|
|
36
|
+
{ "label": "Brazil", "value": "brazil", "id": "br" },
|
|
37
|
+
{ "label": "Philippines", "value": "philippines", "id": "ph" }
|
|
38
|
+
]
|
|
39
|
+
},
|
|
24
40
|
"defaults": {
|
|
25
41
|
"autocomplete": false,
|
|
26
42
|
"blankSelection": "",
|
|
@@ -32,8 +48,17 @@
|
|
|
32
48
|
"multiSelect": false,
|
|
33
49
|
"options": [
|
|
34
50
|
{ "label": "United States", "value": "unitedStates", "id": "us" },
|
|
35
|
-
{ "label": "Canada", "value": "canada", "id": "ca" },
|
|
36
|
-
{ "label": "Pakistan", "value": "pakistan", "id": "pk" }
|
|
51
|
+
{ "label": "Canada", "value": "canada", "id": "ca", "disabled": true },
|
|
52
|
+
{ "label": "Pakistan", "value": "pakistan", "id": "pk" },
|
|
53
|
+
{ "label": "Mexico", "value": "mexico", "id": "mx", "disabled": true },
|
|
54
|
+
{ "label": "United Kingdom", "value": "unitedKingdom", "id": "gb" },
|
|
55
|
+
{ "label": "India", "value": "india", "id": "in" },
|
|
56
|
+
{ "label": "Australia", "value": "australia", "id": "au" },
|
|
57
|
+
{ "label": "New Zealand", "value": "newZealand", "id": "nz" },
|
|
58
|
+
{ "label": "Italy", "value": "italy", "id": "it" },
|
|
59
|
+
{ "label": "Germany", "value": "germany", "id": "de" },
|
|
60
|
+
{ "label": "Brazil", "value": "brazil", "id": "br" },
|
|
61
|
+
{ "label": "Philippines", "value": "philippines", "id": "ph" }
|
|
37
62
|
],
|
|
38
63
|
"placeholder": "Select a country",
|
|
39
64
|
"requiredIndicator": false,
|
|
@@ -80,7 +105,8 @@
|
|
|
80
105
|
"separators",
|
|
81
106
|
"formPillProps",
|
|
82
107
|
"activeStyle",
|
|
83
|
-
"dark"
|
|
108
|
+
"dark",
|
|
109
|
+
"disabled"
|
|
84
110
|
]
|
|
85
111
|
},
|
|
86
112
|
{
|
|
@@ -93,36 +119,28 @@
|
|
|
93
119
|
"name": "Default trigger",
|
|
94
120
|
"props": {
|
|
95
121
|
"variant": "default",
|
|
96
|
-
"placeholder": "Select a country"
|
|
97
|
-
"options": [
|
|
98
|
-
{ "label": "United States", "value": "unitedStates", "id": "us" },
|
|
99
|
-
{ "label": "Canada", "value": "canada", "id": "ca" },
|
|
100
|
-
{ "label": "Mexico", "value": "mexico", "id": "mx" }
|
|
101
|
-
]
|
|
122
|
+
"placeholder": "Select a country"
|
|
102
123
|
}
|
|
103
124
|
},
|
|
104
125
|
{
|
|
105
126
|
"name": "With label",
|
|
106
127
|
"props": {
|
|
107
128
|
"label": "Select a Country",
|
|
108
|
-
"placeholder": "Choose a country"
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
129
|
+
"placeholder": "Choose a country"
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"name": "Disabled options",
|
|
134
|
+
"props": {
|
|
135
|
+
"label": "Select a Country",
|
|
136
|
+
"placeholder": "Choose a country"
|
|
114
137
|
}
|
|
115
138
|
},
|
|
116
139
|
{
|
|
117
140
|
"name": "Subtle Variant",
|
|
118
141
|
"props": {
|
|
119
142
|
"variant": "subtle",
|
|
120
|
-
"separators": false
|
|
121
|
-
"options": [
|
|
122
|
-
{ "label": "Alpha", "value": "alpha", "id": "a" },
|
|
123
|
-
{ "label": "Beta", "value": "beta", "id": "b" },
|
|
124
|
-
{ "label": "Gamma", "value": "gamma", "id": "g" }
|
|
125
|
-
]
|
|
143
|
+
"separators": false
|
|
126
144
|
}
|
|
127
145
|
},
|
|
128
146
|
{
|
|
@@ -183,13 +201,7 @@
|
|
|
183
201
|
"props": {
|
|
184
202
|
"variant": "default",
|
|
185
203
|
"multiSelect": true,
|
|
186
|
-
"placeholder": "Select
|
|
187
|
-
"options": [
|
|
188
|
-
{ "label": "North", "value": "north", "id": "n" },
|
|
189
|
-
{ "label": "South", "value": "south", "id": "s" },
|
|
190
|
-
{ "label": "East", "value": "east", "id": "e" },
|
|
191
|
-
{ "label": "West", "value": "west", "id": "w" }
|
|
192
|
-
]
|
|
204
|
+
"placeholder": "Select countries"
|
|
193
205
|
}
|
|
194
206
|
},
|
|
195
207
|
{
|
|
@@ -202,16 +214,6 @@
|
|
|
202
214
|
"defaultValue": [
|
|
203
215
|
{ "label": "United States", "value": "unitedStates" },
|
|
204
216
|
{ "label": "Italy", "value": "italy" }
|
|
205
|
-
],
|
|
206
|
-
"options": [
|
|
207
|
-
{ "label": "United States", "value": "unitedStates", "id": "us" },
|
|
208
|
-
{ "label": "United Kingdom", "value": "unitedKingdom", "id": "gb" },
|
|
209
|
-
{ "label": "Canada", "value": "canada", "id": "ca" },
|
|
210
|
-
{ "label": "Pakistan", "value": "pakistan", "id": "pk" },
|
|
211
|
-
{ "label": "India", "value": "india", "id": "in" },
|
|
212
|
-
{ "label": "Australia", "value": "australia", "id": "au" },
|
|
213
|
-
{ "label": "New Zealand", "value": "newZealand", "id": "nz" },
|
|
214
|
-
{ "label": "Italy", "value": "italy", "id": "it" }
|
|
215
217
|
]
|
|
216
218
|
}
|
|
217
219
|
},
|
|
@@ -221,11 +223,7 @@
|
|
|
221
223
|
"variant": "default",
|
|
222
224
|
"label": "Required field",
|
|
223
225
|
"placeholder": "Required field",
|
|
224
|
-
"error": "Please make a selection."
|
|
225
|
-
"options": [
|
|
226
|
-
{ "label": "Option A", "value": "a", "id": "a" },
|
|
227
|
-
{ "label": "Option B", "value": "b", "id": "b" }
|
|
228
|
-
]
|
|
226
|
+
"error": "Please make a selection."
|
|
229
227
|
}
|
|
230
228
|
},
|
|
231
229
|
{
|
|
@@ -233,33 +231,14 @@
|
|
|
233
231
|
"props": {
|
|
234
232
|
"variant": "default",
|
|
235
233
|
"autocomplete": true,
|
|
236
|
-
"placeholder": "Search
|
|
237
|
-
"options": [
|
|
238
|
-
{ "label": "Apple", "value": "apple", "id": "1" },
|
|
239
|
-
{ "label": "Apricot", "value": "apricot", "id": "2" },
|
|
240
|
-
{ "label": "Banana", "value": "banana", "id": "3" }
|
|
241
|
-
]
|
|
234
|
+
"placeholder": "Search..."
|
|
242
235
|
}
|
|
243
236
|
},
|
|
244
237
|
{
|
|
245
238
|
"name": "Constrained height",
|
|
246
239
|
"props": {
|
|
247
240
|
"label": "Choose an Option",
|
|
248
|
-
"constrainHeight": true
|
|
249
|
-
"options": [
|
|
250
|
-
{ "label": "Option 1", "value": "option_1", "id": "opt_1" },
|
|
251
|
-
{ "label": "Option 2", "value": "option_2", "id": "opt_2" },
|
|
252
|
-
{ "label": "Option 3", "value": "option_3", "id": "opt_3" },
|
|
253
|
-
{ "label": "Option 4", "value": "option_4", "id": "opt_4" },
|
|
254
|
-
{ "label": "Option 5", "value": "option_5", "id": "opt_5" },
|
|
255
|
-
{ "label": "Option 6", "value": "option_6", "id": "opt_6" },
|
|
256
|
-
{ "label": "Option 7", "value": "option_7", "id": "opt_7" },
|
|
257
|
-
{ "label": "Option 8", "value": "option_8", "id": "opt_8" },
|
|
258
|
-
{ "label": "Option 9", "value": "option_9", "id": "opt_9" },
|
|
259
|
-
{ "label": "Option 10", "value": "option_10", "id": "opt_10" },
|
|
260
|
-
{ "label": "Option 11", "value": "option_11", "id": "opt_11" },
|
|
261
|
-
{ "label": "Option 12", "value": "option_12", "id": "opt_12" }
|
|
262
|
-
]
|
|
241
|
+
"constrainHeight": true
|
|
263
242
|
}
|
|
264
243
|
}
|
|
265
244
|
],
|
|
@@ -302,6 +281,11 @@
|
|
|
302
281
|
"message": "constrainHeight restricts the height of the dropdown menu and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.",
|
|
303
282
|
"type": "info"
|
|
304
283
|
},
|
|
284
|
+
"disabled_options_info": {
|
|
285
|
+
"presetName": "Disabled options",
|
|
286
|
+
"message": "Set disabled: true on individual option objects to keep them visible while preventing selection.",
|
|
287
|
+
"type": "info"
|
|
288
|
+
},
|
|
305
289
|
"subcomponent_structure_info": {
|
|
306
290
|
"message": "Switch Structure to “With Subcomponents” to see the explicit Dropdown.Trigger, Dropdown.Container, and Dropdown.Option composition API.",
|
|
307
291
|
"type": "info"
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
"template": "<Icon{{props}} />",
|
|
3
3
|
"propTargets": {},
|
|
4
4
|
"defaults": {
|
|
5
|
-
"border": false,
|
|
6
5
|
"fixedWidth": true,
|
|
7
6
|
"inverse": false,
|
|
8
7
|
"listItem": false,
|
|
@@ -122,11 +121,6 @@
|
|
|
122
121
|
"message": "pulse uses the stepped pulse animation, which is commonly paired with spinning icons.",
|
|
123
122
|
"type": "info"
|
|
124
123
|
},
|
|
125
|
-
"bordered_pull": {
|
|
126
|
-
"presetName": "Bordered Pull",
|
|
127
|
-
"message": "border and pull can be combined for quote-style or floated icon treatments.",
|
|
128
|
-
"type": "info"
|
|
129
|
-
},
|
|
130
124
|
"primary_check": {
|
|
131
125
|
"presetName": "Primary Check",
|
|
132
126
|
"message": "Use the color prop to change the color of the icon.",
|
|
@@ -138,17 +132,9 @@
|
|
|
138
132
|
"type": "info"
|
|
139
133
|
}
|
|
140
134
|
},
|
|
141
|
-
"customProps": {
|
|
142
|
-
"border": {
|
|
143
|
-
"type": "boolean",
|
|
144
|
-
"platforms": [
|
|
145
|
-
"react"
|
|
146
|
-
],
|
|
147
|
-
"default": false
|
|
148
|
-
}
|
|
149
|
-
},
|
|
150
135
|
"hiddenProps": [
|
|
151
136
|
"customIcon",
|
|
152
|
-
"fontStyle"
|
|
137
|
+
"fontStyle",
|
|
138
|
+
"border"
|
|
153
139
|
]
|
|
154
140
|
}
|
|
@@ -4,16 +4,10 @@
|
|
|
4
4
|
"fixedWidth": true,
|
|
5
5
|
"fontStyle": "far"
|
|
6
6
|
},
|
|
7
|
-
"customProps": {
|
|
8
|
-
"border": {
|
|
9
|
-
"type": "boolean",
|
|
10
|
-
"platforms": ["react"],
|
|
11
|
-
"default": false
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
7
|
"hiddenProps": [
|
|
15
8
|
"customIcon",
|
|
16
|
-
"fontStyle"
|
|
9
|
+
"fontStyle",
|
|
10
|
+
"border"
|
|
17
11
|
],
|
|
18
12
|
"groups": [
|
|
19
13
|
{
|
|
@@ -110,11 +104,6 @@
|
|
|
110
104
|
"message": "pulse uses the stepped pulse animation, which is commonly paired with spinning icons.",
|
|
111
105
|
"type": "info"
|
|
112
106
|
},
|
|
113
|
-
"bordered_pull": {
|
|
114
|
-
"presetName": "Bordered Pull",
|
|
115
|
-
"message": "border and pull can be combined for quote-style or floated icon treatments.",
|
|
116
|
-
"type": "info"
|
|
117
|
-
},
|
|
118
107
|
"primary_check": {
|
|
119
108
|
"presetName": "Primary Check",
|
|
120
109
|
"message": "Use the color prop to change the color of the icon.",
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 16.11.0.pre.rc.
|
|
4
|
+
version: 16.11.0.pre.rc.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2026-
|
|
12
|
+
date: 2026-07-01 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|