@patternfly/patternfly 6.3.0-prerelease.4 → 6.3.0-prerelease.41

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 (120) hide show
  1. package/README.md +1 -1
  2. package/assets/images/icon-help.hbs +3 -0
  3. package/assets/images/icon-outlined-star.hbs +3 -0
  4. package/assets/images/icon-star.hbs +3 -0
  5. package/base/patternfly-common.css +46 -11
  6. package/base/patternfly-common.scss +58 -13
  7. package/components/Accordion/accordion.css +72 -3
  8. package/components/Accordion/accordion.scss +78 -6
  9. package/components/Alert/alert-group.css +52 -31
  10. package/components/Alert/alert-group.scss +77 -46
  11. package/components/Button/button.css +154 -6
  12. package/components/Button/button.scss +160 -8
  13. package/components/CodeEditor/code-editor.css +3 -0
  14. package/components/CodeEditor/code-editor.scss +3 -1
  15. package/components/DataList/data-list.css +2 -2
  16. package/components/DataList/data-list.scss +2 -2
  17. package/components/DualListSelector/dual-list-selector.css +36 -0
  18. package/components/DualListSelector/dual-list-selector.scss +43 -0
  19. package/components/ExpandableSection/expandable-section.css +63 -1
  20. package/components/ExpandableSection/expandable-section.scss +76 -2
  21. package/components/FileUpload/file-upload.css +3 -3
  22. package/components/FileUpload/file-upload.scss +3 -3
  23. package/components/Form/form.css +40 -1
  24. package/components/Form/form.scss +47 -1
  25. package/components/FormControl/form-control.css +16 -0
  26. package/components/FormControl/form-control.scss +9 -0
  27. package/components/InputGroup/input-group.css +80 -0
  28. package/components/InputGroup/input-group.scss +95 -0
  29. package/components/Menu/menu.css +24 -4
  30. package/components/Menu/menu.scss +20 -5
  31. package/components/MenuToggle/menu-toggle.css +38 -4
  32. package/components/MenuToggle/menu-toggle.scss +48 -3
  33. package/components/Nav/nav.css +22 -8
  34. package/components/Nav/nav.scss +22 -9
  35. package/components/Page/page.css +66 -6
  36. package/components/Page/page.scss +48 -5
  37. package/components/Progress/progress.css +16 -0
  38. package/components/Progress/progress.scss +11 -1
  39. package/components/ProgressStepper/progress-stepper.scss +1 -0
  40. package/components/Skeleton/skeleton.css +22 -2
  41. package/components/Skeleton/skeleton.scss +25 -3
  42. package/components/Spinner/spinner.css +5 -0
  43. package/components/Spinner/spinner.scss +6 -0
  44. package/components/Table/table-grid.css +51 -5
  45. package/components/Table/table-grid.scss +22 -1
  46. package/components/Table/table.css +83 -1
  47. package/components/Table/table.scss +123 -1
  48. package/components/Tabs/tabs.css +25 -15
  49. package/components/Tabs/tabs.scss +26 -13
  50. package/components/TextInputGroup/text-input-group.css +16 -0
  51. package/components/TextInputGroup/text-input-group.scss +8 -0
  52. package/components/Timestamp/timestamp.css +4 -0
  53. package/components/Timestamp/timestamp.scss +7 -0
  54. package/components/TreeView/tree-view.css +39 -0
  55. package/components/TreeView/tree-view.scss +42 -2
  56. package/components/Truncate/truncate.css +1 -0
  57. package/components/Truncate/truncate.scss +3 -0
  58. package/components/_index.css +933 -92
  59. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  60. package/docs/components/Button/examples/Button.md +161 -6
  61. package/docs/components/Card/examples/Card.md +8 -8
  62. package/docs/components/CodeBlock/examples/CodeBlock.md +5 -5
  63. package/docs/components/CodeEditor/examples/CodeEditor.md +26 -2
  64. package/docs/components/DataList/examples/DataList.md +23 -23
  65. package/docs/components/Divider/examples/Divider.md +1 -1
  66. package/docs/components/Drawer/examples/Drawer.md +4 -0
  67. package/docs/components/DualListSelector/examples/DualListSelector.md +534 -16
  68. package/docs/components/ExpandableSection/examples/ExpandableSection.md +17 -12
  69. package/docs/components/Form/examples/Form.md +1179 -114
  70. package/docs/components/Hint/examples/Hint.md +3 -3
  71. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  72. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  73. package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
  74. package/docs/components/Masthead/examples/masthead.md +90 -12
  75. package/docs/components/Menu/examples/Menu.md +122 -6
  76. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  77. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  78. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
  79. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  80. package/docs/components/Page/examples/Page.md +148 -14
  81. package/docs/components/Pagination/examples/Pagination.md +12 -12
  82. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  83. package/docs/components/Slider/examples/Slider.md +2 -2
  84. package/docs/components/Spinner/examples/Spinner.md +10 -0
  85. package/docs/components/Table/examples/Table.md +9457 -6178
  86. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  87. package/docs/components/TextInputGroup/examples/TextInputGroup.md +45 -5
  88. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  89. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  90. package/docs/demos/Alert/examples/Alert.md +66 -9
  91. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  92. package/docs/demos/Banner/examples/Banner.md +47 -6
  93. package/docs/demos/Card/examples/Card.md +5 -62
  94. package/docs/demos/CardView/examples/CardView.md +24 -5
  95. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  96. package/docs/demos/DataList/examples/DataList.md +100 -24
  97. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -47
  98. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  99. package/docs/demos/Form/examples/BasicForms.md +142 -22
  100. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  101. package/docs/demos/Masthead/examples/Masthead.md +171 -19
  102. package/docs/demos/Modal/examples/Modal.md +171 -21
  103. package/docs/demos/Nav/examples/Nav.md +113 -18
  104. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  105. package/docs/demos/Page/examples/Page.md +661 -40
  106. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  107. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -103
  108. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  109. package/docs/demos/Table/examples/Table.md +516 -178
  110. package/docs/demos/Tabs/examples/Tabs.md +137 -593
  111. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  112. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  113. package/package.json +6 -6
  114. package/patternfly-base-no-globals.css +45 -11
  115. package/patternfly-base.css +45 -11
  116. package/patternfly-no-globals.css +978 -103
  117. package/patternfly.css +978 -103
  118. package/patternfly.min.css +1 -1
  119. package/patternfly.min.css.map +1 -1
  120. package/sass-utilities/mixins.scss +54 -0
package/docs/demos/JumpLinks/examples/JumpLinks.md CHANGED
@@ -22,12 +22,31 @@ section: components
22
22
  <div class="pf-v6-c-masthead__main">
23
23
  <span class="pf-v6-c-masthead__toggle">
24
24
  <button
25
- class="pf-v6-c-button pf-m-plain"
25
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
26
26
  type="button"
27
27
  aria-label="Global navigation"
28
28
  >
29
29
  <span class="pf-v6-c-button__icon">
30
- <i class="fas fa-bars" aria-hidden="true"></i>
30
+ <svg
31
+ viewBox="0 0 10 10"
32
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
33
+ width="1em"
34
+ height="1em"
35
+ >
36
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
37
+ <path
38
+ class="pf-v6-c-button--hamburger-icon--middle"
39
+ d="M1,5 L9,5"
40
+ />
41
+ <path
42
+ class="pf-v6-c-button--hamburger-icon--arrow"
43
+ d="M1,5 L1,5 L1,5"
44
+ />
45
+ <path
46
+ class="pf-v6-c-button--hamburger-icon--bottom"
47
+ d="M9,9 L1,9"
48
+ />
49
+ </svg>
31
50
  </span>
32
51
  </button>
33
52
  </span>
@@ -135,7 +154,7 @@ section: components
135
154
  </div>
136
155
  <div class="pf-v6-c-toolbar__item">
137
156
  <button
138
- class="pf-v6-c-menu-toggle pf-m-plain"
157
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
139
158
  type="button"
140
159
  aria-expanded="false"
141
160
  aria-label="Settings"
@@ -437,12 +456,31 @@ section: components
437
456
  <div class="pf-v6-c-masthead__main">
438
457
  <span class="pf-v6-c-masthead__toggle">
439
458
  <button
440
- class="pf-v6-c-button pf-m-plain"
459
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
441
460
  type="button"
442
461
  aria-label="Global navigation"
443
462
  >
444
463
  <span class="pf-v6-c-button__icon">
445
- <i class="fas fa-bars" aria-hidden="true"></i>
464
+ <svg
465
+ viewBox="0 0 10 10"
466
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
467
+ width="1em"
468
+ height="1em"
469
+ >
470
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
471
+ <path
472
+ class="pf-v6-c-button--hamburger-icon--middle"
473
+ d="M1,5 L9,5"
474
+ />
475
+ <path
476
+ class="pf-v6-c-button--hamburger-icon--arrow"
477
+ d="M1,5 L1,5 L1,5"
478
+ />
479
+ <path
480
+ class="pf-v6-c-button--hamburger-icon--bottom"
481
+ d="M9,9 L1,9"
482
+ />
483
+ </svg>
446
484
  </span>
447
485
  </button>
448
486
  </span>
@@ -550,7 +588,7 @@ section: components
550
588
  </div>
551
589
  <div class="pf-v6-c-toolbar__item">
552
590
  <button
553
- class="pf-v6-c-menu-toggle pf-m-plain"
591
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
554
592
  type="button"
555
593
  aria-expanded="false"
556
594
  aria-label="Settings"
@@ -852,12 +890,31 @@ section: components
852
890
  <div class="pf-v6-c-masthead__main">
853
891
  <span class="pf-v6-c-masthead__toggle">
854
892
  <button
855
- class="pf-v6-c-button pf-m-plain"
893
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
856
894
  type="button"
857
895
  aria-label="Global navigation"
858
896
  >
859
897
  <span class="pf-v6-c-button__icon">
860
- <i class="fas fa-bars" aria-hidden="true"></i>
898
+ <svg
899
+ viewBox="0 0 10 10"
900
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
901
+ width="1em"
902
+ height="1em"
903
+ >
904
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
905
+ <path
906
+ class="pf-v6-c-button--hamburger-icon--middle"
907
+ d="M1,5 L9,5"
908
+ />
909
+ <path
910
+ class="pf-v6-c-button--hamburger-icon--arrow"
911
+ d="M1,5 L1,5 L1,5"
912
+ />
913
+ <path
914
+ class="pf-v6-c-button--hamburger-icon--bottom"
915
+ d="M9,9 L1,9"
916
+ />
917
+ </svg>
861
918
  </span>
862
919
  </button>
863
920
  </span>
@@ -965,7 +1022,7 @@ section: components
965
1022
  </div>
966
1023
  <div class="pf-v6-c-toolbar__item">
967
1024
  <button
968
- class="pf-v6-c-menu-toggle pf-m-plain"
1025
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
969
1026
  type="button"
970
1027
  aria-expanded="false"
971
1028
  aria-label="Settings"
@@ -1264,12 +1321,31 @@ section: components
1264
1321
  <div class="pf-v6-c-masthead__main">
1265
1322
  <span class="pf-v6-c-masthead__toggle">
1266
1323
  <button
1267
- class="pf-v6-c-button pf-m-plain"
1324
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1268
1325
  type="button"
1269
1326
  aria-label="Global navigation"
1270
1327
  >
1271
1328
  <span class="pf-v6-c-button__icon">
1272
- <i class="fas fa-bars" aria-hidden="true"></i>
1329
+ <svg
1330
+ viewBox="0 0 10 10"
1331
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1332
+ width="1em"
1333
+ height="1em"
1334
+ >
1335
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1336
+ <path
1337
+ class="pf-v6-c-button--hamburger-icon--middle"
1338
+ d="M1,5 L9,5"
1339
+ />
1340
+ <path
1341
+ class="pf-v6-c-button--hamburger-icon--arrow"
1342
+ d="M1,5 L1,5 L1,5"
1343
+ />
1344
+ <path
1345
+ class="pf-v6-c-button--hamburger-icon--bottom"
1346
+ d="M9,9 L1,9"
1347
+ />
1348
+ </svg>
1273
1349
  </span>
1274
1350
  </button>
1275
1351
  </span>
@@ -1377,7 +1453,7 @@ section: components
1377
1453
  </div>
1378
1454
  <div class="pf-v6-c-toolbar__item">
1379
1455
  <button
1380
- class="pf-v6-c-menu-toggle pf-m-plain"
1456
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1381
1457
  type="button"
1382
1458
  aria-expanded="false"
1383
1459
  aria-label="Settings"
@@ -1622,12 +1698,31 @@ section: components
1622
1698
  <div class="pf-v6-c-masthead__main">
1623
1699
  <span class="pf-v6-c-masthead__toggle">
1624
1700
  <button
1625
- class="pf-v6-c-button pf-m-plain"
1701
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1626
1702
  type="button"
1627
1703
  aria-label="Global navigation"
1628
1704
  >
1629
1705
  <span class="pf-v6-c-button__icon">
1630
- <i class="fas fa-bars" aria-hidden="true"></i>
1706
+ <svg
1707
+ viewBox="0 0 10 10"
1708
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1709
+ width="1em"
1710
+ height="1em"
1711
+ >
1712
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1713
+ <path
1714
+ class="pf-v6-c-button--hamburger-icon--middle"
1715
+ d="M1,5 L9,5"
1716
+ />
1717
+ <path
1718
+ class="pf-v6-c-button--hamburger-icon--arrow"
1719
+ d="M1,5 L1,5 L1,5"
1720
+ />
1721
+ <path
1722
+ class="pf-v6-c-button--hamburger-icon--bottom"
1723
+ d="M9,9 L1,9"
1724
+ />
1725
+ </svg>
1631
1726
  </span>
1632
1727
  </button>
1633
1728
  </span>
@@ -1735,7 +1830,7 @@ section: components
1735
1830
  </div>
1736
1831
  <div class="pf-v6-c-toolbar__item">
1737
1832
  <button
1738
- class="pf-v6-c-menu-toggle pf-m-plain"
1833
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1739
1834
  type="button"
1740
1835
  aria-expanded="false"
1741
1836
  aria-label="Settings"
@@ -2025,12 +2120,31 @@ section: components
2025
2120
  <div class="pf-v6-c-masthead__main">
2026
2121
  <span class="pf-v6-c-masthead__toggle">
2027
2122
  <button
2028
- class="pf-v6-c-button pf-m-plain"
2123
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2029
2124
  type="button"
2030
2125
  aria-label="Global navigation"
2031
2126
  >
2032
2127
  <span class="pf-v6-c-button__icon">
2033
- <i class="fas fa-bars" aria-hidden="true"></i>
2128
+ <svg
2129
+ viewBox="0 0 10 10"
2130
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2131
+ width="1em"
2132
+ height="1em"
2133
+ >
2134
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2135
+ <path
2136
+ class="pf-v6-c-button--hamburger-icon--middle"
2137
+ d="M1,5 L9,5"
2138
+ />
2139
+ <path
2140
+ class="pf-v6-c-button--hamburger-icon--arrow"
2141
+ d="M1,5 L1,5 L1,5"
2142
+ />
2143
+ <path
2144
+ class="pf-v6-c-button--hamburger-icon--bottom"
2145
+ d="M9,9 L1,9"
2146
+ />
2147
+ </svg>
2034
2148
  </span>
2035
2149
  </button>
2036
2150
  </span>
@@ -2138,7 +2252,7 @@ section: components
2138
2252
  </div>
2139
2253
  <div class="pf-v6-c-toolbar__item">
2140
2254
  <button
2141
- class="pf-v6-c-menu-toggle pf-m-plain"
2255
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
2142
2256
  type="button"
2143
2257
  aria-expanded="false"
2144
2258
  aria-label="Settings"
package/docs/demos/Masthead/examples/Masthead.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>
@@ -282,12 +301,31 @@ wrapperTag: div
282
301
  <div class="pf-v6-c-masthead__main">
283
302
  <span class="pf-v6-c-masthead__toggle">
284
303
  <button
285
- class="pf-v6-c-button pf-m-plain"
304
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
286
305
  type="button"
287
306
  aria-label="Global navigation"
288
307
  >
289
308
  <span class="pf-v6-c-button__icon">
290
- <i class="fas fa-bars" aria-hidden="true"></i>
309
+ <svg
310
+ viewBox="0 0 10 10"
311
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
312
+ width="1em"
313
+ height="1em"
314
+ >
315
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
316
+ <path
317
+ class="pf-v6-c-button--hamburger-icon--middle"
318
+ d="M1,5 L9,5"
319
+ />
320
+ <path
321
+ class="pf-v6-c-button--hamburger-icon--arrow"
322
+ d="M1,5 L1,5 L1,5"
323
+ />
324
+ <path
325
+ class="pf-v6-c-button--hamburger-icon--bottom"
326
+ d="M9,9 L1,9"
327
+ />
328
+ </svg>
291
329
  </span>
292
330
  </button>
293
331
  </span>
@@ -573,12 +611,31 @@ wrapperTag: div
573
611
  <div class="pf-v6-c-masthead__main">
574
612
  <span class="pf-v6-c-masthead__toggle">
575
613
  <button
576
- class="pf-v6-c-button pf-m-plain"
614
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
577
615
  type="button"
578
616
  aria-label="Global navigation"
579
617
  >
580
618
  <span class="pf-v6-c-button__icon">
581
- <i class="fas fa-bars" aria-hidden="true"></i>
619
+ <svg
620
+ viewBox="0 0 10 10"
621
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
622
+ width="1em"
623
+ height="1em"
624
+ >
625
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
626
+ <path
627
+ class="pf-v6-c-button--hamburger-icon--middle"
628
+ d="M1,5 L9,5"
629
+ />
630
+ <path
631
+ class="pf-v6-c-button--hamburger-icon--arrow"
632
+ d="M1,5 L1,5 L1,5"
633
+ />
634
+ <path
635
+ class="pf-v6-c-button--hamburger-icon--bottom"
636
+ d="M9,9 L1,9"
637
+ />
638
+ </svg>
582
639
  </span>
583
640
  </button>
584
641
  </span>
@@ -901,12 +958,31 @@ wrapperTag: div
901
958
  <div class="pf-v6-c-masthead__main">
902
959
  <span class="pf-v6-c-masthead__toggle">
903
960
  <button
904
- class="pf-v6-c-button pf-m-plain"
961
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
905
962
  type="button"
906
963
  aria-label="Global navigation"
907
964
  >
908
965
  <span class="pf-v6-c-button__icon">
909
- <i class="fas fa-bars" aria-hidden="true"></i>
966
+ <svg
967
+ viewBox="0 0 10 10"
968
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
969
+ width="1em"
970
+ height="1em"
971
+ >
972
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
973
+ <path
974
+ class="pf-v6-c-button--hamburger-icon--middle"
975
+ d="M1,5 L9,5"
976
+ />
977
+ <path
978
+ class="pf-v6-c-button--hamburger-icon--arrow"
979
+ d="M1,5 L1,5 L1,5"
980
+ />
981
+ <path
982
+ class="pf-v6-c-button--hamburger-icon--bottom"
983
+ d="M9,9 L1,9"
984
+ />
985
+ </svg>
910
986
  </span>
911
987
  </button>
912
988
  </span>
@@ -1229,12 +1305,31 @@ wrapperTag: div
1229
1305
  <div class="pf-v6-c-masthead__main">
1230
1306
  <span class="pf-v6-c-masthead__toggle">
1231
1307
  <button
1232
- class="pf-v6-c-button pf-m-plain"
1308
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1233
1309
  type="button"
1234
1310
  aria-label="Global navigation"
1235
1311
  >
1236
1312
  <span class="pf-v6-c-button__icon">
1237
- <i class="fas fa-bars" aria-hidden="true"></i>
1313
+ <svg
1314
+ viewBox="0 0 10 10"
1315
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1316
+ width="1em"
1317
+ height="1em"
1318
+ >
1319
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1320
+ <path
1321
+ class="pf-v6-c-button--hamburger-icon--middle"
1322
+ d="M1,5 L9,5"
1323
+ />
1324
+ <path
1325
+ class="pf-v6-c-button--hamburger-icon--arrow"
1326
+ d="M1,5 L1,5 L1,5"
1327
+ />
1328
+ <path
1329
+ class="pf-v6-c-button--hamburger-icon--bottom"
1330
+ d="M9,9 L1,9"
1331
+ />
1332
+ </svg>
1238
1333
  </span>
1239
1334
  </button>
1240
1335
  </span>
@@ -1494,12 +1589,31 @@ wrapperTag: div
1494
1589
  <div class="pf-v6-c-masthead__main">
1495
1590
  <span class="pf-v6-c-masthead__toggle">
1496
1591
  <button
1497
- class="pf-v6-c-button pf-m-plain"
1592
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1498
1593
  type="button"
1499
1594
  aria-label="Global navigation"
1500
1595
  >
1501
1596
  <span class="pf-v6-c-button__icon">
1502
- <i class="fas fa-bars" aria-hidden="true"></i>
1597
+ <svg
1598
+ viewBox="0 0 10 10"
1599
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1600
+ width="1em"
1601
+ height="1em"
1602
+ >
1603
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1604
+ <path
1605
+ class="pf-v6-c-button--hamburger-icon--middle"
1606
+ d="M1,5 L9,5"
1607
+ />
1608
+ <path
1609
+ class="pf-v6-c-button--hamburger-icon--arrow"
1610
+ d="M1,5 L1,5 L1,5"
1611
+ />
1612
+ <path
1613
+ class="pf-v6-c-button--hamburger-icon--bottom"
1614
+ d="M9,9 L1,9"
1615
+ />
1616
+ </svg>
1503
1617
  </span>
1504
1618
  </button>
1505
1619
  </span>
@@ -1777,12 +1891,31 @@ wrapperTag: div
1777
1891
  <div class="pf-v6-c-masthead__main">
1778
1892
  <span class="pf-v6-c-masthead__toggle">
1779
1893
  <button
1780
- class="pf-v6-c-button pf-m-plain"
1894
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1781
1895
  type="button"
1782
1896
  aria-label="Global navigation"
1783
1897
  >
1784
1898
  <span class="pf-v6-c-button__icon">
1785
- <i class="fas fa-bars" aria-hidden="true"></i>
1899
+ <svg
1900
+ viewBox="0 0 10 10"
1901
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1902
+ width="1em"
1903
+ height="1em"
1904
+ >
1905
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1906
+ <path
1907
+ class="pf-v6-c-button--hamburger-icon--middle"
1908
+ d="M1,5 L9,5"
1909
+ />
1910
+ <path
1911
+ class="pf-v6-c-button--hamburger-icon--arrow"
1912
+ d="M1,5 L1,5 L1,5"
1913
+ />
1914
+ <path
1915
+ class="pf-v6-c-button--hamburger-icon--bottom"
1916
+ d="M9,9 L1,9"
1917
+ />
1918
+ </svg>
1786
1919
  </span>
1787
1920
  </button>
1788
1921
  </span>
@@ -1890,7 +2023,7 @@ wrapperTag: div
1890
2023
  </div>
1891
2024
  <div class="pf-v6-c-toolbar__item">
1892
2025
  <button
1893
- class="pf-v6-c-menu-toggle pf-m-plain"
2026
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1894
2027
  type="button"
1895
2028
  aria-expanded="false"
1896
2029
  aria-label="Settings"
@@ -2066,7 +2199,7 @@ wrapperTag: div
2066
2199
  ### Horizontal nav
2067
2200
 
2068
2201
  ```html isFullscreen
2069
- <div class="pf-v6-c-page" id="masthead-horizontal-nav">
2202
+ <div class="pf-v6-c-page pf-m-no-sidebar" id="masthead-horizontal-nav">
2070
2203
  <div class="pf-v6-c-skip-to-content">
2071
2204
  <a
2072
2205
  class="pf-v6-c-button pf-m-primary"
@@ -2246,7 +2379,7 @@ wrapperTag: div
2246
2379
  </div>
2247
2380
  <div class="pf-v6-c-toolbar__item">
2248
2381
  <button
2249
- class="pf-v6-c-menu-toggle pf-m-plain"
2382
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
2250
2383
  type="button"
2251
2384
  aria-expanded="false"
2252
2385
  aria-label="Settings"
@@ -2402,12 +2535,31 @@ wrapperTag: div
2402
2535
  <div class="pf-v6-c-masthead__main">
2403
2536
  <span class="pf-v6-c-masthead__toggle">
2404
2537
  <button
2405
- class="pf-v6-c-button pf-m-plain"
2538
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2406
2539
  type="button"
2407
2540
  aria-label="Global navigation"
2408
2541
  >
2409
2542
  <span class="pf-v6-c-button__icon">
2410
- <i class="fas fa-bars" aria-hidden="true"></i>
2543
+ <svg
2544
+ viewBox="0 0 10 10"
2545
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2546
+ width="1em"
2547
+ height="1em"
2548
+ >
2549
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2550
+ <path
2551
+ class="pf-v6-c-button--hamburger-icon--middle"
2552
+ d="M1,5 L9,5"
2553
+ />
2554
+ <path
2555
+ class="pf-v6-c-button--hamburger-icon--arrow"
2556
+ d="M1,5 L1,5 L1,5"
2557
+ />
2558
+ <path
2559
+ class="pf-v6-c-button--hamburger-icon--bottom"
2560
+ d="M9,9 L1,9"
2561
+ />
2562
+ </svg>
2411
2563
  </span>
2412
2564
  </button>
2413
2565
  </span>