@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.40

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 (340) hide show
  1. package/RELEASE-NOTES.md +18 -1
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/images/pfbg-icon.svg +1 -0
  4. package/assets/pficon/pficon.scss +7 -2
  5. package/assets/pficon/pficon.woff2 +0 -0
  6. package/base/_base.scss +0 -18
  7. package/base/_chart-globals.scss +0 -4
  8. package/base/_common.scss +0 -22
  9. package/base/_fa-icons.scss +1 -2
  10. package/base/_fonts.scss +22 -27
  11. package/base/_globals.scss +92 -86
  12. package/base/_icons.scss +1 -28
  13. package/base/_svg-icons.scss +6 -0
  14. package/base/_variables.scss +4 -4
  15. package/base/patternfly-common.css +0 -10
  16. package/base/patternfly-fa-icons.css +1 -1
  17. package/base/patternfly-fonts.css +17 -17
  18. package/base/patternfly-globals.css +35 -41
  19. package/base/patternfly-icons.css +8 -22
  20. package/base/patternfly-pf-icons.css +6 -2
  21. package/base/patternfly-themes.css +0 -42
  22. package/base/patternfly-variables.css +3 -3
  23. package/base/themes/dark/_globals.scss +1 -1
  24. package/base/themes/dark/_variables.scss +1 -1
  25. package/components/AboutModalBox/about-modal-box.css +20 -50
  26. package/components/AboutModalBox/about-modal-box.scss +22 -14
  27. package/components/Accordion/accordion.css +2 -0
  28. package/components/Accordion/accordion.scss +2 -0
  29. package/components/Alert/alert.css +17 -8
  30. package/components/Alert/alert.scss +21 -7
  31. package/components/Alert/themes/dark/alert.scss +1 -1
  32. package/components/AppLauncher/app-launcher.css +2 -0
  33. package/components/AppLauncher/app-launcher.scss +2 -0
  34. package/components/Avatar/avatar.scss +2 -2
  35. package/components/BackgroundImage/background-image.css +8 -35
  36. package/components/BackgroundImage/background-image.scss +17 -43
  37. package/components/Banner/banner.css +14 -52
  38. package/components/Banner/banner.scss +9 -13
  39. package/components/Breadcrumb/breadcrumb.css +2 -0
  40. package/components/Breadcrumb/breadcrumb.scss +2 -0
  41. package/components/CalendarMonth/calendar-month.css +2 -2
  42. package/components/CalendarMonth/calendar-month.scss +3 -3
  43. package/components/Card/card.css +115 -50
  44. package/components/Card/card.scss +164 -63
  45. package/components/Chip/chip.css +33 -24
  46. package/components/Chip/chip.scss +40 -31
  47. package/components/ChipGroup/chip-group.css +27 -17
  48. package/components/ChipGroup/chip-group.scss +36 -22
  49. package/components/Content/content.css +11 -5
  50. package/components/Content/content.scss +17 -9
  51. package/components/ContextSelector/context-selector.css +13 -6
  52. package/components/ContextSelector/context-selector.scss +14 -7
  53. package/components/DataList/data-list-grid.css +7 -7
  54. package/components/DataList/data-list-grid.scss +1 -1
  55. package/components/DataList/data-list.css +46 -40
  56. package/components/DataList/data-list.scss +37 -28
  57. package/components/DatePicker/date-picker.css +0 -8
  58. package/components/DatePicker/date-picker.scss +0 -9
  59. package/components/DescriptionList/description-list.css +7 -7
  60. package/components/DescriptionList/description-list.scss +7 -7
  61. package/components/Divider/divider.css +2 -2
  62. package/components/Divider/divider.scss +3 -3
  63. package/components/Drawer/drawer.css +15 -16
  64. package/components/Drawer/drawer.scss +2 -3
  65. package/components/Dropdown/dropdown.css +26 -25
  66. package/components/Dropdown/dropdown.scss +17 -18
  67. package/components/DualListSelector/dual-list-selector.css +1 -1
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/EmptyState/empty-state.css +46 -52
  70. package/components/EmptyState/empty-state.scss +58 -57
  71. package/components/ExpandableSection/expandable-section.css +2 -0
  72. package/components/ExpandableSection/expandable-section.scss +2 -0
  73. package/components/Form/form.css +14 -12
  74. package/components/Form/form.scss +9 -7
  75. package/components/FormControl/form-control.css +2 -5
  76. package/components/FormControl/themes/dark/form-control.scss +2 -6
  77. package/components/HelperText/helper-text.css +4 -0
  78. package/components/HelperText/helper-text.scss +5 -0
  79. package/components/Hint/hint.css +2 -2
  80. package/components/Hint/hint.scss +2 -2
  81. package/components/Icon/icon.css +3 -3
  82. package/components/Icon/icon.scss +3 -3
  83. package/components/InputGroup/input-group.css +61 -85
  84. package/components/InputGroup/input-group.scss +55 -61
  85. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  86. package/components/Label/label.css +49 -36
  87. package/components/Label/label.scss +53 -38
  88. package/components/Label/themes/dark/label.scss +2 -2
  89. package/components/LabelGroup/label-group.css +26 -22
  90. package/components/LabelGroup/label-group.scss +31 -26
  91. package/components/LogViewer/log-viewer.css +0 -38
  92. package/components/Login/login.css +20 -60
  93. package/components/Login/login.scss +16 -18
  94. package/components/Login/themes/dark/login.scss +4 -0
  95. package/components/Masthead/masthead.css +4 -42
  96. package/components/Masthead/masthead.scss +4 -4
  97. package/components/Menu/menu.css +9 -6
  98. package/components/Menu/menu.scss +34 -31
  99. package/components/MenuToggle/menu-toggle.css +3 -1
  100. package/components/MenuToggle/menu-toggle.scss +3 -1
  101. package/components/ModalBox/modal-box.css +12 -11
  102. package/components/ModalBox/modal-box.scss +14 -14
  103. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  104. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  105. package/components/Nav/nav.css +1 -1
  106. package/components/Nav/nav.scss +2 -2
  107. package/components/NotificationDrawer/notification-drawer.css +8 -8
  108. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  109. package/components/OptionsMenu/options-menu.css +8 -10
  110. package/components/OptionsMenu/options-menu.scss +9 -11
  111. package/components/Page/page.css +101 -122
  112. package/components/Page/page.scss +49 -21
  113. package/components/Pagination/pagination.css +2 -110
  114. package/components/Pagination/pagination.scss +0 -6
  115. package/components/Popover/popover.css +31 -37
  116. package/components/Popover/popover.scss +32 -37
  117. package/components/Popover/themes/dark/popover.scss +3 -9
  118. package/components/Progress/progress.css +13 -10
  119. package/components/Progress/progress.scss +13 -10
  120. package/components/ProgressStepper/progress-stepper.css +5 -5
  121. package/components/ProgressStepper/progress-stepper.scss +5 -5
  122. package/components/SearchInput/search-input.css +4 -2
  123. package/components/SearchInput/search-input.scss +4 -2
  124. package/components/Select/select.css +1 -1
  125. package/components/Select/select.scss +1 -1
  126. package/components/Sidebar/sidebar.css +69 -26
  127. package/components/Sidebar/sidebar.scss +84 -27
  128. package/components/SimpleList/simple-list.css +1 -1
  129. package/components/SimpleList/simple-list.scss +2 -2
  130. package/components/Spinner/spinner.css +4 -4
  131. package/components/Spinner/spinner.scss +4 -4
  132. package/components/Table/table-grid.css +28 -28
  133. package/components/Table/table-scrollable.css +31 -26
  134. package/components/Table/table-scrollable.scss +33 -28
  135. package/components/Table/table-tree-view.css +14 -4
  136. package/components/Table/table-tree-view.scss +15 -0
  137. package/components/Table/table.css +67 -65
  138. package/components/Table/table.scss +65 -62
  139. package/components/Tabs/tabs.css +0 -4
  140. package/components/Tabs/tabs.scss +0 -7
  141. package/components/TextInputGroup/text-input-group.css +6 -4
  142. package/components/TextInputGroup/text-input-group.scss +6 -5
  143. package/components/Tile/tile.css +1 -1
  144. package/components/Tile/tile.scss +1 -1
  145. package/components/Timestamp/timestamp.css +3 -3
  146. package/components/Timestamp/timestamp.scss +3 -3
  147. package/components/Toolbar/toolbar.css +78 -43
  148. package/components/Toolbar/toolbar.scss +50 -10
  149. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  150. package/components/Tooltip/tooltip.css +7 -12
  151. package/components/Tooltip/tooltip.scss +6 -3
  152. package/components/TreeView/tree-view.css +7 -15
  153. package/components/TreeView/tree-view.scss +7 -18
  154. package/components/Wizard/wizard.css +16 -39
  155. package/components/Wizard/wizard.scss +20 -2
  156. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  157. package/docs/components/Accordion/examples/Accordion.md +12 -12
  158. package/docs/components/ActionList/examples/ActionList.md +6 -6
  159. package/docs/components/Alert/examples/Alert.md +29 -29
  160. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  161. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  162. package/docs/components/Avatar/examples/Avatar.md +11 -11
  163. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  164. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  165. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  166. package/docs/components/Badge/examples/Badge.md +5 -5
  167. package/docs/components/Banner/examples/Banner.md +8 -8
  168. package/docs/components/Brand/examples/Brand.md +9 -9
  169. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  170. package/docs/components/Button/examples/Button.md +35 -35
  171. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  172. package/docs/components/Card/examples/Card.md +676 -116
  173. package/docs/components/Check/examples/Check.md +16 -19
  174. package/docs/components/Chip/examples/Chip.md +70 -52
  175. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  176. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  177. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  178. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  179. package/docs/components/Content/examples/Content.md +37 -9
  180. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  181. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  182. package/docs/components/DataList/examples/DataList.md +239 -202
  183. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  184. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  185. package/docs/components/Divider/examples/Divider.md +10 -10
  186. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  187. package/docs/components/Drawer/examples/Drawer.md +43 -43
  188. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  189. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  190. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  191. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  192. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  193. package/docs/components/FileUpload/examples/FileUpload.md +146 -105
  194. package/docs/components/Form/examples/Form.md +152 -130
  195. package/docs/components/FormControl/examples/FormControl.md +21 -20
  196. package/docs/components/HelperText/examples/HelperText.md +24 -35
  197. package/docs/components/Hint/examples/Hint.md +7 -7
  198. package/docs/components/Icon/examples/Icon.md +11 -12
  199. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  200. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  201. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  202. package/docs/components/Label/examples/Label.md +1427 -746
  203. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  204. package/docs/components/List/examples/List.md +18 -18
  205. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  206. package/docs/components/Login/examples/Login.md +103 -181
  207. package/docs/components/Masthead/examples/masthead.md +9 -9
  208. package/docs/components/Menu/examples/Menu.md +83 -80
  209. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  210. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  211. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  212. package/docs/components/Nav/examples/Navigation.md +69 -69
  213. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  214. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  215. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  216. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  217. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  218. package/docs/components/Page/examples/Page.css +7 -1
  219. package/docs/components/Page/examples/Page.md +81 -54
  220. package/docs/components/Pagination/examples/Pagination.md +27 -27
  221. package/docs/components/Panel/examples/Panel.md +10 -10
  222. package/docs/components/Popover/examples/Popover.md +206 -149
  223. package/docs/components/Progress/examples/Progress.md +32 -61
  224. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  225. package/docs/components/Radio/examples/Radio.md +12 -11
  226. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  227. package/docs/components/Select/examples/Select.md +368 -313
  228. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  229. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  230. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  231. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  232. package/docs/components/Slider/examples/Slider.md +84 -62
  233. package/docs/components/Spinner/examples/Spinner.md +24 -24
  234. package/docs/components/Switch/examples/Switch.md +19 -19
  235. package/docs/components/TabContent/examples/TabContent.md +13 -13
  236. package/docs/components/Table/examples/Table.css +4 -0
  237. package/docs/components/Table/examples/Table.md +5212 -5750
  238. package/docs/components/Tabs/examples/Tabs.md +155 -155
  239. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  240. package/docs/components/Tile/examples/Tile.md +16 -17
  241. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  242. package/docs/components/Title/examples/Title.md +17 -17
  243. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  244. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  245. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  246. package/docs/components/TreeView/examples/TreeView.md +34 -34
  247. package/docs/components/Truncate/examples/Truncate.md +4 -5
  248. package/docs/components/Wizard/examples/Wizard.md +119 -127
  249. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  250. package/docs/demos/Alert/examples/Alert.md +118 -71
  251. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  252. package/docs/demos/Banner/examples/Banner.md +8 -9
  253. package/docs/demos/Card/examples/Card.md +216 -153
  254. package/docs/demos/CardView/examples/CardView.md +57 -30
  255. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  256. package/docs/demos/Dashboard/examples/Dashboard.md +51 -33
  257. package/docs/demos/DataList/examples/DataList.md +312 -255
  258. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  259. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  260. package/docs/demos/Form/examples/BasicForms.md +220 -213
  261. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  262. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  263. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  264. package/docs/demos/Modal/examples/Modal.md +54 -66
  265. package/docs/demos/Nav/examples/Nav.md +47 -47
  266. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  267. package/docs/demos/Page/examples/Page.md +982 -51
  268. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  269. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  270. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  271. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  272. package/docs/demos/Table/examples/Table.md +3323 -1288
  273. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  274. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  275. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  276. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  277. package/docs/layouts/Flex/examples/Flex.md +98 -98
  278. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  279. package/docs/layouts/Grid/examples/Grid.md +9 -9
  280. package/docs/layouts/Level/examples/Level.md +5 -5
  281. package/docs/layouts/Split/examples/Split.md +7 -7
  282. package/docs/layouts/Stack/examples/Stack.md +6 -6
  283. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  284. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  285. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  286. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  287. package/docs/utilities/Display/examples/Display.md +12 -12
  288. package/docs/utilities/Flex/examples/Flex.md +35 -35
  289. package/docs/utilities/Float/examples/Float.md +5 -5
  290. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  291. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  292. package/docs/utilities/Text/examples/Text.md +31 -31
  293. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  294. package/layouts/Gallery/gallery.css +1 -1
  295. package/layouts/Gallery/gallery.scss +1 -1
  296. package/layouts/Grid/grid.css +7 -7
  297. package/layouts/Grid/grid.scss +2 -2
  298. package/package.json +59 -65
  299. package/patternfly-addons.css +48 -48
  300. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  301. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  302. package/patternfly-base.css +63 -114
  303. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1179 -2293
  304. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  305. package/patternfly.css +1207 -2327
  306. package/patternfly.min.css +1 -1
  307. package/patternfly.min.css.map +1 -1
  308. package/sass-utilities/functions.scss +8 -24
  309. package/sass-utilities/mixins.scss +15 -39
  310. package/sass-utilities/placeholders.scss +0 -23
  311. package/sass-utilities/scss-variables.scss +5 -6
  312. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  313. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  314. package/utilities/Spacing/spacing.scss +2 -2
  315. package/utilities/Text/text.css +48 -48
  316. package/utilities/Text/text.scss +6 -6
  317. package/utilities/Text/themes/dark/text.scss +2 -2
  318. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  319. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  326. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  327. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  332. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  333. package/assets/pficon/pficon.woff +0 -0
  334. package/base/_shield-inheritable.scss +0 -69
  335. package/base/_shield-noninheritable.scss +0 -13
  336. package/base/patternfly-shield-inheritable.css +0 -66
  337. package/base/patternfly-shield-inheritable.scss +0 -4
  338. package/base/patternfly-shield-noninheritable.css +0 -9
  339. package/base/patternfly-shield-noninheritable.scss +0 -4
  340. package/sass-utilities/bs-variables.scss +0 -709
package/docs/components/Menu/examples/Menu.md CHANGED
@@ -1,6 +1,7 @@
1
1
  ---
2
2
  id: Menu
3
3
  section: components
4
+ subsection: menus
4
5
  cssPrefix: pf-c-menu
5
6
  ---import './Menu.css'
6
7
 
@@ -178,9 +179,9 @@ cssPrefix: pf-c-menu
178
179
  <input
179
180
  class="pf-c-check__input"
180
181
  type="checkbox"
182
+ disabled
181
183
  id="with-checkbox-example-check-3"
182
184
  name="with-checkbox-example-check-3"
183
- disabled
184
185
  />
185
186
  </span>
186
187
  </span>
@@ -4140,7 +4141,7 @@ cssPrefix: pf-c-menu
4140
4141
  >
4141
4142
  <div class="pf-c-menu__breadcrumb">
4142
4143
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
4143
- <ol class="pf-c-breadcrumb__list">
4144
+ <ol class="pf-c-breadcrumb__list" role="list">
4144
4145
  <li class="pf-c-breadcrumb__item">
4145
4146
  <span class="pf-c-breadcrumb__item-divider">
4146
4147
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -4334,7 +4335,7 @@ cssPrefix: pf-c-menu
4334
4335
  >
4335
4336
  <div class="pf-c-menu__breadcrumb">
4336
4337
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
4337
- <ol class="pf-c-breadcrumb__list">
4338
+ <ol class="pf-c-breadcrumb__list" role="list">
4338
4339
  <li class="pf-c-breadcrumb__item">
4339
4340
  <span class="pf-c-breadcrumb__item-divider">
4340
4341
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -4564,7 +4565,7 @@ cssPrefix: pf-c-menu
4564
4565
  >
4565
4566
  <div class="pf-c-menu__breadcrumb">
4566
4567
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
4567
- <ol class="pf-c-breadcrumb__list">
4568
+ <ol class="pf-c-breadcrumb__list" role="list">
4568
4569
  <li class="pf-c-breadcrumb__item">
4569
4570
  <span class="pf-c-breadcrumb__item-divider">
4570
4571
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -4932,17 +4933,18 @@ cssPrefix: pf-c-menu
4932
4933
  <div class="pf-c-menu pf-m-scrollable">
4933
4934
  <div class="pf-c-menu__search">
4934
4935
  <div class="pf-c-menu__search-input">
4935
- <div class="pf-c-search-input">
4936
- <div class="pf-c-search-input__bar">
4937
- <span class="pf-c-search-input__text">
4938
- <span class="pf-c-search-input__icon">
4939
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
4936
+ <div class="pf-c-text-input-group">
4937
+ <div class="pf-c-text-input-group__main pf-m-icon">
4938
+ <span class="pf-c-text-input-group__text">
4939
+ <span class="pf-c-text-input-group__icon">
4940
+ <i class="fas fa-fw fa-search"></i>
4940
4941
  </span>
4941
4942
  <input
4942
- class="pf-c-search-input__text-input"
4943
- type="text"
4943
+ class="pf-c-text-input-group__text-input"
4944
+ type="search"
4944
4945
  placeholder="Search"
4945
- aria-label="Search"
4946
+ value
4947
+ aria-label="Filter menu items"
4946
4948
  />
4947
4949
  </span>
4948
4950
  </div>
@@ -5051,17 +5053,18 @@ cssPrefix: pf-c-menu
5051
5053
  <div class="pf-c-menu">
5052
5054
  <div class="pf-c-menu__search">
5053
5055
  <div class="pf-c-menu__search-input">
5054
- <div class="pf-c-search-input">
5055
- <div class="pf-c-search-input__bar">
5056
- <span class="pf-c-search-input__text">
5057
- <span class="pf-c-search-input__icon">
5058
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
5056
+ <div class="pf-c-text-input-group">
5057
+ <div class="pf-c-text-input-group__main pf-m-icon">
5058
+ <span class="pf-c-text-input-group__text">
5059
+ <span class="pf-c-text-input-group__icon">
5060
+ <i class="fas fa-fw fa-search"></i>
5059
5061
  </span>
5060
5062
  <input
5061
- class="pf-c-search-input__text-input"
5062
- type="text"
5063
+ class="pf-c-text-input-group__text-input"
5064
+ type="search"
5063
5065
  placeholder="Search"
5064
- aria-label="Search"
5066
+ value
5067
+ aria-label="Filter menu items"
5065
5068
  />
5066
5069
  </span>
5067
5070
  </div>
@@ -6063,66 +6066,66 @@ cssPrefix: pf-c-menu
6063
6066
 
6064
6067
  ### Accessibility
6065
6068
 
6066
- | Attribute | Applied | Outcome |
6067
- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
6068
- | `role="menu"` | `.pf-c-menu__list` | Declares `.pf-c-menu__list` as a menu. |
6069
- | `disabled` | `button.pf-c-menu__item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
6070
- | `role="menuitem"` | `.pf-c-menu__item`, `.pf-c-menu__list-item` (checkbox) | Assigns `.pf-c-menu__item` as an option in a set of choices contained by a menu. |
6071
- | `role="none"` | `.pf-c-menu__list-item` | Removes semantic meaning from `.pf-c-menu__list-item`. |
6072
- | `aria-disabled="true"` | `a.pf-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
6073
- | `tabindex="-1"` | `a.pf-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
6074
- | `aria-hidden="true"` | `.pf-c-menu__item-icon`, `.pf-c-menu__item-action-icon`, `.pf-c-menu__item-external-icon`, `.pf-c-menu__item-toggle-icon`, `.pf-c-menu__item-select-icon` | Hides the icon from assistive technologies. |
6075
- | `aria-label="Not starred"` | `.pf-c-menu__item-action-icon.pf-m-favorite` | Provides an accessible label indicating that the favorite action is not selected. |
6076
- | `aria-label="Starred"` | `.pf-c-menu__item-action-icon.pf-m-favorite.pf-m-favorited` | Provides an accessible label indicating that the favorite action is selected. |
6069
+ | Attribute | Applied | Outcome |
6070
+ | -- | -- | -- |
6071
+ | `role="menu"` | `.pf-c-menu__list` | Declares `.pf-c-menu__list` as a menu. |
6072
+ | `disabled` | `button.pf-c-menu__item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
6073
+ | `role="menuitem"` | `.pf-c-menu__item`, `.pf-c-menu__list-item` (checkbox) | Assigns `.pf-c-menu__item` as an option in a set of choices contained by a menu. |
6074
+ | `role="none"` | `.pf-c-menu__list-item` | Removes semantic meaning from `.pf-c-menu__list-item`. |
6075
+ | `aria-disabled="true"` | `a.pf-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
6076
+ | `tabindex="-1"` | `a.pf-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
6077
+ | `aria-hidden="true"` | `.pf-c-menu__item-icon`, `.pf-c-menu__item-action-icon`, `.pf-c-menu__item-external-icon`, `.pf-c-menu__item-toggle-icon`, `.pf-c-menu__item-select-icon` | Hides the icon from assistive technologies. |
6078
+ | `aria-label="Not starred"` | `.pf-c-menu__item-action-icon.pf-m-favorite` | Provides an accessible label indicating that the favorite action is not selected. |
6079
+ | `aria-label="Starred"` | `.pf-c-menu__item-action-icon.pf-m-favorite.pf-m-favorited` | Provides an accessible label indicating that the favorite action is selected. |
6077
6080
 
6078
6081
  ### Usage
6079
6082
 
6080
- | Class | Applied to | Outcome |
6081
- | --------------------------------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
6082
- | `.pf-c-menu` | `<div>` | Initiates the menu. **Required** |
6083
- | `.pf-c-menu__header` | `<div>` | Initiates the menu header container. |
6084
- | `.pf-c-menu__search` | `<div>` | Initiates the menu search container. Use for filtering. |
6085
- | `.pf-c-menu__search-input` | `<div>` | Initiates the menu search input container. |
6086
- | `.pf-c-menu__content` | `<div>` | Initiates the menu content. Use for lists. **Required** |
6087
- | `.pf-c-menu__list` | `<ul>` | Initiates the menu list. **Required** |
6088
- | `.pf-c-menu__list-item` | `<li>` | Initiates the menu list item. **Required** |
6089
- | `.pf-c-menu__item` | `<button>`, `<a>`, `<div>`, `<label>` | Initiates the menu item. **Required** |
6090
- | `.pf-c-menu__item-main` | `<span>` | Initiates the menu item main container. **Required** |
6091
- | `.pf-c-menu__item-text` | `<span>` | Initiates the menu item text. **Required** |
6092
- | `.pf-c-menu__item-check` | `<span>` | Initiates a menu label. |
6093
- | `.pf-c-menu__item-description` | `<span>` | Initiates the menu item description. |
6094
- | `.pf-c-menu__item-group` | `<section>` | Initiates the menu item group. |
6095
- | `.pf-c-menu__item-group-title` | `<h1>` | Initiates the menu item group title. |
6096
- | `.pf-c-menu__item-icon` | `<span>` | Initiates the menu item icon. |
6097
- | `.pf-c-menu__item-toggle-icon` | `<span>` | Initiates the menu item toggle icon. |
6098
- | `.pf-c-menu__item-select-icon` | `<span>` | Initiates the menu item select icon. |
6099
- | `.pf-c-menu__item-action` | `<button>` | Initiates the menu item action. |
6100
- | `.pf-c-menu__item-action-icon` | `<span>` | Initiates the menu item action icon. |
6101
- | `.pf-c-menu__item-external-icon` | `<span>` | Initiates the menu item external icon. |
6102
- | `.pf-c-menu__footer` | `<div>` | Initiates the menu footer. |
6103
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group` | Modifies a menu element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
6104
- | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group` | Modifies a menu element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
6105
- | `.pf-m-favorite` | `.pf-c-menu__item-action` | Modifies the menu item action to handle the favorite icon. |
6106
- | `.pf-m-favorited` | `.pf-c-menu__item-action.pf-m-favorite` | Modifies the menu item action icon to be favorited. |
6107
- | `.pf-m-selected` | `.pf-c-menu__item` | Modifies the menu item to be selected. |
6108
- | `.pf-m-drill-up` | `.pf-c-menu__list-item` | Flags the menu item as a drill up button. |
6109
- | `.pf-m-flyout` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "flyout". |
6110
- | `.pf-m-nav` | `.pf-c-menu` | Modifies the menu for nav variant. |
6111
- | `.pf-m-top` | `.pf-c-menu` | Modifies a flyout menu to expand to the top. |
6112
- | `.pf-m-left` | `.pf-c-menu` | Modifies a flyout menu to expand to the left. |
6113
- | `.pf-m-plain` | `.pf-c-menu` | Modifies the menu component for use in the page instead of as a dropdown. |
6114
- | `.pf-m-scrollable` | `.pf-c-menu` | Modifies the menu component content for scrollable styles. Scrollable content height can be customized by setting `--pf-c-menu__content--MaxHeight`. |
6115
- | `.pf-m-current` | `.pf-c-menu__list-item` | Modifies a list item for current styles. |
6116
- | `.pf-m-load` | `.pf-c-menu__list-item` | Modifies a list item for "load more" styles. |
6117
- | `.pf-m-loading` | `.pf-c-menu__list-item` | Modifies a list item for loading styles. |
6118
- | `.pf-m-drilldown` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "drill down". |
6119
- | `.pf-m-current-path` | `.pf-c-menu.pf-m-drilldown .pf-c-menu__list-item` | Modifies the menu list item for current path state. |
6120
- | `.pf-m-drilled-in` | `.pf-c-menu.pf-m-drilldown, .pf-c-menu.pf-m-drilldown .pf-c-menu` | Modifies the menu list for drilled in state. |
6121
- | `.pf-m-static` | `.pf-c-menu.pf-m-drilldown .pf-c-menu` | Modifies the menu list for drilled static state. |
6122
- | `.pf-m-danger` | `pf-c-menu__item-text` | Modifies a list item for danger styles. |
6123
- | `--pf-c-menu--Width: {width}` | `.pf-c-menu` | Modifies the width of the menu. The default value is `auto`. |
6124
- | `--pf-c-menu__content--MaxHeight: {height}` | `.pf-c-menu__content` | Modifies the height of the menu content. Update this value when header and/or footer elements are intended to be fixed. |
6125
- | `--pf-c-menu__content--Height: {height}` | `.pf-c-menu` | Modifies the height of the drilldown menu content. The default value is `auto`. |
6126
- | `--pf-c-menu--m-flyout__menu--top-offset` | `.pf-c-menu` | Modifies the menu to allow for an offset to the top positioning. |
6127
- | `--pf-c-menu--m-flyout__menu--left-offset` | `.pf-c-menu` | Modifies the menu to allow for an offset to the left positioning. |
6128
- | `--pf-c-menu--m-flyout__menu--m-left--right-offset` | `.pf-c-menu.pf-m-flyout > .pf-c-menu` | Modifies the menu to allow for an offset to the right positioning. |
6083
+ | Class | Applied to | Outcome |
6084
+ | -- | -- | -- |
6085
+ | `.pf-c-menu` | `<div>` | Initiates the menu. **Required** |
6086
+ | `.pf-c-menu__header` | `<div>` | Initiates the menu header container. |
6087
+ | `.pf-c-menu__search` | `<div>` | Initiates the menu search container. Use for filtering. |
6088
+ | `.pf-c-menu__search-input` | `<div>` | Initiates the menu search input container. |
6089
+ | `.pf-c-menu__content` | `<div>` | Initiates the menu content. Use for lists. **Required** |
6090
+ | `.pf-c-menu__list` | `<ul>` | Initiates the menu list. **Required** |
6091
+ | `.pf-c-menu__list-item` | `<li>` | Initiates the menu list item. **Required** |
6092
+ | `.pf-c-menu__item` | `<button>`, `<a>`, `<div>`, `<label>` | Initiates the menu item. **Required** |
6093
+ | `.pf-c-menu__item-main` | `<span>` | Initiates the menu item main container. **Required** |
6094
+ | `.pf-c-menu__item-text` | `<span>` | Initiates the menu item text. **Required** |
6095
+ | `.pf-c-menu__item-check` | `<span>` | Initiates a menu label. |
6096
+ | `.pf-c-menu__item-description` | `<span>` | Initiates the menu item description. |
6097
+ | `.pf-c-menu__item-group` | `<section>` | Initiates the menu item group. |
6098
+ | `.pf-c-menu__item-group-title` | `<h1>` | Initiates the menu item group title. |
6099
+ | `.pf-c-menu__item-icon` | `<span>` | Initiates the menu item icon. |
6100
+ | `.pf-c-menu__item-toggle-icon` | `<span>` | Initiates the menu item toggle icon. |
6101
+ | `.pf-c-menu__item-select-icon` | `<span>` | Initiates the menu item select icon. |
6102
+ | `.pf-c-menu__item-action` | `<button>` | Initiates the menu item action. |
6103
+ | `.pf-c-menu__item-action-icon` | `<span>` | Initiates the menu item action icon. |
6104
+ | `.pf-c-menu__item-external-icon` | `<span>` | Initiates the menu item external icon. |
6105
+ | `.pf-c-menu__footer` | `<div>` | Initiates the menu footer. |
6106
+ | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group` | Modifies a menu element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
6107
+ | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group` | Modifies a menu element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
6108
+ | `.pf-m-favorite` | `.pf-c-menu__item-action` | Modifies the menu item action to handle the favorite icon. |
6109
+ | `.pf-m-favorited` | `.pf-c-menu__item-action.pf-m-favorite` | Modifies the menu item action icon to be favorited. |
6110
+ | `.pf-m-selected` | `.pf-c-menu__item` | Modifies the menu item to be selected. |
6111
+ | `.pf-m-drill-up` | `.pf-c-menu__list-item` | Flags the menu item as a drill up button. |
6112
+ | `.pf-m-flyout` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "flyout". |
6113
+ | `.pf-m-nav` | `.pf-c-menu` | Modifies the menu for nav variant. |
6114
+ | `.pf-m-top` | `.pf-c-menu` | Modifies a flyout menu to expand to the top. |
6115
+ | `.pf-m-left` | `.pf-c-menu` | Modifies a flyout menu to expand to the left. |
6116
+ | `.pf-m-plain` | `.pf-c-menu` | Modifies the menu component for use in the page instead of as a dropdown. |
6117
+ | `.pf-m-scrollable` | `.pf-c-menu` | Modifies the menu component content for scrollable styles. Scrollable content height can be customized by setting `--pf-c-menu__content--MaxHeight`. |
6118
+ | `.pf-m-current` | `.pf-c-menu__list-item` | Modifies a list item for current styles. |
6119
+ | `.pf-m-load` | `.pf-c-menu__list-item` | Modifies a list item for "load more" styles. |
6120
+ | `.pf-m-loading` | `.pf-c-menu__list-item` | Modifies a list item for loading styles. |
6121
+ | `.pf-m-drilldown` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "drill down". |
6122
+ | `.pf-m-current-path` | `.pf-c-menu.pf-m-drilldown .pf-c-menu__list-item` | Modifies the menu list item for current path state. |
6123
+ | `.pf-m-drilled-in` | `.pf-c-menu.pf-m-drilldown, .pf-c-menu.pf-m-drilldown .pf-c-menu` | Modifies the menu list for drilled in state. |
6124
+ | `.pf-m-static` | `.pf-c-menu.pf-m-drilldown .pf-c-menu` | Modifies the menu list for drilled static state. |
6125
+ | `.pf-m-danger` | `pf-c-menu__item-text` | Modifies a list item for danger styles. |
6126
+ | `--pf-c-menu--Width: {width}` | `.pf-c-menu` | Modifies the width of the menu. The default value is `auto`. |
6127
+ | `--pf-c-menu__content--MaxHeight: {height}` | `.pf-c-menu__content` | Modifies the height of the menu content. Update this value when header and/or footer elements are intended to be fixed. |
6128
+ | `--pf-c-menu__content--Height: {height}` | `.pf-c-menu` | Modifies the height of the drilldown menu content. The default value is `auto`. |
6129
+ | `--pf-c-menu--m-flyout__menu--top-offset` | `.pf-c-menu` | Modifies the menu to allow for an offset to the top positioning. |
6130
+ | `--pf-c-menu--m-flyout__menu--left-offset` | `.pf-c-menu` | Modifies the menu to allow for an offset to the left positioning. |
6131
+ | `--pf-c-menu--m-flyout__menu--m-left--right-offset` | `.pf-c-menu.pf-m-flyout > .pf-c-menu` | Modifies the menu to allow for an offset to the right positioning. |
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -1,6 +1,7 @@
1
1
  ---
2
2
  id: 'Menu toggle'
3
3
  section: components
4
+ subsection: menus
4
5
  cssPrefix: pf-c-menu-toggle
5
6
  ---import './MenuToggle.css'
6
7
 
@@ -273,10 +274,10 @@ cssPrefix: pf-c-menu-toggle
273
274
  <input
274
275
  class="pf-c-check__input"
275
276
  type="checkbox"
277
+ disabled
276
278
  id="split-button-checkbox-disabled-example-input"
277
279
  name="split-button-checkbox-disabled-example-input"
278
280
  aria-label="Standalone input"
279
- disabled
280
281
  />
281
282
  </label>
282
283
  <button
@@ -358,9 +359,9 @@ cssPrefix: pf-c-menu-toggle
358
359
  <input
359
360
  class="pf-c-check__input"
360
361
  type="checkbox"
362
+ disabled
361
363
  id="split-button-checkbox-with-toggle-text-disabled-example-input"
362
364
  name="split-button-checkbox-with-toggle-text-disabled-example-input"
363
- disabled
364
365
  />
365
366
  <span class="pf-c-check__label pf-m-disabled">10 selected</span>
366
367
  </label>
@@ -449,9 +450,9 @@ cssPrefix: pf-c-menu-toggle
449
450
  <input
450
451
  class="pf-c-check__input"
451
452
  type="checkbox"
453
+ disabled
452
454
  id="split-button-checkbox-primary-disabled-example-input"
453
455
  name="split-button-checkbox-primary-disabled-example-input"
454
- disabled
455
456
  />
456
457
  <span class="pf-c-check__label pf-m-disabled">10 selected</span>
457
458
  </label>
@@ -537,9 +538,9 @@ cssPrefix: pf-c-menu-toggle
537
538
  <input
538
539
  class="pf-c-check__input"
539
540
  type="checkbox"
541
+ disabled
540
542
  id="split-button-checkbox-secondary-disabled-example-input"
541
543
  name="split-button-checkbox-secondary-disabled-example-input"
542
- disabled
543
544
  />
544
545
  <span class="pf-c-check__label pf-m-disabled">10 selected</span>
545
546
  </label>
@@ -958,30 +959,30 @@ cssPrefix: pf-c-menu-toggle
958
959
 
959
960
  ### Accessibility
960
961
 
961
- | Class | Applied to | Outcome |
962
- | ------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------- |
963
- | `aria-expanded="true"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. |
964
- | `aria-expanded="false"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. |
965
- | `aria-label="Descriptive text"` | `.pf-c-menu-toggle.pf-m-plain` | Gives the plain menu toggle component an accessible label. |
966
- | `disabled` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. |
962
+ | Class | Applied to | Outcome |
963
+ | -- | -- | -- |
964
+ | `aria-expanded="true"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. |
965
+ | `aria-expanded="false"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. |
966
+ | `aria-label="Descriptive text"` | `.pf-c-menu-toggle.pf-m-plain` | Gives the plain menu toggle component an accessible label. |
967
+ | `disabled` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. |
967
968
 
968
969
  ### Usage
969
970
 
970
- | Class | Applied | Outcome |
971
- | -------------------------------- | ------------------------------------- | -------------------------------------------------------------------------- |
972
- | `.pf-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
973
- | `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon/image. |
974
- | `.pf-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
975
- | `.pf-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
976
- | `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
977
- | `.pf-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
978
- | `.pf-c-menu-toggle__button` | `<button>` | Initiates the menu toggle button. |
979
- | `.pf-m-split-button` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the split button variation. |
980
- | `.pf-m-action` | `.pf-c-menu-toggle.pf-m-split-button` | Modifies the menu toggle component for the action, split button variation. |
981
- | `.pf-m-disabled` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the disabled variation. |
982
- | `.pf-m-primary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
983
- | `.pf-m-secondary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
984
- | `.pf-m-text` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
985
- | `.pf-m-plain` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
986
- | `.pf-m-expanded` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
987
- | `.pf-m-full-height` | `.pf-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
971
+ | Class | Applied | Outcome |
972
+ | -- | -- | -- |
973
+ | `.pf-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
974
+ | `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon/image. |
975
+ | `.pf-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
976
+ | `.pf-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
977
+ | `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
978
+ | `.pf-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
979
+ | `.pf-c-menu-toggle__button` | `<button>` | Initiates the menu toggle button. |
980
+ | `.pf-m-split-button` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the split button variation. |
981
+ | `.pf-m-action` | `.pf-c-menu-toggle.pf-m-split-button` | Modifies the menu toggle component for the action, split button variation. |
982
+ | `.pf-m-disabled` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the disabled variation. |
983
+ | `.pf-m-primary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
984
+ | `.pf-m-secondary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
985
+ | `.pf-m-text` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
986
+ | `.pf-m-plain` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
987
+ | `.pf-m-expanded` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
988
+ | `.pf-m-full-height` | `.pf-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |