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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (342) hide show
  1. package/README.md +4 -4
  2. package/RELEASE-NOTES.md +18 -1
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/pfbg-icon.svg +1 -0
  5. package/assets/pficon/pficon.scss +7 -2
  6. package/assets/pficon/pficon.woff2 +0 -0
  7. package/base/_base.scss +0 -18
  8. package/base/_chart-globals.scss +0 -4
  9. package/base/_common.scss +0 -22
  10. package/base/_fa-icons.scss +1 -2
  11. package/base/_fonts.scss +22 -27
  12. package/base/_globals.scss +92 -86
  13. package/base/_icons.scss +1 -28
  14. package/base/_svg-icons.scss +6 -0
  15. package/base/_variables.scss +4 -4
  16. package/base/patternfly-common.css +0 -10
  17. package/base/patternfly-fa-icons.css +1 -1
  18. package/base/patternfly-fonts.css +17 -17
  19. package/base/patternfly-globals.css +35 -41
  20. package/base/patternfly-icons.css +8 -22
  21. package/base/patternfly-pf-icons.css +6 -2
  22. package/base/patternfly-themes.css +0 -42
  23. package/base/patternfly-variables.css +3 -3
  24. package/base/themes/dark/_globals.scss +1 -1
  25. package/base/themes/dark/_variables.scss +1 -1
  26. package/components/AboutModalBox/about-modal-box.css +20 -50
  27. package/components/AboutModalBox/about-modal-box.scss +22 -14
  28. package/components/Accordion/accordion.css +2 -0
  29. package/components/Accordion/accordion.scss +2 -0
  30. package/components/Alert/alert.css +17 -8
  31. package/components/Alert/alert.scss +21 -7
  32. package/components/Alert/themes/dark/alert.scss +1 -1
  33. package/components/AppLauncher/app-launcher.css +2 -0
  34. package/components/AppLauncher/app-launcher.scss +2 -0
  35. package/components/Avatar/avatar.scss +2 -2
  36. package/components/BackgroundImage/background-image.css +8 -35
  37. package/components/BackgroundImage/background-image.scss +17 -43
  38. package/components/Banner/banner.css +14 -52
  39. package/components/Banner/banner.scss +9 -13
  40. package/components/Breadcrumb/breadcrumb.css +2 -0
  41. package/components/Breadcrumb/breadcrumb.scss +2 -0
  42. package/components/CalendarMonth/calendar-month.css +2 -2
  43. package/components/CalendarMonth/calendar-month.scss +3 -3
  44. package/components/Card/card.css +115 -50
  45. package/components/Card/card.scss +164 -63
  46. package/components/Chip/chip.css +33 -24
  47. package/components/Chip/chip.scss +40 -31
  48. package/components/ChipGroup/chip-group.css +27 -17
  49. package/components/ChipGroup/chip-group.scss +36 -22
  50. package/components/Content/content.css +11 -5
  51. package/components/Content/content.scss +17 -9
  52. package/components/ContextSelector/context-selector.css +13 -6
  53. package/components/ContextSelector/context-selector.scss +14 -7
  54. package/components/DataList/data-list-grid.css +7 -7
  55. package/components/DataList/data-list-grid.scss +1 -1
  56. package/components/DataList/data-list.css +46 -40
  57. package/components/DataList/data-list.scss +37 -28
  58. package/components/DatePicker/date-picker.css +0 -8
  59. package/components/DatePicker/date-picker.scss +0 -9
  60. package/components/DescriptionList/description-list.css +7 -7
  61. package/components/DescriptionList/description-list.scss +7 -7
  62. package/components/Divider/divider.css +2 -2
  63. package/components/Divider/divider.scss +3 -3
  64. package/components/Drawer/drawer.css +15 -16
  65. package/components/Drawer/drawer.scss +2 -3
  66. package/components/Dropdown/dropdown.css +26 -25
  67. package/components/Dropdown/dropdown.scss +17 -18
  68. package/components/DualListSelector/dual-list-selector.css +1 -1
  69. package/components/DualListSelector/dual-list-selector.scss +1 -1
  70. package/components/EmptyState/empty-state.css +46 -52
  71. package/components/EmptyState/empty-state.scss +58 -57
  72. package/components/ExpandableSection/expandable-section.css +2 -0
  73. package/components/ExpandableSection/expandable-section.scss +2 -0
  74. package/components/Form/form.css +14 -12
  75. package/components/Form/form.scss +9 -7
  76. package/components/FormControl/form-control.css +2 -5
  77. package/components/FormControl/themes/dark/form-control.scss +2 -6
  78. package/components/HelperText/helper-text.css +4 -0
  79. package/components/HelperText/helper-text.scss +5 -0
  80. package/components/Hint/hint.css +2 -2
  81. package/components/Hint/hint.scss +2 -2
  82. package/components/Icon/icon.css +3 -3
  83. package/components/Icon/icon.scss +3 -3
  84. package/components/InputGroup/input-group.css +61 -85
  85. package/components/InputGroup/input-group.scss +55 -61
  86. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  87. package/components/Label/label.css +49 -36
  88. package/components/Label/label.scss +53 -38
  89. package/components/Label/themes/dark/label.scss +2 -2
  90. package/components/LabelGroup/label-group.css +26 -22
  91. package/components/LabelGroup/label-group.scss +31 -26
  92. package/components/LogViewer/log-viewer.css +0 -38
  93. package/components/Login/login.css +20 -60
  94. package/components/Login/login.scss +16 -18
  95. package/components/Login/themes/dark/login.scss +4 -0
  96. package/components/Masthead/masthead.css +4 -42
  97. package/components/Masthead/masthead.scss +4 -4
  98. package/components/Menu/menu.css +9 -6
  99. package/components/Menu/menu.scss +34 -31
  100. package/components/MenuToggle/menu-toggle.css +3 -1
  101. package/components/MenuToggle/menu-toggle.scss +3 -1
  102. package/components/ModalBox/modal-box.css +12 -11
  103. package/components/ModalBox/modal-box.scss +14 -14
  104. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  105. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  106. package/components/Nav/nav.css +1 -1
  107. package/components/Nav/nav.scss +2 -2
  108. package/components/NotificationDrawer/notification-drawer.css +8 -8
  109. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  110. package/components/OptionsMenu/options-menu.css +8 -10
  111. package/components/OptionsMenu/options-menu.scss +9 -11
  112. package/components/Page/page.css +101 -122
  113. package/components/Page/page.scss +49 -21
  114. package/components/Pagination/pagination.css +2 -110
  115. package/components/Pagination/pagination.scss +0 -6
  116. package/components/Popover/popover.css +31 -37
  117. package/components/Popover/popover.scss +32 -37
  118. package/components/Popover/themes/dark/popover.scss +3 -9
  119. package/components/Progress/progress.css +13 -10
  120. package/components/Progress/progress.scss +13 -10
  121. package/components/ProgressStepper/progress-stepper.css +5 -5
  122. package/components/ProgressStepper/progress-stepper.scss +5 -5
  123. package/components/SearchInput/search-input.css +4 -2
  124. package/components/SearchInput/search-input.scss +4 -2
  125. package/components/Select/select.css +1 -1
  126. package/components/Select/select.scss +1 -1
  127. package/components/Sidebar/sidebar.css +69 -26
  128. package/components/Sidebar/sidebar.scss +84 -27
  129. package/components/SimpleList/simple-list.css +1 -1
  130. package/components/SimpleList/simple-list.scss +2 -2
  131. package/components/Spinner/spinner.css +4 -133
  132. package/components/Spinner/spinner.scss +4 -173
  133. package/components/Table/table-grid.css +28 -28
  134. package/components/Table/table-scrollable.css +31 -26
  135. package/components/Table/table-scrollable.scss +33 -28
  136. package/components/Table/table-tree-view.css +14 -4
  137. package/components/Table/table-tree-view.scss +15 -0
  138. package/components/Table/table.css +67 -65
  139. package/components/Table/table.scss +65 -62
  140. package/components/Tabs/tabs.css +0 -4
  141. package/components/Tabs/tabs.scss +0 -7
  142. package/components/TextInputGroup/text-input-group.css +6 -4
  143. package/components/TextInputGroup/text-input-group.scss +6 -5
  144. package/components/Tile/tile.css +1 -1
  145. package/components/Tile/tile.scss +1 -1
  146. package/components/Timestamp/timestamp.css +3 -3
  147. package/components/Timestamp/timestamp.scss +3 -3
  148. package/components/Toolbar/toolbar.css +78 -43
  149. package/components/Toolbar/toolbar.scss +50 -10
  150. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  151. package/components/Tooltip/tooltip.css +7 -12
  152. package/components/Tooltip/tooltip.scss +6 -3
  153. package/components/TreeView/tree-view.css +7 -15
  154. package/components/TreeView/tree-view.scss +7 -18
  155. package/components/Wizard/wizard.css +16 -39
  156. package/components/Wizard/wizard.scss +20 -2
  157. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  158. package/docs/components/Accordion/examples/Accordion.md +12 -12
  159. package/docs/components/ActionList/examples/ActionList.md +6 -6
  160. package/docs/components/Alert/examples/Alert.md +29 -29
  161. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  162. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  163. package/docs/components/Avatar/examples/Avatar.md +11 -11
  164. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  165. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  166. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  167. package/docs/components/Badge/examples/Badge.md +5 -5
  168. package/docs/components/Banner/examples/Banner.md +8 -8
  169. package/docs/components/Brand/examples/Brand.md +9 -9
  170. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  171. package/docs/components/Button/examples/Button.md +51 -55
  172. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  173. package/docs/components/Card/examples/Card.md +676 -116
  174. package/docs/components/Check/examples/Check.md +16 -19
  175. package/docs/components/Chip/examples/Chip.md +70 -52
  176. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  177. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  178. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  179. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  180. package/docs/components/Content/examples/Content.md +37 -9
  181. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  182. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  183. package/docs/components/DataList/examples/DataList.md +239 -202
  184. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  185. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  186. package/docs/components/Divider/examples/Divider.md +10 -10
  187. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  188. package/docs/components/Drawer/examples/Drawer.md +43 -43
  189. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  190. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  191. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  192. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  193. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  194. package/docs/components/FileUpload/examples/FileUpload.md +150 -110
  195. package/docs/components/Form/examples/Form.md +152 -130
  196. package/docs/components/FormControl/examples/FormControl.md +21 -20
  197. package/docs/components/HelperText/examples/HelperText.md +24 -35
  198. package/docs/components/Hint/examples/Hint.md +7 -7
  199. package/docs/components/Icon/examples/Icon.md +11 -12
  200. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  201. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  202. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  203. package/docs/components/Label/examples/Label.md +1427 -746
  204. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  205. package/docs/components/List/examples/List.md +18 -18
  206. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  207. package/docs/components/Login/examples/Login.md +103 -181
  208. package/docs/components/Masthead/examples/masthead.md +9 -9
  209. package/docs/components/Menu/examples/Menu.md +93 -85
  210. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  211. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  212. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  213. package/docs/components/Nav/examples/Navigation.md +69 -69
  214. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  215. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  216. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  217. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  218. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  219. package/docs/components/Page/examples/Page.css +7 -1
  220. package/docs/components/Page/examples/Page.md +81 -54
  221. package/docs/components/Pagination/examples/Pagination.md +27 -27
  222. package/docs/components/Panel/examples/Panel.md +10 -10
  223. package/docs/components/Popover/examples/Popover.md +206 -149
  224. package/docs/components/Progress/examples/Progress.md +32 -61
  225. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  226. package/docs/components/Radio/examples/Radio.md +12 -11
  227. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  228. package/docs/components/Select/examples/Select.md +372 -318
  229. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  230. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  231. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  232. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  233. package/docs/components/Slider/examples/Slider.md +84 -62
  234. package/docs/components/Spinner/examples/Spinner.md +18 -67
  235. package/docs/components/Switch/examples/Switch.md +19 -19
  236. package/docs/components/TabContent/examples/TabContent.md +13 -13
  237. package/docs/components/Table/examples/Table.css +4 -0
  238. package/docs/components/Table/examples/Table.md +5212 -5750
  239. package/docs/components/Tabs/examples/Tabs.md +155 -155
  240. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  241. package/docs/components/Tile/examples/Tile.md +16 -17
  242. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  243. package/docs/components/Title/examples/Title.md +17 -17
  244. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  245. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  246. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  247. package/docs/components/TreeView/examples/TreeView.md +34 -34
  248. package/docs/components/Truncate/examples/Truncate.md +4 -5
  249. package/docs/components/Wizard/examples/Wizard.md +119 -127
  250. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  251. package/docs/demos/Alert/examples/Alert.md +118 -71
  252. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  253. package/docs/demos/Banner/examples/Banner.md +8 -9
  254. package/docs/demos/Button/examples/Button.md +10 -5
  255. package/docs/demos/Card/examples/Card.md +246 -168
  256. package/docs/demos/CardView/examples/CardView.md +57 -30
  257. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  258. package/docs/demos/Dashboard/examples/Dashboard.md +61 -38
  259. package/docs/demos/DataList/examples/DataList.md +312 -255
  260. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  261. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  262. package/docs/demos/Form/examples/BasicForms.md +220 -213
  263. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  264. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  265. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  266. package/docs/demos/Modal/examples/Modal.md +54 -66
  267. package/docs/demos/Nav/examples/Nav.md +47 -47
  268. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  269. package/docs/demos/Page/examples/Page.md +982 -51
  270. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  271. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  272. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  273. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  274. package/docs/demos/Table/examples/Table.md +3373 -1333
  275. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  276. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  277. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  278. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  279. package/docs/layouts/Flex/examples/Flex.md +98 -98
  280. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  281. package/docs/layouts/Grid/examples/Grid.md +9 -9
  282. package/docs/layouts/Level/examples/Level.md +5 -5
  283. package/docs/layouts/Split/examples/Split.md +7 -7
  284. package/docs/layouts/Stack/examples/Stack.md +6 -6
  285. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  286. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  287. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  288. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  289. package/docs/utilities/Display/examples/Display.md +12 -12
  290. package/docs/utilities/Flex/examples/Flex.md +35 -35
  291. package/docs/utilities/Float/examples/Float.md +5 -5
  292. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  293. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  294. package/docs/utilities/Text/examples/Text.md +31 -31
  295. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  296. package/layouts/Gallery/gallery.css +1 -1
  297. package/layouts/Gallery/gallery.scss +1 -1
  298. package/layouts/Grid/grid.css +7 -7
  299. package/layouts/Grid/grid.scss +2 -2
  300. package/package.json +60 -66
  301. package/patternfly-addons.css +48 -48
  302. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  303. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  304. package/patternfly-base.css +63 -114
  305. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1206 -2449
  306. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  307. package/patternfly.css +1234 -2483
  308. package/patternfly.min.css +1 -1
  309. package/patternfly.min.css.map +1 -1
  310. package/sass-utilities/functions.scss +8 -24
  311. package/sass-utilities/mixins.scss +15 -39
  312. package/sass-utilities/placeholders.scss +0 -23
  313. package/sass-utilities/scss-variables.scss +5 -6
  314. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  315. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  316. package/utilities/Spacing/spacing.scss +2 -2
  317. package/utilities/Text/text.css +48 -48
  318. package/utilities/Text/text.scss +6 -6
  319. package/utilities/Text/themes/dark/text.scss +2 -2
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  326. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  327. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  332. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  333. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  334. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  335. package/assets/pficon/pficon.woff +0 -0
  336. package/base/_shield-inheritable.scss +0 -69
  337. package/base/_shield-noninheritable.scss +0 -13
  338. package/base/patternfly-shield-inheritable.css +0 -66
  339. package/base/patternfly-shield-inheritable.scss +0 -4
  340. package/base/patternfly-shield-noninheritable.css +0 -9
  341. package/base/patternfly-shield-noninheritable.scss +0 -4
  342. package/sass-utilities/bs-variables.scss +0 -709
@@ -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>
@@ -5710,15 +5713,20 @@ cssPrefix: pf-c-menu
5710
5713
  </a>
5711
5714
  </li>
5712
5715
  <li class="pf-c-menu__list-item pf-m-loading" role="none">
5713
- <span
5716
+ <svg
5714
5717
  class="pf-c-spinner pf-m-lg"
5715
5718
  role="progressbar"
5719
+ viewBox="0 0 100 100"
5716
5720
  aria-label="Loading items"
5717
5721
  >
5718
- <span class="pf-c-spinner__clipper"></span>
5719
- <span class="pf-c-spinner__lead-ball"></span>
5720
- <span class="pf-c-spinner__tail-ball"></span>
5721
- </span>
5722
+ <circle
5723
+ class="pf-c-spinner__path"
5724
+ cx="50"
5725
+ cy="50"
5726
+ r="45"
5727
+ fill="none"
5728
+ />
5729
+ </svg>
5722
5730
  </li>
5723
5731
  </ul>
5724
5732
  </div>
@@ -6063,66 +6071,66 @@ cssPrefix: pf-c-menu
6063
6071
 
6064
6072
  ### Accessibility
6065
6073
 
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. |
6074
+ | Attribute | Applied | Outcome |
6075
+ | -- | -- | -- |
6076
+ | `role="menu"` | `.pf-c-menu__list` | Declares `.pf-c-menu__list` as a menu. |
6077
+ | `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. |
6078
+ | `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. |
6079
+ | `role="none"` | `.pf-c-menu__list-item` | Removes semantic meaning from `.pf-c-menu__list-item`. |
6080
+ | `aria-disabled="true"` | `a.pf-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
6081
+ | `tabindex="-1"` | `a.pf-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
6082
+ | `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. |
6083
+ | `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. |
6084
+ | `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
6085
 
6078
6086
  ### Usage
6079
6087
 
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. |
6088
+ | Class | Applied to | Outcome |
6089
+ | -- | -- | -- |
6090
+ | `.pf-c-menu` | `<div>` | Initiates the menu. **Required** |
6091
+ | `.pf-c-menu__header` | `<div>` | Initiates the menu header container. |
6092
+ | `.pf-c-menu__search` | `<div>` | Initiates the menu search container. Use for filtering. |
6093
+ | `.pf-c-menu__search-input` | `<div>` | Initiates the menu search input container. |
6094
+ | `.pf-c-menu__content` | `<div>` | Initiates the menu content. Use for lists. **Required** |
6095
+ | `.pf-c-menu__list` | `<ul>` | Initiates the menu list. **Required** |
6096
+ | `.pf-c-menu__list-item` | `<li>` | Initiates the menu list item. **Required** |
6097
+ | `.pf-c-menu__item` | `<button>`, `<a>`, `<div>`, `<label>` | Initiates the menu item. **Required** |
6098
+ | `.pf-c-menu__item-main` | `<span>` | Initiates the menu item main container. **Required** |
6099
+ | `.pf-c-menu__item-text` | `<span>` | Initiates the menu item text. **Required** |
6100
+ | `.pf-c-menu__item-check` | `<span>` | Initiates a menu label. |
6101
+ | `.pf-c-menu__item-description` | `<span>` | Initiates the menu item description. |
6102
+ | `.pf-c-menu__item-group` | `<section>` | Initiates the menu item group. |
6103
+ | `.pf-c-menu__item-group-title` | `<h1>` | Initiates the menu item group title. |
6104
+ | `.pf-c-menu__item-icon` | `<span>` | Initiates the menu item icon. |
6105
+ | `.pf-c-menu__item-toggle-icon` | `<span>` | Initiates the menu item toggle icon. |
6106
+ | `.pf-c-menu__item-select-icon` | `<span>` | Initiates the menu item select icon. |
6107
+ | `.pf-c-menu__item-action` | `<button>` | Initiates the menu item action. |
6108
+ | `.pf-c-menu__item-action-icon` | `<span>` | Initiates the menu item action icon. |
6109
+ | `.pf-c-menu__item-external-icon` | `<span>` | Initiates the menu item external icon. |
6110
+ | `.pf-c-menu__footer` | `<div>` | Initiates the menu footer. |
6111
+ | `.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). |
6112
+ | `.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). |
6113
+ | `.pf-m-favorite` | `.pf-c-menu__item-action` | Modifies the menu item action to handle the favorite icon. |
6114
+ | `.pf-m-favorited` | `.pf-c-menu__item-action.pf-m-favorite` | Modifies the menu item action icon to be favorited. |
6115
+ | `.pf-m-selected` | `.pf-c-menu__item` | Modifies the menu item to be selected. |
6116
+ | `.pf-m-drill-up` | `.pf-c-menu__list-item` | Flags the menu item as a drill up button. |
6117
+ | `.pf-m-flyout` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "flyout". |
6118
+ | `.pf-m-nav` | `.pf-c-menu` | Modifies the menu for nav variant. |
6119
+ | `.pf-m-top` | `.pf-c-menu` | Modifies a flyout menu to expand to the top. |
6120
+ | `.pf-m-left` | `.pf-c-menu` | Modifies a flyout menu to expand to the left. |
6121
+ | `.pf-m-plain` | `.pf-c-menu` | Modifies the menu component for use in the page instead of as a dropdown. |
6122
+ | `.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`. |
6123
+ | `.pf-m-current` | `.pf-c-menu__list-item` | Modifies a list item for current styles. |
6124
+ | `.pf-m-load` | `.pf-c-menu__list-item` | Modifies a list item for "load more" styles. |
6125
+ | `.pf-m-loading` | `.pf-c-menu__list-item` | Modifies a list item for loading styles. |
6126
+ | `.pf-m-drilldown` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "drill down". |
6127
+ | `.pf-m-current-path` | `.pf-c-menu.pf-m-drilldown .pf-c-menu__list-item` | Modifies the menu list item for current path state. |
6128
+ | `.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. |
6129
+ | `.pf-m-static` | `.pf-c-menu.pf-m-drilldown .pf-c-menu` | Modifies the menu list for drilled static state. |
6130
+ | `.pf-m-danger` | `pf-c-menu__item-text` | Modifies a list item for danger styles. |
6131
+ | `--pf-c-menu--Width: {width}` | `.pf-c-menu` | Modifies the width of the menu. The default value is `auto`. |
6132
+ | `--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. |
6133
+ | `--pf-c-menu__content--Height: {height}` | `.pf-c-menu` | Modifies the height of the drilldown menu content. The default value is `auto`. |
6134
+ | `--pf-c-menu--m-flyout__menu--top-offset` | `.pf-c-menu` | Modifies the menu to allow for an offset to the top positioning. |
6135
+ | `--pf-c-menu--m-flyout__menu--left-offset` | `.pf-c-menu` | Modifies the menu to allow for an offset to the left positioning. |
6136
+ | `--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. |
@@ -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. |