@patternfly/patternfly 5.2.0-prerelease.2 → 5.2.0-prerelease.4

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 (26) hide show
  1. package/components/Accordion/accordion.css +10 -1
  2. package/components/Accordion/accordion.scss +13 -1
  3. package/components/Switch/switch.css +1 -1
  4. package/components/Switch/switch.scss +1 -1
  5. package/docs/components/Accordion/examples/Accordion.md +95 -0
  6. package/docs/components/LogViewer/examples/LogViewer.md +130 -130
  7. package/docs/components/Menu/examples/Menu.md +507 -473
  8. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  9. package/docs/components/Nav/examples/Navigation.md +140 -113
  10. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  11. package/docs/components/Toolbar/examples/Toolbar.md +462 -2791
  12. package/docs/demos/CardView/examples/CardView.md +32 -51
  13. package/docs/demos/DataList/examples/DataList.md +182 -318
  14. package/docs/demos/Masthead/examples/Masthead.md +48 -207
  15. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -1
  16. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +80 -268
  17. package/docs/demos/Table/examples/Table.md +1004 -1787
  18. package/docs/demos/Tabs/examples/Tabs.md +2 -2
  19. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  20. package/docs/demos/Toolbar/examples/Toolbar.md +691 -1015
  21. package/package.json +2 -2
  22. package/patternfly-no-globals.css +11 -2
  23. package/patternfly-theme-dark-unversioned.css +11 -2
  24. package/patternfly.css +11 -2
  25. package/patternfly.min.css +1 -1
  26. package/patternfly.min.css.map +1 -1
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -430,10 +430,10 @@ wrapperTag: div
430
430
  >
431
431
  <div class="pf-v5-c-toolbar__toggle">
432
432
  <button
433
- class="pf-v5-c-button pf-m-plain"
433
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
434
434
  type="button"
435
- aria-label="Show filters"
436
435
  aria-expanded="true"
436
+ aria-label="Show filters"
437
437
  aria-controls="masthead-toolbar-filters-example-masthead-toolbar-expandable-content"
438
438
  >
439
439
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -446,75 +446,22 @@ wrapperTag: div
446
446
  role="group"
447
447
  >
448
448
  <div class="pf-v5-c-input-group__item">
449
- <div class="pf-v5-c-select" style="width: 124px">
450
- <span
451
- id="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
452
- hidden
453
- >Choose one</span>
454
-
455
- <button
456
- class="pf-v5-c-select__toggle"
457
- type="button"
458
- id="masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
459
- aria-haspopup="true"
460
- aria-expanded="false"
461
- aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
462
- >
463
- <div class="pf-v5-c-select__toggle-wrapper">
464
- <span class="pf-v5-c-select__toggle-icon">
465
- <i class="fas fa-filter" aria-hidden="true"></i>
466
- </span>
467
- <span class="pf-v5-c-select__toggle-text">Name</span>
468
- </div>
469
- <span class="pf-v5-c-select__toggle-arrow">
449
+ <button
450
+ class="pf-v5-c-menu-toggle"
451
+ type="button"
452
+ aria-expanded="false"
453
+ id="masthead-toolbar-filters-example-masthead-toolbar-search-filter-menu"
454
+ >
455
+ <span class="pf-v5-c-menu-toggle__icon">
456
+ <i class="fas fa-filter" aria-hidden="true"></i>
457
+ </span>
458
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
459
+ <span class="pf-v5-c-menu-toggle__controls">
460
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
470
461
  <i class="fas fa-caret-down" aria-hidden="true"></i>
471
462
  </span>
472
- </button>
473
-
474
- <ul
475
- class="pf-v5-c-select__menu"
476
- role="listbox"
477
- aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
478
- hidden
479
- >
480
- <li role="presentation">
481
- <button
482
- class="pf-v5-c-select__menu-item"
483
- role="option"
484
- >Running</button>
485
- </li>
486
- <li role="presentation">
487
- <button
488
- class="pf-v5-c-select__menu-item pf-m-selected"
489
- role="option"
490
- aria-selected="true"
491
- >
492
- Stopped
493
- <span class="pf-v5-c-select__menu-item-icon">
494
- <i class="fas fa-check" aria-hidden="true"></i>
495
- </span>
496
- </button>
497
- </li>
498
- <li role="presentation">
499
- <button
500
- class="pf-v5-c-select__menu-item"
501
- role="option"
502
- >Down</button>
503
- </li>
504
- <li role="presentation">
505
- <button
506
- class="pf-v5-c-select__menu-item"
507
- role="option"
508
- >Degraded</button>
509
- </li>
510
- <li role="presentation">
511
- <button
512
- class="pf-v5-c-select__menu-item"
513
- role="option"
514
- >Needs maintenance</button>
515
- </li>
516
- </ul>
517
- </div>
463
+ </span>
464
+ </button>
518
465
  </div>
519
466
  <div class="pf-v5-c-input-group__item pf-m-fill">
520
467
  <div class="pf-v5-c-text-input-group">
@@ -723,10 +670,10 @@ wrapperTag: div
723
670
  >
724
671
  <div class="pf-v5-c-toolbar__toggle">
725
672
  <button
726
- class="pf-v5-c-button pf-m-plain"
673
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
727
674
  type="button"
728
- aria-label="Show filters"
729
675
  aria-expanded="true"
676
+ aria-label="Show filters"
730
677
  aria-controls="masthead-toggle-group-filters-example-masthead-toolbar-expandable-content"
731
678
  >
732
679
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -739,75 +686,22 @@ wrapperTag: div
739
686
  role="group"
740
687
  >
741
688
  <div class="pf-v5-c-input-group__item">
742
- <div class="pf-v5-c-select" style="width: 124px">
743
- <span
744
- id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
745
- hidden
746
- >Choose one</span>
747
-
748
- <button
749
- class="pf-v5-c-select__toggle"
750
- type="button"
751
- id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
752
- aria-haspopup="true"
753
- aria-expanded="false"
754
- aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
755
- >
756
- <div class="pf-v5-c-select__toggle-wrapper">
757
- <span class="pf-v5-c-select__toggle-icon">
758
- <i class="fas fa-filter" aria-hidden="true"></i>
759
- </span>
760
- <span class="pf-v5-c-select__toggle-text">Name</span>
761
- </div>
762
- <span class="pf-v5-c-select__toggle-arrow">
689
+ <button
690
+ class="pf-v5-c-menu-toggle"
691
+ type="button"
692
+ aria-expanded="false"
693
+ id="masthead-toggle-group-filters-example-masthead-toolbar-search-filter-menu"
694
+ >
695
+ <span class="pf-v5-c-menu-toggle__icon">
696
+ <i class="fas fa-filter" aria-hidden="true"></i>
697
+ </span>
698
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
699
+ <span class="pf-v5-c-menu-toggle__controls">
700
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
763
701
  <i class="fas fa-caret-down" aria-hidden="true"></i>
764
702
  </span>
765
- </button>
766
-
767
- <ul
768
- class="pf-v5-c-select__menu"
769
- role="listbox"
770
- aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
771
- hidden
772
- >
773
- <li role="presentation">
774
- <button
775
- class="pf-v5-c-select__menu-item"
776
- role="option"
777
- >Running</button>
778
- </li>
779
- <li role="presentation">
780
- <button
781
- class="pf-v5-c-select__menu-item pf-m-selected"
782
- role="option"
783
- aria-selected="true"
784
- >
785
- Stopped
786
- <span class="pf-v5-c-select__menu-item-icon">
787
- <i class="fas fa-check" aria-hidden="true"></i>
788
- </span>
789
- </button>
790
- </li>
791
- <li role="presentation">
792
- <button
793
- class="pf-v5-c-select__menu-item"
794
- role="option"
795
- >Down</button>
796
- </li>
797
- <li role="presentation">
798
- <button
799
- class="pf-v5-c-select__menu-item"
800
- role="option"
801
- >Degraded</button>
802
- </li>
803
- <li role="presentation">
804
- <button
805
- class="pf-v5-c-select__menu-item"
806
- role="option"
807
- >Needs maintenance</button>
808
- </li>
809
- </ul>
810
- </div>
703
+ </span>
704
+ </button>
811
705
  </div>
812
706
  <div class="pf-v5-c-input-group__item pf-m-fill">
813
707
  <div class="pf-v5-c-text-input-group">
@@ -1873,10 +1767,10 @@ wrapperTag: div
1873
1767
  >
1874
1768
  <div class="pf-v5-c-toolbar__toggle">
1875
1769
  <button
1876
- class="pf-v5-c-button pf-m-plain"
1770
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
1877
1771
  type="button"
1878
- aria-label="Show filters"
1879
1772
  aria-expanded="true"
1773
+ aria-label="Show filters"
1880
1774
  aria-controls="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-expandable-content"
1881
1775
  >
1882
1776
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -1905,75 +1799,22 @@ wrapperTag: div
1905
1799
  role="group"
1906
1800
  >
1907
1801
  <div class="pf-v5-c-input-group__item">
1908
- <div class="pf-v5-c-select" style="width: 124px">
1909
- <span
1910
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
1911
- hidden
1912
- >Choose one</span>
1913
-
1914
- <button
1915
- class="pf-v5-c-select__toggle"
1916
- type="button"
1917
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
1918
- aria-haspopup="true"
1919
- aria-expanded="false"
1920
- aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
1921
- >
1922
- <div class="pf-v5-c-select__toggle-wrapper">
1923
- <span class="pf-v5-c-select__toggle-icon">
1924
- <i class="fas fa-filter" aria-hidden="true"></i>
1925
- </span>
1926
- <span class="pf-v5-c-select__toggle-text">Name</span>
1927
- </div>
1928
- <span class="pf-v5-c-select__toggle-arrow">
1802
+ <button
1803
+ class="pf-v5-c-menu-toggle"
1804
+ type="button"
1805
+ aria-expanded="false"
1806
+ id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-search-filter-menu"
1807
+ >
1808
+ <span class="pf-v5-c-menu-toggle__icon">
1809
+ <i class="fas fa-filter" aria-hidden="true"></i>
1810
+ </span>
1811
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
1812
+ <span class="pf-v5-c-menu-toggle__controls">
1813
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1929
1814
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1930
1815
  </span>
1931
- </button>
1932
-
1933
- <ul
1934
- class="pf-v5-c-select__menu"
1935
- role="listbox"
1936
- aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
1937
- hidden
1938
- >
1939
- <li role="presentation">
1940
- <button
1941
- class="pf-v5-c-select__menu-item"
1942
- role="option"
1943
- >Running</button>
1944
- </li>
1945
- <li role="presentation">
1946
- <button
1947
- class="pf-v5-c-select__menu-item pf-m-selected"
1948
- role="option"
1949
- aria-selected="true"
1950
- >
1951
- Stopped
1952
- <span class="pf-v5-c-select__menu-item-icon">
1953
- <i class="fas fa-check" aria-hidden="true"></i>
1954
- </span>
1955
- </button>
1956
- </li>
1957
- <li role="presentation">
1958
- <button
1959
- class="pf-v5-c-select__menu-item"
1960
- role="option"
1961
- >Down</button>
1962
- </li>
1963
- <li role="presentation">
1964
- <button
1965
- class="pf-v5-c-select__menu-item"
1966
- role="option"
1967
- >Degraded</button>
1968
- </li>
1969
- <li role="presentation">
1970
- <button
1971
- class="pf-v5-c-select__menu-item"
1972
- role="option"
1973
- >Needs maintenance</button>
1974
- </li>
1975
- </ul>
1976
- </div>
1816
+ </span>
1817
+ </button>
1977
1818
  </div>
1978
1819
  <div class="pf-v5-c-input-group__item pf-m-fill">
1979
1820
  <div class="pf-v5-c-text-input-group">
package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md CHANGED
@@ -52,7 +52,7 @@ section: components
52
52
  <div class="pf-v5-c-menu">
53
53
  <div class="pf-v5-c-menu__content">
54
54
  <ul class="pf-v5-c-menu__list" role="menu">
55
- <li class="pf-v5-c-menu__list-item" role="none">
55
+ <li class="pf-v5-c-menu__list-item" role="group">
56
56
  <button class="pf-v5-c-menu__item" type="button" role="menuitem">
57
57
  <span class="pf-v5-c-menu__item-main">
58
58
  <span
@@ -63,6 +63,7 @@ section: components
63
63
  <button
64
64
  class="pf-v5-c-menu__item-action"
65
65
  type="button"
66
+ role="menuitem"
66
67
  aria-label="Generate a new suggested password"
67
68
  >
68
69
  <span class="pf-v5-c-menu__item-action-icon">