@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.60

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 (168) hide show
  1. package/README.md +22 -14
  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/normalize.scss +4 -0
  6. package/base/patternfly-common.css +46 -11
  7. package/base/patternfly-common.scss +58 -13
  8. package/base/patternfly-variables.css +1172 -1
  9. package/base/patternfly-variables.scss +10 -0
  10. package/base/tokens/tokens-charts-dark.scss +1 -1
  11. package/base/tokens/tokens-charts.scss +1 -1
  12. package/base/tokens/tokens-dark.scss +13 -1
  13. package/base/tokens/tokens-default.scss +60 -2
  14. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  15. package/base/tokens/tokens-highcontrast.scss +703 -0
  16. package/base/tokens/tokens-local.scss +1 -0
  17. package/base/tokens/tokens-palette.scss +9 -1
  18. package/components/Accordion/accordion.css +102 -6
  19. package/components/Accordion/accordion.scss +112 -10
  20. package/components/Alert/alert-group.css +67 -33
  21. package/components/Alert/alert-group.scss +95 -48
  22. package/components/Badge/badge.css +2 -0
  23. package/components/Badge/badge.scss +2 -0
  24. package/components/Banner/banner.css +4 -0
  25. package/components/Banner/banner.scss +4 -0
  26. package/components/Button/button.css +187 -9
  27. package/components/Button/button.scss +195 -13
  28. package/components/CalendarMonth/calendar-month.css +16 -0
  29. package/components/CalendarMonth/calendar-month.scss +16 -0
  30. package/components/Card/card.css +5 -4
  31. package/components/Card/card.scss +5 -4
  32. package/components/CodeBlock/code-block.css +3 -0
  33. package/components/CodeBlock/code-block.scss +3 -0
  34. package/components/CodeEditor/code-editor.css +8 -3
  35. package/components/CodeEditor/code-editor.scss +11 -6
  36. package/components/DataList/data-list.css +2 -2
  37. package/components/DataList/data-list.scss +2 -2
  38. package/components/DatePicker/date-picker.css +3 -0
  39. package/components/DatePicker/date-picker.scss +4 -0
  40. package/components/Drawer/drawer.css +44 -41
  41. package/components/Drawer/drawer.scss +42 -36
  42. package/components/DualListSelector/dual-list-selector.css +55 -1
  43. package/components/DualListSelector/dual-list-selector.scss +63 -1
  44. package/components/ExpandableSection/expandable-section.css +63 -1
  45. package/components/ExpandableSection/expandable-section.scss +76 -2
  46. package/components/FileUpload/file-upload.css +3 -3
  47. package/components/FileUpload/file-upload.scss +3 -3
  48. package/components/Form/form.css +40 -1
  49. package/components/Form/form.scss +47 -1
  50. package/components/FormControl/form-control.css +16 -0
  51. package/components/FormControl/form-control.scss +9 -0
  52. package/components/InputGroup/input-group.css +80 -0
  53. package/components/InputGroup/input-group.scss +95 -0
  54. package/components/Label/label.css +20 -11
  55. package/components/Label/label.scss +21 -11
  56. package/components/Login/login.css +3 -0
  57. package/components/Login/login.scss +3 -0
  58. package/components/Menu/menu.css +35 -4
  59. package/components/Menu/menu.scss +32 -6
  60. package/components/MenuToggle/menu-toggle.css +51 -10
  61. package/components/MenuToggle/menu-toggle.scss +61 -9
  62. package/components/ModalBox/modal-box.css +3 -0
  63. package/components/ModalBox/modal-box.scss +3 -0
  64. package/components/Nav/nav.css +39 -8
  65. package/components/Nav/nav.scss +42 -9
  66. package/components/Page/page.css +124 -26
  67. package/components/Page/page.scss +86 -16
  68. package/components/Pagination/pagination.css +14 -1
  69. package/components/Pagination/pagination.scss +14 -1
  70. package/components/Panel/panel.css +7 -1
  71. package/components/Panel/panel.scss +7 -1
  72. package/components/Popover/popover.css +4 -0
  73. package/components/Popover/popover.scss +4 -0
  74. package/components/Progress/progress.css +26 -0
  75. package/components/Progress/progress.scss +22 -1
  76. package/components/ProgressStepper/progress-stepper.scss +1 -0
  77. package/components/SimpleList/simple-list.css +15 -0
  78. package/components/SimpleList/simple-list.scss +17 -1
  79. package/components/Skeleton/skeleton.css +22 -2
  80. package/components/Skeleton/skeleton.scss +25 -3
  81. package/components/Spinner/spinner.css +5 -0
  82. package/components/Spinner/spinner.scss +6 -0
  83. package/components/Table/table-grid.css +51 -5
  84. package/components/Table/table-grid.scss +22 -1
  85. package/components/Table/table.css +124 -2
  86. package/components/Table/table.scss +171 -3
  87. package/components/Tabs/tabs.css +32 -15
  88. package/components/Tabs/tabs.scss +34 -14
  89. package/components/TextInputGroup/text-input-group.css +23 -0
  90. package/components/TextInputGroup/text-input-group.scss +16 -1
  91. package/components/Timestamp/timestamp.css +4 -0
  92. package/components/Timestamp/timestamp.scss +7 -0
  93. package/components/TreeView/tree-view.css +54 -0
  94. package/components/TreeView/tree-view.scss +59 -2
  95. package/components/Truncate/truncate.css +1 -0
  96. package/components/Truncate/truncate.scss +3 -0
  97. package/components/Wizard/wizard.css +33 -6
  98. package/components/Wizard/wizard.scss +38 -8
  99. package/components/_index.css +1390 -195
  100. package/docs/components/Alert/examples/Alert.md +2 -2
  101. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  102. package/docs/components/Button/examples/Button.md +159 -6
  103. package/docs/components/Card/examples/Card.md +8 -8
  104. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -32
  105. package/docs/components/CodeBlock/examples/CodeBlock.md +10 -10
  106. package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
  107. package/docs/components/DataList/examples/DataList.md +83 -207
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  109. package/docs/components/DualListSelector/examples/DualListSelector.md +642 -319
  110. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  111. package/docs/components/ExpandableSection/examples/ExpandableSection.md +26 -15
  112. package/docs/components/Form/examples/Form.md +1178 -113
  113. package/docs/components/Hint/examples/Hint.md +3 -3
  114. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
  115. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  116. package/docs/components/Label/examples/Label.md +2 -2
  117. package/docs/components/Login/examples/Login.md +22 -22
  118. package/docs/components/Masthead/examples/masthead.md +90 -12
  119. package/docs/components/Menu/examples/Menu.md +122 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  121. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  122. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  123. package/docs/components/Page/examples/Page.md +147 -14
  124. package/docs/components/Pagination/examples/Pagination.md +123 -12
  125. package/docs/components/Popover/examples/Popover.md +0 -4
  126. package/docs/components/Progress/examples/Progress.md +222 -210
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  128. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  129. package/docs/components/Slider/examples/Slider.md +2 -2
  130. package/docs/components/Spinner/examples/Spinner.md +10 -0
  131. package/docs/components/Table/examples/Table.md +7699 -4896
  132. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -49
  134. package/docs/components/Title/examples/Title.md +8 -8
  135. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  136. package/docs/components/Wizard/examples/Wizard.md +583 -0
  137. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  138. package/docs/demos/Alert/examples/Alert.md +66 -9
  139. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  140. package/docs/demos/Banner/examples/Banner.md +47 -6
  141. package/docs/demos/Card/examples/Card.md +13 -67
  142. package/docs/demos/CardView/examples/CardView.md +24 -5
  143. package/docs/demos/Dashboard/examples/Dashboard.md +34 -27
  144. package/docs/demos/DataList/examples/DataList.md +628 -192
  145. package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
  146. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  147. package/docs/demos/Form/examples/BasicForms.md +146 -26
  148. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  149. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  150. package/docs/demos/Modal/examples/Modal.md +171 -21
  151. package/docs/demos/Nav/examples/Nav.md +111 -16
  152. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +114 -19
  153. package/docs/demos/Page/examples/Page.md +309 -43
  154. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  155. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +886 -415
  156. package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
  157. package/docs/demos/Table/examples/Table.md +480 -177
  158. package/docs/demos/Tabs/examples/Tabs.md +139 -594
  159. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  160. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  161. package/package.json +12 -7
  162. package/patternfly-base-no-globals.css +1217 -12
  163. package/patternfly-base.css +1221 -12
  164. package/patternfly-no-globals.css +2837 -437
  165. package/patternfly.css +2839 -435
  166. package/patternfly.min.css +1 -1
  167. package/patternfly.min.css.map +1 -1
  168. package/sass-utilities/mixins.scss +54 -0
package/docs/components/Hint/examples/Hint.md CHANGED
@@ -13,7 +13,7 @@ cssPrefix: pf-v6-c-hint
13
13
  class="pf-v6-c-menu-toggle pf-m-plain"
14
14
  type="button"
15
15
  aria-expanded="false"
16
- aria-label="Menu toggle"
16
+ aria-label="Hint with title example actions"
17
17
  id="hint-with-title-example-hint"
18
18
  >
19
19
  <span class="pf-v6-c-menu-toggle__icon">
@@ -35,7 +35,7 @@ cssPrefix: pf-v6-c-hint
35
35
  class="pf-v6-c-menu-toggle pf-m-plain"
36
36
  type="button"
37
37
  aria-expanded="false"
38
- aria-label="Menu toggle"
38
+ aria-label="Hint with title and footer example actions"
39
39
  id="hint-with-title-and-actions-example-hint"
40
40
  >
41
41
  <span class="pf-v6-c-menu-toggle__icon">
@@ -74,7 +74,7 @@ cssPrefix: pf-v6-c-hint
74
74
  class="pf-v6-c-menu-toggle pf-m-plain"
75
75
  type="button"
76
76
  aria-expanded="false"
77
- aria-label="Menu toggle"
77
+ aria-label="Hint without title example actions"
78
78
  id="hint-with-no-title-example-hint"
79
79
  >
80
80
  <span class="pf-v6-c-menu-toggle__icon">
package/docs/components/InlineEdit/examples/InlineEdit.md CHANGED
@@ -680,7 +680,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
680
680
  class="pf-v6-c-menu-toggle pf-m-plain"
681
681
  type="button"
682
682
  aria-expanded="false"
683
- aria-label="Menu toggle"
683
+ aria-label="Table actions"
684
684
  >
685
685
  <span class="pf-v6-c-menu-toggle__icon">
686
686
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -869,7 +869,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
869
869
  class="pf-v6-c-menu-toggle pf-m-plain"
870
870
  type="button"
871
871
  aria-expanded="false"
872
- aria-label="Menu toggle"
872
+ aria-label="Table actions"
873
873
  >
874
874
  <span class="pf-v6-c-menu-toggle__icon">
875
875
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -917,7 +917,3 @@ All accessibility requirements for inputs apply to elements within inline edit.
917
917
  | `.pf-m-bold` | `.pf-v6-c-inline-edit__label` | Modifies an inline edit label's `font-weight`. |
918
918
  | `.pf-m-valid` | `.pf-v6-c-inline-edit__action` | Modifies the action button state. |
919
919
  | `.pf-m-enable-editable` | `.pf-v6-c-inline-edit__action` | Exposes an inline edit action by default. |
920
-
921
- ```
922
- -->
923
- ```
package/docs/components/InputGroup/examples/InputGroup.md CHANGED
@@ -252,7 +252,7 @@ Use the input group to extend form controls by adding text, buttons, selects, et
252
252
  />
253
253
  </span>
254
254
  </div>
255
- <div class="pf-v6-c-input-group__item pf-m-box pf-m-plain">
255
+ <div class="pf-v6-c-input-group__item pf-m-plain pf-m-box">
256
256
  <span class="pf-v6-c-input-group__text">%</span>
257
257
  </div>
258
258
  </div>
@@ -280,3 +280,7 @@ When using the `.pf-v6-c-input-group` always ensure labels are used outside the
280
280
  | `.pf-m-box` | `.pf-v6-c-input-group__item` | Adds appropriate styling for items that are not form controls. |
281
281
  | `.pf-m-fill` | `.pf-v6-c-input-group__item` | Allows the input group element to stretch to fill available space. |
282
282
  | `.pf-m-disabled` | `.pf-v6-c-input-group__item` | Adds disabled styling to match a disabled input within the input group. |
283
+ | `.pf-m-search-expandable` | `.pf-v6-c-input-group` | Modifies an input group to be an expandable search input. **Note:** The expandable search input can be found in the [search input](/components/search-input/) component docs for react and [text input group](/components/text-input-group/html#search-input-group-expandable) component docs for core. |
284
+ | `.pf-m-search-input` | `.pf-v6-c-input-group__item` | Identifies the text input an expandable search input. |
285
+ | `.pf-m-search-expand` | `.pf-v6-c-input-group__item` | Identifies the expand button in an expandable search input. |
286
+ | `.pf-m-search-action` | `.pf-v6-c-input-group__item` | Identifies actions adjacent to the search input when an expandable search input is expanded. |
package/docs/components/Label/examples/Label.md CHANGED
@@ -6930,7 +6930,7 @@ The contents of a label group can be modified by removing labels or adding new o
6930
6930
  </div>
6931
6931
  <div class="pf-v6-c-label-group__close">
6932
6932
  <button
6933
- class="pf-v6-c-button pf-m-no-padding pf-m-plain"
6933
+ class="pf-v6-c-button pf-m-small pf-m-plain"
6934
6934
  type="button"
6935
6935
  aria-labelledby="label-group-category-removable-button label-group-category-removable-label"
6936
6936
  aria-label="Close label group"
@@ -7208,7 +7208,7 @@ The contents of a label group can be modified by removing labels or adding new o
7208
7208
  </div>
7209
7209
  <div class="pf-v6-c-label-group__close">
7210
7210
  <button
7211
- class="pf-v6-c-button pf-m-no-padding pf-m-plain"
7211
+ class="pf-v6-c-button pf-m-small pf-m-plain"
7212
7212
  type="button"
7213
7213
  aria-labelledby="label-group-vertical-category-removable-button label-group-vertical-category-removable-label"
7214
7214
  aria-label="Close label group"
package/docs/components/Login/examples/Login.md CHANGED
@@ -23,12 +23,12 @@ wrapperTag: div
23
23
  />
24
24
  </header>
25
25
  <main class="pf-v6-c-login__main">
26
- <header class="pf-v6-c-login__main-header">
26
+ <div class="pf-v6-c-login__main-header">
27
27
  <h1 class="pf-v6-c-title pf-m-3xl">Log in to your account</h1>
28
28
  <p
29
29
  class="pf-v6-c-login__main-header-desc"
30
30
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
31
- </header>
31
+ </div>
32
32
  <div class="pf-v6-c-login__main-body">
33
33
  <form class="pf-v6-c-form" novalidate>
34
34
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
@@ -100,7 +100,7 @@ wrapperTag: div
100
100
  </form>
101
101
  </div>
102
102
 
103
- <footer class="pf-v6-c-login__main-footer">
103
+ <div class="pf-v6-c-login__main-footer">
104
104
  <ul class="pf-v6-c-login__main-footer-links" role="list">
105
105
  <li class="pf-v6-c-login__main-footer-links-item">
106
106
  <button
@@ -217,7 +217,7 @@ wrapperTag: div
217
217
  <a href="#">Forgot username or password?</a>
218
218
  </p>
219
219
  </div>
220
- </footer>
220
+ </div>
221
221
  </main>
222
222
  <footer class="pf-v6-c-login__footer">
223
223
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
@@ -256,12 +256,12 @@ wrapperTag: div
256
256
  />
257
257
  </header>
258
258
  <main class="pf-v6-c-login__main">
259
- <header class="pf-v6-c-login__main-header">
259
+ <div class="pf-v6-c-login__main-header">
260
260
  <h1 class="pf-v6-c-title pf-m-3xl">Log in to your account</h1>
261
261
  <p
262
262
  class="pf-v6-c-login__main-header-desc"
263
263
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
264
- </header>
264
+ </div>
265
265
  <div class="pf-v6-c-login__main-body">
266
266
  <form class="pf-v6-c-form" novalidate>
267
267
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
@@ -350,7 +350,7 @@ wrapperTag: div
350
350
  </form>
351
351
  </div>
352
352
 
353
- <footer class="pf-v6-c-login__main-footer">
353
+ <div class="pf-v6-c-login__main-footer">
354
354
  <ul class="pf-v6-c-login__main-footer-links" role="list">
355
355
  <li class="pf-v6-c-login__main-footer-links-item">
356
356
  <button
@@ -467,7 +467,7 @@ wrapperTag: div
467
467
  <a href="#">Forgot username or password?</a>
468
468
  </p>
469
469
  </div>
470
- </footer>
470
+ </div>
471
471
  </main>
472
472
  <footer class="pf-v6-c-login__footer">
473
473
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
@@ -506,12 +506,12 @@ wrapperTag: div
506
506
  />
507
507
  </header>
508
508
  <main class="pf-v6-c-login__main">
509
- <header class="pf-v6-c-login__main-header">
509
+ <div class="pf-v6-c-login__main-header">
510
510
  <h1 class="pf-v6-c-title pf-m-3xl">Log in to your account</h1>
511
511
  <p
512
512
  class="pf-v6-c-login__main-header-desc"
513
513
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
514
- </header>
514
+ </div>
515
515
  <div class="pf-v6-c-login__main-body">
516
516
  <form class="pf-v6-c-form" novalidate>
517
517
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
@@ -595,7 +595,7 @@ wrapperTag: div
595
595
  </form>
596
596
  </div>
597
597
 
598
- <footer class="pf-v6-c-login__main-footer">
598
+ <div class="pf-v6-c-login__main-footer">
599
599
  <ul class="pf-v6-c-login__main-footer-links" role="list">
600
600
  <li class="pf-v6-c-login__main-footer-links-item">
601
601
  <button
@@ -712,7 +712,7 @@ wrapperTag: div
712
712
  <a href="#">Forgot username or password?</a>
713
713
  </p>
714
714
  </div>
715
- </footer>
715
+ </div>
716
716
  </main>
717
717
  <footer class="pf-v6-c-login__footer">
718
718
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
@@ -751,12 +751,12 @@ wrapperTag: div
751
751
  />
752
752
  </header>
753
753
  <main class="pf-v6-c-login__main">
754
- <header class="pf-v6-c-login__main-header">
754
+ <div class="pf-v6-c-login__main-header">
755
755
  <h1 class="pf-v6-c-title pf-m-3xl">Log in to your account</h1>
756
756
  <p
757
757
  class="pf-v6-c-login__main-header-desc"
758
758
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
759
- </header>
759
+ </div>
760
760
  <div class="pf-v6-c-login__main-body">
761
761
  <form class="pf-v6-c-form" novalidate>
762
762
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
@@ -847,7 +847,7 @@ wrapperTag: div
847
847
  </form>
848
848
  </div>
849
849
 
850
- <footer class="pf-v6-c-login__main-footer">
850
+ <div class="pf-v6-c-login__main-footer">
851
851
  <ul class="pf-v6-c-login__main-footer-links" role="list">
852
852
  <li class="pf-v6-c-login__main-footer-links-item">
853
853
  <button
@@ -964,7 +964,7 @@ wrapperTag: div
964
964
  <a href="#">Forgot username or password?</a>
965
965
  </p>
966
966
  </div>
967
- </footer>
967
+ </div>
968
968
  </main>
969
969
  <footer class="pf-v6-c-login__footer">
970
970
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
@@ -1003,7 +1003,7 @@ wrapperTag: div
1003
1003
  />
1004
1004
  </header>
1005
1005
  <main class="pf-v6-c-login__main">
1006
- <header class="pf-v6-c-login__main-header">
1006
+ <div class="pf-v6-c-login__main-header">
1007
1007
  <h1 class="pf-v6-c-title pf-m-3xl">Log in to your account</h1>
1008
1008
  <p
1009
1009
  class="pf-v6-c-login__main-header-desc"
@@ -1023,7 +1023,7 @@ wrapperTag: div
1023
1023
  </span>
1024
1024
  </button>
1025
1025
  </div>
1026
- </header>
1026
+ </div>
1027
1027
  <div class="pf-v6-c-login__main-body">
1028
1028
  <form class="pf-v6-c-form" novalidate>
1029
1029
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
@@ -1094,7 +1094,7 @@ wrapperTag: div
1094
1094
  </form>
1095
1095
  </div>
1096
1096
 
1097
- <footer class="pf-v6-c-login__main-footer">
1097
+ <div class="pf-v6-c-login__main-footer">
1098
1098
  <ul class="pf-v6-c-login__main-footer-links" role="list">
1099
1099
  <li class="pf-v6-c-login__main-footer-links-item">
1100
1100
  <button
@@ -1211,7 +1211,7 @@ wrapperTag: div
1211
1211
  <a href="#">Forgot username or password?</a>
1212
1212
  </p>
1213
1213
  </div>
1214
- </footer>
1214
+ </div>
1215
1215
  </main>
1216
1216
  <footer class="pf-v6-c-login__footer">
1217
1217
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
@@ -1243,14 +1243,14 @@ wrapperTag: div
1243
1243
  | `.pf-v6-c-login__header` | `<header>` | Positions the login header. **Required**|
1244
1244
  | `.pf-v6-c-login__header .pf-v6-c-brand` | `<img>` | Creates a brand image inside of login header. **Required** |
1245
1245
  | `.pf-v6-c-login__main` | `<main>` | Positions the login main area. **Required** |
1246
- | `.pf-v6-c-login__main-header` | `<header>` | Creates the header of the main area. **Required** |
1246
+ | `.pf-v6-c-login__main-header` | `<div>` | Creates the header of the main area. **Required** |
1247
1247
  | `.pf-v6-c-login__main-header .pf-v6-c-title` | `<h1>,<h2>,<h3>,<h4>,<h5>,<h6>` | Creates a title in the main header area. **Required** |
1248
1248
  | `.pf-v6-c-login__main-header-desc` | `<p>` | Creates the description in the main area header. |
1249
1249
  | `.pf-v6-c-login__main-header-utilities` | `<div>` | Creates a utilities section in the main header area. **Note:** For use with a language selector menu. |
1250
1250
  | `.pf-v6-c-login__main-body` | `<div>` | Creates the body of the main area. **Required** |
1251
1251
  | `.pf-v6-c-login__main-body .pf-v6-c-form` | `<form>` | Creates the login form in the main body area. **Required**|
1252
1252
  | `.pf-v6-c-login__main-body .pf-v6-c-form .pf-v6-c-form-helper-text` | `<form>` | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden`. **Required** |
1253
- | `.pf-v6-c-login__main-footer` | `<footer>` | Creates the footer of the main area. **Required** |
1253
+ | `.pf-v6-c-login__main-footer` | `<div>` | Creates the footer of the main area. **Required** |
1254
1254
  | `.pf-v6-c-login__main-footer-links` | `<ul>` | Creates a list of links in the main footer. **Required** |
1255
1255
  | `.pf-v6-c-login__main-footer-links-item` | `<li>` | Creates proper spacing for links in the main footer. **Required** |
1256
1256
  | `.pf-v6-c-login__main-footer-links-item-link` | `<a>` | Creates link in links list in footer. **Required** |
package/docs/components/Masthead/examples/masthead.md CHANGED
@@ -11,12 +11,25 @@ cssPrefix: pf-v6-c-masthead
11
11
  <div class="pf-v6-c-masthead__main">
12
12
  <span class="pf-v6-c-masthead__toggle">
13
13
  <button
14
- class="pf-v6-c-button pf-m-plain"
14
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
15
15
  type="button"
16
16
  aria-label="Global navigation"
17
17
  >
18
18
  <span class="pf-v6-c-button__icon">
19
- <i class="fas fa-bars" aria-hidden="true"></i>
19
+ <svg
20
+ viewBox="0 0 10 10"
21
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
22
+ width="1em"
23
+ height="1em"
24
+ >
25
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
26
+ <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
27
+ <path
28
+ class="pf-v6-c-button--hamburger-icon--arrow"
29
+ d="M1,5 L1,5 L1,5"
30
+ />
31
+ <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
32
+ </svg>
20
33
  </span>
21
34
  </button>
22
35
  </span>
@@ -109,12 +122,25 @@ cssPrefix: pf-v6-c-masthead
109
122
  <div class="pf-v6-c-masthead__main">
110
123
  <span class="pf-v6-c-masthead__toggle">
111
124
  <button
112
- class="pf-v6-c-button pf-m-plain"
125
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
113
126
  type="button"
114
127
  aria-label="Global navigation"
115
128
  >
116
129
  <span class="pf-v6-c-button__icon">
117
- <i class="fas fa-bars" aria-hidden="true"></i>
130
+ <svg
131
+ viewBox="0 0 10 10"
132
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
133
+ width="1em"
134
+ height="1em"
135
+ >
136
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
137
+ <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
138
+ <path
139
+ class="pf-v6-c-button--hamburger-icon--arrow"
140
+ d="M1,5 L1,5 L1,5"
141
+ />
142
+ <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
143
+ </svg>
118
144
  </span>
119
145
  </button>
120
146
  </span>
@@ -218,12 +244,25 @@ cssPrefix: pf-v6-c-masthead
218
244
  <div class="pf-v6-c-masthead__main">
219
245
  <span class="pf-v6-c-masthead__toggle">
220
246
  <button
221
- class="pf-v6-c-button pf-m-plain"
247
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
222
248
  type="button"
223
249
  aria-label="Global navigation"
224
250
  >
225
251
  <span class="pf-v6-c-button__icon">
226
- <i class="fas fa-bars" aria-hidden="true"></i>
252
+ <svg
253
+ viewBox="0 0 10 10"
254
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
255
+ width="1em"
256
+ height="1em"
257
+ >
258
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
259
+ <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
260
+ <path
261
+ class="pf-v6-c-button--hamburger-icon--arrow"
262
+ d="M1,5 L1,5 L1,5"
263
+ />
264
+ <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
265
+ </svg>
227
266
  </span>
228
267
  </button>
229
268
  </span>
@@ -316,12 +355,25 @@ cssPrefix: pf-v6-c-masthead
316
355
  <div class="pf-v6-c-masthead__main">
317
356
  <span class="pf-v6-c-masthead__toggle">
318
357
  <button
319
- class="pf-v6-c-button pf-m-plain"
358
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
320
359
  type="button"
321
360
  aria-label="Global navigation"
322
361
  >
323
362
  <span class="pf-v6-c-button__icon">
324
- <i class="fas fa-bars" aria-hidden="true"></i>
363
+ <svg
364
+ viewBox="0 0 10 10"
365
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
366
+ width="1em"
367
+ height="1em"
368
+ >
369
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
370
+ <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
371
+ <path
372
+ class="pf-v6-c-button--hamburger-icon--arrow"
373
+ d="M1,5 L1,5 L1,5"
374
+ />
375
+ <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
376
+ </svg>
325
377
  </span>
326
378
  </button>
327
379
  </span>
@@ -417,12 +469,25 @@ cssPrefix: pf-v6-c-masthead
417
469
  <div class="pf-v6-c-masthead__main">
418
470
  <span class="pf-v6-c-masthead__toggle">
419
471
  <button
420
- class="pf-v6-c-button pf-m-plain"
472
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
421
473
  type="button"
422
474
  aria-label="Global navigation"
423
475
  >
424
476
  <span class="pf-v6-c-button__icon">
425
- <i class="fas fa-bars" aria-hidden="true"></i>
477
+ <svg
478
+ viewBox="0 0 10 10"
479
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
480
+ width="1em"
481
+ height="1em"
482
+ >
483
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
484
+ <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
485
+ <path
486
+ class="pf-v6-c-button--hamburger-icon--arrow"
487
+ d="M1,5 L1,5 L1,5"
488
+ />
489
+ <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
490
+ </svg>
426
491
  </span>
427
492
  </button>
428
493
  </span>
@@ -515,12 +580,25 @@ cssPrefix: pf-v6-c-masthead
515
580
  <div class="pf-v6-c-masthead__main">
516
581
  <span class="pf-v6-c-masthead__toggle">
517
582
  <button
518
- class="pf-v6-c-button pf-m-plain"
583
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
519
584
  type="button"
520
585
  aria-label="Global navigation"
521
586
  >
522
587
  <span class="pf-v6-c-button__icon">
523
- <i class="fas fa-bars" aria-hidden="true"></i>
588
+ <svg
589
+ viewBox="0 0 10 10"
590
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
591
+ width="1em"
592
+ height="1em"
593
+ >
594
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
595
+ <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
596
+ <path
597
+ class="pf-v6-c-button--hamburger-icon--arrow"
598
+ d="M1,5 L1,5 L1,5"
599
+ />
600
+ <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
601
+ </svg>
524
602
  </span>
525
603
  </button>
526
604
  </span>
package/docs/components/Menu/examples/Menu.md CHANGED
@@ -4579,7 +4579,7 @@ cssPrefix: pf-v6-c-menu
4579
4579
  </span>
4580
4580
  <span class="pf-v6-c-breadcrumb__dropdown">
4581
4581
  <button
4582
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
4582
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-small pf-m-plain"
4583
4583
  type="button"
4584
4584
  aria-expanded="false"
4585
4585
  aria-label="Menu toggle"
@@ -4811,7 +4811,7 @@ cssPrefix: pf-v6-c-menu
4811
4811
  </span>
4812
4812
  <span class="pf-v6-c-breadcrumb__dropdown">
4813
4813
  <button
4814
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
4814
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-small pf-m-plain"
4815
4815
  type="button"
4816
4816
  aria-expanded="false"
4817
4817
  aria-label="Menu toggle"
@@ -5648,7 +5648,36 @@ cssPrefix: pf-v6-c-menu
5648
5648
  aria-label="Starred"
5649
5649
  >
5650
5650
  <span class="pf-v6-c-button__icon">
5651
- <i class="fas fa-star" aria-hidden="true"></i>
5651
+ <span class="pf-v6-c-button__icon-favorite">
5652
+ <svg
5653
+ class="pf-v6-svg"
5654
+ viewBox="0 0 576 512"
5655
+ fill="currentColor"
5656
+ aria-hidden="true"
5657
+ role="img"
5658
+ width="1em"
5659
+ height="1em"
5660
+ >
5661
+ <path
5662
+ d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
5663
+ />
5664
+ </svg>
5665
+ </span>
5666
+ <span class="pf-v6-c-button__icon-favorited">
5667
+ <svg
5668
+ class="pf-v6-svg"
5669
+ viewBox="0 0 576 512"
5670
+ fill="currentColor"
5671
+ aria-hidden="true"
5672
+ role="img"
5673
+ width="1em"
5674
+ height="1em"
5675
+ >
5676
+ <path
5677
+ d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
5678
+ />
5679
+ </svg>
5680
+ </span>
5652
5681
  </span>
5653
5682
  </button>
5654
5683
  </div>
@@ -5674,7 +5703,36 @@ cssPrefix: pf-v6-c-menu
5674
5703
  aria-label="Starred"
5675
5704
  >
5676
5705
  <span class="pf-v6-c-button__icon">
5677
- <i class="fas fa-star" aria-hidden="true"></i>
5706
+ <span class="pf-v6-c-button__icon-favorite">
5707
+ <svg
5708
+ class="pf-v6-svg"
5709
+ viewBox="0 0 576 512"
5710
+ fill="currentColor"
5711
+ aria-hidden="true"
5712
+ role="img"
5713
+ width="1em"
5714
+ height="1em"
5715
+ >
5716
+ <path
5717
+ d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
5718
+ />
5719
+ </svg>
5720
+ </span>
5721
+ <span class="pf-v6-c-button__icon-favorited">
5722
+ <svg
5723
+ class="pf-v6-svg"
5724
+ viewBox="0 0 576 512"
5725
+ fill="currentColor"
5726
+ aria-hidden="true"
5727
+ role="img"
5728
+ width="1em"
5729
+ height="1em"
5730
+ >
5731
+ <path
5732
+ d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
5733
+ />
5734
+ </svg>
5735
+ </span>
5678
5736
  </span>
5679
5737
  </button>
5680
5738
  </div>
@@ -5706,7 +5764,36 @@ cssPrefix: pf-v6-c-menu
5706
5764
  disabled
5707
5765
  >
5708
5766
  <span class="pf-v6-c-button__icon">
5709
- <i class="fas fa-star" aria-hidden="true"></i>
5767
+ <span class="pf-v6-c-button__icon-favorite">
5768
+ <svg
5769
+ class="pf-v6-svg"
5770
+ viewBox="0 0 576 512"
5771
+ fill="currentColor"
5772
+ aria-hidden="true"
5773
+ role="img"
5774
+ width="1em"
5775
+ height="1em"
5776
+ >
5777
+ <path
5778
+ d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
5779
+ />
5780
+ </svg>
5781
+ </span>
5782
+ <span class="pf-v6-c-button__icon-favorited">
5783
+ <svg
5784
+ class="pf-v6-svg"
5785
+ viewBox="0 0 576 512"
5786
+ fill="currentColor"
5787
+ aria-hidden="true"
5788
+ role="img"
5789
+ width="1em"
5790
+ height="1em"
5791
+ >
5792
+ <path
5793
+ d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
5794
+ />
5795
+ </svg>
5796
+ </span>
5710
5797
  </span>
5711
5798
  </button>
5712
5799
  </div>
@@ -5734,7 +5821,36 @@ cssPrefix: pf-v6-c-menu
5734
5821
  aria-label="Not starred"
5735
5822
  >
5736
5823
  <span class="pf-v6-c-button__icon">
5737
- <i class="fas fa-star" aria-hidden="true"></i>
5824
+ <span class="pf-v6-c-button__icon-favorite">
5825
+ <svg
5826
+ class="pf-v6-svg"
5827
+ viewBox="0 0 576 512"
5828
+ fill="currentColor"
5829
+ aria-hidden="true"
5830
+ role="img"
5831
+ width="1em"
5832
+ height="1em"
5833
+ >
5834
+ <path
5835
+ d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
5836
+ />
5837
+ </svg>
5838
+ </span>
5839
+ <span class="pf-v6-c-button__icon-favorited">
5840
+ <svg
5841
+ class="pf-v6-svg"
5842
+ viewBox="0 0 576 512"
5843
+ fill="currentColor"
5844
+ aria-hidden="true"
5845
+ role="img"
5846
+ width="1em"
5847
+ height="1em"
5848
+ >
5849
+ <path
5850
+ d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
5851
+ />
5852
+ </svg>
5853
+ </span>
5738
5854
  </span>
5739
5855
  </button>
5740
5856
  </div>