@patternfly/patternfly 6.3.0-prerelease.9 → 6.3.1

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 (109) hide show
  1. package/assets/images/icon-outlined-star.hbs +3 -0
  2. package/assets/images/icon-star.hbs +3 -0
  3. package/base/patternfly-common.css +46 -11
  4. package/base/patternfly-common.scss +58 -13
  5. package/components/Accordion/accordion.css +72 -3
  6. package/components/Accordion/accordion.scss +78 -6
  7. package/components/Alert/alert-group.css +52 -31
  8. package/components/Alert/alert-group.scss +77 -46
  9. package/components/Button/button.css +154 -6
  10. package/components/Button/button.scss +160 -8
  11. package/components/DataList/data-list.css +2 -2
  12. package/components/DataList/data-list.scss +2 -2
  13. package/components/DualListSelector/dual-list-selector.css +36 -0
  14. package/components/DualListSelector/dual-list-selector.scss +43 -0
  15. package/components/ExpandableSection/expandable-section.css +63 -1
  16. package/components/ExpandableSection/expandable-section.scss +76 -2
  17. package/components/FileUpload/file-upload.css +3 -3
  18. package/components/FileUpload/file-upload.scss +3 -3
  19. package/components/Form/form.css +40 -1
  20. package/components/Form/form.scss +47 -1
  21. package/components/FormControl/form-control.css +16 -0
  22. package/components/FormControl/form-control.scss +9 -0
  23. package/components/InputGroup/input-group.css +80 -0
  24. package/components/InputGroup/input-group.scss +95 -0
  25. package/components/Menu/menu.css +24 -4
  26. package/components/Menu/menu.scss +20 -5
  27. package/components/MenuToggle/menu-toggle.css +30 -0
  28. package/components/MenuToggle/menu-toggle.scss +33 -0
  29. package/components/Nav/nav.css +22 -8
  30. package/components/Nav/nav.scss +22 -9
  31. package/components/Page/page.css +62 -3
  32. package/components/Page/page.scss +44 -3
  33. package/components/Progress/progress.css +16 -0
  34. package/components/Progress/progress.scss +11 -1
  35. package/components/ProgressStepper/progress-stepper.scss +1 -0
  36. package/components/Spinner/spinner.css +5 -0
  37. package/components/Spinner/spinner.scss +6 -0
  38. package/components/Table/table-grid.css +51 -5
  39. package/components/Table/table-grid.scss +22 -1
  40. package/components/Table/table.css +95 -2
  41. package/components/Table/table.scss +138 -3
  42. package/components/Tabs/tabs.css +25 -15
  43. package/components/Tabs/tabs.scss +26 -13
  44. package/components/TextInputGroup/text-input-group.css +20 -0
  45. package/components/TextInputGroup/text-input-group.scss +12 -0
  46. package/components/Timestamp/timestamp.css +4 -0
  47. package/components/Timestamp/timestamp.scss +7 -0
  48. package/components/TreeView/tree-view.css +39 -0
  49. package/components/TreeView/tree-view.scss +42 -2
  50. package/components/Truncate/truncate.css +1 -0
  51. package/components/Truncate/truncate.scss +3 -0
  52. package/components/_index.css +912 -84
  53. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  54. package/docs/components/Button/examples/Button.md +148 -5
  55. package/docs/components/Card/examples/Card.md +8 -8
  56. package/docs/components/CodeBlock/examples/CodeBlock.md +5 -5
  57. package/docs/components/DataList/examples/DataList.md +23 -23
  58. package/docs/components/DualListSelector/examples/DualListSelector.md +534 -16
  59. package/docs/components/ExpandableSection/examples/ExpandableSection.md +17 -12
  60. package/docs/components/Form/examples/Form.md +1047 -126
  61. package/docs/components/Hint/examples/Hint.md +3 -3
  62. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  63. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  64. package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
  65. package/docs/components/Masthead/examples/masthead.md +90 -12
  66. package/docs/components/Menu/examples/Menu.md +122 -6
  67. package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
  68. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
  69. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  70. package/docs/components/Page/examples/Page.md +147 -14
  71. package/docs/components/Pagination/examples/Pagination.md +12 -12
  72. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  73. package/docs/components/Slider/examples/Slider.md +2 -2
  74. package/docs/components/Spinner/examples/Spinner.md +10 -0
  75. package/docs/components/Table/examples/Table.md +9428 -6173
  76. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  77. package/docs/components/TextInputGroup/examples/TextInputGroup.md +45 -5
  78. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  79. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  80. package/docs/demos/Alert/examples/Alert.md +66 -9
  81. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  82. package/docs/demos/Banner/examples/Banner.md +47 -6
  83. package/docs/demos/Card/examples/Card.md +5 -62
  84. package/docs/demos/CardView/examples/CardView.md +24 -5
  85. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  86. package/docs/demos/DataList/examples/DataList.md +100 -24
  87. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -47
  88. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  89. package/docs/demos/Form/examples/BasicForms.md +12 -12
  90. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  91. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  92. package/docs/demos/Modal/examples/Modal.md +132 -18
  93. package/docs/demos/Nav/examples/Nav.md +111 -16
  94. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  95. package/docs/demos/Page/examples/Page.md +309 -43
  96. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -103
  97. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  98. package/docs/demos/Table/examples/Table.md +449 -155
  99. package/docs/demos/Tabs/examples/Tabs.md +137 -593
  100. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  101. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  102. package/package.json +5 -5
  103. package/patternfly-base-no-globals.css +45 -11
  104. package/patternfly-base.css +45 -11
  105. package/patternfly-no-globals.css +957 -95
  106. package/patternfly.css +957 -95
  107. package/patternfly.min.css +1 -1
  108. package/patternfly.min.css.map +1 -1
  109. package/sass-utilities/mixins.scss +54 -0
package/docs/demos/Page/examples/Page.md CHANGED
@@ -19,12 +19,31 @@ wrapperTag: div
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 @@ wrapperTag: div
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"
@@ -324,12 +343,31 @@ wrapperTag: div
324
343
  <div class="pf-v6-c-masthead__main">
325
344
  <span class="pf-v6-c-masthead__toggle">
326
345
  <button
327
- class="pf-v6-c-button pf-m-plain"
346
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
328
347
  type="button"
329
348
  aria-label="Global navigation"
330
349
  >
331
350
  <span class="pf-v6-c-button__icon">
332
- <i class="fas fa-bars" aria-hidden="true"></i>
351
+ <svg
352
+ viewBox="0 0 10 10"
353
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
354
+ width="1em"
355
+ height="1em"
356
+ >
357
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
358
+ <path
359
+ class="pf-v6-c-button--hamburger-icon--middle"
360
+ d="M1,5 L9,5"
361
+ />
362
+ <path
363
+ class="pf-v6-c-button--hamburger-icon--arrow"
364
+ d="M1,5 L1,5 L1,5"
365
+ />
366
+ <path
367
+ class="pf-v6-c-button--hamburger-icon--bottom"
368
+ d="M9,9 L1,9"
369
+ />
370
+ </svg>
333
371
  </span>
334
372
  </button>
335
373
  </span>
@@ -437,7 +475,7 @@ wrapperTag: div
437
475
  </div>
438
476
  <div class="pf-v6-c-toolbar__item">
439
477
  <button
440
- class="pf-v6-c-menu-toggle pf-m-plain"
478
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
441
479
  type="button"
442
480
  aria-expanded="false"
443
481
  aria-label="Settings"
@@ -644,12 +682,31 @@ wrapperTag: div
644
682
  <div class="pf-v6-c-masthead__main">
645
683
  <span class="pf-v6-c-masthead__toggle">
646
684
  <button
647
- class="pf-v6-c-button pf-m-plain"
685
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
648
686
  type="button"
649
687
  aria-label="Global navigation"
650
688
  >
651
689
  <span class="pf-v6-c-button__icon">
652
- <i class="fas fa-bars" aria-hidden="true"></i>
690
+ <svg
691
+ viewBox="0 0 10 10"
692
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
693
+ width="1em"
694
+ height="1em"
695
+ >
696
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
697
+ <path
698
+ class="pf-v6-c-button--hamburger-icon--middle"
699
+ d="M1,5 L9,5"
700
+ />
701
+ <path
702
+ class="pf-v6-c-button--hamburger-icon--arrow"
703
+ d="M1,5 L1,5 L1,5"
704
+ />
705
+ <path
706
+ class="pf-v6-c-button--hamburger-icon--bottom"
707
+ d="M9,9 L1,9"
708
+ />
709
+ </svg>
653
710
  </span>
654
711
  </button>
655
712
  </span>
@@ -757,7 +814,7 @@ wrapperTag: div
757
814
  </div>
758
815
  <div class="pf-v6-c-toolbar__item">
759
816
  <button
760
- class="pf-v6-c-menu-toggle pf-m-plain"
817
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
761
818
  type="button"
762
819
  aria-expanded="false"
763
820
  aria-label="Settings"
@@ -1096,12 +1153,31 @@ wrapperTag: div
1096
1153
  <div class="pf-v6-c-masthead__main">
1097
1154
  <span class="pf-v6-c-masthead__toggle">
1098
1155
  <button
1099
- class="pf-v6-c-button pf-m-plain"
1156
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1100
1157
  type="button"
1101
1158
  aria-label="Global navigation"
1102
1159
  >
1103
1160
  <span class="pf-v6-c-button__icon">
1104
- <i class="fas fa-bars" aria-hidden="true"></i>
1161
+ <svg
1162
+ viewBox="0 0 10 10"
1163
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1164
+ width="1em"
1165
+ height="1em"
1166
+ >
1167
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1168
+ <path
1169
+ class="pf-v6-c-button--hamburger-icon--middle"
1170
+ d="M1,5 L9,5"
1171
+ />
1172
+ <path
1173
+ class="pf-v6-c-button--hamburger-icon--arrow"
1174
+ d="M1,5 L1,5 L1,5"
1175
+ />
1176
+ <path
1177
+ class="pf-v6-c-button--hamburger-icon--bottom"
1178
+ d="M9,9 L1,9"
1179
+ />
1180
+ </svg>
1105
1181
  </span>
1106
1182
  </button>
1107
1183
  </span>
@@ -1209,7 +1285,7 @@ wrapperTag: div
1209
1285
  </div>
1210
1286
  <div class="pf-v6-c-toolbar__item">
1211
1287
  <button
1212
- class="pf-v6-c-menu-toggle pf-m-plain"
1288
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1213
1289
  type="button"
1214
1290
  aria-expanded="false"
1215
1291
  aria-label="Settings"
@@ -1523,12 +1599,31 @@ wrapperTag: div
1523
1599
  <div class="pf-v6-c-masthead__main">
1524
1600
  <span class="pf-v6-c-masthead__toggle">
1525
1601
  <button
1526
- class="pf-v6-c-button pf-m-plain"
1602
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1527
1603
  type="button"
1528
1604
  aria-label="Global navigation"
1529
1605
  >
1530
1606
  <span class="pf-v6-c-button__icon">
1531
- <i class="fas fa-bars" aria-hidden="true"></i>
1607
+ <svg
1608
+ viewBox="0 0 10 10"
1609
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1610
+ width="1em"
1611
+ height="1em"
1612
+ >
1613
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1614
+ <path
1615
+ class="pf-v6-c-button--hamburger-icon--middle"
1616
+ d="M1,5 L9,5"
1617
+ />
1618
+ <path
1619
+ class="pf-v6-c-button--hamburger-icon--arrow"
1620
+ d="M1,5 L1,5 L1,5"
1621
+ />
1622
+ <path
1623
+ class="pf-v6-c-button--hamburger-icon--bottom"
1624
+ d="M9,9 L1,9"
1625
+ />
1626
+ </svg>
1532
1627
  </span>
1533
1628
  </button>
1534
1629
  </span>
@@ -1636,7 +1731,7 @@ wrapperTag: div
1636
1731
  </div>
1637
1732
  <div class="pf-v6-c-toolbar__item">
1638
1733
  <button
1639
- class="pf-v6-c-menu-toggle pf-m-plain"
1734
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1640
1735
  type="button"
1641
1736
  aria-expanded="false"
1642
1737
  aria-label="Settings"
@@ -1950,12 +2045,31 @@ wrapperTag: div
1950
2045
  <div class="pf-v6-c-masthead__main">
1951
2046
  <span class="pf-v6-c-masthead__toggle">
1952
2047
  <button
1953
- class="pf-v6-c-button pf-m-plain"
2048
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1954
2049
  type="button"
1955
2050
  aria-label="Global navigation"
1956
2051
  >
1957
2052
  <span class="pf-v6-c-button__icon">
1958
- <i class="fas fa-bars" aria-hidden="true"></i>
2053
+ <svg
2054
+ viewBox="0 0 10 10"
2055
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2056
+ width="1em"
2057
+ height="1em"
2058
+ >
2059
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2060
+ <path
2061
+ class="pf-v6-c-button--hamburger-icon--middle"
2062
+ d="M1,5 L9,5"
2063
+ />
2064
+ <path
2065
+ class="pf-v6-c-button--hamburger-icon--arrow"
2066
+ d="M1,5 L1,5 L1,5"
2067
+ />
2068
+ <path
2069
+ class="pf-v6-c-button--hamburger-icon--bottom"
2070
+ d="M9,9 L1,9"
2071
+ />
2072
+ </svg>
1959
2073
  </span>
1960
2074
  </button>
1961
2075
  </span>
@@ -2063,7 +2177,7 @@ wrapperTag: div
2063
2177
  </div>
2064
2178
  <div class="pf-v6-c-toolbar__item">
2065
2179
  <button
2066
- class="pf-v6-c-menu-toggle pf-m-plain"
2180
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
2067
2181
  type="button"
2068
2182
  aria-expanded="false"
2069
2183
  aria-label="Settings"
@@ -2377,12 +2491,31 @@ wrapperTag: div
2377
2491
  <div class="pf-v6-c-masthead__main">
2378
2492
  <span class="pf-v6-c-masthead__toggle">
2379
2493
  <button
2380
- class="pf-v6-c-button pf-m-plain"
2494
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2381
2495
  type="button"
2382
2496
  aria-label="Global navigation"
2383
2497
  >
2384
2498
  <span class="pf-v6-c-button__icon">
2385
- <i class="fas fa-bars" aria-hidden="true"></i>
2499
+ <svg
2500
+ viewBox="0 0 10 10"
2501
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2502
+ width="1em"
2503
+ height="1em"
2504
+ >
2505
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2506
+ <path
2507
+ class="pf-v6-c-button--hamburger-icon--middle"
2508
+ d="M1,5 L9,5"
2509
+ />
2510
+ <path
2511
+ class="pf-v6-c-button--hamburger-icon--arrow"
2512
+ d="M1,5 L1,5 L1,5"
2513
+ />
2514
+ <path
2515
+ class="pf-v6-c-button--hamburger-icon--bottom"
2516
+ d="M9,9 L1,9"
2517
+ />
2518
+ </svg>
2386
2519
  </span>
2387
2520
  </button>
2388
2521
  </span>
@@ -2490,7 +2623,7 @@ wrapperTag: div
2490
2623
  </div>
2491
2624
  <div class="pf-v6-c-toolbar__item">
2492
2625
  <button
2493
- class="pf-v6-c-menu-toggle pf-m-plain"
2626
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
2494
2627
  type="button"
2495
2628
  aria-expanded="false"
2496
2629
  aria-label="Settings"
@@ -2806,12 +2939,31 @@ wrapperTag: div
2806
2939
  <div class="pf-v6-c-masthead__main">
2807
2940
  <span class="pf-v6-c-masthead__toggle">
2808
2941
  <button
2809
- class="pf-v6-c-button pf-m-plain"
2942
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2810
2943
  type="button"
2811
2944
  aria-label="Global navigation"
2812
2945
  >
2813
2946
  <span class="pf-v6-c-button__icon">
2814
- <i class="fas fa-bars" aria-hidden="true"></i>
2947
+ <svg
2948
+ viewBox="0 0 10 10"
2949
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2950
+ width="1em"
2951
+ height="1em"
2952
+ >
2953
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2954
+ <path
2955
+ class="pf-v6-c-button--hamburger-icon--middle"
2956
+ d="M1,5 L9,5"
2957
+ />
2958
+ <path
2959
+ class="pf-v6-c-button--hamburger-icon--arrow"
2960
+ d="M1,5 L1,5 L1,5"
2961
+ />
2962
+ <path
2963
+ class="pf-v6-c-button--hamburger-icon--bottom"
2964
+ d="M9,9 L1,9"
2965
+ />
2966
+ </svg>
2815
2967
  </span>
2816
2968
  </button>
2817
2969
  </span>
@@ -2919,7 +3071,7 @@ wrapperTag: div
2919
3071
  </div>
2920
3072
  <div class="pf-v6-c-toolbar__item">
2921
3073
  <button
2922
- class="pf-v6-c-menu-toggle pf-m-plain"
3074
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
2923
3075
  type="button"
2924
3076
  aria-expanded="false"
2925
3077
  aria-label="Settings"
@@ -3240,12 +3392,31 @@ wrapperTag: div
3240
3392
  <div class="pf-v6-c-masthead__main">
3241
3393
  <span class="pf-v6-c-masthead__toggle">
3242
3394
  <button
3243
- class="pf-v6-c-button pf-m-plain"
3395
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3244
3396
  type="button"
3245
3397
  aria-label="Global navigation"
3246
3398
  >
3247
3399
  <span class="pf-v6-c-button__icon">
3248
- <i class="fas fa-bars" aria-hidden="true"></i>
3400
+ <svg
3401
+ viewBox="0 0 10 10"
3402
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3403
+ width="1em"
3404
+ height="1em"
3405
+ >
3406
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
3407
+ <path
3408
+ class="pf-v6-c-button--hamburger-icon--middle"
3409
+ d="M1,5 L9,5"
3410
+ />
3411
+ <path
3412
+ class="pf-v6-c-button--hamburger-icon--arrow"
3413
+ d="M1,5 L1,5 L1,5"
3414
+ />
3415
+ <path
3416
+ class="pf-v6-c-button--hamburger-icon--bottom"
3417
+ d="M9,9 L1,9"
3418
+ />
3419
+ </svg>
3249
3420
  </span>
3250
3421
  </button>
3251
3422
  </span>
@@ -3353,7 +3524,7 @@ wrapperTag: div
3353
3524
  </div>
3354
3525
  <div class="pf-v6-c-toolbar__item">
3355
3526
  <button
3356
- class="pf-v6-c-menu-toggle pf-m-plain"
3527
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
3357
3528
  type="button"
3358
3529
  aria-expanded="false"
3359
3530
  aria-label="Settings"
@@ -3532,12 +3703,31 @@ wrapperTag: div
3532
3703
  <div class="pf-v6-c-masthead__main">
3533
3704
  <span class="pf-v6-c-masthead__toggle">
3534
3705
  <button
3535
- class="pf-v6-c-button pf-m-plain"
3706
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3536
3707
  type="button"
3537
3708
  aria-label="Global navigation"
3538
3709
  >
3539
3710
  <span class="pf-v6-c-button__icon">
3540
- <i class="fas fa-bars" aria-hidden="true"></i>
3711
+ <svg
3712
+ viewBox="0 0 10 10"
3713
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3714
+ width="1em"
3715
+ height="1em"
3716
+ >
3717
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
3718
+ <path
3719
+ class="pf-v6-c-button--hamburger-icon--middle"
3720
+ d="M1,5 L9,5"
3721
+ />
3722
+ <path
3723
+ class="pf-v6-c-button--hamburger-icon--arrow"
3724
+ d="M1,5 L1,5 L1,5"
3725
+ />
3726
+ <path
3727
+ class="pf-v6-c-button--hamburger-icon--bottom"
3728
+ d="M9,9 L1,9"
3729
+ />
3730
+ </svg>
3541
3731
  </span>
3542
3732
  </button>
3543
3733
  </span>
@@ -3645,7 +3835,7 @@ wrapperTag: div
3645
3835
  </div>
3646
3836
  <div class="pf-v6-c-toolbar__item">
3647
3837
  <button
3648
- class="pf-v6-c-menu-toggle pf-m-plain"
3838
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
3649
3839
  type="button"
3650
3840
  aria-expanded="false"
3651
3841
  aria-label="Settings"
@@ -3851,12 +4041,31 @@ wrapperTag: div
3851
4041
  <div class="pf-v6-c-masthead__main">
3852
4042
  <span class="pf-v6-c-masthead__toggle">
3853
4043
  <button
3854
- class="pf-v6-c-button pf-m-plain"
4044
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3855
4045
  type="button"
3856
4046
  aria-label="Global navigation"
3857
4047
  >
3858
4048
  <span class="pf-v6-c-button__icon">
3859
- <i class="fas fa-bars" aria-hidden="true"></i>
4049
+ <svg
4050
+ viewBox="0 0 10 10"
4051
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
4052
+ width="1em"
4053
+ height="1em"
4054
+ >
4055
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
4056
+ <path
4057
+ class="pf-v6-c-button--hamburger-icon--middle"
4058
+ d="M1,5 L9,5"
4059
+ />
4060
+ <path
4061
+ class="pf-v6-c-button--hamburger-icon--arrow"
4062
+ d="M1,5 L1,5 L1,5"
4063
+ />
4064
+ <path
4065
+ class="pf-v6-c-button--hamburger-icon--bottom"
4066
+ d="M9,9 L1,9"
4067
+ />
4068
+ </svg>
3860
4069
  </span>
3861
4070
  </button>
3862
4071
  </span>
@@ -3964,7 +4173,7 @@ wrapperTag: div
3964
4173
  </div>
3965
4174
  <div class="pf-v6-c-toolbar__item">
3966
4175
  <button
3967
- class="pf-v6-c-menu-toggle pf-m-plain"
4176
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
3968
4177
  type="button"
3969
4178
  aria-expanded="false"
3970
4179
  aria-label="Settings"
@@ -4009,7 +4218,7 @@ wrapperTag: div
4009
4218
  <div class="pf-v6-c-page__sidebar">
4010
4219
  <div class="pf-v6-c-page__sidebar-body pf-m-context-selector">
4011
4220
  <button
4012
- class="pf-v6-c-menu-toggle pf-m-expanded pf-m-full-width"
4221
+ class="pf-v6-c-menu-toggle pf-m-full-width pf-m-expanded"
4013
4222
  type="button"
4014
4223
  aria-expanded="true"
4015
4224
  >
@@ -4206,12 +4415,31 @@ wrapperTag: div
4206
4415
  <div class="pf-v6-c-masthead__main">
4207
4416
  <span class="pf-v6-c-masthead__toggle">
4208
4417
  <button
4209
- class="pf-v6-c-button pf-m-plain"
4418
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
4210
4419
  type="button"
4211
4420
  aria-label="Global navigation"
4212
4421
  >
4213
4422
  <span class="pf-v6-c-button__icon">
4214
- <i class="fas fa-bars" aria-hidden="true"></i>
4423
+ <svg
4424
+ viewBox="0 0 10 10"
4425
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
4426
+ width="1em"
4427
+ height="1em"
4428
+ >
4429
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
4430
+ <path
4431
+ class="pf-v6-c-button--hamburger-icon--middle"
4432
+ d="M1,5 L9,5"
4433
+ />
4434
+ <path
4435
+ class="pf-v6-c-button--hamburger-icon--arrow"
4436
+ d="M1,5 L1,5 L1,5"
4437
+ />
4438
+ <path
4439
+ class="pf-v6-c-button--hamburger-icon--bottom"
4440
+ d="M9,9 L1,9"
4441
+ />
4442
+ </svg>
4215
4443
  </span>
4216
4444
  </button>
4217
4445
  </span>
@@ -4319,7 +4547,7 @@ wrapperTag: div
4319
4547
  </div>
4320
4548
  <div class="pf-v6-c-toolbar__item">
4321
4549
  <button
4322
- class="pf-v6-c-menu-toggle pf-m-plain"
4550
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
4323
4551
  type="button"
4324
4552
  aria-expanded="false"
4325
4553
  aria-label="Settings"
@@ -4508,12 +4736,31 @@ wrapperTag: div
4508
4736
  <div class="pf-v6-c-masthead__main">
4509
4737
  <span class="pf-v6-c-masthead__toggle">
4510
4738
  <button
4511
- class="pf-v6-c-button pf-m-plain"
4739
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
4512
4740
  type="button"
4513
4741
  aria-label="Global navigation"
4514
4742
  >
4515
4743
  <span class="pf-v6-c-button__icon">
4516
- <i class="fas fa-bars" aria-hidden="true"></i>
4744
+ <svg
4745
+ viewBox="0 0 10 10"
4746
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
4747
+ width="1em"
4748
+ height="1em"
4749
+ >
4750
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
4751
+ <path
4752
+ class="pf-v6-c-button--hamburger-icon--middle"
4753
+ d="M1,5 L9,5"
4754
+ />
4755
+ <path
4756
+ class="pf-v6-c-button--hamburger-icon--arrow"
4757
+ d="M1,5 L1,5 L1,5"
4758
+ />
4759
+ <path
4760
+ class="pf-v6-c-button--hamburger-icon--bottom"
4761
+ d="M9,9 L1,9"
4762
+ />
4763
+ </svg>
4517
4764
  </span>
4518
4765
  </button>
4519
4766
  </span>
@@ -4621,7 +4868,7 @@ wrapperTag: div
4621
4868
  </div>
4622
4869
  <div class="pf-v6-c-toolbar__item">
4623
4870
  <button
4624
- class="pf-v6-c-menu-toggle pf-m-plain"
4871
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
4625
4872
  type="button"
4626
4873
  aria-expanded="false"
4627
4874
  aria-label="Settings"
@@ -4810,12 +5057,31 @@ wrapperTag: div
4810
5057
  <div class="pf-v6-c-masthead__main">
4811
5058
  <span class="pf-v6-c-masthead__toggle">
4812
5059
  <button
4813
- class="pf-v6-c-button pf-m-plain"
5060
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
4814
5061
  type="button"
4815
5062
  aria-label="Global navigation"
4816
5063
  >
4817
5064
  <span class="pf-v6-c-button__icon">
4818
- <i class="fas fa-bars" aria-hidden="true"></i>
5065
+ <svg
5066
+ viewBox="0 0 10 10"
5067
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
5068
+ width="1em"
5069
+ height="1em"
5070
+ >
5071
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
5072
+ <path
5073
+ class="pf-v6-c-button--hamburger-icon--middle"
5074
+ d="M1,5 L9,5"
5075
+ />
5076
+ <path
5077
+ class="pf-v6-c-button--hamburger-icon--arrow"
5078
+ d="M1,5 L1,5 L1,5"
5079
+ />
5080
+ <path
5081
+ class="pf-v6-c-button--hamburger-icon--bottom"
5082
+ d="M9,9 L1,9"
5083
+ />
5084
+ </svg>
4819
5085
  </span>
4820
5086
  </button>
4821
5087
  </span>
@@ -4923,7 +5189,7 @@ wrapperTag: div
4923
5189
  </div>
4924
5190
  <div class="pf-v6-c-toolbar__item">
4925
5191
  <button
4926
- class="pf-v6-c-menu-toggle pf-m-plain"
5192
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
4927
5193
  type="button"
4928
5194
  aria-expanded="false"
4929
5195
  aria-label="Settings"