@patternfly/patternfly 5.1.0 → 5.2.0-prerelease.2

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 (43) hide show
  1. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  2. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  3. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  4. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  5. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  6. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  7. package/assets/images/pf_logo_white.hbs +35 -0
  8. package/assets/images/pf_logo_white.svg +38 -0
  9. package/components/Check/check.css +10 -8
  10. package/components/Check/check.scss +15 -10
  11. package/components/Dropdown/dropdown.css +1 -3
  12. package/components/Dropdown/dropdown.scss +2 -6
  13. package/components/Menu/menu.css +3 -0
  14. package/components/Menu/menu.scss +7 -3
  15. package/components/MenuToggle/menu-toggle.css +1 -2
  16. package/components/MenuToggle/menu-toggle.scss +5 -9
  17. package/components/Radio/radio.css +13 -10
  18. package/components/Radio/radio.scss +17 -11
  19. package/components/Table/table.css +6 -2
  20. package/components/Table/table.scss +8 -2
  21. package/components/Toolbar/toolbar.css +9 -1
  22. package/components/Toolbar/toolbar.scss +16 -3
  23. package/docs/components/Brand/examples/Brand.css +12 -0
  24. package/docs/components/Brand/examples/Brand.md +75 -32
  25. package/docs/components/Card/examples/Card.md +123 -15
  26. package/docs/components/Check/examples/Check.md +71 -59
  27. package/docs/components/LogViewer/examples/LogViewer.md +120 -30
  28. package/docs/components/MenuToggle/examples/MenuToggle.md +60 -39
  29. package/docs/components/Radio/examples/Radio.md +63 -55
  30. package/docs/components/Select/deprecated/Select.md +184 -177
  31. package/docs/components/Toolbar/examples/Toolbar.md +460 -380
  32. package/docs/demos/CardView/examples/CardView.md +24 -20
  33. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +144 -120
  34. package/docs/demos/Table/examples/Table.md +288 -240
  35. package/docs/demos/Tabs/examples/Tabs.md +24 -20
  36. package/docs/demos/Toolbar/examples/Toolbar.css +5 -0
  37. package/docs/demos/Toolbar/examples/Toolbar.md +44 -44
  38. package/package.json +5 -5
  39. package/patternfly-no-globals.css +43 -26
  40. package/patternfly-theme-dark-unversioned.css +43 -26
  41. package/patternfly.css +43 -26
  42. package/patternfly.min.css +1 -1
  43. package/patternfly.min.css.map +1 -1
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -366,73 +366,77 @@ wrapperTag: div
366
366
  >
367
367
  <label
368
368
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
369
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active"
369
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active"
370
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-input"
370
371
  >
371
372
  <input
372
373
  class="pf-v5-c-check__input"
373
374
  type="checkbox"
374
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active"
375
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active"
375
+ aria-describedby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-description"
376
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-input"
377
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-input"
376
378
  />
377
-
378
379
  <span class="pf-v5-c-check__label">Active</span>
379
380
  <span
380
381
  class="pf-v5-c-check__description"
382
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-description"
381
383
  >This is a description</span>
382
384
  </label>
383
385
  <label
384
386
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
385
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled"
387
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled"
388
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-input"
386
389
  >
387
390
  <input
388
391
  class="pf-v5-c-check__input"
389
392
  type="checkbox"
390
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled"
391
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled"
393
+ aria-describedby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-description"
394
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-input"
395
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-input"
392
396
  />
393
-
394
397
  <span class="pf-v5-c-check__label">Canceled</span>
395
398
  <span
396
399
  class="pf-v5-c-check__description"
400
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-description"
397
401
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
398
402
  </label>
399
403
  <label
400
404
  class="pf-v5-c-check pf-v5-c-select__menu-item"
401
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused"
405
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused"
406
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused-input"
402
407
  >
403
408
  <input
404
409
  class="pf-v5-c-check__input"
405
410
  type="checkbox"
406
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused"
407
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused"
411
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused-input"
412
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused-input"
408
413
  />
409
-
410
414
  <span class="pf-v5-c-check__label">Paused</span>
411
415
  </label>
412
416
  <label
413
417
  class="pf-v5-c-check pf-v5-c-select__menu-item"
414
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning"
418
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning"
419
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning-input"
415
420
  >
416
421
  <input
417
422
  class="pf-v5-c-check__input"
418
423
  type="checkbox"
419
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning"
420
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning"
424
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning-input"
425
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning-input"
421
426
  />
422
-
423
427
  <span class="pf-v5-c-check__label">Warning</span>
424
428
  </label>
425
429
  <label
426
430
  class="pf-v5-c-check pf-v5-c-select__menu-item"
427
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted"
431
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted"
432
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted-input"
428
433
  >
429
434
  <input
430
435
  class="pf-v5-c-check__input"
431
436
  type="checkbox"
432
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted"
433
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted"
437
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted-input"
438
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted-input"
434
439
  />
435
-
436
440
  <span class="pf-v5-c-check__label">Restarted</span>
437
441
  </label>
438
442
  </fieldset>
@@ -469,73 +473,77 @@ wrapperTag: div
469
473
  >
470
474
  <label
471
475
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
472
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active"
476
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active"
477
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-input"
473
478
  >
474
479
  <input
475
480
  class="pf-v5-c-check__input"
476
481
  type="checkbox"
477
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active"
478
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active"
482
+ aria-describedby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-description"
483
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-input"
484
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-input"
479
485
  />
480
-
481
486
  <span class="pf-v5-c-check__label">Active</span>
482
487
  <span
483
488
  class="pf-v5-c-check__description"
489
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-description"
484
490
  >This is a description</span>
485
491
  </label>
486
492
  <label
487
493
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
488
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled"
494
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled"
495
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-input"
489
496
  >
490
497
  <input
491
498
  class="pf-v5-c-check__input"
492
499
  type="checkbox"
493
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled"
494
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled"
500
+ aria-describedby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-description"
501
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-input"
502
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-input"
495
503
  />
496
-
497
504
  <span class="pf-v5-c-check__label">Canceled</span>
498
505
  <span
499
506
  class="pf-v5-c-check__description"
507
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-description"
500
508
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
501
509
  </label>
502
510
  <label
503
511
  class="pf-v5-c-check pf-v5-c-select__menu-item"
504
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused"
512
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused"
513
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused-input"
505
514
  >
506
515
  <input
507
516
  class="pf-v5-c-check__input"
508
517
  type="checkbox"
509
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused"
510
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused"
518
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused-input"
519
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused-input"
511
520
  />
512
-
513
521
  <span class="pf-v5-c-check__label">Paused</span>
514
522
  </label>
515
523
  <label
516
524
  class="pf-v5-c-check pf-v5-c-select__menu-item"
517
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning"
525
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning"
526
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning-input"
518
527
  >
519
528
  <input
520
529
  class="pf-v5-c-check__input"
521
530
  type="checkbox"
522
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning"
523
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning"
531
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning-input"
532
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning-input"
524
533
  />
525
-
526
534
  <span class="pf-v5-c-check__label">Warning</span>
527
535
  </label>
528
536
  <label
529
537
  class="pf-v5-c-check pf-v5-c-select__menu-item"
530
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted"
538
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted"
539
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted-input"
531
540
  >
532
541
  <input
533
542
  class="pf-v5-c-check__input"
534
543
  type="checkbox"
535
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted"
536
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted"
544
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted-input"
545
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted-input"
537
546
  />
538
-
539
547
  <span class="pf-v5-c-check__label">Restarted</span>
540
548
  </label>
541
549
  </fieldset>
@@ -1627,73 +1635,77 @@ wrapperTag: div
1627
1635
  >
1628
1636
  <label
1629
1637
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1630
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active"
1638
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active"
1639
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-input"
1631
1640
  >
1632
1641
  <input
1633
1642
  class="pf-v5-c-check__input"
1634
1643
  type="checkbox"
1635
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active"
1636
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active"
1644
+ aria-describedby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-description"
1645
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-input"
1646
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-input"
1637
1647
  />
1638
-
1639
1648
  <span class="pf-v5-c-check__label">Active</span>
1640
1649
  <span
1641
1650
  class="pf-v5-c-check__description"
1651
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-description"
1642
1652
  >This is a description</span>
1643
1653
  </label>
1644
1654
  <label
1645
1655
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1646
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled"
1656
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled"
1657
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-input"
1647
1658
  >
1648
1659
  <input
1649
1660
  class="pf-v5-c-check__input"
1650
1661
  type="checkbox"
1651
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled"
1652
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled"
1662
+ aria-describedby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-description"
1663
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-input"
1664
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-input"
1653
1665
  />
1654
-
1655
1666
  <span class="pf-v5-c-check__label">Canceled</span>
1656
1667
  <span
1657
1668
  class="pf-v5-c-check__description"
1669
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-description"
1658
1670
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1659
1671
  </label>
1660
1672
  <label
1661
1673
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1662
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused"
1674
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused"
1675
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused-input"
1663
1676
  >
1664
1677
  <input
1665
1678
  class="pf-v5-c-check__input"
1666
1679
  type="checkbox"
1667
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused"
1668
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused"
1680
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused-input"
1681
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused-input"
1669
1682
  />
1670
-
1671
1683
  <span class="pf-v5-c-check__label">Paused</span>
1672
1684
  </label>
1673
1685
  <label
1674
1686
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1675
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning"
1687
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning"
1688
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning-input"
1676
1689
  >
1677
1690
  <input
1678
1691
  class="pf-v5-c-check__input"
1679
1692
  type="checkbox"
1680
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning"
1681
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning"
1693
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning-input"
1694
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning-input"
1682
1695
  />
1683
-
1684
1696
  <span class="pf-v5-c-check__label">Warning</span>
1685
1697
  </label>
1686
1698
  <label
1687
1699
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1688
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted"
1700
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted"
1701
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted-input"
1689
1702
  >
1690
1703
  <input
1691
1704
  class="pf-v5-c-check__input"
1692
1705
  type="checkbox"
1693
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted"
1694
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted"
1706
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted-input"
1707
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted-input"
1695
1708
  />
1696
-
1697
1709
  <span class="pf-v5-c-check__label">Restarted</span>
1698
1710
  </label>
1699
1711
  </fieldset>
@@ -1730,73 +1742,77 @@ wrapperTag: div
1730
1742
  >
1731
1743
  <label
1732
1744
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1733
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active"
1745
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active"
1746
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-input"
1734
1747
  >
1735
1748
  <input
1736
1749
  class="pf-v5-c-check__input"
1737
1750
  type="checkbox"
1738
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active"
1739
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active"
1751
+ aria-describedby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-description"
1752
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-input"
1753
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-input"
1740
1754
  />
1741
-
1742
1755
  <span class="pf-v5-c-check__label">Active</span>
1743
1756
  <span
1744
1757
  class="pf-v5-c-check__description"
1758
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-description"
1745
1759
  >This is a description</span>
1746
1760
  </label>
1747
1761
  <label
1748
1762
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1749
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled"
1763
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled"
1764
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-input"
1750
1765
  >
1751
1766
  <input
1752
1767
  class="pf-v5-c-check__input"
1753
1768
  type="checkbox"
1754
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled"
1755
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled"
1769
+ aria-describedby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-description"
1770
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-input"
1771
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-input"
1756
1772
  />
1757
-
1758
1773
  <span class="pf-v5-c-check__label">Canceled</span>
1759
1774
  <span
1760
1775
  class="pf-v5-c-check__description"
1776
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-description"
1761
1777
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1762
1778
  </label>
1763
1779
  <label
1764
1780
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1765
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused"
1781
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused"
1782
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused-input"
1766
1783
  >
1767
1784
  <input
1768
1785
  class="pf-v5-c-check__input"
1769
1786
  type="checkbox"
1770
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused"
1771
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused"
1787
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused-input"
1788
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused-input"
1772
1789
  />
1773
-
1774
1790
  <span class="pf-v5-c-check__label">Paused</span>
1775
1791
  </label>
1776
1792
  <label
1777
1793
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1778
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning"
1794
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning"
1795
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning-input"
1779
1796
  >
1780
1797
  <input
1781
1798
  class="pf-v5-c-check__input"
1782
1799
  type="checkbox"
1783
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning"
1784
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning"
1800
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning-input"
1801
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning-input"
1785
1802
  />
1786
-
1787
1803
  <span class="pf-v5-c-check__label">Warning</span>
1788
1804
  </label>
1789
1805
  <label
1790
1806
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1791
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted"
1807
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted"
1808
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted-input"
1792
1809
  >
1793
1810
  <input
1794
1811
  class="pf-v5-c-check__input"
1795
1812
  type="checkbox"
1796
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted"
1797
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted"
1813
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted-input"
1814
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted-input"
1798
1815
  />
1799
-
1800
1816
  <span class="pf-v5-c-check__label">Restarted</span>
1801
1817
  </label>
1802
1818
  </fieldset>
@@ -2701,73 +2717,77 @@ wrapperTag: div
2701
2717
  >
2702
2718
  <label
2703
2719
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2704
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active"
2720
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active"
2721
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-input"
2705
2722
  >
2706
2723
  <input
2707
2724
  class="pf-v5-c-check__input"
2708
2725
  type="checkbox"
2709
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active"
2710
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active"
2726
+ aria-describedby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-description"
2727
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-input"
2728
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-input"
2711
2729
  />
2712
-
2713
2730
  <span class="pf-v5-c-check__label">Active</span>
2714
2731
  <span
2715
2732
  class="pf-v5-c-check__description"
2733
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-description"
2716
2734
  >This is a description</span>
2717
2735
  </label>
2718
2736
  <label
2719
2737
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2720
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled"
2738
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled"
2739
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-input"
2721
2740
  >
2722
2741
  <input
2723
2742
  class="pf-v5-c-check__input"
2724
2743
  type="checkbox"
2725
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled"
2726
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled"
2744
+ aria-describedby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-description"
2745
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-input"
2746
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-input"
2727
2747
  />
2728
-
2729
2748
  <span class="pf-v5-c-check__label">Canceled</span>
2730
2749
  <span
2731
2750
  class="pf-v5-c-check__description"
2751
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-description"
2732
2752
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2733
2753
  </label>
2734
2754
  <label
2735
2755
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2736
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused"
2756
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused"
2757
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused-input"
2737
2758
  >
2738
2759
  <input
2739
2760
  class="pf-v5-c-check__input"
2740
2761
  type="checkbox"
2741
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused"
2742
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused"
2762
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused-input"
2763
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused-input"
2743
2764
  />
2744
-
2745
2765
  <span class="pf-v5-c-check__label">Paused</span>
2746
2766
  </label>
2747
2767
  <label
2748
2768
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2749
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning"
2769
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning"
2770
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning-input"
2750
2771
  >
2751
2772
  <input
2752
2773
  class="pf-v5-c-check__input"
2753
2774
  type="checkbox"
2754
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning"
2755
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning"
2775
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning-input"
2776
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning-input"
2756
2777
  />
2757
-
2758
2778
  <span class="pf-v5-c-check__label">Warning</span>
2759
2779
  </label>
2760
2780
  <label
2761
2781
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2762
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted"
2782
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted"
2783
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted-input"
2763
2784
  >
2764
2785
  <input
2765
2786
  class="pf-v5-c-check__input"
2766
2787
  type="checkbox"
2767
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted"
2768
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted"
2788
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted-input"
2789
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted-input"
2769
2790
  />
2770
-
2771
2791
  <span class="pf-v5-c-check__label">Restarted</span>
2772
2792
  </label>
2773
2793
  </fieldset>
@@ -2804,73 +2824,77 @@ wrapperTag: div
2804
2824
  >
2805
2825
  <label
2806
2826
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2807
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active"
2827
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active"
2828
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-input"
2808
2829
  >
2809
2830
  <input
2810
2831
  class="pf-v5-c-check__input"
2811
2832
  type="checkbox"
2812
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active"
2813
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active"
2833
+ aria-describedby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-description"
2834
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-input"
2835
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-input"
2814
2836
  />
2815
-
2816
2837
  <span class="pf-v5-c-check__label">Active</span>
2817
2838
  <span
2818
2839
  class="pf-v5-c-check__description"
2840
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-description"
2819
2841
  >This is a description</span>
2820
2842
  </label>
2821
2843
  <label
2822
2844
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2823
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled"
2845
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled"
2846
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-input"
2824
2847
  >
2825
2848
  <input
2826
2849
  class="pf-v5-c-check__input"
2827
2850
  type="checkbox"
2828
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled"
2829
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled"
2851
+ aria-describedby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-description"
2852
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-input"
2853
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-input"
2830
2854
  />
2831
-
2832
2855
  <span class="pf-v5-c-check__label">Canceled</span>
2833
2856
  <span
2834
2857
  class="pf-v5-c-check__description"
2858
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-description"
2835
2859
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2836
2860
  </label>
2837
2861
  <label
2838
2862
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2839
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused"
2863
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused"
2864
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused-input"
2840
2865
  >
2841
2866
  <input
2842
2867
  class="pf-v5-c-check__input"
2843
2868
  type="checkbox"
2844
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused"
2845
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused"
2869
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused-input"
2870
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused-input"
2846
2871
  />
2847
-
2848
2872
  <span class="pf-v5-c-check__label">Paused</span>
2849
2873
  </label>
2850
2874
  <label
2851
2875
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2852
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning"
2876
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning"
2877
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning-input"
2853
2878
  >
2854
2879
  <input
2855
2880
  class="pf-v5-c-check__input"
2856
2881
  type="checkbox"
2857
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning"
2858
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning"
2882
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning-input"
2883
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning-input"
2859
2884
  />
2860
-
2861
2885
  <span class="pf-v5-c-check__label">Warning</span>
2862
2886
  </label>
2863
2887
  <label
2864
2888
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2865
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted"
2889
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted"
2890
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted-input"
2866
2891
  >
2867
2892
  <input
2868
2893
  class="pf-v5-c-check__input"
2869
2894
  type="checkbox"
2870
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted"
2871
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted"
2895
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted-input"
2896
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted-input"
2872
2897
  />
2873
-
2874
2898
  <span class="pf-v5-c-check__label">Restarted</span>
2875
2899
  </label>
2876
2900
  </fieldset>