@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
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -20,12 +20,31 @@ wrapperTag: div
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 @@ wrapperTag: div
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"
@@ -339,7 +358,7 @@ wrapperTag: div
339
358
  <div class="pf-v6-c-pagination pf-m-compact">
340
359
  <div class="pf-v6-c-pagination__page-menu">
341
360
  <button
342
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
361
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
343
362
  type="button"
344
363
  aria-expanded="false"
345
364
  aria-label="Menu toggle"
@@ -744,7 +763,7 @@ wrapperTag: div
744
763
  <div class="pf-v6-c-pagination pf-m-bottom">
745
764
  <div class="pf-v6-c-pagination__page-menu">
746
765
  <button
747
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
766
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
748
767
  type="button"
749
768
  aria-expanded="false"
750
769
  aria-label="Menu toggle"
@@ -847,12 +866,31 @@ wrapperTag: div
847
866
  <div class="pf-v6-c-masthead__main">
848
867
  <span class="pf-v6-c-masthead__toggle">
849
868
  <button
850
- class="pf-v6-c-button pf-m-plain"
869
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
851
870
  type="button"
852
871
  aria-label="Global navigation"
853
872
  >
854
873
  <span class="pf-v6-c-button__icon">
855
- <i class="fas fa-bars" aria-hidden="true"></i>
874
+ <svg
875
+ viewBox="0 0 10 10"
876
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
877
+ width="1em"
878
+ height="1em"
879
+ >
880
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
881
+ <path
882
+ class="pf-v6-c-button--hamburger-icon--middle"
883
+ d="M1,5 L9,5"
884
+ />
885
+ <path
886
+ class="pf-v6-c-button--hamburger-icon--arrow"
887
+ d="M1,5 L1,5 L1,5"
888
+ />
889
+ <path
890
+ class="pf-v6-c-button--hamburger-icon--bottom"
891
+ d="M9,9 L1,9"
892
+ />
893
+ </svg>
856
894
  </span>
857
895
  </button>
858
896
  </span>
@@ -960,7 +998,7 @@ wrapperTag: div
960
998
  </div>
961
999
  <div class="pf-v6-c-toolbar__item">
962
1000
  <button
963
- class="pf-v6-c-menu-toggle pf-m-plain"
1001
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
964
1002
  type="button"
965
1003
  aria-expanded="false"
966
1004
  aria-label="Settings"
@@ -1198,7 +1236,7 @@ wrapperTag: div
1198
1236
  <div class="pf-v6-c-pagination pf-m-compact">
1199
1237
  <div class="pf-v6-c-pagination__page-menu">
1200
1238
  <button
1201
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1239
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1202
1240
  type="button"
1203
1241
  aria-expanded="false"
1204
1242
  aria-label="Menu toggle"
@@ -1581,7 +1619,7 @@ wrapperTag: div
1581
1619
  <div class="pf-v6-c-pagination pf-m-bottom">
1582
1620
  <div class="pf-v6-c-pagination__page-menu">
1583
1621
  <button
1584
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
1622
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
1585
1623
  type="button"
1586
1624
  aria-expanded="false"
1587
1625
  aria-label="Menu toggle"
@@ -1684,12 +1722,31 @@ wrapperTag: div
1684
1722
  <div class="pf-v6-c-masthead__main">
1685
1723
  <span class="pf-v6-c-masthead__toggle">
1686
1724
  <button
1687
- class="pf-v6-c-button pf-m-plain"
1725
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1688
1726
  type="button"
1689
1727
  aria-label="Global navigation"
1690
1728
  >
1691
1729
  <span class="pf-v6-c-button__icon">
1692
- <i class="fas fa-bars" aria-hidden="true"></i>
1730
+ <svg
1731
+ viewBox="0 0 10 10"
1732
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1733
+ width="1em"
1734
+ height="1em"
1735
+ >
1736
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1737
+ <path
1738
+ class="pf-v6-c-button--hamburger-icon--middle"
1739
+ d="M1,5 L9,5"
1740
+ />
1741
+ <path
1742
+ class="pf-v6-c-button--hamburger-icon--arrow"
1743
+ d="M1,5 L1,5 L1,5"
1744
+ />
1745
+ <path
1746
+ class="pf-v6-c-button--hamburger-icon--bottom"
1747
+ d="M9,9 L1,9"
1748
+ />
1749
+ </svg>
1693
1750
  </span>
1694
1751
  </button>
1695
1752
  </span>
@@ -1797,7 +1854,7 @@ wrapperTag: div
1797
1854
  </div>
1798
1855
  <div class="pf-v6-c-toolbar__item">
1799
1856
  <button
1800
- class="pf-v6-c-menu-toggle pf-m-plain"
1857
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1801
1858
  type="button"
1802
1859
  aria-expanded="false"
1803
1860
  aria-label="Settings"
@@ -2094,7 +2151,7 @@ wrapperTag: div
2094
2151
  <div class="pf-v6-c-pagination pf-m-compact">
2095
2152
  <div class="pf-v6-c-pagination__page-menu">
2096
2153
  <button
2097
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2154
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2098
2155
  type="button"
2099
2156
  aria-expanded="false"
2100
2157
  aria-label="Menu toggle"
@@ -2416,7 +2473,7 @@ wrapperTag: div
2416
2473
  class="pf-v6-c-menu-toggle pf-m-plain"
2417
2474
  type="button"
2418
2475
  aria-expanded="false"
2419
- aria-label="Menu toggle"
2476
+ aria-label="Table actions"
2420
2477
  >
2421
2478
  <span class="pf-v6-c-menu-toggle__icon">
2422
2479
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2493,7 +2550,7 @@ wrapperTag: div
2493
2550
  class="pf-v6-c-menu-toggle pf-m-plain"
2494
2551
  type="button"
2495
2552
  aria-expanded="false"
2496
- aria-label="Menu toggle"
2553
+ aria-label="Table actions"
2497
2554
  >
2498
2555
  <span class="pf-v6-c-menu-toggle__icon">
2499
2556
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2570,7 +2627,7 @@ wrapperTag: div
2570
2627
  class="pf-v6-c-menu-toggle pf-m-plain"
2571
2628
  type="button"
2572
2629
  aria-expanded="false"
2573
- aria-label="Menu toggle"
2630
+ aria-label="Table actions"
2574
2631
  >
2575
2632
  <span class="pf-v6-c-menu-toggle__icon">
2576
2633
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2646,7 +2703,7 @@ wrapperTag: div
2646
2703
  class="pf-v6-c-menu-toggle pf-m-plain"
2647
2704
  type="button"
2648
2705
  aria-expanded="false"
2649
- aria-label="Menu toggle"
2706
+ aria-label="Table actions"
2650
2707
  >
2651
2708
  <span class="pf-v6-c-menu-toggle__icon">
2652
2709
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -3100,7 +3157,7 @@ wrapperTag: div
3100
3157
  <div class="pf-v6-c-pagination pf-m-bottom">
3101
3158
  <div class="pf-v6-c-pagination__page-menu">
3102
3159
  <button
3103
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
3160
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
3104
3161
  type="button"
3105
3162
  aria-expanded="false"
3106
3163
  aria-label="Menu toggle"
@@ -3206,12 +3263,31 @@ wrapperTag: div
3206
3263
  <div class="pf-v6-c-masthead__main">
3207
3264
  <span class="pf-v6-c-masthead__toggle">
3208
3265
  <button
3209
- class="pf-v6-c-button pf-m-plain"
3266
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3210
3267
  type="button"
3211
3268
  aria-label="Global navigation"
3212
3269
  >
3213
3270
  <span class="pf-v6-c-button__icon">
3214
- <i class="fas fa-bars" aria-hidden="true"></i>
3271
+ <svg
3272
+ viewBox="0 0 10 10"
3273
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3274
+ width="1em"
3275
+ height="1em"
3276
+ >
3277
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
3278
+ <path
3279
+ class="pf-v6-c-button--hamburger-icon--middle"
3280
+ d="M1,5 L9,5"
3281
+ />
3282
+ <path
3283
+ class="pf-v6-c-button--hamburger-icon--arrow"
3284
+ d="M1,5 L1,5 L1,5"
3285
+ />
3286
+ <path
3287
+ class="pf-v6-c-button--hamburger-icon--bottom"
3288
+ d="M9,9 L1,9"
3289
+ />
3290
+ </svg>
3215
3291
  </span>
3216
3292
  </button>
3217
3293
  </span>
@@ -3319,7 +3395,7 @@ wrapperTag: div
3319
3395
  </div>
3320
3396
  <div class="pf-v6-c-toolbar__item">
3321
3397
  <button
3322
- class="pf-v6-c-menu-toggle pf-m-plain"
3398
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
3323
3399
  type="button"
3324
3400
  aria-expanded="false"
3325
3401
  aria-label="Settings"
@@ -3570,7 +3646,7 @@ wrapperTag: div
3570
3646
  <div class="pf-v6-c-pagination pf-m-compact">
3571
3647
  <div class="pf-v6-c-pagination__page-menu">
3572
3648
  <button
3573
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
3649
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
3574
3650
  type="button"
3575
3651
  aria-expanded="false"
3576
3652
  aria-label="Menu toggle"
@@ -3975,7 +4051,7 @@ wrapperTag: div
3975
4051
  <div class="pf-v6-c-pagination pf-m-bottom pf-m-static">
3976
4052
  <div class="pf-v6-c-pagination__page-menu">
3977
4053
  <button
3978
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
4054
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
3979
4055
  type="button"
3980
4056
  aria-expanded="false"
3981
4057
  aria-label="Menu toggle"
package/docs/demos/DescriptionList/examples/DescriptionList.md CHANGED
@@ -20,12 +20,31 @@ cssPrefix: pf-d-description-list
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-description-list
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"
@@ -387,12 +406,31 @@ cssPrefix: pf-d-description-list
387
406
  <div class="pf-v6-c-masthead__main">
388
407
  <span class="pf-v6-c-masthead__toggle">
389
408
  <button
390
- class="pf-v6-c-button pf-m-plain"
409
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
391
410
  type="button"
392
411
  aria-label="Global navigation"
393
412
  >
394
413
  <span class="pf-v6-c-button__icon">
395
- <i class="fas fa-bars" aria-hidden="true"></i>
414
+ <svg
415
+ viewBox="0 0 10 10"
416
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
417
+ width="1em"
418
+ height="1em"
419
+ >
420
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
421
+ <path
422
+ class="pf-v6-c-button--hamburger-icon--middle"
423
+ d="M1,5 L9,5"
424
+ />
425
+ <path
426
+ class="pf-v6-c-button--hamburger-icon--arrow"
427
+ d="M1,5 L1,5 L1,5"
428
+ />
429
+ <path
430
+ class="pf-v6-c-button--hamburger-icon--bottom"
431
+ d="M9,9 L1,9"
432
+ />
433
+ </svg>
396
434
  </span>
397
435
  </button>
398
436
  </span>
@@ -500,7 +538,7 @@ cssPrefix: pf-d-description-list
500
538
  </div>
501
539
  <div class="pf-v6-c-toolbar__item">
502
540
  <button
503
- class="pf-v6-c-menu-toggle pf-m-plain"
541
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
504
542
  type="button"
505
543
  aria-expanded="false"
506
544
  aria-label="Settings"
@@ -1023,12 +1061,31 @@ cssPrefix: pf-d-description-list
1023
1061
  <div class="pf-v6-c-masthead__main">
1024
1062
  <span class="pf-v6-c-masthead__toggle">
1025
1063
  <button
1026
- class="pf-v6-c-button pf-m-plain"
1064
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1027
1065
  type="button"
1028
1066
  aria-label="Global navigation"
1029
1067
  >
1030
1068
  <span class="pf-v6-c-button__icon">
1031
- <i class="fas fa-bars" aria-hidden="true"></i>
1069
+ <svg
1070
+ viewBox="0 0 10 10"
1071
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1072
+ width="1em"
1073
+ height="1em"
1074
+ >
1075
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1076
+ <path
1077
+ class="pf-v6-c-button--hamburger-icon--middle"
1078
+ d="M1,5 L9,5"
1079
+ />
1080
+ <path
1081
+ class="pf-v6-c-button--hamburger-icon--arrow"
1082
+ d="M1,5 L1,5 L1,5"
1083
+ />
1084
+ <path
1085
+ class="pf-v6-c-button--hamburger-icon--bottom"
1086
+ d="M9,9 L1,9"
1087
+ />
1088
+ </svg>
1032
1089
  </span>
1033
1090
  </button>
1034
1091
  </span>
@@ -1136,7 +1193,7 @@ cssPrefix: pf-d-description-list
1136
1193
  </div>
1137
1194
  <div class="pf-v6-c-toolbar__item">
1138
1195
  <button
1139
- class="pf-v6-c-menu-toggle pf-m-plain"
1196
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1140
1197
  type="button"
1141
1198
  aria-expanded="false"
1142
1199
  aria-label="Settings"
package/docs/demos/Drawer/examples/Drawer.md CHANGED
@@ -20,12 +20,31 @@ wrapperTag: div
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 @@ wrapperTag: div
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"
@@ -489,12 +508,31 @@ wrapperTag: div
489
508
  <div class="pf-v6-c-masthead__main">
490
509
  <span class="pf-v6-c-masthead__toggle">
491
510
  <button
492
- class="pf-v6-c-button pf-m-plain"
511
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
493
512
  type="button"
494
513
  aria-label="Global navigation"
495
514
  >
496
515
  <span class="pf-v6-c-button__icon">
497
- <i class="fas fa-bars" aria-hidden="true"></i>
516
+ <svg
517
+ viewBox="0 0 10 10"
518
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
519
+ width="1em"
520
+ height="1em"
521
+ >
522
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
523
+ <path
524
+ class="pf-v6-c-button--hamburger-icon--middle"
525
+ d="M1,5 L9,5"
526
+ />
527
+ <path
528
+ class="pf-v6-c-button--hamburger-icon--arrow"
529
+ d="M1,5 L1,5 L1,5"
530
+ />
531
+ <path
532
+ class="pf-v6-c-button--hamburger-icon--bottom"
533
+ d="M9,9 L1,9"
534
+ />
535
+ </svg>
498
536
  </span>
499
537
  </button>
500
538
  </span>
@@ -602,7 +640,7 @@ wrapperTag: div
602
640
  </div>
603
641
  <div class="pf-v6-c-toolbar__item">
604
642
  <button
605
- class="pf-v6-c-menu-toggle pf-m-plain"
643
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
606
644
  type="button"
607
645
  aria-expanded="false"
608
646
  aria-label="Settings"
@@ -813,12 +851,31 @@ wrapperTag: div
813
851
  <div class="pf-v6-c-masthead__main">
814
852
  <span class="pf-v6-c-masthead__toggle">
815
853
  <button
816
- class="pf-v6-c-button pf-m-plain"
854
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
817
855
  type="button"
818
856
  aria-label="Global navigation"
819
857
  >
820
858
  <span class="pf-v6-c-button__icon">
821
- <i class="fas fa-bars" aria-hidden="true"></i>
859
+ <svg
860
+ viewBox="0 0 10 10"
861
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
862
+ width="1em"
863
+ height="1em"
864
+ >
865
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
866
+ <path
867
+ class="pf-v6-c-button--hamburger-icon--middle"
868
+ d="M1,5 L9,5"
869
+ />
870
+ <path
871
+ class="pf-v6-c-button--hamburger-icon--arrow"
872
+ d="M1,5 L1,5 L1,5"
873
+ />
874
+ <path
875
+ class="pf-v6-c-button--hamburger-icon--bottom"
876
+ d="M9,9 L1,9"
877
+ />
878
+ </svg>
822
879
  </span>
823
880
  </button>
824
881
  </span>
@@ -926,7 +983,7 @@ wrapperTag: div
926
983
  </div>
927
984
  <div class="pf-v6-c-toolbar__item">
928
985
  <button
929
- class="pf-v6-c-menu-toggle pf-m-plain"
986
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
930
987
  type="button"
931
988
  aria-expanded="false"
932
989
  aria-label="Settings"
@@ -1137,12 +1194,31 @@ wrapperTag: div
1137
1194
  <div class="pf-v6-c-masthead__main">
1138
1195
  <span class="pf-v6-c-masthead__toggle">
1139
1196
  <button
1140
- class="pf-v6-c-button pf-m-plain"
1197
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1141
1198
  type="button"
1142
1199
  aria-label="Global navigation"
1143
1200
  >
1144
1201
  <span class="pf-v6-c-button__icon">
1145
- <i class="fas fa-bars" aria-hidden="true"></i>
1202
+ <svg
1203
+ viewBox="0 0 10 10"
1204
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1205
+ width="1em"
1206
+ height="1em"
1207
+ >
1208
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1209
+ <path
1210
+ class="pf-v6-c-button--hamburger-icon--middle"
1211
+ d="M1,5 L9,5"
1212
+ />
1213
+ <path
1214
+ class="pf-v6-c-button--hamburger-icon--arrow"
1215
+ d="M1,5 L1,5 L1,5"
1216
+ />
1217
+ <path
1218
+ class="pf-v6-c-button--hamburger-icon--bottom"
1219
+ d="M9,9 L1,9"
1220
+ />
1221
+ </svg>
1146
1222
  </span>
1147
1223
  </button>
1148
1224
  </span>
@@ -1250,7 +1326,7 @@ wrapperTag: div
1250
1326
  </div>
1251
1327
  <div class="pf-v6-c-toolbar__item">
1252
1328
  <button
1253
- class="pf-v6-c-menu-toggle pf-m-plain"
1329
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1254
1330
  type="button"
1255
1331
  aria-expanded="false"
1256
1332
  aria-label="Settings"
@@ -1540,12 +1616,31 @@ wrapperTag: div
1540
1616
  <div class="pf-v6-c-masthead__main">
1541
1617
  <span class="pf-v6-c-masthead__toggle">
1542
1618
  <button
1543
- class="pf-v6-c-button pf-m-plain"
1619
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1544
1620
  type="button"
1545
1621
  aria-label="Global navigation"
1546
1622
  >
1547
1623
  <span class="pf-v6-c-button__icon">
1548
- <i class="fas fa-bars" aria-hidden="true"></i>
1624
+ <svg
1625
+ viewBox="0 0 10 10"
1626
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1627
+ width="1em"
1628
+ height="1em"
1629
+ >
1630
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1631
+ <path
1632
+ class="pf-v6-c-button--hamburger-icon--middle"
1633
+ d="M1,5 L9,5"
1634
+ />
1635
+ <path
1636
+ class="pf-v6-c-button--hamburger-icon--arrow"
1637
+ d="M1,5 L1,5 L1,5"
1638
+ />
1639
+ <path
1640
+ class="pf-v6-c-button--hamburger-icon--bottom"
1641
+ d="M9,9 L1,9"
1642
+ />
1643
+ </svg>
1549
1644
  </span>
1550
1645
  </button>
1551
1646
  </span>
@@ -1653,7 +1748,7 @@ wrapperTag: div
1653
1748
  </div>
1654
1749
  <div class="pf-v6-c-toolbar__item">
1655
1750
  <button
1656
- class="pf-v6-c-menu-toggle pf-m-plain"
1751
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1657
1752
  type="button"
1658
1753
  aria-expanded="false"
1659
1754
  aria-label="Settings"