@patternfly/patternfly 4.202.0 → 4.203.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.
Files changed (48) hide show
  1. package/RELEASE-NOTES.md +28 -1
  2. package/base/_fonts.scss +10 -10
  3. package/base/_shield-inheritable.scss +1 -1
  4. package/base/patternfly-fonts.css +10 -10
  5. package/base/patternfly-shield-inheritable.css +1 -1
  6. package/components/AlertGroup/alert-group.css +1 -1
  7. package/components/Button/button.css +1 -1
  8. package/components/Button/button.scss +1 -1
  9. package/components/Divider/divider.css +12 -12
  10. package/components/Drawer/drawer.css +0 -33
  11. package/components/JumpLinks/jump-links.css +1 -1
  12. package/components/JumpLinks/jump-links.scss +1 -1
  13. package/components/MenuToggle/menu-toggle.css +1 -1
  14. package/components/MenuToggle/menu-toggle.scss +1 -1
  15. package/components/ProgressStepper/progress-stepper.css +1 -1
  16. package/components/Sidebar/sidebar.css +0 -30
  17. package/components/Spinner/spinner.css +2 -2
  18. package/components/Table/table.css +5 -5
  19. package/components/Table/table.scss +5 -5
  20. package/components/Tabs/tabs.css +1 -1
  21. package/components/Tabs/tabs.scss +1 -1
  22. package/components/TreeView/tree-view.css +29 -1
  23. package/components/TreeView/tree-view.scss +36 -2
  24. package/docs/components/Table/examples/Table.md +10 -4
  25. package/docs/components/TreeView/examples/TreeView.md +1077 -677
  26. package/package.json +6 -6
  27. package/patternfly-addons.css +48 -683
  28. package/patternfly-base-no-reset.css +10 -10
  29. package/patternfly-base.css +10 -10
  30. package/patternfly-no-reset.css +64 -99
  31. package/patternfly.css +64 -99
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
  34. package/utilities/Alignment/alignment.css +0 -15
  35. package/utilities/BackgroundColor/BackgroundColor.css +0 -75
  36. package/utilities/Display/display.css +0 -40
  37. package/utilities/Flex/flex.css +0 -140
  38. package/utilities/Float/float.css +0 -5
  39. package/utilities/Sizing/sizing.css +48 -198
  40. package/utilities/Text/text.css +0 -210
  41. package/docs/pages/accessibility-guide.md +0 -161
  42. package/docs/pages/contribution.md +0 -109
  43. package/docs/pages/guidelines.md +0 -367
  44. package/docs/pages/icons.md +0 -129
  45. package/docs/pages/index.js +0 -13
  46. package/docs/pages/reference-docs/PF-quick-ref.key +0 -0
  47. package/docs/pages/reference-docs/PF-quick-ref.pdf +0 -0
  48. package/docs/pages/upgrade-guide.md +0 -188
package/docs/components/TreeView/examples/TreeView.md CHANGED
@@ -18,14 +18,15 @@ beta: true
18
18
  >
19
19
  <div class="pf-c-tree-view__content">
20
20
  <button class="pf-c-tree-view__node">
21
- <div class="pf-c-tree-view__node-container">
22
- <div class="pf-c-tree-view__node-toggle">
21
+ <span class="pf-c-tree-view__node-container">
22
+ <span class="pf-c-tree-view__node-toggle">
23
23
  <span class="pf-c-tree-view__node-toggle-icon">
24
24
  <i class="fas fa-angle-right" aria-hidden="true"></i>
25
25
  </span>
26
- </div>
26
+ </span>
27
+
27
28
  <span class="pf-c-tree-view__node-text">Application launcher</span>
28
- </div>
29
+ </span>
29
30
  </button>
30
31
  </div>
31
32
  <ul class="pf-c-tree-view__list" role="group">
@@ -37,32 +38,33 @@ beta: true
37
38
  >
38
39
  <div class="pf-c-tree-view__content">
39
40
  <button class="pf-c-tree-view__node">
40
- <div class="pf-c-tree-view__node-container">
41
- <div class="pf-c-tree-view__node-toggle">
41
+ <span class="pf-c-tree-view__node-container">
42
+ <span class="pf-c-tree-view__node-toggle">
42
43
  <span class="pf-c-tree-view__node-toggle-icon">
43
44
  <i class="fas fa-angle-right" aria-hidden="true"></i>
44
45
  </span>
45
- </div>
46
+ </span>
47
+
46
48
  <span class="pf-c-tree-view__node-text">Application 1</span>
47
- </div>
49
+ </span>
48
50
  </button>
49
51
  </div>
50
52
  <ul class="pf-c-tree-view__list" role="group">
51
53
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
52
54
  <div class="pf-c-tree-view__content">
53
55
  <button class="pf-c-tree-view__node">
54
- <div class="pf-c-tree-view__node-container">
56
+ <span class="pf-c-tree-view__node-container">
55
57
  <span class="pf-c-tree-view__node-text">Settings</span>
56
- </div>
58
+ </span>
57
59
  </button>
58
60
  </div>
59
61
  </li>
60
62
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
61
63
  <div class="pf-c-tree-view__content">
62
64
  <button class="pf-c-tree-view__node pf-m-current">
63
- <div class="pf-c-tree-view__node-container">
65
+ <span class="pf-c-tree-view__node-container">
64
66
  <span class="pf-c-tree-view__node-text">Current</span>
65
- </div>
67
+ </span>
66
68
  </button>
67
69
  </div>
68
70
  </li>
@@ -74,14 +76,15 @@ beta: true
74
76
  >
75
77
  <div class="pf-c-tree-view__content">
76
78
  <button class="pf-c-tree-view__node">
77
- <div class="pf-c-tree-view__node-container">
78
- <div class="pf-c-tree-view__node-toggle">
79
+ <span class="pf-c-tree-view__node-container">
80
+ <span class="pf-c-tree-view__node-toggle">
79
81
  <span class="pf-c-tree-view__node-toggle-icon">
80
82
  <i class="fas fa-angle-right" aria-hidden="true"></i>
81
83
  </span>
82
- </div>
84
+ </span>
85
+
83
86
  <span class="pf-c-tree-view__node-text">Loader</span>
84
- </div>
87
+ </span>
85
88
  </button>
86
89
  </div>
87
90
  </li>
@@ -95,23 +98,24 @@ beta: true
95
98
  >
96
99
  <div class="pf-c-tree-view__content">
97
100
  <button class="pf-c-tree-view__node">
98
- <div class="pf-c-tree-view__node-container">
99
- <div class="pf-c-tree-view__node-toggle">
101
+ <span class="pf-c-tree-view__node-container">
102
+ <span class="pf-c-tree-view__node-toggle">
100
103
  <span class="pf-c-tree-view__node-toggle-icon">
101
104
  <i class="fas fa-angle-right" aria-hidden="true"></i>
102
105
  </span>
103
- </div>
106
+ </span>
107
+
104
108
  <span class="pf-c-tree-view__node-text">Application 2</span>
105
- </div>
109
+ </span>
106
110
  </button>
107
111
  </div>
108
112
  <ul class="pf-c-tree-view__list" role="group">
109
113
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
110
114
  <div class="pf-c-tree-view__content">
111
115
  <button class="pf-c-tree-view__node">
112
- <div class="pf-c-tree-view__node-container">
116
+ <span class="pf-c-tree-view__node-container">
113
117
  <span class="pf-c-tree-view__node-text">Settings</span>
114
- </div>
118
+ </span>
115
119
  </button>
116
120
  </div>
117
121
  </li>
@@ -123,14 +127,15 @@ beta: true
123
127
  >
124
128
  <div class="pf-c-tree-view__content">
125
129
  <button class="pf-c-tree-view__node">
126
- <div class="pf-c-tree-view__node-container">
127
- <div class="pf-c-tree-view__node-toggle">
130
+ <span class="pf-c-tree-view__node-container">
131
+ <span class="pf-c-tree-view__node-toggle">
128
132
  <span class="pf-c-tree-view__node-toggle-icon">
129
133
  <i class="fas fa-angle-right" aria-hidden="true"></i>
130
134
  </span>
131
- </div>
135
+ </span>
136
+
132
137
  <span class="pf-c-tree-view__node-text">Settings</span>
133
- </div>
138
+ </span>
134
139
  </button>
135
140
  </div>
136
141
  </li>
@@ -142,14 +147,15 @@ beta: true
142
147
  >
143
148
  <div class="pf-c-tree-view__content">
144
149
  <button class="pf-c-tree-view__node">
145
- <div class="pf-c-tree-view__node-container">
146
- <div class="pf-c-tree-view__node-toggle">
150
+ <span class="pf-c-tree-view__node-container">
151
+ <span class="pf-c-tree-view__node-toggle">
147
152
  <span class="pf-c-tree-view__node-toggle-icon">
148
153
  <i class="fas fa-angle-right" aria-hidden="true"></i>
149
154
  </span>
150
- </div>
155
+ </span>
156
+
151
157
  <span class="pf-c-tree-view__node-text">Loader</span>
152
- </div>
158
+ </span>
153
159
  </button>
154
160
  </div>
155
161
  <ul class="pf-c-tree-view__list" role="group">
@@ -161,14 +167,15 @@ beta: true
161
167
  >
162
168
  <div class="pf-c-tree-view__content">
163
169
  <button class="pf-c-tree-view__node">
164
- <div class="pf-c-tree-view__node-container">
165
- <div class="pf-c-tree-view__node-toggle">
170
+ <span class="pf-c-tree-view__node-container">
171
+ <span class="pf-c-tree-view__node-toggle">
166
172
  <span class="pf-c-tree-view__node-toggle-icon">
167
173
  <i class="fas fa-angle-right" aria-hidden="true"></i>
168
174
  </span>
169
- </div>
175
+ </span>
176
+
170
177
  <span class="pf-c-tree-view__node-text">Loader app 1</span>
171
- </div>
178
+ </span>
172
179
  </button>
173
180
  </div>
174
181
  </li>
@@ -179,9 +186,9 @@ beta: true
179
186
  >
180
187
  <div class="pf-c-tree-view__content">
181
188
  <button class="pf-c-tree-view__node">
182
- <div class="pf-c-tree-view__node-container">
189
+ <span class="pf-c-tree-view__node-container">
183
190
  <span class="pf-c-tree-view__node-text">Loader app 2</span>
184
- </div>
191
+ </span>
185
192
  </button>
186
193
  </div>
187
194
  </li>
@@ -192,9 +199,9 @@ beta: true
192
199
  >
193
200
  <div class="pf-c-tree-view__content">
194
201
  <button class="pf-c-tree-view__node">
195
- <div class="pf-c-tree-view__node-container">
202
+ <span class="pf-c-tree-view__node-container">
196
203
  <span class="pf-c-tree-view__node-text">Loader app 3</span>
197
- </div>
204
+ </span>
198
205
  </button>
199
206
  </div>
200
207
  </li>
@@ -212,14 +219,15 @@ beta: true
212
219
  >
213
220
  <div class="pf-c-tree-view__content">
214
221
  <button class="pf-c-tree-view__node">
215
- <div class="pf-c-tree-view__node-container">
216
- <div class="pf-c-tree-view__node-toggle">
222
+ <span class="pf-c-tree-view__node-container">
223
+ <span class="pf-c-tree-view__node-toggle">
217
224
  <span class="pf-c-tree-view__node-toggle-icon">
218
225
  <i class="fas fa-angle-right" aria-hidden="true"></i>
219
226
  </span>
220
- </div>
227
+ </span>
228
+
221
229
  <span class="pf-c-tree-view__node-text">Cost management</span>
222
- </div>
230
+ </span>
223
231
  </button>
224
232
  </div>
225
233
  </li>
@@ -231,14 +239,15 @@ beta: true
231
239
  >
232
240
  <div class="pf-c-tree-view__content">
233
241
  <button class="pf-c-tree-view__node">
234
- <div class="pf-c-tree-view__node-container">
235
- <div class="pf-c-tree-view__node-toggle">
242
+ <span class="pf-c-tree-view__node-container">
243
+ <span class="pf-c-tree-view__node-toggle">
236
244
  <span class="pf-c-tree-view__node-toggle-icon">
237
245
  <i class="fas fa-angle-right" aria-hidden="true"></i>
238
246
  </span>
239
- </div>
247
+ </span>
248
+
240
249
  <span class="pf-c-tree-view__node-text">Sources</span>
241
- </div>
250
+ </span>
242
251
  </button>
243
252
  </div>
244
253
  </li>
@@ -250,16 +259,17 @@ beta: true
250
259
  >
251
260
  <div class="pf-c-tree-view__content">
252
261
  <button class="pf-c-tree-view__node">
253
- <div class="pf-c-tree-view__node-container">
254
- <div class="pf-c-tree-view__node-toggle">
262
+ <span class="pf-c-tree-view__node-container">
263
+ <span class="pf-c-tree-view__node-toggle">
255
264
  <span class="pf-c-tree-view__node-toggle-icon">
256
265
  <i class="fas fa-angle-right" aria-hidden="true"></i>
257
266
  </span>
258
- </div>
267
+ </span>
268
+
259
269
  <span
260
270
  class="pf-c-tree-view__node-text"
261
271
  >This is a really really really long folder name that overflows from the width of the container.</span>
262
- </div>
272
+ </span>
263
273
  </button>
264
274
  </div>
265
275
  </li>
@@ -299,14 +309,15 @@ beta: true
299
309
  >
300
310
  <div class="pf-c-tree-view__content">
301
311
  <button class="pf-c-tree-view__node">
302
- <div class="pf-c-tree-view__node-container">
303
- <div class="pf-c-tree-view__node-toggle">
312
+ <span class="pf-c-tree-view__node-container">
313
+ <span class="pf-c-tree-view__node-toggle">
304
314
  <span class="pf-c-tree-view__node-toggle-icon">
305
315
  <i class="fas fa-angle-right" aria-hidden="true"></i>
306
316
  </span>
307
- </div>
317
+ </span>
318
+
308
319
  <span class="pf-c-tree-view__node-text">Application launcher</span>
309
- </div>
320
+ </span>
310
321
  </button>
311
322
  </div>
312
323
  <ul class="pf-c-tree-view__list" role="group">
@@ -318,32 +329,33 @@ beta: true
318
329
  >
319
330
  <div class="pf-c-tree-view__content">
320
331
  <button class="pf-c-tree-view__node">
321
- <div class="pf-c-tree-view__node-container">
322
- <div class="pf-c-tree-view__node-toggle">
332
+ <span class="pf-c-tree-view__node-container">
333
+ <span class="pf-c-tree-view__node-toggle">
323
334
  <span class="pf-c-tree-view__node-toggle-icon">
324
335
  <i class="fas fa-angle-right" aria-hidden="true"></i>
325
336
  </span>
326
- </div>
337
+ </span>
338
+
327
339
  <span class="pf-c-tree-view__node-text">Application 1</span>
328
- </div>
340
+ </span>
329
341
  </button>
330
342
  </div>
331
343
  <ul class="pf-c-tree-view__list" role="group">
332
344
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
333
345
  <div class="pf-c-tree-view__content">
334
346
  <button class="pf-c-tree-view__node">
335
- <div class="pf-c-tree-view__node-container">
347
+ <span class="pf-c-tree-view__node-container">
336
348
  <span class="pf-c-tree-view__node-text">Settings</span>
337
- </div>
349
+ </span>
338
350
  </button>
339
351
  </div>
340
352
  </li>
341
353
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
342
354
  <div class="pf-c-tree-view__content">
343
355
  <button class="pf-c-tree-view__node pf-m-current">
344
- <div class="pf-c-tree-view__node-container">
356
+ <span class="pf-c-tree-view__node-container">
345
357
  <span class="pf-c-tree-view__node-text">Current</span>
346
- </div>
358
+ </span>
347
359
  </button>
348
360
  </div>
349
361
  </li>
@@ -357,14 +369,15 @@ beta: true
357
369
  >
358
370
  <div class="pf-c-tree-view__content">
359
371
  <button class="pf-c-tree-view__node">
360
- <div class="pf-c-tree-view__node-container">
361
- <div class="pf-c-tree-view__node-toggle">
372
+ <span class="pf-c-tree-view__node-container">
373
+ <span class="pf-c-tree-view__node-toggle">
362
374
  <span class="pf-c-tree-view__node-toggle-icon">
363
375
  <i class="fas fa-angle-right" aria-hidden="true"></i>
364
376
  </span>
365
- </div>
377
+ </span>
378
+
366
379
  <span class="pf-c-tree-view__node-text">Application 2</span>
367
- </div>
380
+ </span>
368
381
  </button>
369
382
  </div>
370
383
  <ul class="pf-c-tree-view__list" role="group">
@@ -376,14 +389,15 @@ beta: true
376
389
  >
377
390
  <div class="pf-c-tree-view__content">
378
391
  <button class="pf-c-tree-view__node">
379
- <div class="pf-c-tree-view__node-container">
380
- <div class="pf-c-tree-view__node-toggle">
392
+ <span class="pf-c-tree-view__node-container">
393
+ <span class="pf-c-tree-view__node-toggle">
381
394
  <span class="pf-c-tree-view__node-toggle-icon">
382
395
  <i class="fas fa-angle-right" aria-hidden="true"></i>
383
396
  </span>
384
- </div>
397
+ </span>
398
+
385
399
  <span class="pf-c-tree-view__node-text">Settings</span>
386
- </div>
400
+ </span>
387
401
  </button>
388
402
  </div>
389
403
  </li>
@@ -395,14 +409,15 @@ beta: true
395
409
  >
396
410
  <div class="pf-c-tree-view__content">
397
411
  <button class="pf-c-tree-view__node">
398
- <div class="pf-c-tree-view__node-container">
399
- <div class="pf-c-tree-view__node-toggle">
412
+ <span class="pf-c-tree-view__node-container">
413
+ <span class="pf-c-tree-view__node-toggle">
400
414
  <span class="pf-c-tree-view__node-toggle-icon">
401
415
  <i class="fas fa-angle-right" aria-hidden="true"></i>
402
416
  </span>
403
- </div>
417
+ </span>
418
+
404
419
  <span class="pf-c-tree-view__node-text">Loader</span>
405
- </div>
420
+ </span>
406
421
  </button>
407
422
  </div>
408
423
  <ul class="pf-c-tree-view__list" role="group">
@@ -414,14 +429,15 @@ beta: true
414
429
  >
415
430
  <div class="pf-c-tree-view__content">
416
431
  <button class="pf-c-tree-view__node">
417
- <div class="pf-c-tree-view__node-container">
418
- <div class="pf-c-tree-view__node-toggle">
432
+ <span class="pf-c-tree-view__node-container">
433
+ <span class="pf-c-tree-view__node-toggle">
419
434
  <span class="pf-c-tree-view__node-toggle-icon">
420
435
  <i class="fas fa-angle-right" aria-hidden="true"></i>
421
436
  </span>
422
- </div>
437
+ </span>
438
+
423
439
  <span class="pf-c-tree-view__node-text">Loader app 1</span>
424
- </div>
440
+ </span>
425
441
  </button>
426
442
  </div>
427
443
  </li>
@@ -432,9 +448,9 @@ beta: true
432
448
  >
433
449
  <div class="pf-c-tree-view__content">
434
450
  <button class="pf-c-tree-view__node">
435
- <div class="pf-c-tree-view__node-container">
451
+ <span class="pf-c-tree-view__node-container">
436
452
  <span class="pf-c-tree-view__node-text">Loader app 2</span>
437
- </div>
453
+ </span>
438
454
  </button>
439
455
  </div>
440
456
  </li>
@@ -445,9 +461,9 @@ beta: true
445
461
  >
446
462
  <div class="pf-c-tree-view__content">
447
463
  <button class="pf-c-tree-view__node">
448
- <div class="pf-c-tree-view__node-container">
464
+ <span class="pf-c-tree-view__node-container">
449
465
  <span class="pf-c-tree-view__node-text">Loader app 3</span>
450
- </div>
466
+ </span>
451
467
  </button>
452
468
  </div>
453
469
  </li>
@@ -465,14 +481,15 @@ beta: true
465
481
  >
466
482
  <div class="pf-c-tree-view__content">
467
483
  <button class="pf-c-tree-view__node">
468
- <div class="pf-c-tree-view__node-container">
469
- <div class="pf-c-tree-view__node-toggle">
484
+ <span class="pf-c-tree-view__node-container">
485
+ <span class="pf-c-tree-view__node-toggle">
470
486
  <span class="pf-c-tree-view__node-toggle-icon">
471
487
  <i class="fas fa-angle-right" aria-hidden="true"></i>
472
488
  </span>
473
- </div>
489
+ </span>
490
+
474
491
  <span class="pf-c-tree-view__node-text">Cost management</span>
475
- </div>
492
+ </span>
476
493
  </button>
477
494
  </div>
478
495
  </li>
@@ -484,14 +501,15 @@ beta: true
484
501
  >
485
502
  <div class="pf-c-tree-view__content">
486
503
  <button class="pf-c-tree-view__node">
487
- <div class="pf-c-tree-view__node-container">
488
- <div class="pf-c-tree-view__node-toggle">
504
+ <span class="pf-c-tree-view__node-container">
505
+ <span class="pf-c-tree-view__node-toggle">
489
506
  <span class="pf-c-tree-view__node-toggle-icon">
490
507
  <i class="fas fa-angle-right" aria-hidden="true"></i>
491
508
  </span>
492
- </div>
509
+ </span>
510
+
493
511
  <span class="pf-c-tree-view__node-text">Sources</span>
494
- </div>
512
+ </span>
495
513
  </button>
496
514
  </div>
497
515
  </li>
@@ -503,16 +521,17 @@ beta: true
503
521
  >
504
522
  <div class="pf-c-tree-view__content">
505
523
  <button class="pf-c-tree-view__node">
506
- <div class="pf-c-tree-view__node-container">
507
- <div class="pf-c-tree-view__node-toggle">
524
+ <span class="pf-c-tree-view__node-container">
525
+ <span class="pf-c-tree-view__node-toggle">
508
526
  <span class="pf-c-tree-view__node-toggle-icon">
509
527
  <i class="fas fa-angle-right" aria-hidden="true"></i>
510
528
  </span>
511
- </div>
529
+ </span>
530
+
512
531
  <span
513
532
  class="pf-c-tree-view__node-text"
514
533
  >This is a really really really long folder name that overflows from the width of the container.</span>
515
- </div>
534
+ </span>
516
535
  </button>
517
536
  </div>
518
537
  </li>
@@ -533,17 +552,24 @@ beta: true
533
552
  tabindex="0"
534
553
  >
535
554
  <div class="pf-c-tree-view__content">
536
- <div class="pf-c-tree-view__node" tabindex="0">
537
- <div class="pf-c-tree-view__node-container">
555
+ <label
556
+ class="pf-c-tree-view__node pf-m-selectable"
557
+ tabindex="0"
558
+ for="check-1"
559
+ id="label-1"
560
+ >
561
+ <span class="pf-c-tree-view__node-container">
538
562
  <button
539
563
  class="pf-c-tree-view__node-toggle"
564
+ id="toggle-1"
540
565
  aria-label="Toggle"
541
- aria-expanded="true"
566
+ aria-labelledby="toggle-1 label-1"
542
567
  >
543
568
  <span class="pf-c-tree-view__node-toggle-icon">
544
569
  <i class="fas fa-angle-right" aria-hidden="true"></i>
545
570
  </span>
546
571
  </button>
572
+
547
573
  <span class="pf-c-tree-view__node-check">
548
574
  <div class="pf-c-check pf-m-standalone">
549
575
  <input
@@ -554,12 +580,9 @@ beta: true
554
580
  />
555
581
  </div>
556
582
  </span>
557
- <label
558
- class="pf-c-tree-view__node-text"
559
- for="check-1"
560
- >Application launcher</label>
561
- </div>
562
- </div>
583
+ <span class="pf-c-tree-view__node-text">Application launcher</span>
584
+ </span>
585
+ </label>
563
586
  </div>
564
587
  <ul class="pf-c-tree-view__list" role="group">
565
588
  <li
@@ -569,17 +592,24 @@ beta: true
569
592
  tabindex="0"
570
593
  >
571
594
  <div class="pf-c-tree-view__content">
572
- <div class="pf-c-tree-view__node" tabindex="0">
573
- <div class="pf-c-tree-view__node-container">
595
+ <label
596
+ class="pf-c-tree-view__node pf-m-selectable"
597
+ tabindex="0"
598
+ for="check-2"
599
+ id="label-2"
600
+ >
601
+ <span class="pf-c-tree-view__node-container">
574
602
  <button
575
603
  class="pf-c-tree-view__node-toggle"
604
+ id="toggle-2"
576
605
  aria-label="Toggle"
577
- aria-expanded="true"
606
+ aria-labelledby="toggle-2 label-2"
578
607
  >
579
608
  <span class="pf-c-tree-view__node-toggle-icon">
580
609
  <i class="fas fa-angle-right" aria-hidden="true"></i>
581
610
  </span>
582
611
  </button>
612
+
583
613
  <span class="pf-c-tree-view__node-check">
584
614
  <div class="pf-c-check pf-m-standalone">
585
615
  <input
@@ -591,18 +621,20 @@ beta: true
591
621
  />
592
622
  </div>
593
623
  </span>
594
- <label
595
- class="pf-c-tree-view__node-text"
596
- for="check-2"
597
- >Application 1</label>
598
- </div>
599
- </div>
624
+ <span class="pf-c-tree-view__node-text">Application 1</span>
625
+ </span>
626
+ </label>
600
627
  </div>
601
628
  <ul class="pf-c-tree-view__list" role="group">
602
629
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
603
630
  <div class="pf-c-tree-view__content">
604
- <div class="pf-c-tree-view__node" tabindex="0">
605
- <div class="pf-c-tree-view__node-container">
631
+ <label
632
+ class="pf-c-tree-view__node pf-m-selectable"
633
+ tabindex="0"
634
+ for="check-3"
635
+ id="label-3"
636
+ >
637
+ <span class="pf-c-tree-view__node-container">
606
638
  <span class="pf-c-tree-view__node-check">
607
639
  <div class="pf-c-check pf-m-standalone">
608
640
  <input
@@ -614,18 +646,20 @@ beta: true
614
646
  />
615
647
  </div>
616
648
  </span>
617
- <label
618
- class="pf-c-tree-view__node-text"
619
- for="check-3"
620
- >Settings</label>
621
- </div>
622
- </div>
649
+ <span class="pf-c-tree-view__node-text">Settings</span>
650
+ </span>
651
+ </label>
623
652
  </div>
624
653
  </li>
625
654
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
626
655
  <div class="pf-c-tree-view__content">
627
- <div class="pf-c-tree-view__node" tabindex="0">
628
- <div class="pf-c-tree-view__node-container">
656
+ <label
657
+ class="pf-c-tree-view__node pf-m-selectable"
658
+ tabindex="0"
659
+ for="check-4"
660
+ id="label-4"
661
+ >
662
+ <span class="pf-c-tree-view__node-container">
629
663
  <span class="pf-c-tree-view__node-check">
630
664
  <div class="pf-c-check pf-m-standalone">
631
665
  <input
@@ -637,12 +671,9 @@ beta: true
637
671
  />
638
672
  </div>
639
673
  </span>
640
- <label
641
- class="pf-c-tree-view__node-text"
642
- for="check-4"
643
- >Loader</label>
644
- </div>
645
- </div>
674
+ <span class="pf-c-tree-view__node-text">Loader</span>
675
+ </span>
676
+ </label>
646
677
  </div>
647
678
  </li>
648
679
  <li
@@ -652,17 +683,24 @@ beta: true
652
683
  tabindex="0"
653
684
  >
654
685
  <div class="pf-c-tree-view__content">
655
- <div class="pf-c-tree-view__node" tabindex="0">
656
- <div class="pf-c-tree-view__node-container">
686
+ <label
687
+ class="pf-c-tree-view__node pf-m-selectable"
688
+ tabindex="0"
689
+ for="check-5"
690
+ id="label-5"
691
+ >
692
+ <span class="pf-c-tree-view__node-container">
657
693
  <button
658
694
  class="pf-c-tree-view__node-toggle"
695
+ id="toggle-5"
659
696
  aria-label="Toggle"
660
- aria-expanded="false"
697
+ aria-labelledby="toggle-5 label-5"
661
698
  >
662
699
  <span class="pf-c-tree-view__node-toggle-icon">
663
700
  <i class="fas fa-angle-right" aria-hidden="true"></i>
664
701
  </span>
665
702
  </button>
703
+
666
704
  <span class="pf-c-tree-view__node-check">
667
705
  <div class="pf-c-check pf-m-standalone">
668
706
  <input
@@ -674,12 +712,9 @@ beta: true
674
712
  />
675
713
  </div>
676
714
  </span>
677
- <label
678
- class="pf-c-tree-view__node-text"
679
- for="check-5"
680
- >Loader</label>
681
- </div>
682
- </div>
715
+ <span class="pf-c-tree-view__node-text">Loader</span>
716
+ </span>
717
+ </label>
683
718
  </div>
684
719
  </li>
685
720
  </ul>
@@ -691,17 +726,24 @@ beta: true
691
726
  tabindex="0"
692
727
  >
693
728
  <div class="pf-c-tree-view__content">
694
- <div class="pf-c-tree-view__node" tabindex="0">
695
- <div class="pf-c-tree-view__node-container">
729
+ <label
730
+ class="pf-c-tree-view__node pf-m-selectable"
731
+ tabindex="0"
732
+ for="check-6"
733
+ id="label-6"
734
+ >
735
+ <span class="pf-c-tree-view__node-container">
696
736
  <button
697
737
  class="pf-c-tree-view__node-toggle"
738
+ id="toggle-6"
698
739
  aria-label="Toggle"
699
- aria-expanded="true"
740
+ aria-labelledby="toggle-6 label-6"
700
741
  >
701
742
  <span class="pf-c-tree-view__node-toggle-icon">
702
743
  <i class="fas fa-angle-right" aria-hidden="true"></i>
703
744
  </span>
704
745
  </button>
746
+
705
747
  <span class="pf-c-tree-view__node-check">
706
748
  <div class="pf-c-check pf-m-standalone">
707
749
  <input
@@ -712,12 +754,9 @@ beta: true
712
754
  />
713
755
  </div>
714
756
  </span>
715
- <label
716
- class="pf-c-tree-view__node-text"
717
- for="check-6"
718
- >Application 2</label>
719
- </div>
720
- </div>
757
+ <span class="pf-c-tree-view__node-text">Application 2</span>
758
+ </span>
759
+ </label>
721
760
  </div>
722
761
  <ul class="pf-c-tree-view__list" role="group">
723
762
  <li
@@ -727,17 +766,24 @@ beta: true
727
766
  tabindex="0"
728
767
  >
729
768
  <div class="pf-c-tree-view__content">
730
- <div class="pf-c-tree-view__node" tabindex="0">
731
- <div class="pf-c-tree-view__node-container">
769
+ <label
770
+ class="pf-c-tree-view__node pf-m-selectable"
771
+ tabindex="0"
772
+ for="check-7"
773
+ id="label-7"
774
+ >
775
+ <span class="pf-c-tree-view__node-container">
732
776
  <button
733
777
  class="pf-c-tree-view__node-toggle"
778
+ id="toggle-7"
734
779
  aria-label="Toggle"
735
- aria-expanded="false"
780
+ aria-labelledby="toggle-7 label-7"
736
781
  >
737
782
  <span class="pf-c-tree-view__node-toggle-icon">
738
783
  <i class="fas fa-angle-right" aria-hidden="true"></i>
739
784
  </span>
740
785
  </button>
786
+
741
787
  <span class="pf-c-tree-view__node-check">
742
788
  <div class="pf-c-check pf-m-standalone">
743
789
  <input
@@ -748,18 +794,20 @@ beta: true
748
794
  />
749
795
  </div>
750
796
  </span>
751
- <label
752
- class="pf-c-tree-view__node-text"
753
- for="check-7"
754
- >Settings</label>
755
- </div>
756
- </div>
797
+ <span class="pf-c-tree-view__node-text">Settings</span>
798
+ </span>
799
+ </label>
757
800
  </div>
758
801
  </li>
759
802
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
760
803
  <div class="pf-c-tree-view__content">
761
- <div class="pf-c-tree-view__node" tabindex="0">
762
- <div class="pf-c-tree-view__node-container">
804
+ <label
805
+ class="pf-c-tree-view__node pf-m-selectable"
806
+ tabindex="0"
807
+ for="check-8"
808
+ id="label-8"
809
+ >
810
+ <span class="pf-c-tree-view__node-container">
763
811
  <span class="pf-c-tree-view__node-check">
764
812
  <div class="pf-c-check pf-m-standalone">
765
813
  <input
@@ -770,12 +818,9 @@ beta: true
770
818
  />
771
819
  </div>
772
820
  </span>
773
- <label
774
- class="pf-c-tree-view__node-text"
775
- for="check-8"
776
- >Settings</label>
777
- </div>
778
- </div>
821
+ <span class="pf-c-tree-view__node-text">Settings</span>
822
+ </span>
823
+ </label>
779
824
  </div>
780
825
  </li>
781
826
  <li
@@ -785,17 +830,24 @@ beta: true
785
830
  tabindex="0"
786
831
  >
787
832
  <div class="pf-c-tree-view__content">
788
- <div class="pf-c-tree-view__node" tabindex="0">
789
- <div class="pf-c-tree-view__node-container">
833
+ <label
834
+ class="pf-c-tree-view__node pf-m-selectable"
835
+ tabindex="0"
836
+ for="check-9"
837
+ id="label-9"
838
+ >
839
+ <span class="pf-c-tree-view__node-container">
790
840
  <button
791
841
  class="pf-c-tree-view__node-toggle"
842
+ id="toggle-9"
792
843
  aria-label="Toggle"
793
- aria-expanded="true"
844
+ aria-labelledby="toggle-9 label-9"
794
845
  >
795
846
  <span class="pf-c-tree-view__node-toggle-icon">
796
847
  <i class="fas fa-angle-right" aria-hidden="true"></i>
797
848
  </span>
798
849
  </button>
850
+
799
851
  <span class="pf-c-tree-view__node-check">
800
852
  <div class="pf-c-check pf-m-standalone">
801
853
  <input
@@ -806,12 +858,9 @@ beta: true
806
858
  />
807
859
  </div>
808
860
  </span>
809
- <label
810
- class="pf-c-tree-view__node-text"
811
- for="check-9"
812
- >Current</label>
813
- </div>
814
- </div>
861
+ <span class="pf-c-tree-view__node-text">Current</span>
862
+ </span>
863
+ </label>
815
864
  </div>
816
865
  <ul class="pf-c-tree-view__list" role="group">
817
866
  <li
@@ -821,17 +870,24 @@ beta: true
821
870
  tabindex="0"
822
871
  >
823
872
  <div class="pf-c-tree-view__content">
824
- <div class="pf-c-tree-view__node" tabindex="0">
825
- <div class="pf-c-tree-view__node-container">
873
+ <label
874
+ class="pf-c-tree-view__node pf-m-selectable"
875
+ tabindex="0"
876
+ for="check-10"
877
+ id="label-10"
878
+ >
879
+ <span class="pf-c-tree-view__node-container">
826
880
  <button
827
881
  class="pf-c-tree-view__node-toggle"
882
+ id="toggle-10"
828
883
  aria-label="Toggle"
829
- aria-expanded="false"
884
+ aria-labelledby="toggle-10 label-10"
830
885
  >
831
886
  <span class="pf-c-tree-view__node-toggle-icon">
832
887
  <i class="fas fa-angle-right" aria-hidden="true"></i>
833
888
  </span>
834
889
  </button>
890
+
835
891
  <span class="pf-c-tree-view__node-check">
836
892
  <div class="pf-c-check pf-m-standalone">
837
893
  <input
@@ -842,12 +898,9 @@ beta: true
842
898
  />
843
899
  </div>
844
900
  </span>
845
- <label
846
- class="pf-c-tree-view__node-text"
847
- for="check-10"
848
- >Loader app 1</label>
849
- </div>
850
- </div>
901
+ <span class="pf-c-tree-view__node-text">Loader app 1</span>
902
+ </span>
903
+ </label>
851
904
  </div>
852
905
  </li>
853
906
  <li
@@ -856,8 +909,13 @@ beta: true
856
909
  tabindex="-1"
857
910
  >
858
911
  <div class="pf-c-tree-view__content">
859
- <div class="pf-c-tree-view__node" tabindex="0">
860
- <div class="pf-c-tree-view__node-container">
912
+ <label
913
+ class="pf-c-tree-view__node pf-m-selectable"
914
+ tabindex="0"
915
+ for="check-11"
916
+ id="label-11"
917
+ >
918
+ <span class="pf-c-tree-view__node-container">
861
919
  <span class="pf-c-tree-view__node-check">
862
920
  <div class="pf-c-check pf-m-standalone">
863
921
  <input
@@ -869,12 +927,9 @@ beta: true
869
927
  />
870
928
  </div>
871
929
  </span>
872
- <label
873
- class="pf-c-tree-view__node-text"
874
- for="check-11"
875
- >Loader app 2</label>
876
- </div>
877
- </div>
930
+ <span class="pf-c-tree-view__node-text">Loader app 2</span>
931
+ </span>
932
+ </label>
878
933
  </div>
879
934
  </li>
880
935
  <li
@@ -883,8 +938,13 @@ beta: true
883
938
  tabindex="-1"
884
939
  >
885
940
  <div class="pf-c-tree-view__content">
886
- <div class="pf-c-tree-view__node" tabindex="0">
887
- <div class="pf-c-tree-view__node-container">
941
+ <label
942
+ class="pf-c-tree-view__node pf-m-selectable"
943
+ tabindex="0"
944
+ for="check-12"
945
+ id="label-12"
946
+ >
947
+ <span class="pf-c-tree-view__node-container">
888
948
  <span class="pf-c-tree-view__node-check">
889
949
  <div class="pf-c-check pf-m-standalone">
890
950
  <input
@@ -895,12 +955,9 @@ beta: true
895
955
  />
896
956
  </div>
897
957
  </span>
898
- <label
899
- class="pf-c-tree-view__node-text"
900
- for="check-12"
901
- >Loader app 3</label>
902
- </div>
903
- </div>
958
+ <span class="pf-c-tree-view__node-text">Loader app 3</span>
959
+ </span>
960
+ </label>
904
961
  </div>
905
962
  </li>
906
963
  </ul>
@@ -916,17 +973,24 @@ beta: true
916
973
  tabindex="0"
917
974
  >
918
975
  <div class="pf-c-tree-view__content">
919
- <div class="pf-c-tree-view__node" tabindex="0">
920
- <div class="pf-c-tree-view__node-container">
976
+ <label
977
+ class="pf-c-tree-view__node pf-m-selectable"
978
+ tabindex="0"
979
+ for="check-13"
980
+ id="label-13"
981
+ >
982
+ <span class="pf-c-tree-view__node-container">
921
983
  <button
922
984
  class="pf-c-tree-view__node-toggle"
985
+ id="toggle-13"
923
986
  aria-label="Toggle"
924
- aria-expanded="false"
987
+ aria-labelledby="toggle-13 label-13"
925
988
  >
926
989
  <span class="pf-c-tree-view__node-toggle-icon">
927
990
  <i class="fas fa-angle-right" aria-hidden="true"></i>
928
991
  </span>
929
992
  </button>
993
+
930
994
  <span class="pf-c-tree-view__node-check">
931
995
  <div class="pf-c-check pf-m-standalone">
932
996
  <input
@@ -937,12 +1001,9 @@ beta: true
937
1001
  />
938
1002
  </div>
939
1003
  </span>
940
- <label
941
- class="pf-c-tree-view__node-text"
942
- for="check-13"
943
- >Cost management</label>
944
- </div>
945
- </div>
1004
+ <span class="pf-c-tree-view__node-text">Cost management</span>
1005
+ </span>
1006
+ </label>
946
1007
  </div>
947
1008
  </li>
948
1009
  <li
@@ -952,17 +1013,24 @@ beta: true
952
1013
  tabindex="0"
953
1014
  >
954
1015
  <div class="pf-c-tree-view__content">
955
- <div class="pf-c-tree-view__node" tabindex="0">
956
- <div class="pf-c-tree-view__node-container">
1016
+ <label
1017
+ class="pf-c-tree-view__node pf-m-selectable"
1018
+ tabindex="0"
1019
+ for="check-14"
1020
+ id="label-14"
1021
+ >
1022
+ <span class="pf-c-tree-view__node-container">
957
1023
  <button
958
1024
  class="pf-c-tree-view__node-toggle"
1025
+ id="toggle-14"
959
1026
  aria-label="Toggle"
960
- aria-expanded="false"
1027
+ aria-labelledby="toggle-14 label-14"
961
1028
  >
962
1029
  <span class="pf-c-tree-view__node-toggle-icon">
963
1030
  <i class="fas fa-angle-right" aria-hidden="true"></i>
964
1031
  </span>
965
1032
  </button>
1033
+
966
1034
  <span class="pf-c-tree-view__node-check">
967
1035
  <div class="pf-c-check pf-m-standalone">
968
1036
  <input
@@ -973,9 +1041,9 @@ beta: true
973
1041
  />
974
1042
  </div>
975
1043
  </span>
976
- <label class="pf-c-tree-view__node-text" for="check-14">Sources</label>
977
- </div>
978
- </div>
1044
+ <span class="pf-c-tree-view__node-text">Sources</span>
1045
+ </span>
1046
+ </label>
979
1047
  </div>
980
1048
  </li>
981
1049
  <li
@@ -985,17 +1053,24 @@ beta: true
985
1053
  tabindex="0"
986
1054
  >
987
1055
  <div class="pf-c-tree-view__content">
988
- <div class="pf-c-tree-view__node" tabindex="0">
989
- <div class="pf-c-tree-view__node-container">
1056
+ <label
1057
+ class="pf-c-tree-view__node pf-m-selectable"
1058
+ tabindex="0"
1059
+ for="check-15"
1060
+ id="label-15"
1061
+ >
1062
+ <span class="pf-c-tree-view__node-container">
990
1063
  <button
991
1064
  class="pf-c-tree-view__node-toggle"
1065
+ id="toggle-15"
992
1066
  aria-label="Toggle"
993
- aria-expanded="false"
1067
+ aria-labelledby="toggle-15 label-15"
994
1068
  >
995
1069
  <span class="pf-c-tree-view__node-toggle-icon">
996
1070
  <i class="fas fa-angle-right" aria-hidden="true"></i>
997
1071
  </span>
998
1072
  </button>
1073
+
999
1074
  <span class="pf-c-tree-view__node-check">
1000
1075
  <div class="pf-c-check pf-m-standalone">
1001
1076
  <input
@@ -1007,12 +1082,11 @@ beta: true
1007
1082
  />
1008
1083
  </div>
1009
1084
  </span>
1010
- <label
1085
+ <span
1011
1086
  class="pf-c-tree-view__node-text"
1012
- for="check-15"
1013
- >This is a really really really long folder name that overflows from the width of the container.</label>
1014
- </div>
1015
- </div>
1087
+ >This is a really really really long folder name that overflows from the width of the container.</span>
1088
+ </span>
1089
+ </label>
1016
1090
  </div>
1017
1091
  </li>
1018
1092
  </ul>
@@ -1033,17 +1107,18 @@ beta: true
1033
1107
  >
1034
1108
  <div class="pf-c-tree-view__content">
1035
1109
  <button class="pf-c-tree-view__node">
1036
- <div class="pf-c-tree-view__node-container">
1037
- <div class="pf-c-tree-view__node-toggle">
1110
+ <span class="pf-c-tree-view__node-container">
1111
+ <span class="pf-c-tree-view__node-toggle">
1038
1112
  <span class="pf-c-tree-view__node-toggle-icon">
1039
1113
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1040
1114
  </span>
1041
- </div>
1115
+ </span>
1116
+
1042
1117
  <span class="pf-c-tree-view__node-icon">
1043
1118
  <i class="fas fa-folder-open" aria-hidden="true"></i>
1044
1119
  </span>
1045
1120
  <span class="pf-c-tree-view__node-text">Application launcher</span>
1046
- </div>
1121
+ </span>
1047
1122
  </button>
1048
1123
  </div>
1049
1124
  <ul class="pf-c-tree-view__list" role="group">
@@ -1055,41 +1130,42 @@ beta: true
1055
1130
  >
1056
1131
  <div class="pf-c-tree-view__content">
1057
1132
  <button class="pf-c-tree-view__node">
1058
- <div class="pf-c-tree-view__node-container">
1059
- <div class="pf-c-tree-view__node-toggle">
1133
+ <span class="pf-c-tree-view__node-container">
1134
+ <span class="pf-c-tree-view__node-toggle">
1060
1135
  <span class="pf-c-tree-view__node-toggle-icon">
1061
1136
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1062
1137
  </span>
1063
- </div>
1138
+ </span>
1139
+
1064
1140
  <span class="pf-c-tree-view__node-icon">
1065
1141
  <i class="fas fa-folder-open" aria-hidden="true"></i>
1066
1142
  </span>
1067
1143
  <span class="pf-c-tree-view__node-text">Application 1</span>
1068
- </div>
1144
+ </span>
1069
1145
  </button>
1070
1146
  </div>
1071
1147
  <ul class="pf-c-tree-view__list" role="group">
1072
1148
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
1073
1149
  <div class="pf-c-tree-view__content">
1074
1150
  <button class="pf-c-tree-view__node">
1075
- <div class="pf-c-tree-view__node-container">
1151
+ <span class="pf-c-tree-view__node-container">
1076
1152
  <span class="pf-c-tree-view__node-icon">
1077
1153
  <i class="fas fa-folder" aria-hidden="true"></i>
1078
1154
  </span>
1079
1155
  <span class="pf-c-tree-view__node-text">Settings</span>
1080
- </div>
1156
+ </span>
1081
1157
  </button>
1082
1158
  </div>
1083
1159
  </li>
1084
1160
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
1085
1161
  <div class="pf-c-tree-view__content">
1086
1162
  <button class="pf-c-tree-view__node pf-m-current">
1087
- <div class="pf-c-tree-view__node-container">
1163
+ <span class="pf-c-tree-view__node-container">
1088
1164
  <span class="pf-c-tree-view__node-icon">
1089
1165
  <i class="fas fa-folder" aria-hidden="true"></i>
1090
1166
  </span>
1091
1167
  <span class="pf-c-tree-view__node-text">Current</span>
1092
- </div>
1168
+ </span>
1093
1169
  </button>
1094
1170
  </div>
1095
1171
  </li>
@@ -1103,17 +1179,18 @@ beta: true
1103
1179
  >
1104
1180
  <div class="pf-c-tree-view__content">
1105
1181
  <button class="pf-c-tree-view__node">
1106
- <div class="pf-c-tree-view__node-container">
1107
- <div class="pf-c-tree-view__node-toggle">
1182
+ <span class="pf-c-tree-view__node-container">
1183
+ <span class="pf-c-tree-view__node-toggle">
1108
1184
  <span class="pf-c-tree-view__node-toggle-icon">
1109
1185
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1110
1186
  </span>
1111
- </div>
1187
+ </span>
1188
+
1112
1189
  <span class="pf-c-tree-view__node-icon">
1113
1190
  <i class="fas fa-folder-open" aria-hidden="true"></i>
1114
1191
  </span>
1115
1192
  <span class="pf-c-tree-view__node-text">Application 2</span>
1116
- </div>
1193
+ </span>
1117
1194
  </button>
1118
1195
  </div>
1119
1196
  <ul class="pf-c-tree-view__list" role="group">
@@ -1125,17 +1202,18 @@ beta: true
1125
1202
  >
1126
1203
  <div class="pf-c-tree-view__content">
1127
1204
  <button class="pf-c-tree-view__node">
1128
- <div class="pf-c-tree-view__node-container">
1129
- <div class="pf-c-tree-view__node-toggle">
1205
+ <span class="pf-c-tree-view__node-container">
1206
+ <span class="pf-c-tree-view__node-toggle">
1130
1207
  <span class="pf-c-tree-view__node-toggle-icon">
1131
1208
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1132
1209
  </span>
1133
- </div>
1210
+ </span>
1211
+
1134
1212
  <span class="pf-c-tree-view__node-icon">
1135
1213
  <i class="fas fa-folder" aria-hidden="true"></i>
1136
1214
  </span>
1137
1215
  <span class="pf-c-tree-view__node-text">Settings</span>
1138
- </div>
1216
+ </span>
1139
1217
  </button>
1140
1218
  </div>
1141
1219
  </li>
@@ -1147,17 +1225,18 @@ beta: true
1147
1225
  >
1148
1226
  <div class="pf-c-tree-view__content">
1149
1227
  <button class="pf-c-tree-view__node">
1150
- <div class="pf-c-tree-view__node-container">
1151
- <div class="pf-c-tree-view__node-toggle">
1228
+ <span class="pf-c-tree-view__node-container">
1229
+ <span class="pf-c-tree-view__node-toggle">
1152
1230
  <span class="pf-c-tree-view__node-toggle-icon">
1153
1231
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1154
1232
  </span>
1155
- </div>
1233
+ </span>
1234
+
1156
1235
  <span class="pf-c-tree-view__node-icon">
1157
1236
  <i class="fas fa-folder-open" aria-hidden="true"></i>
1158
1237
  </span>
1159
1238
  <span class="pf-c-tree-view__node-text">Loader</span>
1160
- </div>
1239
+ </span>
1161
1240
  </button>
1162
1241
  </div>
1163
1242
  <ul class="pf-c-tree-view__list" role="group">
@@ -1169,17 +1248,18 @@ beta: true
1169
1248
  >
1170
1249
  <div class="pf-c-tree-view__content">
1171
1250
  <button class="pf-c-tree-view__node">
1172
- <div class="pf-c-tree-view__node-container">
1173
- <div class="pf-c-tree-view__node-toggle">
1251
+ <span class="pf-c-tree-view__node-container">
1252
+ <span class="pf-c-tree-view__node-toggle">
1174
1253
  <span class="pf-c-tree-view__node-toggle-icon">
1175
1254
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1176
1255
  </span>
1177
- </div>
1256
+ </span>
1257
+
1178
1258
  <span class="pf-c-tree-view__node-icon">
1179
1259
  <i class="fas fa-folder" aria-hidden="true"></i>
1180
1260
  </span>
1181
1261
  <span class="pf-c-tree-view__node-text">Loader app 1</span>
1182
- </div>
1262
+ </span>
1183
1263
  </button>
1184
1264
  </div>
1185
1265
  </li>
@@ -1190,12 +1270,12 @@ beta: true
1190
1270
  >
1191
1271
  <div class="pf-c-tree-view__content">
1192
1272
  <button class="pf-c-tree-view__node">
1193
- <div class="pf-c-tree-view__node-container">
1273
+ <span class="pf-c-tree-view__node-container">
1194
1274
  <span class="pf-c-tree-view__node-icon">
1195
1275
  <i class="fas fa-folder" aria-hidden="true"></i>
1196
1276
  </span>
1197
1277
  <span class="pf-c-tree-view__node-text">Loader app 2</span>
1198
- </div>
1278
+ </span>
1199
1279
  </button>
1200
1280
  </div>
1201
1281
  </li>
@@ -1206,12 +1286,12 @@ beta: true
1206
1286
  >
1207
1287
  <div class="pf-c-tree-view__content">
1208
1288
  <button class="pf-c-tree-view__node">
1209
- <div class="pf-c-tree-view__node-container">
1289
+ <span class="pf-c-tree-view__node-container">
1210
1290
  <span class="pf-c-tree-view__node-icon">
1211
1291
  <i class="fas fa-folder" aria-hidden="true"></i>
1212
1292
  </span>
1213
1293
  <span class="pf-c-tree-view__node-text">Loader app 3</span>
1214
- </div>
1294
+ </span>
1215
1295
  </button>
1216
1296
  </div>
1217
1297
  </li>
@@ -1229,17 +1309,18 @@ beta: true
1229
1309
  >
1230
1310
  <div class="pf-c-tree-view__content">
1231
1311
  <button class="pf-c-tree-view__node">
1232
- <div class="pf-c-tree-view__node-container">
1233
- <div class="pf-c-tree-view__node-toggle">
1312
+ <span class="pf-c-tree-view__node-container">
1313
+ <span class="pf-c-tree-view__node-toggle">
1234
1314
  <span class="pf-c-tree-view__node-toggle-icon">
1235
1315
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1236
1316
  </span>
1237
- </div>
1317
+ </span>
1318
+
1238
1319
  <span class="pf-c-tree-view__node-icon">
1239
1320
  <i class="fas fa-folder" aria-hidden="true"></i>
1240
1321
  </span>
1241
1322
  <span class="pf-c-tree-view__node-text">Cost management</span>
1242
- </div>
1323
+ </span>
1243
1324
  </button>
1244
1325
  </div>
1245
1326
  </li>
@@ -1251,17 +1332,18 @@ beta: true
1251
1332
  >
1252
1333
  <div class="pf-c-tree-view__content">
1253
1334
  <button class="pf-c-tree-view__node">
1254
- <div class="pf-c-tree-view__node-container">
1255
- <div class="pf-c-tree-view__node-toggle">
1335
+ <span class="pf-c-tree-view__node-container">
1336
+ <span class="pf-c-tree-view__node-toggle">
1256
1337
  <span class="pf-c-tree-view__node-toggle-icon">
1257
1338
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1258
1339
  </span>
1259
- </div>
1340
+ </span>
1341
+
1260
1342
  <span class="pf-c-tree-view__node-icon">
1261
1343
  <i class="fas fa-folder" aria-hidden="true"></i>
1262
1344
  </span>
1263
1345
  <span class="pf-c-tree-view__node-text">Sources</span>
1264
- </div>
1346
+ </span>
1265
1347
  </button>
1266
1348
  </div>
1267
1349
  </li>
@@ -1273,19 +1355,20 @@ beta: true
1273
1355
  >
1274
1356
  <div class="pf-c-tree-view__content">
1275
1357
  <button class="pf-c-tree-view__node">
1276
- <div class="pf-c-tree-view__node-container">
1277
- <div class="pf-c-tree-view__node-toggle">
1358
+ <span class="pf-c-tree-view__node-container">
1359
+ <span class="pf-c-tree-view__node-toggle">
1278
1360
  <span class="pf-c-tree-view__node-toggle-icon">
1279
1361
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1280
1362
  </span>
1281
- </div>
1363
+ </span>
1364
+
1282
1365
  <span class="pf-c-tree-view__node-icon">
1283
1366
  <i class="fas fa-folder" aria-hidden="true"></i>
1284
1367
  </span>
1285
1368
  <span
1286
1369
  class="pf-c-tree-view__node-text"
1287
1370
  >This is a really really really long folder name that overflows from the width of the container.</span>
1288
- </div>
1371
+ </span>
1289
1372
  </button>
1290
1373
  </div>
1291
1374
  </li>
@@ -1307,17 +1390,18 @@ beta: true
1307
1390
  >
1308
1391
  <div class="pf-c-tree-view__content">
1309
1392
  <button class="pf-c-tree-view__node">
1310
- <div class="pf-c-tree-view__node-container">
1311
- <div class="pf-c-tree-view__node-toggle">
1393
+ <span class="pf-c-tree-view__node-container">
1394
+ <span class="pf-c-tree-view__node-toggle">
1312
1395
  <span class="pf-c-tree-view__node-toggle-icon">
1313
1396
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1314
1397
  </span>
1315
- </div>
1398
+ </span>
1399
+
1316
1400
  <span class="pf-c-tree-view__node-text">Application launcher</span>
1317
1401
  <span class="pf-c-tree-view__node-count">
1318
1402
  <span class="pf-c-badge pf-m-read">2</span>
1319
1403
  </span>
1320
- </div>
1404
+ </span>
1321
1405
  </button>
1322
1406
  </div>
1323
1407
  <ul class="pf-c-tree-view__list" role="group">
@@ -1329,35 +1413,36 @@ beta: true
1329
1413
  >
1330
1414
  <div class="pf-c-tree-view__content">
1331
1415
  <button class="pf-c-tree-view__node">
1332
- <div class="pf-c-tree-view__node-container">
1333
- <div class="pf-c-tree-view__node-toggle">
1416
+ <span class="pf-c-tree-view__node-container">
1417
+ <span class="pf-c-tree-view__node-toggle">
1334
1418
  <span class="pf-c-tree-view__node-toggle-icon">
1335
1419
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1336
1420
  </span>
1337
- </div>
1421
+ </span>
1422
+
1338
1423
  <span class="pf-c-tree-view__node-text">Application 1</span>
1339
1424
  <span class="pf-c-tree-view__node-count">
1340
1425
  <span class="pf-c-badge pf-m-read">2</span>
1341
1426
  </span>
1342
- </div>
1427
+ </span>
1343
1428
  </button>
1344
1429
  </div>
1345
1430
  <ul class="pf-c-tree-view__list" role="group">
1346
1431
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
1347
1432
  <div class="pf-c-tree-view__content">
1348
1433
  <button class="pf-c-tree-view__node">
1349
- <div class="pf-c-tree-view__node-container">
1434
+ <span class="pf-c-tree-view__node-container">
1350
1435
  <span class="pf-c-tree-view__node-text">Settings</span>
1351
- </div>
1436
+ </span>
1352
1437
  </button>
1353
1438
  </div>
1354
1439
  </li>
1355
1440
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
1356
1441
  <div class="pf-c-tree-view__content">
1357
1442
  <button class="pf-c-tree-view__node pf-m-current">
1358
- <div class="pf-c-tree-view__node-container">
1443
+ <span class="pf-c-tree-view__node-container">
1359
1444
  <span class="pf-c-tree-view__node-text">Current</span>
1360
- </div>
1445
+ </span>
1361
1446
  </button>
1362
1447
  </div>
1363
1448
  </li>
@@ -1371,17 +1456,18 @@ beta: true
1371
1456
  >
1372
1457
  <div class="pf-c-tree-view__content">
1373
1458
  <button class="pf-c-tree-view__node">
1374
- <div class="pf-c-tree-view__node-container">
1375
- <div class="pf-c-tree-view__node-toggle">
1459
+ <span class="pf-c-tree-view__node-container">
1460
+ <span class="pf-c-tree-view__node-toggle">
1376
1461
  <span class="pf-c-tree-view__node-toggle-icon">
1377
1462
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1378
1463
  </span>
1379
- </div>
1464
+ </span>
1465
+
1380
1466
  <span class="pf-c-tree-view__node-text">Application 2</span>
1381
1467
  <span class="pf-c-tree-view__node-count">
1382
1468
  <span class="pf-c-badge pf-m-read">2</span>
1383
1469
  </span>
1384
- </div>
1470
+ </span>
1385
1471
  </button>
1386
1472
  </div>
1387
1473
  <ul class="pf-c-tree-view__list" role="group">
@@ -1393,17 +1479,18 @@ beta: true
1393
1479
  >
1394
1480
  <div class="pf-c-tree-view__content">
1395
1481
  <button class="pf-c-tree-view__node">
1396
- <div class="pf-c-tree-view__node-container">
1397
- <div class="pf-c-tree-view__node-toggle">
1482
+ <span class="pf-c-tree-view__node-container">
1483
+ <span class="pf-c-tree-view__node-toggle">
1398
1484
  <span class="pf-c-tree-view__node-toggle-icon">
1399
1485
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1400
1486
  </span>
1401
- </div>
1487
+ </span>
1488
+
1402
1489
  <span class="pf-c-tree-view__node-text">Settings</span>
1403
1490
  <span class="pf-c-tree-view__node-count">
1404
1491
  <span class="pf-c-badge pf-m-read">2</span>
1405
1492
  </span>
1406
- </div>
1493
+ </span>
1407
1494
  </button>
1408
1495
  </div>
1409
1496
  </li>
@@ -1415,17 +1502,18 @@ beta: true
1415
1502
  >
1416
1503
  <div class="pf-c-tree-view__content">
1417
1504
  <button class="pf-c-tree-view__node">
1418
- <div class="pf-c-tree-view__node-container">
1419
- <div class="pf-c-tree-view__node-toggle">
1505
+ <span class="pf-c-tree-view__node-container">
1506
+ <span class="pf-c-tree-view__node-toggle">
1420
1507
  <span class="pf-c-tree-view__node-toggle-icon">
1421
1508
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1422
1509
  </span>
1423
- </div>
1510
+ </span>
1511
+
1424
1512
  <span class="pf-c-tree-view__node-text">Loader</span>
1425
1513
  <span class="pf-c-tree-view__node-count">
1426
1514
  <span class="pf-c-badge pf-m-read">2</span>
1427
1515
  </span>
1428
- </div>
1516
+ </span>
1429
1517
  </button>
1430
1518
  </div>
1431
1519
  <ul class="pf-c-tree-view__list" role="group">
@@ -1437,17 +1525,18 @@ beta: true
1437
1525
  >
1438
1526
  <div class="pf-c-tree-view__content">
1439
1527
  <button class="pf-c-tree-view__node">
1440
- <div class="pf-c-tree-view__node-container">
1441
- <div class="pf-c-tree-view__node-toggle">
1528
+ <span class="pf-c-tree-view__node-container">
1529
+ <span class="pf-c-tree-view__node-toggle">
1442
1530
  <span class="pf-c-tree-view__node-toggle-icon">
1443
1531
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1444
1532
  </span>
1445
- </div>
1533
+ </span>
1534
+
1446
1535
  <span class="pf-c-tree-view__node-text">Loader app 1</span>
1447
1536
  <span class="pf-c-tree-view__node-count">
1448
1537
  <span class="pf-c-badge pf-m-read">2</span>
1449
1538
  </span>
1450
- </div>
1539
+ </span>
1451
1540
  </button>
1452
1541
  </div>
1453
1542
  </li>
@@ -1458,9 +1547,9 @@ beta: true
1458
1547
  >
1459
1548
  <div class="pf-c-tree-view__content">
1460
1549
  <button class="pf-c-tree-view__node">
1461
- <div class="pf-c-tree-view__node-container">
1550
+ <span class="pf-c-tree-view__node-container">
1462
1551
  <span class="pf-c-tree-view__node-text">Loader app 2</span>
1463
- </div>
1552
+ </span>
1464
1553
  </button>
1465
1554
  </div>
1466
1555
  </li>
@@ -1471,9 +1560,9 @@ beta: true
1471
1560
  >
1472
1561
  <div class="pf-c-tree-view__content">
1473
1562
  <button class="pf-c-tree-view__node">
1474
- <div class="pf-c-tree-view__node-container">
1563
+ <span class="pf-c-tree-view__node-container">
1475
1564
  <span class="pf-c-tree-view__node-text">Loader app 3</span>
1476
- </div>
1565
+ </span>
1477
1566
  </button>
1478
1567
  </div>
1479
1568
  </li>
@@ -1491,17 +1580,18 @@ beta: true
1491
1580
  >
1492
1581
  <div class="pf-c-tree-view__content">
1493
1582
  <button class="pf-c-tree-view__node">
1494
- <div class="pf-c-tree-view__node-container">
1495
- <div class="pf-c-tree-view__node-toggle">
1583
+ <span class="pf-c-tree-view__node-container">
1584
+ <span class="pf-c-tree-view__node-toggle">
1496
1585
  <span class="pf-c-tree-view__node-toggle-icon">
1497
1586
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1498
1587
  </span>
1499
- </div>
1588
+ </span>
1589
+
1500
1590
  <span class="pf-c-tree-view__node-text">Cost management</span>
1501
1591
  <span class="pf-c-tree-view__node-count">
1502
1592
  <span class="pf-c-badge pf-m-read">2</span>
1503
1593
  </span>
1504
- </div>
1594
+ </span>
1505
1595
  </button>
1506
1596
  </div>
1507
1597
  </li>
@@ -1513,17 +1603,18 @@ beta: true
1513
1603
  >
1514
1604
  <div class="pf-c-tree-view__content">
1515
1605
  <button class="pf-c-tree-view__node">
1516
- <div class="pf-c-tree-view__node-container">
1517
- <div class="pf-c-tree-view__node-toggle">
1606
+ <span class="pf-c-tree-view__node-container">
1607
+ <span class="pf-c-tree-view__node-toggle">
1518
1608
  <span class="pf-c-tree-view__node-toggle-icon">
1519
1609
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1520
1610
  </span>
1521
- </div>
1611
+ </span>
1612
+
1522
1613
  <span class="pf-c-tree-view__node-text">Sources</span>
1523
1614
  <span class="pf-c-tree-view__node-count">
1524
1615
  <span class="pf-c-badge pf-m-read">2</span>
1525
1616
  </span>
1526
- </div>
1617
+ </span>
1527
1618
  </button>
1528
1619
  </div>
1529
1620
  </li>
@@ -1535,19 +1626,20 @@ beta: true
1535
1626
  >
1536
1627
  <div class="pf-c-tree-view__content">
1537
1628
  <button class="pf-c-tree-view__node">
1538
- <div class="pf-c-tree-view__node-container">
1539
- <div class="pf-c-tree-view__node-toggle">
1629
+ <span class="pf-c-tree-view__node-container">
1630
+ <span class="pf-c-tree-view__node-toggle">
1540
1631
  <span class="pf-c-tree-view__node-toggle-icon">
1541
1632
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1542
1633
  </span>
1543
- </div>
1634
+ </span>
1635
+
1544
1636
  <span
1545
1637
  class="pf-c-tree-view__node-text"
1546
1638
  >This is a really really really long folder name that overflows from the width of the container.</span>
1547
1639
  <span class="pf-c-tree-view__node-count">
1548
1640
  <span class="pf-c-badge pf-m-read">2</span>
1549
1641
  </span>
1550
- </div>
1642
+ </span>
1551
1643
  </button>
1552
1644
  </div>
1553
1645
  </li>
@@ -1569,15 +1661,17 @@ beta: true
1569
1661
  >
1570
1662
  <div class="pf-c-tree-view__content">
1571
1663
  <button class="pf-c-tree-view__node">
1572
- <div class="pf-c-tree-view__node-container">
1573
- <div class="pf-c-tree-view__node-toggle">
1664
+ <span class="pf-c-tree-view__node-container">
1665
+ <span class="pf-c-tree-view__node-toggle">
1574
1666
  <span class="pf-c-tree-view__node-toggle-icon">
1575
1667
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1576
1668
  </span>
1577
- </div>
1669
+ </span>
1670
+
1578
1671
  <span class="pf-c-tree-view__node-text">Application launcher</span>
1579
- </div>
1672
+ </span>
1580
1673
  </button>
1674
+
1581
1675
  <div class="pf-c-tree-view__action">
1582
1676
  <button
1583
1677
  class="pf-c-button pf-m-plain"
@@ -1597,15 +1691,17 @@ beta: true
1597
1691
  >
1598
1692
  <div class="pf-c-tree-view__content">
1599
1693
  <button class="pf-c-tree-view__node">
1600
- <div class="pf-c-tree-view__node-container">
1601
- <div class="pf-c-tree-view__node-toggle">
1694
+ <span class="pf-c-tree-view__node-container">
1695
+ <span class="pf-c-tree-view__node-toggle">
1602
1696
  <span class="pf-c-tree-view__node-toggle-icon">
1603
1697
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1604
1698
  </span>
1605
- </div>
1699
+ </span>
1700
+
1606
1701
  <span class="pf-c-tree-view__node-text">Application 1</span>
1607
- </div>
1702
+ </span>
1608
1703
  </button>
1704
+
1609
1705
  <div class="pf-c-tree-view__action">
1610
1706
  <button
1611
1707
  class="pf-c-button pf-m-plain"
@@ -1620,18 +1716,18 @@ beta: true
1620
1716
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
1621
1717
  <div class="pf-c-tree-view__content">
1622
1718
  <button class="pf-c-tree-view__node">
1623
- <div class="pf-c-tree-view__node-container">
1719
+ <span class="pf-c-tree-view__node-container">
1624
1720
  <span class="pf-c-tree-view__node-text">Settings</span>
1625
- </div>
1721
+ </span>
1626
1722
  </button>
1627
1723
  </div>
1628
1724
  </li>
1629
1725
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
1630
1726
  <div class="pf-c-tree-view__content">
1631
1727
  <button class="pf-c-tree-view__node pf-m-current">
1632
- <div class="pf-c-tree-view__node-container">
1728
+ <span class="pf-c-tree-view__node-container">
1633
1729
  <span class="pf-c-tree-view__node-text">Current</span>
1634
- </div>
1730
+ </span>
1635
1731
  </button>
1636
1732
  </div>
1637
1733
  </li>
@@ -1645,15 +1741,17 @@ beta: true
1645
1741
  >
1646
1742
  <div class="pf-c-tree-view__content">
1647
1743
  <button class="pf-c-tree-view__node">
1648
- <div class="pf-c-tree-view__node-container">
1649
- <div class="pf-c-tree-view__node-toggle">
1744
+ <span class="pf-c-tree-view__node-container">
1745
+ <span class="pf-c-tree-view__node-toggle">
1650
1746
  <span class="pf-c-tree-view__node-toggle-icon">
1651
1747
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1652
1748
  </span>
1653
- </div>
1749
+ </span>
1750
+
1654
1751
  <span class="pf-c-tree-view__node-text">Application 2</span>
1655
- </div>
1752
+ </span>
1656
1753
  </button>
1754
+
1657
1755
  <div class="pf-c-tree-view__action">
1658
1756
  <button
1659
1757
  class="pf-c-button pf-m-plain"
@@ -1673,14 +1771,15 @@ beta: true
1673
1771
  >
1674
1772
  <div class="pf-c-tree-view__content">
1675
1773
  <button class="pf-c-tree-view__node">
1676
- <div class="pf-c-tree-view__node-container">
1677
- <div class="pf-c-tree-view__node-toggle">
1774
+ <span class="pf-c-tree-view__node-container">
1775
+ <span class="pf-c-tree-view__node-toggle">
1678
1776
  <span class="pf-c-tree-view__node-toggle-icon">
1679
1777
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1680
1778
  </span>
1681
- </div>
1779
+ </span>
1780
+
1682
1781
  <span class="pf-c-tree-view__node-text">Settings</span>
1683
- </div>
1782
+ </span>
1684
1783
  </button>
1685
1784
  </div>
1686
1785
  </li>
@@ -1692,14 +1791,15 @@ beta: true
1692
1791
  >
1693
1792
  <div class="pf-c-tree-view__content">
1694
1793
  <button class="pf-c-tree-view__node">
1695
- <div class="pf-c-tree-view__node-container">
1696
- <div class="pf-c-tree-view__node-toggle">
1794
+ <span class="pf-c-tree-view__node-container">
1795
+ <span class="pf-c-tree-view__node-toggle">
1697
1796
  <span class="pf-c-tree-view__node-toggle-icon">
1698
1797
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1699
1798
  </span>
1700
- </div>
1799
+ </span>
1800
+
1701
1801
  <span class="pf-c-tree-view__node-text">Loader</span>
1702
- </div>
1802
+ </span>
1703
1803
  </button>
1704
1804
  </div>
1705
1805
  <ul class="pf-c-tree-view__list" role="group">
@@ -1711,14 +1811,15 @@ beta: true
1711
1811
  >
1712
1812
  <div class="pf-c-tree-view__content">
1713
1813
  <button class="pf-c-tree-view__node">
1714
- <div class="pf-c-tree-view__node-container">
1715
- <div class="pf-c-tree-view__node-toggle">
1814
+ <span class="pf-c-tree-view__node-container">
1815
+ <span class="pf-c-tree-view__node-toggle">
1716
1816
  <span class="pf-c-tree-view__node-toggle-icon">
1717
1817
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1718
1818
  </span>
1719
- </div>
1819
+ </span>
1820
+
1720
1821
  <span class="pf-c-tree-view__node-text">Loader app 1</span>
1721
- </div>
1822
+ </span>
1722
1823
  </button>
1723
1824
  </div>
1724
1825
  </li>
@@ -1729,9 +1830,9 @@ beta: true
1729
1830
  >
1730
1831
  <div class="pf-c-tree-view__content">
1731
1832
  <button class="pf-c-tree-view__node">
1732
- <div class="pf-c-tree-view__node-container">
1833
+ <span class="pf-c-tree-view__node-container">
1733
1834
  <span class="pf-c-tree-view__node-text">Loader app 2</span>
1734
- </div>
1835
+ </span>
1735
1836
  </button>
1736
1837
  </div>
1737
1838
  </li>
@@ -1742,9 +1843,9 @@ beta: true
1742
1843
  >
1743
1844
  <div class="pf-c-tree-view__content">
1744
1845
  <button class="pf-c-tree-view__node">
1745
- <div class="pf-c-tree-view__node-container">
1846
+ <span class="pf-c-tree-view__node-container">
1746
1847
  <span class="pf-c-tree-view__node-text">Loader app 3</span>
1747
- </div>
1848
+ </span>
1748
1849
  </button>
1749
1850
  </div>
1750
1851
  </li>
@@ -1762,14 +1863,15 @@ beta: true
1762
1863
  >
1763
1864
  <div class="pf-c-tree-view__content">
1764
1865
  <button class="pf-c-tree-view__node">
1765
- <div class="pf-c-tree-view__node-container">
1766
- <div class="pf-c-tree-view__node-toggle">
1866
+ <span class="pf-c-tree-view__node-container">
1867
+ <span class="pf-c-tree-view__node-toggle">
1767
1868
  <span class="pf-c-tree-view__node-toggle-icon">
1768
1869
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1769
1870
  </span>
1770
- </div>
1871
+ </span>
1872
+
1771
1873
  <span class="pf-c-tree-view__node-text">Cost management</span>
1772
- </div>
1874
+ </span>
1773
1875
  </button>
1774
1876
  </div>
1775
1877
  </li>
@@ -1781,14 +1883,15 @@ beta: true
1781
1883
  >
1782
1884
  <div class="pf-c-tree-view__content">
1783
1885
  <button class="pf-c-tree-view__node">
1784
- <div class="pf-c-tree-view__node-container">
1785
- <div class="pf-c-tree-view__node-toggle">
1886
+ <span class="pf-c-tree-view__node-container">
1887
+ <span class="pf-c-tree-view__node-toggle">
1786
1888
  <span class="pf-c-tree-view__node-toggle-icon">
1787
1889
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1788
1890
  </span>
1789
- </div>
1891
+ </span>
1892
+
1790
1893
  <span class="pf-c-tree-view__node-text">Sources</span>
1791
- </div>
1894
+ </span>
1792
1895
  </button>
1793
1896
  </div>
1794
1897
  </li>
@@ -1800,17 +1903,19 @@ beta: true
1800
1903
  >
1801
1904
  <div class="pf-c-tree-view__content">
1802
1905
  <button class="pf-c-tree-view__node">
1803
- <div class="pf-c-tree-view__node-container">
1804
- <div class="pf-c-tree-view__node-toggle">
1906
+ <span class="pf-c-tree-view__node-container">
1907
+ <span class="pf-c-tree-view__node-toggle">
1805
1908
  <span class="pf-c-tree-view__node-toggle-icon">
1806
1909
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1807
1910
  </span>
1808
- </div>
1911
+ </span>
1912
+
1809
1913
  <span
1810
1914
  class="pf-c-tree-view__node-text"
1811
1915
  >This is a really really really long folder name that overflows from the width of the container.</span>
1812
- </div>
1916
+ </span>
1813
1917
  </button>
1918
+
1814
1919
  <div class="pf-c-tree-view__action">
1815
1920
  <div class="pf-c-dropdown">
1816
1921
  <button
@@ -1875,14 +1980,15 @@ beta: true
1875
1980
  >
1876
1981
  <div class="pf-c-tree-view__content">
1877
1982
  <button class="pf-c-tree-view__node">
1878
- <div class="pf-c-tree-view__node-container">
1879
- <div class="pf-c-tree-view__node-toggle">
1983
+ <span class="pf-c-tree-view__node-container">
1984
+ <span class="pf-c-tree-view__node-toggle">
1880
1985
  <span class="pf-c-tree-view__node-toggle-icon">
1881
1986
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1882
1987
  </span>
1883
- </div>
1988
+ </span>
1989
+
1884
1990
  <span class="pf-c-tree-view__node-text">Application launcher</span>
1885
- </div>
1991
+ </span>
1886
1992
  </button>
1887
1993
  </div>
1888
1994
  <ul class="pf-c-tree-view__list" role="group">
@@ -1894,32 +2000,33 @@ beta: true
1894
2000
  >
1895
2001
  <div class="pf-c-tree-view__content">
1896
2002
  <button class="pf-c-tree-view__node">
1897
- <div class="pf-c-tree-view__node-container">
1898
- <div class="pf-c-tree-view__node-toggle">
2003
+ <span class="pf-c-tree-view__node-container">
2004
+ <span class="pf-c-tree-view__node-toggle">
1899
2005
  <span class="pf-c-tree-view__node-toggle-icon">
1900
2006
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1901
2007
  </span>
1902
- </div>
2008
+ </span>
2009
+
1903
2010
  <span class="pf-c-tree-view__node-text">Application 1</span>
1904
- </div>
2011
+ </span>
1905
2012
  </button>
1906
2013
  </div>
1907
2014
  <ul class="pf-c-tree-view__list" role="group">
1908
2015
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
1909
2016
  <div class="pf-c-tree-view__content">
1910
2017
  <button class="pf-c-tree-view__node">
1911
- <div class="pf-c-tree-view__node-container">
2018
+ <span class="pf-c-tree-view__node-container">
1912
2019
  <span class="pf-c-tree-view__node-text">Settings</span>
1913
- </div>
2020
+ </span>
1914
2021
  </button>
1915
2022
  </div>
1916
2023
  </li>
1917
2024
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
1918
2025
  <div class="pf-c-tree-view__content">
1919
2026
  <button class="pf-c-tree-view__node pf-m-current">
1920
- <div class="pf-c-tree-view__node-container">
2027
+ <span class="pf-c-tree-view__node-container">
1921
2028
  <span class="pf-c-tree-view__node-text">Current</span>
1922
- </div>
2029
+ </span>
1923
2030
  </button>
1924
2031
  </div>
1925
2032
  </li>
@@ -1931,14 +2038,15 @@ beta: true
1931
2038
  >
1932
2039
  <div class="pf-c-tree-view__content">
1933
2040
  <button class="pf-c-tree-view__node">
1934
- <div class="pf-c-tree-view__node-container">
1935
- <div class="pf-c-tree-view__node-toggle">
2041
+ <span class="pf-c-tree-view__node-container">
2042
+ <span class="pf-c-tree-view__node-toggle">
1936
2043
  <span class="pf-c-tree-view__node-toggle-icon">
1937
2044
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1938
2045
  </span>
1939
- </div>
2046
+ </span>
2047
+
1940
2048
  <span class="pf-c-tree-view__node-text">Loader</span>
1941
- </div>
2049
+ </span>
1942
2050
  </button>
1943
2051
  </div>
1944
2052
  </li>
@@ -1952,23 +2060,24 @@ beta: true
1952
2060
  >
1953
2061
  <div class="pf-c-tree-view__content">
1954
2062
  <button class="pf-c-tree-view__node">
1955
- <div class="pf-c-tree-view__node-container">
1956
- <div class="pf-c-tree-view__node-toggle">
2063
+ <span class="pf-c-tree-view__node-container">
2064
+ <span class="pf-c-tree-view__node-toggle">
1957
2065
  <span class="pf-c-tree-view__node-toggle-icon">
1958
2066
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1959
2067
  </span>
1960
- </div>
2068
+ </span>
2069
+
1961
2070
  <span class="pf-c-tree-view__node-text">Application 2</span>
1962
- </div>
2071
+ </span>
1963
2072
  </button>
1964
2073
  </div>
1965
2074
  <ul class="pf-c-tree-view__list" role="group">
1966
2075
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
1967
2076
  <div class="pf-c-tree-view__content">
1968
2077
  <button class="pf-c-tree-view__node">
1969
- <div class="pf-c-tree-view__node-container">
2078
+ <span class="pf-c-tree-view__node-container">
1970
2079
  <span class="pf-c-tree-view__node-text">Settings</span>
1971
- </div>
2080
+ </span>
1972
2081
  </button>
1973
2082
  </div>
1974
2083
  </li>
@@ -1980,14 +2089,15 @@ beta: true
1980
2089
  >
1981
2090
  <div class="pf-c-tree-view__content">
1982
2091
  <button class="pf-c-tree-view__node">
1983
- <div class="pf-c-tree-view__node-container">
1984
- <div class="pf-c-tree-view__node-toggle">
2092
+ <span class="pf-c-tree-view__node-container">
2093
+ <span class="pf-c-tree-view__node-toggle">
1985
2094
  <span class="pf-c-tree-view__node-toggle-icon">
1986
2095
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1987
2096
  </span>
1988
- </div>
2097
+ </span>
2098
+
1989
2099
  <span class="pf-c-tree-view__node-text">Settings</span>
1990
- </div>
2100
+ </span>
1991
2101
  </button>
1992
2102
  </div>
1993
2103
  </li>
@@ -1999,14 +2109,15 @@ beta: true
1999
2109
  >
2000
2110
  <div class="pf-c-tree-view__content">
2001
2111
  <button class="pf-c-tree-view__node">
2002
- <div class="pf-c-tree-view__node-container">
2003
- <div class="pf-c-tree-view__node-toggle">
2112
+ <span class="pf-c-tree-view__node-container">
2113
+ <span class="pf-c-tree-view__node-toggle">
2004
2114
  <span class="pf-c-tree-view__node-toggle-icon">
2005
2115
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2006
2116
  </span>
2007
- </div>
2117
+ </span>
2118
+
2008
2119
  <span class="pf-c-tree-view__node-text">Loader</span>
2009
- </div>
2120
+ </span>
2010
2121
  </button>
2011
2122
  </div>
2012
2123
  <ul class="pf-c-tree-view__list" role="group">
@@ -2018,14 +2129,15 @@ beta: true
2018
2129
  >
2019
2130
  <div class="pf-c-tree-view__content">
2020
2131
  <button class="pf-c-tree-view__node">
2021
- <div class="pf-c-tree-view__node-container">
2022
- <div class="pf-c-tree-view__node-toggle">
2132
+ <span class="pf-c-tree-view__node-container">
2133
+ <span class="pf-c-tree-view__node-toggle">
2023
2134
  <span class="pf-c-tree-view__node-toggle-icon">
2024
2135
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2025
2136
  </span>
2026
- </div>
2137
+ </span>
2138
+
2027
2139
  <span class="pf-c-tree-view__node-text">Loader app 1</span>
2028
- </div>
2140
+ </span>
2029
2141
  </button>
2030
2142
  </div>
2031
2143
  </li>
@@ -2036,9 +2148,9 @@ beta: true
2036
2148
  >
2037
2149
  <div class="pf-c-tree-view__content">
2038
2150
  <button class="pf-c-tree-view__node">
2039
- <div class="pf-c-tree-view__node-container">
2151
+ <span class="pf-c-tree-view__node-container">
2040
2152
  <span class="pf-c-tree-view__node-text">Loader app 2</span>
2041
- </div>
2153
+ </span>
2042
2154
  </button>
2043
2155
  </div>
2044
2156
  </li>
@@ -2049,9 +2161,9 @@ beta: true
2049
2161
  >
2050
2162
  <div class="pf-c-tree-view__content">
2051
2163
  <button class="pf-c-tree-view__node">
2052
- <div class="pf-c-tree-view__node-container">
2164
+ <span class="pf-c-tree-view__node-container">
2053
2165
  <span class="pf-c-tree-view__node-text">Loader app 3</span>
2054
- </div>
2166
+ </span>
2055
2167
  </button>
2056
2168
  </div>
2057
2169
  </li>
@@ -2064,9 +2176,9 @@ beta: true
2064
2176
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2065
2177
  <div class="pf-c-tree-view__content">
2066
2178
  <button class="pf-c-tree-view__node">
2067
- <div class="pf-c-tree-view__node-container">
2179
+ <span class="pf-c-tree-view__node-container">
2068
2180
  <span class="pf-c-tree-view__node-text">Cost management</span>
2069
- </div>
2181
+ </span>
2070
2182
  </button>
2071
2183
  </div>
2072
2184
  </li>
@@ -2078,25 +2190,26 @@ beta: true
2078
2190
  >
2079
2191
  <div class="pf-c-tree-view__content">
2080
2192
  <button class="pf-c-tree-view__node">
2081
- <div class="pf-c-tree-view__node-container">
2082
- <div class="pf-c-tree-view__node-toggle">
2193
+ <span class="pf-c-tree-view__node-container">
2194
+ <span class="pf-c-tree-view__node-toggle">
2083
2195
  <span class="pf-c-tree-view__node-toggle-icon">
2084
2196
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2085
2197
  </span>
2086
- </div>
2198
+ </span>
2199
+
2087
2200
  <span class="pf-c-tree-view__node-text">Sources</span>
2088
- </div>
2201
+ </span>
2089
2202
  </button>
2090
2203
  </div>
2091
2204
  </li>
2092
2205
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2093
2206
  <div class="pf-c-tree-view__content">
2094
2207
  <button class="pf-c-tree-view__node">
2095
- <div class="pf-c-tree-view__node-container">
2208
+ <span class="pf-c-tree-view__node-container">
2096
2209
  <span
2097
2210
  class="pf-c-tree-view__node-text"
2098
2211
  >This is a really really really long folder name that overflows from the width of the container.</span>
2099
- </div>
2212
+ </span>
2100
2213
  </button>
2101
2214
  </div>
2102
2215
  </li>
@@ -2105,10 +2218,10 @@ beta: true
2105
2218
 
2106
2219
  ```
2107
2220
 
2108
- ### Guides
2221
+ ### With selectable, expandable nodes
2109
2222
 
2110
2223
  ```html
2111
- <div class="pf-c-tree-view pf-m-guides">
2224
+ <div class="pf-c-tree-view">
2112
2225
  <ul class="pf-c-tree-view__list" role="tree">
2113
2226
  <li
2114
2227
  class="pf-c-tree-view__list-item pf-m-expanded"
@@ -2117,15 +2230,16 @@ beta: true
2117
2230
  tabindex="0"
2118
2231
  >
2119
2232
  <div class="pf-c-tree-view__content">
2120
- <button class="pf-c-tree-view__node">
2121
- <div class="pf-c-tree-view__node-container">
2122
- <div class="pf-c-tree-view__node-toggle">
2233
+ <button class="pf-c-tree-view__node pf-m-selectable">
2234
+ <span class="pf-c-tree-view__node-container">
2235
+ <span class="pf-c-tree-view__node-toggle">
2123
2236
  <span class="pf-c-tree-view__node-toggle-icon">
2124
2237
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2125
2238
  </span>
2126
- </div>
2239
+ </span>
2240
+
2127
2241
  <span class="pf-c-tree-view__node-text">Application launcher</span>
2128
- </div>
2242
+ </span>
2129
2243
  </button>
2130
2244
  </div>
2131
2245
  <ul class="pf-c-tree-view__list" role="group">
@@ -2136,33 +2250,34 @@ beta: true
2136
2250
  tabindex="0"
2137
2251
  >
2138
2252
  <div class="pf-c-tree-view__content">
2139
- <button class="pf-c-tree-view__node">
2140
- <div class="pf-c-tree-view__node-container">
2141
- <div class="pf-c-tree-view__node-toggle">
2253
+ <button class="pf-c-tree-view__node pf-m-selectable">
2254
+ <span class="pf-c-tree-view__node-container">
2255
+ <span class="pf-c-tree-view__node-toggle">
2142
2256
  <span class="pf-c-tree-view__node-toggle-icon">
2143
2257
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2144
2258
  </span>
2145
- </div>
2259
+ </span>
2260
+
2146
2261
  <span class="pf-c-tree-view__node-text">Application 1</span>
2147
- </div>
2262
+ </span>
2148
2263
  </button>
2149
2264
  </div>
2150
2265
  <ul class="pf-c-tree-view__list" role="group">
2151
2266
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2152
2267
  <div class="pf-c-tree-view__content">
2153
2268
  <button class="pf-c-tree-view__node">
2154
- <div class="pf-c-tree-view__node-container">
2269
+ <span class="pf-c-tree-view__node-container">
2155
2270
  <span class="pf-c-tree-view__node-text">Settings</span>
2156
- </div>
2271
+ </span>
2157
2272
  </button>
2158
2273
  </div>
2159
2274
  </li>
2160
2275
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2161
2276
  <div class="pf-c-tree-view__content">
2162
- <button class="pf-c-tree-view__node pf-m-current">
2163
- <div class="pf-c-tree-view__node-container">
2277
+ <button class="pf-c-tree-view__node">
2278
+ <span class="pf-c-tree-view__node-container">
2164
2279
  <span class="pf-c-tree-view__node-text">Current</span>
2165
- </div>
2280
+ </span>
2166
2281
  </button>
2167
2282
  </div>
2168
2283
  </li>
@@ -2173,15 +2288,16 @@ beta: true
2173
2288
  tabindex="0"
2174
2289
  >
2175
2290
  <div class="pf-c-tree-view__content">
2176
- <button class="pf-c-tree-view__node">
2177
- <div class="pf-c-tree-view__node-container">
2178
- <div class="pf-c-tree-view__node-toggle">
2291
+ <button class="pf-c-tree-view__node pf-m-selectable">
2292
+ <span class="pf-c-tree-view__node-container">
2293
+ <span class="pf-c-tree-view__node-toggle">
2179
2294
  <span class="pf-c-tree-view__node-toggle-icon">
2180
2295
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2181
2296
  </span>
2182
- </div>
2297
+ </span>
2298
+
2183
2299
  <span class="pf-c-tree-view__node-text">Loader</span>
2184
- </div>
2300
+ </span>
2185
2301
  </button>
2186
2302
  </div>
2187
2303
  </li>
@@ -2194,24 +2310,25 @@ beta: true
2194
2310
  tabindex="0"
2195
2311
  >
2196
2312
  <div class="pf-c-tree-view__content">
2197
- <button class="pf-c-tree-view__node">
2198
- <div class="pf-c-tree-view__node-container">
2199
- <div class="pf-c-tree-view__node-toggle">
2313
+ <button class="pf-c-tree-view__node pf-m-selectable">
2314
+ <span class="pf-c-tree-view__node-container">
2315
+ <span class="pf-c-tree-view__node-toggle">
2200
2316
  <span class="pf-c-tree-view__node-toggle-icon">
2201
2317
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2202
2318
  </span>
2203
- </div>
2319
+ </span>
2320
+
2204
2321
  <span class="pf-c-tree-view__node-text">Application 2</span>
2205
- </div>
2322
+ </span>
2206
2323
  </button>
2207
2324
  </div>
2208
2325
  <ul class="pf-c-tree-view__list" role="group">
2209
2326
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2210
2327
  <div class="pf-c-tree-view__content">
2211
2328
  <button class="pf-c-tree-view__node">
2212
- <div class="pf-c-tree-view__node-container">
2329
+ <span class="pf-c-tree-view__node-container">
2213
2330
  <span class="pf-c-tree-view__node-text">Settings</span>
2214
- </div>
2331
+ </span>
2215
2332
  </button>
2216
2333
  </div>
2217
2334
  </li>
@@ -2222,15 +2339,16 @@ beta: true
2222
2339
  tabindex="0"
2223
2340
  >
2224
2341
  <div class="pf-c-tree-view__content">
2225
- <button class="pf-c-tree-view__node">
2226
- <div class="pf-c-tree-view__node-container">
2227
- <div class="pf-c-tree-view__node-toggle">
2342
+ <button class="pf-c-tree-view__node pf-m-selectable">
2343
+ <span class="pf-c-tree-view__node-container">
2344
+ <span class="pf-c-tree-view__node-toggle">
2228
2345
  <span class="pf-c-tree-view__node-toggle-icon">
2229
2346
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2230
2347
  </span>
2231
- </div>
2348
+ </span>
2349
+
2232
2350
  <span class="pf-c-tree-view__node-text">Settings</span>
2233
- </div>
2351
+ </span>
2234
2352
  </button>
2235
2353
  </div>
2236
2354
  </li>
@@ -2241,15 +2359,16 @@ beta: true
2241
2359
  tabindex="0"
2242
2360
  >
2243
2361
  <div class="pf-c-tree-view__content">
2244
- <button class="pf-c-tree-view__node">
2245
- <div class="pf-c-tree-view__node-container">
2246
- <div class="pf-c-tree-view__node-toggle">
2362
+ <button class="pf-c-tree-view__node pf-m-selectable">
2363
+ <span class="pf-c-tree-view__node-container">
2364
+ <span class="pf-c-tree-view__node-toggle">
2247
2365
  <span class="pf-c-tree-view__node-toggle-icon">
2248
2366
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2249
2367
  </span>
2250
- </div>
2368
+ </span>
2369
+
2251
2370
  <span class="pf-c-tree-view__node-text">Loader</span>
2252
- </div>
2371
+ </span>
2253
2372
  </button>
2254
2373
  </div>
2255
2374
  <ul class="pf-c-tree-view__list" role="group">
@@ -2260,15 +2379,16 @@ beta: true
2260
2379
  tabindex="0"
2261
2380
  >
2262
2381
  <div class="pf-c-tree-view__content">
2263
- <button class="pf-c-tree-view__node">
2264
- <div class="pf-c-tree-view__node-container">
2265
- <div class="pf-c-tree-view__node-toggle">
2382
+ <button class="pf-c-tree-view__node pf-m-selectable">
2383
+ <span class="pf-c-tree-view__node-container">
2384
+ <span class="pf-c-tree-view__node-toggle">
2266
2385
  <span class="pf-c-tree-view__node-toggle-icon">
2267
2386
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2268
2387
  </span>
2269
- </div>
2388
+ </span>
2389
+
2270
2390
  <span class="pf-c-tree-view__node-text">Loader app 1</span>
2271
- </div>
2391
+ </span>
2272
2392
  </button>
2273
2393
  </div>
2274
2394
  </li>
@@ -2279,9 +2399,9 @@ beta: true
2279
2399
  >
2280
2400
  <div class="pf-c-tree-view__content">
2281
2401
  <button class="pf-c-tree-view__node">
2282
- <div class="pf-c-tree-view__node-container">
2402
+ <span class="pf-c-tree-view__node-container">
2283
2403
  <span class="pf-c-tree-view__node-text">Loader app 2</span>
2284
- </div>
2404
+ </span>
2285
2405
  </button>
2286
2406
  </div>
2287
2407
  </li>
@@ -2292,9 +2412,9 @@ beta: true
2292
2412
  >
2293
2413
  <div class="pf-c-tree-view__content">
2294
2414
  <button class="pf-c-tree-view__node">
2295
- <div class="pf-c-tree-view__node-container">
2415
+ <span class="pf-c-tree-view__node-container">
2296
2416
  <span class="pf-c-tree-view__node-text">Loader app 3</span>
2297
- </div>
2417
+ </span>
2298
2418
  </button>
2299
2419
  </div>
2300
2420
  </li>
@@ -2311,15 +2431,16 @@ beta: true
2311
2431
  tabindex="0"
2312
2432
  >
2313
2433
  <div class="pf-c-tree-view__content">
2314
- <button class="pf-c-tree-view__node">
2315
- <div class="pf-c-tree-view__node-container">
2316
- <div class="pf-c-tree-view__node-toggle">
2434
+ <button class="pf-c-tree-view__node pf-m-selectable">
2435
+ <span class="pf-c-tree-view__node-container">
2436
+ <span class="pf-c-tree-view__node-toggle">
2317
2437
  <span class="pf-c-tree-view__node-toggle-icon">
2318
2438
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2319
2439
  </span>
2320
- </div>
2440
+ </span>
2441
+
2321
2442
  <span class="pf-c-tree-view__node-text">Cost management</span>
2322
- </div>
2443
+ </span>
2323
2444
  </button>
2324
2445
  </div>
2325
2446
  </li>
@@ -2330,15 +2451,16 @@ beta: true
2330
2451
  tabindex="0"
2331
2452
  >
2332
2453
  <div class="pf-c-tree-view__content">
2333
- <button class="pf-c-tree-view__node">
2334
- <div class="pf-c-tree-view__node-container">
2335
- <div class="pf-c-tree-view__node-toggle">
2454
+ <button class="pf-c-tree-view__node pf-m-selectable">
2455
+ <span class="pf-c-tree-view__node-container">
2456
+ <span class="pf-c-tree-view__node-toggle">
2336
2457
  <span class="pf-c-tree-view__node-toggle-icon">
2337
2458
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2338
2459
  </span>
2339
- </div>
2460
+ </span>
2461
+
2340
2462
  <span class="pf-c-tree-view__node-text">Sources</span>
2341
- </div>
2463
+ </span>
2342
2464
  </button>
2343
2465
  </div>
2344
2466
  </li>
@@ -2349,17 +2471,18 @@ beta: true
2349
2471
  tabindex="0"
2350
2472
  >
2351
2473
  <div class="pf-c-tree-view__content">
2352
- <button class="pf-c-tree-view__node">
2353
- <div class="pf-c-tree-view__node-container">
2354
- <div class="pf-c-tree-view__node-toggle">
2474
+ <button class="pf-c-tree-view__node pf-m-selectable">
2475
+ <span class="pf-c-tree-view__node-container">
2476
+ <span class="pf-c-tree-view__node-toggle">
2355
2477
  <span class="pf-c-tree-view__node-toggle-icon">
2356
2478
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2357
2479
  </span>
2358
- </div>
2480
+ </span>
2481
+
2359
2482
  <span
2360
2483
  class="pf-c-tree-view__node-text"
2361
2484
  >This is a really really really long folder name that overflows from the width of the container.</span>
2362
- </div>
2485
+ </span>
2363
2486
  </button>
2364
2487
  </div>
2365
2488
  </li>
@@ -2368,49 +2491,322 @@ beta: true
2368
2491
 
2369
2492
  ```
2370
2493
 
2371
- ### Compact
2494
+ ### Guides
2372
2495
 
2373
2496
  ```html
2374
- <div class="pf-c-tree-view pf-m-compact">
2497
+ <div class="pf-c-tree-view pf-m-guides">
2375
2498
  <ul class="pf-c-tree-view__list" role="tree">
2376
- <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2499
+ <li
2500
+ class="pf-c-tree-view__list-item pf-m-expanded"
2501
+ role="treeitem"
2502
+ aria-expanded="true"
2503
+ tabindex="0"
2504
+ >
2377
2505
  <div class="pf-c-tree-view__content">
2378
- <div class="pf-c-tree-view__node" tabindex="0">
2379
- <div class="pf-c-tree-view__node-container">
2380
- <div class="pf-c-tree-view__node-content">
2381
- <span class="pf-c-tree-view__node-title">apiVersion</span>
2382
- <div
2383
- class="pf-c-tree-view__node-text"
2384
- >APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.</div>
2385
- </div>
2386
- </div>
2387
- </div>
2506
+ <button class="pf-c-tree-view__node">
2507
+ <span class="pf-c-tree-view__node-container">
2508
+ <span class="pf-c-tree-view__node-toggle">
2509
+ <span class="pf-c-tree-view__node-toggle-icon">
2510
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2511
+ </span>
2512
+ </span>
2513
+
2514
+ <span class="pf-c-tree-view__node-text">Application launcher</span>
2515
+ </span>
2516
+ </button>
2388
2517
  </div>
2389
- </li>
2390
- <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2391
- <div class="pf-c-tree-view__content">
2392
- <div class="pf-c-tree-view__node" tabindex="0">
2393
- <div class="pf-c-tree-view__node-container">
2394
- <div class="pf-c-tree-view__node-content">
2518
+ <ul class="pf-c-tree-view__list" role="group">
2519
+ <li
2520
+ class="pf-c-tree-view__list-item pf-m-expanded"
2521
+ role="treeitem"
2522
+ aria-expanded="true"
2523
+ tabindex="0"
2524
+ >
2525
+ <div class="pf-c-tree-view__content">
2526
+ <button class="pf-c-tree-view__node">
2527
+ <span class="pf-c-tree-view__node-container">
2528
+ <span class="pf-c-tree-view__node-toggle">
2529
+ <span class="pf-c-tree-view__node-toggle-icon">
2530
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2531
+ </span>
2532
+ </span>
2533
+
2534
+ <span class="pf-c-tree-view__node-text">Application 1</span>
2535
+ </span>
2536
+ </button>
2537
+ </div>
2538
+ <ul class="pf-c-tree-view__list" role="group">
2539
+ <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2540
+ <div class="pf-c-tree-view__content">
2541
+ <button class="pf-c-tree-view__node">
2542
+ <span class="pf-c-tree-view__node-container">
2543
+ <span class="pf-c-tree-view__node-text">Settings</span>
2544
+ </span>
2545
+ </button>
2546
+ </div>
2547
+ </li>
2548
+ <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2549
+ <div class="pf-c-tree-view__content">
2550
+ <button class="pf-c-tree-view__node pf-m-current">
2551
+ <span class="pf-c-tree-view__node-container">
2552
+ <span class="pf-c-tree-view__node-text">Current</span>
2553
+ </span>
2554
+ </button>
2555
+ </div>
2556
+ </li>
2557
+ <li
2558
+ class="pf-c-tree-view__list-item"
2559
+ role="treeitem"
2560
+ aria-expanded="false"
2561
+ tabindex="0"
2562
+ >
2563
+ <div class="pf-c-tree-view__content">
2564
+ <button class="pf-c-tree-view__node">
2565
+ <span class="pf-c-tree-view__node-container">
2566
+ <span class="pf-c-tree-view__node-toggle">
2567
+ <span class="pf-c-tree-view__node-toggle-icon">
2568
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2569
+ </span>
2570
+ </span>
2571
+
2572
+ <span class="pf-c-tree-view__node-text">Loader</span>
2573
+ </span>
2574
+ </button>
2575
+ </div>
2576
+ </li>
2577
+ </ul>
2578
+ </li>
2579
+ <li
2580
+ class="pf-c-tree-view__list-item pf-m-expanded"
2581
+ role="treeitem"
2582
+ aria-expanded="true"
2583
+ tabindex="0"
2584
+ >
2585
+ <div class="pf-c-tree-view__content">
2586
+ <button class="pf-c-tree-view__node">
2587
+ <span class="pf-c-tree-view__node-container">
2588
+ <span class="pf-c-tree-view__node-toggle">
2589
+ <span class="pf-c-tree-view__node-toggle-icon">
2590
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2591
+ </span>
2592
+ </span>
2593
+
2594
+ <span class="pf-c-tree-view__node-text">Application 2</span>
2595
+ </span>
2596
+ </button>
2597
+ </div>
2598
+ <ul class="pf-c-tree-view__list" role="group">
2599
+ <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2600
+ <div class="pf-c-tree-view__content">
2601
+ <button class="pf-c-tree-view__node">
2602
+ <span class="pf-c-tree-view__node-container">
2603
+ <span class="pf-c-tree-view__node-text">Settings</span>
2604
+ </span>
2605
+ </button>
2606
+ </div>
2607
+ </li>
2608
+ <li
2609
+ class="pf-c-tree-view__list-item"
2610
+ role="treeitem"
2611
+ aria-expanded="false"
2612
+ tabindex="0"
2613
+ >
2614
+ <div class="pf-c-tree-view__content">
2615
+ <button class="pf-c-tree-view__node">
2616
+ <span class="pf-c-tree-view__node-container">
2617
+ <span class="pf-c-tree-view__node-toggle">
2618
+ <span class="pf-c-tree-view__node-toggle-icon">
2619
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2620
+ </span>
2621
+ </span>
2622
+
2623
+ <span class="pf-c-tree-view__node-text">Settings</span>
2624
+ </span>
2625
+ </button>
2626
+ </div>
2627
+ </li>
2628
+ <li
2629
+ class="pf-c-tree-view__list-item pf-m-expanded"
2630
+ role="treeitem"
2631
+ aria-expanded="true"
2632
+ tabindex="0"
2633
+ >
2634
+ <div class="pf-c-tree-view__content">
2635
+ <button class="pf-c-tree-view__node">
2636
+ <span class="pf-c-tree-view__node-container">
2637
+ <span class="pf-c-tree-view__node-toggle">
2638
+ <span class="pf-c-tree-view__node-toggle-icon">
2639
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2640
+ </span>
2641
+ </span>
2642
+
2643
+ <span class="pf-c-tree-view__node-text">Loader</span>
2644
+ </span>
2645
+ </button>
2646
+ </div>
2647
+ <ul class="pf-c-tree-view__list" role="group">
2648
+ <li
2649
+ class="pf-c-tree-view__list-item"
2650
+ role="treeitem"
2651
+ aria-expanded="false"
2652
+ tabindex="0"
2653
+ >
2654
+ <div class="pf-c-tree-view__content">
2655
+ <button class="pf-c-tree-view__node">
2656
+ <span class="pf-c-tree-view__node-container">
2657
+ <span class="pf-c-tree-view__node-toggle">
2658
+ <span class="pf-c-tree-view__node-toggle-icon">
2659
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2660
+ </span>
2661
+ </span>
2662
+
2663
+ <span class="pf-c-tree-view__node-text">Loader app 1</span>
2664
+ </span>
2665
+ </button>
2666
+ </div>
2667
+ </li>
2668
+ <li
2669
+ class="pf-c-tree-view__list-item"
2670
+ role="treeitem"
2671
+ tabindex="-1"
2672
+ >
2673
+ <div class="pf-c-tree-view__content">
2674
+ <button class="pf-c-tree-view__node">
2675
+ <span class="pf-c-tree-view__node-container">
2676
+ <span class="pf-c-tree-view__node-text">Loader app 2</span>
2677
+ </span>
2678
+ </button>
2679
+ </div>
2680
+ </li>
2681
+ <li
2682
+ class="pf-c-tree-view__list-item"
2683
+ role="treeitem"
2684
+ tabindex="-1"
2685
+ >
2686
+ <div class="pf-c-tree-view__content">
2687
+ <button class="pf-c-tree-view__node">
2688
+ <span class="pf-c-tree-view__node-container">
2689
+ <span class="pf-c-tree-view__node-text">Loader app 3</span>
2690
+ </span>
2691
+ </button>
2692
+ </div>
2693
+ </li>
2694
+ </ul>
2695
+ </li>
2696
+ </ul>
2697
+ </li>
2698
+ </ul>
2699
+ </li>
2700
+ <li
2701
+ class="pf-c-tree-view__list-item"
2702
+ role="treeitem"
2703
+ aria-expanded="false"
2704
+ tabindex="0"
2705
+ >
2706
+ <div class="pf-c-tree-view__content">
2707
+ <button class="pf-c-tree-view__node">
2708
+ <span class="pf-c-tree-view__node-container">
2709
+ <span class="pf-c-tree-view__node-toggle">
2710
+ <span class="pf-c-tree-view__node-toggle-icon">
2711
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2712
+ </span>
2713
+ </span>
2714
+
2715
+ <span class="pf-c-tree-view__node-text">Cost management</span>
2716
+ </span>
2717
+ </button>
2718
+ </div>
2719
+ </li>
2720
+ <li
2721
+ class="pf-c-tree-view__list-item"
2722
+ role="treeitem"
2723
+ aria-expanded="false"
2724
+ tabindex="0"
2725
+ >
2726
+ <div class="pf-c-tree-view__content">
2727
+ <button class="pf-c-tree-view__node">
2728
+ <span class="pf-c-tree-view__node-container">
2729
+ <span class="pf-c-tree-view__node-toggle">
2730
+ <span class="pf-c-tree-view__node-toggle-icon">
2731
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2732
+ </span>
2733
+ </span>
2734
+
2735
+ <span class="pf-c-tree-view__node-text">Sources</span>
2736
+ </span>
2737
+ </button>
2738
+ </div>
2739
+ </li>
2740
+ <li
2741
+ class="pf-c-tree-view__list-item"
2742
+ role="treeitem"
2743
+ aria-expanded="false"
2744
+ tabindex="0"
2745
+ >
2746
+ <div class="pf-c-tree-view__content">
2747
+ <button class="pf-c-tree-view__node">
2748
+ <span class="pf-c-tree-view__node-container">
2749
+ <span class="pf-c-tree-view__node-toggle">
2750
+ <span class="pf-c-tree-view__node-toggle-icon">
2751
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2752
+ </span>
2753
+ </span>
2754
+
2755
+ <span
2756
+ class="pf-c-tree-view__node-text"
2757
+ >This is a really really really long folder name that overflows from the width of the container.</span>
2758
+ </span>
2759
+ </button>
2760
+ </div>
2761
+ </li>
2762
+ </ul>
2763
+ </div>
2764
+
2765
+ ```
2766
+
2767
+ ### Compact
2768
+
2769
+ ```html
2770
+ <div class="pf-c-tree-view pf-m-compact">
2771
+ <ul class="pf-c-tree-view__list" role="tree">
2772
+ <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2773
+ <div class="pf-c-tree-view__content">
2774
+ <button class="pf-c-tree-view__node">
2775
+ <span class="pf-c-tree-view__node-container">
2776
+ <span class="pf-c-tree-view__node-content">
2777
+ <span class="pf-c-tree-view__node-title">apiVersion</span>
2778
+ <span
2779
+ class="pf-c-tree-view__node-text"
2780
+ >APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.</span>
2781
+ </span>
2782
+ </span>
2783
+ </button>
2784
+ </div>
2785
+ </li>
2786
+ <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2787
+ <div class="pf-c-tree-view__content">
2788
+ <button class="pf-c-tree-view__node">
2789
+ <span class="pf-c-tree-view__node-container">
2790
+ <span class="pf-c-tree-view__node-content">
2395
2791
  <span class="pf-c-tree-view__node-title">kind</span>
2396
- <div
2792
+ <span
2397
2793
  class="pf-c-tree-view__node-text"
2398
- >Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:</div>
2399
- </div>
2400
- </div>
2401
- </div>
2794
+ >Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:</span>
2795
+ </span>
2796
+ </span>
2797
+ </button>
2402
2798
  </div>
2403
2799
  </li>
2404
2800
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2405
2801
  <div class="pf-c-tree-view__content">
2406
- <div class="pf-c-tree-view__node" tabindex="0">
2407
- <div class="pf-c-tree-view__node-container">
2408
- <div class="pf-c-tree-view__node-content">
2802
+ <button class="pf-c-tree-view__node">
2803
+ <span class="pf-c-tree-view__node-container">
2804
+ <span class="pf-c-tree-view__node-content">
2409
2805
  <span class="pf-c-tree-view__node-title">metadata</span>
2410
- <div class="pf-c-tree-view__node-text">Standard object metadata</div>
2411
- </div>
2412
- </div>
2413
- </div>
2806
+ <span class="pf-c-tree-view__node-text">Standard object metadata</span>
2807
+ </span>
2808
+ </span>
2809
+ </button>
2414
2810
  </div>
2415
2811
  </li>
2416
2812
  <li
@@ -2421,92 +2817,93 @@ beta: true
2421
2817
  >
2422
2818
  <div class="pf-c-tree-view__content">
2423
2819
  <button class="pf-c-tree-view__node">
2424
- <div class="pf-c-tree-view__node-container">
2425
- <div class="pf-c-tree-view__node-toggle">
2820
+ <span class="pf-c-tree-view__node-container">
2821
+ <span class="pf-c-tree-view__node-toggle">
2426
2822
  <span class="pf-c-tree-view__node-toggle-icon">
2427
2823
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2428
2824
  </span>
2429
- </div>
2430
- <div class="pf-c-tree-view__node-content">
2825
+ </span>
2826
+
2827
+ <span class="pf-c-tree-view__node-content">
2431
2828
  <span class="pf-c-tree-view__node-title">spec</span>
2432
- <div
2829
+ <span
2433
2830
  class="pf-c-tree-view__node-text"
2434
- >Specification of the desired behavior of deployment.</div>
2435
- </div>
2436
- </div>
2831
+ >Specification of the desired behavior of deployment.</span>
2832
+ </span>
2833
+ </span>
2437
2834
  </button>
2438
2835
  </div>
2439
2836
  <ul class="pf-c-tree-view__list" role="group">
2440
2837
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2441
2838
  <div class="pf-c-tree-view__content">
2442
- <div class="pf-c-tree-view__node" tabindex="0">
2443
- <div class="pf-c-tree-view__node-container">
2444
- <div class="pf-c-tree-view__node-content">
2839
+ <button class="pf-c-tree-view__node">
2840
+ <span class="pf-c-tree-view__node-container">
2841
+ <span class="pf-c-tree-view__node-content">
2445
2842
  <span class="pf-c-tree-view__node-title">minReadySeconds</span>
2446
2843
  <span
2447
2844
  class="pf-c-tree-view__node-text"
2448
2845
  >Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).</span>
2449
- </div>
2450
- </div>
2451
- </div>
2846
+ </span>
2847
+ </span>
2848
+ </button>
2452
2849
  </div>
2453
2850
  </li>
2454
2851
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2455
2852
  <div class="pf-c-tree-view__content">
2456
- <div class="pf-c-tree-view__node" tabindex="0">
2457
- <div class="pf-c-tree-view__node-container">
2458
- <div class="pf-c-tree-view__node-content">
2853
+ <button class="pf-c-tree-view__node">
2854
+ <span class="pf-c-tree-view__node-container">
2855
+ <span class="pf-c-tree-view__node-content">
2459
2856
  <span class="pf-c-tree-view__node-title">paused</span>
2460
2857
  <span
2461
2858
  class="pf-c-tree-view__node-text"
2462
2859
  >Indicates that the deployment is paused</span>
2463
- </div>
2464
- </div>
2465
- </div>
2860
+ </span>
2861
+ </span>
2862
+ </button>
2466
2863
  </div>
2467
2864
  </li>
2468
2865
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2469
2866
  <div class="pf-c-tree-view__content">
2470
- <div class="pf-c-tree-view__node" tabindex="0">
2471
- <div class="pf-c-tree-view__node-container">
2472
- <div class="pf-c-tree-view__node-content">
2867
+ <button class="pf-c-tree-view__node">
2868
+ <span class="pf-c-tree-view__node-container">
2869
+ <span class="pf-c-tree-view__node-content">
2473
2870
  <span
2474
2871
  class="pf-c-tree-view__node-title"
2475
2872
  >progressDeadlineSeconds</span>
2476
2873
  <span
2477
2874
  class="pf-c-tree-view__node-text"
2478
2875
  >The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.</span>
2479
- </div>
2480
- </div>
2481
- </div>
2876
+ </span>
2877
+ </span>
2878
+ </button>
2482
2879
  </div>
2483
2880
  </li>
2484
2881
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2485
2882
  <div class="pf-c-tree-view__content">
2486
- <div class="pf-c-tree-view__node" tabindex="0">
2487
- <div class="pf-c-tree-view__node-container">
2488
- <div class="pf-c-tree-view__node-content">
2883
+ <button class="pf-c-tree-view__node">
2884
+ <span class="pf-c-tree-view__node-container">
2885
+ <span class="pf-c-tree-view__node-content">
2489
2886
  <span class="pf-c-tree-view__node-title">replicas</span>
2490
2887
  <span
2491
2888
  class="pf-c-tree-view__node-text"
2492
2889
  >Number of desired pods. This is a pointer to distinguish between explicit zero and not specified. Defaults to 1.</span>
2493
- </div>
2494
- </div>
2495
- </div>
2890
+ </span>
2891
+ </span>
2892
+ </button>
2496
2893
  </div>
2497
2894
  </li>
2498
2895
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2499
2896
  <div class="pf-c-tree-view__content">
2500
- <div class="pf-c-tree-view__node" tabindex="0">
2501
- <div class="pf-c-tree-view__node-container">
2502
- <div class="pf-c-tree-view__node-content">
2897
+ <button class="pf-c-tree-view__node">
2898
+ <span class="pf-c-tree-view__node-container">
2899
+ <span class="pf-c-tree-view__node-content">
2503
2900
  <span class="pf-c-tree-view__node-title">revisionHistoryLimit</span>
2504
2901
  <span
2505
2902
  class="pf-c-tree-view__node-text"
2506
2903
  >The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.</span>
2507
- </div>
2508
- </div>
2509
- </div>
2904
+ </span>
2905
+ </span>
2906
+ </button>
2510
2907
  </div>
2511
2908
  </li>
2512
2909
  <li
@@ -2517,19 +2914,20 @@ beta: true
2517
2914
  >
2518
2915
  <div class="pf-c-tree-view__content">
2519
2916
  <button class="pf-c-tree-view__node">
2520
- <div class="pf-c-tree-view__node-container">
2521
- <div class="pf-c-tree-view__node-toggle">
2917
+ <span class="pf-c-tree-view__node-container">
2918
+ <span class="pf-c-tree-view__node-toggle">
2522
2919
  <span class="pf-c-tree-view__node-toggle-icon">
2523
2920
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2524
2921
  </span>
2525
- </div>
2526
- <div class="pf-c-tree-view__node-content">
2922
+ </span>
2923
+
2924
+ <span class="pf-c-tree-view__node-content">
2527
2925
  <span class="pf-c-tree-view__node-title">Selector</span>
2528
2926
  <span
2529
2927
  class="pf-c-tree-view__node-text"
2530
2928
  >Label selector for pods. Existing ReplicaSets whose pods are selected by this will be the ones affected by this deployment</span>
2531
- </div>
2532
- </div>
2929
+ </span>
2930
+ </span>
2533
2931
  </button>
2534
2932
  </div>
2535
2933
  <ul class="pf-c-tree-view__list" role="group">
@@ -2541,19 +2939,20 @@ beta: true
2541
2939
  >
2542
2940
  <div class="pf-c-tree-view__content">
2543
2941
  <button class="pf-c-tree-view__node">
2544
- <div class="pf-c-tree-view__node-container">
2545
- <div class="pf-c-tree-view__node-toggle">
2942
+ <span class="pf-c-tree-view__node-container">
2943
+ <span class="pf-c-tree-view__node-toggle">
2546
2944
  <span class="pf-c-tree-view__node-toggle-icon">
2547
2945
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2548
2946
  </span>
2549
- </div>
2550
- <div class="pf-c-tree-view__node-content">
2947
+ </span>
2948
+
2949
+ <span class="pf-c-tree-view__node-content">
2551
2950
  <span class="pf-c-tree-view__node-title">matchExpressions</span>
2552
2951
  <span
2553
2952
  class="pf-c-tree-view__node-text"
2554
2953
  >matchExpressions is a list of the label selector requirements. The requirements and ANDed.</span>
2555
- </div>
2556
- </div>
2954
+ </span>
2955
+ </span>
2557
2956
  </button>
2558
2957
  </div>
2559
2958
  <ul class="pf-c-tree-view__list" role="group">
@@ -2563,48 +2962,48 @@ beta: true
2563
2962
  tabindex="-1"
2564
2963
  >
2565
2964
  <div class="pf-c-tree-view__content">
2566
- <div class="pf-c-tree-view__node" tabindex="0">
2567
- <div class="pf-c-tree-view__node-container">
2568
- <div class="pf-c-tree-view__node-content">
2965
+ <button class="pf-c-tree-view__node">
2966
+ <span class="pf-c-tree-view__node-container">
2967
+ <span class="pf-c-tree-view__node-content">
2569
2968
  <span class="pf-c-tree-view__node-title">matchLabels</span>
2570
2969
  <span
2571
2970
  class="pf-c-tree-view__node-text"
2572
2971
  >matchExpressions is a list of the label selector requirements. The requirements and ANDed.</span>
2573
- </div>
2574
- </div>
2575
- </div>
2972
+ </span>
2973
+ </span>
2974
+ </button>
2576
2975
  </div>
2577
2976
  </li>
2578
2977
  </ul>
2579
2978
  </li>
2580
2979
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2581
2980
  <div class="pf-c-tree-view__content">
2582
- <div class="pf-c-tree-view__node" tabindex="0">
2583
- <div class="pf-c-tree-view__node-container">
2584
- <div class="pf-c-tree-view__node-content">
2981
+ <button class="pf-c-tree-view__node">
2982
+ <span class="pf-c-tree-view__node-container">
2983
+ <span class="pf-c-tree-view__node-content">
2585
2984
  <span class="pf-c-tree-view__node-title">matchLabels</span>
2586
2985
  <span
2587
2986
  class="pf-c-tree-view__node-text"
2588
2987
  >Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.</span>
2589
- </div>
2590
- </div>
2591
- </div>
2988
+ </span>
2989
+ </span>
2990
+ </button>
2592
2991
  </div>
2593
2992
  </li>
2594
2993
  </ul>
2595
2994
  </li>
2596
2995
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2597
2996
  <div class="pf-c-tree-view__content">
2598
- <div class="pf-c-tree-view__node" tabindex="0">
2599
- <div class="pf-c-tree-view__node-container">
2600
- <div class="pf-c-tree-view__node-content">
2997
+ <button class="pf-c-tree-view__node">
2998
+ <span class="pf-c-tree-view__node-container">
2999
+ <span class="pf-c-tree-view__node-content">
2601
3000
  <span class="pf-c-tree-view__node-title">matchLabels</span>
2602
3001
  <span
2603
3002
  class="pf-c-tree-view__node-text"
2604
3003
  >Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.</span>
2605
- </div>
2606
- </div>
2607
- </div>
3004
+ </span>
3005
+ </span>
3006
+ </button>
2608
3007
  </div>
2609
3008
  </li>
2610
3009
  </ul>
@@ -2621,42 +3020,42 @@ beta: true
2621
3020
  <ul class="pf-c-tree-view__list" role="tree">
2622
3021
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2623
3022
  <div class="pf-c-tree-view__content">
2624
- <div class="pf-c-tree-view__node" tabindex="0">
2625
- <div class="pf-c-tree-view__node-container">
2626
- <div class="pf-c-tree-view__node-content">
3023
+ <button class="pf-c-tree-view__node">
3024
+ <span class="pf-c-tree-view__node-container">
3025
+ <span class="pf-c-tree-view__node-content">
2627
3026
  <span class="pf-c-tree-view__node-title">apiVersion</span>
2628
- <div
3027
+ <span
2629
3028
  class="pf-c-tree-view__node-text"
2630
- >APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.</div>
2631
- </div>
2632
- </div>
2633
- </div>
3029
+ >APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.</span>
3030
+ </span>
3031
+ </span>
3032
+ </button>
2634
3033
  </div>
2635
3034
  </li>
2636
3035
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2637
3036
  <div class="pf-c-tree-view__content">
2638
- <div class="pf-c-tree-view__node" tabindex="0">
2639
- <div class="pf-c-tree-view__node-container">
2640
- <div class="pf-c-tree-view__node-content">
3037
+ <button class="pf-c-tree-view__node">
3038
+ <span class="pf-c-tree-view__node-container">
3039
+ <span class="pf-c-tree-view__node-content">
2641
3040
  <span class="pf-c-tree-view__node-title">kind</span>
2642
- <div
3041
+ <span
2643
3042
  class="pf-c-tree-view__node-text"
2644
- >Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:</div>
2645
- </div>
2646
- </div>
2647
- </div>
3043
+ >Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:</span>
3044
+ </span>
3045
+ </span>
3046
+ </button>
2648
3047
  </div>
2649
3048
  </li>
2650
3049
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2651
3050
  <div class="pf-c-tree-view__content">
2652
- <div class="pf-c-tree-view__node" tabindex="0">
2653
- <div class="pf-c-tree-view__node-container">
2654
- <div class="pf-c-tree-view__node-content">
3051
+ <button class="pf-c-tree-view__node">
3052
+ <span class="pf-c-tree-view__node-container">
3053
+ <span class="pf-c-tree-view__node-content">
2655
3054
  <span class="pf-c-tree-view__node-title">metadata</span>
2656
- <div class="pf-c-tree-view__node-text">Standard object metadata</div>
2657
- </div>
2658
- </div>
2659
- </div>
3055
+ <span class="pf-c-tree-view__node-text">Standard object metadata</span>
3056
+ </span>
3057
+ </span>
3058
+ </button>
2660
3059
  </div>
2661
3060
  </li>
2662
3061
  <li
@@ -2667,92 +3066,93 @@ beta: true
2667
3066
  >
2668
3067
  <div class="pf-c-tree-view__content">
2669
3068
  <button class="pf-c-tree-view__node">
2670
- <div class="pf-c-tree-view__node-container">
2671
- <div class="pf-c-tree-view__node-toggle">
3069
+ <span class="pf-c-tree-view__node-container">
3070
+ <span class="pf-c-tree-view__node-toggle">
2672
3071
  <span class="pf-c-tree-view__node-toggle-icon">
2673
3072
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2674
3073
  </span>
2675
- </div>
2676
- <div class="pf-c-tree-view__node-content">
3074
+ </span>
3075
+
3076
+ <span class="pf-c-tree-view__node-content">
2677
3077
  <span class="pf-c-tree-view__node-title">spec</span>
2678
- <div
3078
+ <span
2679
3079
  class="pf-c-tree-view__node-text"
2680
- >Specification of the desired behavior of deployment.</div>
2681
- </div>
2682
- </div>
3080
+ >Specification of the desired behavior of deployment.</span>
3081
+ </span>
3082
+ </span>
2683
3083
  </button>
2684
3084
  </div>
2685
3085
  <ul class="pf-c-tree-view__list" role="group">
2686
3086
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2687
3087
  <div class="pf-c-tree-view__content">
2688
- <div class="pf-c-tree-view__node" tabindex="0">
2689
- <div class="pf-c-tree-view__node-container">
2690
- <div class="pf-c-tree-view__node-content">
3088
+ <button class="pf-c-tree-view__node">
3089
+ <span class="pf-c-tree-view__node-container">
3090
+ <span class="pf-c-tree-view__node-content">
2691
3091
  <span class="pf-c-tree-view__node-title">minReadySeconds</span>
2692
3092
  <span
2693
3093
  class="pf-c-tree-view__node-text"
2694
3094
  >Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).</span>
2695
- </div>
2696
- </div>
2697
- </div>
3095
+ </span>
3096
+ </span>
3097
+ </button>
2698
3098
  </div>
2699
3099
  </li>
2700
3100
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2701
3101
  <div class="pf-c-tree-view__content">
2702
- <div class="pf-c-tree-view__node" tabindex="0">
2703
- <div class="pf-c-tree-view__node-container">
2704
- <div class="pf-c-tree-view__node-content">
3102
+ <button class="pf-c-tree-view__node">
3103
+ <span class="pf-c-tree-view__node-container">
3104
+ <span class="pf-c-tree-view__node-content">
2705
3105
  <span class="pf-c-tree-view__node-title">paused</span>
2706
3106
  <span
2707
3107
  class="pf-c-tree-view__node-text"
2708
3108
  >Indicates that the deployment is paused</span>
2709
- </div>
2710
- </div>
2711
- </div>
3109
+ </span>
3110
+ </span>
3111
+ </button>
2712
3112
  </div>
2713
3113
  </li>
2714
3114
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2715
3115
  <div class="pf-c-tree-view__content">
2716
- <div class="pf-c-tree-view__node" tabindex="0">
2717
- <div class="pf-c-tree-view__node-container">
2718
- <div class="pf-c-tree-view__node-content">
3116
+ <button class="pf-c-tree-view__node">
3117
+ <span class="pf-c-tree-view__node-container">
3118
+ <span class="pf-c-tree-view__node-content">
2719
3119
  <span
2720
3120
  class="pf-c-tree-view__node-title"
2721
3121
  >progressDeadlineSeconds</span>
2722
3122
  <span
2723
3123
  class="pf-c-tree-view__node-text"
2724
3124
  >The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.</span>
2725
- </div>
2726
- </div>
2727
- </div>
3125
+ </span>
3126
+ </span>
3127
+ </button>
2728
3128
  </div>
2729
3129
  </li>
2730
3130
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2731
3131
  <div class="pf-c-tree-view__content">
2732
- <div class="pf-c-tree-view__node" tabindex="0">
2733
- <div class="pf-c-tree-view__node-container">
2734
- <div class="pf-c-tree-view__node-content">
3132
+ <button class="pf-c-tree-view__node">
3133
+ <span class="pf-c-tree-view__node-container">
3134
+ <span class="pf-c-tree-view__node-content">
2735
3135
  <span class="pf-c-tree-view__node-title">replicas</span>
2736
3136
  <span
2737
3137
  class="pf-c-tree-view__node-text"
2738
3138
  >Number of desired pods. This is a pointer to distinguish between explicit zero and not specified. Defaults to 1.</span>
2739
- </div>
2740
- </div>
2741
- </div>
3139
+ </span>
3140
+ </span>
3141
+ </button>
2742
3142
  </div>
2743
3143
  </li>
2744
3144
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2745
3145
  <div class="pf-c-tree-view__content">
2746
- <div class="pf-c-tree-view__node" tabindex="0">
2747
- <div class="pf-c-tree-view__node-container">
2748
- <div class="pf-c-tree-view__node-content">
3146
+ <button class="pf-c-tree-view__node">
3147
+ <span class="pf-c-tree-view__node-container">
3148
+ <span class="pf-c-tree-view__node-content">
2749
3149
  <span class="pf-c-tree-view__node-title">revisionHistoryLimit</span>
2750
3150
  <span
2751
3151
  class="pf-c-tree-view__node-text"
2752
3152
  >The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.</span>
2753
- </div>
2754
- </div>
2755
- </div>
3153
+ </span>
3154
+ </span>
3155
+ </button>
2756
3156
  </div>
2757
3157
  </li>
2758
3158
  <li
@@ -2763,19 +3163,20 @@ beta: true
2763
3163
  >
2764
3164
  <div class="pf-c-tree-view__content">
2765
3165
  <button class="pf-c-tree-view__node">
2766
- <div class="pf-c-tree-view__node-container">
2767
- <div class="pf-c-tree-view__node-toggle">
3166
+ <span class="pf-c-tree-view__node-container">
3167
+ <span class="pf-c-tree-view__node-toggle">
2768
3168
  <span class="pf-c-tree-view__node-toggle-icon">
2769
3169
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2770
3170
  </span>
2771
- </div>
2772
- <div class="pf-c-tree-view__node-content">
3171
+ </span>
3172
+
3173
+ <span class="pf-c-tree-view__node-content">
2773
3174
  <span class="pf-c-tree-view__node-title">Selector</span>
2774
3175
  <span
2775
3176
  class="pf-c-tree-view__node-text"
2776
3177
  >Label selector for pods. Existing ReplicaSets whose pods are selected by this will be the ones affected by this deployment</span>
2777
- </div>
2778
- </div>
3178
+ </span>
3179
+ </span>
2779
3180
  </button>
2780
3181
  </div>
2781
3182
  <ul class="pf-c-tree-view__list" role="group">
@@ -2787,19 +3188,20 @@ beta: true
2787
3188
  >
2788
3189
  <div class="pf-c-tree-view__content">
2789
3190
  <button class="pf-c-tree-view__node">
2790
- <div class="pf-c-tree-view__node-container">
2791
- <div class="pf-c-tree-view__node-toggle">
3191
+ <span class="pf-c-tree-view__node-container">
3192
+ <span class="pf-c-tree-view__node-toggle">
2792
3193
  <span class="pf-c-tree-view__node-toggle-icon">
2793
3194
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2794
3195
  </span>
2795
- </div>
2796
- <div class="pf-c-tree-view__node-content">
3196
+ </span>
3197
+
3198
+ <span class="pf-c-tree-view__node-content">
2797
3199
  <span class="pf-c-tree-view__node-title">matchExpressions</span>
2798
3200
  <span
2799
3201
  class="pf-c-tree-view__node-text"
2800
3202
  >matchExpressions is a list of the label selector requirements. The requirements and ANDed.</span>
2801
- </div>
2802
- </div>
3203
+ </span>
3204
+ </span>
2803
3205
  </button>
2804
3206
  </div>
2805
3207
  <ul class="pf-c-tree-view__list" role="group">
@@ -2809,48 +3211,48 @@ beta: true
2809
3211
  tabindex="-1"
2810
3212
  >
2811
3213
  <div class="pf-c-tree-view__content">
2812
- <div class="pf-c-tree-view__node" tabindex="0">
2813
- <div class="pf-c-tree-view__node-container">
2814
- <div class="pf-c-tree-view__node-content">
3214
+ <button class="pf-c-tree-view__node">
3215
+ <span class="pf-c-tree-view__node-container">
3216
+ <span class="pf-c-tree-view__node-content">
2815
3217
  <span class="pf-c-tree-view__node-title">matchLabels</span>
2816
3218
  <span
2817
3219
  class="pf-c-tree-view__node-text"
2818
3220
  >matchExpressions is a list of the label selector requirements. The requirements and ANDed.</span>
2819
- </div>
2820
- </div>
2821
- </div>
3221
+ </span>
3222
+ </span>
3223
+ </button>
2822
3224
  </div>
2823
3225
  </li>
2824
3226
  </ul>
2825
3227
  </li>
2826
3228
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2827
3229
  <div class="pf-c-tree-view__content">
2828
- <div class="pf-c-tree-view__node" tabindex="0">
2829
- <div class="pf-c-tree-view__node-container">
2830
- <div class="pf-c-tree-view__node-content">
3230
+ <button class="pf-c-tree-view__node">
3231
+ <span class="pf-c-tree-view__node-container">
3232
+ <span class="pf-c-tree-view__node-content">
2831
3233
  <span class="pf-c-tree-view__node-title">matchLabels</span>
2832
3234
  <span
2833
3235
  class="pf-c-tree-view__node-text"
2834
3236
  >Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.</span>
2835
- </div>
2836
- </div>
2837
- </div>
3237
+ </span>
3238
+ </span>
3239
+ </button>
2838
3240
  </div>
2839
3241
  </li>
2840
3242
  </ul>
2841
3243
  </li>
2842
3244
  <li class="pf-c-tree-view__list-item" role="treeitem" tabindex="-1">
2843
3245
  <div class="pf-c-tree-view__content">
2844
- <div class="pf-c-tree-view__node" tabindex="0">
2845
- <div class="pf-c-tree-view__node-container">
2846
- <div class="pf-c-tree-view__node-content">
3246
+ <button class="pf-c-tree-view__node">
3247
+ <span class="pf-c-tree-view__node-container">
3248
+ <span class="pf-c-tree-view__node-content">
2847
3249
  <span class="pf-c-tree-view__node-title">matchLabels</span>
2848
3250
  <span
2849
3251
  class="pf-c-tree-view__node-text"
2850
3252
  >Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.</span>
2851
- </div>
2852
- </div>
2853
- </div>
3253
+ </span>
3254
+ </span>
3255
+ </button>
2854
3256
  </div>
2855
3257
  </li>
2856
3258
  </ul>
@@ -2862,8 +3264,6 @@ beta: true
2862
3264
 
2863
3265
  ## Documentation
2864
3266
 
2865
- ### Overview
2866
-
2867
3267
  ### Accessibility
2868
3268
 
2869
3269
  | Attribute | Applied to | Outcome |
@@ -2879,27 +3279,27 @@ beta: true
2879
3279
 
2880
3280
  ### Usage
2881
3281
 
2882
- | Class | Applied | Outcome |
2883
- | ------------------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
2884
- | `.pf-c-tree-view` | `<div>` | Initiates the tree view container. **Required** |
2885
- | `.pf-c-tree-view__list` | `<ul>` | Initiates a tree view list. **Required** |
2886
- | `.pf-c-tree-view__list-item` | `<li>` | Initiates a tree view list item. **Required** |
2887
- | `.pf-c-tree-view__content` | `<div>` | Initiates a tree view node. **Required** |
2888
- | `.pf-c-tree-view__node` | `<button>`, `<a>` | Initiates a tree view node. **Required** |
2889
- | `.pf-c-tree-view__node-container` | `<span>` | Initiates a tree view node container. **Required for compact variant** |
2890
- | `.pf-c-tree-view__node-content` | `<span>` | Initiates a tree view node content container used to stack elements. |
2891
- | `.pf-c-tree-view__node-count` | `<span>` | Initiates a tree view node count. |
2892
- | `.pf-c-tree-view__node-toggle` | `<div>` | Initiates a tree view toggle. |
2893
- | `.pf-c-tree-view__node-toggle-button` | `<button>` | Initiates a tree view toggle button. |
2894
- | `.pf-c-tree-view__node-toggle-icon` | `<span>` | Initiates a tree view toggle icon. |
2895
- | `.pf-c-tree-view__node-title` | `<span>` | Initiates a tree view node title. |
2896
- | `.pf-c-tree-view__node-text` | `<span>` | Initiates tree view text. |
2897
- | `.pf-c-tree-view__node-icon` | `<span>` | Initiates a tree view icon. |
2898
- | `.pf-c-tree-view__node-check` | `<span>` | Initiates a tree view check. |
2899
- | `.pf-c-tree-view__action` | `<div>` | Initiates a tree view action wrapper. |
2900
- | `.pf-c-tree-view__search` | `<div>` | Initiates a tree view search wrapper. |
2901
- | `.pf-m-guides` | `.pf-c-tree-view` | Modifies the tree view to the guides presentation. |
2902
- | `.pf-m-compact` | `.pf-c-tree-view` | Modifies the tree view to the compact presentation. |
2903
- | `.pf-m-no-background` | `.pf-c-tree-view.pf-m-compact` | Modifies the tree view compact variant node containers to have a transparent background. |
2904
- | `.pf-m-current` | `.pf-c-tree-view__node` | Modifies the tree view node to be current. |
2905
- | `.pf-m-truncate` | `.pf-c-tree-view`, `.pf-c-tree-view__node-title`, `.pf-c-tree-view__node-text` | Modifies the tree view title or text to truncate. |
3282
+ | Class | Applied | Outcome |
3283
+ | ----------------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
3284
+ | `.pf-c-tree-view` | `<div>` | Initiates the tree view container. **Required** |
3285
+ | `.pf-c-tree-view__list` | `<ul>` | Initiates a tree view list. **Required** |
3286
+ | `.pf-c-tree-view__list-item` | `<li>` | Initiates a tree view list item. **Required** |
3287
+ | `.pf-c-tree-view__content` | `<div>` | Initiates a tree view node. **Required** |
3288
+ | `.pf-c-tree-view__node` | `<button>`, `<label>` | Initiates a tree view node. **Required** |
3289
+ | `.pf-c-tree-view__node-container` | `<span>` | Initiates a tree view node container. **Required for compact variant** |
3290
+ | `.pf-c-tree-view__node-content` | `<span>` | Initiates a tree view node content container used to stack elements. |
3291
+ | `.pf-c-tree-view__node-count` | `<span>` | Initiates a tree view node count. |
3292
+ | `.pf-c-tree-view__node-toggle` | `<span>`, `<button>` | Initiates a tree view toggle. |
3293
+ | `.pf-c-tree-view__node-toggle-icon` | `<span>` | Initiates a tree view toggle icon. |
3294
+ | `.pf-c-tree-view__node-title` | `<span>` | Initiates a tree view node title. |
3295
+ | `.pf-c-tree-view__node-text` | `<span>` | Initiates tree view text. |
3296
+ | `.pf-c-tree-view__node-icon` | `<span>` | Initiates a tree view icon. |
3297
+ | `.pf-c-tree-view__node-check` | `<span>` | Initiates a tree view check. |
3298
+ | `.pf-c-tree-view__action` | `<div>` | Initiates a tree view action wrapper. |
3299
+ | `.pf-c-tree-view__search` | `<div>` | Initiates a tree view search wrapper. |
3300
+ | `.pf-m-guides` | `.pf-c-tree-view` | Modifies the tree view to the guides presentation. |
3301
+ | `.pf-m-compact` | `.pf-c-tree-view` | Modifies the tree view to the compact presentation. |
3302
+ | `.pf-m-no-background` | `.pf-c-tree-view.pf-m-compact` | Modifies the tree view compact variant node containers to have a transparent background. |
3303
+ | `.pf-m-current` | `.pf-c-tree-view__node` | Modifies the tree view node to be current. |
3304
+ | `.pf-m-selectable` | `.pf-c-tree-view__node` | For use on nodes that are expandable and selectable, when the default click action on the node selects it instead of expanding it. |
3305
+ | `.pf-m-truncate` | `.pf-c-tree-view`, `.pf-c-tree-view__node-title`, `.pf-c-tree-view__node-text` | Modifies the tree view title or text to truncate. |