@patternfly/patternfly 6.0.0-alpha.16 → 6.0.0-alpha.18

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 (64) 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/base/_globals.scss +1 -1
  10. package/base/patternfly-variables.css +1 -1
  11. package/base/tokens/_tokens-font.scss +2 -2
  12. package/components/Accordion/accordion.css +10 -1
  13. package/components/Accordion/accordion.scss +13 -1
  14. package/components/Alert/alert.css +1 -1
  15. package/components/Alert/alert.scss +1 -1
  16. package/components/Button/button.css +1 -1
  17. package/components/Button/button.scss +1 -3
  18. package/components/Check/check.css +10 -8
  19. package/components/Check/check.scss +15 -10
  20. package/components/Dropdown/dropdown.css +1 -3
  21. package/components/Dropdown/dropdown.scss +2 -6
  22. package/components/Menu/menu.css +3 -0
  23. package/components/Menu/menu.scss +7 -3
  24. package/components/MenuToggle/menu-toggle.css +2 -3
  25. package/components/MenuToggle/menu-toggle.scss +2 -6
  26. package/components/Page/page.css +6 -4
  27. package/components/Page/page.scss +6 -4
  28. package/components/Radio/radio.css +13 -10
  29. package/components/Radio/radio.scss +17 -11
  30. package/components/Switch/switch.css +1 -1
  31. package/components/Switch/switch.scss +1 -1
  32. package/components/Table/table.css +6 -2
  33. package/components/Table/table.scss +7 -2
  34. package/components/Toolbar/toolbar.css +9 -1
  35. package/components/Toolbar/toolbar.scss +16 -3
  36. package/docs/components/Accordion/examples/Accordion.md +95 -0
  37. package/docs/components/Brand/examples/Brand.css +12 -0
  38. package/docs/components/Brand/examples/Brand.md +75 -32
  39. package/docs/components/Card/examples/Card.md +110 -2
  40. package/docs/components/LogViewer/examples/LogViewer.md +130 -130
  41. package/docs/components/Menu/examples/Menu.md +507 -473
  42. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  43. package/docs/components/Nav/examples/Navigation.md +140 -113
  44. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  45. package/docs/components/Toolbar/examples/Toolbar.md +480 -2807
  46. package/docs/demos/CardView/examples/CardView.md +32 -51
  47. package/docs/demos/DataList/examples/DataList.md +184 -320
  48. package/docs/demos/Masthead/examples/Masthead.md +51 -210
  49. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -1
  50. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +83 -271
  51. package/docs/demos/Table/examples/Table.md +1017 -1800
  52. package/docs/demos/Tabs/examples/Tabs.md +2 -2
  53. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  54. package/docs/demos/Toolbar/examples/Toolbar.md +703 -1027
  55. package/package.json +2 -2
  56. package/patternfly-base-no-globals-theme-dark-unversioned.css +1 -1
  57. package/patternfly-base-no-globals.css +1 -1
  58. package/patternfly-base-theme-dark-unversioned.css +1 -1
  59. package/patternfly-base.css +1 -1
  60. package/patternfly-no-globals.css +64 -36
  61. package/patternfly-theme-dark-unversioned.css +64 -36
  62. package/patternfly.css +64 -36
  63. package/patternfly.min.css +1 -1
  64. package/patternfly.min.css.map +1 -1
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -655,10 +655,10 @@ wrapperTag: div
655
655
  >
656
656
  <div class="pf-v5-c-toolbar__toggle">
657
657
  <button
658
- class="pf-v5-c-button pf-m-plain"
658
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
659
659
  type="button"
660
- aria-label="Show filters"
661
660
  aria-expanded="true"
661
+ aria-label="Show filters"
662
662
  aria-controls="masthead-toolbar-filters-example-masthead-toolbar-expandable-content"
663
663
  >
664
664
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -671,75 +671,22 @@ wrapperTag: div
671
671
  role="group"
672
672
  >
673
673
  <div class="pf-v5-c-input-group__item">
674
- <div class="pf-v5-c-select" style="width: 124px">
675
- <span
676
- id="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
677
- hidden
678
- >Choose one</span>
679
-
680
- <button
681
- class="pf-v5-c-select__toggle"
682
- type="button"
683
- id="masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
684
- aria-haspopup="true"
685
- aria-expanded="false"
686
- aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
687
- >
688
- <div class="pf-v5-c-select__toggle-wrapper">
689
- <span class="pf-v5-c-select__toggle-icon">
690
- <i class="fas fa-filter" aria-hidden="true"></i>
691
- </span>
692
- <span class="pf-v5-c-select__toggle-text">Name</span>
693
- </div>
694
- <span class="pf-v5-c-select__toggle-arrow">
695
- <i class="fas fa-caret-down" aria-hidden="true"></i>
674
+ <button
675
+ class="pf-v5-c-menu-toggle"
676
+ type="button"
677
+ aria-expanded="false"
678
+ id="masthead-toolbar-filters-example-masthead-toolbar-search-filter-menu"
679
+ >
680
+ <span class="pf-v5-c-menu-toggle__icon">
681
+ <i class="fas fa-filter" aria-hidden="true"></i>
682
+ </span>
683
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
684
+ <span class="pf-v5-c-menu-toggle__controls">
685
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
686
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
696
687
  </span>
697
- </button>
698
-
699
- <ul
700
- class="pf-v5-c-select__menu"
701
- role="listbox"
702
- aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
703
- hidden
704
- >
705
- <li role="presentation">
706
- <button
707
- class="pf-v5-c-select__menu-item"
708
- role="option"
709
- >Running</button>
710
- </li>
711
- <li role="presentation">
712
- <button
713
- class="pf-v5-c-select__menu-item pf-m-selected"
714
- role="option"
715
- aria-selected="true"
716
- >
717
- Stopped
718
- <span class="pf-v5-c-select__menu-item-icon">
719
- <i class="fas fa-check" aria-hidden="true"></i>
720
- </span>
721
- </button>
722
- </li>
723
- <li role="presentation">
724
- <button
725
- class="pf-v5-c-select__menu-item"
726
- role="option"
727
- >Down</button>
728
- </li>
729
- <li role="presentation">
730
- <button
731
- class="pf-v5-c-select__menu-item"
732
- role="option"
733
- >Degraded</button>
734
- </li>
735
- <li role="presentation">
736
- <button
737
- class="pf-v5-c-select__menu-item"
738
- role="option"
739
- >Needs maintenance</button>
740
- </li>
741
- </ul>
742
- </div>
688
+ </span>
689
+ </button>
743
690
  </div>
744
691
  <div class="pf-v5-c-input-group__item pf-m-fill">
745
692
  <div class="pf-v5-c-text-input-group">
@@ -1023,10 +970,10 @@ wrapperTag: div
1023
970
  >
1024
971
  <div class="pf-v5-c-toolbar__toggle">
1025
972
  <button
1026
- class="pf-v5-c-button pf-m-plain"
973
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
1027
974
  type="button"
1028
- aria-label="Show filters"
1029
975
  aria-expanded="true"
976
+ aria-label="Show filters"
1030
977
  aria-controls="masthead-toggle-group-filters-example-masthead-toolbar-expandable-content"
1031
978
  >
1032
979
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -1039,75 +986,22 @@ wrapperTag: div
1039
986
  role="group"
1040
987
  >
1041
988
  <div class="pf-v5-c-input-group__item">
1042
- <div class="pf-v5-c-select" style="width: 124px">
1043
- <span
1044
- id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1045
- hidden
1046
- >Choose one</span>
1047
-
1048
- <button
1049
- class="pf-v5-c-select__toggle"
1050
- type="button"
1051
- id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
1052
- aria-haspopup="true"
1053
- aria-expanded="false"
1054
- aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
1055
- >
1056
- <div class="pf-v5-c-select__toggle-wrapper">
1057
- <span class="pf-v5-c-select__toggle-icon">
1058
- <i class="fas fa-filter" aria-hidden="true"></i>
1059
- </span>
1060
- <span class="pf-v5-c-select__toggle-text">Name</span>
1061
- </div>
1062
- <span class="pf-v5-c-select__toggle-arrow">
1063
- <i class="fas fa-caret-down" aria-hidden="true"></i>
989
+ <button
990
+ class="pf-v5-c-menu-toggle"
991
+ type="button"
992
+ aria-expanded="false"
993
+ id="masthead-toggle-group-filters-example-masthead-toolbar-search-filter-menu"
994
+ >
995
+ <span class="pf-v5-c-menu-toggle__icon">
996
+ <i class="fas fa-filter" aria-hidden="true"></i>
997
+ </span>
998
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
999
+ <span class="pf-v5-c-menu-toggle__controls">
1000
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1001
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1064
1002
  </span>
1065
- </button>
1066
-
1067
- <ul
1068
- class="pf-v5-c-select__menu"
1069
- role="listbox"
1070
- aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1071
- hidden
1072
- >
1073
- <li role="presentation">
1074
- <button
1075
- class="pf-v5-c-select__menu-item"
1076
- role="option"
1077
- >Running</button>
1078
- </li>
1079
- <li role="presentation">
1080
- <button
1081
- class="pf-v5-c-select__menu-item pf-m-selected"
1082
- role="option"
1083
- aria-selected="true"
1084
- >
1085
- Stopped
1086
- <span class="pf-v5-c-select__menu-item-icon">
1087
- <i class="fas fa-check" aria-hidden="true"></i>
1088
- </span>
1089
- </button>
1090
- </li>
1091
- <li role="presentation">
1092
- <button
1093
- class="pf-v5-c-select__menu-item"
1094
- role="option"
1095
- >Down</button>
1096
- </li>
1097
- <li role="presentation">
1098
- <button
1099
- class="pf-v5-c-select__menu-item"
1100
- role="option"
1101
- >Degraded</button>
1102
- </li>
1103
- <li role="presentation">
1104
- <button
1105
- class="pf-v5-c-select__menu-item"
1106
- role="option"
1107
- >Needs maintenance</button>
1108
- </li>
1109
- </ul>
1110
- </div>
1003
+ </span>
1004
+ </button>
1111
1005
  </div>
1112
1006
  <div class="pf-v5-c-input-group__item pf-m-fill">
1113
1007
  <div class="pf-v5-c-text-input-group">
@@ -2548,10 +2442,10 @@ wrapperTag: div
2548
2442
  >
2549
2443
  <div class="pf-v5-c-toolbar__toggle">
2550
2444
  <button
2551
- class="pf-v5-c-button pf-m-plain"
2445
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
2552
2446
  type="button"
2553
- aria-label="Show filters"
2554
2447
  aria-expanded="true"
2448
+ aria-label="Show filters"
2555
2449
  aria-controls="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-expandable-content"
2556
2450
  >
2557
2451
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -2580,75 +2474,22 @@ wrapperTag: div
2580
2474
  role="group"
2581
2475
  >
2582
2476
  <div class="pf-v5-c-input-group__item">
2583
- <div class="pf-v5-c-select" style="width: 124px">
2584
- <span
2585
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
2586
- hidden
2587
- >Choose one</span>
2588
-
2589
- <button
2590
- class="pf-v5-c-select__toggle"
2591
- type="button"
2592
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
2593
- aria-haspopup="true"
2594
- aria-expanded="false"
2595
- 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"
2596
- >
2597
- <div class="pf-v5-c-select__toggle-wrapper">
2598
- <span class="pf-v5-c-select__toggle-icon">
2599
- <i class="fas fa-filter" aria-hidden="true"></i>
2600
- </span>
2601
- <span class="pf-v5-c-select__toggle-text">Name</span>
2602
- </div>
2603
- <span class="pf-v5-c-select__toggle-arrow">
2604
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2477
+ <button
2478
+ class="pf-v5-c-menu-toggle"
2479
+ type="button"
2480
+ aria-expanded="false"
2481
+ id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-search-filter-menu"
2482
+ >
2483
+ <span class="pf-v5-c-menu-toggle__icon">
2484
+ <i class="fas fa-filter" aria-hidden="true"></i>
2485
+ </span>
2486
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
2487
+ <span class="pf-v5-c-menu-toggle__controls">
2488
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2489
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2605
2490
  </span>
2606
- </button>
2607
-
2608
- <ul
2609
- class="pf-v5-c-select__menu"
2610
- role="listbox"
2611
- aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
2612
- hidden
2613
- >
2614
- <li role="presentation">
2615
- <button
2616
- class="pf-v5-c-select__menu-item"
2617
- role="option"
2618
- >Running</button>
2619
- </li>
2620
- <li role="presentation">
2621
- <button
2622
- class="pf-v5-c-select__menu-item pf-m-selected"
2623
- role="option"
2624
- aria-selected="true"
2625
- >
2626
- Stopped
2627
- <span class="pf-v5-c-select__menu-item-icon">
2628
- <i class="fas fa-check" aria-hidden="true"></i>
2629
- </span>
2630
- </button>
2631
- </li>
2632
- <li role="presentation">
2633
- <button
2634
- class="pf-v5-c-select__menu-item"
2635
- role="option"
2636
- >Down</button>
2637
- </li>
2638
- <li role="presentation">
2639
- <button
2640
- class="pf-v5-c-select__menu-item"
2641
- role="option"
2642
- >Degraded</button>
2643
- </li>
2644
- <li role="presentation">
2645
- <button
2646
- class="pf-v5-c-select__menu-item"
2647
- role="option"
2648
- >Needs maintenance</button>
2649
- </li>
2650
- </ul>
2651
- </div>
2491
+ </span>
2492
+ </button>
2652
2493
  </div>
2653
2494
  <div class="pf-v5-c-input-group__item pf-m-fill">
2654
2495
  <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">