@patternfly/patternfly 4.172.0 → 4.176.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.
@@ -236,6 +236,181 @@ These classes can be used to ensure that the table changes between the tabular a
236
236
  | `.fa-long-arrow-alt-up` | `.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas` | Initiates icon within ascending sorted and selected, sortable table header. **Required for sortable table columns** |
237
237
  | `.fa-long-arrow-alt-down` | `.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas` | Initiates icon within descending sorted and selected, sortable table header. **Required for sortable table columns** |
238
238
 
239
+ ### Overflow menu usage, mobile
240
+
241
+ ```html
242
+ <table
243
+ class="pf-c-table pf-m-grid"
244
+ role="grid"
245
+ aria-label="This is a simple table example"
246
+ id="table-with-expanded-overflow-menu-mobile"
247
+ >
248
+ <caption>This is the table caption</caption>
249
+ <thead>
250
+ <tr role="row">
251
+ <th role="columnheader" scope="col">Repositories</th>
252
+ <th role="columnheader" scope="col">Branches</th>
253
+ <th role="columnheader" scope="col">Pull requests</th>
254
+ <th
255
+ class="pf-m-action pf-m-fit-content pf-c-table__action"
256
+ role="columnheader"
257
+ scope="col"
258
+ >Overflow actions</th>
259
+ </tr>
260
+ </thead>
261
+
262
+ <tbody role="rowgroup">
263
+ <tr role="row">
264
+ <td role="cell" data-label="Repository name">Repository 1</td>
265
+ <td role="cell" data-label="Branches">10</td>
266
+ <td role="cell" data-label="Pull requests">25</td>
267
+ <td class="pf-c-table__action" role="cell">
268
+ <div
269
+ class="pf-c-overflow-menu"
270
+ id="table-with-expanded-overflow-menu-mobile-overflow-menu-1"
271
+ >
272
+ <div class="pf-c-overflow-menu__control">
273
+ <div class="pf-c-dropdown pf-m-expanded">
274
+ <button
275
+ class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
276
+ type="button"
277
+ id="table-with-expanded-overflow-menu-mobile-overflow-menu-1-dropdown-toggle"
278
+ aria-label="Generic options"
279
+ aria-expanded="true"
280
+ >
281
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
282
+ </button>
283
+ <ul
284
+ class="pf-c-dropdown__menu pf-m-align-right"
285
+ aria-labelledby="table-with-expanded-overflow-menu-mobile-overflow-menu-1-dropdown-toggle"
286
+ >
287
+ <li>
288
+ <button class="pf-c-dropdown__menu-item">Start</button>
289
+ </li>
290
+ <li>
291
+ <button class="pf-c-dropdown__menu-item">Stop</button>
292
+ </li>
293
+ </ul>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </td>
298
+ </tr>
299
+
300
+ <tr role="row">
301
+ <td role="cell" data-label="Repository name">Repository 2</td>
302
+ <td role="cell" data-label="Branches">10</td>
303
+ <td role="cell" data-label="Pull requests">25</td>
304
+ <td class="pf-c-table__action" role="cell">
305
+ <div
306
+ class="pf-c-overflow-menu"
307
+ id="table-with-expanded-overflow-menu-mobile-overflow-menu-2"
308
+ >
309
+ <div class="pf-c-overflow-menu__control">
310
+ <div class="pf-c-dropdown">
311
+ <button
312
+ class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
313
+ type="button"
314
+ id="table-with-expanded-overflow-menu-mobile-overflow-menu-2-dropdown-toggle"
315
+ aria-label="Generic options"
316
+ aria-expanded="true"
317
+ >
318
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
319
+ </button>
320
+ <ul
321
+ class="pf-c-dropdown__menu pf-m-align-right"
322
+ aria-labelledby="table-with-expanded-overflow-menu-mobile-overflow-menu-2-dropdown-toggle"
323
+ hidden
324
+ >
325
+ <li>
326
+ <button class="pf-c-dropdown__menu-item">Start</button>
327
+ </li>
328
+ <li>
329
+ <button class="pf-c-dropdown__menu-item">Stop</button>
330
+ </li>
331
+ </ul>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </td>
336
+ </tr>
337
+ </tbody>
338
+ </table>
339
+
340
+ ```
341
+
342
+ ### Overflow menu usage, desktop
343
+
344
+ ```html
345
+ <table
346
+ class="pf-c-table"
347
+ aria-label="This is a simple table example"
348
+ id="table-with-expanded-overflow-menu-desktop"
349
+ >
350
+ <caption>This is the table caption</caption>
351
+ <thead>
352
+ <tr>
353
+ <th scope="col">Repositories</th>
354
+ <th scope="col">Branches</th>
355
+ <th scope="col">Pull requests</th>
356
+ <th
357
+ class="pf-m-action pf-m-fit-content pf-c-table__action"
358
+ scope="col"
359
+ >Overflow actions</th>
360
+ </tr>
361
+ </thead>
362
+
363
+ <tbody>
364
+ <tr>
365
+ <td role="cell" data-label="Repository name">Repository 1</td>
366
+ <td role="cell" data-label="Branches">10</td>
367
+ <td role="cell" data-label="Pull requests">25</td>
368
+ <td class="pf-c-table__action" role="cell">
369
+ <div
370
+ class="pf-c-overflow-menu"
371
+ id="table-with-expanded-overflow-menu-desktop-overflow-menu-1"
372
+ >
373
+ <div class="pf-c-overflow-menu__content">
374
+ <div class="pf-c-overflow-menu__group pf-m-button-group">
375
+ <div class="pf-c-overflow-menu__item">
376
+ <button class="pf-c-button pf-m-primary" type="button">Start</button>
377
+ </div>
378
+ <div class="pf-c-overflow-menu__item">
379
+ <button class="pf-c-button pf-m-secondary" type="button">Stop</button>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </td>
385
+ </tr>
386
+
387
+ <tr>
388
+ <td role="cell" data-label="Repository name">Repository 2</td>
389
+ <td role="cell" data-label="Branches">10</td>
390
+ <td role="cell" data-label="Pull requests">25</td>
391
+ <td class="pf-c-table__action" role="cell">
392
+ <div
393
+ class="pf-c-overflow-menu"
394
+ id="table-with-expanded-overflow-menu-desktop-overflow-menu-2"
395
+ >
396
+ <div class="pf-c-overflow-menu__content">
397
+ <div class="pf-c-overflow-menu__group pf-m-button-group">
398
+ <div class="pf-c-overflow-menu__item">
399
+ <button class="pf-c-button pf-m-primary" type="button">Start</button>
400
+ </div>
401
+ <div class="pf-c-overflow-menu__item">
402
+ <button class="pf-c-button pf-m-secondary" type="button">Stop</button>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </td>
408
+ </tr>
409
+ </tbody>
410
+ </table>
411
+
412
+ ```
413
+
239
414
  ## With checkboxes, radio select, and actions
240
415
 
241
416
  ### Checkboxes and actions example
@@ -8944,7 +9119,9 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
8944
9119
  | `.pf-m-hoverable` | `.pf-c-table tbody`, `.pf-c-table tr` | Modifies a tbody or tr table element to be hoverable. |
8945
9120
  | `.pf-m-selected` | `.pf-c-table tbody`, `.pf-c-table tr` | Modifies a selectable tbody or tr table element to be selected. |
8946
9121
 
8947
- ### Tree table
9122
+ ## Tree table
9123
+
9124
+ ### Tree table basic
8948
9125
 
8949
9126
  ```html
8950
9127
  <table
@@ -10415,11 +10592,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
10415
10592
  </button>
10416
10593
  </span>
10417
10594
  <span class="pf-c-table__check">
10418
- <input
10419
- type="checkbox"
10420
- name="tree-table-with-checkboxes-example-checkrow-1"
10421
- aria-labelledby="tree-table-with-checkboxes-example-node-1"
10422
- />
10595
+ <label>
10596
+ <input
10597
+ type="checkbox"
10598
+ name="tree-table-with-checkboxes-example-checkrow-1"
10599
+ aria-labelledby="tree-table-with-checkboxes-example-node-1"
10600
+ />
10601
+ </label>
10423
10602
  </span>
10424
10603
  <div class="pf-c-table__tree-view-text">
10425
10604
  <span
@@ -10513,11 +10692,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
10513
10692
  </button>
10514
10693
  </span>
10515
10694
  <span class="pf-c-table__check">
10516
- <input
10517
- type="checkbox"
10518
- name="tree-table-with-checkboxes-example-checkrow-2"
10519
- aria-labelledby="tree-table-with-checkboxes-example-node-2"
10520
- />
10695
+ <label>
10696
+ <input
10697
+ type="checkbox"
10698
+ name="tree-table-with-checkboxes-example-checkrow-2"
10699
+ aria-labelledby="tree-table-with-checkboxes-example-node-2"
10700
+ />
10701
+ </label>
10521
10702
  </span>
10522
10703
  <div class="pf-c-table__tree-view-text">
10523
10704
  <span
@@ -10599,11 +10780,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
10599
10780
  <th class="pf-c-table__tree-view-title-cell">
10600
10781
  <div class="pf-c-table__tree-view-main">
10601
10782
  <span class="pf-c-table__check">
10602
- <input
10603
- type="checkbox"
10604
- name="tree-table-with-checkboxes-example-checkrow-3"
10605
- aria-labelledby="tree-table-with-checkboxes-example-node-3"
10606
- />
10783
+ <label>
10784
+ <input
10785
+ type="checkbox"
10786
+ name="tree-table-with-checkboxes-example-checkrow-3"
10787
+ aria-labelledby="tree-table-with-checkboxes-example-node-3"
10788
+ />
10789
+ </label>
10607
10790
  </span>
10608
10791
  <div class="pf-c-table__tree-view-text">
10609
10792
  <span
@@ -10684,11 +10867,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
10684
10867
  <th class="pf-c-table__tree-view-title-cell">
10685
10868
  <div class="pf-c-table__tree-view-main">
10686
10869
  <span class="pf-c-table__check">
10687
- <input
10688
- type="checkbox"
10689
- name="tree-table-with-checkboxes-example-checkrow-4"
10690
- aria-labelledby="tree-table-with-checkboxes-example-node-4"
10691
- />
10870
+ <label>
10871
+ <input
10872
+ type="checkbox"
10873
+ name="tree-table-with-checkboxes-example-checkrow-4"
10874
+ aria-labelledby="tree-table-with-checkboxes-example-node-4"
10875
+ />
10876
+ </label>
10692
10877
  </span>
10693
10878
  <div class="pf-c-table__tree-view-text">
10694
10879
  <span
@@ -10769,11 +10954,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
10769
10954
  <th class="pf-c-table__tree-view-title-cell">
10770
10955
  <div class="pf-c-table__tree-view-main">
10771
10956
  <span class="pf-c-table__check">
10772
- <input
10773
- type="checkbox"
10774
- name="tree-table-with-checkboxes-example-checkrow-5"
10775
- aria-labelledby="tree-table-with-checkboxes-example-node-5"
10776
- />
10957
+ <label>
10958
+ <input
10959
+ type="checkbox"
10960
+ name="tree-table-with-checkboxes-example-checkrow-5"
10961
+ aria-labelledby="tree-table-with-checkboxes-example-node-5"
10962
+ />
10963
+ </label>
10777
10964
  </span>
10778
10965
  <div class="pf-c-table__tree-view-text">
10779
10966
  <span
@@ -10853,11 +11040,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
10853
11040
  <th class="pf-c-table__tree-view-title-cell">
10854
11041
  <div class="pf-c-table__tree-view-main">
10855
11042
  <span class="pf-c-table__check">
10856
- <input
10857
- type="checkbox"
10858
- name="tree-table-with-checkboxes-example-checkrow-6"
10859
- aria-labelledby="tree-table-with-checkboxes-example-node-6"
10860
- />
11043
+ <label>
11044
+ <input
11045
+ type="checkbox"
11046
+ name="tree-table-with-checkboxes-example-checkrow-6"
11047
+ aria-labelledby="tree-table-with-checkboxes-example-node-6"
11048
+ />
11049
+ </label>
10861
11050
  </span>
10862
11051
  <div class="pf-c-table__tree-view-text">
10863
11052
  <span
@@ -10952,11 +11141,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
10952
11141
  </button>
10953
11142
  </span>
10954
11143
  <span class="pf-c-table__check">
10955
- <input
10956
- type="checkbox"
10957
- name="tree-table-with-checkboxes-example-checkrow-7"
10958
- aria-labelledby="tree-table-with-checkboxes-example-node-7"
10959
- />
11144
+ <label>
11145
+ <input
11146
+ type="checkbox"
11147
+ name="tree-table-with-checkboxes-example-checkrow-7"
11148
+ aria-labelledby="tree-table-with-checkboxes-example-node-7"
11149
+ />
11150
+ </label>
10960
11151
  </span>
10961
11152
  <div class="pf-c-table__tree-view-text">
10962
11153
  <span
@@ -11036,11 +11227,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
11036
11227
  <th class="pf-c-table__tree-view-title-cell">
11037
11228
  <div class="pf-c-table__tree-view-main">
11038
11229
  <span class="pf-c-table__check">
11039
- <input
11040
- type="checkbox"
11041
- name="tree-table-with-checkboxes-example-checkrow-8"
11042
- aria-labelledby="tree-table-with-checkboxes-example-node-8"
11043
- />
11230
+ <label>
11231
+ <input
11232
+ type="checkbox"
11233
+ name="tree-table-with-checkboxes-example-checkrow-8"
11234
+ aria-labelledby="tree-table-with-checkboxes-example-node-8"
11235
+ />
11236
+ </label>
11044
11237
  </span>
11045
11238
  <div class="pf-c-table__tree-view-text">
11046
11239
  <span
@@ -11134,11 +11327,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
11134
11327
  </button>
11135
11328
  </span>
11136
11329
  <span class="pf-c-table__check">
11137
- <input
11138
- type="checkbox"
11139
- name="tree-table-with-checkboxes-example-checkrow-9"
11140
- aria-labelledby="tree-table-with-checkboxes-example-node-9"
11141
- />
11330
+ <label>
11331
+ <input
11332
+ type="checkbox"
11333
+ name="tree-table-with-checkboxes-example-checkrow-9"
11334
+ aria-labelledby="tree-table-with-checkboxes-example-node-9"
11335
+ />
11336
+ </label>
11142
11337
  </span>
11143
11338
  <div class="pf-c-table__tree-view-text">
11144
11339
  <span
@@ -11218,11 +11413,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
11218
11413
  <th class="pf-c-table__tree-view-title-cell">
11219
11414
  <div class="pf-c-table__tree-view-main">
11220
11415
  <span class="pf-c-table__check">
11221
- <input
11222
- type="checkbox"
11223
- name="tree-table-with-checkboxes-example-checkrow-10"
11224
- aria-labelledby="tree-table-with-checkboxes-example-node-10"
11225
- />
11416
+ <label>
11417
+ <input
11418
+ type="checkbox"
11419
+ name="tree-table-with-checkboxes-example-checkrow-10"
11420
+ aria-labelledby="tree-table-with-checkboxes-example-node-10"
11421
+ />
11422
+ </label>
11226
11423
  </span>
11227
11424
  <div class="pf-c-table__tree-view-text">
11228
11425
  <span
@@ -11303,11 +11500,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
11303
11500
  <th class="pf-c-table__tree-view-title-cell">
11304
11501
  <div class="pf-c-table__tree-view-main">
11305
11502
  <span class="pf-c-table__check">
11306
- <input
11307
- type="checkbox"
11308
- name="tree-table-with-checkboxes-example-checkrow-11"
11309
- aria-labelledby="tree-table-with-checkboxes-example-node-11"
11310
- />
11503
+ <label>
11504
+ <input
11505
+ type="checkbox"
11506
+ name="tree-table-with-checkboxes-example-checkrow-11"
11507
+ aria-labelledby="tree-table-with-checkboxes-example-node-11"
11508
+ />
11509
+ </label>
11311
11510
  </span>
11312
11511
  <div class="pf-c-table__tree-view-text">
11313
11512
  <span
@@ -11402,11 +11601,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
11402
11601
  </button>
11403
11602
  </span>
11404
11603
  <span class="pf-c-table__check">
11405
- <input
11406
- type="checkbox"
11407
- name="tree-table-with-checkboxes-example-checkrow-12"
11408
- aria-labelledby="tree-table-with-checkboxes-example-node-12"
11409
- />
11604
+ <label>
11605
+ <input
11606
+ type="checkbox"
11607
+ name="tree-table-with-checkboxes-example-checkrow-12"
11608
+ aria-labelledby="tree-table-with-checkboxes-example-node-12"
11609
+ />
11610
+ </label>
11410
11611
  </span>
11411
11612
  <div class="pf-c-table__tree-view-text">
11412
11613
  <span
@@ -11486,11 +11687,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
11486
11687
  <th class="pf-c-table__tree-view-title-cell">
11487
11688
  <div class="pf-c-table__tree-view-main">
11488
11689
  <span class="pf-c-table__check">
11489
- <input
11490
- type="checkbox"
11491
- name="tree-table-with-checkboxes-example-checkrow-13"
11492
- aria-labelledby="tree-table-with-checkboxes-example-node-13"
11493
- />
11690
+ <label>
11691
+ <input
11692
+ type="checkbox"
11693
+ name="tree-table-with-checkboxes-example-checkrow-13"
11694
+ aria-labelledby="tree-table-with-checkboxes-example-node-13"
11695
+ />
11696
+ </label>
11494
11697
  </span>
11495
11698
  <div class="pf-c-table__tree-view-text">
11496
11699
  <span
@@ -11570,11 +11773,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
11570
11773
  <th class="pf-c-table__tree-view-title-cell">
11571
11774
  <div class="pf-c-table__tree-view-main">
11572
11775
  <span class="pf-c-table__check">
11573
- <input
11574
- type="checkbox"
11575
- name="tree-table-with-checkboxes-example-checkrow-14"
11576
- aria-labelledby="tree-table-with-checkboxes-example-node-14"
11577
- />
11776
+ <label>
11777
+ <input
11778
+ type="checkbox"
11779
+ name="tree-table-with-checkboxes-example-checkrow-14"
11780
+ aria-labelledby="tree-table-with-checkboxes-example-node-14"
11781
+ />
11782
+ </label>
11578
11783
  </span>
11579
11784
  <div class="pf-c-table__tree-view-text">
11580
11785
  <span
@@ -11668,11 +11873,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
11668
11873
  </button>
11669
11874
  </span>
11670
11875
  <span class="pf-c-table__check">
11671
- <input
11672
- type="checkbox"
11673
- name="tree-table-with-checkboxes-example-checkrow-15"
11674
- aria-labelledby="tree-table-with-checkboxes-example-node-15"
11675
- />
11876
+ <label>
11877
+ <input
11878
+ type="checkbox"
11879
+ name="tree-table-with-checkboxes-example-checkrow-15"
11880
+ aria-labelledby="tree-table-with-checkboxes-example-node-15"
11881
+ />
11882
+ </label>
11676
11883
  </span>
11677
11884
  <div class="pf-c-table__tree-view-text">
11678
11885
  <span
@@ -11753,11 +11960,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
11753
11960
  <th class="pf-c-table__tree-view-title-cell">
11754
11961
  <div class="pf-c-table__tree-view-main">
11755
11962
  <span class="pf-c-table__check">
11756
- <input
11757
- type="checkbox"
11758
- name="tree-table-with-checkboxes-example-checkrow-16"
11759
- aria-labelledby="tree-table-with-checkboxes-example-node-16"
11760
- />
11963
+ <label>
11964
+ <input
11965
+ type="checkbox"
11966
+ name="tree-table-with-checkboxes-example-checkrow-16"
11967
+ aria-labelledby="tree-table-with-checkboxes-example-node-16"
11968
+ />
11969
+ </label>
11761
11970
  </span>
11762
11971
  <div class="pf-c-table__tree-view-text">
11763
11972
  <span
@@ -11838,11 +12047,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
11838
12047
  <th class="pf-c-table__tree-view-title-cell">
11839
12048
  <div class="pf-c-table__tree-view-main">
11840
12049
  <span class="pf-c-table__check">
11841
- <input
11842
- type="checkbox"
11843
- name="tree-table-with-checkboxes-example-checkrow-17"
11844
- aria-labelledby="tree-table-with-checkboxes-example-node-17"
11845
- />
12050
+ <label>
12051
+ <input
12052
+ type="checkbox"
12053
+ name="tree-table-with-checkboxes-example-checkrow-17"
12054
+ aria-labelledby="tree-table-with-checkboxes-example-node-17"
12055
+ />
12056
+ </label>
11846
12057
  </span>
11847
12058
  <div class="pf-c-table__tree-view-text">
11848
12059
  <span
@@ -11960,11 +12171,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
11960
12171
  </button>
11961
12172
  </span>
11962
12173
  <span class="pf-c-table__check">
11963
- <input
11964
- type="checkbox"
11965
- name="tree-table-with-checkboxes-icons-example-checkrow-1"
11966
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-1"
11967
- />
12174
+ <label>
12175
+ <input
12176
+ type="checkbox"
12177
+ name="tree-table-with-checkboxes-icons-example-checkrow-1"
12178
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-1"
12179
+ />
12180
+ </label>
11968
12181
  </span>
11969
12182
  <div class="pf-c-table__tree-view-text">
11970
12183
  <span class="pf-c-table__tree-view-icon">
@@ -12061,11 +12274,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
12061
12274
  </button>
12062
12275
  </span>
12063
12276
  <span class="pf-c-table__check">
12064
- <input
12065
- type="checkbox"
12066
- name="tree-table-with-checkboxes-icons-example-checkrow-2"
12067
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-2"
12068
- />
12277
+ <label>
12278
+ <input
12279
+ type="checkbox"
12280
+ name="tree-table-with-checkboxes-icons-example-checkrow-2"
12281
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-2"
12282
+ />
12283
+ </label>
12069
12284
  </span>
12070
12285
  <div class="pf-c-table__tree-view-text">
12071
12286
  <span class="pf-c-table__tree-view-icon">
@@ -12150,11 +12365,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
12150
12365
  <th class="pf-c-table__tree-view-title-cell">
12151
12366
  <div class="pf-c-table__tree-view-main">
12152
12367
  <span class="pf-c-table__check">
12153
- <input
12154
- type="checkbox"
12155
- name="tree-table-with-checkboxes-icons-example-checkrow-3"
12156
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-3"
12157
- />
12368
+ <label>
12369
+ <input
12370
+ type="checkbox"
12371
+ name="tree-table-with-checkboxes-icons-example-checkrow-3"
12372
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-3"
12373
+ />
12374
+ </label>
12158
12375
  </span>
12159
12376
  <div class="pf-c-table__tree-view-text">
12160
12377
  <span class="pf-c-table__tree-view-icon">
@@ -12238,11 +12455,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
12238
12455
  <th class="pf-c-table__tree-view-title-cell">
12239
12456
  <div class="pf-c-table__tree-view-main">
12240
12457
  <span class="pf-c-table__check">
12241
- <input
12242
- type="checkbox"
12243
- name="tree-table-with-checkboxes-icons-example-checkrow-4"
12244
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-4"
12245
- />
12458
+ <label>
12459
+ <input
12460
+ type="checkbox"
12461
+ name="tree-table-with-checkboxes-icons-example-checkrow-4"
12462
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-4"
12463
+ />
12464
+ </label>
12246
12465
  </span>
12247
12466
  <div class="pf-c-table__tree-view-text">
12248
12467
  <span class="pf-c-table__tree-view-icon">
@@ -12326,11 +12545,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
12326
12545
  <th class="pf-c-table__tree-view-title-cell">
12327
12546
  <div class="pf-c-table__tree-view-main">
12328
12547
  <span class="pf-c-table__check">
12329
- <input
12330
- type="checkbox"
12331
- name="tree-table-with-checkboxes-icons-example-checkrow-5"
12332
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-5"
12333
- />
12548
+ <label>
12549
+ <input
12550
+ type="checkbox"
12551
+ name="tree-table-with-checkboxes-icons-example-checkrow-5"
12552
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-5"
12553
+ />
12554
+ </label>
12334
12555
  </span>
12335
12556
  <div class="pf-c-table__tree-view-text">
12336
12557
  <span class="pf-c-table__tree-view-icon">
@@ -12413,11 +12634,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
12413
12634
  <th class="pf-c-table__tree-view-title-cell">
12414
12635
  <div class="pf-c-table__tree-view-main">
12415
12636
  <span class="pf-c-table__check">
12416
- <input
12417
- type="checkbox"
12418
- name="tree-table-with-checkboxes-icons-example-checkrow-6"
12419
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-6"
12420
- />
12637
+ <label>
12638
+ <input
12639
+ type="checkbox"
12640
+ name="tree-table-with-checkboxes-icons-example-checkrow-6"
12641
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-6"
12642
+ />
12643
+ </label>
12421
12644
  </span>
12422
12645
  <div class="pf-c-table__tree-view-text">
12423
12646
  <span class="pf-c-table__tree-view-icon">
@@ -12515,11 +12738,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
12515
12738
  </button>
12516
12739
  </span>
12517
12740
  <span class="pf-c-table__check">
12518
- <input
12519
- type="checkbox"
12520
- name="tree-table-with-checkboxes-icons-example-checkrow-7"
12521
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-7"
12522
- />
12741
+ <label>
12742
+ <input
12743
+ type="checkbox"
12744
+ name="tree-table-with-checkboxes-icons-example-checkrow-7"
12745
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-7"
12746
+ />
12747
+ </label>
12523
12748
  </span>
12524
12749
  <div class="pf-c-table__tree-view-text">
12525
12750
  <span class="pf-c-table__tree-view-icon">
@@ -12602,11 +12827,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
12602
12827
  <th class="pf-c-table__tree-view-title-cell">
12603
12828
  <div class="pf-c-table__tree-view-main">
12604
12829
  <span class="pf-c-table__check">
12605
- <input
12606
- type="checkbox"
12607
- name="tree-table-with-checkboxes-icons-example-checkrow-8"
12608
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-8"
12609
- />
12830
+ <label>
12831
+ <input
12832
+ type="checkbox"
12833
+ name="tree-table-with-checkboxes-icons-example-checkrow-8"
12834
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-8"
12835
+ />
12836
+ </label>
12610
12837
  </span>
12611
12838
  <div class="pf-c-table__tree-view-text">
12612
12839
  <span class="pf-c-table__tree-view-icon">
@@ -12703,11 +12930,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
12703
12930
  </button>
12704
12931
  </span>
12705
12932
  <span class="pf-c-table__check">
12706
- <input
12707
- type="checkbox"
12708
- name="tree-table-with-checkboxes-icons-example-checkrow-9"
12709
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-9"
12710
- />
12933
+ <label>
12934
+ <input
12935
+ type="checkbox"
12936
+ name="tree-table-with-checkboxes-icons-example-checkrow-9"
12937
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-9"
12938
+ />
12939
+ </label>
12711
12940
  </span>
12712
12941
  <div class="pf-c-table__tree-view-text">
12713
12942
  <span class="pf-c-table__tree-view-icon">
@@ -12790,11 +13019,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
12790
13019
  <th class="pf-c-table__tree-view-title-cell">
12791
13020
  <div class="pf-c-table__tree-view-main">
12792
13021
  <span class="pf-c-table__check">
12793
- <input
12794
- type="checkbox"
12795
- name="tree-table-with-checkboxes-icons-example-checkrow-10"
12796
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-10"
12797
- />
13022
+ <label>
13023
+ <input
13024
+ type="checkbox"
13025
+ name="tree-table-with-checkboxes-icons-example-checkrow-10"
13026
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-10"
13027
+ />
13028
+ </label>
12798
13029
  </span>
12799
13030
  <div class="pf-c-table__tree-view-text">
12800
13031
  <span class="pf-c-table__tree-view-icon">
@@ -12878,11 +13109,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
12878
13109
  <th class="pf-c-table__tree-view-title-cell">
12879
13110
  <div class="pf-c-table__tree-view-main">
12880
13111
  <span class="pf-c-table__check">
12881
- <input
12882
- type="checkbox"
12883
- name="tree-table-with-checkboxes-icons-example-checkrow-11"
12884
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-11"
12885
- />
13112
+ <label>
13113
+ <input
13114
+ type="checkbox"
13115
+ name="tree-table-with-checkboxes-icons-example-checkrow-11"
13116
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-11"
13117
+ />
13118
+ </label>
12886
13119
  </span>
12887
13120
  <div class="pf-c-table__tree-view-text">
12888
13121
  <span class="pf-c-table__tree-view-icon">
@@ -12980,11 +13213,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
12980
13213
  </button>
12981
13214
  </span>
12982
13215
  <span class="pf-c-table__check">
12983
- <input
12984
- type="checkbox"
12985
- name="tree-table-with-checkboxes-icons-example-checkrow-12"
12986
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-12"
12987
- />
13216
+ <label>
13217
+ <input
13218
+ type="checkbox"
13219
+ name="tree-table-with-checkboxes-icons-example-checkrow-12"
13220
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-12"
13221
+ />
13222
+ </label>
12988
13223
  </span>
12989
13224
  <div class="pf-c-table__tree-view-text">
12990
13225
  <span class="pf-c-table__tree-view-icon">
@@ -13067,11 +13302,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
13067
13302
  <th class="pf-c-table__tree-view-title-cell">
13068
13303
  <div class="pf-c-table__tree-view-main">
13069
13304
  <span class="pf-c-table__check">
13070
- <input
13071
- type="checkbox"
13072
- name="tree-table-with-checkboxes-icons-example-checkrow-13"
13073
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-13"
13074
- />
13305
+ <label>
13306
+ <input
13307
+ type="checkbox"
13308
+ name="tree-table-with-checkboxes-icons-example-checkrow-13"
13309
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-13"
13310
+ />
13311
+ </label>
13075
13312
  </span>
13076
13313
  <div class="pf-c-table__tree-view-text">
13077
13314
  <span class="pf-c-table__tree-view-icon">
@@ -13154,11 +13391,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
13154
13391
  <th class="pf-c-table__tree-view-title-cell">
13155
13392
  <div class="pf-c-table__tree-view-main">
13156
13393
  <span class="pf-c-table__check">
13157
- <input
13158
- type="checkbox"
13159
- name="tree-table-with-checkboxes-icons-example-checkrow-14"
13160
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-14"
13161
- />
13394
+ <label>
13395
+ <input
13396
+ type="checkbox"
13397
+ name="tree-table-with-checkboxes-icons-example-checkrow-14"
13398
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-14"
13399
+ />
13400
+ </label>
13162
13401
  </span>
13163
13402
  <div class="pf-c-table__tree-view-text">
13164
13403
  <span class="pf-c-table__tree-view-icon">
@@ -13255,11 +13494,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
13255
13494
  </button>
13256
13495
  </span>
13257
13496
  <span class="pf-c-table__check">
13258
- <input
13259
- type="checkbox"
13260
- name="tree-table-with-checkboxes-icons-example-checkrow-15"
13261
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-15"
13262
- />
13497
+ <label>
13498
+ <input
13499
+ type="checkbox"
13500
+ name="tree-table-with-checkboxes-icons-example-checkrow-15"
13501
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-15"
13502
+ />
13503
+ </label>
13263
13504
  </span>
13264
13505
  <div class="pf-c-table__tree-view-text">
13265
13506
  <span class="pf-c-table__tree-view-icon">
@@ -13343,11 +13584,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
13343
13584
  <th class="pf-c-table__tree-view-title-cell">
13344
13585
  <div class="pf-c-table__tree-view-main">
13345
13586
  <span class="pf-c-table__check">
13346
- <input
13347
- type="checkbox"
13348
- name="tree-table-with-checkboxes-icons-example-checkrow-16"
13349
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-16"
13350
- />
13587
+ <label>
13588
+ <input
13589
+ type="checkbox"
13590
+ name="tree-table-with-checkboxes-icons-example-checkrow-16"
13591
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-16"
13592
+ />
13593
+ </label>
13351
13594
  </span>
13352
13595
  <div class="pf-c-table__tree-view-text">
13353
13596
  <span class="pf-c-table__tree-view-icon">
@@ -13431,11 +13674,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
13431
13674
  <th class="pf-c-table__tree-view-title-cell">
13432
13675
  <div class="pf-c-table__tree-view-main">
13433
13676
  <span class="pf-c-table__check">
13434
- <input
13435
- type="checkbox"
13436
- name="tree-table-with-checkboxes-icons-example-checkrow-17"
13437
- aria-labelledby="tree-table-with-checkboxes-icons-example-node-17"
13438
- />
13677
+ <label>
13678
+ <input
13679
+ type="checkbox"
13680
+ name="tree-table-with-checkboxes-icons-example-checkrow-17"
13681
+ aria-labelledby="tree-table-with-checkboxes-icons-example-node-17"
13682
+ />
13683
+ </label>
13439
13684
  </span>
13440
13685
  <div class="pf-c-table__tree-view-text">
13441
13686
  <span class="pf-c-table__tree-view-icon">