@patternfly/patternfly 6.3.0-prerelease.25 → 6.3.0-prerelease.26

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 (50) hide show
  1. package/components/Button/button.css +103 -0
  2. package/components/Button/button.scss +103 -2
  3. package/components/MenuToggle/menu-toggle.css +30 -0
  4. package/components/MenuToggle/menu-toggle.scss +33 -0
  5. package/components/Page/page.css +45 -0
  6. package/components/Page/page.scss +29 -0
  7. package/components/_index.css +178 -0
  8. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  9. package/docs/components/Button/examples/Button.md +85 -3
  10. package/docs/components/Card/examples/Card.md +8 -8
  11. package/docs/components/DataList/examples/DataList.md +23 -23
  12. package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
  13. package/docs/components/Hint/examples/Hint.md +3 -3
  14. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  15. package/docs/components/Masthead/examples/masthead.md +90 -12
  16. package/docs/components/Menu/examples/Menu.md +2 -2
  17. package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
  18. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  19. package/docs/components/Page/examples/Page.md +147 -14
  20. package/docs/components/Pagination/examples/Pagination.md +12 -12
  21. package/docs/components/Table/examples/Table.md +240 -240
  22. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  23. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  24. package/docs/demos/Alert/examples/Alert.md +66 -9
  25. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  26. package/docs/demos/Banner/examples/Banner.md +47 -6
  27. package/docs/demos/Card/examples/Card.md +4 -4
  28. package/docs/demos/CardView/examples/CardView.md +24 -5
  29. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  30. package/docs/demos/DataList/examples/DataList.md +100 -24
  31. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -9
  32. package/docs/demos/Drawer/examples/Drawer.md +110 -15
  33. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  34. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  35. package/docs/demos/Modal/examples/Modal.md +132 -18
  36. package/docs/demos/Nav/examples/Nav.md +111 -16
  37. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  38. package/docs/demos/Page/examples/Page.md +309 -43
  39. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -27
  40. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  41. package/docs/demos/Table/examples/Table.md +435 -150
  42. package/docs/demos/Tabs/examples/Tabs.md +137 -23
  43. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  44. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  45. package/package.json +1 -1
  46. package/patternfly-no-globals.css +178 -0
  47. package/patternfly.css +178 -0
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
  50. package/sass-utilities/mixins.scss +35 -0
@@ -589,7 +589,7 @@ Several components in the following examples do not include functional and/or ac
589
589
  <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
590
590
  <div class="pf-v6-c-toolbar__toggle">
591
591
  <button
592
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
592
+ class="pf-v6-c-menu-toggle pf-m-expanded pf-m-plain"
593
593
  type="button"
594
594
  aria-expanded="true"
595
595
  aria-label="Show filters"
@@ -1196,7 +1196,7 @@ Several components in the following examples do not include functional and/or ac
1196
1196
  <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
1197
1197
  <div class="pf-v6-c-toolbar__toggle">
1198
1198
  <button
1199
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
1199
+ class="pf-v6-c-menu-toggle pf-m-expanded pf-m-plain"
1200
1200
  type="button"
1201
1201
  aria-expanded="true"
1202
1202
  aria-label="Show filters"
@@ -1667,7 +1667,7 @@ Several components in the following examples do not include functional and/or ac
1667
1667
  class="pf-v6-c-menu-toggle pf-m-plain"
1668
1668
  type="button"
1669
1669
  aria-expanded="false"
1670
- aria-label="Menu toggle"
1670
+ aria-label="Toggle options"
1671
1671
  id="toolbar-selected-filters-example-overflow-toggle"
1672
1672
  >
1673
1673
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1919,7 +1919,7 @@ Several components in the following examples do not include functional and/or ac
1919
1919
  class="pf-v6-c-menu-toggle pf-m-plain"
1920
1920
  type="button"
1921
1921
  aria-expanded="false"
1922
- aria-label="Menu toggle"
1922
+ aria-label="Toggle options"
1923
1923
  id="toolbar-stacked-example-overflow-toggle"
1924
1924
  >
1925
1925
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1972,7 +1972,7 @@ Several components in the following examples do not include functional and/or ac
1972
1972
  <div class="pf-v6-c-pagination__total-items">37 items</div>
1973
1973
  <div class="pf-v6-c-pagination__page-menu">
1974
1974
  <button
1975
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1975
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1976
1976
  type="button"
1977
1977
  aria-expanded="false"
1978
1978
  aria-label="Menu toggle"
@@ -2071,7 +2071,7 @@ Several components in the following examples do not include functional and/or ac
2071
2071
  <div class="pf-v6-c-toolbar__group pf-m-toggle-group">
2072
2072
  <div class="pf-v6-c-toolbar__toggle">
2073
2073
  <button
2074
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
2074
+ class="pf-v6-c-menu-toggle pf-m-expanded pf-m-plain"
2075
2075
  type="button"
2076
2076
  aria-expanded="true"
2077
2077
  aria-label="Show filters"
@@ -2393,7 +2393,7 @@ Several components in the following examples do not include functional and/or ac
2393
2393
  <div class="pf-v6-c-pagination__total-items">37 items</div>
2394
2394
  <div class="pf-v6-c-pagination__page-menu">
2395
2395
  <button
2396
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2396
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2397
2397
  type="button"
2398
2398
  aria-expanded="false"
2399
2399
  aria-label="Menu toggle"
@@ -21,12 +21,31 @@ This demo implements the about modal, including the backdrop.
21
21
  <div class="pf-v6-c-masthead__main">
22
22
  <span class="pf-v6-c-masthead__toggle">
23
23
  <button
24
- class="pf-v6-c-button pf-m-plain"
24
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
25
25
  type="button"
26
26
  aria-label="Global navigation"
27
27
  >
28
28
  <span class="pf-v6-c-button__icon">
29
- <i class="fas fa-bars" aria-hidden="true"></i>
29
+ <svg
30
+ viewBox="0 0 10 10"
31
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
32
+ width="1em"
33
+ height="1em"
34
+ >
35
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
36
+ <path
37
+ class="pf-v6-c-button--hamburger-icon--middle"
38
+ d="M1,5 L9,5"
39
+ />
40
+ <path
41
+ class="pf-v6-c-button--hamburger-icon--arrow"
42
+ d="M1,5 L1,5 L1,5"
43
+ />
44
+ <path
45
+ class="pf-v6-c-button--hamburger-icon--bottom"
46
+ d="M9,9 L1,9"
47
+ />
48
+ </svg>
30
49
  </span>
31
50
  </button>
32
51
  </span>
@@ -134,7 +153,7 @@ This demo implements the about modal, including the backdrop.
134
153
  </div>
135
154
  <div class="pf-v6-c-toolbar__item">
136
155
  <button
137
- class="pf-v6-c-menu-toggle pf-m-plain"
156
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
138
157
  type="button"
139
158
  aria-expanded="false"
140
159
  aria-label="Settings"
@@ -19,12 +19,31 @@ section: components
19
19
  <div class="pf-v6-c-masthead__main">
20
20
  <span class="pf-v6-c-masthead__toggle">
21
21
  <button
22
- class="pf-v6-c-button pf-m-plain"
22
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
23
23
  type="button"
24
24
  aria-label="Global navigation"
25
25
  >
26
26
  <span class="pf-v6-c-button__icon">
27
- <i class="fas fa-bars" aria-hidden="true"></i>
27
+ <svg
28
+ viewBox="0 0 10 10"
29
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
30
+ width="1em"
31
+ height="1em"
32
+ >
33
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
34
+ <path
35
+ class="pf-v6-c-button--hamburger-icon--middle"
36
+ d="M1,5 L9,5"
37
+ />
38
+ <path
39
+ class="pf-v6-c-button--hamburger-icon--arrow"
40
+ d="M1,5 L1,5 L1,5"
41
+ />
42
+ <path
43
+ class="pf-v6-c-button--hamburger-icon--bottom"
44
+ d="M9,9 L1,9"
45
+ />
46
+ </svg>
28
47
  </span>
29
48
  </button>
30
49
  </span>
@@ -132,7 +151,7 @@ section: components
132
151
  </div>
133
152
  <div class="pf-v6-c-toolbar__item">
134
153
  <button
135
- class="pf-v6-c-menu-toggle pf-m-plain"
154
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
136
155
  type="button"
137
156
  aria-expanded="false"
138
157
  aria-label="Settings"
@@ -398,12 +417,31 @@ section: components
398
417
  <div class="pf-v6-c-masthead__main">
399
418
  <span class="pf-v6-c-masthead__toggle">
400
419
  <button
401
- class="pf-v6-c-button pf-m-plain"
420
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
402
421
  type="button"
403
422
  aria-label="Global navigation"
404
423
  >
405
424
  <span class="pf-v6-c-button__icon">
406
- <i class="fas fa-bars" aria-hidden="true"></i>
425
+ <svg
426
+ viewBox="0 0 10 10"
427
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
428
+ width="1em"
429
+ height="1em"
430
+ >
431
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
432
+ <path
433
+ class="pf-v6-c-button--hamburger-icon--middle"
434
+ d="M1,5 L9,5"
435
+ />
436
+ <path
437
+ class="pf-v6-c-button--hamburger-icon--arrow"
438
+ d="M1,5 L1,5 L1,5"
439
+ />
440
+ <path
441
+ class="pf-v6-c-button--hamburger-icon--bottom"
442
+ d="M9,9 L1,9"
443
+ />
444
+ </svg>
407
445
  </span>
408
446
  </button>
409
447
  </span>
@@ -511,7 +549,7 @@ section: components
511
549
  </div>
512
550
  <div class="pf-v6-c-toolbar__item">
513
551
  <button
514
- class="pf-v6-c-menu-toggle pf-m-plain"
552
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
515
553
  type="button"
516
554
  aria-expanded="false"
517
555
  aria-label="Settings"
@@ -877,12 +915,31 @@ section: components
877
915
  <div class="pf-v6-c-masthead__main">
878
916
  <span class="pf-v6-c-masthead__toggle">
879
917
  <button
880
- class="pf-v6-c-button pf-m-plain"
918
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
881
919
  type="button"
882
920
  aria-label="Global navigation"
883
921
  >
884
922
  <span class="pf-v6-c-button__icon">
885
- <i class="fas fa-bars" aria-hidden="true"></i>
923
+ <svg
924
+ viewBox="0 0 10 10"
925
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
926
+ width="1em"
927
+ height="1em"
928
+ >
929
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
930
+ <path
931
+ class="pf-v6-c-button--hamburger-icon--middle"
932
+ d="M1,5 L9,5"
933
+ />
934
+ <path
935
+ class="pf-v6-c-button--hamburger-icon--arrow"
936
+ d="M1,5 L1,5 L1,5"
937
+ />
938
+ <path
939
+ class="pf-v6-c-button--hamburger-icon--bottom"
940
+ d="M9,9 L1,9"
941
+ />
942
+ </svg>
886
943
  </span>
887
944
  </button>
888
945
  </span>
@@ -990,7 +1047,7 @@ section: components
990
1047
  </div>
991
1048
  <div class="pf-v6-c-toolbar__item">
992
1049
  <button
993
- class="pf-v6-c-menu-toggle pf-m-plain"
1050
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
994
1051
  type="button"
995
1052
  aria-expanded="false"
996
1053
  aria-label="Settings"
@@ -20,12 +20,31 @@ cssPrefix: pf-d-back-to-top
20
20
  <div class="pf-v6-c-masthead__main">
21
21
  <span class="pf-v6-c-masthead__toggle">
22
22
  <button
23
- class="pf-v6-c-button pf-m-plain"
23
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
24
24
  type="button"
25
25
  aria-label="Global navigation"
26
26
  >
27
27
  <span class="pf-v6-c-button__icon">
28
- <i class="fas fa-bars" aria-hidden="true"></i>
28
+ <svg
29
+ viewBox="0 0 10 10"
30
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
31
+ width="1em"
32
+ height="1em"
33
+ >
34
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
35
+ <path
36
+ class="pf-v6-c-button--hamburger-icon--middle"
37
+ d="M1,5 L9,5"
38
+ />
39
+ <path
40
+ class="pf-v6-c-button--hamburger-icon--arrow"
41
+ d="M1,5 L1,5 L1,5"
42
+ />
43
+ <path
44
+ class="pf-v6-c-button--hamburger-icon--bottom"
45
+ d="M9,9 L1,9"
46
+ />
47
+ </svg>
29
48
  </span>
30
49
  </button>
31
50
  </span>
@@ -133,7 +152,7 @@ cssPrefix: pf-d-back-to-top
133
152
  </div>
134
153
  <div class="pf-v6-c-toolbar__item">
135
154
  <button
136
- class="pf-v6-c-menu-toggle pf-m-plain"
155
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
137
156
  type="button"
138
157
  aria-expanded="false"
139
158
  aria-label="Settings"
@@ -21,12 +21,31 @@ wrapperTag: div
21
21
  <div class="pf-v6-c-masthead__main">
22
22
  <span class="pf-v6-c-masthead__toggle">
23
23
  <button
24
- class="pf-v6-c-button pf-m-plain"
24
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
25
25
  type="button"
26
26
  aria-label="Global navigation"
27
27
  >
28
28
  <span class="pf-v6-c-button__icon">
29
- <i class="fas fa-bars" aria-hidden="true"></i>
29
+ <svg
30
+ viewBox="0 0 10 10"
31
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
32
+ width="1em"
33
+ height="1em"
34
+ >
35
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
36
+ <path
37
+ class="pf-v6-c-button--hamburger-icon--middle"
38
+ d="M1,5 L9,5"
39
+ />
40
+ <path
41
+ class="pf-v6-c-button--hamburger-icon--arrow"
42
+ d="M1,5 L1,5 L1,5"
43
+ />
44
+ <path
45
+ class="pf-v6-c-button--hamburger-icon--bottom"
46
+ d="M9,9 L1,9"
47
+ />
48
+ </svg>
30
49
  </span>
31
50
  </button>
32
51
  </span>
@@ -134,7 +153,7 @@ wrapperTag: div
134
153
  </div>
135
154
  <div class="pf-v6-c-toolbar__item">
136
155
  <button
137
- class="pf-v6-c-menu-toggle pf-m-plain"
156
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
138
157
  type="button"
139
158
  aria-expanded="false"
140
159
  aria-label="Settings"
@@ -481,12 +500,34 @@ wrapperTag: div
481
500
  <div class="pf-v6-c-masthead__main">
482
501
  <span class="pf-v6-c-masthead__toggle">
483
502
  <button
484
- class="pf-v6-c-button pf-m-plain"
503
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
485
504
  type="button"
486
505
  aria-label="Global navigation"
487
506
  >
488
507
  <span class="pf-v6-c-button__icon">
489
- <i class="fas fa-bars" aria-hidden="true"></i>
508
+ <svg
509
+ viewBox="0 0 10 10"
510
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
511
+ width="1em"
512
+ height="1em"
513
+ >
514
+ <path
515
+ class="pf-v6-c-button--hamburger-icon--top"
516
+ d="M1,1 L9,1"
517
+ />
518
+ <path
519
+ class="pf-v6-c-button--hamburger-icon--middle"
520
+ d="M1,5 L9,5"
521
+ />
522
+ <path
523
+ class="pf-v6-c-button--hamburger-icon--arrow"
524
+ d="M1,5 L1,5 L1,5"
525
+ />
526
+ <path
527
+ class="pf-v6-c-button--hamburger-icon--bottom"
528
+ d="M9,9 L1,9"
529
+ />
530
+ </svg>
490
531
  </span>
491
532
  </button>
492
533
  </span>
@@ -599,7 +640,7 @@ wrapperTag: div
599
640
  </div>
600
641
  <div class="pf-v6-c-toolbar__item">
601
642
  <button
602
- class="pf-v6-c-menu-toggle pf-m-plain"
643
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
603
644
  type="button"
604
645
  aria-expanded="false"
605
646
  aria-label="Settings"
@@ -1925,7 +1925,7 @@ wrapperTag: div
1925
1925
  </div>
1926
1926
  <div class="pf-v6-c-card__actions pf-m-no-offset">
1927
1927
  <button
1928
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1928
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1929
1929
  type="button"
1930
1930
  aria-expanded="false"
1931
1931
  id="utilization-card-3-example-select-dropdown"
@@ -2686,7 +2686,7 @@ wrapperTag: div
2686
2686
  style="padding-block-start: 1px;"
2687
2687
  >
2688
2688
  <button
2689
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2689
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2690
2690
  type="button"
2691
2691
  aria-expanded="false"
2692
2692
  id="trend-card-1-example-select-dropdown"
@@ -2763,7 +2763,7 @@ wrapperTag: div
2763
2763
  <div class="pf-v6-c-card__header pf-v6-u-align-items-flex-start">
2764
2764
  <div class="pf-v6-c-card__actions pf-m-no-offset">
2765
2765
  <button
2766
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2766
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2767
2767
  type="button"
2768
2768
  aria-expanded="false"
2769
2769
  id="card-log-view-example-select-dropdown"
@@ -2886,7 +2886,7 @@ wrapperTag: div
2886
2886
  <div class="pf-v6-c-card__header pf-v6-u-align-items-flex-start">
2887
2887
  <div class="pf-v6-c-card__actions pf-m-no-offset">
2888
2888
  <button
2889
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2889
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2890
2890
  type="button"
2891
2891
  aria-expanded="false"
2892
2892
  id="card-events-view-example-select-dropdown"
@@ -19,12 +19,31 @@ section: patterns
19
19
  <div class="pf-v6-c-masthead__main">
20
20
  <span class="pf-v6-c-masthead__toggle">
21
21
  <button
22
- class="pf-v6-c-button pf-m-plain"
22
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
23
23
  type="button"
24
24
  aria-label="Global navigation"
25
25
  >
26
26
  <span class="pf-v6-c-button__icon">
27
- <i class="fas fa-bars" aria-hidden="true"></i>
27
+ <svg
28
+ viewBox="0 0 10 10"
29
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
30
+ width="1em"
31
+ height="1em"
32
+ >
33
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
34
+ <path
35
+ class="pf-v6-c-button--hamburger-icon--middle"
36
+ d="M1,5 L9,5"
37
+ />
38
+ <path
39
+ class="pf-v6-c-button--hamburger-icon--arrow"
40
+ d="M1,5 L1,5 L1,5"
41
+ />
42
+ <path
43
+ class="pf-v6-c-button--hamburger-icon--bottom"
44
+ d="M9,9 L1,9"
45
+ />
46
+ </svg>
28
47
  </span>
29
48
  </button>
30
49
  </span>
@@ -132,7 +151,7 @@ section: patterns
132
151
  </div>
133
152
  <div class="pf-v6-c-toolbar__item">
134
153
  <button
135
- class="pf-v6-c-menu-toggle pf-m-plain"
154
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
136
155
  type="button"
137
156
  aria-expanded="false"
138
157
  aria-label="Settings"
@@ -466,7 +485,7 @@ section: patterns
466
485
  <div class="pf-v6-c-pagination pf-m-compact">
467
486
  <div class="pf-v6-c-pagination__page-menu">
468
487
  <button
469
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
488
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
470
489
  type="button"
471
490
  aria-expanded="false"
472
491
  aria-label="Menu toggle"
@@ -1016,7 +1035,7 @@ section: patterns
1016
1035
  <div class="pf-v6-c-pagination pf-m-bottom">
1017
1036
  <div class="pf-v6-c-pagination__page-menu">
1018
1037
  <button
1019
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
1038
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
1020
1039
  type="button"
1021
1040
  aria-expanded="false"
1022
1041
  aria-label="Menu toggle"
@@ -17,12 +17,31 @@ cssPrefix: pf-d-dashboard
17
17
  <div class="pf-v6-c-masthead__main">
18
18
  <span class="pf-v6-c-masthead__toggle">
19
19
  <button
20
- class="pf-v6-c-button pf-m-plain"
20
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
21
21
  type="button"
22
22
  aria-label="Global navigation"
23
23
  >
24
24
  <span class="pf-v6-c-button__icon">
25
- <i class="fas fa-bars" aria-hidden="true"></i>
25
+ <svg
26
+ viewBox="0 0 10 10"
27
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
28
+ width="1em"
29
+ height="1em"
30
+ >
31
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
32
+ <path
33
+ class="pf-v6-c-button--hamburger-icon--middle"
34
+ d="M1,5 L9,5"
35
+ />
36
+ <path
37
+ class="pf-v6-c-button--hamburger-icon--arrow"
38
+ d="M1,5 L1,5 L1,5"
39
+ />
40
+ <path
41
+ class="pf-v6-c-button--hamburger-icon--bottom"
42
+ d="M9,9 L1,9"
43
+ />
44
+ </svg>
26
45
  </span>
27
46
  </button>
28
47
  </span>
@@ -130,7 +149,7 @@ cssPrefix: pf-d-dashboard
130
149
  </div>
131
150
  <div class="pf-v6-c-toolbar__item">
132
151
  <button
133
- class="pf-v6-c-menu-toggle pf-m-plain"
152
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
134
153
  type="button"
135
154
  aria-expanded="false"
136
155
  aria-label="Settings"
@@ -869,7 +888,7 @@ cssPrefix: pf-d-dashboard
869
888
  <div class="pf-v6-c-card__header">
870
889
  <div class="pf-v6-c-card__actions pf-m-no-offset">
871
890
  <button
872
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
891
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
873
892
  type="button"
874
893
  aria-expanded="false"
875
894
  id="dashboard-demo-line-chart-card-1-select-dropdown"
@@ -1349,7 +1368,7 @@ cssPrefix: pf-d-dashboard
1349
1368
  <div class="pf-v6-c-card__header">
1350
1369
  <div class="pf-v6-c-card__actions pf-m-no-offset">
1351
1370
  <button
1352
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1371
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1353
1372
  type="button"
1354
1373
  aria-expanded="false"
1355
1374
  id="dashboard-demo-events-card-1-select-dropdown"