@patternfly/patternfly 6.0.0-alpha.169 → 6.0.0-alpha.170

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 (27) hide show
  1. package/components/Card/card.css +3 -3
  2. package/components/Card/card.scss +3 -3
  3. package/components/_index.css +3 -3
  4. package/docs/components/InputGroup/examples/InputGroup.md +11 -53
  5. package/docs/components/Login/examples/Login.md +11 -42
  6. package/docs/demos/Card/examples/Card.md +64 -324
  7. package/docs/demos/CardView/examples/CardView.md +11 -103
  8. package/docs/demos/Dashboard/examples/Dashboard.md +22 -128
  9. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +105 -794
  10. package/docs/demos/Table/examples/Table.md +141 -1320
  11. package/docs/demos/Tabs/examples/Tabs.md +11 -103
  12. package/package.json +1 -1
  13. package/patternfly-no-globals.css +3 -3
  14. package/patternfly.css +3 -3
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
  17. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  18. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  19. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  20. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -907
  21. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  22. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  23. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  24. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  25. package/docs/components/Select/deprecated/Select.css +0 -56
  26. package/docs/components/Select/deprecated/Select.md +0 -3609
  27. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1781
@@ -384,236 +384,44 @@ wrapperTag: div
384
384
 
385
385
  <div class="pf-v6-c-toolbar__group pf-m-filter-group">
386
386
  <div class="pf-v6-c-toolbar__item">
387
- <div class="pf-v6-c-select">
388
- <span
389
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-label"
390
- hidden
391
- >Choose many</span>
392
-
393
- <button
394
- class="pf-v6-c-select__toggle"
395
- type="button"
396
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-toggle"
397
- aria-haspopup="true"
398
- aria-expanded="false"
399
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-label primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-toggle"
400
- >
401
- <div class="pf-v6-c-select__toggle-wrapper">
402
- <span
403
- class="pf-v6-c-select__toggle-text"
404
- >Status</span>
405
- </div>
406
- <span class="pf-v6-c-select__toggle-arrow">
387
+ <button
388
+ class="pf-v6-c-menu-toggle"
389
+ type="button"
390
+ aria-expanded="false"
391
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status"
392
+ >
393
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
394
+ <span class="pf-v6-c-menu-toggle__controls">
395
+ <span
396
+ class="pf-v6-c-menu-toggle__toggle-icon"
397
+ >
407
398
  <i
408
399
  class="fas fa-caret-down"
409
400
  aria-hidden="true"
410
401
  ></i>
411
402
  </span>
412
- </button>
413
-
414
- <div class="pf-v6-c-select__menu" hidden>
415
- <fieldset
416
- class="pf-v6-c-select__menu-fieldset"
417
- aria-label="Select input"
418
- >
419
- <label
420
- class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
421
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active"
422
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-input"
423
- >
424
- <input
425
- class="pf-v6-c-check__input"
426
- type="checkbox"
427
- aria-describedby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-description"
428
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-input"
429
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-input"
430
- />
431
- <span class="pf-v6-c-check__label">Active</span>
432
- <span
433
- class="pf-v6-c-check__description"
434
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-description"
435
- >This is a description</span>
436
- </label>
437
- <label
438
- class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
439
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled"
440
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-input"
441
- >
442
- <input
443
- class="pf-v6-c-check__input"
444
- type="checkbox"
445
- aria-describedby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-description"
446
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-input"
447
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-input"
448
- />
449
- <span
450
- class="pf-v6-c-check__label"
451
- >Canceled</span>
452
- <span
453
- class="pf-v6-c-check__description"
454
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-description"
455
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
456
- </label>
457
- <label
458
- class="pf-v6-c-check pf-v6-c-select__menu-item"
459
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused"
460
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused-input"
461
- >
462
- <input
463
- class="pf-v6-c-check__input"
464
- type="checkbox"
465
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused-input"
466
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused-input"
467
- />
468
- <span class="pf-v6-c-check__label">Paused</span>
469
- </label>
470
- <label
471
- class="pf-v6-c-check pf-v6-c-select__menu-item"
472
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning"
473
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning-input"
474
- >
475
- <input
476
- class="pf-v6-c-check__input"
477
- type="checkbox"
478
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning-input"
479
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning-input"
480
- />
481
- <span class="pf-v6-c-check__label">Warning</span>
482
- </label>
483
- <label
484
- class="pf-v6-c-check pf-v6-c-select__menu-item"
485
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted"
486
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted-input"
487
- >
488
- <input
489
- class="pf-v6-c-check__input"
490
- type="checkbox"
491
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted-input"
492
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted-input"
493
- />
494
- <span
495
- class="pf-v6-c-check__label"
496
- >Restarted</span>
497
- </label>
498
- </fieldset>
499
- </div>
500
- </div>
403
+ </span>
404
+ </button>
501
405
  </div>
502
406
  <div class="pf-v6-c-toolbar__item">
503
- <div class="pf-v6-c-select">
504
- <span
505
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-label"
506
- hidden
507
- >Choose many</span>
508
-
509
- <button
510
- class="pf-v6-c-select__toggle"
511
- type="button"
512
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-toggle"
513
- aria-haspopup="true"
514
- aria-expanded="false"
515
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-label primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-toggle"
516
- >
517
- <div class="pf-v6-c-select__toggle-wrapper">
518
- <span
519
- class="pf-v6-c-select__toggle-text"
520
- >Risk</span>
521
- </div>
522
- <span class="pf-v6-c-select__toggle-arrow">
407
+ <button
408
+ class="pf-v6-c-menu-toggle"
409
+ type="button"
410
+ aria-expanded="false"
411
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk"
412
+ >
413
+ <span class="pf-v6-c-menu-toggle__text">Risk</span>
414
+ <span class="pf-v6-c-menu-toggle__controls">
415
+ <span
416
+ class="pf-v6-c-menu-toggle__toggle-icon"
417
+ >
523
418
  <i
524
419
  class="fas fa-caret-down"
525
420
  aria-hidden="true"
526
421
  ></i>
527
422
  </span>
528
- </button>
529
-
530
- <div class="pf-v6-c-select__menu" hidden>
531
- <fieldset
532
- class="pf-v6-c-select__menu-fieldset"
533
- aria-label="Select input"
534
- >
535
- <label
536
- class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
537
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active"
538
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-input"
539
- >
540
- <input
541
- class="pf-v6-c-check__input"
542
- type="checkbox"
543
- aria-describedby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-description"
544
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-input"
545
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-input"
546
- />
547
- <span class="pf-v6-c-check__label">Active</span>
548
- <span
549
- class="pf-v6-c-check__description"
550
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-description"
551
- >This is a description</span>
552
- </label>
553
- <label
554
- class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
555
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled"
556
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-input"
557
- >
558
- <input
559
- class="pf-v6-c-check__input"
560
- type="checkbox"
561
- aria-describedby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-description"
562
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-input"
563
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-input"
564
- />
565
- <span
566
- class="pf-v6-c-check__label"
567
- >Canceled</span>
568
- <span
569
- class="pf-v6-c-check__description"
570
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-description"
571
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
572
- </label>
573
- <label
574
- class="pf-v6-c-check pf-v6-c-select__menu-item"
575
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused"
576
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused-input"
577
- >
578
- <input
579
- class="pf-v6-c-check__input"
580
- type="checkbox"
581
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused-input"
582
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused-input"
583
- />
584
- <span class="pf-v6-c-check__label">Paused</span>
585
- </label>
586
- <label
587
- class="pf-v6-c-check pf-v6-c-select__menu-item"
588
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning"
589
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning-input"
590
- >
591
- <input
592
- class="pf-v6-c-check__input"
593
- type="checkbox"
594
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning-input"
595
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning-input"
596
- />
597
- <span class="pf-v6-c-check__label">Warning</span>
598
- </label>
599
- <label
600
- class="pf-v6-c-check pf-v6-c-select__menu-item"
601
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted"
602
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted-input"
603
- >
604
- <input
605
- class="pf-v6-c-check__input"
606
- type="checkbox"
607
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted-input"
608
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted-input"
609
- />
610
- <span
611
- class="pf-v6-c-check__label"
612
- >Restarted</span>
613
- </label>
614
- </fieldset>
615
- </div>
616
- </div>
423
+ </span>
424
+ </button>
617
425
  </div>
618
426
  </div>
619
427
  </div>
@@ -1733,236 +1541,44 @@ wrapperTag: div
1733
1541
 
1734
1542
  <div class="pf-v6-c-toolbar__group pf-m-filter-group">
1735
1543
  <div class="pf-v6-c-toolbar__item">
1736
- <div class="pf-v6-c-select">
1737
- <span
1738
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-label"
1739
- hidden
1740
- >Choose many</span>
1741
-
1742
- <button
1743
- class="pf-v6-c-select__toggle"
1744
- type="button"
1745
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-toggle"
1746
- aria-haspopup="true"
1747
- aria-expanded="false"
1748
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-label primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-toggle"
1749
- >
1750
- <div class="pf-v6-c-select__toggle-wrapper">
1751
- <span
1752
- class="pf-v6-c-select__toggle-text"
1753
- >Status</span>
1754
- </div>
1755
- <span class="pf-v6-c-select__toggle-arrow">
1544
+ <button
1545
+ class="pf-v6-c-menu-toggle"
1546
+ type="button"
1547
+ aria-expanded="false"
1548
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status"
1549
+ >
1550
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
1551
+ <span class="pf-v6-c-menu-toggle__controls">
1552
+ <span
1553
+ class="pf-v6-c-menu-toggle__toggle-icon"
1554
+ >
1756
1555
  <i
1757
1556
  class="fas fa-caret-down"
1758
1557
  aria-hidden="true"
1759
1558
  ></i>
1760
1559
  </span>
1761
- </button>
1762
-
1763
- <div class="pf-v6-c-select__menu" hidden>
1764
- <fieldset
1765
- class="pf-v6-c-select__menu-fieldset"
1766
- aria-label="Select input"
1767
- >
1768
- <label
1769
- class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
1770
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active"
1771
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-input"
1772
- >
1773
- <input
1774
- class="pf-v6-c-check__input"
1775
- type="checkbox"
1776
- aria-describedby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-description"
1777
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-input"
1778
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-input"
1779
- />
1780
- <span class="pf-v6-c-check__label">Active</span>
1781
- <span
1782
- class="pf-v6-c-check__description"
1783
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-description"
1784
- >This is a description</span>
1785
- </label>
1786
- <label
1787
- class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
1788
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled"
1789
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-input"
1790
- >
1791
- <input
1792
- class="pf-v6-c-check__input"
1793
- type="checkbox"
1794
- aria-describedby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-description"
1795
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-input"
1796
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-input"
1797
- />
1798
- <span
1799
- class="pf-v6-c-check__label"
1800
- >Canceled</span>
1801
- <span
1802
- class="pf-v6-c-check__description"
1803
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-description"
1804
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1805
- </label>
1806
- <label
1807
- class="pf-v6-c-check pf-v6-c-select__menu-item"
1808
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused"
1809
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused-input"
1810
- >
1811
- <input
1812
- class="pf-v6-c-check__input"
1813
- type="checkbox"
1814
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused-input"
1815
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused-input"
1816
- />
1817
- <span class="pf-v6-c-check__label">Paused</span>
1818
- </label>
1819
- <label
1820
- class="pf-v6-c-check pf-v6-c-select__menu-item"
1821
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning"
1822
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning-input"
1823
- >
1824
- <input
1825
- class="pf-v6-c-check__input"
1826
- type="checkbox"
1827
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning-input"
1828
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning-input"
1829
- />
1830
- <span class="pf-v6-c-check__label">Warning</span>
1831
- </label>
1832
- <label
1833
- class="pf-v6-c-check pf-v6-c-select__menu-item"
1834
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted"
1835
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted-input"
1836
- >
1837
- <input
1838
- class="pf-v6-c-check__input"
1839
- type="checkbox"
1840
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted-input"
1841
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted-input"
1842
- />
1843
- <span
1844
- class="pf-v6-c-check__label"
1845
- >Restarted</span>
1846
- </label>
1847
- </fieldset>
1848
- </div>
1849
- </div>
1560
+ </span>
1561
+ </button>
1850
1562
  </div>
1851
1563
  <div class="pf-v6-c-toolbar__item">
1852
- <div class="pf-v6-c-select">
1853
- <span
1854
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-label"
1855
- hidden
1856
- >Choose many</span>
1857
-
1858
- <button
1859
- class="pf-v6-c-select__toggle"
1860
- type="button"
1861
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-toggle"
1862
- aria-haspopup="true"
1863
- aria-expanded="false"
1864
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-label primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-toggle"
1865
- >
1866
- <div class="pf-v6-c-select__toggle-wrapper">
1867
- <span
1868
- class="pf-v6-c-select__toggle-text"
1869
- >Risk</span>
1870
- </div>
1871
- <span class="pf-v6-c-select__toggle-arrow">
1564
+ <button
1565
+ class="pf-v6-c-menu-toggle"
1566
+ type="button"
1567
+ aria-expanded="false"
1568
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk"
1569
+ >
1570
+ <span class="pf-v6-c-menu-toggle__text">Risk</span>
1571
+ <span class="pf-v6-c-menu-toggle__controls">
1572
+ <span
1573
+ class="pf-v6-c-menu-toggle__toggle-icon"
1574
+ >
1872
1575
  <i
1873
1576
  class="fas fa-caret-down"
1874
1577
  aria-hidden="true"
1875
1578
  ></i>
1876
1579
  </span>
1877
- </button>
1878
-
1879
- <div class="pf-v6-c-select__menu" hidden>
1880
- <fieldset
1881
- class="pf-v6-c-select__menu-fieldset"
1882
- aria-label="Select input"
1883
- >
1884
- <label
1885
- class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
1886
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active"
1887
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-input"
1888
- >
1889
- <input
1890
- class="pf-v6-c-check__input"
1891
- type="checkbox"
1892
- aria-describedby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-description"
1893
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-input"
1894
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-input"
1895
- />
1896
- <span class="pf-v6-c-check__label">Active</span>
1897
- <span
1898
- class="pf-v6-c-check__description"
1899
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-description"
1900
- >This is a description</span>
1901
- </label>
1902
- <label
1903
- class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
1904
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled"
1905
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-input"
1906
- >
1907
- <input
1908
- class="pf-v6-c-check__input"
1909
- type="checkbox"
1910
- aria-describedby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-description"
1911
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-input"
1912
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-input"
1913
- />
1914
- <span
1915
- class="pf-v6-c-check__label"
1916
- >Canceled</span>
1917
- <span
1918
- class="pf-v6-c-check__description"
1919
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-description"
1920
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1921
- </label>
1922
- <label
1923
- class="pf-v6-c-check pf-v6-c-select__menu-item"
1924
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused"
1925
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused-input"
1926
- >
1927
- <input
1928
- class="pf-v6-c-check__input"
1929
- type="checkbox"
1930
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused-input"
1931
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused-input"
1932
- />
1933
- <span class="pf-v6-c-check__label">Paused</span>
1934
- </label>
1935
- <label
1936
- class="pf-v6-c-check pf-v6-c-select__menu-item"
1937
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning"
1938
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning-input"
1939
- >
1940
- <input
1941
- class="pf-v6-c-check__input"
1942
- type="checkbox"
1943
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning-input"
1944
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning-input"
1945
- />
1946
- <span class="pf-v6-c-check__label">Warning</span>
1947
- </label>
1948
- <label
1949
- class="pf-v6-c-check pf-v6-c-select__menu-item"
1950
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted"
1951
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted-input"
1952
- >
1953
- <input
1954
- class="pf-v6-c-check__input"
1955
- type="checkbox"
1956
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted-input"
1957
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted-input"
1958
- />
1959
- <span
1960
- class="pf-v6-c-check__label"
1961
- >Restarted</span>
1962
- </label>
1963
- </fieldset>
1964
- </div>
1965
- </div>
1580
+ </span>
1581
+ </button>
1966
1582
  </div>
1967
1583
  </div>
1968
1584
  </div>
@@ -2945,236 +2561,44 @@ wrapperTag: div
2945
2561
 
2946
2562
  <div class="pf-v6-c-toolbar__group pf-m-filter-group">
2947
2563
  <div class="pf-v6-c-toolbar__item">
2948
- <div class="pf-v6-c-select">
2949
- <span
2950
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-label"
2951
- hidden
2952
- >Choose many</span>
2953
-
2954
- <button
2955
- class="pf-v6-c-select__toggle"
2956
- type="button"
2957
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-toggle"
2958
- aria-haspopup="true"
2959
- aria-expanded="false"
2960
- aria-labelledby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-label primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-toggle"
2961
- >
2962
- <div class="pf-v6-c-select__toggle-wrapper">
2963
- <span
2964
- class="pf-v6-c-select__toggle-text"
2965
- >Status</span>
2966
- </div>
2967
- <span class="pf-v6-c-select__toggle-arrow">
2564
+ <button
2565
+ class="pf-v6-c-menu-toggle"
2566
+ type="button"
2567
+ aria-expanded="false"
2568
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status"
2569
+ >
2570
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
2571
+ <span class="pf-v6-c-menu-toggle__controls">
2572
+ <span
2573
+ class="pf-v6-c-menu-toggle__toggle-icon"
2574
+ >
2968
2575
  <i
2969
2576
  class="fas fa-caret-down"
2970
2577
  aria-hidden="true"
2971
2578
  ></i>
2972
2579
  </span>
2973
- </button>
2974
-
2975
- <div class="pf-v6-c-select__menu" hidden>
2976
- <fieldset
2977
- class="pf-v6-c-select__menu-fieldset"
2978
- aria-label="Select input"
2979
- >
2980
- <label
2981
- class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
2982
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active"
2983
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-input"
2984
- >
2985
- <input
2986
- class="pf-v6-c-check__input"
2987
- type="checkbox"
2988
- aria-describedby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-description"
2989
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-input"
2990
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-input"
2991
- />
2992
- <span class="pf-v6-c-check__label">Active</span>
2993
- <span
2994
- class="pf-v6-c-check__description"
2995
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-description"
2996
- >This is a description</span>
2997
- </label>
2998
- <label
2999
- class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
3000
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled"
3001
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-input"
3002
- >
3003
- <input
3004
- class="pf-v6-c-check__input"
3005
- type="checkbox"
3006
- aria-describedby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-description"
3007
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-input"
3008
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-input"
3009
- />
3010
- <span
3011
- class="pf-v6-c-check__label"
3012
- >Canceled</span>
3013
- <span
3014
- class="pf-v6-c-check__description"
3015
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-description"
3016
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3017
- </label>
3018
- <label
3019
- class="pf-v6-c-check pf-v6-c-select__menu-item"
3020
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused"
3021
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused-input"
3022
- >
3023
- <input
3024
- class="pf-v6-c-check__input"
3025
- type="checkbox"
3026
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused-input"
3027
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused-input"
3028
- />
3029
- <span class="pf-v6-c-check__label">Paused</span>
3030
- </label>
3031
- <label
3032
- class="pf-v6-c-check pf-v6-c-select__menu-item"
3033
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning"
3034
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning-input"
3035
- >
3036
- <input
3037
- class="pf-v6-c-check__input"
3038
- type="checkbox"
3039
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning-input"
3040
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning-input"
3041
- />
3042
- <span class="pf-v6-c-check__label">Warning</span>
3043
- </label>
3044
- <label
3045
- class="pf-v6-c-check pf-v6-c-select__menu-item"
3046
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted"
3047
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted-input"
3048
- >
3049
- <input
3050
- class="pf-v6-c-check__input"
3051
- type="checkbox"
3052
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted-input"
3053
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted-input"
3054
- />
3055
- <span
3056
- class="pf-v6-c-check__label"
3057
- >Restarted</span>
3058
- </label>
3059
- </fieldset>
3060
- </div>
3061
- </div>
2580
+ </span>
2581
+ </button>
3062
2582
  </div>
3063
2583
  <div class="pf-v6-c-toolbar__item">
3064
- <div class="pf-v6-c-select">
3065
- <span
3066
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-label"
3067
- hidden
3068
- >Choose many</span>
3069
-
3070
- <button
3071
- class="pf-v6-c-select__toggle"
3072
- type="button"
3073
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-toggle"
3074
- aria-haspopup="true"
3075
- aria-expanded="false"
3076
- aria-labelledby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-label primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-toggle"
3077
- >
3078
- <div class="pf-v6-c-select__toggle-wrapper">
3079
- <span
3080
- class="pf-v6-c-select__toggle-text"
3081
- >Risk</span>
3082
- </div>
3083
- <span class="pf-v6-c-select__toggle-arrow">
2584
+ <button
2585
+ class="pf-v6-c-menu-toggle"
2586
+ type="button"
2587
+ aria-expanded="false"
2588
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk"
2589
+ >
2590
+ <span class="pf-v6-c-menu-toggle__text">Risk</span>
2591
+ <span class="pf-v6-c-menu-toggle__controls">
2592
+ <span
2593
+ class="pf-v6-c-menu-toggle__toggle-icon"
2594
+ >
3084
2595
  <i
3085
2596
  class="fas fa-caret-down"
3086
2597
  aria-hidden="true"
3087
2598
  ></i>
3088
2599
  </span>
3089
- </button>
3090
-
3091
- <div class="pf-v6-c-select__menu" hidden>
3092
- <fieldset
3093
- class="pf-v6-c-select__menu-fieldset"
3094
- aria-label="Select input"
3095
- >
3096
- <label
3097
- class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
3098
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active"
3099
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-input"
3100
- >
3101
- <input
3102
- class="pf-v6-c-check__input"
3103
- type="checkbox"
3104
- aria-describedby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-description"
3105
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-input"
3106
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-input"
3107
- />
3108
- <span class="pf-v6-c-check__label">Active</span>
3109
- <span
3110
- class="pf-v6-c-check__description"
3111
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-description"
3112
- >This is a description</span>
3113
- </label>
3114
- <label
3115
- class="pf-v6-c-check pf-v6-c-select__menu-item pf-m-description"
3116
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled"
3117
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-input"
3118
- >
3119
- <input
3120
- class="pf-v6-c-check__input"
3121
- type="checkbox"
3122
- aria-describedby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-description"
3123
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-input"
3124
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-input"
3125
- />
3126
- <span
3127
- class="pf-v6-c-check__label"
3128
- >Canceled</span>
3129
- <span
3130
- class="pf-v6-c-check__description"
3131
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-description"
3132
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3133
- </label>
3134
- <label
3135
- class="pf-v6-c-check pf-v6-c-select__menu-item"
3136
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused"
3137
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused-input"
3138
- >
3139
- <input
3140
- class="pf-v6-c-check__input"
3141
- type="checkbox"
3142
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused-input"
3143
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused-input"
3144
- />
3145
- <span class="pf-v6-c-check__label">Paused</span>
3146
- </label>
3147
- <label
3148
- class="pf-v6-c-check pf-v6-c-select__menu-item"
3149
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning"
3150
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning-input"
3151
- >
3152
- <input
3153
- class="pf-v6-c-check__input"
3154
- type="checkbox"
3155
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning-input"
3156
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning-input"
3157
- />
3158
- <span class="pf-v6-c-check__label">Warning</span>
3159
- </label>
3160
- <label
3161
- class="pf-v6-c-check pf-v6-c-select__menu-item"
3162
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted"
3163
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted-input"
3164
- >
3165
- <input
3166
- class="pf-v6-c-check__input"
3167
- type="checkbox"
3168
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted-input"
3169
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted-input"
3170
- />
3171
- <span
3172
- class="pf-v6-c-check__label"
3173
- >Restarted</span>
3174
- </label>
3175
- </fieldset>
3176
- </div>
3177
- </div>
2600
+ </span>
2601
+ </button>
3178
2602
  </div>
3179
2603
  </div>
3180
2604
  </div>
@@ -5762,83 +5186,23 @@ wrapperTag: div
5762
5186
  <div class="pf-v6-c-toolbar__content">
5763
5187
  <div class="pf-v6-c-toolbar__content-section">
5764
5188
  <div class="pf-v6-c-toolbar__item">
5765
- <div class="pf-v6-c-select" style="width: 150px">
5766
- <span
5767
- id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-select-dropdown-label"
5768
- hidden
5769
- >Choose one</span>
5770
-
5771
- <button
5772
- class="pf-v6-c-select__toggle"
5773
- type="button"
5774
- id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-select-dropdown-toggle"
5775
- aria-haspopup="true"
5776
- aria-expanded="false"
5777
- aria-labelledby="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-select-dropdown-label primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-select-dropdown-toggle"
5778
- >
5779
- <div class="pf-v6-c-select__toggle-wrapper">
5780
- <span
5781
- class="pf-v6-c-select__toggle-text"
5782
- >Dropdown</span>
5783
- </div>
5784
- <span class="pf-v6-c-select__toggle-arrow">
5189
+ <button
5190
+ class="pf-v6-c-menu-toggle"
5191
+ type="button"
5192
+ aria-expanded="false"
5193
+ id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-select-dropdown"
5194
+ style="width: 150px"
5195
+ >
5196
+ <span class="pf-v6-c-menu-toggle__text">Dropdown</span>
5197
+ <span class="pf-v6-c-menu-toggle__controls">
5198
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
5785
5199
  <i
5786
5200
  class="fas fa-caret-down"
5787
5201
  aria-hidden="true"
5788
5202
  ></i>
5789
5203
  </span>
5790
- </button>
5791
-
5792
- <ul
5793
- class="pf-v6-c-select__menu"
5794
- role="listbox"
5795
- aria-labelledby="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-select-dropdown-label"
5796
- hidden
5797
- style="width: 150px"
5798
- >
5799
- <li role="presentation">
5800
- <button
5801
- class="pf-v6-c-select__menu-item"
5802
- role="option"
5803
- >Running</button>
5804
- </li>
5805
- <li role="presentation">
5806
- <button
5807
- class="pf-v6-c-select__menu-item pf-m-selected"
5808
- role="option"
5809
- aria-selected="true"
5810
- >
5811
- Stopped
5812
- <span
5813
- class="pf-v6-c-select__menu-item-icon"
5814
- >
5815
- <i
5816
- class="fas fa-check"
5817
- aria-hidden="true"
5818
- ></i>
5819
- </span>
5820
- </button>
5821
- </li>
5822
- <li role="presentation">
5823
- <button
5824
- class="pf-v6-c-select__menu-item"
5825
- role="option"
5826
- >Down</button>
5827
- </li>
5828
- <li role="presentation">
5829
- <button
5830
- class="pf-v6-c-select__menu-item"
5831
- role="option"
5832
- >Degraded</button>
5833
- </li>
5834
- <li role="presentation">
5835
- <button
5836
- class="pf-v6-c-select__menu-item"
5837
- role="option"
5838
- >Needs maintenance</button>
5839
- </li>
5840
- </ul>
5841
- </div>
5204
+ </span>
5205
+ </button>
5842
5206
  </div>
5843
5207
  <div class="pf-v6-c-toolbar__item pf-m-pagination">
5844
5208
  <div class="pf-v6-c-pagination">
@@ -6465,76 +5829,23 @@ wrapperTag: div
6465
5829
  <div class="pf-v6-c-toolbar__content">
6466
5830
  <div class="pf-v6-c-toolbar__content-section pf-m-nowrap">
6467
5831
  <div class="pf-v6-c-toolbar__item">
6468
- <div class="pf-v6-c-select" style="width: 150px">
6469
- <span
6470
- id="primary-detail-inline-modifier-example-drawer-toolbar-select-status-label"
6471
- hidden
6472
- >Choose one</span>
6473
-
6474
- <button
6475
- class="pf-v6-c-select__toggle"
6476
- type="button"
6477
- id="primary-detail-inline-modifier-example-drawer-toolbar-select-status-toggle"
6478
- aria-haspopup="true"
6479
- aria-expanded="false"
6480
- aria-labelledby="primary-detail-inline-modifier-example-drawer-toolbar-select-status-label primary-detail-inline-modifier-example-drawer-toolbar-select-status-toggle"
6481
- >
6482
- <div class="pf-v6-c-select__toggle-wrapper">
6483
- <span class="pf-v6-c-select__toggle-icon">
6484
- <i class="fas fa-bookmark" aria-hidden="true"></i>
6485
- </span>
6486
- <span class="pf-v6-c-select__toggle-text">Status</span>
6487
- </div>
6488
- <span class="pf-v6-c-select__toggle-arrow">
5832
+ <button
5833
+ class="pf-v6-c-menu-toggle"
5834
+ type="button"
5835
+ aria-expanded="false"
5836
+ id="primary-detail-inline-modifier-example-drawer-toolbar-select-status"
5837
+ style="width: 150px"
5838
+ >
5839
+ <span class="pf-v6-c-menu-toggle__icon">
5840
+ <i class="fas fa-bookmark" aria-hidden="true"></i>
5841
+ </span>
5842
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
5843
+ <span class="pf-v6-c-menu-toggle__controls">
5844
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
6489
5845
  <i class="fas fa-caret-down" aria-hidden="true"></i>
6490
5846
  </span>
6491
- </button>
6492
-
6493
- <ul
6494
- class="pf-v6-c-select__menu"
6495
- role="listbox"
6496
- aria-labelledby="primary-detail-inline-modifier-example-drawer-toolbar-select-status-label"
6497
- hidden
6498
- style="width: 150px"
6499
- >
6500
- <li role="presentation">
6501
- <button
6502
- class="pf-v6-c-select__menu-item"
6503
- role="option"
6504
- >Running</button>
6505
- </li>
6506
- <li role="presentation">
6507
- <button
6508
- class="pf-v6-c-select__menu-item pf-m-selected"
6509
- role="option"
6510
- aria-selected="true"
6511
- >
6512
- Stopped
6513
- <span class="pf-v6-c-select__menu-item-icon">
6514
- <i class="fas fa-check" aria-hidden="true"></i>
6515
- </span>
6516
- </button>
6517
- </li>
6518
- <li role="presentation">
6519
- <button
6520
- class="pf-v6-c-select__menu-item"
6521
- role="option"
6522
- >Down</button>
6523
- </li>
6524
- <li role="presentation">
6525
- <button
6526
- class="pf-v6-c-select__menu-item"
6527
- role="option"
6528
- >Degraded</button>
6529
- </li>
6530
- <li role="presentation">
6531
- <button
6532
- class="pf-v6-c-select__menu-item"
6533
- role="option"
6534
- >Needs maintenance</button>
6535
- </li>
6536
- </ul>
6537
- </div>
5847
+ </span>
5848
+ </button>
6538
5849
  </div>
6539
5850
 
6540
5851
  <div