@patternfly/patternfly 6.0.0-prerelease.9 → 6.1.0-prerelease.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 (196) hide show
  1. package/README.md +1 -1
  2. package/base/normalize.scss +16 -0
  3. package/base/patternfly-variables.css +84 -62
  4. package/base/tokens/tokens-charts-dark.scss +1 -1
  5. package/base/tokens/tokens-charts.scss +1 -1
  6. package/base/tokens/tokens-dark.scss +12 -4
  7. package/base/tokens/tokens-default.scss +44 -27
  8. package/base/tokens/tokens-local.scss +30 -35
  9. package/base/tokens/tokens-palette.scss +1 -1
  10. package/components/AboutModalBox/about-modal-box.css +0 -7
  11. package/components/Accordion/accordion.css +0 -1
  12. package/components/ActionList/action-list.css +1 -2
  13. package/components/ActionList/action-list.scss +1 -1
  14. package/components/Alert/alert-group.css +0 -1
  15. package/components/Alert/alert.css +2 -7
  16. package/components/Alert/alert.scss +2 -7
  17. package/components/Avatar/avatar.css +0 -1
  18. package/components/BackToTop/back-to-top.css +0 -2
  19. package/components/Backdrop/backdrop.css +0 -1
  20. package/components/BackgroundImage/background-image.css +0 -1
  21. package/components/Badge/badge.css +0 -1
  22. package/components/Banner/banner.css +0 -2
  23. package/components/Brand/brand.css +0 -1
  24. package/components/Breadcrumb/breadcrumb.css +0 -1
  25. package/components/Button/button.css +8 -1
  26. package/components/Button/button.scss +8 -0
  27. package/components/CalendarMonth/calendar-month.css +0 -1
  28. package/components/Card/card.css +0 -1
  29. package/components/Check/check.css +0 -1
  30. package/components/ClipboardCopy/clipboard-copy.css +0 -1
  31. package/components/CodeBlock/code-block.css +0 -1
  32. package/components/CodeEditor/code-editor.css +0 -1
  33. package/components/Content/content.css +2 -3
  34. package/components/Content/content.scss +2 -2
  35. package/components/DataList/data-list.css +4 -16
  36. package/components/DataList/data-list.scss +4 -14
  37. package/components/DatePicker/date-picker.css +0 -1
  38. package/components/DescriptionList/description-list.css +2 -9
  39. package/components/DescriptionList/description-list.scss +2 -2
  40. package/components/Divider/divider.css +0 -1
  41. package/components/DragDrop/drag-drop.css +0 -2
  42. package/components/Drawer/drawer.css +0 -7
  43. package/components/Drawer/drawer.scss +0 -5
  44. package/components/DualListSelector/dual-list-selector.css +0 -1
  45. package/components/EmptyState/empty-state.css +1 -2
  46. package/components/EmptyState/empty-state.scss +1 -1
  47. package/components/ExpandableSection/expandable-section.css +0 -1
  48. package/components/FileUpload/file-upload.css +0 -1
  49. package/components/Form/form.css +1 -2
  50. package/components/Form/form.scss +1 -1
  51. package/components/FormControl/form-control.css +22 -4
  52. package/components/FormControl/form-control.scss +27 -4
  53. package/components/HelperText/helper-text.css +0 -1
  54. package/components/Hint/hint.css +0 -1
  55. package/components/Icon/icon.css +0 -1
  56. package/components/InlineEdit/inline-edit.css +0 -1
  57. package/components/InputGroup/input-group.css +0 -1
  58. package/components/JumpLinks/jump-links.css +0 -1
  59. package/components/Label/label-group.css +0 -1
  60. package/components/Label/label.css +0 -1
  61. package/components/List/list.css +0 -1
  62. package/components/Login/login.css +0 -9
  63. package/components/Masthead/masthead.css +0 -1
  64. package/components/Menu/menu.css +0 -1
  65. package/components/MenuToggle/menu-toggle.css +66 -56
  66. package/components/MenuToggle/menu-toggle.scss +76 -65
  67. package/components/ModalBox/modal-box.css +0 -2
  68. package/components/MultipleFileUpload/multiple-file-upload.css +0 -1
  69. package/components/Nav/nav.css +0 -1
  70. package/components/NotificationDrawer/notification-drawer.css +0 -1
  71. package/components/NumberInput/number-input.css +0 -1
  72. package/components/OverflowMenu/overflow-menu.css +0 -1
  73. package/components/Page/page.css +15 -10
  74. package/components/Page/page.scss +17 -8
  75. package/components/Pagination/pagination.css +31 -20
  76. package/components/Pagination/pagination.scss +35 -23
  77. package/components/Panel/panel.css +0 -1
  78. package/components/Popover/popover.css +0 -1
  79. package/components/Progress/progress.css +0 -1
  80. package/components/ProgressStepper/progress-stepper.css +0 -2
  81. package/components/Radio/radio.css +0 -1
  82. package/components/Sidebar/sidebar.css +0 -1
  83. package/components/SimpleList/simple-list.css +0 -1
  84. package/components/Skeleton/skeleton.css +0 -1
  85. package/components/SkipToContent/skip-to-content.css +0 -1
  86. package/components/Slider/slider.css +0 -1
  87. package/components/Spinner/spinner.css +0 -1
  88. package/components/Switch/switch.css +0 -1
  89. package/components/TabContent/tab-content.css +0 -1
  90. package/components/Table/table-grid.css +9 -5
  91. package/components/Table/table-grid.scss +5 -4
  92. package/components/Table/table-scrollable.css +0 -1
  93. package/components/Table/table-tree-view.css +0 -1
  94. package/components/Table/table.css +6 -6
  95. package/components/Table/table.scss +6 -5
  96. package/components/Tabs/tabs.css +0 -1
  97. package/components/TextInputGroup/text-input-group.css +2 -3
  98. package/components/TextInputGroup/text-input-group.scss +2 -2
  99. package/components/Tile/tile.css +0 -1
  100. package/components/Timestamp/timestamp.css +0 -1
  101. package/components/Title/title.css +0 -1
  102. package/components/ToggleGroup/toggle-group.css +0 -1
  103. package/components/Toolbar/toolbar.css +0 -1
  104. package/components/Tooltip/tooltip.css +0 -1
  105. package/components/TreeView/tree-view.css +0 -1
  106. package/components/Truncate/truncate.css +0 -1
  107. package/components/Wizard/wizard.css +0 -2
  108. package/components/_index.css +172 -239
  109. package/docs/components/Brand/examples/Brand.md +2 -2
  110. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  111. package/docs/components/CalendarMonth/examples/CalendarMonth.md +4 -4
  112. package/docs/components/Content/examples/Content.md +188 -204
  113. package/docs/components/DataList/examples/DataList.md +187 -221
  114. package/docs/components/DragDrop/examples/DragDrop.md +0 -1
  115. package/docs/components/FileUpload/examples/FileUpload.md +11 -7
  116. package/docs/components/Form/examples/Form.md +4 -2
  117. package/docs/components/FormControl/examples/FormControl.md +10 -10
  118. package/docs/components/InputGroup/examples/InputGroup.md +4 -4
  119. package/docs/components/Login/examples/Login.md +6 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +140 -139
  121. package/docs/components/Pagination/examples/Pagination.md +12 -12
  122. package/docs/components/Table/examples/Table.md +1 -1
  123. package/docs/components/Tile/{examples → deprecated}/Tile.md +1 -0
  124. package/docs/components/Toolbar/examples/Toolbar.md +37 -37
  125. package/docs/demos/Card/examples/Card.md +4 -4
  126. package/docs/demos/CardView/examples/CardView.md +10 -4
  127. package/docs/demos/Dashboard/examples/Dashboard.md +8 -2
  128. package/docs/demos/DataList/examples/DataList.md +37 -13
  129. package/docs/demos/Masthead/examples/Masthead.md +5 -5
  130. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +425 -435
  131. package/docs/demos/Page/examples/Page.md +2 -2
  132. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +30 -18
  133. package/docs/demos/Table/examples/Table.md +235 -91
  134. package/docs/demos/Tabs/examples/Tabs.md +1 -1
  135. package/docs/demos/Toolbar/examples/Toolbar.md +42 -30
  136. package/docs/utilities/BoxShadow/examples/box-shadow.css +6 -17
  137. package/layouts/Bullseye/bullseye.css +0 -1
  138. package/layouts/Flex/flex.css +0 -1
  139. package/layouts/Gallery/gallery.css +0 -1
  140. package/layouts/Grid/grid.css +0 -1
  141. package/layouts/Level/level.css +0 -1
  142. package/layouts/Split/split.css +0 -1
  143. package/layouts/Stack/stack.css +0 -1
  144. package/layouts/_index.css +0 -7
  145. package/package.json +5 -5
  146. package/patternfly-base-no-globals.css +84 -62
  147. package/patternfly-base.css +99 -62
  148. package/patternfly-charts.css +2 -2
  149. package/patternfly-charts.scss +2 -2
  150. package/patternfly-no-globals.css +256 -308
  151. package/patternfly.css +271 -308
  152. package/patternfly.min.css +1 -1
  153. package/patternfly.min.css.map +1 -1
  154. package/sass-utilities/mixins.scss +3 -3
  155. package/assets/images/PF-Masthead-Logo.svg +0 -1
  156. package/assets/images/background-filter.svg +0 -17
  157. package/assets/images/g_sizing.png +0 -0
  158. package/assets/images/img_avatar-dark.svg +0 -22
  159. package/assets/images/img_avatar.svg +0 -21
  160. package/assets/images/l_pf-reverse-164x11.png +0 -0
  161. package/assets/images/l_pf-reverse.svg +0 -1
  162. package/assets/images/logo-dropbox-old.svg +0 -1
  163. package/assets/images/logo-dropbox.svg +0 -6
  164. package/assets/images/logo-facebook.svg +0 -4
  165. package/assets/images/logo-github.svg +0 -4
  166. package/assets/images/logo-gitlab.svg +0 -4
  167. package/assets/images/logo-google.svg +0 -4
  168. package/assets/images/logo-google2.svg +0 -10
  169. package/assets/images/logo__pf--reverse--base.png +0 -0
  170. package/assets/images/logo__pf--reverse--base.svg +0 -40
  171. package/assets/images/logo__pf--reverse-on-md.svg +0 -40
  172. package/assets/images/pf-c-brand__logo-base.jpg +0 -0
  173. package/assets/images/pf-c-brand__logo-on-lg-white.svg +0 -32
  174. package/assets/images/pf-c-brand__logo-on-lg.svg +0 -32
  175. package/assets/images/pf-c-brand__logo-on-md-white.svg +0 -42
  176. package/assets/images/pf-c-brand__logo-on-md.svg +0 -42
  177. package/assets/images/pf-c-brand__logo-on-sm-white.svg +0 -17
  178. package/assets/images/pf-c-brand__logo-on-sm.svg +0 -17
  179. package/assets/images/pf-c-brand__logo-on-xl-white.svg +0 -39
  180. package/assets/images/pf-c-brand__logo-on-xl.svg +0 -39
  181. package/assets/images/pf-c-brand__logo.svg +0 -10
  182. package/assets/images/pf-logo.svg +0 -28
  183. package/assets/images/pf_logo.svg +0 -37
  184. package/assets/images/pf_logo_color.svg +0 -22
  185. package/assets/images/pf_logo_white.svg +0 -37
  186. package/assets/images/pf_mini_logo_white.svg +0 -1
  187. package/assets/images/pfbg_1200.jpg +0 -0
  188. package/assets/images/pfbg_2000.jpg +0 -0
  189. package/assets/images/pfbg_576.jpg +0 -0
  190. package/assets/images/pfbg_576@2x.jpg +0 -0
  191. package/assets/images/pfbg_768.jpg +0 -0
  192. package/assets/images/pfbg_768@2x.jpg +0 -0
  193. package/assets/images/pfbg_992.jpg +0 -0
  194. package/assets/images/pfbg_992@2x.jpg +0 -0
  195. package/assets/images/status-icon-sprite.svg +0 -38
  196. /package/docs/components/Tile/{examples → deprecated}/Tile.css +0 -0
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -14,7 +14,7 @@ cssPrefix: pf-v6-c-menu-toggle
14
14
  <span class="pf-v6-c-menu-toggle__text">Collapsed</span>
15
15
  <span class="pf-v6-c-menu-toggle__controls">
16
16
  <span class="pf-v6-c-menu-toggle__toggle-icon">
17
- <i class="fas fa-caret-down" aria-hidden="true"></i>
17
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
18
18
  </span>
19
19
  </span>
20
20
  </button>
@@ -32,7 +32,7 @@ cssPrefix: pf-v6-c-menu-toggle
32
32
  <span class="pf-v6-c-menu-toggle__text">Expanded</span>
33
33
  <span class="pf-v6-c-menu-toggle__controls">
34
34
  <span class="pf-v6-c-menu-toggle__toggle-icon">
35
- <i class="fas fa-caret-down" aria-hidden="true"></i>
35
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
36
36
  </span>
37
37
  </span>
38
38
  </button>
@@ -51,7 +51,7 @@ cssPrefix: pf-v6-c-menu-toggle
51
51
  <span class="pf-v6-c-menu-toggle__text">Disabled</span>
52
52
  <span class="pf-v6-c-menu-toggle__controls">
53
53
  <span class="pf-v6-c-menu-toggle__toggle-icon">
54
- <i class="fas fa-caret-down" aria-hidden="true"></i>
54
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
55
55
  </span>
56
56
  </span>
57
57
  </button>
@@ -68,7 +68,7 @@ cssPrefix: pf-v6-c-menu-toggle
68
68
  </span>
69
69
  <span class="pf-v6-c-menu-toggle__controls">
70
70
  <span class="pf-v6-c-menu-toggle__toggle-icon">
71
- <i class="fas fa-caret-down" aria-hidden="true"></i>
71
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
72
72
  </span>
73
73
  </span>
74
74
  </button>
@@ -88,7 +88,7 @@ cssPrefix: pf-v6-c-menu-toggle
88
88
  </span>
89
89
  <span class="pf-v6-c-menu-toggle__controls">
90
90
  <span class="pf-v6-c-menu-toggle__toggle-icon">
91
- <i class="fas fa-caret-down" aria-hidden="true"></i>
91
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
92
92
  </span>
93
93
  </span>
94
94
  </button>
@@ -106,7 +106,7 @@ cssPrefix: pf-v6-c-menu-toggle
106
106
  <span class="pf-v6-c-menu-toggle__text">Collapsed</span>
107
107
  <span class="pf-v6-c-menu-toggle__controls">
108
108
  <span class="pf-v6-c-menu-toggle__toggle-icon">
109
- <i class="fas fa-caret-down" aria-hidden="true"></i>
109
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
110
110
  </span>
111
111
  </span>
112
112
  </button>
@@ -123,7 +123,7 @@ cssPrefix: pf-v6-c-menu-toggle
123
123
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
124
124
  <span class="pf-v6-c-menu-toggle__controls">
125
125
  <span class="pf-v6-c-menu-toggle__toggle-icon">
126
- <i class="fas fa-caret-down" aria-hidden="true"></i>
126
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
127
127
  </span>
128
128
  </span>
129
129
  </button>
@@ -137,7 +137,7 @@ cssPrefix: pf-v6-c-menu-toggle
137
137
  <span class="pf-v6-c-menu-toggle__text">Expanded</span>
138
138
  <span class="pf-v6-c-menu-toggle__controls">
139
139
  <span class="pf-v6-c-menu-toggle__toggle-icon">
140
- <i class="fas fa-caret-down" aria-hidden="true"></i>
140
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
141
141
  </span>
142
142
  </span>
143
143
  </button>
@@ -152,7 +152,7 @@ cssPrefix: pf-v6-c-menu-toggle
152
152
  <span class="pf-v6-c-menu-toggle__text">Disabled</span>
153
153
  <span class="pf-v6-c-menu-toggle__controls">
154
154
  <span class="pf-v6-c-menu-toggle__toggle-icon">
155
- <i class="fas fa-caret-down" aria-hidden="true"></i>
155
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
156
156
  </span>
157
157
  </span>
158
158
  </button>
@@ -170,7 +170,7 @@ cssPrefix: pf-v6-c-menu-toggle
170
170
  <span class="pf-v6-c-menu-toggle__text">Collapsed</span>
171
171
  <span class="pf-v6-c-menu-toggle__controls">
172
172
  <span class="pf-v6-c-menu-toggle__toggle-icon">
173
- <i class="fas fa-caret-down" aria-hidden="true"></i>
173
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
174
174
  </span>
175
175
  </span>
176
176
  </button>
@@ -187,7 +187,7 @@ cssPrefix: pf-v6-c-menu-toggle
187
187
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
188
188
  <span class="pf-v6-c-menu-toggle__controls">
189
189
  <span class="pf-v6-c-menu-toggle__toggle-icon">
190
- <i class="fas fa-caret-down" aria-hidden="true"></i>
190
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
191
191
  </span>
192
192
  </span>
193
193
  </button>
@@ -201,7 +201,7 @@ cssPrefix: pf-v6-c-menu-toggle
201
201
  <span class="pf-v6-c-menu-toggle__text">Expanded</span>
202
202
  <span class="pf-v6-c-menu-toggle__controls">
203
203
  <span class="pf-v6-c-menu-toggle__toggle-icon">
204
- <i class="fas fa-caret-down" aria-hidden="true"></i>
204
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
205
205
  </span>
206
206
  </span>
207
207
  </button>
@@ -216,7 +216,7 @@ cssPrefix: pf-v6-c-menu-toggle
216
216
  <span class="pf-v6-c-menu-toggle__text">Disabled</span>
217
217
  <span class="pf-v6-c-menu-toggle__controls">
218
218
  <span class="pf-v6-c-menu-toggle__toggle-icon">
219
- <i class="fas fa-caret-down" aria-hidden="true"></i>
219
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
220
220
  </span>
221
221
  </span>
222
222
  </button>
@@ -274,7 +274,7 @@ cssPrefix: pf-v6-c-menu-toggle
274
274
  <span class="pf-v6-c-menu-toggle__text">Custom text</span>
275
275
  <span class="pf-v6-c-menu-toggle__controls">
276
276
  <span class="pf-v6-c-menu-toggle__toggle-icon">
277
- <i class="fas fa-caret-down" aria-hidden="true"></i>
277
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
278
278
  </span>
279
279
  </span>
280
280
  </button>
@@ -289,7 +289,7 @@ cssPrefix: pf-v6-c-menu-toggle
289
289
  <span class="pf-v6-c-menu-toggle__text">Custom text</span>
290
290
  <span class="pf-v6-c-menu-toggle__controls">
291
291
  <span class="pf-v6-c-menu-toggle__toggle-icon">
292
- <i class="fas fa-caret-down" aria-hidden="true"></i>
292
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
293
293
  </span>
294
294
  </span>
295
295
  </button>
@@ -305,7 +305,91 @@ cssPrefix: pf-v6-c-menu-toggle
305
305
  <span class="pf-v6-c-menu-toggle__text">Disabled</span>
306
306
  <span class="pf-v6-c-menu-toggle__controls">
307
307
  <span class="pf-v6-c-menu-toggle__toggle-icon">
308
- <i class="fas fa-caret-down" aria-hidden="true"></i>
308
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
309
+ </span>
310
+ </span>
311
+ </button>
312
+
313
+ ```
314
+
315
+ ### Small
316
+
317
+ ```html
318
+ <button
319
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
320
+ type="button"
321
+ aria-expanded="false"
322
+ aria-label="Actions"
323
+ >
324
+ <span class="pf-v6-c-menu-toggle__icon">
325
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
326
+ </span>
327
+ </button>
328
+ &nbsp;
329
+ <button
330
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-expanded"
331
+ type="button"
332
+ aria-expanded="true"
333
+ aria-label="Actions"
334
+ >
335
+ <span class="pf-v6-c-menu-toggle__icon">
336
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
337
+ </span>
338
+ </button>
339
+ &nbsp;
340
+ <button
341
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-disabled"
342
+ type="button"
343
+ aria-expanded="false"
344
+ disabled
345
+ aria-label="Actions"
346
+ >
347
+ <span class="pf-v6-c-menu-toggle__icon">
348
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
349
+ </span>
350
+ </button>
351
+
352
+ ```
353
+
354
+ ### Small with text
355
+
356
+ ```html
357
+ <button
358
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
359
+ type="button"
360
+ aria-expanded="false"
361
+ >
362
+ <span class="pf-v6-c-menu-toggle__text">Collapsed</span>
363
+ <span class="pf-v6-c-menu-toggle__controls">
364
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
365
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
366
+ </span>
367
+ </span>
368
+ </button>
369
+ &nbsp;
370
+ <button
371
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text pf-m-expanded"
372
+ type="button"
373
+ aria-expanded="true"
374
+ >
375
+ <span class="pf-v6-c-menu-toggle__text">Expanded</span>
376
+ <span class="pf-v6-c-menu-toggle__controls">
377
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
378
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
379
+ </span>
380
+ </span>
381
+ </button>
382
+ &nbsp;
383
+ <button
384
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text pf-m-disabled"
385
+ type="button"
386
+ aria-expanded="false"
387
+ disabled
388
+ >
389
+ <span class="pf-v6-c-menu-toggle__text">Disabled</span>
390
+ <span class="pf-v6-c-menu-toggle__controls">
391
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
392
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
309
393
  </span>
310
394
  </span>
311
395
  </button>
@@ -337,7 +421,7 @@ cssPrefix: pf-v6-c-menu-toggle
337
421
  >
338
422
  <span class="pf-v6-c-menu-toggle__controls">
339
423
  <span class="pf-v6-c-menu-toggle__toggle-icon">
340
- <i class="fas fa-caret-down" aria-hidden="true"></i>
424
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
341
425
  </span>
342
426
  </span>
343
427
  </button>
@@ -365,7 +449,7 @@ cssPrefix: pf-v6-c-menu-toggle
365
449
  >
366
450
  <span class="pf-v6-c-menu-toggle__controls">
367
451
  <span class="pf-v6-c-menu-toggle__toggle-icon">
368
- <i class="fas fa-caret-down" aria-hidden="true"></i>
452
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
369
453
  </span>
370
454
  </span>
371
455
  </button>
@@ -395,7 +479,7 @@ cssPrefix: pf-v6-c-menu-toggle
395
479
  >
396
480
  <span class="pf-v6-c-menu-toggle__controls">
397
481
  <span class="pf-v6-c-menu-toggle__toggle-icon">
398
- <i class="fas fa-caret-down" aria-hidden="true"></i>
482
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
399
483
  </span>
400
484
  </span>
401
485
  </button>
@@ -433,7 +517,7 @@ To add a label to a split toggle that will be linked to the checkbox, pass the t
433
517
  >
434
518
  <span class="pf-v6-c-menu-toggle__controls">
435
519
  <span class="pf-v6-c-menu-toggle__toggle-icon">
436
- <i class="fas fa-caret-down" aria-hidden="true"></i>
520
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
437
521
  </span>
438
522
  </span>
439
523
  </button>
@@ -464,7 +548,7 @@ To add a label to a split toggle that will be linked to the checkbox, pass the t
464
548
  >
465
549
  <span class="pf-v6-c-menu-toggle__controls">
466
550
  <span class="pf-v6-c-menu-toggle__toggle-icon">
467
- <i class="fas fa-caret-down" aria-hidden="true"></i>
551
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
468
552
  </span>
469
553
  </span>
470
554
  </button>
@@ -497,7 +581,7 @@ To add a label to a split toggle that will be linked to the checkbox, pass the t
497
581
  >
498
582
  <span class="pf-v6-c-menu-toggle__controls">
499
583
  <span class="pf-v6-c-menu-toggle__toggle-icon">
500
- <i class="fas fa-caret-down" aria-hidden="true"></i>
584
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
501
585
  </span>
502
586
  </span>
503
587
  </button>
@@ -533,7 +617,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
533
617
  <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
534
618
  <span class="pf-v6-c-menu-toggle__controls">
535
619
  <span class="pf-v6-c-menu-toggle__toggle-icon">
536
- <i class="fas fa-caret-down" aria-hidden="true"></i>
620
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
537
621
  </span>
538
622
  </span>
539
623
  </button>
@@ -561,7 +645,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
561
645
  <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
562
646
  <span class="pf-v6-c-menu-toggle__controls">
563
647
  <span class="pf-v6-c-menu-toggle__toggle-icon">
564
- <i class="fas fa-caret-down" aria-hidden="true"></i>
648
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
565
649
  </span>
566
650
  </span>
567
651
  </button>
@@ -591,7 +675,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
591
675
  <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
592
676
  <span class="pf-v6-c-menu-toggle__controls">
593
677
  <span class="pf-v6-c-menu-toggle__toggle-icon">
594
- <i class="fas fa-caret-down" aria-hidden="true"></i>
678
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
595
679
  </span>
596
680
  </span>
597
681
  </button>
@@ -599,90 +683,6 @@ To add a label to a split toggle that will be linked to the toggle button, pass
599
683
 
600
684
  ```
601
685
 
602
- ### Small
603
-
604
- ```html
605
- <button
606
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
607
- type="button"
608
- aria-expanded="false"
609
- aria-label="Actions"
610
- >
611
- <span class="pf-v6-c-menu-toggle__icon">
612
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
613
- </span>
614
- </button>
615
- &nbsp;
616
- <button
617
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-expanded"
618
- type="button"
619
- aria-expanded="true"
620
- aria-label="Actions"
621
- >
622
- <span class="pf-v6-c-menu-toggle__icon">
623
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
624
- </span>
625
- </button>
626
- &nbsp;
627
- <button
628
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-disabled"
629
- type="button"
630
- aria-expanded="false"
631
- disabled
632
- aria-label="Actions"
633
- >
634
- <span class="pf-v6-c-menu-toggle__icon">
635
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
636
- </span>
637
- </button>
638
-
639
- ```
640
-
641
- ### Small with text
642
-
643
- ```html
644
- <button
645
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
646
- type="button"
647
- aria-expanded="false"
648
- >
649
- <span class="pf-v6-c-menu-toggle__text">Collapsed</span>
650
- <span class="pf-v6-c-menu-toggle__controls">
651
- <span class="pf-v6-c-menu-toggle__toggle-icon">
652
- <i class="fas fa-caret-down" aria-hidden="true"></i>
653
- </span>
654
- </span>
655
- </button>
656
- &nbsp;
657
- <button
658
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text pf-m-expanded"
659
- type="button"
660
- aria-expanded="true"
661
- >
662
- <span class="pf-v6-c-menu-toggle__text">Expanded</span>
663
- <span class="pf-v6-c-menu-toggle__controls">
664
- <span class="pf-v6-c-menu-toggle__toggle-icon">
665
- <i class="fas fa-caret-down" aria-hidden="true"></i>
666
- </span>
667
- </span>
668
- </button>
669
- &nbsp;
670
- <button
671
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text pf-m-disabled"
672
- type="button"
673
- aria-expanded="false"
674
- disabled
675
- >
676
- <span class="pf-v6-c-menu-toggle__text">Disabled</span>
677
- <span class="pf-v6-c-menu-toggle__controls">
678
- <span class="pf-v6-c-menu-toggle__toggle-icon">
679
- <i class="fas fa-caret-down" aria-hidden="true"></i>
680
- </span>
681
- </span>
682
- </button>
683
-
684
- ```
685
-
686
686
  ### Split button, primary
687
687
 
688
688
  ```html
@@ -711,7 +711,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
711
711
  >
712
712
  <span class="pf-v6-c-menu-toggle__controls">
713
713
  <span class="pf-v6-c-menu-toggle__toggle-icon">
714
- <i class="fas fa-caret-down" aria-hidden="true"></i>
714
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
715
715
  </span>
716
716
  </span>
717
717
  </button>
@@ -742,7 +742,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
742
742
  >
743
743
  <span class="pf-v6-c-menu-toggle__controls">
744
744
  <span class="pf-v6-c-menu-toggle__toggle-icon">
745
- <i class="fas fa-caret-down" aria-hidden="true"></i>
745
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
746
746
  </span>
747
747
  </span>
748
748
  </button>
@@ -775,7 +775,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
775
775
  >
776
776
  <span class="pf-v6-c-menu-toggle__controls">
777
777
  <span class="pf-v6-c-menu-toggle__toggle-icon">
778
- <i class="fas fa-caret-down" aria-hidden="true"></i>
778
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
779
779
  </span>
780
780
  </span>
781
781
  </button>
@@ -811,7 +811,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
811
811
  >
812
812
  <span class="pf-v6-c-menu-toggle__controls">
813
813
  <span class="pf-v6-c-menu-toggle__toggle-icon">
814
- <i class="fas fa-caret-down" aria-hidden="true"></i>
814
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
815
815
  </span>
816
816
  </span>
817
817
  </button>
@@ -842,7 +842,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
842
842
  >
843
843
  <span class="pf-v6-c-menu-toggle__controls">
844
844
  <span class="pf-v6-c-menu-toggle__toggle-icon">
845
- <i class="fas fa-caret-down" aria-hidden="true"></i>
845
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
846
846
  </span>
847
847
  </span>
848
848
  </button>
@@ -875,7 +875,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
875
875
  >
876
876
  <span class="pf-v6-c-menu-toggle__controls">
877
877
  <span class="pf-v6-c-menu-toggle__toggle-icon">
878
- <i class="fas fa-caret-down" aria-hidden="true"></i>
878
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
879
879
  </span>
880
880
  </span>
881
881
  </button>
@@ -900,7 +900,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
900
900
  >
901
901
  <span class="pf-v6-c-menu-toggle__controls">
902
902
  <span class="pf-v6-c-menu-toggle__toggle-icon">
903
- <i class="fas fa-caret-down" aria-hidden="true"></i>
903
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
904
904
  </span>
905
905
  </span>
906
906
  </button>
@@ -920,7 +920,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
920
920
  >
921
921
  <span class="pf-v6-c-menu-toggle__controls">
922
922
  <span class="pf-v6-c-menu-toggle__toggle-icon">
923
- <i class="fas fa-caret-down" aria-hidden="true"></i>
923
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
924
924
  </span>
925
925
  </span>
926
926
  </button>
@@ -941,7 +941,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
941
941
  >
942
942
  <span class="pf-v6-c-menu-toggle__controls">
943
943
  <span class="pf-v6-c-menu-toggle__toggle-icon">
944
- <i class="fas fa-caret-down" aria-hidden="true"></i>
944
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
945
945
  </span>
946
946
  </span>
947
947
  </button>
@@ -966,7 +966,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
966
966
  >
967
967
  <span class="pf-v6-c-menu-toggle__controls">
968
968
  <span class="pf-v6-c-menu-toggle__toggle-icon">
969
- <i class="fas fa-caret-down" aria-hidden="true"></i>
969
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
970
970
  </span>
971
971
  </span>
972
972
  </button>
@@ -986,7 +986,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
986
986
  >
987
987
  <span class="pf-v6-c-menu-toggle__controls">
988
988
  <span class="pf-v6-c-menu-toggle__toggle-icon">
989
- <i class="fas fa-caret-down" aria-hidden="true"></i>
989
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
990
990
  </span>
991
991
  </span>
992
992
  </button>
@@ -1007,7 +1007,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1007
1007
  >
1008
1008
  <span class="pf-v6-c-menu-toggle__controls">
1009
1009
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1010
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1010
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1011
1011
  </span>
1012
1012
  </span>
1013
1013
  </button>
@@ -1032,7 +1032,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1032
1032
  >
1033
1033
  <span class="pf-v6-c-menu-toggle__controls">
1034
1034
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1035
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1035
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1036
1036
  </span>
1037
1037
  </span>
1038
1038
  </button>
@@ -1052,7 +1052,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1052
1052
  >
1053
1053
  <span class="pf-v6-c-menu-toggle__controls">
1054
1054
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1055
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1055
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1056
1056
  </span>
1057
1057
  </span>
1058
1058
  </button>
@@ -1073,7 +1073,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1073
1073
  >
1074
1074
  <span class="pf-v6-c-menu-toggle__controls">
1075
1075
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1076
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1076
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1077
1077
  </span>
1078
1078
  </span>
1079
1079
  </button>
@@ -1095,7 +1095,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1095
1095
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
1096
1096
  <span class="pf-v6-c-menu-toggle__controls">
1097
1097
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1098
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1098
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1099
1099
  </span>
1100
1100
  </span>
1101
1101
  </button>
@@ -1113,7 +1113,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1113
1113
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
1114
1114
  <span class="pf-v6-c-menu-toggle__controls">
1115
1115
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1116
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1116
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1117
1117
  </span>
1118
1118
  </span>
1119
1119
  </button>
@@ -1124,7 +1124,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1124
1124
 
1125
1125
  ```html
1126
1126
  <button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false">
1127
- <span class="pf-v6-c-menu-toggle__icon">
1127
+ <span class="pf-v6-c-menu-toggle__icon pf-m-avatar">
1128
1128
  <img
1129
1129
  class="pf-v6-c-avatar pf-m-sm"
1130
1130
  alt="Avatar image"
@@ -1134,7 +1134,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1134
1134
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
1135
1135
  <span class="pf-v6-c-menu-toggle__controls">
1136
1136
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1137
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1137
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1138
1138
  </span>
1139
1139
  </span>
1140
1140
  </button>
@@ -1145,7 +1145,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1145
1145
  type="button"
1146
1146
  aria-expanded="true"
1147
1147
  >
1148
- <span class="pf-v6-c-menu-toggle__icon">
1148
+ <span class="pf-v6-c-menu-toggle__icon pf-m-avatar">
1149
1149
  <img
1150
1150
  class="pf-v6-c-avatar pf-m-sm"
1151
1151
  alt="Avatar image"
@@ -1155,7 +1155,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1155
1155
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
1156
1156
  <span class="pf-v6-c-menu-toggle__controls">
1157
1157
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1158
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1158
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1159
1159
  </span>
1160
1160
  </span>
1161
1161
  </button>
@@ -1167,7 +1167,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1167
1167
  aria-expanded="false"
1168
1168
  disabled
1169
1169
  >
1170
- <span class="pf-v6-c-menu-toggle__icon">
1170
+ <span class="pf-v6-c-menu-toggle__icon pf-m-avatar">
1171
1171
  <img
1172
1172
  class="pf-v6-c-avatar pf-m-sm"
1173
1173
  alt="Avatar image"
@@ -1177,7 +1177,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1177
1177
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
1178
1178
  <span class="pf-v6-c-menu-toggle__controls">
1179
1179
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1180
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1180
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1181
1181
  </span>
1182
1182
  </span>
1183
1183
  </button>
@@ -1195,7 +1195,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1195
1195
  <span class="pf-v6-c-menu-toggle__text">Full height</span>
1196
1196
  <span class="pf-v6-c-menu-toggle__controls">
1197
1197
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1198
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1198
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1199
1199
  </span>
1200
1200
  </span>
1201
1201
  </button>
@@ -1213,7 +1213,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1213
1213
  <span class="pf-v6-c-menu-toggle__text">Full width</span>
1214
1214
  <span class="pf-v6-c-menu-toggle__controls">
1215
1215
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1216
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1216
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1217
1217
  </span>
1218
1218
  </span>
1219
1219
  </button>
@@ -1259,7 +1259,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1259
1259
  >
1260
1260
  <span class="pf-v6-c-menu-toggle__controls">
1261
1261
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1262
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1262
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1263
1263
  </span>
1264
1264
  </span>
1265
1265
  </button>
@@ -1281,7 +1281,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1281
1281
  <i class="fas fa-check-circle" aria-hidden="true"></i>
1282
1282
  </span>
1283
1283
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1284
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1284
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1285
1285
  </span>
1286
1286
  </span>
1287
1287
  </button>
@@ -1300,7 +1300,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1300
1300
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1301
1301
  </span>
1302
1302
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1303
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1303
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1304
1304
  </span>
1305
1305
  </span>
1306
1306
  </button>
@@ -1319,7 +1319,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1319
1319
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1320
1320
  </span>
1321
1321
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1322
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1322
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1323
1323
  </span>
1324
1324
  </span>
1325
1325
  </button>
@@ -1337,7 +1337,7 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1337
1337
  <span class="pf-v6-c-menu-toggle__text">Placeholder text</span>
1338
1338
  <span class="pf-v6-c-menu-toggle__controls">
1339
1339
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1340
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1340
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1341
1341
  </span>
1342
1342
  </span>
1343
1343
  </button>
@@ -1381,3 +1381,4 @@ To add a label to a split toggle that will be linked to the toggle button, pass
1381
1381
  | `.pf-m-warning` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the warning state. |
1382
1382
  | `.pf-m-danger` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the danger state. |
1383
1383
  | `.pf-m-placeholder` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle text for placeholder styles. |
1384
+ | `.pf-m-avatar` | `.pf-v6-c-menu-toggle__icon` | Modifies the menu toggle icon for avatar styles. |