@patternfly/patternfly 6.0.0-alpha.6 → 6.0.0-alpha.61

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 (371) hide show
  1. package/README.md +13 -3
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/images/PF-Backdrop.svg +1 -0
  4. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  5. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  6. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  7. package/assets/images/PF-IconLogo-color.svg +17 -0
  8. package/assets/images/PF-IconLogo.svg +17 -0
  9. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  10. package/assets/images/pf-background.svg +22 -0
  11. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  12. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  13. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  14. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  15. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  16. package/assets/images/pf_logo_white.hbs +35 -0
  17. package/assets/images/pf_logo_white.svg +38 -0
  18. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  19. package/assets/pficon/pficon.scss +6 -129
  20. package/base/_common.scss +29 -4
  21. package/base/_globals.scss +5 -7
  22. package/base/_variables.scss +8 -6
  23. package/base/patternfly-common.css +24 -6
  24. package/base/patternfly-globals.css +5 -4
  25. package/base/patternfly-icons.css +5 -1
  26. package/base/patternfly-pf-icons.css +5 -1
  27. package/base/patternfly-variables.css +889 -787
  28. package/base/tokens/_tokens-dark.scss +322 -265
  29. package/base/tokens/_tokens-default.scss +428 -306
  30. package/base/tokens/_tokens-font.scss +41 -46
  31. package/base/tokens/_tokens-palette.scss +69 -71
  32. package/base/tokens/_workspace-overrides.scss +7 -0
  33. package/components/AboutModalBox/about-modal-box.css +80 -108
  34. package/components/AboutModalBox/about-modal-box.scss +64 -78
  35. package/components/Accordion/accordion.css +96 -175
  36. package/components/Accordion/accordion.scss +106 -193
  37. package/components/ActionList/action-list.css +2 -2
  38. package/components/ActionList/action-list.scss +2 -2
  39. package/components/Alert/alert-group.css +27 -20
  40. package/components/Alert/alert-group.scss +27 -20
  41. package/components/Alert/alert.css +74 -95
  42. package/components/Alert/alert.scss +76 -89
  43. package/components/AppLauncher/app-launcher.css +32 -23
  44. package/components/AppLauncher/app-launcher.scss +32 -23
  45. package/components/Avatar/avatar.css +10 -13
  46. package/components/Avatar/avatar.scss +10 -17
  47. package/components/BackToTop/back-to-top.css +17 -15
  48. package/components/BackToTop/back-to-top.scss +14 -13
  49. package/components/Backdrop/backdrop.css +8 -4
  50. package/components/Backdrop/backdrop.scss +7 -4
  51. package/components/BackgroundImage/background-image.css +11 -4
  52. package/components/BackgroundImage/background-image.scss +13 -4
  53. package/components/Badge/badge.css +25 -17
  54. package/components/Badge/badge.scss +27 -19
  55. package/components/Banner/banner.css +95 -69
  56. package/components/Banner/banner.scss +100 -34
  57. package/components/Breadcrumb/breadcrumb.css +28 -19
  58. package/components/Breadcrumb/breadcrumb.scss +26 -19
  59. package/components/Button/button.css +422 -359
  60. package/components/Button/button.scss +480 -487
  61. package/components/CalendarMonth/calendar-month.css +25 -15
  62. package/components/CalendarMonth/calendar-month.scss +23 -15
  63. package/components/Card/card.css +28 -17
  64. package/components/Card/card.scss +32 -17
  65. package/components/Check/check.css +25 -22
  66. package/components/Check/check.scss +26 -24
  67. package/components/Chip/chip-group.css +6 -6
  68. package/components/Chip/chip-group.scss +6 -6
  69. package/components/Chip/chip.css +16 -9
  70. package/components/Chip/chip.scss +17 -9
  71. package/components/ClipboardCopy/clipboard-copy.css +47 -41
  72. package/components/ClipboardCopy/clipboard-copy.scss +50 -34
  73. package/components/CodeBlock/code-block.css +24 -12
  74. package/components/CodeBlock/code-block.scss +24 -13
  75. package/components/CodeEditor/code-editor.css +31 -22
  76. package/components/CodeEditor/code-editor.scss +30 -21
  77. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  78. package/components/Content/content.css +40 -37
  79. package/components/Content/content.scss +40 -37
  80. package/components/ContextSelector/context-selector.css +41 -26
  81. package/components/ContextSelector/context-selector.scss +40 -25
  82. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  83. package/components/DataList/data-list-grid.css +21 -21
  84. package/components/DataList/data-list-grid.scss +3 -3
  85. package/components/DataList/data-list.css +165 -209
  86. package/components/DataList/data-list.scss +138 -185
  87. package/components/DatePicker/date-picker.css +8 -8
  88. package/components/DatePicker/date-picker.scss +8 -8
  89. package/components/DescriptionList/description-list.css +47 -39
  90. package/components/DescriptionList/description-list.scss +33 -30
  91. package/components/Divider/divider.css +97 -177
  92. package/components/Divider/divider.scss +60 -79
  93. package/components/DragDrop/drag-drop.css +26 -22
  94. package/components/DragDrop/drag-drop.scss +26 -25
  95. package/components/Drawer/drawer.css +120 -62
  96. package/components/Drawer/drawer.scss +94 -44
  97. package/components/Dropdown/dropdown.css +76 -69
  98. package/components/Dropdown/dropdown.scss +67 -62
  99. package/components/DualListSelector/dual-list-selector.css +29 -15
  100. package/components/DualListSelector/dual-list-selector.scss +30 -15
  101. package/components/EmptyState/empty-state.css +64 -38
  102. package/components/EmptyState/empty-state.scss +70 -38
  103. package/components/ExpandableSection/expandable-section.css +75 -66
  104. package/components/ExpandableSection/expandable-section.scss +82 -80
  105. package/components/FileUpload/file-upload.css +31 -43
  106. package/components/FileUpload/file-upload.scss +31 -49
  107. package/components/Form/form.css +111 -154
  108. package/components/Form/form.scss +101 -160
  109. package/components/FormControl/form-control.css +95 -111
  110. package/components/FormControl/form-control.scss +97 -92
  111. package/components/HelperText/helper-text.css +29 -35
  112. package/components/HelperText/helper-text.scss +31 -41
  113. package/components/Hint/hint.css +37 -27
  114. package/components/Hint/hint.scss +37 -30
  115. package/components/Icon/icon.css +155 -19
  116. package/components/Icon/icon.scss +188 -21
  117. package/components/InlineEdit/inline-edit.css +12 -11
  118. package/components/InlineEdit/inline-edit.scss +12 -11
  119. package/components/InputGroup/input-group.css +32 -42
  120. package/components/InputGroup/input-group.scss +31 -33
  121. package/components/JumpLinks/jump-links.css +61 -58
  122. package/components/JumpLinks/jump-links.scss +61 -60
  123. package/components/Label/label-group.css +48 -50
  124. package/components/Label/label-group.scss +48 -51
  125. package/components/Label/label.css +266 -363
  126. package/components/Label/label.scss +306 -356
  127. package/components/List/list.css +25 -25
  128. package/components/List/list.scss +26 -26
  129. package/components/LogViewer/log-viewer.css +14 -14
  130. package/components/LogViewer/log-viewer.scss +14 -14
  131. package/components/Login/login.css +104 -122
  132. package/components/Login/login.scss +92 -91
  133. package/components/Masthead/masthead.css +273 -498
  134. package/components/Masthead/masthead.scss +137 -282
  135. package/components/Menu/menu.css +82 -65
  136. package/components/Menu/menu.scss +85 -69
  137. package/components/MenuToggle/menu-toggle.css +37 -31
  138. package/components/MenuToggle/menu-toggle.scss +37 -33
  139. package/components/ModalBox/modal-box.css +76 -69
  140. package/components/ModalBox/modal-box.scss +74 -70
  141. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  142. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  143. package/components/Nav/nav.css +248 -899
  144. package/components/Nav/nav.scss +304 -1059
  145. package/components/Nav/themes/dark/nav.scss +2 -2
  146. package/components/NotificationBadge/notification-badge.css +66 -85
  147. package/components/NotificationBadge/notification-badge.scss +72 -103
  148. package/components/NotificationDrawer/notification-drawer.css +130 -128
  149. package/components/NotificationDrawer/notification-drawer.scss +130 -129
  150. package/components/NumberInput/number-input.css +10 -10
  151. package/components/NumberInput/number-input.scss +9 -14
  152. package/components/OptionsMenu/options-menu.css +43 -31
  153. package/components/OptionsMenu/options-menu.scss +43 -31
  154. package/components/OverflowMenu/overflow-menu.css +2 -2
  155. package/components/OverflowMenu/overflow-menu.scss +2 -2
  156. package/components/Page/page.css +182 -232
  157. package/components/Page/page.scss +130 -195
  158. package/components/Pagination/pagination.css +71 -121
  159. package/components/Pagination/pagination.scss +56 -127
  160. package/components/Panel/panel.css +40 -30
  161. package/components/Panel/panel.scss +42 -33
  162. package/components/Popover/popover.css +108 -87
  163. package/components/Popover/popover.scss +120 -109
  164. package/components/Progress/progress.css +40 -52
  165. package/components/Progress/progress.scss +48 -62
  166. package/components/ProgressStepper/progress-stepper.css +26 -20
  167. package/components/ProgressStepper/progress-stepper.scss +25 -19
  168. package/components/Radio/radio.css +30 -23
  169. package/components/Radio/radio.scss +31 -25
  170. package/components/Select/select.css +56 -47
  171. package/components/Select/select.scss +56 -47
  172. package/components/Sidebar/sidebar.css +31 -14
  173. package/components/Sidebar/sidebar.scss +34 -16
  174. package/components/SimpleList/simple-list.css +45 -56
  175. package/components/SimpleList/simple-list.scss +51 -55
  176. package/components/Skeleton/skeleton.css +24 -25
  177. package/components/Skeleton/skeleton.scss +21 -26
  178. package/components/SkipToContent/skip-to-content.css +9 -6
  179. package/components/SkipToContent/skip-to-content.scss +8 -6
  180. package/components/Slider/slider.css +80 -55
  181. package/components/Slider/slider.scss +96 -65
  182. package/components/Spinner/spinner.css +17 -34
  183. package/components/Spinner/spinner.scss +19 -47
  184. package/components/Switch/switch.css +49 -41
  185. package/components/Switch/switch.scss +51 -42
  186. package/components/TabContent/tab-content.css +21 -12
  187. package/components/TabContent/tab-content.scss +22 -15
  188. package/components/Table/table-grid.css +264 -203
  189. package/components/Table/table-grid.scss +61 -47
  190. package/components/Table/table-scrollable.css +4 -4
  191. package/components/Table/table-scrollable.scss +6 -4
  192. package/components/Table/table-tree-view.css +112 -105
  193. package/components/Table/table-tree-view.scss +38 -33
  194. package/components/Table/table.css +105 -89
  195. package/components/Table/table.scss +105 -89
  196. package/components/Tabs/tabs.css +76 -48
  197. package/components/Tabs/tabs.scss +74 -48
  198. package/components/TextInputGroup/text-input-group.css +15 -15
  199. package/components/TextInputGroup/text-input-group.scss +15 -15
  200. package/components/Tile/tile.css +47 -88
  201. package/components/Tile/tile.scss +45 -91
  202. package/components/Timestamp/timestamp.css +12 -9
  203. package/components/Timestamp/timestamp.scss +11 -10
  204. package/components/Title/title.css +70 -19
  205. package/components/Title/title.scss +90 -20
  206. package/components/ToggleGroup/toggle-group.css +48 -58
  207. package/components/ToggleGroup/toggle-group.scss +48 -56
  208. package/components/Toolbar/toolbar.css +57 -43
  209. package/components/Toolbar/toolbar.scss +45 -25
  210. package/components/Tooltip/tooltip.css +74 -44
  211. package/components/Tooltip/tooltip.scss +93 -77
  212. package/components/TreeView/tree-view.css +48 -27
  213. package/components/TreeView/tree-view.scss +50 -28
  214. package/components/Truncate/truncate.css +13 -0
  215. package/components/Truncate/truncate.scss +19 -3
  216. package/components/Wizard/wizard.css +57 -36
  217. package/components/Wizard/wizard.scss +57 -36
  218. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  219. package/docs/components/Accordion/examples/Accordion.md +614 -416
  220. package/docs/components/Alert/examples/Alert.md +3 -3
  221. package/docs/components/Avatar/examples/Avatar.md +5 -19
  222. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  223. package/docs/components/Badge/examples/Badge.md +21 -0
  224. package/docs/components/Banner/examples/Banner.md +48 -25
  225. package/docs/components/Brand/examples/Brand.css +12 -0
  226. package/docs/components/Brand/examples/Brand.md +51 -32
  227. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  228. package/docs/components/Button/examples/Button.css +6 -2
  229. package/docs/components/Button/examples/Button.md +1425 -87
  230. package/docs/components/Card/examples/Card.md +143 -37
  231. package/docs/components/Check/examples/Check.md +71 -58
  232. package/docs/components/Chip/examples/Chip.md +1 -1
  233. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  234. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  235. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  236. package/docs/components/Content/examples/Content.md +5 -5
  237. package/docs/components/Divider/examples/Divider.css +3 -1
  238. package/docs/components/Divider/examples/Divider.md +4 -5
  239. package/docs/components/DragDrop/examples/DragDrop.css +3 -3
  240. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  241. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  242. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  243. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  244. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  245. package/docs/components/Form/examples/Form.md +134 -89
  246. package/docs/components/Icon/examples/Icon.md +82 -11
  247. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  248. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  249. package/docs/components/Label/examples/Label.css +4 -0
  250. package/docs/components/Label/examples/Label.md +1001 -225
  251. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  252. package/docs/components/LogViewer/examples/LogViewer.md +250 -160
  253. package/docs/components/Login/examples/Login.md +10 -5
  254. package/docs/components/Masthead/examples/masthead.md +443 -65
  255. package/docs/components/Menu/examples/Menu.css +8 -0
  256. package/docs/components/Menu/examples/Menu.md +594 -543
  257. package/docs/components/MenuToggle/examples/MenuToggle.md +109 -96
  258. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  259. package/docs/components/Nav/examples/Navigation.css +3 -42
  260. package/docs/components/Nav/examples/Navigation.md +305 -353
  261. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  262. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  263. package/docs/components/Page/examples/Page.css +0 -8
  264. package/docs/components/Page/examples/Page.md +22 -21
  265. package/docs/components/Pagination/examples/Pagination.md +663 -637
  266. package/docs/components/Panel/examples/Panel.md +12 -0
  267. package/docs/components/Popover/examples/Popover.css +4 -9
  268. package/docs/components/Popover/examples/Popover.md +1 -1
  269. package/docs/components/Radio/examples/Radio.md +62 -54
  270. package/docs/components/Select/deprecated/Select.md +184 -177
  271. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  272. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  273. package/docs/components/TabContent/examples/TabContent.md +10 -10
  274. package/docs/components/Table/examples/Table.css +2 -2
  275. package/docs/components/Table/examples/Table.md +10 -10
  276. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  277. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  278. package/docs/components/Tile/examples/Tile.css +1 -1
  279. package/docs/components/Tile/examples/Tile.md +264 -144
  280. package/docs/components/Title/examples/Title.md +18 -0
  281. package/docs/components/Toolbar/examples/Toolbar.md +663 -2894
  282. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  283. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  284. package/docs/components/Truncate/examples/Truncate.css +2 -2
  285. package/docs/components/Truncate/examples/Truncate.md +2 -2
  286. package/docs/demos/AboutModal/examples/AboutModal.md +103 -30
  287. package/docs/demos/Alert/examples/Alert.md +327 -84
  288. package/docs/demos/BackToTop/examples/BackToTop.md +101 -28
  289. package/docs/demos/Banner/examples/Banner.md +209 -58
  290. package/docs/demos/Card/examples/Card.css +3 -3
  291. package/docs/demos/Card/examples/Card.md +28 -12
  292. package/docs/demos/CardView/examples/CardView.md +263 -205
  293. package/docs/demos/ContextSelector/examples/ContextSelector.md +373 -90
  294. package/docs/demos/Dashboard/examples/Dashboard.md +104 -31
  295. package/docs/demos/DataList/examples/DataList.md +995 -928
  296. package/docs/demos/DescriptionList/examples/DescriptionList.md +303 -84
  297. package/docs/demos/Drawer/examples/Drawer.md +605 -220
  298. package/docs/demos/Form/examples/BasicForms.md +133 -82
  299. package/docs/demos/JumpLinks/examples/JumpLinks.md +881 -353
  300. package/docs/demos/Masthead/examples/Masthead.md +767 -323
  301. package/docs/demos/Modal/examples/Modal.md +639 -192
  302. package/docs/demos/Nav/examples/Nav.md +685 -896
  303. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +510 -140
  304. package/docs/demos/Page/examples/Page.md +933 -264
  305. package/docs/demos/Page/examples/Penta.md +569 -501
  306. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  307. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  308. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1296 -917
  309. package/docs/demos/Skeleton/examples/Skeleton.md +108 -63
  310. package/docs/demos/Table/examples/Table.md +3832 -3390
  311. package/docs/demos/Tabs/examples/Tabs.md +636 -191
  312. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  313. package/docs/demos/Toolbar/examples/Toolbar.md +1331 -1493
  314. package/docs/demos/Wizard/examples/Wizard.md +909 -252
  315. package/docs/layouts/Flex/examples/Flex.md +16 -16
  316. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  317. package/icons/pficons.mjs +1 -0
  318. package/layouts/Flex/flex.css +115 -43
  319. package/layouts/Flex/flex.scss +20 -8
  320. package/package.json +36 -32
  321. package/patternfly-addons.css +732 -972
  322. package/patternfly-base-no-globals-theme-dark-unversioned.css +923 -799
  323. package/patternfly-base-no-globals.css +923 -799
  324. package/patternfly-base-theme-dark-unversioned.css +928 -803
  325. package/patternfly-base.css +928 -803
  326. package/patternfly-no-globals.css +6887 -7357
  327. package/patternfly-theme-dark-unversioned.css +6892 -7361
  328. package/patternfly.css +6892 -7361
  329. package/patternfly.min.css +1 -1
  330. package/patternfly.min.css.map +1 -1
  331. package/sass-utilities/functions.scss +6 -0
  332. package/sass-utilities/mixins.scss +80 -2
  333. package/sass-utilities/scss-variables.scss +8 -8
  334. package/sass-utilities/themes/dark/mixins.scss +3 -1
  335. package/utilities/Accessibility/accessibility.css +12 -12
  336. package/utilities/Spacing/spacing.css +720 -960
  337. package/utilities/Spacing/spacing.scss +4 -8
  338. package/base/themes/dark/_variables.scss +0 -102
  339. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  340. package/components/Accordion/themes/dark/accordion.scss +0 -9
  341. package/components/Alert/themes/dark/alert.scss +0 -17
  342. package/components/Badge/themes/dark/badge.scss +0 -9
  343. package/components/Banner/themes/dark/banner.scss +0 -14
  344. package/components/Button/themes/dark/button.scss +0 -51
  345. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  346. package/components/DataList/themes/dark/data-list.scss +0 -10
  347. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  348. package/components/Form/themes/dark/form.scss +0 -7
  349. package/components/FormControl/themes/dark/form-control.scss +0 -24
  350. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  351. package/components/Hint/themes/dark/hint.scss +0 -8
  352. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  353. package/components/Label/themes/dark/label.scss +0 -53
  354. package/components/Login/themes/dark/login.scss +0 -12
  355. package/components/Masthead/themes/dark/masthead.scss +0 -14
  356. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  357. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  358. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  359. package/components/Page/themes/dark/page.scss +0 -69
  360. package/components/Pagination/themes/dark/pagination.scss +0 -7
  361. package/components/Panel/themes/dark/panel.scss +0 -7
  362. package/components/Popover/themes/dark/popover.scss +0 -11
  363. package/components/Progress/themes/dark/progress.scss +0 -9
  364. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  365. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  366. package/components/Switch/themes/dark/switch.scss +0 -11
  367. package/components/Tile/themes/dark/tile.scss +0 -10
  368. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  369. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  370. package/docs/components/Avatar/examples/Avatar.css +0 -3
  371. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -214,181 +214,49 @@ In some instances, it may be necessary to adjust spacing explicitly where items
214
214
  <div class="pf-v5-c-toolbar__content-section">
215
215
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
216
216
  <div class="pf-v5-c-toolbar__item">
217
- <div class="pf-v5-c-select">
218
- <span
219
- id="toolbar-group-types-example-select-checkbox-filter1-label"
220
- hidden
221
- >Choose one</span>
222
-
223
- <button
224
- class="pf-v5-c-select__toggle"
225
- type="button"
226
- id="toolbar-group-types-example-select-checkbox-filter1-toggle"
227
- aria-haspopup="true"
228
- aria-expanded="false"
229
- aria-labelledby="toolbar-group-types-example-select-checkbox-filter1-label toolbar-group-types-example-select-checkbox-filter1-toggle"
230
- >
231
- <div class="pf-v5-c-select__toggle-wrapper">
232
- <span class="pf-v5-c-select__toggle-text">Filter 1</span>
233
- </div>
234
- <span class="pf-v5-c-select__toggle-arrow">
235
- <i class="fas fa-caret-down" aria-hidden="true"></i>
217
+ <button
218
+ class="pf-v5-c-menu-toggle"
219
+ type="button"
220
+ aria-expanded="false"
221
+ id="toolbar-group-types-example-toggle-1"
222
+ >
223
+ <span class="pf-v5-c-menu-toggle__text">Filter 1</span>
224
+ <span class="pf-v5-c-menu-toggle__controls">
225
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
226
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
236
227
  </span>
237
- </button>
238
-
239
- <ul
240
- class="pf-v5-c-select__menu"
241
- role="listbox"
242
- aria-labelledby="toolbar-group-types-example-select-checkbox-filter1-label"
243
- hidden
244
- >
245
- <li role="presentation">
246
- <button class="pf-v5-c-select__menu-item" role="option">Running</button>
247
- </li>
248
- <li role="presentation">
249
- <button
250
- class="pf-v5-c-select__menu-item pf-m-selected"
251
- role="option"
252
- aria-selected="true"
253
- >
254
- Stopped
255
- <span class="pf-v5-c-select__menu-item-icon">
256
- <i class="fas fa-check" aria-hidden="true"></i>
257
- </span>
258
- </button>
259
- </li>
260
- <li role="presentation">
261
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
262
- </li>
263
- <li role="presentation">
264
- <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
265
- </li>
266
- <li role="presentation">
267
- <button
268
- class="pf-v5-c-select__menu-item"
269
- role="option"
270
- >Needs maintenance</button>
271
- </li>
272
- </ul>
273
- </div>
228
+ </span>
229
+ </button>
274
230
  </div>
275
231
  <div class="pf-v5-c-toolbar__item">
276
- <div class="pf-v5-c-select">
277
- <span
278
- id="toolbar-group-types-example-select-checkbox-filter2-label"
279
- hidden
280
- >Choose one</span>
281
-
282
- <button
283
- class="pf-v5-c-select__toggle"
284
- type="button"
285
- id="toolbar-group-types-example-select-checkbox-filter2-toggle"
286
- aria-haspopup="true"
287
- aria-expanded="false"
288
- aria-labelledby="toolbar-group-types-example-select-checkbox-filter2-label toolbar-group-types-example-select-checkbox-filter2-toggle"
289
- >
290
- <div class="pf-v5-c-select__toggle-wrapper">
291
- <span class="pf-v5-c-select__toggle-text">Filter 2</span>
292
- </div>
293
- <span class="pf-v5-c-select__toggle-arrow">
294
- <i class="fas fa-caret-down" aria-hidden="true"></i>
232
+ <button
233
+ class="pf-v5-c-menu-toggle"
234
+ type="button"
235
+ aria-expanded="false"
236
+ id="toolbar-group-types-example-toggle-2"
237
+ >
238
+ <span class="pf-v5-c-menu-toggle__text">Filter 2</span>
239
+ <span class="pf-v5-c-menu-toggle__controls">
240
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
241
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
295
242
  </span>
296
- </button>
297
-
298
- <ul
299
- class="pf-v5-c-select__menu"
300
- role="listbox"
301
- aria-labelledby="toolbar-group-types-example-select-checkbox-filter2-label"
302
- hidden
303
- >
304
- <li role="presentation">
305
- <button class="pf-v5-c-select__menu-item" role="option">Running</button>
306
- </li>
307
- <li role="presentation">
308
- <button
309
- class="pf-v5-c-select__menu-item pf-m-selected"
310
- role="option"
311
- aria-selected="true"
312
- >
313
- Stopped
314
- <span class="pf-v5-c-select__menu-item-icon">
315
- <i class="fas fa-check" aria-hidden="true"></i>
316
- </span>
317
- </button>
318
- </li>
319
- <li role="presentation">
320
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
321
- </li>
322
- <li role="presentation">
323
- <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
324
- </li>
325
- <li role="presentation">
326
- <button
327
- class="pf-v5-c-select__menu-item"
328
- role="option"
329
- >Needs maintenance</button>
330
- </li>
331
- </ul>
332
- </div>
243
+ </span>
244
+ </button>
333
245
  </div>
334
246
  <div class="pf-v5-c-toolbar__item">
335
- <div class="pf-v5-c-select">
336
- <span
337
- id="toolbar-group-types-example-select-checkbox-filter3-label"
338
- hidden
339
- >Choose one</span>
340
-
341
- <button
342
- class="pf-v5-c-select__toggle"
343
- type="button"
344
- id="toolbar-group-types-example-select-checkbox-filter3-toggle"
345
- aria-haspopup="true"
346
- aria-expanded="false"
347
- aria-labelledby="toolbar-group-types-example-select-checkbox-filter3-label toolbar-group-types-example-select-checkbox-filter3-toggle"
348
- >
349
- <div class="pf-v5-c-select__toggle-wrapper">
350
- <span class="pf-v5-c-select__toggle-text">Filter 3</span>
351
- </div>
352
- <span class="pf-v5-c-select__toggle-arrow">
353
- <i class="fas fa-caret-down" aria-hidden="true"></i>
247
+ <button
248
+ class="pf-v5-c-menu-toggle"
249
+ type="button"
250
+ aria-expanded="false"
251
+ id="toolbar-group-types-example-toggle-3"
252
+ >
253
+ <span class="pf-v5-c-menu-toggle__text">Filter 3</span>
254
+ <span class="pf-v5-c-menu-toggle__controls">
255
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
256
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
354
257
  </span>
355
- </button>
356
-
357
- <ul
358
- class="pf-v5-c-select__menu"
359
- role="listbox"
360
- aria-labelledby="toolbar-group-types-example-select-checkbox-filter3-label"
361
- hidden
362
- >
363
- <li role="presentation">
364
- <button class="pf-v5-c-select__menu-item" role="option">Running</button>
365
- </li>
366
- <li role="presentation">
367
- <button
368
- class="pf-v5-c-select__menu-item pf-m-selected"
369
- role="option"
370
- aria-selected="true"
371
- >
372
- Stopped
373
- <span class="pf-v5-c-select__menu-item-icon">
374
- <i class="fas fa-check" aria-hidden="true"></i>
375
- </span>
376
- </button>
377
- </li>
378
- <li role="presentation">
379
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
380
- </li>
381
- <li role="presentation">
382
- <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
383
- </li>
384
- <li role="presentation">
385
- <button
386
- class="pf-v5-c-select__menu-item"
387
- role="option"
388
- >Needs maintenance</button>
389
- </li>
390
- </ul>
391
- </div>
258
+ </span>
259
+ </button>
392
260
  </div>
393
261
  </div>
394
262
  <div class="pf-v5-c-toolbar__group pf-m-icon-button-group">
@@ -454,10 +322,10 @@ In some instances, it may be necessary to adjust spacing explicitly where items
454
322
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg">
455
323
  <div class="pf-v5-c-toolbar__toggle">
456
324
  <button
457
- class="pf-v5-c-button pf-m-plain"
325
+ class="pf-v5-c-menu-toggle pf-m-plain"
458
326
  type="button"
459
- aria-label="Show filters"
460
327
  aria-expanded="false"
328
+ aria-label="Show filters"
461
329
  aria-controls="toolbar-toggle-group-example-expandable-content"
462
330
  >
463
331
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -470,72 +338,22 @@ In some instances, it may be necessary to adjust spacing explicitly where items
470
338
  role="group"
471
339
  >
472
340
  <div class="pf-v5-c-input-group__item">
473
- <div class="pf-v5-c-select" style="width: 124px">
474
- <span
475
- id="toolbar-toggle-group-example-select-name-label"
476
- hidden
477
- >Choose one</span>
478
-
479
- <button
480
- class="pf-v5-c-select__toggle"
481
- type="button"
482
- id="toolbar-toggle-group-example-select-name-toggle"
483
- aria-haspopup="true"
484
- aria-expanded="false"
485
- aria-labelledby="toolbar-toggle-group-example-select-name-label toolbar-toggle-group-example-select-name-toggle"
486
- >
487
- <div class="pf-v5-c-select__toggle-wrapper">
488
- <span class="pf-v5-c-select__toggle-icon">
489
- <i class="fas fa-filter" aria-hidden="true"></i>
490
- </span>
491
- <span class="pf-v5-c-select__toggle-text">Name</span>
492
- </div>
493
- <span class="pf-v5-c-select__toggle-arrow">
494
- <i class="fas fa-caret-down" aria-hidden="true"></i>
341
+ <button
342
+ class="pf-v5-c-menu-toggle"
343
+ type="button"
344
+ aria-expanded="false"
345
+ id="toolbar-toggle-group-example-search-filter-menu"
346
+ >
347
+ <span class="pf-v5-c-menu-toggle__icon">
348
+ <i class="fas fa-filter" aria-hidden="true"></i>
349
+ </span>
350
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
351
+ <span class="pf-v5-c-menu-toggle__controls">
352
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
353
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
495
354
  </span>
496
- </button>
497
-
498
- <ul
499
- class="pf-v5-c-select__menu"
500
- role="listbox"
501
- aria-labelledby="toolbar-toggle-group-example-select-name-label"
502
- hidden
503
- >
504
- <li role="presentation">
505
- <button
506
- class="pf-v5-c-select__menu-item"
507
- role="option"
508
- >Running</button>
509
- </li>
510
- <li role="presentation">
511
- <button
512
- class="pf-v5-c-select__menu-item pf-m-selected"
513
- role="option"
514
- aria-selected="true"
515
- >
516
- Stopped
517
- <span class="pf-v5-c-select__menu-item-icon">
518
- <i class="fas fa-check" aria-hidden="true"></i>
519
- </span>
520
- </button>
521
- </li>
522
- <li role="presentation">
523
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
524
- </li>
525
- <li role="presentation">
526
- <button
527
- class="pf-v5-c-select__menu-item"
528
- role="option"
529
- >Degraded</button>
530
- </li>
531
- <li role="presentation">
532
- <button
533
- class="pf-v5-c-select__menu-item"
534
- role="option"
535
- >Needs maintenance</button>
536
- </li>
537
- </ul>
538
- </div>
355
+ </span>
356
+ </button>
539
357
  </div>
540
358
  <div class="pf-v5-c-input-group__item pf-m-fill">
541
359
  <div class="pf-v5-c-text-input-group">
@@ -559,210 +377,34 @@ In some instances, it may be necessary to adjust spacing explicitly where items
559
377
  </div>
560
378
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
561
379
  <div class="pf-v5-c-toolbar__item">
562
- <div class="pf-v5-c-select">
563
- <span
564
- id="toolbar-toggle-group-example-select-checkbox-status-label"
565
- hidden
566
- >Choose many</span>
567
-
568
- <button
569
- class="pf-v5-c-select__toggle"
570
- type="button"
571
- id="toolbar-toggle-group-example-select-checkbox-status-toggle"
572
- aria-haspopup="true"
573
- aria-expanded="false"
574
- aria-labelledby="toolbar-toggle-group-example-select-checkbox-status-label toolbar-toggle-group-example-select-checkbox-status-toggle"
575
- >
576
- <div class="pf-v5-c-select__toggle-wrapper">
577
- <span class="pf-v5-c-select__toggle-text">Status</span>
578
- </div>
579
- <span class="pf-v5-c-select__toggle-arrow">
580
- <i class="fas fa-caret-down" aria-hidden="true"></i>
380
+ <button
381
+ class="pf-v5-c-menu-toggle"
382
+ type="button"
383
+ aria-expanded="false"
384
+ id="toolbar-toggle-group-example-menu-toggle-checkbox-status"
385
+ >
386
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
387
+ <span class="pf-v5-c-menu-toggle__controls">
388
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
389
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
581
390
  </span>
582
- </button>
583
-
584
- <div class="pf-v5-c-select__menu" hidden>
585
- <fieldset
586
- class="pf-v5-c-select__menu-fieldset"
587
- aria-label="Select input"
588
- >
589
- <label
590
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
591
- for="toolbar-toggle-group-example-select-checkbox-status-active"
592
- >
593
- <input
594
- class="pf-v5-c-check__input"
595
- type="checkbox"
596
- id="toolbar-toggle-group-example-select-checkbox-status-active"
597
- name="toolbar-toggle-group-example-select-checkbox-status-active"
598
- />
599
-
600
- <span class="pf-v5-c-check__label">Active</span>
601
- <span
602
- class="pf-v5-c-check__description"
603
- >This is a description</span>
604
- </label>
605
- <label
606
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
607
- for="toolbar-toggle-group-example-select-checkbox-status-canceled"
608
- >
609
- <input
610
- class="pf-v5-c-check__input"
611
- type="checkbox"
612
- id="toolbar-toggle-group-example-select-checkbox-status-canceled"
613
- name="toolbar-toggle-group-example-select-checkbox-status-canceled"
614
- />
615
-
616
- <span class="pf-v5-c-check__label">Canceled</span>
617
- <span
618
- class="pf-v5-c-check__description"
619
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
620
- </label>
621
- <label
622
- class="pf-v5-c-check pf-v5-c-select__menu-item"
623
- for="toolbar-toggle-group-example-select-checkbox-status-paused"
624
- >
625
- <input
626
- class="pf-v5-c-check__input"
627
- type="checkbox"
628
- id="toolbar-toggle-group-example-select-checkbox-status-paused"
629
- name="toolbar-toggle-group-example-select-checkbox-status-paused"
630
- />
631
-
632
- <span class="pf-v5-c-check__label">Paused</span>
633
- </label>
634
- <label
635
- class="pf-v5-c-check pf-v5-c-select__menu-item"
636
- for="toolbar-toggle-group-example-select-checkbox-status-warning"
637
- >
638
- <input
639
- class="pf-v5-c-check__input"
640
- type="checkbox"
641
- id="toolbar-toggle-group-example-select-checkbox-status-warning"
642
- name="toolbar-toggle-group-example-select-checkbox-status-warning"
643
- />
644
-
645
- <span class="pf-v5-c-check__label">Warning</span>
646
- </label>
647
- <label
648
- class="pf-v5-c-check pf-v5-c-select__menu-item"
649
- for="toolbar-toggle-group-example-select-checkbox-status-restarted"
650
- >
651
- <input
652
- class="pf-v5-c-check__input"
653
- type="checkbox"
654
- id="toolbar-toggle-group-example-select-checkbox-status-restarted"
655
- name="toolbar-toggle-group-example-select-checkbox-status-restarted"
656
- />
657
-
658
- <span class="pf-v5-c-check__label">Restarted</span>
659
- </label>
660
- </fieldset>
661
- </div>
662
- </div>
391
+ </span>
392
+ </button>
663
393
  </div>
664
394
  <div class="pf-v5-c-toolbar__item">
665
- <div class="pf-v5-c-select">
666
- <span
667
- id="toolbar-toggle-group-example-select-checkbox-risk-label"
668
- hidden
669
- >Choose many</span>
670
-
671
- <button
672
- class="pf-v5-c-select__toggle"
673
- type="button"
674
- id="toolbar-toggle-group-example-select-checkbox-risk-toggle"
675
- aria-haspopup="true"
676
- aria-expanded="false"
677
- aria-labelledby="toolbar-toggle-group-example-select-checkbox-risk-label toolbar-toggle-group-example-select-checkbox-risk-toggle"
678
- >
679
- <div class="pf-v5-c-select__toggle-wrapper">
680
- <span class="pf-v5-c-select__toggle-text">Risk</span>
681
- </div>
682
- <span class="pf-v5-c-select__toggle-arrow">
683
- <i class="fas fa-caret-down" aria-hidden="true"></i>
395
+ <button
396
+ class="pf-v5-c-menu-toggle"
397
+ type="button"
398
+ aria-expanded="false"
399
+ id="toolbar-toggle-group-example-menu-toggle-checkbox-risk"
400
+ >
401
+ <span class="pf-v5-c-menu-toggle__text">Risk</span>
402
+ <span class="pf-v5-c-menu-toggle__controls">
403
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
404
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
684
405
  </span>
685
- </button>
686
-
687
- <div class="pf-v5-c-select__menu" hidden>
688
- <fieldset
689
- class="pf-v5-c-select__menu-fieldset"
690
- aria-label="Select input"
691
- >
692
- <label
693
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
694
- for="toolbar-toggle-group-example-select-checkbox-risk-active"
695
- >
696
- <input
697
- class="pf-v5-c-check__input"
698
- type="checkbox"
699
- id="toolbar-toggle-group-example-select-checkbox-risk-active"
700
- name="toolbar-toggle-group-example-select-checkbox-risk-active"
701
- />
702
-
703
- <span class="pf-v5-c-check__label">Active</span>
704
- <span
705
- class="pf-v5-c-check__description"
706
- >This is a description</span>
707
- </label>
708
- <label
709
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
710
- for="toolbar-toggle-group-example-select-checkbox-risk-canceled"
711
- >
712
- <input
713
- class="pf-v5-c-check__input"
714
- type="checkbox"
715
- id="toolbar-toggle-group-example-select-checkbox-risk-canceled"
716
- name="toolbar-toggle-group-example-select-checkbox-risk-canceled"
717
- />
718
-
719
- <span class="pf-v5-c-check__label">Canceled</span>
720
- <span
721
- class="pf-v5-c-check__description"
722
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
723
- </label>
724
- <label
725
- class="pf-v5-c-check pf-v5-c-select__menu-item"
726
- for="toolbar-toggle-group-example-select-checkbox-risk-paused"
727
- >
728
- <input
729
- class="pf-v5-c-check__input"
730
- type="checkbox"
731
- id="toolbar-toggle-group-example-select-checkbox-risk-paused"
732
- name="toolbar-toggle-group-example-select-checkbox-risk-paused"
733
- />
734
-
735
- <span class="pf-v5-c-check__label">Paused</span>
736
- </label>
737
- <label
738
- class="pf-v5-c-check pf-v5-c-select__menu-item"
739
- for="toolbar-toggle-group-example-select-checkbox-risk-warning"
740
- >
741
- <input
742
- class="pf-v5-c-check__input"
743
- type="checkbox"
744
- id="toolbar-toggle-group-example-select-checkbox-risk-warning"
745
- name="toolbar-toggle-group-example-select-checkbox-risk-warning"
746
- />
747
-
748
- <span class="pf-v5-c-check__label">Warning</span>
749
- </label>
750
- <label
751
- class="pf-v5-c-check pf-v5-c-select__menu-item"
752
- for="toolbar-toggle-group-example-select-checkbox-risk-restarted"
753
- >
754
- <input
755
- class="pf-v5-c-check__input"
756
- type="checkbox"
757
- id="toolbar-toggle-group-example-select-checkbox-risk-restarted"
758
- name="toolbar-toggle-group-example-select-checkbox-risk-restarted"
759
- />
760
-
761
- <span class="pf-v5-c-check__label">Restarted</span>
762
- </label>
763
- </fieldset>
764
- </div>
765
- </div>
406
+ </span>
407
+ </button>
766
408
  </div>
767
409
  </div>
768
410
  </div>
@@ -784,12 +426,12 @@ In some instances, it may be necessary to adjust spacing explicitly where items
784
426
  <div class="pf-v5-c-toolbar__content">
785
427
  <div class="pf-v5-c-toolbar__content-section">
786
428
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
787
- <div class="pf-v5-c-toolbar__toggle pf-m-expanded">
429
+ <div class="pf-v5-c-toolbar__toggle">
788
430
  <button
789
- class="pf-v5-c-button pf-m-plain"
431
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
790
432
  type="button"
791
- aria-label="Show filters"
792
433
  aria-expanded="true"
434
+ aria-label="Show filters"
793
435
  aria-controls="toolbar-toggle-group-collapsed-example-expandable-content"
794
436
  >
795
437
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -808,72 +450,22 @@ In some instances, it may be necessary to adjust spacing explicitly where items
808
450
  role="group"
809
451
  >
810
452
  <div class="pf-v5-c-input-group__item">
811
- <div class="pf-v5-c-select" style="width: 124px">
812
- <span
813
- id="toolbar-toggle-group-collapsed-example-select-name-label"
814
- hidden
815
- >Choose one</span>
816
-
817
- <button
818
- class="pf-v5-c-select__toggle"
819
- type="button"
820
- id="toolbar-toggle-group-collapsed-example-select-name-toggle"
821
- aria-haspopup="true"
822
- aria-expanded="false"
823
- aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label toolbar-toggle-group-collapsed-example-select-name-toggle"
824
- >
825
- <div class="pf-v5-c-select__toggle-wrapper">
826
- <span class="pf-v5-c-select__toggle-icon">
827
- <i class="fas fa-filter" aria-hidden="true"></i>
828
- </span>
829
- <span class="pf-v5-c-select__toggle-text">Name</span>
830
- </div>
831
- <span class="pf-v5-c-select__toggle-arrow">
832
- <i class="fas fa-caret-down" aria-hidden="true"></i>
453
+ <button
454
+ class="pf-v5-c-menu-toggle"
455
+ type="button"
456
+ aria-expanded="false"
457
+ id="toolbar-toggle-group-collapsed-example-search-filter-menu"
458
+ >
459
+ <span class="pf-v5-c-menu-toggle__icon">
460
+ <i class="fas fa-filter" aria-hidden="true"></i>
461
+ </span>
462
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
463
+ <span class="pf-v5-c-menu-toggle__controls">
464
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
465
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
833
466
  </span>
834
- </button>
835
-
836
- <ul
837
- class="pf-v5-c-select__menu"
838
- role="listbox"
839
- aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label"
840
- hidden
841
- >
842
- <li role="presentation">
843
- <button
844
- class="pf-v5-c-select__menu-item"
845
- role="option"
846
- >Running</button>
847
- </li>
848
- <li role="presentation">
849
- <button
850
- class="pf-v5-c-select__menu-item pf-m-selected"
851
- role="option"
852
- aria-selected="true"
853
- >
854
- Stopped
855
- <span class="pf-v5-c-select__menu-item-icon">
856
- <i class="fas fa-check" aria-hidden="true"></i>
857
- </span>
858
- </button>
859
- </li>
860
- <li role="presentation">
861
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
862
- </li>
863
- <li role="presentation">
864
- <button
865
- class="pf-v5-c-select__menu-item"
866
- role="option"
867
- >Degraded</button>
868
- </li>
869
- <li role="presentation">
870
- <button
871
- class="pf-v5-c-select__menu-item"
872
- role="option"
873
- >Needs maintenance</button>
874
- </li>
875
- </ul>
876
- </div>
467
+ </span>
468
+ </button>
877
469
  </div>
878
470
  <div class="pf-v5-c-input-group__item pf-m-fill">
879
471
  <div class="pf-v5-c-text-input-group">
@@ -897,206 +489,34 @@ In some instances, it may be necessary to adjust spacing explicitly where items
897
489
  </div>
898
490
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
899
491
  <div class="pf-v5-c-toolbar__item">
900
- <div class="pf-v5-c-select">
901
- <span
902
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-label"
903
- hidden
904
- >Choose many</span>
905
-
906
- <button
907
- class="pf-v5-c-select__toggle"
908
- type="button"
909
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle"
910
- aria-haspopup="true"
911
- aria-expanded="false"
912
- aria-labelledby="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-label toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle"
913
- >
914
- <div class="pf-v5-c-select__toggle-wrapper">
915
- <span class="pf-v5-c-select__toggle-text">Status</span>
916
- </div>
917
- <span class="pf-v5-c-select__toggle-arrow">
918
- <i class="fas fa-caret-down" aria-hidden="true"></i>
492
+ <button
493
+ class="pf-v5-c-menu-toggle"
494
+ type="button"
495
+ aria-expanded="false"
496
+ id="toolbar-toggle-group-collapsed-example-menu-toggle-checkbox-status"
497
+ >
498
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
499
+ <span class="pf-v5-c-menu-toggle__controls">
500
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
501
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
919
502
  </span>
920
- </button>
921
-
922
- <div class="pf-v5-c-select__menu" hidden>
923
- <fieldset
924
- class="pf-v5-c-select__menu-fieldset"
925
- aria-label="Select input"
926
- >
927
- <label
928
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
929
- for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
930
- >
931
- <input
932
- class="pf-v5-c-check__input"
933
- type="checkbox"
934
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
935
- name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
936
- />
937
-
938
- <span class="pf-v5-c-check__label">Active</span>
939
- <span class="pf-v5-c-check__description">This is a description</span>
940
- </label>
941
- <label
942
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
943
- for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
944
- >
945
- <input
946
- class="pf-v5-c-check__input"
947
- type="checkbox"
948
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
949
- name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
950
- />
951
-
952
- <span class="pf-v5-c-check__label">Canceled</span>
953
- <span
954
- class="pf-v5-c-check__description"
955
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
956
- </label>
957
- <label
958
- class="pf-v5-c-check pf-v5-c-select__menu-item"
959
- for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
960
- >
961
- <input
962
- class="pf-v5-c-check__input"
963
- type="checkbox"
964
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
965
- name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
966
- />
967
-
968
- <span class="pf-v5-c-check__label">Paused</span>
969
- </label>
970
- <label
971
- class="pf-v5-c-check pf-v5-c-select__menu-item"
972
- for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
973
- >
974
- <input
975
- class="pf-v5-c-check__input"
976
- type="checkbox"
977
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
978
- name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
979
- />
980
-
981
- <span class="pf-v5-c-check__label">Warning</span>
982
- </label>
983
- <label
984
- class="pf-v5-c-check pf-v5-c-select__menu-item"
985
- for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
986
- >
987
- <input
988
- class="pf-v5-c-check__input"
989
- type="checkbox"
990
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
991
- name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
992
- />
993
-
994
- <span class="pf-v5-c-check__label">Restarted</span>
995
- </label>
996
- </fieldset>
997
- </div>
998
- </div>
503
+ </span>
504
+ </button>
999
505
  </div>
1000
506
  <div class="pf-v5-c-toolbar__item">
1001
- <div class="pf-v5-c-select">
1002
- <span
1003
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-label"
1004
- hidden
1005
- >Choose many</span>
1006
-
1007
- <button
1008
- class="pf-v5-c-select__toggle"
1009
- type="button"
1010
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-toggle"
1011
- aria-haspopup="true"
1012
- aria-expanded="false"
1013
- aria-labelledby="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-label toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-toggle"
1014
- >
1015
- <div class="pf-v5-c-select__toggle-wrapper">
1016
- <span class="pf-v5-c-select__toggle-text">Risk</span>
1017
- </div>
1018
- <span class="pf-v5-c-select__toggle-arrow">
1019
- <i class="fas fa-caret-down" aria-hidden="true"></i>
507
+ <button
508
+ class="pf-v5-c-menu-toggle"
509
+ type="button"
510
+ aria-expanded="false"
511
+ id="toolbar-toggle-group-collapsed-example-menu-toggle-checkbox-risk"
512
+ >
513
+ <span class="pf-v5-c-menu-toggle__text">Risk</span>
514
+ <span class="pf-v5-c-menu-toggle__controls">
515
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
516
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1020
517
  </span>
1021
- </button>
1022
-
1023
- <div class="pf-v5-c-select__menu" hidden>
1024
- <fieldset
1025
- class="pf-v5-c-select__menu-fieldset"
1026
- aria-label="Select input"
1027
- >
1028
- <label
1029
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1030
- for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
1031
- >
1032
- <input
1033
- class="pf-v5-c-check__input"
1034
- type="checkbox"
1035
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
1036
- name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
1037
- />
1038
-
1039
- <span class="pf-v5-c-check__label">Active</span>
1040
- <span class="pf-v5-c-check__description">This is a description</span>
1041
- </label>
1042
- <label
1043
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1044
- for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
1045
- >
1046
- <input
1047
- class="pf-v5-c-check__input"
1048
- type="checkbox"
1049
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
1050
- name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
1051
- />
1052
-
1053
- <span class="pf-v5-c-check__label">Canceled</span>
1054
- <span
1055
- class="pf-v5-c-check__description"
1056
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1057
- </label>
1058
- <label
1059
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1060
- for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
1061
- >
1062
- <input
1063
- class="pf-v5-c-check__input"
1064
- type="checkbox"
1065
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
1066
- name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
1067
- />
1068
-
1069
- <span class="pf-v5-c-check__label">Paused</span>
1070
- </label>
1071
- <label
1072
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1073
- for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
1074
- >
1075
- <input
1076
- class="pf-v5-c-check__input"
1077
- type="checkbox"
1078
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
1079
- name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
1080
- />
1081
-
1082
- <span class="pf-v5-c-check__label">Warning</span>
1083
- </label>
1084
- <label
1085
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1086
- for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
1087
- >
1088
- <input
1089
- class="pf-v5-c-check__input"
1090
- type="checkbox"
1091
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
1092
- name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
1093
- />
1094
-
1095
- <span class="pf-v5-c-check__label">Restarted</span>
1096
- </label>
1097
- </fieldset>
1098
- </div>
1099
- </div>
518
+ </span>
519
+ </button>
1100
520
  </div>
1101
521
  </div>
1102
522
  </div>
@@ -1114,7 +534,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1114
534
  | Attribute | Applied to | Outcome |
1115
535
  | -- | -- | -- |
1116
536
  | `hidden` | `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__toggle`, `.pf-v5-c-toolbar__expandable-content` | Indicates that the toggle group element is hidden. **Required** |
1117
- | `aria-expanded="true"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates that the expandable content is visible. **Required** |
537
+ | `aria-expanded=true` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates that the expandable content is visible. **Required** |
1118
538
  | `aria-expanded="false"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates the the expandable content is hidden. **Required** |
1119
539
  | `aria-controls="[id of expandable content]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
1120
540
  | `id="[expandable-content_id]"` | `.pf-v5-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
@@ -1123,7 +543,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1123
543
 
1124
544
  | Attribute | Applied to | Outcome |
1125
545
  | -- | -- | -- |
1126
- | `aria-haspopup="true"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | When expandable content appears above content (mobile viewport), `aria-haspopup="true"` should be applied to indicate that focus should be trapped. **Required** |
546
+ | `aria-haspopup=true` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | When expandable content appears above content (mobile viewport), `aria-haspopup=true` should be applied to indicate that focus should be trapped. **Required** |
1127
547
 
1128
548
  ### Usage
1129
549
 
@@ -1145,64 +565,45 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1145
565
  <div class="pf-v5-c-toolbar__content">
1146
566
  <div class="pf-v5-c-toolbar__content-section">
1147
567
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
1148
- <div class="pf-v5-c-dropdown">
1149
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
1150
- <label
1151
- class="pf-v5-c-dropdown__toggle-check"
1152
- for="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check"
1153
- >
1154
- <div class="pf-v5-c-check pf-m-standalone">
1155
- <input
1156
- class="pf-v5-c-check__input"
1157
- type="checkbox"
1158
- id="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check"
1159
- aria-label="Select all"
1160
- />
1161
- </div>
1162
- </label>
1163
-
1164
- <button
1165
- class="pf-v5-c-dropdown__toggle-button"
1166
- type="button"
1167
- aria-expanded="false"
1168
- id="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-button"
1169
- aria-label="Dropdown toggle"
1170
- >
1171
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1172
- </button>
1173
- </div>
1174
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1175
- <li role="none">
1176
- <button
1177
- class="pf-v5-c-dropdown__menu-item"
1178
- role="menuitem"
1179
- type="button"
1180
- >Select all</button>
1181
- </li>
1182
- <li role="none">
1183
- <button
1184
- class="pf-v5-c-dropdown__menu-item"
1185
- role="menuitem"
1186
- type="button"
1187
- >Select none</button>
1188
- </li>
1189
- <li role="none">
1190
- <button
1191
- class="pf-v5-c-dropdown__menu-item"
1192
- role="menuitem"
1193
- type="button"
1194
- >Other action</button>
1195
- </li>
1196
- </ul>
568
+ <div
569
+ class="pf-v5-c-menu-toggle pf-m-split-button"
570
+ id="toolbar-selected-filters-toggle-group-collapsed-example-check"
571
+ >
572
+ <label
573
+ class="pf-v5-c-check pf-m-standalone"
574
+ id="toolbar-selected-filters-toggle-group-collapsed-example-check-check"
575
+ for="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
576
+ >
577
+ <input
578
+ class="pf-v5-c-check__input"
579
+ type="checkbox"
580
+ id="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
581
+ name="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
582
+ aria-label="Standalone check"
583
+ />
584
+ </label>
585
+ <button
586
+ class="pf-v5-c-menu-toggle__button"
587
+ type="button"
588
+ aria-expanded="false"
589
+ id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-toggle-button"
590
+ aria-label="Menu toggle"
591
+ >
592
+ <span class="pf-v5-c-menu-toggle__controls">
593
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
594
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
595
+ </span>
596
+ </span>
597
+ </button>
1197
598
  </div>
1198
599
  </div>
1199
600
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
1200
601
  <div class="pf-v5-c-toolbar__toggle">
1201
602
  <button
1202
- class="pf-v5-c-button pf-m-plain"
603
+ class="pf-v5-c-menu-toggle pf-m-plain"
1203
604
  type="button"
1204
- aria-label="Show filters"
1205
605
  aria-expanded="false"
606
+ aria-label="Show filters"
1206
607
  aria-controls="toolbar-selected-filters-toggle-group-collapsed-example-expandable-content"
1207
608
  >
1208
609
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -1215,72 +616,22 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1215
616
  role="group"
1216
617
  >
1217
618
  <div class="pf-v5-c-input-group__item">
1218
- <div class="pf-v5-c-select" style="width: 124px">
1219
- <span
1220
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1221
- hidden
1222
- >Choose one</span>
1223
-
1224
- <button
1225
- class="pf-v5-c-select__toggle"
1226
- type="button"
1227
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-name-toggle"
1228
- aria-haspopup="true"
1229
- aria-expanded="false"
1230
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label toolbar-selected-filters-toggle-group-collapsed-example-select-name-toggle"
1231
- >
1232
- <div class="pf-v5-c-select__toggle-wrapper">
1233
- <span class="pf-v5-c-select__toggle-icon">
1234
- <i class="fas fa-filter" aria-hidden="true"></i>
1235
- </span>
1236
- <span class="pf-v5-c-select__toggle-text">Name</span>
1237
- </div>
1238
- <span class="pf-v5-c-select__toggle-arrow">
1239
- <i class="fas fa-caret-down" aria-hidden="true"></i>
619
+ <button
620
+ class="pf-v5-c-menu-toggle"
621
+ type="button"
622
+ aria-expanded="false"
623
+ id="toolbar-selected-filters-toggle-group-collapsed-example-search-filter-menu"
624
+ >
625
+ <span class="pf-v5-c-menu-toggle__icon">
626
+ <i class="fas fa-filter" aria-hidden="true"></i>
627
+ </span>
628
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
629
+ <span class="pf-v5-c-menu-toggle__controls">
630
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
631
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1240
632
  </span>
1241
- </button>
1242
-
1243
- <ul
1244
- class="pf-v5-c-select__menu"
1245
- role="listbox"
1246
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1247
- hidden
1248
- >
1249
- <li role="presentation">
1250
- <button
1251
- class="pf-v5-c-select__menu-item"
1252
- role="option"
1253
- >Running</button>
1254
- </li>
1255
- <li role="presentation">
1256
- <button
1257
- class="pf-v5-c-select__menu-item pf-m-selected"
1258
- role="option"
1259
- aria-selected="true"
1260
- >
1261
- Stopped
1262
- <span class="pf-v5-c-select__menu-item-icon">
1263
- <i class="fas fa-check" aria-hidden="true"></i>
1264
- </span>
1265
- </button>
1266
- </li>
1267
- <li role="presentation">
1268
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
1269
- </li>
1270
- <li role="presentation">
1271
- <button
1272
- class="pf-v5-c-select__menu-item"
1273
- role="option"
1274
- >Degraded</button>
1275
- </li>
1276
- <li role="presentation">
1277
- <button
1278
- class="pf-v5-c-select__menu-item"
1279
- role="option"
1280
- >Needs maintenance</button>
1281
- </li>
1282
- </ul>
1283
- </div>
633
+ </span>
634
+ </button>
1284
635
  </div>
1285
636
  <div class="pf-v5-c-input-group__item pf-m-fill">
1286
637
  <div class="pf-v5-c-text-input-group">
@@ -1304,210 +655,34 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1304
655
  </div>
1305
656
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
1306
657
  <div class="pf-v5-c-toolbar__item">
1307
- <div class="pf-v5-c-select">
1308
- <span
1309
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-label"
1310
- hidden
1311
- >Choose many</span>
1312
-
1313
- <button
1314
- class="pf-v5-c-select__toggle"
1315
- type="button"
1316
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle"
1317
- aria-haspopup="true"
1318
- aria-expanded="false"
1319
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-label toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle"
1320
- >
1321
- <div class="pf-v5-c-select__toggle-wrapper">
1322
- <span class="pf-v5-c-select__toggle-text">Status</span>
1323
- </div>
1324
- <span class="pf-v5-c-select__toggle-arrow">
1325
- <i class="fas fa-caret-down" aria-hidden="true"></i>
658
+ <button
659
+ class="pf-v5-c-menu-toggle"
660
+ type="button"
661
+ aria-expanded="false"
662
+ id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-checkbox-status"
663
+ >
664
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
665
+ <span class="pf-v5-c-menu-toggle__controls">
666
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
667
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1326
668
  </span>
1327
- </button>
1328
-
1329
- <div class="pf-v5-c-select__menu" hidden>
1330
- <fieldset
1331
- class="pf-v5-c-select__menu-fieldset"
1332
- aria-label="Select input"
1333
- >
1334
- <label
1335
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1336
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
1337
- >
1338
- <input
1339
- class="pf-v5-c-check__input"
1340
- type="checkbox"
1341
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
1342
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
1343
- />
1344
-
1345
- <span class="pf-v5-c-check__label">Active</span>
1346
- <span
1347
- class="pf-v5-c-check__description"
1348
- >This is a description</span>
1349
- </label>
1350
- <label
1351
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1352
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
1353
- >
1354
- <input
1355
- class="pf-v5-c-check__input"
1356
- type="checkbox"
1357
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
1358
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
1359
- />
1360
-
1361
- <span class="pf-v5-c-check__label">Canceled</span>
1362
- <span
1363
- class="pf-v5-c-check__description"
1364
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1365
- </label>
1366
- <label
1367
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1368
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
1369
- >
1370
- <input
1371
- class="pf-v5-c-check__input"
1372
- type="checkbox"
1373
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
1374
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
1375
- />
1376
-
1377
- <span class="pf-v5-c-check__label">Paused</span>
1378
- </label>
1379
- <label
1380
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1381
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
1382
- >
1383
- <input
1384
- class="pf-v5-c-check__input"
1385
- type="checkbox"
1386
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
1387
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
1388
- />
1389
-
1390
- <span class="pf-v5-c-check__label">Warning</span>
1391
- </label>
1392
- <label
1393
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1394
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
1395
- >
1396
- <input
1397
- class="pf-v5-c-check__input"
1398
- type="checkbox"
1399
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
1400
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
1401
- />
1402
-
1403
- <span class="pf-v5-c-check__label">Restarted</span>
1404
- </label>
1405
- </fieldset>
1406
- </div>
1407
- </div>
669
+ </span>
670
+ </button>
1408
671
  </div>
1409
672
  <div class="pf-v5-c-toolbar__item">
1410
- <div class="pf-v5-c-select">
1411
- <span
1412
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-label"
1413
- hidden
1414
- >Choose many</span>
1415
-
1416
- <button
1417
- class="pf-v5-c-select__toggle"
1418
- type="button"
1419
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-toggle"
1420
- aria-haspopup="true"
1421
- aria-expanded="false"
1422
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-label toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-toggle"
1423
- >
1424
- <div class="pf-v5-c-select__toggle-wrapper">
1425
- <span class="pf-v5-c-select__toggle-text">Risk</span>
1426
- </div>
1427
- <span class="pf-v5-c-select__toggle-arrow">
1428
- <i class="fas fa-caret-down" aria-hidden="true"></i>
673
+ <button
674
+ class="pf-v5-c-menu-toggle"
675
+ type="button"
676
+ aria-expanded="false"
677
+ id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-checkbox-risk"
678
+ >
679
+ <span class="pf-v5-c-menu-toggle__text">Risk</span>
680
+ <span class="pf-v5-c-menu-toggle__controls">
681
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
682
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1429
683
  </span>
1430
- </button>
1431
-
1432
- <div class="pf-v5-c-select__menu" hidden>
1433
- <fieldset
1434
- class="pf-v5-c-select__menu-fieldset"
1435
- aria-label="Select input"
1436
- >
1437
- <label
1438
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1439
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
1440
- >
1441
- <input
1442
- class="pf-v5-c-check__input"
1443
- type="checkbox"
1444
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
1445
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
1446
- />
1447
-
1448
- <span class="pf-v5-c-check__label">Active</span>
1449
- <span
1450
- class="pf-v5-c-check__description"
1451
- >This is a description</span>
1452
- </label>
1453
- <label
1454
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1455
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
1456
- >
1457
- <input
1458
- class="pf-v5-c-check__input"
1459
- type="checkbox"
1460
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
1461
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
1462
- />
1463
-
1464
- <span class="pf-v5-c-check__label">Canceled</span>
1465
- <span
1466
- class="pf-v5-c-check__description"
1467
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1468
- </label>
1469
- <label
1470
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1471
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
1472
- >
1473
- <input
1474
- class="pf-v5-c-check__input"
1475
- type="checkbox"
1476
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
1477
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
1478
- />
1479
-
1480
- <span class="pf-v5-c-check__label">Paused</span>
1481
- </label>
1482
- <label
1483
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1484
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
1485
- >
1486
- <input
1487
- class="pf-v5-c-check__input"
1488
- type="checkbox"
1489
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
1490
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
1491
- />
1492
-
1493
- <span class="pf-v5-c-check__label">Warning</span>
1494
- </label>
1495
- <label
1496
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1497
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
1498
- >
1499
- <input
1500
- class="pf-v5-c-check__input"
1501
- type="checkbox"
1502
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
1503
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
1504
- />
1505
-
1506
- <span class="pf-v5-c-check__label">Restarted</span>
1507
- </label>
1508
- </fieldset>
1509
- </div>
1510
- </div>
684
+ </span>
685
+ </button>
1511
686
  </div>
1512
687
  </div>
1513
688
  </div>
@@ -1747,64 +922,45 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1747
922
  <div class="pf-v5-c-toolbar__content">
1748
923
  <div class="pf-v5-c-toolbar__content-section">
1749
924
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
1750
- <div class="pf-v5-c-dropdown">
1751
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
1752
- <label
1753
- class="pf-v5-c-dropdown__toggle-check"
1754
- for="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-check"
1755
- >
1756
- <div class="pf-v5-c-check pf-m-standalone">
1757
- <input
1758
- class="pf-v5-c-check__input"
1759
- type="checkbox"
1760
- id="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-check"
1761
- aria-label="Select all"
1762
- />
1763
- </div>
1764
- </label>
1765
-
1766
- <button
1767
- class="pf-v5-c-dropdown__toggle-button"
1768
- type="button"
1769
- aria-expanded="false"
1770
- id="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-button"
1771
- aria-label="Dropdown toggle"
1772
- >
1773
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1774
- </button>
1775
- </div>
1776
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1777
- <li role="none">
1778
- <button
1779
- class="pf-v5-c-dropdown__menu-item"
1780
- role="menuitem"
1781
- type="button"
1782
- >Select all</button>
1783
- </li>
1784
- <li role="none">
1785
- <button
1786
- class="pf-v5-c-dropdown__menu-item"
1787
- role="menuitem"
1788
- type="button"
1789
- >Select none</button>
1790
- </li>
1791
- <li role="none">
1792
- <button
1793
- class="pf-v5-c-dropdown__menu-item"
1794
- role="menuitem"
1795
- type="button"
1796
- >Other action</button>
1797
- </li>
1798
- </ul>
925
+ <div
926
+ class="pf-v5-c-menu-toggle pf-m-split-button"
927
+ id="toolbar-selected-filters-toggle-group-expanded-example-check"
928
+ >
929
+ <label
930
+ class="pf-v5-c-check pf-m-standalone"
931
+ id="toolbar-selected-filters-toggle-group-expanded-example-check-check"
932
+ for="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
933
+ >
934
+ <input
935
+ class="pf-v5-c-check__input"
936
+ type="checkbox"
937
+ id="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
938
+ name="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
939
+ aria-label="Standalone check"
940
+ />
941
+ </label>
942
+ <button
943
+ class="pf-v5-c-menu-toggle__button"
944
+ type="button"
945
+ aria-expanded="false"
946
+ id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-toggle-button"
947
+ aria-label="Menu toggle"
948
+ >
949
+ <span class="pf-v5-c-menu-toggle__controls">
950
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
951
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
952
+ </span>
953
+ </span>
954
+ </button>
1799
955
  </div>
1800
956
  </div>
1801
957
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
1802
- <div class="pf-v5-c-toolbar__toggle pf-m-expanded">
958
+ <div class="pf-v5-c-toolbar__toggle">
1803
959
  <button
1804
- class="pf-v5-c-button pf-m-plain"
960
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
1805
961
  type="button"
1806
- aria-label="Show filters"
1807
962
  aria-expanded="true"
963
+ aria-label="Show filters"
1808
964
  aria-controls="toolbar-selected-filters-toggle-group-expanded-example-expandable-content"
1809
965
  >
1810
966
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -1868,72 +1024,22 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1868
1024
  role="group"
1869
1025
  >
1870
1026
  <div class="pf-v5-c-input-group__item">
1871
- <div class="pf-v5-c-select" style="width: 124px">
1872
- <span
1873
- id="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1874
- hidden
1875
- >Choose one</span>
1876
-
1877
- <button
1878
- class="pf-v5-c-select__toggle"
1879
- type="button"
1880
- id="toolbar-selected-filters-toggle-group-expanded-example-select-name-toggle"
1881
- aria-haspopup="true"
1882
- aria-expanded="false"
1883
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label toolbar-selected-filters-toggle-group-expanded-example-select-name-toggle"
1884
- >
1885
- <div class="pf-v5-c-select__toggle-wrapper">
1886
- <span class="pf-v5-c-select__toggle-icon">
1887
- <i class="fas fa-filter" aria-hidden="true"></i>
1888
- </span>
1889
- <span class="pf-v5-c-select__toggle-text">Name</span>
1890
- </div>
1891
- <span class="pf-v5-c-select__toggle-arrow">
1892
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1027
+ <button
1028
+ class="pf-v5-c-menu-toggle"
1029
+ type="button"
1030
+ aria-expanded="false"
1031
+ id="toolbar-selected-filters-toggle-group-expanded-example-search-filter-menu"
1032
+ >
1033
+ <span class="pf-v5-c-menu-toggle__icon">
1034
+ <i class="fas fa-filter" aria-hidden="true"></i>
1035
+ </span>
1036
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
1037
+ <span class="pf-v5-c-menu-toggle__controls">
1038
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1039
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1893
1040
  </span>
1894
- </button>
1895
-
1896
- <ul
1897
- class="pf-v5-c-select__menu"
1898
- role="listbox"
1899
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1900
- hidden
1901
- >
1902
- <li role="presentation">
1903
- <button
1904
- class="pf-v5-c-select__menu-item"
1905
- role="option"
1906
- >Running</button>
1907
- </li>
1908
- <li role="presentation">
1909
- <button
1910
- class="pf-v5-c-select__menu-item pf-m-selected"
1911
- role="option"
1912
- aria-selected="true"
1913
- >
1914
- Stopped
1915
- <span class="pf-v5-c-select__menu-item-icon">
1916
- <i class="fas fa-check" aria-hidden="true"></i>
1917
- </span>
1918
- </button>
1919
- </li>
1920
- <li role="presentation">
1921
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
1922
- </li>
1923
- <li role="presentation">
1924
- <button
1925
- class="pf-v5-c-select__menu-item"
1926
- role="option"
1927
- >Degraded</button>
1928
- </li>
1929
- <li role="presentation">
1930
- <button
1931
- class="pf-v5-c-select__menu-item"
1932
- role="option"
1933
- >Needs maintenance</button>
1934
- </li>
1935
- </ul>
1936
- </div>
1041
+ </span>
1042
+ </button>
1937
1043
  </div>
1938
1044
  <div class="pf-v5-c-input-group__item pf-m-fill">
1939
1045
  <div class="pf-v5-c-text-input-group">
@@ -1957,206 +1063,34 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1957
1063
  </div>
1958
1064
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
1959
1065
  <div class="pf-v5-c-toolbar__item">
1960
- <div class="pf-v5-c-select">
1961
- <span
1962
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-label"
1963
- hidden
1964
- >Choose many</span>
1965
-
1966
- <button
1967
- class="pf-v5-c-select__toggle"
1968
- type="button"
1969
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-toggle"
1970
- aria-haspopup="true"
1971
- aria-expanded="false"
1972
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-label toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-toggle"
1973
- >
1974
- <div class="pf-v5-c-select__toggle-wrapper">
1975
- <span class="pf-v5-c-select__toggle-text">Status</span>
1976
- </div>
1977
- <span class="pf-v5-c-select__toggle-arrow">
1978
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1066
+ <button
1067
+ class="pf-v5-c-menu-toggle"
1068
+ type="button"
1069
+ aria-expanded="false"
1070
+ id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-status"
1071
+ >
1072
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
1073
+ <span class="pf-v5-c-menu-toggle__controls">
1074
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1075
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1979
1076
  </span>
1980
- </button>
1981
-
1982
- <div class="pf-v5-c-select__menu" hidden>
1983
- <fieldset
1984
- class="pf-v5-c-select__menu-fieldset"
1985
- aria-label="Select input"
1986
- >
1987
- <label
1988
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1989
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active"
1990
- >
1991
- <input
1992
- class="pf-v5-c-check__input"
1993
- type="checkbox"
1994
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active"
1995
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active"
1996
- />
1997
-
1998
- <span class="pf-v5-c-check__label">Active</span>
1999
- <span class="pf-v5-c-check__description">This is a description</span>
2000
- </label>
2001
- <label
2002
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2003
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled"
2004
- >
2005
- <input
2006
- class="pf-v5-c-check__input"
2007
- type="checkbox"
2008
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled"
2009
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled"
2010
- />
2011
-
2012
- <span class="pf-v5-c-check__label">Canceled</span>
2013
- <span
2014
- class="pf-v5-c-check__description"
2015
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2016
- </label>
2017
- <label
2018
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2019
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused"
2020
- >
2021
- <input
2022
- class="pf-v5-c-check__input"
2023
- type="checkbox"
2024
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused"
2025
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused"
2026
- />
2027
-
2028
- <span class="pf-v5-c-check__label">Paused</span>
2029
- </label>
2030
- <label
2031
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2032
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning"
2033
- >
2034
- <input
2035
- class="pf-v5-c-check__input"
2036
- type="checkbox"
2037
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning"
2038
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning"
2039
- />
2040
-
2041
- <span class="pf-v5-c-check__label">Warning</span>
2042
- </label>
2043
- <label
2044
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2045
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted"
2046
- >
2047
- <input
2048
- class="pf-v5-c-check__input"
2049
- type="checkbox"
2050
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted"
2051
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted"
2052
- />
2053
-
2054
- <span class="pf-v5-c-check__label">Restarted</span>
2055
- </label>
2056
- </fieldset>
2057
- </div>
2058
- </div>
1077
+ </span>
1078
+ </button>
2059
1079
  </div>
2060
1080
  <div class="pf-v5-c-toolbar__item">
2061
- <div class="pf-v5-c-select">
2062
- <span
2063
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-label"
2064
- hidden
2065
- >Choose many</span>
2066
-
2067
- <button
2068
- class="pf-v5-c-select__toggle"
2069
- type="button"
2070
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-toggle"
2071
- aria-haspopup="true"
2072
- aria-expanded="false"
2073
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-label toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-toggle"
2074
- >
2075
- <div class="pf-v5-c-select__toggle-wrapper">
2076
- <span class="pf-v5-c-select__toggle-text">Risk</span>
2077
- </div>
2078
- <span class="pf-v5-c-select__toggle-arrow">
2079
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1081
+ <button
1082
+ class="pf-v5-c-menu-toggle"
1083
+ type="button"
1084
+ aria-expanded="false"
1085
+ id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-risk"
1086
+ >
1087
+ <span class="pf-v5-c-menu-toggle__text">Risk</span>
1088
+ <span class="pf-v5-c-menu-toggle__controls">
1089
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1090
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2080
1091
  </span>
2081
- </button>
2082
-
2083
- <div class="pf-v5-c-select__menu" hidden>
2084
- <fieldset
2085
- class="pf-v5-c-select__menu-fieldset"
2086
- aria-label="Select input"
2087
- >
2088
- <label
2089
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2090
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active"
2091
- >
2092
- <input
2093
- class="pf-v5-c-check__input"
2094
- type="checkbox"
2095
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active"
2096
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active"
2097
- />
2098
-
2099
- <span class="pf-v5-c-check__label">Active</span>
2100
- <span class="pf-v5-c-check__description">This is a description</span>
2101
- </label>
2102
- <label
2103
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2104
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled"
2105
- >
2106
- <input
2107
- class="pf-v5-c-check__input"
2108
- type="checkbox"
2109
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled"
2110
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled"
2111
- />
2112
-
2113
- <span class="pf-v5-c-check__label">Canceled</span>
2114
- <span
2115
- class="pf-v5-c-check__description"
2116
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2117
- </label>
2118
- <label
2119
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2120
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused"
2121
- >
2122
- <input
2123
- class="pf-v5-c-check__input"
2124
- type="checkbox"
2125
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused"
2126
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused"
2127
- />
2128
-
2129
- <span class="pf-v5-c-check__label">Paused</span>
2130
- </label>
2131
- <label
2132
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2133
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning"
2134
- >
2135
- <input
2136
- class="pf-v5-c-check__input"
2137
- type="checkbox"
2138
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning"
2139
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning"
2140
- />
2141
-
2142
- <span class="pf-v5-c-check__label">Warning</span>
2143
- </label>
2144
- <label
2145
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2146
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted"
2147
- >
2148
- <input
2149
- class="pf-v5-c-check__input"
2150
- type="checkbox"
2151
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted"
2152
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted"
2153
- />
2154
-
2155
- <span class="pf-v5-c-check__label">Restarted</span>
2156
- </label>
2157
- </fieldset>
2158
- </div>
2159
- </div>
1092
+ </span>
1093
+ </button>
2160
1094
  </div>
2161
1095
  </div>
2162
1096
  <div class="pf-v5-c-toolbar__group pf-m-chip-container">
@@ -2340,64 +1274,45 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2340
1274
  <div class="pf-v5-c-toolbar__content">
2341
1275
  <div class="pf-v5-c-toolbar__content-section">
2342
1276
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
2343
- <div class="pf-v5-c-dropdown">
2344
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
2345
- <label
2346
- class="pf-v5-c-dropdown__toggle-check"
2347
- for="toolbar-selected-filters-example-bulk-select-toggle-check"
2348
- >
2349
- <div class="pf-v5-c-check pf-m-standalone">
2350
- <input
2351
- class="pf-v5-c-check__input"
2352
- type="checkbox"
2353
- id="toolbar-selected-filters-example-bulk-select-toggle-check"
2354
- aria-label="Select all"
2355
- />
2356
- </div>
2357
- </label>
2358
-
2359
- <button
2360
- class="pf-v5-c-dropdown__toggle-button"
2361
- type="button"
2362
- aria-expanded="false"
2363
- id="toolbar-selected-filters-example-bulk-select-toggle-button"
2364
- aria-label="Dropdown toggle"
2365
- >
2366
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2367
- </button>
2368
- </div>
2369
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
2370
- <li role="none">
2371
- <button
2372
- class="pf-v5-c-dropdown__menu-item"
2373
- role="menuitem"
2374
- type="button"
2375
- >Select all</button>
2376
- </li>
2377
- <li role="none">
2378
- <button
2379
- class="pf-v5-c-dropdown__menu-item"
2380
- role="menuitem"
2381
- type="button"
2382
- >Select none</button>
2383
- </li>
2384
- <li role="none">
2385
- <button
2386
- class="pf-v5-c-dropdown__menu-item"
2387
- role="menuitem"
2388
- type="button"
2389
- >Other action</button>
2390
- </li>
2391
- </ul>
1277
+ <div
1278
+ class="pf-v5-c-menu-toggle pf-m-split-button"
1279
+ id="toolbar-selected-filters-example-check"
1280
+ >
1281
+ <label
1282
+ class="pf-v5-c-check pf-m-standalone"
1283
+ id="toolbar-selected-filters-example-check-check"
1284
+ for="toolbar-selected-filters-example-check-check-input"
1285
+ >
1286
+ <input
1287
+ class="pf-v5-c-check__input"
1288
+ type="checkbox"
1289
+ id="toolbar-selected-filters-example-check-check-input"
1290
+ name="toolbar-selected-filters-example-check-check-input"
1291
+ aria-label="Standalone check"
1292
+ />
1293
+ </label>
1294
+ <button
1295
+ class="pf-v5-c-menu-toggle__button"
1296
+ type="button"
1297
+ aria-expanded="false"
1298
+ id="toolbar-selected-filters-example-menu-toggle-toggle-button"
1299
+ aria-label="Menu toggle"
1300
+ >
1301
+ <span class="pf-v5-c-menu-toggle__controls">
1302
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1303
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1304
+ </span>
1305
+ </span>
1306
+ </button>
2392
1307
  </div>
2393
1308
  </div>
2394
1309
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
2395
1310
  <div class="pf-v5-c-toolbar__toggle">
2396
1311
  <button
2397
- class="pf-v5-c-button pf-m-plain"
1312
+ class="pf-v5-c-menu-toggle pf-m-plain"
2398
1313
  type="button"
2399
- aria-label="Show filters"
2400
1314
  aria-expanded="false"
1315
+ aria-label="Show filters"
2401
1316
  aria-controls="toolbar-selected-filters-example-expandable-content"
2402
1317
  >
2403
1318
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -2405,210 +1320,34 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2405
1320
  </div>
2406
1321
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
2407
1322
  <div class="pf-v5-c-toolbar__item">
2408
- <div class="pf-v5-c-select">
2409
- <span
2410
- id="toolbar-selected-filters-example-select-checkbox-status-label"
2411
- hidden
2412
- >Choose many</span>
2413
-
2414
- <button
2415
- class="pf-v5-c-select__toggle"
2416
- type="button"
2417
- id="toolbar-selected-filters-example-select-checkbox-status-toggle"
2418
- aria-haspopup="true"
2419
- aria-expanded="false"
2420
- aria-labelledby="toolbar-selected-filters-example-select-checkbox-status-label toolbar-selected-filters-example-select-checkbox-status-toggle"
2421
- >
2422
- <div class="pf-v5-c-select__toggle-wrapper">
2423
- <span class="pf-v5-c-select__toggle-text">Status</span>
2424
- </div>
2425
- <span class="pf-v5-c-select__toggle-arrow">
2426
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1323
+ <button
1324
+ class="pf-v5-c-menu-toggle"
1325
+ type="button"
1326
+ aria-expanded="false"
1327
+ id="toolbar-selected-filters-example-menu-toggle-checkbox-status"
1328
+ >
1329
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
1330
+ <span class="pf-v5-c-menu-toggle__controls">
1331
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1332
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2427
1333
  </span>
2428
- </button>
2429
-
2430
- <div class="pf-v5-c-select__menu" hidden>
2431
- <fieldset
2432
- class="pf-v5-c-select__menu-fieldset"
2433
- aria-label="Select input"
2434
- >
2435
- <label
2436
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2437
- for="toolbar-selected-filters-example-select-checkbox-status-active"
2438
- >
2439
- <input
2440
- class="pf-v5-c-check__input"
2441
- type="checkbox"
2442
- id="toolbar-selected-filters-example-select-checkbox-status-active"
2443
- name="toolbar-selected-filters-example-select-checkbox-status-active"
2444
- />
2445
-
2446
- <span class="pf-v5-c-check__label">Active</span>
2447
- <span
2448
- class="pf-v5-c-check__description"
2449
- >This is a description</span>
2450
- </label>
2451
- <label
2452
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2453
- for="toolbar-selected-filters-example-select-checkbox-status-canceled"
2454
- >
2455
- <input
2456
- class="pf-v5-c-check__input"
2457
- type="checkbox"
2458
- id="toolbar-selected-filters-example-select-checkbox-status-canceled"
2459
- name="toolbar-selected-filters-example-select-checkbox-status-canceled"
2460
- />
2461
-
2462
- <span class="pf-v5-c-check__label">Canceled</span>
2463
- <span
2464
- class="pf-v5-c-check__description"
2465
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2466
- </label>
2467
- <label
2468
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2469
- for="toolbar-selected-filters-example-select-checkbox-status-paused"
2470
- >
2471
- <input
2472
- class="pf-v5-c-check__input"
2473
- type="checkbox"
2474
- id="toolbar-selected-filters-example-select-checkbox-status-paused"
2475
- name="toolbar-selected-filters-example-select-checkbox-status-paused"
2476
- />
2477
-
2478
- <span class="pf-v5-c-check__label">Paused</span>
2479
- </label>
2480
- <label
2481
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2482
- for="toolbar-selected-filters-example-select-checkbox-status-warning"
2483
- >
2484
- <input
2485
- class="pf-v5-c-check__input"
2486
- type="checkbox"
2487
- id="toolbar-selected-filters-example-select-checkbox-status-warning"
2488
- name="toolbar-selected-filters-example-select-checkbox-status-warning"
2489
- />
2490
-
2491
- <span class="pf-v5-c-check__label">Warning</span>
2492
- </label>
2493
- <label
2494
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2495
- for="toolbar-selected-filters-example-select-checkbox-status-restarted"
2496
- >
2497
- <input
2498
- class="pf-v5-c-check__input"
2499
- type="checkbox"
2500
- id="toolbar-selected-filters-example-select-checkbox-status-restarted"
2501
- name="toolbar-selected-filters-example-select-checkbox-status-restarted"
2502
- />
2503
-
2504
- <span class="pf-v5-c-check__label">Restarted</span>
2505
- </label>
2506
- </fieldset>
2507
- </div>
2508
- </div>
1334
+ </span>
1335
+ </button>
2509
1336
  </div>
2510
1337
  <div class="pf-v5-c-toolbar__item">
2511
- <div class="pf-v5-c-select">
2512
- <span
2513
- id="toolbar-selected-filters-example-select-checkbox-risk-label"
2514
- hidden
2515
- >Choose many</span>
2516
-
2517
- <button
2518
- class="pf-v5-c-select__toggle"
2519
- type="button"
2520
- id="toolbar-selected-filters-example-select-checkbox-risk-toggle"
2521
- aria-haspopup="true"
2522
- aria-expanded="false"
2523
- aria-labelledby="toolbar-selected-filters-example-select-checkbox-risk-label toolbar-selected-filters-example-select-checkbox-risk-toggle"
2524
- >
2525
- <div class="pf-v5-c-select__toggle-wrapper">
2526
- <span class="pf-v5-c-select__toggle-text">Risk</span>
2527
- </div>
2528
- <span class="pf-v5-c-select__toggle-arrow">
2529
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1338
+ <button
1339
+ class="pf-v5-c-menu-toggle"
1340
+ type="button"
1341
+ aria-expanded="false"
1342
+ id="toolbar-selected-filters-example-menu-toggle-checkbox-risk"
1343
+ >
1344
+ <span class="pf-v5-c-menu-toggle__text">Risk</span>
1345
+ <span class="pf-v5-c-menu-toggle__controls">
1346
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1347
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2530
1348
  </span>
2531
- </button>
2532
-
2533
- <div class="pf-v5-c-select__menu" hidden>
2534
- <fieldset
2535
- class="pf-v5-c-select__menu-fieldset"
2536
- aria-label="Select input"
2537
- >
2538
- <label
2539
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2540
- for="toolbar-selected-filters-example-select-checkbox-risk-active"
2541
- >
2542
- <input
2543
- class="pf-v5-c-check__input"
2544
- type="checkbox"
2545
- id="toolbar-selected-filters-example-select-checkbox-risk-active"
2546
- name="toolbar-selected-filters-example-select-checkbox-risk-active"
2547
- />
2548
-
2549
- <span class="pf-v5-c-check__label">Active</span>
2550
- <span
2551
- class="pf-v5-c-check__description"
2552
- >This is a description</span>
2553
- </label>
2554
- <label
2555
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2556
- for="toolbar-selected-filters-example-select-checkbox-risk-canceled"
2557
- >
2558
- <input
2559
- class="pf-v5-c-check__input"
2560
- type="checkbox"
2561
- id="toolbar-selected-filters-example-select-checkbox-risk-canceled"
2562
- name="toolbar-selected-filters-example-select-checkbox-risk-canceled"
2563
- />
2564
-
2565
- <span class="pf-v5-c-check__label">Canceled</span>
2566
- <span
2567
- class="pf-v5-c-check__description"
2568
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2569
- </label>
2570
- <label
2571
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2572
- for="toolbar-selected-filters-example-select-checkbox-risk-paused"
2573
- >
2574
- <input
2575
- class="pf-v5-c-check__input"
2576
- type="checkbox"
2577
- id="toolbar-selected-filters-example-select-checkbox-risk-paused"
2578
- name="toolbar-selected-filters-example-select-checkbox-risk-paused"
2579
- />
2580
-
2581
- <span class="pf-v5-c-check__label">Paused</span>
2582
- </label>
2583
- <label
2584
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2585
- for="toolbar-selected-filters-example-select-checkbox-risk-warning"
2586
- >
2587
- <input
2588
- class="pf-v5-c-check__input"
2589
- type="checkbox"
2590
- id="toolbar-selected-filters-example-select-checkbox-risk-warning"
2591
- name="toolbar-selected-filters-example-select-checkbox-risk-warning"
2592
- />
2593
-
2594
- <span class="pf-v5-c-check__label">Warning</span>
2595
- </label>
2596
- <label
2597
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2598
- for="toolbar-selected-filters-example-select-checkbox-risk-restarted"
2599
- >
2600
- <input
2601
- class="pf-v5-c-check__input"
2602
- type="checkbox"
2603
- id="toolbar-selected-filters-example-select-checkbox-risk-restarted"
2604
- name="toolbar-selected-filters-example-select-checkbox-risk-restarted"
2605
- />
2606
-
2607
- <span class="pf-v5-c-check__label">Restarted</span>
2608
- </label>
2609
- </fieldset>
2610
- </div>
2611
- </div>
1349
+ </span>
1350
+ </button>
2612
1351
  </div>
2613
1352
  </div>
2614
1353
  </div>
@@ -2885,10 +1624,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2885
1624
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-2xl">
2886
1625
  <div class="pf-v5-c-toolbar__toggle">
2887
1626
  <button
2888
- class="pf-v5-c-button pf-m-plain"
1627
+ class="pf-v5-c-menu-toggle pf-m-plain"
2889
1628
  type="button"
2890
- aria-label="Show filters"
2891
1629
  aria-expanded="false"
1630
+ aria-label="Show filters"
2892
1631
  aria-controls="toolbar-stacked-example-expandable-content"
2893
1632
  >
2894
1633
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -2897,316 +1636,68 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2897
1636
  <div class="pf-v5-c-toolbar__group">
2898
1637
  <div
2899
1638
  class="pf-v5-c-toolbar__item pf-m-label"
2900
- id="-select-checkbox-resource-label"
1639
+ id="toolbar-stacked-example-menu-toggle-resource-label"
2901
1640
  aria-hidden="true"
2902
1641
  >Resource</div>
1642
+
2903
1643
  <div class="pf-v5-c-toolbar__item">
2904
- <div class="pf-v5-c-select">
2905
- <button
2906
- class="pf-v5-c-select__toggle"
2907
- type="button"
2908
- id="-select-checkbox-resource-toggle"
2909
- aria-haspopup="true"
2910
- aria-expanded="false"
2911
- aria-labelledby="-select-checkbox-resource-label -select-checkbox-resource-toggle"
2912
- >
2913
- <div class="pf-v5-c-select__toggle-wrapper">
2914
- <span class="pf-v5-c-select__toggle-text">Pod</span>
2915
- </div>
2916
- <span class="pf-v5-c-select__toggle-arrow">
2917
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1644
+ <button
1645
+ class="pf-v5-c-menu-toggle"
1646
+ type="button"
1647
+ aria-expanded="false"
1648
+ id="toolbar-stacked-example-menu-toggle-resource"
1649
+ >
1650
+ <span class="pf-v5-c-menu-toggle__text">Pod</span>
1651
+ <span class="pf-v5-c-menu-toggle__controls">
1652
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1653
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2918
1654
  </span>
2919
- </button>
2920
-
2921
- <div class="pf-v5-c-select__menu" hidden>
2922
- <fieldset
2923
- class="pf-v5-c-select__menu-fieldset"
2924
- aria-label="Select input"
2925
- >
2926
- <label
2927
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2928
- for="-select-checkbox-resource-active"
2929
- >
2930
- <input
2931
- class="pf-v5-c-check__input"
2932
- type="checkbox"
2933
- id="-select-checkbox-resource-active"
2934
- name="-select-checkbox-resource-active"
2935
- />
2936
-
2937
- <span class="pf-v5-c-check__label">Active</span>
2938
- <span
2939
- class="pf-v5-c-check__description"
2940
- >This is a description</span>
2941
- </label>
2942
- <label
2943
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2944
- for="-select-checkbox-resource-canceled"
2945
- >
2946
- <input
2947
- class="pf-v5-c-check__input"
2948
- type="checkbox"
2949
- id="-select-checkbox-resource-canceled"
2950
- name="-select-checkbox-resource-canceled"
2951
- />
2952
-
2953
- <span class="pf-v5-c-check__label">Canceled</span>
2954
- <span
2955
- class="pf-v5-c-check__description"
2956
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2957
- </label>
2958
- <label
2959
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2960
- for="-select-checkbox-resource-paused"
2961
- >
2962
- <input
2963
- class="pf-v5-c-check__input"
2964
- type="checkbox"
2965
- id="-select-checkbox-resource-paused"
2966
- name="-select-checkbox-resource-paused"
2967
- />
2968
-
2969
- <span class="pf-v5-c-check__label">Paused</span>
2970
- </label>
2971
- <label
2972
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2973
- for="-select-checkbox-resource-warning"
2974
- >
2975
- <input
2976
- class="pf-v5-c-check__input"
2977
- type="checkbox"
2978
- id="-select-checkbox-resource-warning"
2979
- name="-select-checkbox-resource-warning"
2980
- />
2981
-
2982
- <span class="pf-v5-c-check__label">Warning</span>
2983
- </label>
2984
- <label
2985
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2986
- for="-select-checkbox-resource-restarted"
2987
- >
2988
- <input
2989
- class="pf-v5-c-check__input"
2990
- type="checkbox"
2991
- id="-select-checkbox-resource-restarted"
2992
- name="-select-checkbox-resource-restarted"
2993
- />
2994
-
2995
- <span class="pf-v5-c-check__label">Restarted</span>
2996
- </label>
2997
- </fieldset>
2998
- </div>
2999
- </div>
1655
+ </span>
1656
+ </button>
3000
1657
  </div>
3001
1658
  </div>
3002
1659
  <div class="pf-v5-c-toolbar__group">
3003
1660
  <div
3004
1661
  class="pf-v5-c-toolbar__item pf-m-label"
3005
- id="-select-checkbox-status-label"
1662
+ id="toolbar-stacked-example-menu-toggle-status-label"
3006
1663
  aria-hidden="true"
3007
1664
  >Status</div>
3008
1665
  <div class="pf-v5-c-toolbar__item">
3009
- <div class="pf-v5-c-select">
3010
- <button
3011
- class="pf-v5-c-select__toggle"
3012
- type="button"
3013
- id="-select-checkbox-status-toggle"
3014
- aria-haspopup="true"
3015
- aria-expanded="false"
3016
- aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
3017
- >
3018
- <div class="pf-v5-c-select__toggle-wrapper">
3019
- <span class="pf-v5-c-select__toggle-text">Running</span>
3020
- </div>
3021
- <span class="pf-v5-c-select__toggle-arrow">
3022
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3023
- </span>
3024
- </button>
3025
-
3026
- <div class="pf-v5-c-select__menu" hidden>
3027
- <fieldset
3028
- class="pf-v5-c-select__menu-fieldset"
3029
- aria-label="Select input"
3030
- >
3031
- <label
3032
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3033
- for="-select-checkbox-status-active"
3034
- >
3035
- <input
3036
- class="pf-v5-c-check__input"
3037
- type="checkbox"
3038
- id="-select-checkbox-status-active"
3039
- name="-select-checkbox-status-active"
3040
- />
3041
-
3042
- <span class="pf-v5-c-check__label">Active</span>
3043
- <span
3044
- class="pf-v5-c-check__description"
3045
- >This is a description</span>
3046
- </label>
3047
- <label
3048
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3049
- for="-select-checkbox-status-canceled"
3050
- >
3051
- <input
3052
- class="pf-v5-c-check__input"
3053
- type="checkbox"
3054
- id="-select-checkbox-status-canceled"
3055
- name="-select-checkbox-status-canceled"
3056
- />
3057
-
3058
- <span class="pf-v5-c-check__label">Canceled</span>
3059
- <span
3060
- class="pf-v5-c-check__description"
3061
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3062
- </label>
3063
- <label
3064
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3065
- for="-select-checkbox-status-paused"
3066
- >
3067
- <input
3068
- class="pf-v5-c-check__input"
3069
- type="checkbox"
3070
- id="-select-checkbox-status-paused"
3071
- name="-select-checkbox-status-paused"
3072
- />
3073
-
3074
- <span class="pf-v5-c-check__label">Paused</span>
3075
- </label>
3076
- <label
3077
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3078
- for="-select-checkbox-status-warning"
3079
- >
3080
- <input
3081
- class="pf-v5-c-check__input"
3082
- type="checkbox"
3083
- id="-select-checkbox-status-warning"
3084
- name="-select-checkbox-status-warning"
3085
- />
3086
-
3087
- <span class="pf-v5-c-check__label">Warning</span>
3088
- </label>
3089
- <label
3090
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3091
- for="-select-checkbox-status-restarted"
3092
- >
3093
- <input
3094
- class="pf-v5-c-check__input"
3095
- type="checkbox"
3096
- id="-select-checkbox-status-restarted"
3097
- name="-select-checkbox-status-restarted"
3098
- />
3099
-
3100
- <span class="pf-v5-c-check__label">Restarted</span>
3101
- </label>
3102
- </fieldset>
3103
- </div>
3104
- </div>
1666
+ <button
1667
+ class="pf-v5-c-menu-toggle"
1668
+ type="button"
1669
+ aria-expanded="false"
1670
+ id="toolbar-stacked-example-menu-toggle-status"
1671
+ >
1672
+ <span class="pf-v5-c-menu-toggle__text">Running</span>
1673
+ <span class="pf-v5-c-menu-toggle__controls">
1674
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1675
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1676
+ </span>
1677
+ </span>
1678
+ </button>
3105
1679
  </div>
3106
1680
  </div>
3107
1681
  <div class="pf-v5-c-toolbar__group">
3108
1682
  <div
3109
1683
  class="pf-v5-c-toolbar__item pf-m-label"
3110
- id="-select-checkbox-type-label"
1684
+ id="toolbar-stacked-example-menu-toggle-type-label"
3111
1685
  aria-hidden="true"
3112
1686
  >Type</div>
3113
1687
  <div class="pf-v5-c-toolbar__item">
3114
- <div class="pf-v5-c-select">
3115
- <button
3116
- class="pf-v5-c-select__toggle"
3117
- type="button"
3118
- id="-select-checkbox-type-toggle"
3119
- aria-haspopup="true"
3120
- aria-expanded="false"
3121
- aria-labelledby="-select-checkbox-type-label -select-checkbox-type-toggle"
3122
- >
3123
- <div class="pf-v5-c-select__toggle-wrapper">
3124
- <span class="pf-v5-c-select__toggle-text">Any</span>
3125
- </div>
3126
- <span class="pf-v5-c-select__toggle-arrow">
3127
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1688
+ <button
1689
+ class="pf-v5-c-menu-toggle"
1690
+ type="button"
1691
+ aria-expanded="false"
1692
+ id="toolbar-stacked-example-menu-toggle-type"
1693
+ >
1694
+ <span class="pf-v5-c-menu-toggle__text">Any</span>
1695
+ <span class="pf-v5-c-menu-toggle__controls">
1696
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1697
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3128
1698
  </span>
3129
- </button>
3130
-
3131
- <div class="pf-v5-c-select__menu" hidden>
3132
- <fieldset
3133
- class="pf-v5-c-select__menu-fieldset"
3134
- aria-label="Select input"
3135
- >
3136
- <label
3137
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3138
- for="-select-checkbox-type-active"
3139
- >
3140
- <input
3141
- class="pf-v5-c-check__input"
3142
- type="checkbox"
3143
- id="-select-checkbox-type-active"
3144
- name="-select-checkbox-type-active"
3145
- />
3146
-
3147
- <span class="pf-v5-c-check__label">Active</span>
3148
- <span
3149
- class="pf-v5-c-check__description"
3150
- >This is a description</span>
3151
- </label>
3152
- <label
3153
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3154
- for="-select-checkbox-type-canceled"
3155
- >
3156
- <input
3157
- class="pf-v5-c-check__input"
3158
- type="checkbox"
3159
- id="-select-checkbox-type-canceled"
3160
- name="-select-checkbox-type-canceled"
3161
- />
3162
-
3163
- <span class="pf-v5-c-check__label">Canceled</span>
3164
- <span
3165
- class="pf-v5-c-check__description"
3166
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3167
- </label>
3168
- <label
3169
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3170
- for="-select-checkbox-type-paused"
3171
- >
3172
- <input
3173
- class="pf-v5-c-check__input"
3174
- type="checkbox"
3175
- id="-select-checkbox-type-paused"
3176
- name="-select-checkbox-type-paused"
3177
- />
3178
-
3179
- <span class="pf-v5-c-check__label">Paused</span>
3180
- </label>
3181
- <label
3182
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3183
- for="-select-checkbox-type-warning"
3184
- >
3185
- <input
3186
- class="pf-v5-c-check__input"
3187
- type="checkbox"
3188
- id="-select-checkbox-type-warning"
3189
- name="-select-checkbox-type-warning"
3190
- />
3191
-
3192
- <span class="pf-v5-c-check__label">Warning</span>
3193
- </label>
3194
- <label
3195
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3196
- for="-select-checkbox-type-restarted"
3197
- >
3198
- <input
3199
- class="pf-v5-c-check__input"
3200
- type="checkbox"
3201
- id="-select-checkbox-type-restarted"
3202
- name="-select-checkbox-type-restarted"
3203
- />
3204
-
3205
- <span class="pf-v5-c-check__label">Restarted</span>
3206
- </label>
3207
- </fieldset>
3208
- </div>
3209
- </div>
1699
+ </span>
1700
+ </button>
3210
1701
  </div>
3211
1702
  </div>
3212
1703
  </div>
@@ -3310,128 +1801,114 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3310
1801
  <div class="pf-v5-c-toolbar__content">
3311
1802
  <div class="pf-v5-c-toolbar__content-section">
3312
1803
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
3313
- <div class="pf-v5-c-dropdown">
3314
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
3315
- <label
3316
- class="pf-v5-c-dropdown__toggle-check"
3317
- for="toolbar-stacked-example-bulk-select-toggle-check"
3318
- >
3319
- <div class="pf-v5-c-check pf-m-standalone">
3320
- <input
3321
- class="pf-v5-c-check__input"
3322
- type="checkbox"
3323
- id="toolbar-stacked-example-bulk-select-toggle-check"
3324
- aria-label="Select all"
3325
- />
3326
- </div>
3327
- </label>
3328
-
3329
- <button
3330
- class="pf-v5-c-dropdown__toggle-button"
3331
- type="button"
3332
- aria-expanded="false"
3333
- id="toolbar-stacked-example-bulk-select-toggle-button"
3334
- aria-label="Dropdown toggle"
3335
- >
3336
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3337
- </button>
3338
- </div>
3339
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
3340
- <li role="none">
3341
- <button
3342
- class="pf-v5-c-dropdown__menu-item"
3343
- role="menuitem"
3344
- type="button"
3345
- >Select all</button>
3346
- </li>
3347
- <li role="none">
3348
- <button
3349
- class="pf-v5-c-dropdown__menu-item"
3350
- role="menuitem"
3351
- type="button"
3352
- >Select none</button>
3353
- </li>
3354
- <li role="none">
3355
- <button
3356
- class="pf-v5-c-dropdown__menu-item"
3357
- role="menuitem"
3358
- type="button"
3359
- >Other action</button>
3360
- </li>
3361
- </ul>
1804
+ <div
1805
+ class="pf-v5-c-menu-toggle pf-m-split-button"
1806
+ id="toolbar-stacked-example-check"
1807
+ >
1808
+ <label
1809
+ class="pf-v5-c-check pf-m-standalone"
1810
+ id="toolbar-stacked-example-check-check"
1811
+ for="toolbar-stacked-example-check-check-input"
1812
+ >
1813
+ <input
1814
+ class="pf-v5-c-check__input"
1815
+ type="checkbox"
1816
+ id="toolbar-stacked-example-check-check-input"
1817
+ name="toolbar-stacked-example-check-check-input"
1818
+ aria-label="Standalone check"
1819
+ />
1820
+ </label>
1821
+ <button
1822
+ class="pf-v5-c-menu-toggle__button"
1823
+ type="button"
1824
+ aria-expanded="false"
1825
+ id="toolbar-stacked-example-menu-toggle-toggle-button"
1826
+ aria-label="Menu toggle"
1827
+ >
1828
+ <span class="pf-v5-c-menu-toggle__controls">
1829
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1830
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1831
+ </span>
1832
+ </span>
1833
+ </button>
3362
1834
  </div>
3363
1835
  </div>
3364
1836
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
3365
1837
  <div class="pf-v5-c-pagination" aria-label="Element pagination">
3366
1838
  <div class="pf-v5-c-pagination__total-items">37 items</div>
3367
- <div class="pf-v5-c-options-menu">
3368
- <button
3369
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3370
- type="button"
3371
- id="toolbar-stacked-example-pagination-options-menu-toggle"
3372
- aria-haspopup="listbox"
3373
- aria-expanded="false"
3374
- >
3375
- <span class="pf-v5-c-options-menu__toggle-text">
3376
- <b>1 - 10</b>&nbsp;of&nbsp;
3377
- <b>36</b>
3378
- </span>
3379
- <div class="pf-v5-c-options-menu__toggle-icon">
3380
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3381
- </div>
3382
- </button>
3383
- <ul
3384
- class="pf-v5-c-options-menu__menu"
3385
- role="menu"
3386
- aria-labelledby="toolbar-stacked-example-pagination-options-menu-toggle"
3387
- hidden
3388
- >
3389
- <li role="none">
3390
- <button
3391
- class="pf-v5-c-options-menu__menu-item"
3392
- type="button"
3393
- role="menuitem"
3394
- >5 per page</button>
3395
- </li>
3396
- <li role="none">
3397
- <button
3398
- class="pf-v5-c-options-menu__menu-item"
3399
- type="button"
3400
- role="menuitem"
3401
- >
3402
- 10 per page
3403
- <div class="pf-v5-c-options-menu__menu-item-icon">
3404
- <i class="fas fa-check" aria-hidden="true"></i>
3405
- </div>
3406
- </button>
3407
- </li>
3408
- <li role="none">
3409
- <button
3410
- class="pf-v5-c-options-menu__menu-item"
3411
- type="button"
3412
- role="menuitem"
3413
- >20 per page</button>
3414
- </li>
3415
- </ul>
1839
+ <div class="pf-v5-c-pagination__page-menu">
1840
+ <div class="pf-v5-c-options-menu">
1841
+ <button
1842
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1843
+ type="button"
1844
+ id="toolbar-stacked-example-pagination-options-menu-toggle"
1845
+ aria-haspopup="listbox"
1846
+ aria-expanded="false"
1847
+ >
1848
+ <span class="pf-v5-c-options-menu__toggle-text">
1849
+ <b>1 - 10</b>&nbsp;of&nbsp;
1850
+ <b>36</b>
1851
+ </span>
1852
+ <div class="pf-v5-c-options-menu__toggle-icon">
1853
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1854
+ </div>
1855
+ </button>
1856
+ <ul
1857
+ class="pf-v5-c-options-menu__menu"
1858
+ role="menu"
1859
+ aria-labelledby="toolbar-stacked-example-pagination-options-menu-toggle"
1860
+ hidden
1861
+ >
1862
+ <li role="none">
1863
+ <button
1864
+ class="pf-v5-c-options-menu__menu-item"
1865
+ type="button"
1866
+ role="menuitem"
1867
+ >5 per page</button>
1868
+ </li>
1869
+ <li role="none">
1870
+ <button
1871
+ class="pf-v5-c-options-menu__menu-item"
1872
+ type="button"
1873
+ role="menuitem"
1874
+ >
1875
+ 10 per page
1876
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1877
+ <i class="fas fa-check" aria-hidden="true"></i>
1878
+ </div>
1879
+ </button>
1880
+ </li>
1881
+ <li role="none">
1882
+ <button
1883
+ class="pf-v5-c-options-menu__menu-item"
1884
+ type="button"
1885
+ role="menuitem"
1886
+ >20 per page</button>
1887
+ </li>
1888
+ </ul>
1889
+ </div>
3416
1890
  </div>
3417
-
3418
1891
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
3419
- <button
3420
- class="pf-v5-c-button pf-m-plain pf-m-disabled"
3421
- type="button"
3422
- aria-label="Go to first page"
3423
- aria-disabled="true"
3424
- >
3425
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
3426
- </button>
3427
- <button
3428
- class="pf-v5-c-button pf-m-plain pf-m-disabled"
3429
- type="button"
3430
- aria-label="Go to previous page"
3431
- aria-disabled="true"
3432
- >
3433
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3434
- </button>
1892
+ <div class="pf-v5-c-pagination__nav-control pf-m-first">
1893
+ <button
1894
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
1895
+ type="button"
1896
+ aria-label="Go to first page"
1897
+ aria-disabled="true"
1898
+ >
1899
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1900
+ </button>
1901
+ </div>
1902
+ <div class="pf-v5-c-pagination__nav-control pf-m-prev">
1903
+ <button
1904
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
1905
+ type="button"
1906
+ aria-label="Go to previous page"
1907
+ aria-disabled="true"
1908
+ >
1909
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1910
+ </button>
1911
+ </div>
3435
1912
 
3436
1913
  <div
3437
1914
  class="pf-v5-c-pagination__nav-page-select"
@@ -3448,20 +1925,24 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3448
1925
  </span>
3449
1926
  <span aria-hidden="true">of 4</span>
3450
1927
  </div>
3451
- <button
3452
- class="pf-v5-c-button pf-m-plain"
3453
- type="button"
3454
- aria-label="Go to next page"
3455
- >
3456
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3457
- </button>
3458
- <button
3459
- class="pf-v5-c-button pf-m-plain"
3460
- type="button"
3461
- aria-label="Go to last page"
3462
- >
3463
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
3464
- </button>
1928
+ <div class="pf-v5-c-pagination__nav-control pf-m-next">
1929
+ <button
1930
+ class="pf-v5-c-button pf-m-plain"
1931
+ type="button"
1932
+ aria-label="Go to next page"
1933
+ >
1934
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1935
+ </button>
1936
+ </div>
1937
+ <div class="pf-v5-c-pagination__nav-control pf-m-last">
1938
+ <button
1939
+ class="pf-v5-c-button pf-m-plain"
1940
+ type="button"
1941
+ aria-label="Go to last page"
1942
+ >
1943
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
1944
+ </button>
1945
+ </div>
3465
1946
  </nav>
3466
1947
  </div>
3467
1948
  </div>
@@ -3478,12 +1959,12 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3478
1959
  <div class="pf-v5-c-toolbar__content">
3479
1960
  <div class="pf-v5-c-toolbar__content-section">
3480
1961
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
3481
- <div class="pf-v5-c-toolbar__toggle pf-m-expanded">
1962
+ <div class="pf-v5-c-toolbar__toggle">
3482
1963
  <button
3483
- class="pf-v5-c-button pf-m-plain"
1964
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
3484
1965
  type="button"
3485
- aria-label="Show filters"
3486
1966
  aria-expanded="true"
1967
+ aria-label="Show filters"
3487
1968
  aria-controls="toolbar-stacked-collapsed-example-expandable-content"
3488
1969
  >
3489
1970
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -3543,438 +2024,185 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3543
2024
  <div class="pf-v5-c-toolbar__group">
3544
2025
  <div
3545
2026
  class="pf-v5-c-toolbar__item pf-m-label"
3546
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-label"
2027
+ id="toolbar-stacked-collapsed-example-menu-toggle-resource-label"
2028
+ aria-hidden="true"
3547
2029
  >Resource</div>
2030
+
3548
2031
  <div class="pf-v5-c-toolbar__item">
3549
- <div class="pf-v5-c-select">
3550
- <button
3551
- class="pf-v5-c-select__toggle"
3552
- type="button"
3553
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-toggle"
3554
- aria-haspopup="true"
3555
- aria-expanded="false"
3556
- aria-labelledby="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-label toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-toggle"
3557
- >
3558
- <div class="pf-v5-c-select__toggle-wrapper">
3559
- <span class="pf-v5-c-select__toggle-text">Pod</span>
3560
- </div>
3561
- <span class="pf-v5-c-select__toggle-arrow">
3562
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2032
+ <button
2033
+ class="pf-v5-c-menu-toggle"
2034
+ type="button"
2035
+ aria-expanded="false"
2036
+ id="toolbar-stacked-collapsed-example-menu-toggle-resource"
2037
+ >
2038
+ <span class="pf-v5-c-menu-toggle__text">Pod</span>
2039
+ <span class="pf-v5-c-menu-toggle__controls">
2040
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2041
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3563
2042
  </span>
3564
- </button>
3565
-
3566
- <div class="pf-v5-c-select__menu" hidden>
3567
- <fieldset
3568
- class="pf-v5-c-select__menu-fieldset"
3569
- aria-label="Select input"
3570
- >
3571
- <label
3572
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3573
- for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active"
3574
- >
3575
- <input
3576
- class="pf-v5-c-check__input"
3577
- type="checkbox"
3578
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active"
3579
- name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active"
3580
- />
3581
-
3582
- <span class="pf-v5-c-check__label">Active</span>
3583
- <span class="pf-v5-c-check__description">This is a description</span>
3584
- </label>
3585
- <label
3586
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3587
- for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled"
3588
- >
3589
- <input
3590
- class="pf-v5-c-check__input"
3591
- type="checkbox"
3592
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled"
3593
- name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled"
3594
- />
3595
-
3596
- <span class="pf-v5-c-check__label">Canceled</span>
3597
- <span
3598
- class="pf-v5-c-check__description"
3599
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3600
- </label>
3601
- <label
3602
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3603
- for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused"
3604
- >
3605
- <input
3606
- class="pf-v5-c-check__input"
3607
- type="checkbox"
3608
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused"
3609
- name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused"
3610
- />
3611
-
3612
- <span class="pf-v5-c-check__label">Paused</span>
3613
- </label>
3614
- <label
3615
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3616
- for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning"
3617
- >
3618
- <input
3619
- class="pf-v5-c-check__input"
3620
- type="checkbox"
3621
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning"
3622
- name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning"
3623
- />
3624
-
3625
- <span class="pf-v5-c-check__label">Warning</span>
3626
- </label>
3627
- <label
3628
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3629
- for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted"
3630
- >
3631
- <input
3632
- class="pf-v5-c-check__input"
3633
- type="checkbox"
3634
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted"
3635
- name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted"
3636
- />
3637
-
3638
- <span class="pf-v5-c-check__label">Restarted</span>
3639
- </label>
3640
- </fieldset>
3641
- </div>
3642
- </div>
2043
+ </span>
2044
+ </button>
3643
2045
  </div>
3644
2046
  </div>
3645
2047
  <div class="pf-v5-c-toolbar__group">
3646
2048
  <div
3647
2049
  class="pf-v5-c-toolbar__item pf-m-label"
3648
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-label"
2050
+ id="-menu-toggle-status-label"
2051
+ aria-hidden="true"
3649
2052
  >Status</div>
3650
2053
  <div class="pf-v5-c-toolbar__item">
3651
- <div class="pf-v5-c-select">
3652
- <button
3653
- class="pf-v5-c-select__toggle"
3654
- type="button"
3655
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-toggle"
3656
- aria-haspopup="true"
3657
- aria-expanded="false"
3658
- aria-labelledby="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-label toolbar-stacked-collapsed-example-select-checkbox-status-expanded-toggle"
3659
- >
3660
- <div class="pf-v5-c-select__toggle-wrapper">
3661
- <span class="pf-v5-c-select__toggle-text">Running</span>
3662
- </div>
3663
- <span class="pf-v5-c-select__toggle-arrow">
3664
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2054
+ <button
2055
+ class="pf-v5-c-menu-toggle"
2056
+ type="button"
2057
+ aria-expanded="false"
2058
+ id="-menu-toggle-status"
2059
+ >
2060
+ <span class="pf-v5-c-menu-toggle__text">Running</span>
2061
+ <span class="pf-v5-c-menu-toggle__controls">
2062
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2063
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3665
2064
  </span>
3666
- </button>
3667
-
3668
- <div class="pf-v5-c-select__menu" hidden>
3669
- <fieldset
3670
- class="pf-v5-c-select__menu-fieldset"
3671
- aria-label="Select input"
3672
- >
3673
- <label
3674
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3675
- for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active"
3676
- >
3677
- <input
3678
- class="pf-v5-c-check__input"
3679
- type="checkbox"
3680
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active"
3681
- name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active"
3682
- />
3683
-
3684
- <span class="pf-v5-c-check__label">Active</span>
3685
- <span class="pf-v5-c-check__description">This is a description</span>
3686
- </label>
3687
- <label
3688
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3689
- for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled"
3690
- >
3691
- <input
3692
- class="pf-v5-c-check__input"
3693
- type="checkbox"
3694
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled"
3695
- name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled"
3696
- />
3697
-
3698
- <span class="pf-v5-c-check__label">Canceled</span>
3699
- <span
3700
- class="pf-v5-c-check__description"
3701
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3702
- </label>
3703
- <label
3704
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3705
- for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused"
3706
- >
3707
- <input
3708
- class="pf-v5-c-check__input"
3709
- type="checkbox"
3710
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused"
3711
- name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused"
3712
- />
3713
-
3714
- <span class="pf-v5-c-check__label">Paused</span>
3715
- </label>
3716
- <label
3717
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3718
- for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning"
3719
- >
3720
- <input
3721
- class="pf-v5-c-check__input"
3722
- type="checkbox"
3723
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning"
3724
- name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning"
3725
- />
3726
-
3727
- <span class="pf-v5-c-check__label">Warning</span>
3728
- </label>
3729
- <label
3730
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3731
- for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted"
3732
- >
3733
- <input
3734
- class="pf-v5-c-check__input"
3735
- type="checkbox"
3736
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted"
3737
- name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted"
3738
- />
3739
-
3740
- <span class="pf-v5-c-check__label">Restarted</span>
3741
- </label>
3742
- </fieldset>
3743
- </div>
3744
- </div>
3745
- </div>
3746
- </div>
3747
- <div class="pf-v5-c-toolbar__group">
3748
- <div
3749
- class="pf-v5-c-toolbar__item pf-m-label"
3750
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-label"
3751
- >Type</div>
3752
- <div class="pf-v5-c-toolbar__item">
3753
- <div class="pf-v5-c-select">
3754
- <button
3755
- class="pf-v5-c-select__toggle"
3756
- type="button"
3757
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-toggle"
3758
- aria-haspopup="true"
3759
- aria-expanded="false"
3760
- aria-labelledby="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-label toolbar-stacked-collapsed-example-select-checkbox-type-expanded-toggle"
3761
- >
3762
- <div class="pf-v5-c-select__toggle-wrapper">
3763
- <span class="pf-v5-c-select__toggle-text">Any</span>
3764
- </div>
3765
- <span class="pf-v5-c-select__toggle-arrow">
3766
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3767
- </span>
3768
- </button>
3769
-
3770
- <div class="pf-v5-c-select__menu" hidden>
3771
- <fieldset
3772
- class="pf-v5-c-select__menu-fieldset"
3773
- aria-label="Select input"
3774
- >
3775
- <label
3776
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3777
- for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active"
3778
- >
3779
- <input
3780
- class="pf-v5-c-check__input"
3781
- type="checkbox"
3782
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active"
3783
- name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active"
3784
- />
3785
-
3786
- <span class="pf-v5-c-check__label">Active</span>
3787
- <span class="pf-v5-c-check__description">This is a description</span>
3788
- </label>
3789
- <label
3790
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3791
- for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled"
3792
- >
3793
- <input
3794
- class="pf-v5-c-check__input"
3795
- type="checkbox"
3796
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled"
3797
- name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled"
3798
- />
3799
-
3800
- <span class="pf-v5-c-check__label">Canceled</span>
3801
- <span
3802
- class="pf-v5-c-check__description"
3803
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3804
- </label>
3805
- <label
3806
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3807
- for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused"
3808
- >
3809
- <input
3810
- class="pf-v5-c-check__input"
3811
- type="checkbox"
3812
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused"
3813
- name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused"
3814
- />
3815
-
3816
- <span class="pf-v5-c-check__label">Paused</span>
3817
- </label>
3818
- <label
3819
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3820
- for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning"
3821
- >
3822
- <input
3823
- class="pf-v5-c-check__input"
3824
- type="checkbox"
3825
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning"
3826
- name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning"
3827
- />
3828
-
3829
- <span class="pf-v5-c-check__label">Warning</span>
3830
- </label>
3831
- <label
3832
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3833
- for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted"
3834
- >
3835
- <input
3836
- class="pf-v5-c-check__input"
3837
- type="checkbox"
3838
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted"
3839
- name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted"
3840
- />
3841
-
3842
- <span class="pf-v5-c-check__label">Restarted</span>
3843
- </label>
3844
- </fieldset>
3845
- </div>
3846
- </div>
3847
- </div>
3848
- </div>
3849
- </div>
3850
- </div>
3851
- <hr class="pf-v5-c-divider" />
2065
+ </span>
2066
+ </button>
2067
+ </div>
2068
+ </div>
2069
+ <div class="pf-v5-c-toolbar__group">
2070
+ <div
2071
+ class="pf-v5-c-toolbar__item pf-m-label"
2072
+ id="-menu-toggle-type-label"
2073
+ aria-hidden="true"
2074
+ >Type</div>
2075
+ <div class="pf-v5-c-toolbar__item">
2076
+ <button
2077
+ class="pf-v5-c-menu-toggle"
2078
+ type="button"
2079
+ aria-expanded="false"
2080
+ id="-menu-toggle-type"
2081
+ >
2082
+ <span class="pf-v5-c-menu-toggle__text">Any</span>
2083
+ <span class="pf-v5-c-menu-toggle__controls">
2084
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2085
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2086
+ </span>
2087
+ </span>
2088
+ </button>
2089
+ </div>
2090
+ </div>
2091
+ </div>
2092
+ </div>
2093
+ <hr class="pf-v5-c-divider" />
3852
2094
 
3853
2095
  <div class="pf-v5-c-toolbar__content">
3854
2096
  <div class="pf-v5-c-toolbar__content-section">
3855
2097
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
3856
- <div class="pf-v5-c-dropdown">
3857
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
3858
- <label
3859
- class="pf-v5-c-dropdown__toggle-check"
3860
- for="toolbar-stacked-collapsed-example-bulk-select-toggle-check"
3861
- >
3862
- <div class="pf-v5-c-check pf-m-standalone">
3863
- <input
3864
- class="pf-v5-c-check__input"
3865
- type="checkbox"
3866
- id="toolbar-stacked-collapsed-example-bulk-select-toggle-check"
3867
- aria-label="Select all"
3868
- />
3869
- </div>
3870
- </label>
3871
-
3872
- <button
3873
- class="pf-v5-c-dropdown__toggle-button"
3874
- type="button"
3875
- aria-expanded="false"
3876
- id="toolbar-stacked-collapsed-example-bulk-select-toggle-button"
3877
- aria-label="Dropdown toggle"
3878
- >
3879
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3880
- </button>
3881
- </div>
3882
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
3883
- <li role="none">
3884
- <button
3885
- class="pf-v5-c-dropdown__menu-item"
3886
- role="menuitem"
3887
- type="button"
3888
- >Select all</button>
3889
- </li>
3890
- <li role="none">
3891
- <button
3892
- class="pf-v5-c-dropdown__menu-item"
3893
- role="menuitem"
3894
- type="button"
3895
- >Select none</button>
3896
- </li>
3897
- <li role="none">
3898
- <button
3899
- class="pf-v5-c-dropdown__menu-item"
3900
- role="menuitem"
3901
- type="button"
3902
- >Other action</button>
3903
- </li>
3904
- </ul>
2098
+ <div
2099
+ class="pf-v5-c-menu-toggle pf-m-split-button"
2100
+ id="toolbar-stacked-collapsed-example-check"
2101
+ >
2102
+ <label
2103
+ class="pf-v5-c-check pf-m-standalone"
2104
+ id="toolbar-stacked-collapsed-example-check-check"
2105
+ for="toolbar-stacked-collapsed-example-check-check-input"
2106
+ >
2107
+ <input
2108
+ class="pf-v5-c-check__input"
2109
+ type="checkbox"
2110
+ id="toolbar-stacked-collapsed-example-check-check-input"
2111
+ name="toolbar-stacked-collapsed-example-check-check-input"
2112
+ aria-label="Standalone check"
2113
+ />
2114
+ </label>
2115
+ <button
2116
+ class="pf-v5-c-menu-toggle__button"
2117
+ type="button"
2118
+ aria-expanded="false"
2119
+ id="toolbar-stacked-collapsed-example-menu-toggle-toggle-button"
2120
+ aria-label="Menu toggle"
2121
+ >
2122
+ <span class="pf-v5-c-menu-toggle__controls">
2123
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2124
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2125
+ </span>
2126
+ </span>
2127
+ </button>
3905
2128
  </div>
3906
2129
  </div>
3907
2130
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
3908
2131
  <div class="pf-v5-c-pagination" aria-label="Element pagination">
3909
2132
  <div class="pf-v5-c-pagination__total-items">37 items</div>
3910
- <div class="pf-v5-c-options-menu">
3911
- <button
3912
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3913
- type="button"
3914
- id="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
3915
- aria-haspopup="listbox"
3916
- aria-expanded="false"
3917
- >
3918
- <span class="pf-v5-c-options-menu__toggle-text">
3919
- <b>1 - 10</b>&nbsp;of&nbsp;
3920
- <b>36</b>
3921
- </span>
3922
- <div class="pf-v5-c-options-menu__toggle-icon">
3923
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3924
- </div>
3925
- </button>
3926
- <ul
3927
- class="pf-v5-c-options-menu__menu"
3928
- role="menu"
3929
- aria-labelledby="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
3930
- hidden
3931
- >
3932
- <li role="none">
3933
- <button
3934
- class="pf-v5-c-options-menu__menu-item"
3935
- type="button"
3936
- role="menuitem"
3937
- >5 per page</button>
3938
- </li>
3939
- <li role="none">
3940
- <button
3941
- class="pf-v5-c-options-menu__menu-item"
3942
- type="button"
3943
- role="menuitem"
3944
- >
3945
- 10 per page
3946
- <div class="pf-v5-c-options-menu__menu-item-icon">
3947
- <i class="fas fa-check" aria-hidden="true"></i>
3948
- </div>
3949
- </button>
3950
- </li>
3951
- <li role="none">
3952
- <button
3953
- class="pf-v5-c-options-menu__menu-item"
3954
- type="button"
3955
- role="menuitem"
3956
- >20 per page</button>
3957
- </li>
3958
- </ul>
2133
+ <div class="pf-v5-c-pagination__page-menu">
2134
+ <div class="pf-v5-c-options-menu">
2135
+ <button
2136
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2137
+ type="button"
2138
+ id="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
2139
+ aria-haspopup="listbox"
2140
+ aria-expanded="false"
2141
+ >
2142
+ <span class="pf-v5-c-options-menu__toggle-text">
2143
+ <b>1 - 10</b>&nbsp;of&nbsp;
2144
+ <b>36</b>
2145
+ </span>
2146
+ <div class="pf-v5-c-options-menu__toggle-icon">
2147
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2148
+ </div>
2149
+ </button>
2150
+ <ul
2151
+ class="pf-v5-c-options-menu__menu"
2152
+ role="menu"
2153
+ aria-labelledby="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
2154
+ hidden
2155
+ >
2156
+ <li role="none">
2157
+ <button
2158
+ class="pf-v5-c-options-menu__menu-item"
2159
+ type="button"
2160
+ role="menuitem"
2161
+ >5 per page</button>
2162
+ </li>
2163
+ <li role="none">
2164
+ <button
2165
+ class="pf-v5-c-options-menu__menu-item"
2166
+ type="button"
2167
+ role="menuitem"
2168
+ >
2169
+ 10 per page
2170
+ <div class="pf-v5-c-options-menu__menu-item-icon">
2171
+ <i class="fas fa-check" aria-hidden="true"></i>
2172
+ </div>
2173
+ </button>
2174
+ </li>
2175
+ <li role="none">
2176
+ <button
2177
+ class="pf-v5-c-options-menu__menu-item"
2178
+ type="button"
2179
+ role="menuitem"
2180
+ >20 per page</button>
2181
+ </li>
2182
+ </ul>
2183
+ </div>
3959
2184
  </div>
3960
-
3961
2185
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
3962
- <button
3963
- class="pf-v5-c-button pf-m-plain pf-m-disabled"
3964
- type="button"
3965
- aria-label="Go to first page"
3966
- aria-disabled="true"
3967
- >
3968
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
3969
- </button>
3970
- <button
3971
- class="pf-v5-c-button pf-m-plain pf-m-disabled"
3972
- type="button"
3973
- aria-label="Go to previous page"
3974
- aria-disabled="true"
3975
- >
3976
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3977
- </button>
2186
+ <div class="pf-v5-c-pagination__nav-control pf-m-first">
2187
+ <button
2188
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
2189
+ type="button"
2190
+ aria-label="Go to first page"
2191
+ aria-disabled="true"
2192
+ >
2193
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
2194
+ </button>
2195
+ </div>
2196
+ <div class="pf-v5-c-pagination__nav-control pf-m-prev">
2197
+ <button
2198
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
2199
+ type="button"
2200
+ aria-label="Go to previous page"
2201
+ aria-disabled="true"
2202
+ >
2203
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2204
+ </button>
2205
+ </div>
3978
2206
 
3979
2207
  <div
3980
2208
  class="pf-v5-c-pagination__nav-page-select"
@@ -3991,489 +2219,28 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3991
2219
  </span>
3992
2220
  <span aria-hidden="true">of 4</span>
3993
2221
  </div>
3994
- <button
3995
- class="pf-v5-c-button pf-m-plain"
3996
- type="button"
3997
- aria-label="Go to next page"
3998
- >
3999
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4000
- </button>
4001
- <button
4002
- class="pf-v5-c-button pf-m-plain"
4003
- type="button"
4004
- aria-label="Go to last page"
4005
- >
4006
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
4007
- </button>
4008
- </nav>
4009
- </div>
4010
- </div>
4011
- </div>
4012
- </div>
4013
- </div>
4014
-
4015
- ```
4016
-
4017
- ### Expanded elements
4018
-
4019
- ```html
4020
- <div class="pf-v5-c-toolbar" id="toolbar-expanded-elements-example">
4021
- <div class="pf-v5-c-toolbar__content">
4022
- <div class="pf-v5-c-toolbar__content-section">
4023
- <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
4024
- <div class="pf-v5-c-dropdown">
4025
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
4026
- <label
4027
- class="pf-v5-c-dropdown__toggle-check"
4028
- for="toolbar-expanded-elements-example-bulk-select-toggle-check"
4029
- >
4030
- <div class="pf-v5-c-check pf-m-standalone">
4031
- <input
4032
- class="pf-v5-c-check__input"
4033
- type="checkbox"
4034
- id="toolbar-expanded-elements-example-bulk-select-toggle-check"
4035
- aria-label="Select all"
4036
- />
4037
- </div>
4038
- </label>
4039
-
4040
- <button
4041
- class="pf-v5-c-dropdown__toggle-button"
4042
- type="button"
4043
- aria-expanded="false"
4044
- id="toolbar-expanded-elements-example-bulk-select-toggle-button"
4045
- aria-label="Dropdown toggle"
4046
- >
4047
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4048
- </button>
4049
- </div>
4050
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
4051
- <li role="none">
4052
- <button
4053
- class="pf-v5-c-dropdown__menu-item"
4054
- role="menuitem"
4055
- type="button"
4056
- >Select all</button>
4057
- </li>
4058
- <li role="none">
4059
- <button
4060
- class="pf-v5-c-dropdown__menu-item"
4061
- role="menuitem"
4062
- type="button"
4063
- >Select none</button>
4064
- </li>
4065
- <li role="none">
4066
- <button
4067
- class="pf-v5-c-dropdown__menu-item"
4068
- role="menuitem"
4069
- type="button"
4070
- >Other action</button>
4071
- </li>
4072
- </ul>
4073
- </div>
4074
- </div>
4075
- <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl">
4076
- <div class="pf-v5-c-toolbar__toggle">
4077
- <button
4078
- class="pf-v5-c-button pf-m-plain"
4079
- type="button"
4080
- aria-label="Show filters"
4081
- aria-expanded="false"
4082
- aria-controls="toolbar-expanded-elements-example-expandable-content"
4083
- >
4084
- <i class="fas fa-filter" aria-hidden="true"></i>
4085
- </button>
4086
- </div>
4087
- <div class="pf-v5-c-toolbar__item pf-m-search-filter">
4088
- <div
4089
- class="pf-v5-c-input-group"
4090
- aria-label="search filter"
4091
- role="group"
4092
- >
4093
- <div class="pf-v5-c-input-group__item">
4094
- <div class="pf-v5-c-select" style="width: 124px">
4095
- <span
4096
- id="toolbar-expanded-elements-example-select-name-label"
4097
- hidden
4098
- >Choose one</span>
4099
-
4100
- <button
4101
- class="pf-v5-c-select__toggle"
4102
- type="button"
4103
- id="toolbar-expanded-elements-example-select-name-toggle"
4104
- aria-haspopup="true"
4105
- aria-expanded="false"
4106
- aria-labelledby="toolbar-expanded-elements-example-select-name-label toolbar-expanded-elements-example-select-name-toggle"
4107
- >
4108
- <div class="pf-v5-c-select__toggle-wrapper">
4109
- <span class="pf-v5-c-select__toggle-icon">
4110
- <i class="fas fa-filter" aria-hidden="true"></i>
4111
- </span>
4112
- <span class="pf-v5-c-select__toggle-text">Name</span>
4113
- </div>
4114
- <span class="pf-v5-c-select__toggle-arrow">
4115
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4116
- </span>
4117
- </button>
4118
-
4119
- <ul
4120
- class="pf-v5-c-select__menu"
4121
- role="listbox"
4122
- aria-labelledby="toolbar-expanded-elements-example-select-name-label"
4123
- hidden
4124
- >
4125
- <li role="presentation">
4126
- <button
4127
- class="pf-v5-c-select__menu-item"
4128
- role="option"
4129
- >Running</button>
4130
- </li>
4131
- <li role="presentation">
4132
- <button
4133
- class="pf-v5-c-select__menu-item pf-m-selected"
4134
- role="option"
4135
- aria-selected="true"
4136
- >
4137
- Stopped
4138
- <span class="pf-v5-c-select__menu-item-icon">
4139
- <i class="fas fa-check" aria-hidden="true"></i>
4140
- </span>
4141
- </button>
4142
- </li>
4143
- <li role="presentation">
4144
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
4145
- </li>
4146
- <li role="presentation">
4147
- <button
4148
- class="pf-v5-c-select__menu-item"
4149
- role="option"
4150
- >Degraded</button>
4151
- </li>
4152
- <li role="presentation">
4153
- <button
4154
- class="pf-v5-c-select__menu-item"
4155
- role="option"
4156
- >Needs maintenance</button>
4157
- </li>
4158
- </ul>
4159
- </div>
4160
- </div>
4161
- <div class="pf-v5-c-input-group__item pf-m-fill">
4162
- <div class="pf-v5-c-text-input-group">
4163
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
4164
- <span class="pf-v5-c-text-input-group__text">
4165
- <span class="pf-v5-c-text-input-group__icon">
4166
- <i class="fas fa-fw fa-search"></i>
4167
- </span>
4168
- <input
4169
- class="pf-v5-c-text-input-group__text-input"
4170
- type="text"
4171
- placeholder="Filter by name"
4172
- value
4173
- aria-label="Search input"
4174
- />
4175
- </span>
4176
- </div>
4177
- </div>
4178
- </div>
4179
- </div>
4180
- </div>
4181
- <div class="pf-v5-c-toolbar__group pf-m-filter-group">
4182
- <div class="pf-v5-c-toolbar__item">
4183
- <div class="pf-v5-c-select pf-m-expanded">
4184
- <span
4185
- id="toolbar-expanded-elements-example-select-checkbox-status-label"
4186
- hidden
4187
- >Choose many</span>
4188
-
2222
+ <div class="pf-v5-c-pagination__nav-control pf-m-next">
4189
2223
  <button
4190
- class="pf-v5-c-select__toggle"
2224
+ class="pf-v5-c-button pf-m-plain"
4191
2225
  type="button"
4192
- id="toolbar-expanded-elements-example-select-checkbox-status-toggle"
4193
- aria-haspopup="true"
4194
- aria-expanded="true"
4195
- aria-labelledby="toolbar-expanded-elements-example-select-checkbox-status-label toolbar-expanded-elements-example-select-checkbox-status-toggle"
2226
+ aria-label="Go to next page"
4196
2227
  >
4197
- <div class="pf-v5-c-select__toggle-wrapper">
4198
- <span class="pf-v5-c-select__toggle-text">Status</span>
4199
- </div>
4200
- <span class="pf-v5-c-select__toggle-arrow">
4201
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4202
- </span>
2228
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4203
2229
  </button>
4204
-
4205
- <div class="pf-v5-c-select__menu">
4206
- <fieldset
4207
- class="pf-v5-c-select__menu-fieldset"
4208
- aria-label="Select input"
4209
- >
4210
- <label
4211
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4212
- for="toolbar-expanded-elements-example-select-checkbox-status-active"
4213
- >
4214
- <input
4215
- class="pf-v5-c-check__input"
4216
- type="checkbox"
4217
- id="toolbar-expanded-elements-example-select-checkbox-status-active"
4218
- name="toolbar-expanded-elements-example-select-checkbox-status-active"
4219
- />
4220
-
4221
- <span class="pf-v5-c-check__label">Active</span>
4222
- </label>
4223
- <label
4224
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4225
- for="toolbar-expanded-elements-example-select-checkbox-status-canceled"
4226
- >
4227
- <input
4228
- class="pf-v5-c-check__input"
4229
- type="checkbox"
4230
- id="toolbar-expanded-elements-example-select-checkbox-status-canceled"
4231
- name="toolbar-expanded-elements-example-select-checkbox-status-canceled"
4232
- checked
4233
- />
4234
-
4235
- <span class="pf-v5-c-check__label">Canceled</span>
4236
- </label>
4237
- <label
4238
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4239
- for="toolbar-expanded-elements-example-select-checkbox-status-paused"
4240
- >
4241
- <input
4242
- class="pf-v5-c-check__input"
4243
- type="checkbox"
4244
- id="toolbar-expanded-elements-example-select-checkbox-status-paused"
4245
- name="toolbar-expanded-elements-example-select-checkbox-status-paused"
4246
- checked
4247
- />
4248
-
4249
- <span class="pf-v5-c-check__label">Paused</span>
4250
- </label>
4251
- <label
4252
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4253
- for="toolbar-expanded-elements-example-select-checkbox-status-warning"
4254
- >
4255
- <input
4256
- class="pf-v5-c-check__input"
4257
- type="checkbox"
4258
- id="toolbar-expanded-elements-example-select-checkbox-status-warning"
4259
- name="toolbar-expanded-elements-example-select-checkbox-status-warning"
4260
- />
4261
-
4262
- <span class="pf-v5-c-check__label">Warning</span>
4263
- </label>
4264
- <label
4265
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4266
- for="toolbar-expanded-elements-example-select-checkbox-status-restarted"
4267
- >
4268
- <input
4269
- class="pf-v5-c-check__input"
4270
- type="checkbox"
4271
- id="toolbar-expanded-elements-example-select-checkbox-status-restarted"
4272
- name="toolbar-expanded-elements-example-select-checkbox-status-restarted"
4273
- checked
4274
- />
4275
-
4276
- <span class="pf-v5-c-check__label">Restarted</span>
4277
- </label>
4278
- </fieldset>
4279
- </div>
4280
2230
  </div>
4281
- </div>
4282
- <div class="pf-v5-c-toolbar__item">
4283
- <div class="pf-v5-c-select pf-m-expanded">
4284
- <span
4285
- id="toolbar-expanded-elements-example-select-checkbox-risk-label"
4286
- hidden
4287
- >Choose many</span>
4288
-
2231
+ <div class="pf-v5-c-pagination__nav-control pf-m-last">
4289
2232
  <button
4290
- class="pf-v5-c-select__toggle"
2233
+ class="pf-v5-c-button pf-m-plain"
4291
2234
  type="button"
4292
- id="toolbar-expanded-elements-example-select-checkbox-risk-toggle"
4293
- aria-haspopup="true"
4294
- aria-expanded="true"
4295
- aria-labelledby="toolbar-expanded-elements-example-select-checkbox-risk-label toolbar-expanded-elements-example-select-checkbox-risk-toggle"
2235
+ aria-label="Go to last page"
4296
2236
  >
4297
- <div class="pf-v5-c-select__toggle-wrapper">
4298
- <span class="pf-v5-c-select__toggle-text">Risk</span>
4299
- </div>
4300
- <span class="pf-v5-c-select__toggle-arrow">
4301
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4302
- </span>
2237
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
4303
2238
  </button>
4304
-
4305
- <div class="pf-v5-c-select__menu">
4306
- <fieldset
4307
- class="pf-v5-c-select__menu-fieldset"
4308
- aria-label="Select input"
4309
- >
4310
- <label
4311
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4312
- for="toolbar-expanded-elements-example-select-checkbox-risk-active"
4313
- >
4314
- <input
4315
- class="pf-v5-c-check__input"
4316
- type="checkbox"
4317
- id="toolbar-expanded-elements-example-select-checkbox-risk-active"
4318
- name="toolbar-expanded-elements-example-select-checkbox-risk-active"
4319
- />
4320
-
4321
- <span class="pf-v5-c-check__label">Active</span>
4322
- </label>
4323
- <label
4324
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4325
- for="toolbar-expanded-elements-example-select-checkbox-risk-canceled"
4326
- >
4327
- <input
4328
- class="pf-v5-c-check__input"
4329
- type="checkbox"
4330
- id="toolbar-expanded-elements-example-select-checkbox-risk-canceled"
4331
- name="toolbar-expanded-elements-example-select-checkbox-risk-canceled"
4332
- checked
4333
- />
4334
-
4335
- <span class="pf-v5-c-check__label">Canceled</span>
4336
- </label>
4337
- <label
4338
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4339
- for="toolbar-expanded-elements-example-select-checkbox-risk-paused"
4340
- >
4341
- <input
4342
- class="pf-v5-c-check__input"
4343
- type="checkbox"
4344
- id="toolbar-expanded-elements-example-select-checkbox-risk-paused"
4345
- name="toolbar-expanded-elements-example-select-checkbox-risk-paused"
4346
- checked
4347
- />
4348
-
4349
- <span class="pf-v5-c-check__label">Paused</span>
4350
- </label>
4351
- <label
4352
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4353
- for="toolbar-expanded-elements-example-select-checkbox-risk-warning"
4354
- >
4355
- <input
4356
- class="pf-v5-c-check__input"
4357
- type="checkbox"
4358
- id="toolbar-expanded-elements-example-select-checkbox-risk-warning"
4359
- name="toolbar-expanded-elements-example-select-checkbox-risk-warning"
4360
- />
4361
-
4362
- <span class="pf-v5-c-check__label">Warning</span>
4363
- </label>
4364
- <label
4365
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4366
- for="toolbar-expanded-elements-example-select-checkbox-risk-restarted"
4367
- >
4368
- <input
4369
- class="pf-v5-c-check__input"
4370
- type="checkbox"
4371
- id="toolbar-expanded-elements-example-select-checkbox-risk-restarted"
4372
- name="toolbar-expanded-elements-example-select-checkbox-risk-restarted"
4373
- checked
4374
- />
4375
-
4376
- <span class="pf-v5-c-check__label">Restarted</span>
4377
- </label>
4378
- </fieldset>
4379
- </div>
4380
- </div>
4381
- </div>
4382
- </div>
4383
- </div>
4384
- <div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
4385
- <div
4386
- class="pf-v5-c-overflow-menu"
4387
- id="toolbar-expanded-elements-example-icon-button-overflow-menu"
4388
- >
4389
- <div class="pf-v5-c-overflow-menu__content">
4390
- <div class="pf-v5-c-overflow-menu__group pf-m-icon-button-group">
4391
- <div class="pf-v5-c-overflow-menu__item">
4392
- <button
4393
- class="pf-v5-c-button pf-m-plain"
4394
- type="button"
4395
- aria-label="Edit"
4396
- >
4397
- <i class="fas fa-edit" aria-hidden="true"></i>
4398
- </button>
4399
- </div>
4400
- <div class="pf-v5-c-overflow-menu__item">
4401
- <button
4402
- class="pf-v5-c-button pf-m-plain"
4403
- type="button"
4404
- aria-label="Clone"
4405
- >
4406
- <i class="fas fa-clone" aria-hidden="true"></i>
4407
- </button>
4408
- </div>
4409
- <div class="pf-v5-c-overflow-menu__item">
4410
- <button
4411
- class="pf-v5-c-button pf-m-plain"
4412
- type="button"
4413
- aria-label="Sync"
4414
- >
4415
- <i class="fas fa-sync" aria-hidden="true"></i>
4416
- </button>
4417
- </div>
4418
- </div>
4419
- </div>
4420
- </div>
4421
- </div>
4422
- <div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
4423
- <div
4424
- class="pf-v5-c-overflow-menu"
4425
- id="toolbar-expanded-elements-example-overflow-menu"
4426
- >
4427
- <div class="pf-v5-c-overflow-menu__content">
4428
- <div class="pf-v5-c-overflow-menu__group pf-m-button-group">
4429
- <div class="pf-v5-c-overflow-menu__item">
4430
- <button
4431
- class="pf-v5-c-button pf-m-primary"
4432
- type="button"
4433
- >Primary</button>
4434
- </div>
4435
- <div class="pf-v5-c-overflow-menu__item">
4436
- <button
4437
- class="pf-v5-c-button pf-m-secondary"
4438
- type="button"
4439
- >Secondary</button>
4440
- </div>
4441
- </div>
4442
- </div>
4443
-
4444
- <div class="pf-v5-c-overflow-menu__control">
4445
- <div class="pf-v5-c-dropdown pf-m-expanded">
4446
- <button
4447
- class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
4448
- type="button"
4449
- id="toolbar-expanded-elements-example-overflow-menu-dropdown-toggle"
4450
- aria-label="Overflow menu"
4451
- aria-expanded="true"
4452
- >
4453
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4454
- </button>
4455
- <ul
4456
- class="pf-v5-c-dropdown__menu"
4457
- role="menu"
4458
- aria-labelledby="toolbar-expanded-elements-example-overflow-menu-dropdown-toggle"
4459
- >
4460
- <li role="none">
4461
- <button
4462
- role="menuitem"
4463
- class="pf-v5-c-dropdown__menu-item"
4464
- >Tertiary</button>
4465
- </li>
4466
- </ul>
4467
2239
  </div>
4468
- </div>
2240
+ </nav>
4469
2241
  </div>
4470
2242
  </div>
4471
2243
  </div>
4472
- <div
4473
- class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
4474
- id="toolbar-expanded-elements-example-expandable-content"
4475
- hidden
4476
- ></div>
4477
2244
  </div>
4478
2245
  </div>
4479
2246
 
@@ -4499,16 +2266,18 @@ As the toolbar component is a hybrid layout and component, some of its elements
4499
2266
  | `.pf-m-full-height` | `.pf-v5-c-toolbar`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies toolbar component to full height of its container and removes vertical padding. |
4500
2267
  | `.pf-m-static` | `.pf-v5-c-toolbar` | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar. |
4501
2268
  | `.pf-m-expanded` | `.pf-v5-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
4502
- | `.pf-m-bulk-select` | `.pf-v5-c-toolbar__item` | Initiates bulk select spacing. |
4503
- | `.pf-m-overflow-menu` | `.pf-v5-c-toolbar__item` | Initiates overflow menu spacing. |
4504
- | `.pf-m-pagination` | `.pf-v5-c-toolbar__item` | Initiates pagination spacing and margin. |
4505
- | `.pf-m-search-filter` | `.pf-v5-c-toolbar__item` | Initiates search filter spacing. |
4506
- | `.pf-m-chip-group` | `.pf-v5-c-toolbar__item` | Initiates chip group spacing. |
4507
- | `.pf-m-expand-all` | `.pf-v5-c-toolbar__item` | Initiates an item for an expand all button. |
2269
+ | `.pf-m-label` | `.pf-v5-c-toolbar__item` | Modifies label vertical positioning. |
2270
+ | `.pf-m-form-element` | `.pf-v5-c-toolbar__item` | Modifies form element vertical positioning. |
2271
+ | `.pf-m-bulk-select` | `.pf-v5-c-toolbar__item` | Modifies bulk select spacing. |
2272
+ | `.pf-m-overflow-menu` | `.pf-v5-c-toolbar__item` | Modifies overflow menu spacing. |
2273
+ | `.pf-m-pagination` | `.pf-v5-c-toolbar__item` | Modifies pagination spacing and margin. |
2274
+ | `.pf-m-search-filter` | `.pf-v5-c-toolbar__item` | Modifies search filter spacing. |
2275
+ | `.pf-m-chip-group` | `.pf-v5-c-toolbar__item` | Modifies chip group spacing. |
2276
+ | `.pf-m-expand-all` | `.pf-v5-c-toolbar__item` | Modifies an item for an expand all button. |
4508
2277
  | `.pf-m-expanded` | `.pf-v5-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
4509
- | `.pf-m-button-group` | `.pf-v5-c-toolbar__group` | Initiates button group spacing. |
4510
- | `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Initiates icon button group spacing. |
4511
- | `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Initiates filter group spacing. |
2278
+ | `.pf-m-button-group` | `.pf-v5-c-toolbar__group` | Modifies button group spacing. |
2279
+ | `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Modifies icon button group spacing. |
2280
+ | `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Modifies filter group spacing. |
4512
2281
  | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4513
2282
  | `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4514
2283
  | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
@@ -4528,7 +2297,7 @@ As the toolbar component is a hybrid layout and component, some of its elements
4528
2297
  | Attribute | Applied to | Outcome |
4529
2298
  | -- | -- | -- |
4530
2299
  | `hidden` | `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__toggle`, `.pf-v5-c-toolbar__expandable-content` | Indicates that the toolbar element is hidden. **Required** |
4531
- | `aria-expanded="true"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates that the expandable content is visible. **Required** |
2300
+ | `aria-expanded=true` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates that the expandable content is visible. **Required** |
4532
2301
  | `aria-expanded="false"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates the the expandable content is hidden. **Required** |
4533
2302
  | `aria-controls="[id of expandable content]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
4534
2303
  | `id="[expandable-content_id]"` | `.pf-v5-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |