playbook_ui_docs 16.11.0.pre.rc.2 → 16.11.0

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.
@@ -7,234 +7,129 @@
7
7
  "template": "<Nav{{props}}>\n {{children}}\n</Nav>",
8
8
  "children": "<NavItem link=\"#\" text=\"Photos\" />\n<NavItem link=\"#\" text=\"Music\" />\n<NavItem active link=\"#\" text=\"Video\" />\n<NavItem link=\"#\" text=\"Files\" />"
9
9
  },
10
- "nav_item_props": {
11
- "label": "NavItem Props",
12
- "template": "<Nav{{props}}>\n <NavItem{{NavItem.props}} />\n {{children}}\n</Nav>",
13
- "children": "<NavItem link=\"#\" text=\"Music\" />\n<NavItem active link=\"#\" text=\"Video\" />\n<NavItem link=\"#\" text=\"Files\" />",
14
- "props": {
15
- "navItemLink": "#",
16
- "navItemText": "Primary Item"
17
- }
18
- },
19
10
  "collapsible": {
20
11
  "label": "Collapsible NavItem",
21
- "template": "<Nav{{props}}>\n <NavItem{{NavItem.props}}>\n {{children}}\n {null}\n </NavItem>\n</Nav>",
12
+ "template": "<Nav{{props}}>\n <NavItem{{NavItem.props}}>\n {{children}}\n </NavItem>\n</Nav>",
22
13
  "children": "<NavItem link=\"#\" text=\"City\" />\n<NavItem link=\"#\" text=\"People\" />\n<NavItem link=\"#\" text=\"Business\" />",
23
14
  "props": {
24
- "navItemActive": true,
25
- "navItemCollapsed": false,
26
- "navItemCollapsible": true,
27
- "navItemIconLeft": "city",
28
- "navItemIconRight": "angle-down",
29
- "navItemLink": "#",
30
- "navItemText": "Overview"
15
+ "active": true,
16
+ "collapsed": false,
17
+ "collapsible": true,
18
+ "iconLeft": "city",
19
+ "iconRight": "angle-down",
20
+ "link": "#",
21
+ "text": "Overview"
22
+ },
23
+ "propTargets": {
24
+ "link": "NavItem.props"
31
25
  }
32
26
  }
33
27
  }
34
28
  },
35
29
  "children": {
36
30
  "editable": true,
37
- "default": "<NavItem link=\"#\" text=\"Photos\" />\n<NavItem link=\"#\" text=\"Music\" />\n<NavItem active link=\"#\" text=\"Video\" />\n<NavItem link=\"#\" text=\"Files\" />"
31
+ "default": "<NavItem link=\"#\" text=\"Photos\" />\n<NavItem link=\"#\" text=\"Music\" />\n<NavItem active link=\"#\" text=\"Video\" />\n<NavItem link=\"#\" text=\"Files\" />",
32
+ "propInjection": {
33
+ "component": "NavItem",
34
+ "propTarget": "NavItem.props",
35
+ "structureModes": ["standard"]
36
+ }
38
37
  },
39
38
  "customProps": {
40
- "navItemText": {
39
+ "text": {
41
40
  "type": "string",
42
- "platforms": [
43
- "react"
44
- ],
45
- "default": "Photos"
41
+ "platforms": ["react"]
46
42
  },
47
- "navItemLink": {
48
- "type": "string",
49
- "platforms": [
50
- "react"
51
- ],
52
- "default": "#"
53
- },
54
- "navItemActive": {
43
+ "active": {
55
44
  "type": "boolean",
56
- "platforms": [
57
- "react"
58
- ],
45
+ "platforms": ["react"],
59
46
  "default": false
60
47
  },
61
- "navItemDisabled": {
48
+ "disabled": {
62
49
  "type": "boolean",
63
- "platforms": [
64
- "react"
65
- ],
50
+ "platforms": ["react"],
66
51
  "default": false
67
52
  },
68
- "navItemIconLeft": {
53
+ "iconLeft": {
69
54
  "type": "string",
70
- "platforms": [
71
- "react"
72
- ]
55
+ "platforms": ["react"]
73
56
  },
74
- "navItemIconRight": {
57
+ "iconRight": {
75
58
  "type": "string",
76
- "platforms": [
77
- "react"
78
- ]
59
+ "platforms": ["react"]
79
60
  },
80
- "navItemImageUrl": {
61
+ "imageUrl": {
81
62
  "type": "string",
82
- "platforms": [
83
- "react"
84
- ]
63
+ "platforms": ["react"]
85
64
  },
86
- "navItemTarget": {
65
+ "target": {
87
66
  "type": "enum",
88
- "platforms": [
89
- "react"
90
- ],
91
- "values": [
92
- "_blank",
93
- "_self",
94
- "_parent",
95
- "_top"
96
- ]
67
+ "platforms": ["react"],
68
+ "values": ["_blank", "_self", "_parent", "_top"]
97
69
  },
98
- "navItemFontSize": {
70
+ "fontSize": {
99
71
  "type": "enum",
100
- "platforms": [
101
- "react"
102
- ],
103
- "values": [
104
- "normal",
105
- "small"
106
- ]
72
+ "platforms": ["react"],
73
+ "values": ["normal", "small"]
107
74
  },
108
- "navItemFontWeight": {
75
+ "fontWeight": {
109
76
  "type": "enum",
110
- "platforms": [
111
- "react"
112
- ],
113
- "values": [
114
- "regular",
115
- "bold",
116
- "bolder"
117
- ]
77
+ "platforms": ["react"],
78
+ "values": ["regular", "bold", "bolder"]
118
79
  },
119
- "navItemCollapsible": {
80
+ "collapsible": {
120
81
  "type": "boolean",
121
- "platforms": [
122
- "react"
123
- ],
82
+ "platforms": ["react"],
124
83
  "default": false
125
84
  },
126
- "navItemCollapsed": {
85
+ "collapsed": {
127
86
  "type": "boolean",
128
- "platforms": [
129
- "react"
130
- ],
87
+ "platforms": ["react"],
131
88
  "default": true
132
89
  },
133
- "navItemCollapsibleTrail": {
90
+ "collapsibleTrail": {
134
91
  "type": "boolean",
135
- "platforms": [
136
- "react"
137
- ],
92
+ "platforms": ["react"],
138
93
  "default": false
139
94
  },
140
- "navItemHighlightedBorder": {
95
+ "highlighted_border": {
141
96
  "type": "boolean",
142
- "platforms": [
143
- "react"
144
- ],
97
+ "platforms": ["react"],
145
98
  "default": true
146
99
  },
147
- "navItemMargin": {
100
+ "margin": {
148
101
  "type": "enum",
149
- "platforms": [
150
- "react"
151
- ],
152
- "values": [
153
- "none",
154
- "xxs",
155
- "xs",
156
- "sm",
157
- "md",
158
- "lg",
159
- "xl"
160
- ]
102
+ "platforms": ["react"],
103
+ "values": ["none", "xxs", "xs", "sm", "md", "lg", "xl"]
161
104
  },
162
- "navItemMarginY": {
105
+ "marginY": {
163
106
  "type": "enum",
164
- "platforms": [
165
- "react"
166
- ],
167
- "values": [
168
- "none",
169
- "xxs",
170
- "xs",
171
- "sm",
172
- "md",
173
- "lg",
174
- "xl"
175
- ]
107
+ "platforms": ["react"],
108
+ "values": ["none", "xxs", "xs", "sm", "md", "lg", "xl"]
176
109
  },
177
- "navItemPaddingY": {
110
+ "paddingY": {
178
111
  "type": "enum",
179
- "platforms": [
180
- "react"
181
- ],
182
- "values": [
183
- "none",
184
- "xxs",
185
- "xs",
186
- "sm",
187
- "md",
188
- "lg",
189
- "xl"
190
- ]
191
- },
192
- "navItemOnClick": {
193
- "type": "function",
194
- "platforms": [
195
- "react"
196
- ]
112
+ "platforms": ["react"],
113
+ "values": ["none", "xxs", "xs", "sm", "md", "lg", "xl"]
197
114
  }
198
115
  },
199
116
  "propTargets": {
200
- "navItemText": "NavItem.props",
201
- "navItemLink": "NavItem.props",
202
- "navItemActive": "NavItem.props",
203
- "navItemDisabled": "NavItem.props",
204
- "navItemIconLeft": "NavItem.props",
205
- "navItemIconRight": "NavItem.props",
206
- "navItemImageUrl": "NavItem.props",
207
- "navItemTarget": "NavItem.props",
208
- "navItemFontSize": "NavItem.props",
209
- "navItemFontWeight": "NavItem.props",
210
- "navItemCollapsible": "NavItem.props",
211
- "navItemCollapsed": "NavItem.props",
212
- "navItemCollapsibleTrail": "NavItem.props",
213
- "navItemHighlightedBorder": "NavItem.props",
214
- "navItemMargin": "NavItem.props",
215
- "navItemMarginY": "NavItem.props",
216
- "navItemPaddingY": "NavItem.props",
217
- "navItemOnClick": "NavItem.props"
218
- },
219
- "propAliases": {
220
- "navItemText": "text",
221
- "navItemLink": "link",
222
- "navItemActive": "active",
223
- "navItemDisabled": "disabled",
224
- "navItemIconLeft": "iconLeft",
225
- "navItemIconRight": "iconRight",
226
- "navItemImageUrl": "imageUrl",
227
- "navItemTarget": "target",
228
- "navItemFontSize": "fontSize",
229
- "navItemFontWeight": "fontWeight",
230
- "navItemCollapsible": "collapsible",
231
- "navItemCollapsed": "collapsed",
232
- "navItemCollapsibleTrail": "collapsibleTrail",
233
- "navItemHighlightedBorder": "highlighted_border",
234
- "navItemMargin": "margin",
235
- "navItemMarginY": "marginY",
236
- "navItemPaddingY": "paddingY",
237
- "navItemOnClick": "onClick"
117
+ "text": "NavItem.props",
118
+ "active": "NavItem.props",
119
+ "disabled": "NavItem.props",
120
+ "iconLeft": "NavItem.props",
121
+ "iconRight": "NavItem.props",
122
+ "imageUrl": "NavItem.props",
123
+ "target": "NavItem.props",
124
+ "fontSize": "NavItem.props",
125
+ "fontWeight": "NavItem.props",
126
+ "collapsible": "NavItem.props",
127
+ "collapsed": "NavItem.props",
128
+ "collapsibleTrail": "NavItem.props",
129
+ "highlighted_border": "NavItem.props",
130
+ "margin": "NavItem.props",
131
+ "marginY": "NavItem.props",
132
+ "paddingY": "NavItem.props"
238
133
  },
239
134
  "defaults": {
240
135
  "borderless": false,
@@ -243,23 +138,17 @@
243
138
  "orientation": "vertical",
244
139
  "link": "#",
245
140
  "variant": "normal",
246
- "navItemText": "Photos",
247
- "navItemLink": "#",
248
- "navItemActive": false,
249
- "navItemDisabled": false,
250
- "navItemCollapsible": false,
251
- "navItemCollapsed": true,
252
- "navItemCollapsibleTrail": false,
253
- "navItemHighlightedBorder": true,
254
- "navItemOnClick": "() => console.log('Nav item clicked')"
141
+ "active": false,
142
+ "disabled": false,
143
+ "collapsible": false,
144
+ "collapsed": true,
145
+ "collapsibleTrail": false,
146
+ "highlighted_border": true
255
147
  },
256
148
  "groups": [
257
149
  {
258
150
  "name": "Nav Content",
259
- "props": [
260
- "title",
261
- "link"
262
- ]
151
+ "props": ["title", "link"]
263
152
  },
264
153
  {
265
154
  "name": "Nav Appearance",
@@ -274,57 +163,27 @@
274
163
  },
275
164
  {
276
165
  "name": "Nav Events",
277
- "props": [
278
- "onClick"
279
- ]
166
+ "props": ["onClick"]
280
167
  },
281
168
  {
282
169
  "name": "NavItem Content",
283
- "props": [
284
- "navItemText",
285
- "navItemLink",
286
- "navItemIconLeft",
287
- "navItemIconRight",
288
- "navItemImageUrl",
289
- "navItemTarget"
290
- ]
170
+ "props": ["text", "iconLeft", "iconRight", "imageUrl", "target"]
291
171
  },
292
172
  {
293
173
  "name": "NavItem State",
294
- "props": [
295
- "navItemActive",
296
- "navItemDisabled",
297
- "navItemHighlightedBorder"
298
- ]
174
+ "props": ["active", "disabled", "highlighted_border"]
299
175
  },
300
176
  {
301
177
  "name": "NavItem Typography",
302
- "props": [
303
- "navItemFontSize",
304
- "navItemFontWeight"
305
- ]
178
+ "props": ["fontSize", "fontWeight"]
306
179
  },
307
180
  {
308
181
  "name": "NavItem Collapsible",
309
- "props": [
310
- "navItemCollapsible",
311
- "navItemCollapsed",
312
- "navItemCollapsibleTrail"
313
- ]
182
+ "props": ["collapsible", "collapsed", "collapsibleTrail"]
314
183
  },
315
184
  {
316
185
  "name": "NavItem Spacing",
317
- "props": [
318
- "navItemMargin",
319
- "navItemMarginY",
320
- "navItemPaddingY"
321
- ]
322
- },
323
- {
324
- "name": "NavItem Events",
325
- "props": [
326
- "navItemOnClick"
327
- ]
186
+ "props": ["margin", "marginY", "paddingY"]
328
187
  }
329
188
  ],
330
189
  "presets": [
@@ -389,69 +248,63 @@
389
248
  },
390
249
  {
391
250
  "name": "NavItem Icons",
392
- "structureMode": "nav_item_props",
251
+ "structureMode": "standard",
393
252
  "props": {
394
253
  "title": "Browse",
395
- "navItemActive": true,
396
- "navItemIconLeft": "comments-alt",
397
- "navItemIconRight": "angle-down",
398
- "navItemLink": "#",
399
- "navItemText": "Messages"
400
- }
254
+ "active": true,
255
+ "iconLeft": "comments-alt",
256
+ "iconRight": "angle-down"
257
+ },
258
+ "children": "<NavItem link=\"#\" text=\"Messages\" />\n<NavItem link=\"#\" text=\"Music\" />\n<NavItem link=\"#\" text=\"Video\" />\n<NavItem link=\"#\" text=\"Files\" />"
401
259
  },
402
260
  {
403
261
  "name": "NavItem Disabled",
404
- "structureMode": "nav_item_props",
262
+ "structureMode": "standard",
405
263
  "props": {
406
- "navItemDisabled": true,
407
- "navItemLink": "#",
408
- "navItemText": "Disabled item"
409
- }
264
+ "disabled": true
265
+ },
266
+ "children": "<NavItem link=\"#\" text=\"Disabled item\" />\n<NavItem link=\"#\" text=\"Music\" />\n<NavItem link=\"#\" text=\"Video\" />\n<NavItem link=\"#\" text=\"Files\" />"
410
267
  },
411
268
  {
412
269
  "name": "NavItem Typography",
413
- "structureMode": "nav_item_props",
270
+ "structureMode": "standard",
414
271
  "props": {
415
- "navItemFontSize": "small",
416
- "navItemFontWeight": "bolder",
417
- "navItemLink": "#",
418
- "navItemText": "Small bolder item"
419
- }
272
+ "fontSize": "small",
273
+ "fontWeight": "bolder"
274
+ },
275
+ "children": "<NavItem link=\"#\" text=\"Small bolder item\" />\n<NavItem link=\"#\" text=\"Music\" />\n<NavItem link=\"#\" text=\"Video\" />\n<NavItem link=\"#\" text=\"Files\" />"
420
276
  },
421
277
  {
422
278
  "name": "NavItem Spacing",
423
- "structureMode": "nav_item_props",
279
+ "structureMode": "standard",
424
280
  "props": {
425
- "navItemLink": "#",
426
- "navItemMargin": "none",
427
- "navItemPaddingY": "xxs",
428
- "navItemText": "Tight item"
429
- }
281
+ "margin": "none",
282
+ "paddingY": "xxs"
283
+ },
284
+ "children": "<NavItem link=\"#\" text=\"Tight item\" />\n<NavItem link=\"#\" text=\"Music\" />\n<NavItem link=\"#\" text=\"Video\" />\n<NavItem link=\"#\" text=\"Files\" />"
430
285
  },
431
286
  {
432
287
  "name": "Collapsible",
433
288
  "structureMode": "collapsible",
434
289
  "props": {
435
- "navItemActive": true,
436
- "navItemCollapsed": false,
437
- "navItemCollapsible": true,
438
- "navItemIconLeft": "city",
439
- "navItemIconRight": "angle-down",
440
- "navItemLink": "#",
441
- "navItemText": "Overview"
290
+ "active": true,
291
+ "collapsed": false,
292
+ "collapsible": true,
293
+ "iconLeft": "city",
294
+ "iconRight": "angle-down",
295
+ "text": "Overview"
442
296
  }
443
297
  },
444
298
  {
445
299
  "name": "Collapsible Trail",
446
300
  "structureMode": "collapsible",
447
301
  "props": {
448
- "navItemCollapsible": true,
449
- "navItemCollapsibleTrail": true,
450
- "navItemFontWeight": "bolder",
451
- "navItemIconLeft": "city",
452
- "navItemIconRight": "angle-down",
453
- "navItemLink": "#",
454
- "navItemText": "Overview"
302
+ "collapsible": true,
303
+ "collapsibleTrail": true,
304
+ "fontWeight": "bolder",
305
+ "iconLeft": "city",
306
+ "iconRight": "angle-down",
307
+ "text": "Overview"
455
308
  }
456
309
  }
457
310
  ],
@@ -462,69 +315,24 @@
462
315
  "variant": "normal"
463
316
  }
464
317
  },
465
- "navItemCollapsed": {
466
- "requires": "navItemCollapsible",
318
+ "collapsed": {
319
+ "requires": "collapsible",
467
320
  "structureMode": "collapsible"
468
321
  },
469
- "navItemCollapsibleTrail": {
470
- "requires": "navItemCollapsible",
322
+ "collapsibleTrail": {
323
+ "requires": "collapsible",
471
324
  "structureMode": "collapsible"
472
325
  }
473
326
  },
474
327
  "propSyncOnEnable": {
475
- "navItemText": {
476
- "structureMode": "nav_item_props"
477
- },
478
- "navItemLink": {
479
- "structureMode": "nav_item_props"
480
- },
481
- "navItemActive": {
482
- "structureMode": "nav_item_props"
483
- },
484
- "navItemDisabled": {
485
- "structureMode": "nav_item_props"
486
- },
487
- "navItemIconLeft": {
488
- "structureMode": "nav_item_props"
489
- },
490
- "navItemIconRight": {
491
- "structureMode": "nav_item_props"
492
- },
493
- "navItemImageUrl": {
494
- "structureMode": "nav_item_props"
495
- },
496
- "navItemTarget": {
497
- "structureMode": "nav_item_props"
498
- },
499
- "navItemFontSize": {
500
- "structureMode": "nav_item_props"
501
- },
502
- "navItemFontWeight": {
503
- "structureMode": "nav_item_props"
504
- },
505
- "navItemCollapsible": {
328
+ "collapsible": {
506
329
  "structureMode": "collapsible"
507
330
  },
508
- "navItemCollapsed": {
331
+ "collapsed": {
509
332
  "structureMode": "collapsible"
510
333
  },
511
- "navItemCollapsibleTrail": {
334
+ "collapsibleTrail": {
512
335
  "structureMode": "collapsible"
513
- },
514
- "navItemHighlightedBorder": {
515
- "structureMode": "nav_item_props"
516
- },
517
- "navItemMargin": {
518
- "structureMode": "nav_item_props"
519
- },
520
- "navItemMarginY": {
521
- "structureMode": "nav_item_props"
522
- },
523
- "navItemPaddingY": {
524
- "structureMode": "nav_item_props"
525
- },
526
- "navItemOnClick": {
527
- "structureMode": "nav_item_props"
528
336
  }
529
337
  },
530
338
  "hints": {
@@ -560,22 +368,22 @@
560
368
  },
561
369
  "nav_item_icons": {
562
370
  "presetName": "NavItem Icons",
563
- "message": "NavItem iconLeft and iconRight add icons around the item text.",
371
+ "message": "NavItem iconLeft and iconRight add icons around the item text. Enabled NavItem props apply to every NavItem in children.",
564
372
  "type": "info"
565
373
  },
566
374
  "nav_item_disabled": {
567
375
  "presetName": "NavItem Disabled",
568
- "message": "disabled makes the NavItem non-interactive and removes link navigation.",
376
+ "message": "disabled makes NavItems non-interactive and removes link navigation.",
569
377
  "type": "info"
570
378
  },
571
379
  "nav_item_typography": {
572
380
  "presetName": "NavItem Typography",
573
- "message": "NavItem fontSize and fontWeight control item label styling.",
381
+ "message": "NavItem fontSize and fontWeight control item label styling on every NavItem.",
574
382
  "type": "info"
575
383
  },
576
384
  "nav_item_spacing": {
577
385
  "presetName": "NavItem Spacing",
578
- "message": "NavItem spacing props can tighten or expand individual item layout.",
386
+ "message": "NavItem margin and paddingY props apply to every NavItem in the list.",
579
387
  "type": "info"
580
388
  },
581
389
  "collapsible": {