playbook_ui_docs 16.11.0.pre.rc.2 → 16.11.0.pre.rc.3

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.
Files changed (11) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_nav/docs/_playground.json +117 -213
  3. data/app/pb_kits/playbook/pb_nav/docs/_playground.overrides.json +127 -319
  4. data/app/pb_kits/playbook/pb_typeahead/docs/_playground.json +8 -2
  5. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_draggable_pills.html.erb +39 -0
  6. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_draggable_pills.jsx +63 -0
  7. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_draggable_pills.md +7 -0
  8. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_draggable_pills_rails.md +7 -0
  9. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  10. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  11. metadata +6 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 9aeba2a5a2194029a406138e8d79cdfc9e0537d1cb8b0dbe633e539e7664c963
4
- data.tar.gz: 2f977b71ba7e2d799e9912caed0e3d728170d2c9728435695d60f884fc1feaec
3
+ metadata.gz: d8aebf4773d6603d4719e50a93f2368c8056eb648db1b0ddab946d8c9a669d4b
4
+ data.tar.gz: 298f1dbe52e26420c4edf0a38d89e80ebb6e7202500d822ee6336331984b83e6
5
5
  SHA512:
6
- metadata.gz: e490dac24f0130b452f93c6483700b91a731dc3b4d37337bb86f6e6b2c3963698cbe57591901483ab0ddbca638e06304eaf3f4f307648a1d87cbb8cb032e2bb5
7
- data.tar.gz: e282ad05fc6b15f02339eb91772f1b16da21617ceeba44d2c30eb7f3cc505f0923895a7a209d6e35e038831ebc32dd037fb310cb0ec6937463ce1a230a6b21ef
6
+ metadata.gz: 0736f1700862eec359cb8b4b8bacd5e1009c3dd7033e33e832254a51c9252500a0e42d80000261a2dcab93d03f00c0f09f36b9f277acfb95ed8ca2ed21adaf6a
7
+ data.tar.gz: 519409f964bb23f416aef1b896da12fd9fad3e84ffe7bbf1c082c2aac408a90018221ad28185d36217faf506f3dbdb739497d3e7abe223f72ac84fafe5ac85af
data/app/pb_kits/playbook/pb_nav/docs/_playground.json CHANGED
@@ -1,24 +1,22 @@
1
1
  {
2
2
  "template": "<Nav{{props}}>{{children}}</Nav>",
3
3
  "propTargets": {
4
- "navItemText": "NavItem.props",
5
- "navItemLink": "NavItem.props",
6
- "navItemActive": "NavItem.props",
7
- "navItemDisabled": "NavItem.props",
8
- "navItemIconLeft": "NavItem.props",
9
- "navItemIconRight": "NavItem.props",
10
- "navItemImageUrl": "NavItem.props",
11
- "navItemTarget": "NavItem.props",
12
- "navItemFontSize": "NavItem.props",
13
- "navItemFontWeight": "NavItem.props",
14
- "navItemCollapsible": "NavItem.props",
15
- "navItemCollapsed": "NavItem.props",
16
- "navItemCollapsibleTrail": "NavItem.props",
17
- "navItemHighlightedBorder": "NavItem.props",
18
- "navItemMargin": "NavItem.props",
19
- "navItemMarginY": "NavItem.props",
20
- "navItemPaddingY": "NavItem.props",
21
- "navItemOnClick": "NavItem.props"
4
+ "text": "NavItem.props",
5
+ "active": "NavItem.props",
6
+ "disabled": "NavItem.props",
7
+ "iconLeft": "NavItem.props",
8
+ "iconRight": "NavItem.props",
9
+ "imageUrl": "NavItem.props",
10
+ "target": "NavItem.props",
11
+ "fontSize": "NavItem.props",
12
+ "fontWeight": "NavItem.props",
13
+ "collapsible": "NavItem.props",
14
+ "collapsed": "NavItem.props",
15
+ "collapsibleTrail": "NavItem.props",
16
+ "highlighted_border": "NavItem.props",
17
+ "margin": "NavItem.props",
18
+ "marginY": "NavItem.props",
19
+ "paddingY": "NavItem.props"
22
20
  },
23
21
  "defaults": {
24
22
  "borderless": false,
@@ -27,19 +25,23 @@
27
25
  "orientation": "vertical",
28
26
  "link": "#",
29
27
  "variant": "normal",
30
- "navItemText": "Photos",
31
- "navItemLink": "#",
32
- "navItemActive": false,
33
- "navItemDisabled": false,
34
- "navItemCollapsible": false,
35
- "navItemCollapsed": true,
36
- "navItemCollapsibleTrail": false,
37
- "navItemHighlightedBorder": true,
38
- "navItemOnClick": "() => console.log('Nav item clicked')"
28
+ "active": false,
29
+ "disabled": false,
30
+ "collapsible": false,
31
+ "collapsed": true,
32
+ "collapsibleTrail": false,
33
+ "highlighted_border": true
39
34
  },
40
35
  "children": {
41
36
  "editable": true,
42
- "default": "<NavItem link=\"#\" text=\"Photos\" />\n<NavItem link=\"#\" text=\"Music\" />\n<NavItem active link=\"#\" text=\"Video\" />\n<NavItem link=\"#\" text=\"Files\" />"
37
+ "default": "<NavItem link=\"#\" text=\"Photos\" />\n<NavItem link=\"#\" text=\"Music\" />\n<NavItem active link=\"#\" text=\"Video\" />\n<NavItem link=\"#\" text=\"Files\" />",
38
+ "propInjection": {
39
+ "component": "NavItem",
40
+ "propTarget": "NavItem.props",
41
+ "structureModes": [
42
+ "standard"
43
+ ]
44
+ }
43
45
  },
44
46
  "groups": [
45
47
  {
@@ -69,49 +71,42 @@
69
71
  {
70
72
  "name": "NavItem Content",
71
73
  "props": [
72
- "navItemText",
73
- "navItemLink",
74
- "navItemIconLeft",
75
- "navItemIconRight",
76
- "navItemImageUrl",
77
- "navItemTarget"
74
+ "text",
75
+ "iconLeft",
76
+ "iconRight",
77
+ "imageUrl",
78
+ "target"
78
79
  ]
79
80
  },
80
81
  {
81
82
  "name": "NavItem State",
82
83
  "props": [
83
- "navItemActive",
84
- "navItemDisabled",
85
- "navItemHighlightedBorder"
84
+ "active",
85
+ "disabled",
86
+ "highlighted_border"
86
87
  ]
87
88
  },
88
89
  {
89
90
  "name": "NavItem Typography",
90
91
  "props": [
91
- "navItemFontSize",
92
- "navItemFontWeight"
92
+ "fontSize",
93
+ "fontWeight"
93
94
  ]
94
95
  },
95
96
  {
96
97
  "name": "NavItem Collapsible",
97
98
  "props": [
98
- "navItemCollapsible",
99
- "navItemCollapsed",
100
- "navItemCollapsibleTrail"
99
+ "collapsible",
100
+ "collapsed",
101
+ "collapsibleTrail"
101
102
  ]
102
103
  },
103
104
  {
104
105
  "name": "NavItem Spacing",
105
106
  "props": [
106
- "navItemMargin",
107
- "navItemMarginY",
108
- "navItemPaddingY"
109
- ]
110
- },
111
- {
112
- "name": "NavItem Events",
113
- "props": [
114
- "navItemOnClick"
107
+ "margin",
108
+ "marginY",
109
+ "paddingY"
115
110
  ]
116
111
  }
117
112
  ],
@@ -177,69 +172,63 @@
177
172
  },
178
173
  {
179
174
  "name": "NavItem Icons",
180
- "structureMode": "nav_item_props",
175
+ "structureMode": "standard",
181
176
  "props": {
182
177
  "title": "Browse",
183
- "navItemActive": true,
184
- "navItemIconLeft": "comments-alt",
185
- "navItemIconRight": "angle-down",
186
- "navItemLink": "#",
187
- "navItemText": "Messages"
188
- }
178
+ "active": true,
179
+ "iconLeft": "comments-alt",
180
+ "iconRight": "angle-down"
181
+ },
182
+ "children": "<NavItem link=\"#\" text=\"Messages\" />\n<NavItem link=\"#\" text=\"Music\" />\n<NavItem link=\"#\" text=\"Video\" />\n<NavItem link=\"#\" text=\"Files\" />"
189
183
  },
190
184
  {
191
185
  "name": "NavItem Disabled",
192
- "structureMode": "nav_item_props",
186
+ "structureMode": "standard",
193
187
  "props": {
194
- "navItemDisabled": true,
195
- "navItemLink": "#",
196
- "navItemText": "Disabled item"
197
- }
188
+ "disabled": true
189
+ },
190
+ "children": "<NavItem link=\"#\" text=\"Disabled item\" />\n<NavItem link=\"#\" text=\"Music\" />\n<NavItem link=\"#\" text=\"Video\" />\n<NavItem link=\"#\" text=\"Files\" />"
198
191
  },
199
192
  {
200
193
  "name": "NavItem Typography",
201
- "structureMode": "nav_item_props",
194
+ "structureMode": "standard",
202
195
  "props": {
203
- "navItemFontSize": "small",
204
- "navItemFontWeight": "bolder",
205
- "navItemLink": "#",
206
- "navItemText": "Small bolder item"
207
- }
196
+ "fontSize": "small",
197
+ "fontWeight": "bolder"
198
+ },
199
+ "children": "<NavItem link=\"#\" text=\"Small bolder item\" />\n<NavItem link=\"#\" text=\"Music\" />\n<NavItem link=\"#\" text=\"Video\" />\n<NavItem link=\"#\" text=\"Files\" />"
208
200
  },
209
201
  {
210
202
  "name": "NavItem Spacing",
211
- "structureMode": "nav_item_props",
203
+ "structureMode": "standard",
212
204
  "props": {
213
- "navItemLink": "#",
214
- "navItemMargin": "none",
215
- "navItemPaddingY": "xxs",
216
- "navItemText": "Tight item"
217
- }
205
+ "margin": "none",
206
+ "paddingY": "xxs"
207
+ },
208
+ "children": "<NavItem link=\"#\" text=\"Tight item\" />\n<NavItem link=\"#\" text=\"Music\" />\n<NavItem link=\"#\" text=\"Video\" />\n<NavItem link=\"#\" text=\"Files\" />"
218
209
  },
219
210
  {
220
211
  "name": "Collapsible",
221
212
  "structureMode": "collapsible",
222
213
  "props": {
223
- "navItemActive": true,
224
- "navItemCollapsed": false,
225
- "navItemCollapsible": true,
226
- "navItemIconLeft": "city",
227
- "navItemIconRight": "angle-down",
228
- "navItemLink": "#",
229
- "navItemText": "Overview"
214
+ "active": true,
215
+ "collapsed": false,
216
+ "collapsible": true,
217
+ "iconLeft": "city",
218
+ "iconRight": "angle-down",
219
+ "text": "Overview"
230
220
  }
231
221
  },
232
222
  {
233
223
  "name": "Collapsible Trail",
234
224
  "structureMode": "collapsible",
235
225
  "props": {
236
- "navItemCollapsible": true,
237
- "navItemCollapsibleTrail": true,
238
- "navItemFontWeight": "bolder",
239
- "navItemIconLeft": "city",
240
- "navItemIconRight": "angle-down",
241
- "navItemLink": "#",
242
- "navItemText": "Overview"
226
+ "collapsible": true,
227
+ "collapsibleTrail": true,
228
+ "fontWeight": "bolder",
229
+ "iconLeft": "city",
230
+ "iconRight": "angle-down",
231
+ "text": "Overview"
243
232
  }
244
233
  }
245
234
  ],
@@ -250,12 +239,12 @@
250
239
  "variant": "normal"
251
240
  }
252
241
  },
253
- "navItemCollapsed": {
254
- "requires": "navItemCollapsible",
242
+ "collapsed": {
243
+ "requires": "collapsible",
255
244
  "structureMode": "collapsible"
256
245
  },
257
- "navItemCollapsibleTrail": {
258
- "requires": "navItemCollapsible",
246
+ "collapsibleTrail": {
247
+ "requires": "collapsible",
259
248
  "structureMode": "collapsible"
260
249
  }
261
250
  },
@@ -292,22 +281,22 @@
292
281
  },
293
282
  "nav_item_icons": {
294
283
  "presetName": "NavItem Icons",
295
- "message": "NavItem iconLeft and iconRight add icons around the item text.",
284
+ "message": "NavItem iconLeft and iconRight add icons around the item text. Enabled NavItem props apply to every NavItem in children.",
296
285
  "type": "info"
297
286
  },
298
287
  "nav_item_disabled": {
299
288
  "presetName": "NavItem Disabled",
300
- "message": "disabled makes the NavItem non-interactive and removes link navigation.",
289
+ "message": "disabled makes NavItems non-interactive and removes link navigation.",
301
290
  "type": "info"
302
291
  },
303
292
  "nav_item_typography": {
304
293
  "presetName": "NavItem Typography",
305
- "message": "NavItem fontSize and fontWeight control item label styling.",
294
+ "message": "NavItem fontSize and fontWeight control item label styling on every NavItem.",
306
295
  "type": "info"
307
296
  },
308
297
  "nav_item_spacing": {
309
298
  "presetName": "NavItem Spacing",
310
- "message": "NavItem spacing props can tighten or expand individual item layout.",
299
+ "message": "NavItem margin and paddingY props apply to every NavItem in the list.",
311
300
  "type": "info"
312
301
  },
313
302
  "collapsible": {
@@ -329,79 +318,65 @@
329
318
  "template": "<Nav{{props}}>\n {{children}}\n</Nav>",
330
319
  "children": "<NavItem link=\"#\" text=\"Photos\" />\n<NavItem link=\"#\" text=\"Music\" />\n<NavItem active link=\"#\" text=\"Video\" />\n<NavItem link=\"#\" text=\"Files\" />"
331
320
  },
332
- "nav_item_props": {
333
- "label": "NavItem Props",
334
- "template": "<Nav{{props}}>\n <NavItem{{NavItem.props}} />\n {{children}}\n</Nav>",
335
- "children": "<NavItem link=\"#\" text=\"Music\" />\n<NavItem active link=\"#\" text=\"Video\" />\n<NavItem link=\"#\" text=\"Files\" />",
336
- "props": {
337
- "navItemLink": "#",
338
- "navItemText": "Primary Item"
339
- }
340
- },
341
321
  "collapsible": {
342
322
  "label": "Collapsible NavItem",
343
- "template": "<Nav{{props}}>\n <NavItem{{NavItem.props}}>\n {{children}}\n {null}\n </NavItem>\n</Nav>",
323
+ "template": "<Nav{{props}}>\n <NavItem{{NavItem.props}}>\n {{children}}\n </NavItem>\n</Nav>",
344
324
  "children": "<NavItem link=\"#\" text=\"City\" />\n<NavItem link=\"#\" text=\"People\" />\n<NavItem link=\"#\" text=\"Business\" />",
345
325
  "props": {
346
- "navItemActive": true,
347
- "navItemCollapsed": false,
348
- "navItemCollapsible": true,
349
- "navItemIconLeft": "city",
350
- "navItemIconRight": "angle-down",
351
- "navItemLink": "#",
352
- "navItemText": "Overview"
326
+ "active": true,
327
+ "collapsed": false,
328
+ "collapsible": true,
329
+ "iconLeft": "city",
330
+ "iconRight": "angle-down",
331
+ "link": "#",
332
+ "text": "Overview"
333
+ },
334
+ "propTargets": {
335
+ "link": "NavItem.props"
353
336
  }
354
337
  }
355
338
  }
356
339
  },
357
340
  "customProps": {
358
- "navItemText": {
359
- "type": "string",
360
- "platforms": [
361
- "react"
362
- ],
363
- "default": "Photos"
364
- },
365
- "navItemLink": {
341
+ "text": {
366
342
  "type": "string",
367
343
  "platforms": [
368
344
  "react"
369
- ],
370
- "default": "#"
345
+ ]
371
346
  },
372
- "navItemActive": {
347
+ "active": {
373
348
  "type": "boolean",
374
349
  "platforms": [
375
350
  "react"
376
351
  ],
377
352
  "default": false
378
353
  },
379
- "navItemDisabled": {
354
+ "disabled": {
380
355
  "type": "boolean",
381
356
  "platforms": [
382
357
  "react"
383
358
  ],
384
359
  "default": false
385
360
  },
386
- "navItemIconLeft": {
361
+ "iconLeft": {
387
362
  "type": "string",
388
363
  "platforms": [
389
364
  "react"
390
365
  ]
391
366
  },
392
- "navItemIconRight": {
367
+ "iconRight": {
393
368
  "type": "string",
394
369
  "platforms": [
395
370
  "react"
396
371
  ]
397
372
  },
398
- "navItemImageUrl": {
373
+ "imageUrl": {
399
374
  "type": "string",
400
375
  "platforms": [
401
376
  "react"
402
377
  ]
403
378
  },
404
- "navItemTarget": {
379
+ "target": {
405
380
  "type": "enum",
406
381
  "platforms": [
407
382
  "react"
@@ -413,7 +388,7 @@
413
388
  "_top"
414
389
  ]
415
390
  },
416
- "navItemFontSize": {
391
+ "fontSize": {
417
392
  "type": "enum",
418
393
  "platforms": [
419
394
  "react"
@@ -423,7 +398,7 @@
423
398
  "small"
424
399
  ]
425
400
  },
426
- "navItemFontWeight": {
401
+ "fontWeight": {
427
402
  "type": "enum",
428
403
  "platforms": [
429
404
  "react"
@@ -434,35 +409,35 @@
434
409
  "bolder"
435
410
  ]
436
411
  },
437
- "navItemCollapsible": {
412
+ "collapsible": {
438
413
  "type": "boolean",
439
414
  "platforms": [
440
415
  "react"
441
416
  ],
442
417
  "default": false
443
418
  },
444
- "navItemCollapsed": {
419
+ "collapsed": {
445
420
  "type": "boolean",
446
421
  "platforms": [
447
422
  "react"
448
423
  ],
449
424
  "default": true
450
425
  },
451
- "navItemCollapsibleTrail": {
426
+ "collapsibleTrail": {
452
427
  "type": "boolean",
453
428
  "platforms": [
454
429
  "react"
455
430
  ],
456
431
  "default": false
457
432
  },
458
- "navItemHighlightedBorder": {
433
+ "highlighted_border": {
459
434
  "type": "boolean",
460
435
  "platforms": [
461
436
  "react"
462
437
  ],
463
438
  "default": true
464
439
  },
465
- "navItemMargin": {
440
+ "margin": {
466
441
  "type": "enum",
467
442
  "platforms": [
468
443
  "react"
@@ -477,7 +452,7 @@
477
452
  "xl"
478
453
  ]
479
454
  },
480
- "navItemMarginY": {
455
+ "marginY": {
481
456
  "type": "enum",
482
457
  "platforms": [
483
458
  "react"
@@ -492,7 +467,7 @@
492
467
  "xl"
493
468
  ]
494
469
  },
495
- "navItemPaddingY": {
470
+ "paddingY": {
496
471
  "type": "enum",
497
472
  "platforms": [
498
473
  "react"
@@ -506,88 +481,17 @@
506
481
  "lg",
507
482
  "xl"
508
483
  ]
509
- },
510
- "navItemOnClick": {
511
- "type": "function",
512
- "platforms": [
513
- "react"
514
- ]
515
484
  }
516
485
  },
517
- "propAliases": {
518
- "navItemText": "text",
519
- "navItemLink": "link",
520
- "navItemActive": "active",
521
- "navItemDisabled": "disabled",
522
- "navItemIconLeft": "iconLeft",
523
- "navItemIconRight": "iconRight",
524
- "navItemImageUrl": "imageUrl",
525
- "navItemTarget": "target",
526
- "navItemFontSize": "fontSize",
527
- "navItemFontWeight": "fontWeight",
528
- "navItemCollapsible": "collapsible",
529
- "navItemCollapsed": "collapsed",
530
- "navItemCollapsibleTrail": "collapsibleTrail",
531
- "navItemHighlightedBorder": "highlighted_border",
532
- "navItemMargin": "margin",
533
- "navItemMarginY": "marginY",
534
- "navItemPaddingY": "paddingY",
535
- "navItemOnClick": "onClick"
536
- },
537
486
  "propSyncOnEnable": {
538
- "navItemText": {
539
- "structureMode": "nav_item_props"
540
- },
541
- "navItemLink": {
542
- "structureMode": "nav_item_props"
543
- },
544
- "navItemActive": {
545
- "structureMode": "nav_item_props"
546
- },
547
- "navItemDisabled": {
548
- "structureMode": "nav_item_props"
549
- },
550
- "navItemIconLeft": {
551
- "structureMode": "nav_item_props"
552
- },
553
- "navItemIconRight": {
554
- "structureMode": "nav_item_props"
555
- },
556
- "navItemImageUrl": {
557
- "structureMode": "nav_item_props"
558
- },
559
- "navItemTarget": {
560
- "structureMode": "nav_item_props"
561
- },
562
- "navItemFontSize": {
563
- "structureMode": "nav_item_props"
564
- },
565
- "navItemFontWeight": {
566
- "structureMode": "nav_item_props"
567
- },
568
- "navItemCollapsible": {
487
+ "collapsible": {
569
488
  "structureMode": "collapsible"
570
489
  },
571
- "navItemCollapsed": {
490
+ "collapsed": {
572
491
  "structureMode": "collapsible"
573
492
  },
574
- "navItemCollapsibleTrail": {
493
+ "collapsibleTrail": {
575
494
  "structureMode": "collapsible"
576
- },
577
- "navItemHighlightedBorder": {
578
- "structureMode": "nav_item_props"
579
- },
580
- "navItemMargin": {
581
- "structureMode": "nav_item_props"
582
- },
583
- "navItemMarginY": {
584
- "structureMode": "nav_item_props"
585
- },
586
- "navItemPaddingY": {
587
- "structureMode": "nav_item_props"
588
- },
589
- "navItemOnClick": {
590
- "structureMode": "nav_item_props"
591
495
  }
592
496
  }
593
497
  }