@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

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 (334) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +884 -871
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +311 -287
  25. package/base/tokens/_tokens-default.scss +425 -329
  26. package/base/tokens/_tokens-font.scss +29 -36
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +19 -16
  52. package/components/Breadcrumb/breadcrumb.scss +18 -16
  53. package/components/Button/button.css +419 -353
  54. package/components/Button/button.scss +476 -476
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/DualListSelector/dual-list-selector.css +56 -48
  84. package/components/DualListSelector/dual-list-selector.scss +57 -50
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +68 -114
  92. package/components/Form/form.scss +65 -126
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +380 -355
  110. package/components/Label/label.scss +434 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +70 -97
  114. package/components/Login/login.scss +56 -64
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +3 -0
  118. package/components/Menu/menu.scss +7 -3
  119. package/components/MenuToggle/menu-toggle.css +8 -8
  120. package/components/MenuToggle/menu-toggle.scss +8 -10
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +56 -81
  128. package/components/NotificationBadge/notification-badge.scss +60 -97
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +35 -52
  152. package/components/SimpleList/simple-list.scss +41 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +29 -45
  166. package/components/Table/table-grid.scss +40 -53
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +76 -74
  170. package/components/Table/table-tree-view.scss +44 -39
  171. package/components/Table/table.css +67 -93
  172. package/components/Table/table.scss +83 -105
  173. package/components/Tabs/tabs.css +143 -175
  174. package/components/Tabs/tabs.scss +159 -217
  175. package/components/Tile/tile.css +40 -81
  176. package/components/Tile/tile.scss +38 -84
  177. package/components/Timestamp/timestamp.css +12 -9
  178. package/components/Timestamp/timestamp.scss +11 -10
  179. package/components/Title/title.css +70 -19
  180. package/components/Title/title.scss +90 -20
  181. package/components/ToggleGroup/toggle-group.css +54 -48
  182. package/components/ToggleGroup/toggle-group.scss +62 -50
  183. package/components/Toolbar/toolbar.css +2527 -1031
  184. package/components/Toolbar/toolbar.scss +233 -520
  185. package/components/Tooltip/tooltip.css +16 -18
  186. package/components/Tooltip/tooltip.scss +20 -24
  187. package/components/TreeView/tree-view.css +76 -97
  188. package/components/TreeView/tree-view.scss +82 -113
  189. package/components/Truncate/truncate.css +4 -0
  190. package/components/Truncate/truncate.scss +3 -0
  191. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  192. package/docs/components/Accordion/examples/Accordion.md +614 -416
  193. package/docs/components/ActionList/examples/ActionList.md +73 -22
  194. package/docs/components/Alert/examples/Alert.md +3 -3
  195. package/docs/components/Avatar/examples/Avatar.md +5 -19
  196. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  197. package/docs/components/Badge/examples/Badge.md +21 -0
  198. package/docs/components/Banner/examples/Banner.md +48 -25
  199. package/docs/components/Brand/examples/Brand.css +12 -0
  200. package/docs/components/Brand/examples/Brand.md +51 -32
  201. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  202. package/docs/components/Button/examples/Button.css +4 -0
  203. package/docs/components/Button/examples/Button.md +1419 -93
  204. package/docs/components/CalendarMonth/examples/CalendarMonth.md +48 -224
  205. package/docs/components/Card/examples/Card.md +550 -133
  206. package/docs/components/Check/examples/Check.md +1 -0
  207. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  208. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  209. package/docs/components/Content/examples/Content.md +5 -5
  210. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  211. package/docs/components/Divider/examples/Divider.css +3 -1
  212. package/docs/components/Divider/examples/Divider.md +30 -5
  213. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  214. package/docs/components/Drawer/examples/Drawer.md +294 -256
  215. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  216. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  217. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  218. package/docs/components/Form/examples/Form.md +134 -89
  219. package/docs/components/Icon/examples/Icon.md +82 -11
  220. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  221. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  222. package/docs/components/Label/examples/Label.css +4 -0
  223. package/docs/components/Label/examples/Label.md +3090 -703
  224. package/docs/components/LogViewer/examples/LogViewer.md +180 -180
  225. package/docs/components/Login/examples/Login.md +10 -5
  226. package/docs/components/Masthead/examples/masthead.md +443 -65
  227. package/docs/components/Menu/examples/Menu.md +507 -473
  228. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  229. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  230. package/docs/components/Nav/examples/Navigation.css +1 -23
  231. package/docs/components/Nav/examples/Navigation.md +209 -356
  232. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  233. package/docs/components/Page/examples/Page.css +0 -8
  234. package/docs/components/Page/examples/Page.md +22 -21
  235. package/docs/components/Pagination/examples/Pagination.md +663 -637
  236. package/docs/components/Panel/examples/Panel.md +12 -0
  237. package/docs/components/Popover/examples/Popover.md +1 -1
  238. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  239. package/docs/components/Radio/examples/Radio.md +1 -1
  240. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  241. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  242. package/docs/components/TabContent/examples/TabContent.md +10 -10
  243. package/docs/components/Table/examples/Table.md +8 -8
  244. package/docs/components/Tabs/examples/Tabs.css +1 -1
  245. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  246. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  247. package/docs/components/Tile/examples/Tile.md +264 -144
  248. package/docs/components/Title/examples/Title.md +18 -0
  249. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  250. package/docs/components/Toolbar/examples/Toolbar.md +985 -3355
  251. package/docs/components/TreeView/examples/TreeView.md +7 -57
  252. package/docs/components/Truncate/examples/Truncate.css +2 -2
  253. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  254. package/docs/demos/Alert/examples/Alert.md +330 -87
  255. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  256. package/docs/demos/Banner/examples/Banner.md +211 -60
  257. package/docs/demos/Card/examples/Card.md +2 -2
  258. package/docs/demos/CardView/examples/CardView.md +241 -187
  259. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  260. package/docs/demos/Dashboard/examples/Dashboard.md +102 -29
  261. package/docs/demos/DataList/examples/DataList.md +999 -938
  262. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  263. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  264. package/docs/demos/Form/examples/BasicForms.md +138 -84
  265. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  266. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  267. package/docs/demos/Modal/examples/Modal.md +645 -198
  268. package/docs/demos/Nav/examples/Nav.md +691 -902
  269. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  270. package/docs/demos/Page/examples/Page.md +942 -273
  271. package/docs/demos/Page/examples/Penta.md +66 -26
  272. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  273. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  274. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1183 -832
  275. package/docs/demos/Skeleton/examples/Skeleton.md +102 -29
  276. package/docs/demos/Table/examples/Table.md +3811 -3456
  277. package/docs/demos/Tabs/examples/Tabs.md +636 -194
  278. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  279. package/docs/demos/Toolbar/examples/Toolbar.md +1316 -1478
  280. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  281. package/docs/layouts/Flex/examples/Flex.md +11 -11
  282. package/package.json +32 -32
  283. package/patternfly-base-no-globals-theme-dark-unversioned.css +897 -880
  284. package/patternfly-base-no-globals.css +897 -880
  285. package/patternfly-base-theme-dark-unversioned.css +890 -872
  286. package/patternfly-base.css +890 -872
  287. package/patternfly-no-globals.css +8107 -8027
  288. package/patternfly-theme-dark-unversioned.css +8111 -8030
  289. package/patternfly.css +8111 -8030
  290. package/patternfly.min.css +1 -1
  291. package/patternfly.min.css.map +1 -1
  292. package/sass-utilities/mixins.scss +18 -0
  293. package/base/themes/dark/_variables.scss +0 -102
  294. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  295. package/components/Accordion/themes/dark/accordion.scss +0 -9
  296. package/components/Alert/themes/dark/alert.scss +0 -17
  297. package/components/Badge/themes/dark/badge.scss +0 -9
  298. package/components/Banner/themes/dark/banner.scss +0 -14
  299. package/components/Button/themes/dark/button.scss +0 -51
  300. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  301. package/components/Card/themes/dark/card.scss +0 -20
  302. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  303. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  304. package/components/DataList/themes/dark/data-list.scss +0 -10
  305. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  306. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  307. package/components/Drawer/themes/dark/drawer.scss +0 -13
  308. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  309. package/components/Form/themes/dark/form.scss +0 -7
  310. package/components/FormControl/themes/dark/form-control.scss +0 -24
  311. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  312. package/components/Hint/themes/dark/hint.scss +0 -8
  313. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  314. package/components/Label/themes/dark/label.scss +0 -53
  315. package/components/Login/themes/dark/login.scss +0 -12
  316. package/components/Masthead/themes/dark/masthead.scss +0 -14
  317. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  318. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  319. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  320. package/components/Page/themes/dark/page.scss +0 -69
  321. package/components/Pagination/themes/dark/pagination.scss +0 -7
  322. package/components/Panel/themes/dark/panel.scss +0 -7
  323. package/components/Popover/themes/dark/popover.scss +0 -11
  324. package/components/Progress/themes/dark/progress.scss +0 -9
  325. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  326. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  327. package/components/Switch/themes/dark/switch.scss +0 -11
  328. package/components/Tabs/themes/dark/tabs.scss +0 -10
  329. package/components/Tile/themes/dark/tile.scss +0 -10
  330. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  331. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  332. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  333. package/docs/components/Avatar/examples/Avatar.css +0 -3
  334. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -4,40 +4,32 @@ section: components
4
4
  cssPrefix: pf-v5-c-toolbar
5
5
  ---import './Toolbar.css'
6
6
 
7
- ## Introduction
7
+ <!-- TODO: add documentation for resize observer/responsive variable usage -->
8
8
 
9
- Toolbar relies on groups (`.pf-v5-c-toolbar__group`) and items (`.pf-v5-c-toolbar__item`), with default spacer values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group or item. Each modifier applies a unique CSS variable, therefore, the base spacer value for all elements can be customized and item/groups spacers can be themed individually. The default spacer value for items and groups is set to `--pf-v5-c-toolbar--spacer--base`, whose value is `--pf-v5-global--spacer--md` or 16px.
9
+ Toolbar relies on groups (`.pf-v5-c-toolbar__group`) and items (`.pf-v5-c-toolbar__item`), with default col/row gap values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group. The default `column-gap` value for items and groups is set to `--pf-v5-c--ColumnGap`, whose value is `--pf-t--global--spacer--sm` or 8px.
10
10
 
11
11
  ### Default spacing for items and groups:
12
12
 
13
13
  | Class | CSS Variable | Computed Value |
14
14
  | -- | -- | -- |
15
- | `.pf-v5-c-toolbar__item` | `--pf-v5-c-toolbar__item--spacer` | `16px` |
16
- | `.pf-v5-c-toolbar__group` | `--pf-v5-c-toolbar__group--spacer` | `16px` |
15
+ | `.pf-v5-c-toolbar__group` | `--pf-v5-c-toolbar__group--ColumnGap` | `8px` |
16
+ | `.pf-v5-c-toolbar__item` | `--pf-v5-c-toolbar__item--ColumnGap` | `8px` |
17
17
 
18
18
  ### Toolbar item types
19
19
 
20
20
  | Class | Applied to | Outcome |
21
21
  | -- | -- | -- |
22
- | `.pf-m-bulk-select` | `.pf-v5-c-toolbar__item` | Initiates bulk select spacing. Spacer value is set to `var(--pf-v5-c-toolbar--m-bulk-select--spacer)`. |
23
- | `.pf-m-overflow-menu` | `.pf-v5-c-toolbar__item` | Initiates overflow menu spacing. Spacer value is set to `var(--pf-v5-c-toolbar--m-overflow-menu--spacer)`. |
24
- | `.pf-m-pagination` | `.pf-v5-c-toolbar__item` | Initiates pagination spacing and margin. Spacer value is set to `var(--pf-v5-c-toolbar--m-pagination--spacer)`. |
25
- | `.pf-m-search-filter` | `.pf-v5-c-toolbar__item` | Initiates search filter spacing. Spacer value is set to `var(--pf-v5-c-toolbar--m-search-filter--spacer)`. |
22
+ | `.pf-m-pagination` | `.pf-v5-c-toolbar__item` | Initiates pagination and margin. |
26
23
 
27
24
  ### Modifiers
28
25
 
29
26
  | Class | Applied to | Outcome |
30
27
  | -- | -- | -- |
31
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
32
- | `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
33
- | `.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). |
34
- | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
35
- | `.pf-m-align-items-start` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align children to flex-start. |
36
- | `.pf-m-align-items-center` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align children to center. |
37
- | `.pf-m-align-items-baseline` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar group to vertically align children to baseline. |
38
- | `.pf-m-align-self-start` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to flex-start. |
39
- | `.pf-m-align-self-center` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
40
- | `.pf-m-align-self-baseline` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
28
+ | `.pf-m-[hidden/visible]` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to be hidden/visible. |
29
+ | `.pf-m-flex-grow` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to `flex-grow: 1`, allowing it to consume available main-axis space. |
30
+ | `.pf-m-align-[start/end]` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
31
+ | `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) child alignment. |
32
+ | `.pf-m-align-self-[stretch/baseline/start/center/end]` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) self alignment. |
41
33
 
42
34
  ### Special notes
43
35
 
@@ -79,44 +71,19 @@ Several components in the following examples do not include functional and/or ac
79
71
  | `.pf-v5-c-toolbar__item` | `<div>` | Initiates the toolbar component item. **Required** |
80
72
  | `.pf-v5-c-toolbar__group` | `<div>` | Initiates the toolbar component group. |
81
73
 
82
- ### Spacers
83
-
84
- In some instances, it may be necessary to adjust spacing explicitly where items are hidden/shown. For example, if a `.pf-m-toggle-group` is adjacent to an element being hidden/shown, the spacing may appear to be inconsistent. If possible, rely on modifier values. Available spacer modifiers are `.pf-m-spacer-{none, sm, md, lg}{-on-md, -on-lg, -on-xl}` and `.pf-m-space-items-{none, sm, md, lg}{-on-md, -on-lg, -on-xl}`. These modifiers will overwrite existing modifiers provided by `.pf-v5-c-toolbar`.
85
-
86
- ### Adjusted spacers
87
-
88
- ```html
89
- <div class="pf-v5-c-toolbar" id="toolbar-spacer-example">
90
- <div class="pf-v5-c-toolbar__content">
91
- <div class="pf-v5-c-toolbar__content-section">
92
- <div class="pf-v5-c-toolbar__item pf-m-spacer-none">Item</div>
93
- <div class="pf-v5-c-toolbar__item pf-m-spacer-sm">Item</div>
94
- <div class="pf-v5-c-toolbar__item pf-m-spacer-md">Item</div>
95
- <div class="pf-v5-c-toolbar__item pf-m-spacer-lg">Item</div>
96
- <hr class="pf-v5-c-divider pf-m-vertical" />
97
- <div
98
- class="pf-v5-c-toolbar__item pf-m-spacer-none pf-m-spacer-sm-on-md pf-m-spacer-md-on-lg pf-m-spacer-lg-on-xl"
99
- >Item</div>
100
- <div class="pf-v5-c-toolbar__item">Item</div>
101
- </div>
102
- </div>
103
- </div>
104
-
105
- ```
106
-
107
- ### Adjusted group spacers
74
+ ### Adjusted group column gap
108
75
 
109
76
  ```html
110
77
  <div class="pf-v5-c-toolbar" id="toolbar-group-spacer-example">
111
78
  <div class="pf-v5-c-toolbar__content">
112
79
  <div class="pf-v5-c-toolbar__content-section">
113
- <div class="pf-v5-c-toolbar__group pf-m-space-items-lg">
80
+ <div class="pf-v5-c-toolbar__group pf-m-column-gap-lg">
114
81
  <div class="pf-v5-c-toolbar__item">Item</div>
115
82
  <div class="pf-v5-c-toolbar__item">Item</div>
116
83
  </div>
117
84
  <hr class="pf-v5-c-divider pf-m-vertical" />
118
85
  <div
119
- class="pf-v5-c-toolbar__group pf-m-space-items-none pf-m-space-items-sm-on-md pf-m-space-items-md-on-lg pf-m-space-items-lg-on-xl"
86
+ class="pf-v5-c-toolbar__group pf-m-column-gap-none pf-m-column-gap-sm"
120
87
  >
121
88
  <div class="pf-v5-c-toolbar__item">Item</div>
122
89
  <div class="pf-v5-c-toolbar__item">Item</div>
@@ -130,10 +97,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
130
97
  ### Insets
131
98
 
132
99
  ```html
133
- <div
134
- class="pf-v5-c-toolbar pf-m-inset-none pf-m-inset-md-on-md pf-m-inset-2xl-on-lg"
135
- id="toolbar-inset-example"
136
- >
100
+ <div class="pf-v5-c-toolbar pf-m-inset-xl" id="toolbar-inset-example">
137
101
  <div class="pf-v5-c-toolbar__content">
138
102
  <div class="pf-v5-c-toolbar__content-section">
139
103
  <div class="pf-v5-c-toolbar__group">
@@ -172,10 +136,8 @@ In some instances, it may be necessary to adjust spacing explicitly where items
172
136
 
173
137
  | Class | Applied to | Outcome |
174
138
  | -- | -- | -- |
175
- | `.pf-m-page-insets` | `.pf-v5-c-toolbar` | Modifies toolbar insets to match page section, table, page header or any other component whose inset shifts from `--pf-v5-global--spacer--md` to `--pf-v5-global--spacer--lg` at the `xl` breakpoint. |
176
- | `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
177
- | `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-v5-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
178
- | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v5-c-toolbar` | Modifies toolbar horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
139
+ | `.pf-m-column-gap-[none/sm/md/lg]` | `.pf-v5-c-toolbar__group` | Modifies toolbar group child spacing. |
140
+ | `.pf-m-inset-[none/sm/md/lg/xl/2xl]` | `.pf-v5-c-toolbar` | Modifies toolbar horizontal. |
179
141
 
180
142
  ### Width control
181
143
 
@@ -203,8 +165,8 @@ In some instances, it may be necessary to adjust spacing explicitly where items
203
165
 
204
166
  | Class | Applied to | Outcome |
205
167
  | -- | -- | -- |
206
- | `--pf-v5-c-toolbar__item--Width{-on-[breakpoint]}: {width}` | `.pf-v5-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
207
- | `--pf-v5-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-v5-c-toolbar__item` | Modifies the min width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
168
+ | `--pf-v5-c-toolbar__item--Width: {width}` | `.pf-v5-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
169
+ | `--pf-v5-c-toolbar__item--MinWidth: {width}` | `.pf-v5-c-toolbar__item` | Modifies the min width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
208
170
 
209
171
  ### Group types
210
172
 
@@ -214,181 +176,49 @@ In some instances, it may be necessary to adjust spacing explicitly where items
214
176
  <div class="pf-v5-c-toolbar__content-section">
215
177
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
216
178
  <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>
179
+ <button
180
+ class="pf-v5-c-menu-toggle"
181
+ type="button"
182
+ aria-expanded="false"
183
+ id="toolbar-group-types-example-toggle-1"
184
+ >
185
+ <span class="pf-v5-c-menu-toggle__text">Filter 1</span>
186
+ <span class="pf-v5-c-menu-toggle__controls">
187
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
188
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
236
189
  </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>
190
+ </span>
191
+ </button>
274
192
  </div>
275
193
  <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>
194
+ <button
195
+ class="pf-v5-c-menu-toggle"
196
+ type="button"
197
+ aria-expanded="false"
198
+ id="toolbar-group-types-example-toggle-2"
199
+ >
200
+ <span class="pf-v5-c-menu-toggle__text">Filter 2</span>
201
+ <span class="pf-v5-c-menu-toggle__controls">
202
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
203
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
295
204
  </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>
205
+ </span>
206
+ </button>
333
207
  </div>
334
208
  <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>
209
+ <button
210
+ class="pf-v5-c-menu-toggle"
211
+ type="button"
212
+ aria-expanded="false"
213
+ id="toolbar-group-types-example-toggle-3"
214
+ >
215
+ <span class="pf-v5-c-menu-toggle__text">Filter 3</span>
216
+ <span class="pf-v5-c-menu-toggle__controls">
217
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
218
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
354
219
  </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>
220
+ </span>
221
+ </button>
392
222
  </div>
393
223
  </div>
394
224
  <div class="pf-v5-c-toolbar__group pf-m-icon-button-group">
@@ -441,9 +271,8 @@ In some instances, it may be necessary to adjust spacing explicitly where items
441
271
 
442
272
  | Class | Applied to | Outcome |
443
273
  | -- | -- | -- |
444
- | `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-v5-c-toolbar__group--m-filter-group--spacer)`. Child spacer value is set to `var(--pf-v5-c-toolbar__group--m-filter-group--space-items)`. |
445
- | `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-v5-c-toolbar__group--m-toggle-group--spacer)`. Child spacer value is set to `var(--pf-v5-c-toolbar__group--m-icon-button-group--space-items)`. |
446
- | `.pf-m-button-group` | `.pf-v5-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-v5-c-toolbar__group--m-toggle-group--spacer)`. Child spacer value is set to `var(--pf-v5-c-toolbar__group--m-button-group--space-items)`. |
274
+ | `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Modifies toolbar group column gap. |
275
+ | `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Modifies toolbar group column gap. |
447
276
 
448
277
  ### Toggle group
449
278
 
@@ -452,12 +281,12 @@ In some instances, it may be necessary to adjust spacing explicitly where items
452
281
  <div class="pf-v5-c-toolbar__content">
453
282
  <div class="pf-v5-c-toolbar__content-section">
454
283
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg">
455
- <div class="pf-v5-c-toolbar__toggle">
284
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
456
285
  <button
457
- class="pf-v5-c-button pf-m-plain"
286
+ class="pf-v5-c-menu-toggle pf-m-plain"
458
287
  type="button"
459
- aria-label="Show filters"
460
288
  aria-expanded="false"
289
+ aria-label="Show filters"
461
290
  aria-controls="toolbar-toggle-group-example-expandable-content"
462
291
  >
463
292
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -470,72 +299,22 @@ In some instances, it may be necessary to adjust spacing explicitly where items
470
299
  role="group"
471
300
  >
472
301
  <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>
302
+ <button
303
+ class="pf-v5-c-menu-toggle"
304
+ type="button"
305
+ aria-expanded="false"
306
+ id="toolbar-toggle-group-example-search-filter-menu"
307
+ >
308
+ <span class="pf-v5-c-menu-toggle__icon">
309
+ <i class="fas fa-filter" aria-hidden="true"></i>
310
+ </span>
311
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
312
+ <span class="pf-v5-c-menu-toggle__controls">
313
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
314
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
495
315
  </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>
316
+ </span>
317
+ </button>
539
318
  </div>
540
319
  <div class="pf-v5-c-input-group__item pf-m-fill">
541
320
  <div class="pf-v5-c-text-input-group">
@@ -559,218 +338,34 @@ In some instances, it may be necessary to adjust spacing explicitly where items
559
338
  </div>
560
339
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
561
340
  <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>
341
+ <button
342
+ class="pf-v5-c-menu-toggle"
343
+ type="button"
344
+ aria-expanded="false"
345
+ id="toolbar-toggle-group-example-menu-toggle-checkbox-status"
346
+ >
347
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
348
+ <span class="pf-v5-c-menu-toggle__controls">
349
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
350
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
581
351
  </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
- id="toolbar-toggle-group-example-select-checkbox-status-active"
592
- for="toolbar-toggle-group-example-select-checkbox-status-active-input"
593
- >
594
- <input
595
- class="pf-v5-c-check__input"
596
- type="checkbox"
597
- aria-describedby="toolbar-toggle-group-example-select-checkbox-status-active-description"
598
- id="toolbar-toggle-group-example-select-checkbox-status-active-input"
599
- name="toolbar-toggle-group-example-select-checkbox-status-active-input"
600
- />
601
- <span class="pf-v5-c-check__label">Active</span>
602
- <span
603
- class="pf-v5-c-check__description"
604
- id="toolbar-toggle-group-example-select-checkbox-status-active-description"
605
- >This is a description</span>
606
- </label>
607
- <label
608
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
609
- id="toolbar-toggle-group-example-select-checkbox-status-canceled"
610
- for="toolbar-toggle-group-example-select-checkbox-status-canceled-input"
611
- >
612
- <input
613
- class="pf-v5-c-check__input"
614
- type="checkbox"
615
- aria-describedby="toolbar-toggle-group-example-select-checkbox-status-canceled-description"
616
- id="toolbar-toggle-group-example-select-checkbox-status-canceled-input"
617
- name="toolbar-toggle-group-example-select-checkbox-status-canceled-input"
618
- />
619
- <span class="pf-v5-c-check__label">Canceled</span>
620
- <span
621
- class="pf-v5-c-check__description"
622
- id="toolbar-toggle-group-example-select-checkbox-status-canceled-description"
623
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
624
- </label>
625
- <label
626
- class="pf-v5-c-check pf-v5-c-select__menu-item"
627
- id="toolbar-toggle-group-example-select-checkbox-status-paused"
628
- for="toolbar-toggle-group-example-select-checkbox-status-paused-input"
629
- >
630
- <input
631
- class="pf-v5-c-check__input"
632
- type="checkbox"
633
- id="toolbar-toggle-group-example-select-checkbox-status-paused-input"
634
- name="toolbar-toggle-group-example-select-checkbox-status-paused-input"
635
- />
636
- <span class="pf-v5-c-check__label">Paused</span>
637
- </label>
638
- <label
639
- class="pf-v5-c-check pf-v5-c-select__menu-item"
640
- id="toolbar-toggle-group-example-select-checkbox-status-warning"
641
- for="toolbar-toggle-group-example-select-checkbox-status-warning-input"
642
- >
643
- <input
644
- class="pf-v5-c-check__input"
645
- type="checkbox"
646
- id="toolbar-toggle-group-example-select-checkbox-status-warning-input"
647
- name="toolbar-toggle-group-example-select-checkbox-status-warning-input"
648
- />
649
- <span class="pf-v5-c-check__label">Warning</span>
650
- </label>
651
- <label
652
- class="pf-v5-c-check pf-v5-c-select__menu-item"
653
- id="toolbar-toggle-group-example-select-checkbox-status-restarted"
654
- for="toolbar-toggle-group-example-select-checkbox-status-restarted-input"
655
- >
656
- <input
657
- class="pf-v5-c-check__input"
658
- type="checkbox"
659
- id="toolbar-toggle-group-example-select-checkbox-status-restarted-input"
660
- name="toolbar-toggle-group-example-select-checkbox-status-restarted-input"
661
- />
662
- <span class="pf-v5-c-check__label">Restarted</span>
663
- </label>
664
- </fieldset>
665
- </div>
666
- </div>
352
+ </span>
353
+ </button>
667
354
  </div>
668
355
  <div class="pf-v5-c-toolbar__item">
669
- <div class="pf-v5-c-select">
670
- <span
671
- id="toolbar-toggle-group-example-select-checkbox-risk-label"
672
- hidden
673
- >Choose many</span>
674
-
675
- <button
676
- class="pf-v5-c-select__toggle"
677
- type="button"
678
- id="toolbar-toggle-group-example-select-checkbox-risk-toggle"
679
- aria-haspopup="true"
680
- aria-expanded="false"
681
- aria-labelledby="toolbar-toggle-group-example-select-checkbox-risk-label toolbar-toggle-group-example-select-checkbox-risk-toggle"
682
- >
683
- <div class="pf-v5-c-select__toggle-wrapper">
684
- <span class="pf-v5-c-select__toggle-text">Risk</span>
685
- </div>
686
- <span class="pf-v5-c-select__toggle-arrow">
687
- <i class="fas fa-caret-down" aria-hidden="true"></i>
356
+ <button
357
+ class="pf-v5-c-menu-toggle"
358
+ type="button"
359
+ aria-expanded="false"
360
+ id="toolbar-toggle-group-example-menu-toggle-checkbox-risk"
361
+ >
362
+ <span class="pf-v5-c-menu-toggle__text">Risk</span>
363
+ <span class="pf-v5-c-menu-toggle__controls">
364
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
365
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
688
366
  </span>
689
- </button>
690
-
691
- <div class="pf-v5-c-select__menu" hidden>
692
- <fieldset
693
- class="pf-v5-c-select__menu-fieldset"
694
- aria-label="Select input"
695
- >
696
- <label
697
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
698
- id="toolbar-toggle-group-example-select-checkbox-risk-active"
699
- for="toolbar-toggle-group-example-select-checkbox-risk-active-input"
700
- >
701
- <input
702
- class="pf-v5-c-check__input"
703
- type="checkbox"
704
- aria-describedby="toolbar-toggle-group-example-select-checkbox-risk-active-description"
705
- id="toolbar-toggle-group-example-select-checkbox-risk-active-input"
706
- name="toolbar-toggle-group-example-select-checkbox-risk-active-input"
707
- />
708
- <span class="pf-v5-c-check__label">Active</span>
709
- <span
710
- class="pf-v5-c-check__description"
711
- id="toolbar-toggle-group-example-select-checkbox-risk-active-description"
712
- >This is a description</span>
713
- </label>
714
- <label
715
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
716
- id="toolbar-toggle-group-example-select-checkbox-risk-canceled"
717
- for="toolbar-toggle-group-example-select-checkbox-risk-canceled-input"
718
- >
719
- <input
720
- class="pf-v5-c-check__input"
721
- type="checkbox"
722
- aria-describedby="toolbar-toggle-group-example-select-checkbox-risk-canceled-description"
723
- id="toolbar-toggle-group-example-select-checkbox-risk-canceled-input"
724
- name="toolbar-toggle-group-example-select-checkbox-risk-canceled-input"
725
- />
726
- <span class="pf-v5-c-check__label">Canceled</span>
727
- <span
728
- class="pf-v5-c-check__description"
729
- id="toolbar-toggle-group-example-select-checkbox-risk-canceled-description"
730
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
731
- </label>
732
- <label
733
- class="pf-v5-c-check pf-v5-c-select__menu-item"
734
- id="toolbar-toggle-group-example-select-checkbox-risk-paused"
735
- for="toolbar-toggle-group-example-select-checkbox-risk-paused-input"
736
- >
737
- <input
738
- class="pf-v5-c-check__input"
739
- type="checkbox"
740
- id="toolbar-toggle-group-example-select-checkbox-risk-paused-input"
741
- name="toolbar-toggle-group-example-select-checkbox-risk-paused-input"
742
- />
743
- <span class="pf-v5-c-check__label">Paused</span>
744
- </label>
745
- <label
746
- class="pf-v5-c-check pf-v5-c-select__menu-item"
747
- id="toolbar-toggle-group-example-select-checkbox-risk-warning"
748
- for="toolbar-toggle-group-example-select-checkbox-risk-warning-input"
749
- >
750
- <input
751
- class="pf-v5-c-check__input"
752
- type="checkbox"
753
- id="toolbar-toggle-group-example-select-checkbox-risk-warning-input"
754
- name="toolbar-toggle-group-example-select-checkbox-risk-warning-input"
755
- />
756
- <span class="pf-v5-c-check__label">Warning</span>
757
- </label>
758
- <label
759
- class="pf-v5-c-check pf-v5-c-select__menu-item"
760
- id="toolbar-toggle-group-example-select-checkbox-risk-restarted"
761
- for="toolbar-toggle-group-example-select-checkbox-risk-restarted-input"
762
- >
763
- <input
764
- class="pf-v5-c-check__input"
765
- type="checkbox"
766
- id="toolbar-toggle-group-example-select-checkbox-risk-restarted-input"
767
- name="toolbar-toggle-group-example-select-checkbox-risk-restarted-input"
768
- />
769
- <span class="pf-v5-c-check__label">Restarted</span>
770
- </label>
771
- </fieldset>
772
- </div>
773
- </div>
367
+ </span>
368
+ </button>
774
369
  </div>
775
370
  </div>
776
371
  </div>
@@ -792,12 +387,12 @@ In some instances, it may be necessary to adjust spacing explicitly where items
792
387
  <div class="pf-v5-c-toolbar__content">
793
388
  <div class="pf-v5-c-toolbar__content-section">
794
389
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
795
- <div class="pf-v5-c-toolbar__toggle pf-m-expanded">
390
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
796
391
  <button
797
- class="pf-v5-c-button pf-m-plain"
392
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
798
393
  type="button"
799
- aria-label="Show filters"
800
394
  aria-expanded="true"
395
+ aria-label="Show filters"
801
396
  aria-controls="toolbar-toggle-group-collapsed-example-expandable-content"
802
397
  >
803
398
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -816,72 +411,22 @@ In some instances, it may be necessary to adjust spacing explicitly where items
816
411
  role="group"
817
412
  >
818
413
  <div class="pf-v5-c-input-group__item">
819
- <div class="pf-v5-c-select" style="width: 124px">
820
- <span
821
- id="toolbar-toggle-group-collapsed-example-select-name-label"
822
- hidden
823
- >Choose one</span>
824
-
825
- <button
826
- class="pf-v5-c-select__toggle"
827
- type="button"
828
- id="toolbar-toggle-group-collapsed-example-select-name-toggle"
829
- aria-haspopup="true"
830
- aria-expanded="false"
831
- aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label toolbar-toggle-group-collapsed-example-select-name-toggle"
832
- >
833
- <div class="pf-v5-c-select__toggle-wrapper">
834
- <span class="pf-v5-c-select__toggle-icon">
835
- <i class="fas fa-filter" aria-hidden="true"></i>
836
- </span>
837
- <span class="pf-v5-c-select__toggle-text">Name</span>
838
- </div>
839
- <span class="pf-v5-c-select__toggle-arrow">
840
- <i class="fas fa-caret-down" aria-hidden="true"></i>
414
+ <button
415
+ class="pf-v5-c-menu-toggle"
416
+ type="button"
417
+ aria-expanded="false"
418
+ id="toolbar-toggle-group-collapsed-example-search-filter-menu"
419
+ >
420
+ <span class="pf-v5-c-menu-toggle__icon">
421
+ <i class="fas fa-filter" aria-hidden="true"></i>
422
+ </span>
423
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
424
+ <span class="pf-v5-c-menu-toggle__controls">
425
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
426
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
841
427
  </span>
842
- </button>
843
-
844
- <ul
845
- class="pf-v5-c-select__menu"
846
- role="listbox"
847
- aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label"
848
- hidden
849
- >
850
- <li role="presentation">
851
- <button
852
- class="pf-v5-c-select__menu-item"
853
- role="option"
854
- >Running</button>
855
- </li>
856
- <li role="presentation">
857
- <button
858
- class="pf-v5-c-select__menu-item pf-m-selected"
859
- role="option"
860
- aria-selected="true"
861
- >
862
- Stopped
863
- <span class="pf-v5-c-select__menu-item-icon">
864
- <i class="fas fa-check" aria-hidden="true"></i>
865
- </span>
866
- </button>
867
- </li>
868
- <li role="presentation">
869
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
870
- </li>
871
- <li role="presentation">
872
- <button
873
- class="pf-v5-c-select__menu-item"
874
- role="option"
875
- >Degraded</button>
876
- </li>
877
- <li role="presentation">
878
- <button
879
- class="pf-v5-c-select__menu-item"
880
- role="option"
881
- >Needs maintenance</button>
882
- </li>
883
- </ul>
884
- </div>
428
+ </span>
429
+ </button>
885
430
  </div>
886
431
  <div class="pf-v5-c-input-group__item pf-m-fill">
887
432
  <div class="pf-v5-c-text-input-group">
@@ -905,218 +450,34 @@ In some instances, it may be necessary to adjust spacing explicitly where items
905
450
  </div>
906
451
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
907
452
  <div class="pf-v5-c-toolbar__item">
908
- <div class="pf-v5-c-select">
909
- <span
910
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-label"
911
- hidden
912
- >Choose many</span>
913
-
914
- <button
915
- class="pf-v5-c-select__toggle"
916
- type="button"
917
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle"
918
- aria-haspopup="true"
919
- aria-expanded="false"
920
- aria-labelledby="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-label toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle"
921
- >
922
- <div class="pf-v5-c-select__toggle-wrapper">
923
- <span class="pf-v5-c-select__toggle-text">Status</span>
924
- </div>
925
- <span class="pf-v5-c-select__toggle-arrow">
926
- <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-menu-toggle-checkbox-status"
458
+ >
459
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
460
+ <span class="pf-v5-c-menu-toggle__controls">
461
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
462
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
927
463
  </span>
928
- </button>
929
-
930
- <div class="pf-v5-c-select__menu" hidden>
931
- <fieldset
932
- class="pf-v5-c-select__menu-fieldset"
933
- aria-label="Select input"
934
- >
935
- <label
936
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
937
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
938
- for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
939
- >
940
- <input
941
- class="pf-v5-c-check__input"
942
- type="checkbox"
943
- aria-describedby="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active-description"
944
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
945
- name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
946
- />
947
- <span class="pf-v5-c-check__label">Active</span>
948
- <span
949
- class="pf-v5-c-check__description"
950
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-active-description"
951
- >This is a description</span>
952
- </label>
953
- <label
954
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
955
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
956
- for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
957
- >
958
- <input
959
- class="pf-v5-c-check__input"
960
- type="checkbox"
961
- aria-describedby="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-description"
962
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
963
- name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
964
- />
965
- <span class="pf-v5-c-check__label">Canceled</span>
966
- <span
967
- class="pf-v5-c-check__description"
968
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-description"
969
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
970
- </label>
971
- <label
972
- class="pf-v5-c-check pf-v5-c-select__menu-item"
973
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
974
- for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
975
- >
976
- <input
977
- class="pf-v5-c-check__input"
978
- type="checkbox"
979
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
980
- name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
981
- />
982
- <span class="pf-v5-c-check__label">Paused</span>
983
- </label>
984
- <label
985
- class="pf-v5-c-check pf-v5-c-select__menu-item"
986
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
987
- for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
988
- >
989
- <input
990
- class="pf-v5-c-check__input"
991
- type="checkbox"
992
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
993
- name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
994
- />
995
- <span class="pf-v5-c-check__label">Warning</span>
996
- </label>
997
- <label
998
- class="pf-v5-c-check pf-v5-c-select__menu-item"
999
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
1000
- for="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
1001
- >
1002
- <input
1003
- class="pf-v5-c-check__input"
1004
- type="checkbox"
1005
- id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
1006
- name="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
1007
- />
1008
- <span class="pf-v5-c-check__label">Restarted</span>
1009
- </label>
1010
- </fieldset>
1011
- </div>
1012
- </div>
464
+ </span>
465
+ </button>
1013
466
  </div>
1014
467
  <div class="pf-v5-c-toolbar__item">
1015
- <div class="pf-v5-c-select">
1016
- <span
1017
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-label"
1018
- hidden
1019
- >Choose many</span>
1020
-
1021
- <button
1022
- class="pf-v5-c-select__toggle"
1023
- type="button"
1024
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-toggle"
1025
- aria-haspopup="true"
1026
- aria-expanded="false"
1027
- aria-labelledby="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-label toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-toggle"
1028
- >
1029
- <div class="pf-v5-c-select__toggle-wrapper">
1030
- <span class="pf-v5-c-select__toggle-text">Risk</span>
1031
- </div>
1032
- <span class="pf-v5-c-select__toggle-arrow">
1033
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1034
- </span>
1035
- </button>
1036
-
1037
- <div class="pf-v5-c-select__menu" hidden>
1038
- <fieldset
1039
- class="pf-v5-c-select__menu-fieldset"
1040
- aria-label="Select input"
1041
- >
1042
- <label
1043
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1044
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
1045
- for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
1046
- >
1047
- <input
1048
- class="pf-v5-c-check__input"
1049
- type="checkbox"
1050
- aria-describedby="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-description"
1051
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
1052
- name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
1053
- />
1054
- <span class="pf-v5-c-check__label">Active</span>
1055
- <span
1056
- class="pf-v5-c-check__description"
1057
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-description"
1058
- >This is a description</span>
1059
- </label>
1060
- <label
1061
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1062
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
1063
- for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
1064
- >
1065
- <input
1066
- class="pf-v5-c-check__input"
1067
- type="checkbox"
1068
- aria-describedby="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-description"
1069
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
1070
- name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
1071
- />
1072
- <span class="pf-v5-c-check__label">Canceled</span>
1073
- <span
1074
- class="pf-v5-c-check__description"
1075
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-description"
1076
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1077
- </label>
1078
- <label
1079
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1080
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
1081
- for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
1082
- >
1083
- <input
1084
- class="pf-v5-c-check__input"
1085
- type="checkbox"
1086
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
1087
- name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
1088
- />
1089
- <span class="pf-v5-c-check__label">Paused</span>
1090
- </label>
1091
- <label
1092
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1093
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
1094
- for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
1095
- >
1096
- <input
1097
- class="pf-v5-c-check__input"
1098
- type="checkbox"
1099
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
1100
- name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
1101
- />
1102
- <span class="pf-v5-c-check__label">Warning</span>
1103
- </label>
1104
- <label
1105
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1106
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
1107
- for="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
1108
- >
1109
- <input
1110
- class="pf-v5-c-check__input"
1111
- type="checkbox"
1112
- id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
1113
- name="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
1114
- />
1115
- <span class="pf-v5-c-check__label">Restarted</span>
1116
- </label>
1117
- </fieldset>
1118
- </div>
1119
- </div>
468
+ <button
469
+ class="pf-v5-c-menu-toggle"
470
+ type="button"
471
+ aria-expanded="false"
472
+ id="toolbar-toggle-group-collapsed-example-menu-toggle-checkbox-risk"
473
+ >
474
+ <span class="pf-v5-c-menu-toggle__text">Risk</span>
475
+ <span class="pf-v5-c-menu-toggle__controls">
476
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
477
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
478
+ </span>
479
+ </span>
480
+ </button>
1120
481
  </div>
1121
482
  </div>
1122
483
  </div>
@@ -1134,8 +495,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1134
495
  | Attribute | Applied to | Outcome |
1135
496
  | -- | -- | -- |
1136
497
  | `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** |
1137
- | `aria-expanded="true"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates that the expandable content is visible. **Required** |
1138
- | `aria-expanded="false"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates the the expandable content is hidden. **Required** |
498
+ | `aria-expanded="[true/false]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates that the expandable content is visible/hidden. **Required** |
1139
499
  | `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** |
1140
500
  | `id="[expandable-content_id]"` | `.pf-v5-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
1141
501
 
@@ -1143,13 +503,13 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1143
503
 
1144
504
  | Attribute | Applied to | Outcome |
1145
505
  | -- | -- | -- |
1146
- | `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** |
506
+ | `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** |
1147
507
 
1148
508
  ### Usage
1149
509
 
1150
510
  | Class | Applied to | Outcome |
1151
511
  | -- | -- | -- |
1152
- | `.pf-m-show{-on-[breakpoint]}` | `.pf-v5-c-toolbar__group.pf-m-toggle-group`, `.pf-v5-c-toolbar__expandable-content` | Modifies toolbar element visibility at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
512
+ | `.pf-m-[show/hide][-on-[sm/md/lg/xl/2xl]]` | `.pf-v5-c-toolbar__group.pf-m-toggle-group`, `.pf-v5-c-toolbar__expandable-content` | Modifies toolbar element visibility. |
1153
513
  | `.pf-m-chip-container` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
1154
514
  | `.pf-m-expanded` | `.pf-v5-c-toolbar__expandable-content`, `.pf-v5-c-toolbar__toggle` | Modifies the component for the expanded state. |
1155
515
 
@@ -1165,64 +525,45 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1165
525
  <div class="pf-v5-c-toolbar__content">
1166
526
  <div class="pf-v5-c-toolbar__content-section">
1167
527
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
1168
- <div class="pf-v5-c-dropdown">
1169
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
1170
- <label
1171
- class="pf-v5-c-dropdown__toggle-check"
1172
- for="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check"
1173
- >
1174
- <div class="pf-v5-c-check pf-m-standalone">
1175
- <input
1176
- class="pf-v5-c-check__input"
1177
- type="checkbox"
1178
- id="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check"
1179
- aria-label="Select all"
1180
- />
1181
- </div>
1182
- </label>
1183
-
1184
- <button
1185
- class="pf-v5-c-dropdown__toggle-button"
1186
- type="button"
1187
- aria-expanded="false"
1188
- id="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-button"
1189
- aria-label="Dropdown toggle"
1190
- >
1191
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1192
- </button>
1193
- </div>
1194
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1195
- <li role="none">
1196
- <button
1197
- class="pf-v5-c-dropdown__menu-item"
1198
- role="menuitem"
1199
- type="button"
1200
- >Select all</button>
1201
- </li>
1202
- <li role="none">
1203
- <button
1204
- class="pf-v5-c-dropdown__menu-item"
1205
- role="menuitem"
1206
- type="button"
1207
- >Select none</button>
1208
- </li>
1209
- <li role="none">
1210
- <button
1211
- class="pf-v5-c-dropdown__menu-item"
1212
- role="menuitem"
1213
- type="button"
1214
- >Other action</button>
1215
- </li>
1216
- </ul>
528
+ <div
529
+ class="pf-v5-c-menu-toggle pf-m-split-button"
530
+ id="toolbar-selected-filters-toggle-group-collapsed-example-check"
531
+ >
532
+ <label
533
+ class="pf-v5-c-check pf-m-standalone"
534
+ id="toolbar-selected-filters-toggle-group-collapsed-example-check-check"
535
+ for="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
536
+ >
537
+ <input
538
+ class="pf-v5-c-check__input"
539
+ type="checkbox"
540
+ id="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
541
+ name="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
542
+ aria-label="Standalone check"
543
+ />
544
+ </label>
545
+ <button
546
+ class="pf-v5-c-menu-toggle__button"
547
+ type="button"
548
+ aria-expanded="false"
549
+ id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-toggle-button"
550
+ aria-label="Menu toggle"
551
+ >
552
+ <span class="pf-v5-c-menu-toggle__controls">
553
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
554
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
555
+ </span>
556
+ </span>
557
+ </button>
1217
558
  </div>
1218
559
  </div>
1219
560
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
1220
- <div class="pf-v5-c-toolbar__toggle">
561
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1221
562
  <button
1222
- class="pf-v5-c-button pf-m-plain"
563
+ class="pf-v5-c-menu-toggle pf-m-plain"
1223
564
  type="button"
1224
- aria-label="Show filters"
1225
565
  aria-expanded="false"
566
+ aria-label="Show filters"
1226
567
  aria-controls="toolbar-selected-filters-toggle-group-collapsed-example-expandable-content"
1227
568
  >
1228
569
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -1235,72 +576,22 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1235
576
  role="group"
1236
577
  >
1237
578
  <div class="pf-v5-c-input-group__item">
1238
- <div class="pf-v5-c-select" style="width: 124px">
1239
- <span
1240
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1241
- hidden
1242
- >Choose one</span>
1243
-
1244
- <button
1245
- class="pf-v5-c-select__toggle"
1246
- type="button"
1247
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-name-toggle"
1248
- aria-haspopup="true"
1249
- aria-expanded="false"
1250
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label toolbar-selected-filters-toggle-group-collapsed-example-select-name-toggle"
1251
- >
1252
- <div class="pf-v5-c-select__toggle-wrapper">
1253
- <span class="pf-v5-c-select__toggle-icon">
1254
- <i class="fas fa-filter" aria-hidden="true"></i>
1255
- </span>
1256
- <span class="pf-v5-c-select__toggle-text">Name</span>
1257
- </div>
1258
- <span class="pf-v5-c-select__toggle-arrow">
1259
- <i class="fas fa-caret-down" aria-hidden="true"></i>
579
+ <button
580
+ class="pf-v5-c-menu-toggle"
581
+ type="button"
582
+ aria-expanded="false"
583
+ id="toolbar-selected-filters-toggle-group-collapsed-example-search-filter-menu"
584
+ >
585
+ <span class="pf-v5-c-menu-toggle__icon">
586
+ <i class="fas fa-filter" aria-hidden="true"></i>
587
+ </span>
588
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
589
+ <span class="pf-v5-c-menu-toggle__controls">
590
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
591
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1260
592
  </span>
1261
- </button>
1262
-
1263
- <ul
1264
- class="pf-v5-c-select__menu"
1265
- role="listbox"
1266
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1267
- hidden
1268
- >
1269
- <li role="presentation">
1270
- <button
1271
- class="pf-v5-c-select__menu-item"
1272
- role="option"
1273
- >Running</button>
1274
- </li>
1275
- <li role="presentation">
1276
- <button
1277
- class="pf-v5-c-select__menu-item pf-m-selected"
1278
- role="option"
1279
- aria-selected="true"
1280
- >
1281
- Stopped
1282
- <span class="pf-v5-c-select__menu-item-icon">
1283
- <i class="fas fa-check" aria-hidden="true"></i>
1284
- </span>
1285
- </button>
1286
- </li>
1287
- <li role="presentation">
1288
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
1289
- </li>
1290
- <li role="presentation">
1291
- <button
1292
- class="pf-v5-c-select__menu-item"
1293
- role="option"
1294
- >Degraded</button>
1295
- </li>
1296
- <li role="presentation">
1297
- <button
1298
- class="pf-v5-c-select__menu-item"
1299
- role="option"
1300
- >Needs maintenance</button>
1301
- </li>
1302
- </ul>
1303
- </div>
593
+ </span>
594
+ </button>
1304
595
  </div>
1305
596
  <div class="pf-v5-c-input-group__item pf-m-fill">
1306
597
  <div class="pf-v5-c-text-input-group">
@@ -1324,218 +615,34 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1324
615
  </div>
1325
616
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
1326
617
  <div class="pf-v5-c-toolbar__item">
1327
- <div class="pf-v5-c-select">
1328
- <span
1329
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-label"
1330
- hidden
1331
- >Choose many</span>
1332
-
1333
- <button
1334
- class="pf-v5-c-select__toggle"
1335
- type="button"
1336
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle"
1337
- aria-haspopup="true"
1338
- aria-expanded="false"
1339
- 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"
1340
- >
1341
- <div class="pf-v5-c-select__toggle-wrapper">
1342
- <span class="pf-v5-c-select__toggle-text">Status</span>
1343
- </div>
1344
- <span class="pf-v5-c-select__toggle-arrow">
1345
- <i class="fas fa-caret-down" aria-hidden="true"></i>
618
+ <button
619
+ class="pf-v5-c-menu-toggle"
620
+ type="button"
621
+ aria-expanded="false"
622
+ id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-checkbox-status"
623
+ >
624
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
625
+ <span class="pf-v5-c-menu-toggle__controls">
626
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
627
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1346
628
  </span>
1347
- </button>
1348
-
1349
- <div class="pf-v5-c-select__menu" hidden>
1350
- <fieldset
1351
- class="pf-v5-c-select__menu-fieldset"
1352
- aria-label="Select input"
1353
- >
1354
- <label
1355
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1356
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active"
1357
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
1358
- >
1359
- <input
1360
- class="pf-v5-c-check__input"
1361
- type="checkbox"
1362
- aria-describedby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active-description"
1363
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
1364
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active-input"
1365
- />
1366
- <span class="pf-v5-c-check__label">Active</span>
1367
- <span
1368
- class="pf-v5-c-check__description"
1369
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-active-description"
1370
- >This is a description</span>
1371
- </label>
1372
- <label
1373
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1374
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled"
1375
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
1376
- >
1377
- <input
1378
- class="pf-v5-c-check__input"
1379
- type="checkbox"
1380
- aria-describedby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-description"
1381
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
1382
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-input"
1383
- />
1384
- <span class="pf-v5-c-check__label">Canceled</span>
1385
- <span
1386
- class="pf-v5-c-check__description"
1387
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-canceled-description"
1388
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1389
- </label>
1390
- <label
1391
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1392
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused"
1393
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
1394
- >
1395
- <input
1396
- class="pf-v5-c-check__input"
1397
- type="checkbox"
1398
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
1399
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-paused-input"
1400
- />
1401
- <span class="pf-v5-c-check__label">Paused</span>
1402
- </label>
1403
- <label
1404
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1405
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning"
1406
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
1407
- >
1408
- <input
1409
- class="pf-v5-c-check__input"
1410
- type="checkbox"
1411
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
1412
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-warning-input"
1413
- />
1414
- <span class="pf-v5-c-check__label">Warning</span>
1415
- </label>
1416
- <label
1417
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1418
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted"
1419
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
1420
- >
1421
- <input
1422
- class="pf-v5-c-check__input"
1423
- type="checkbox"
1424
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
1425
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-restarted-input"
1426
- />
1427
- <span class="pf-v5-c-check__label">Restarted</span>
1428
- </label>
1429
- </fieldset>
1430
- </div>
1431
- </div>
629
+ </span>
630
+ </button>
1432
631
  </div>
1433
632
  <div class="pf-v5-c-toolbar__item">
1434
- <div class="pf-v5-c-select">
1435
- <span
1436
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-label"
1437
- hidden
1438
- >Choose many</span>
1439
-
1440
- <button
1441
- class="pf-v5-c-select__toggle"
1442
- type="button"
1443
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-toggle"
1444
- aria-haspopup="true"
1445
- aria-expanded="false"
1446
- 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"
1447
- >
1448
- <div class="pf-v5-c-select__toggle-wrapper">
1449
- <span class="pf-v5-c-select__toggle-text">Risk</span>
1450
- </div>
1451
- <span class="pf-v5-c-select__toggle-arrow">
1452
- <i class="fas fa-caret-down" aria-hidden="true"></i>
633
+ <button
634
+ class="pf-v5-c-menu-toggle"
635
+ type="button"
636
+ aria-expanded="false"
637
+ id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-checkbox-risk"
638
+ >
639
+ <span class="pf-v5-c-menu-toggle__text">Risk</span>
640
+ <span class="pf-v5-c-menu-toggle__controls">
641
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
642
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1453
643
  </span>
1454
- </button>
1455
-
1456
- <div class="pf-v5-c-select__menu" hidden>
1457
- <fieldset
1458
- class="pf-v5-c-select__menu-fieldset"
1459
- aria-label="Select input"
1460
- >
1461
- <label
1462
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1463
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active"
1464
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
1465
- >
1466
- <input
1467
- class="pf-v5-c-check__input"
1468
- type="checkbox"
1469
- aria-describedby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-description"
1470
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
1471
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-input"
1472
- />
1473
- <span class="pf-v5-c-check__label">Active</span>
1474
- <span
1475
- class="pf-v5-c-check__description"
1476
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-active-description"
1477
- >This is a description</span>
1478
- </label>
1479
- <label
1480
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1481
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled"
1482
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
1483
- >
1484
- <input
1485
- class="pf-v5-c-check__input"
1486
- type="checkbox"
1487
- aria-describedby="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-description"
1488
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
1489
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-input"
1490
- />
1491
- <span class="pf-v5-c-check__label">Canceled</span>
1492
- <span
1493
- class="pf-v5-c-check__description"
1494
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-canceled-description"
1495
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1496
- </label>
1497
- <label
1498
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1499
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused"
1500
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
1501
- >
1502
- <input
1503
- class="pf-v5-c-check__input"
1504
- type="checkbox"
1505
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
1506
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-paused-input"
1507
- />
1508
- <span class="pf-v5-c-check__label">Paused</span>
1509
- </label>
1510
- <label
1511
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1512
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning"
1513
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
1514
- >
1515
- <input
1516
- class="pf-v5-c-check__input"
1517
- type="checkbox"
1518
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
1519
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-warning-input"
1520
- />
1521
- <span class="pf-v5-c-check__label">Warning</span>
1522
- </label>
1523
- <label
1524
- class="pf-v5-c-check pf-v5-c-select__menu-item"
1525
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted"
1526
- for="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
1527
- >
1528
- <input
1529
- class="pf-v5-c-check__input"
1530
- type="checkbox"
1531
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
1532
- name="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-restarted-input"
1533
- />
1534
- <span class="pf-v5-c-check__label">Restarted</span>
1535
- </label>
1536
- </fieldset>
1537
- </div>
1538
- </div>
644
+ </span>
645
+ </button>
1539
646
  </div>
1540
647
  </div>
1541
648
  </div>
@@ -1591,174 +698,184 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1591
698
  hidden
1592
699
  >
1593
700
  <div class="pf-v5-c-toolbar__group pf-m-chip-container">
1594
- <div class="pf-v5-c-toolbar__item pf-m-chip-group">
1595
- <div class="pf-v5-c-chip-group pf-m-category" role="group">
1596
- <div class="pf-v5-c-chip-group__main">
1597
- <span
1598
- class="pf-v5-c-chip-group__label"
1599
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
1600
- >Status</span>
1601
- <ul
1602
- class="pf-v5-c-chip-group__list"
1603
- role="list"
1604
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
1605
- >
1606
- <li class="pf-v5-c-chip-group__list-item">
1607
- <div class="pf-v5-c-chip">
1608
- <span class="pf-v5-c-chip__content">
1609
- <span
1610
- class="pf-v5-c-chip__text"
1611
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
1612
- >Chip one</span>
1613
- </span>
1614
- <span class="pf-v5-c-chip__actions">
1615
- <button
1616
- class="pf-v5-c-button pf-m-plain"
1617
- type="button"
1618
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
1619
- aria-label="Remove"
1620
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one"
1621
- >
1622
- <i class="fas fa-times" aria-hidden="true"></i>
1623
- </button>
1624
- </span>
1625
- </div>
1626
- </li>
1627
- <li class="pf-v5-c-chip-group__list-item">
1628
- <div class="pf-v5-c-chip">
1629
- <span class="pf-v5-c-chip__content">
1630
- <span
1631
- class="pf-v5-c-chip__text"
1632
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
1633
- >Chip two</span>
1634
- </span>
1635
- <span class="pf-v5-c-chip__actions">
1636
- <button
1637
- class="pf-v5-c-button pf-m-plain"
1638
- type="button"
1639
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
1640
- aria-label="Remove"
1641
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two"
1642
- >
1643
- <i class="fas fa-times" aria-hidden="true"></i>
1644
- </button>
1645
- </span>
1646
- </div>
1647
- </li>
1648
- <li class="pf-v5-c-chip-group__list-item">
1649
- <div class="pf-v5-c-chip">
1650
- <span class="pf-v5-c-chip__content">
1651
- <span
1652
- class="pf-v5-c-chip__text"
1653
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
1654
- >Chip three</span>
1655
- </span>
1656
- <span class="pf-v5-c-chip__actions">
1657
- <button
1658
- class="pf-v5-c-button pf-m-plain"
1659
- type="button"
1660
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
1661
- aria-label="Remove"
1662
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three"
1663
- >
1664
- <i class="fas fa-times" aria-hidden="true"></i>
1665
- </button>
1666
- </span>
1667
- </div>
1668
- </li>
1669
- </ul>
1670
- </div>
1671
- </div>
1672
- </div>
1673
- <div class="pf-v5-c-toolbar__item pf-m-chip-group">
1674
- <div class="pf-v5-c-chip-group pf-m-category" role="group">
1675
- <div class="pf-v5-c-chip-group__main">
1676
- <span
1677
- class="pf-v5-c-chip-group__label"
1678
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
1679
- >Risk</span>
1680
- <ul
1681
- class="pf-v5-c-chip-group__list"
1682
- role="list"
1683
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
1684
- >
1685
- <li class="pf-v5-c-chip-group__list-item">
1686
- <div class="pf-v5-c-chip">
1687
- <span class="pf-v5-c-chip__content">
1688
- <span
1689
- class="pf-v5-c-chip__text"
1690
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
1691
- >Chip one</span>
1692
- </span>
1693
- <span class="pf-v5-c-chip__actions">
1694
- <button
1695
- class="pf-v5-c-button pf-m-plain"
1696
- type="button"
1697
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
1698
- aria-label="Remove"
1699
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one"
1700
- >
1701
- <i class="fas fa-times" aria-hidden="true"></i>
1702
- </button>
1703
- </span>
1704
- </div>
1705
- </li>
1706
- <li class="pf-v5-c-chip-group__list-item">
1707
- <div class="pf-v5-c-chip">
1708
- <span class="pf-v5-c-chip__content">
1709
- <span
1710
- class="pf-v5-c-chip__text"
1711
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
1712
- >Chip two</span>
1713
- </span>
1714
- <span class="pf-v5-c-chip__actions">
1715
- <button
1716
- class="pf-v5-c-button pf-m-plain"
1717
- type="button"
1718
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
1719
- aria-label="Remove"
1720
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two"
1721
- >
1722
- <i class="fas fa-times" aria-hidden="true"></i>
1723
- </button>
1724
- </span>
1725
- </div>
1726
- </li>
1727
- <li class="pf-v5-c-chip-group__list-item">
1728
- <div class="pf-v5-c-chip">
1729
- <span class="pf-v5-c-chip__content">
1730
- <span
1731
- class="pf-v5-c-chip__text"
1732
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
1733
- >Chip three</span>
1734
- </span>
1735
- <span class="pf-v5-c-chip__actions">
1736
- <button
1737
- class="pf-v5-c-button pf-m-plain"
1738
- type="button"
1739
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
1740
- aria-label="Remove"
1741
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three"
1742
- >
1743
- <i class="fas fa-times" aria-hidden="true"></i>
1744
- </button>
1745
- </span>
1746
- </div>
1747
- </li>
1748
- </ul>
701
+ <div class="pf-v5-c-toolbar__group pf-m-grow">
702
+ <div class="pf-v5-c-toolbar__item">
703
+ <div class="pf-v5-c-chip-group" role="group">
704
+ <div class="pf-v5-c-chip-group__main">
705
+ <span
706
+ class="pf-v5-c-chip-group__label"
707
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
708
+ >Status</span>
709
+ <ul
710
+ class="pf-v5-c-chip-group__list"
711
+ role="list"
712
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
713
+ >
714
+ <li class="pf-v5-c-chip-group__list-item">
715
+ <div class="pf-v5-c-chip">
716
+ <span class="pf-v5-c-chip__content">
717
+ <span
718
+ class="pf-v5-c-chip__text"
719
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
720
+ >Chip one</span>
721
+ </span>
722
+ <span class="pf-v5-c-chip__actions">
723
+ <button
724
+ class="pf-v5-c-button pf-m-plain"
725
+ type="button"
726
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
727
+ aria-label="Remove"
728
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one"
729
+ >
730
+ <i class="fas fa-times" aria-hidden="true"></i>
731
+ </button>
732
+ </span>
733
+ </div>
734
+ </li>
735
+ <li class="pf-v5-c-chip-group__list-item">
736
+ <div class="pf-v5-c-chip">
737
+ <span class="pf-v5-c-chip__content">
738
+ <span
739
+ class="pf-v5-c-chip__text"
740
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
741
+ >Chip two</span>
742
+ </span>
743
+ <span class="pf-v5-c-chip__actions">
744
+ <button
745
+ class="pf-v5-c-button pf-m-plain"
746
+ type="button"
747
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
748
+ aria-label="Remove"
749
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two"
750
+ >
751
+ <i class="fas fa-times" aria-hidden="true"></i>
752
+ </button>
753
+ </span>
754
+ </div>
755
+ </li>
756
+ <li class="pf-v5-c-chip-group__list-item">
757
+ <div class="pf-v5-c-chip">
758
+ <span class="pf-v5-c-chip__content">
759
+ <span
760
+ class="pf-v5-c-chip__text"
761
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
762
+ >Chip three</span>
763
+ </span>
764
+ <span class="pf-v5-c-chip__actions">
765
+ <button
766
+ class="pf-v5-c-button pf-m-plain"
767
+ type="button"
768
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
769
+ aria-label="Remove"
770
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three"
771
+ >
772
+ <i class="fas fa-times" aria-hidden="true"></i>
773
+ </button>
774
+ </span>
775
+ </div>
776
+ </li>
777
+ </ul>
778
+ </div>
779
+ </div>
780
+ </div>
781
+ <div class="pf-v5-c-toolbar__item">
782
+ <div class="pf-v5-c-chip-group" role="group">
783
+ <div class="pf-v5-c-chip-group__main">
784
+ <span
785
+ class="pf-v5-c-chip-group__label"
786
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
787
+ >Risk</span>
788
+ <ul
789
+ class="pf-v5-c-chip-group__list"
790
+ role="list"
791
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
792
+ >
793
+ <li class="pf-v5-c-chip-group__list-item">
794
+ <div class="pf-v5-c-chip">
795
+ <span class="pf-v5-c-chip__content">
796
+ <span
797
+ class="pf-v5-c-chip__text"
798
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
799
+ >Chip one</span>
800
+ </span>
801
+ <span class="pf-v5-c-chip__actions">
802
+ <button
803
+ class="pf-v5-c-button pf-m-plain"
804
+ type="button"
805
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
806
+ aria-label="Remove"
807
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one"
808
+ >
809
+ <i class="fas fa-times" aria-hidden="true"></i>
810
+ </button>
811
+ </span>
812
+ </div>
813
+ </li>
814
+ <li class="pf-v5-c-chip-group__list-item">
815
+ <div class="pf-v5-c-chip">
816
+ <span class="pf-v5-c-chip__content">
817
+ <span
818
+ class="pf-v5-c-chip__text"
819
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
820
+ >Chip two</span>
821
+ </span>
822
+ <span class="pf-v5-c-chip__actions">
823
+ <button
824
+ class="pf-v5-c-button pf-m-plain"
825
+ type="button"
826
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
827
+ aria-label="Remove"
828
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two"
829
+ >
830
+ <i class="fas fa-times" aria-hidden="true"></i>
831
+ </button>
832
+ </span>
833
+ </div>
834
+ </li>
835
+ <li class="pf-v5-c-chip-group__list-item">
836
+ <div class="pf-v5-c-chip">
837
+ <span class="pf-v5-c-chip__content">
838
+ <span
839
+ class="pf-v5-c-chip__text"
840
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
841
+ >Chip three</span>
842
+ </span>
843
+ <span class="pf-v5-c-chip__actions">
844
+ <button
845
+ class="pf-v5-c-button pf-m-plain"
846
+ type="button"
847
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
848
+ aria-label="Remove"
849
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three"
850
+ >
851
+ <i class="fas fa-times" aria-hidden="true"></i>
852
+ </button>
853
+ </span>
854
+ </div>
855
+ </li>
856
+ </ul>
857
+ </div>
1749
858
  </div>
1750
859
  </div>
1751
860
  </div>
861
+ <div class="pf-v5-c-toolbar__item">
862
+ <button
863
+ class="pf-v5-c-button pf-m-link pf-m-inline"
864
+ type="button"
865
+ >Clear all filters</button>
866
+ </div>
1752
867
  </div>
1753
868
  </div>
1754
869
  </div>
1755
870
  <div class="pf-v5-c-toolbar__content">
1756
- <div class="pf-v5-c-toolbar__item">6 filters applied</div>
1757
- <div class="pf-v5-c-toolbar__item">
1758
- <button
1759
- class="pf-v5-c-button pf-m-link pf-m-inline"
1760
- type="button"
1761
- >Clear all filters</button>
871
+ <div class="pf-v5-c-toolbar__group">
872
+ <div class="pf-v5-c-toolbar__item">6 filters applied</div>
873
+ <div class="pf-v5-c-toolbar__item">
874
+ <button
875
+ class="pf-v5-c-button pf-m-link pf-m-inline"
876
+ type="button"
877
+ >Clear all filters</button>
878
+ </div>
1762
879
  </div>
1763
880
  </div>
1764
881
  </div>
@@ -1775,64 +892,45 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1775
892
  <div class="pf-v5-c-toolbar__content">
1776
893
  <div class="pf-v5-c-toolbar__content-section">
1777
894
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
1778
- <div class="pf-v5-c-dropdown">
1779
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
1780
- <label
1781
- class="pf-v5-c-dropdown__toggle-check"
1782
- for="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-check"
1783
- >
1784
- <div class="pf-v5-c-check pf-m-standalone">
1785
- <input
1786
- class="pf-v5-c-check__input"
1787
- type="checkbox"
1788
- id="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-check"
1789
- aria-label="Select all"
1790
- />
1791
- </div>
1792
- </label>
1793
-
1794
- <button
1795
- class="pf-v5-c-dropdown__toggle-button"
1796
- type="button"
1797
- aria-expanded="false"
1798
- id="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-button"
1799
- aria-label="Dropdown toggle"
1800
- >
1801
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1802
- </button>
1803
- </div>
1804
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1805
- <li role="none">
1806
- <button
1807
- class="pf-v5-c-dropdown__menu-item"
1808
- role="menuitem"
1809
- type="button"
1810
- >Select all</button>
1811
- </li>
1812
- <li role="none">
1813
- <button
1814
- class="pf-v5-c-dropdown__menu-item"
1815
- role="menuitem"
1816
- type="button"
1817
- >Select none</button>
1818
- </li>
1819
- <li role="none">
1820
- <button
1821
- class="pf-v5-c-dropdown__menu-item"
1822
- role="menuitem"
1823
- type="button"
1824
- >Other action</button>
1825
- </li>
1826
- </ul>
895
+ <div
896
+ class="pf-v5-c-menu-toggle pf-m-split-button"
897
+ id="toolbar-selected-filters-toggle-group-expanded-example-check"
898
+ >
899
+ <label
900
+ class="pf-v5-c-check pf-m-standalone"
901
+ id="toolbar-selected-filters-toggle-group-expanded-example-check-check"
902
+ for="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
903
+ >
904
+ <input
905
+ class="pf-v5-c-check__input"
906
+ type="checkbox"
907
+ id="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
908
+ name="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
909
+ aria-label="Standalone check"
910
+ />
911
+ </label>
912
+ <button
913
+ class="pf-v5-c-menu-toggle__button"
914
+ type="button"
915
+ aria-expanded="false"
916
+ id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-toggle-button"
917
+ aria-label="Menu toggle"
918
+ >
919
+ <span class="pf-v5-c-menu-toggle__controls">
920
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
921
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
922
+ </span>
923
+ </span>
924
+ </button>
1827
925
  </div>
1828
926
  </div>
1829
927
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
1830
- <div class="pf-v5-c-toolbar__toggle pf-m-expanded">
928
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1831
929
  <button
1832
- class="pf-v5-c-button pf-m-plain"
930
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
1833
931
  type="button"
1834
- aria-label="Show filters"
1835
932
  aria-expanded="true"
933
+ aria-label="Show filters"
1836
934
  aria-controls="toolbar-selected-filters-toggle-group-expanded-example-expandable-content"
1837
935
  >
1838
936
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -1896,72 +994,22 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1896
994
  role="group"
1897
995
  >
1898
996
  <div class="pf-v5-c-input-group__item">
1899
- <div class="pf-v5-c-select" style="width: 124px">
1900
- <span
1901
- id="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1902
- hidden
1903
- >Choose one</span>
1904
-
1905
- <button
1906
- class="pf-v5-c-select__toggle"
1907
- type="button"
1908
- id="toolbar-selected-filters-toggle-group-expanded-example-select-name-toggle"
1909
- aria-haspopup="true"
1910
- aria-expanded="false"
1911
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label toolbar-selected-filters-toggle-group-expanded-example-select-name-toggle"
1912
- >
1913
- <div class="pf-v5-c-select__toggle-wrapper">
1914
- <span class="pf-v5-c-select__toggle-icon">
1915
- <i class="fas fa-filter" aria-hidden="true"></i>
1916
- </span>
1917
- <span class="pf-v5-c-select__toggle-text">Name</span>
1918
- </div>
1919
- <span class="pf-v5-c-select__toggle-arrow">
1920
- <i class="fas fa-caret-down" aria-hidden="true"></i>
997
+ <button
998
+ class="pf-v5-c-menu-toggle"
999
+ type="button"
1000
+ aria-expanded="false"
1001
+ id="toolbar-selected-filters-toggle-group-expanded-example-search-filter-menu"
1002
+ >
1003
+ <span class="pf-v5-c-menu-toggle__icon">
1004
+ <i class="fas fa-filter" aria-hidden="true"></i>
1005
+ </span>
1006
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
1007
+ <span class="pf-v5-c-menu-toggle__controls">
1008
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1009
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1921
1010
  </span>
1922
- </button>
1923
-
1924
- <ul
1925
- class="pf-v5-c-select__menu"
1926
- role="listbox"
1927
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1928
- hidden
1929
- >
1930
- <li role="presentation">
1931
- <button
1932
- class="pf-v5-c-select__menu-item"
1933
- role="option"
1934
- >Running</button>
1935
- </li>
1936
- <li role="presentation">
1937
- <button
1938
- class="pf-v5-c-select__menu-item pf-m-selected"
1939
- role="option"
1940
- aria-selected="true"
1941
- >
1942
- Stopped
1943
- <span class="pf-v5-c-select__menu-item-icon">
1944
- <i class="fas fa-check" aria-hidden="true"></i>
1945
- </span>
1946
- </button>
1947
- </li>
1948
- <li role="presentation">
1949
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
1950
- </li>
1951
- <li role="presentation">
1952
- <button
1953
- class="pf-v5-c-select__menu-item"
1954
- role="option"
1955
- >Degraded</button>
1956
- </li>
1957
- <li role="presentation">
1958
- <button
1959
- class="pf-v5-c-select__menu-item"
1960
- role="option"
1961
- >Needs maintenance</button>
1962
- </li>
1963
- </ul>
1964
- </div>
1011
+ </span>
1012
+ </button>
1965
1013
  </div>
1966
1014
  <div class="pf-v5-c-input-group__item pf-m-fill">
1967
1015
  <div class="pf-v5-c-text-input-group">
@@ -1985,224 +1033,40 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1985
1033
  </div>
1986
1034
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
1987
1035
  <div class="pf-v5-c-toolbar__item">
1988
- <div class="pf-v5-c-select">
1989
- <span
1990
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-label"
1991
- hidden
1992
- >Choose many</span>
1993
-
1994
- <button
1995
- class="pf-v5-c-select__toggle"
1996
- type="button"
1997
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-toggle"
1998
- aria-haspopup="true"
1999
- aria-expanded="false"
2000
- 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"
2001
- >
2002
- <div class="pf-v5-c-select__toggle-wrapper">
2003
- <span class="pf-v5-c-select__toggle-text">Status</span>
2004
- </div>
2005
- <span class="pf-v5-c-select__toggle-arrow">
2006
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1036
+ <button
1037
+ class="pf-v5-c-menu-toggle"
1038
+ type="button"
1039
+ aria-expanded="false"
1040
+ id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-status"
1041
+ >
1042
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
1043
+ <span class="pf-v5-c-menu-toggle__controls">
1044
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1045
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2007
1046
  </span>
2008
- </button>
2009
-
2010
- <div class="pf-v5-c-select__menu" hidden>
2011
- <fieldset
2012
- class="pf-v5-c-select__menu-fieldset"
2013
- aria-label="Select input"
2014
- >
2015
- <label
2016
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2017
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active"
2018
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active-input"
2019
- >
2020
- <input
2021
- class="pf-v5-c-check__input"
2022
- type="checkbox"
2023
- aria-describedby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active-description"
2024
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active-input"
2025
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active-input"
2026
- />
2027
- <span class="pf-v5-c-check__label">Active</span>
2028
- <span
2029
- class="pf-v5-c-check__description"
2030
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-active-description"
2031
- >This is a description</span>
2032
- </label>
2033
- <label
2034
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2035
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled"
2036
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled-input"
2037
- >
2038
- <input
2039
- class="pf-v5-c-check__input"
2040
- type="checkbox"
2041
- aria-describedby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled-description"
2042
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled-input"
2043
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled-input"
2044
- />
2045
- <span class="pf-v5-c-check__label">Canceled</span>
2046
- <span
2047
- class="pf-v5-c-check__description"
2048
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-canceled-description"
2049
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2050
- </label>
2051
- <label
2052
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2053
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused"
2054
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused-input"
2055
- >
2056
- <input
2057
- class="pf-v5-c-check__input"
2058
- type="checkbox"
2059
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused-input"
2060
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-paused-input"
2061
- />
2062
- <span class="pf-v5-c-check__label">Paused</span>
2063
- </label>
2064
- <label
2065
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2066
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning"
2067
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning-input"
2068
- >
2069
- <input
2070
- class="pf-v5-c-check__input"
2071
- type="checkbox"
2072
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning-input"
2073
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-warning-input"
2074
- />
2075
- <span class="pf-v5-c-check__label">Warning</span>
2076
- </label>
2077
- <label
2078
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2079
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted"
2080
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted-input"
2081
- >
2082
- <input
2083
- class="pf-v5-c-check__input"
2084
- type="checkbox"
2085
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted-input"
2086
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-restarted-input"
2087
- />
2088
- <span class="pf-v5-c-check__label">Restarted</span>
2089
- </label>
2090
- </fieldset>
2091
- </div>
2092
- </div>
1047
+ </span>
1048
+ </button>
2093
1049
  </div>
2094
1050
  <div class="pf-v5-c-toolbar__item">
2095
- <div class="pf-v5-c-select">
2096
- <span
2097
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-label"
2098
- hidden
2099
- >Choose many</span>
2100
-
2101
- <button
2102
- class="pf-v5-c-select__toggle"
2103
- type="button"
2104
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-toggle"
2105
- aria-haspopup="true"
2106
- aria-expanded="false"
2107
- 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"
2108
- >
2109
- <div class="pf-v5-c-select__toggle-wrapper">
2110
- <span class="pf-v5-c-select__toggle-text">Risk</span>
2111
- </div>
2112
- <span class="pf-v5-c-select__toggle-arrow">
2113
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1051
+ <button
1052
+ class="pf-v5-c-menu-toggle"
1053
+ type="button"
1054
+ aria-expanded="false"
1055
+ id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-risk"
1056
+ >
1057
+ <span class="pf-v5-c-menu-toggle__text">Risk</span>
1058
+ <span class="pf-v5-c-menu-toggle__controls">
1059
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1060
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2114
1061
  </span>
2115
- </button>
2116
-
2117
- <div class="pf-v5-c-select__menu" hidden>
2118
- <fieldset
2119
- class="pf-v5-c-select__menu-fieldset"
2120
- aria-label="Select input"
2121
- >
2122
- <label
2123
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2124
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active"
2125
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active-input"
2126
- >
2127
- <input
2128
- class="pf-v5-c-check__input"
2129
- type="checkbox"
2130
- aria-describedby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active-description"
2131
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active-input"
2132
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active-input"
2133
- />
2134
- <span class="pf-v5-c-check__label">Active</span>
2135
- <span
2136
- class="pf-v5-c-check__description"
2137
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-active-description"
2138
- >This is a description</span>
2139
- </label>
2140
- <label
2141
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2142
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled"
2143
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled-input"
2144
- >
2145
- <input
2146
- class="pf-v5-c-check__input"
2147
- type="checkbox"
2148
- aria-describedby="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled-description"
2149
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled-input"
2150
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled-input"
2151
- />
2152
- <span class="pf-v5-c-check__label">Canceled</span>
2153
- <span
2154
- class="pf-v5-c-check__description"
2155
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-canceled-description"
2156
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2157
- </label>
2158
- <label
2159
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2160
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused"
2161
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused-input"
2162
- >
2163
- <input
2164
- class="pf-v5-c-check__input"
2165
- type="checkbox"
2166
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused-input"
2167
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-paused-input"
2168
- />
2169
- <span class="pf-v5-c-check__label">Paused</span>
2170
- </label>
2171
- <label
2172
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2173
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning"
2174
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning-input"
2175
- >
2176
- <input
2177
- class="pf-v5-c-check__input"
2178
- type="checkbox"
2179
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning-input"
2180
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-warning-input"
2181
- />
2182
- <span class="pf-v5-c-check__label">Warning</span>
2183
- </label>
2184
- <label
2185
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2186
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted"
2187
- for="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted-input"
2188
- >
2189
- <input
2190
- class="pf-v5-c-check__input"
2191
- type="checkbox"
2192
- id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted-input"
2193
- name="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-restarted-input"
2194
- />
2195
- <span class="pf-v5-c-check__label">Restarted</span>
2196
- </label>
2197
- </fieldset>
2198
- </div>
2199
- </div>
1062
+ </span>
1063
+ </button>
2200
1064
  </div>
2201
1065
  </div>
2202
1066
  <div class="pf-v5-c-toolbar__group pf-m-chip-container">
2203
- <div class="pf-v5-c-toolbar__group">
2204
- <div class="pf-v5-c-toolbar__item pf-m-chip-group">
2205
- <div class="pf-v5-c-chip-group pf-m-category" role="group">
1067
+ <div class="pf-v5-c-toolbar__group pf-m-grow">
1068
+ <div class="pf-v5-c-toolbar__item">
1069
+ <div class="pf-v5-c-chip-group" role="group">
2206
1070
  <div class="pf-v5-c-chip-group__main">
2207
1071
  <span
2208
1072
  class="pf-v5-c-chip-group__label"
@@ -2280,8 +1144,8 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2280
1144
  </div>
2281
1145
  </div>
2282
1146
  </div>
2283
- <div class="pf-v5-c-toolbar__item pf-m-chip-group">
2284
- <div class="pf-v5-c-chip-group pf-m-category" role="group">
1147
+ <div class="pf-v5-c-toolbar__item">
1148
+ <div class="pf-v5-c-chip-group" role="group">
2285
1149
  <div class="pf-v5-c-chip-group__main">
2286
1150
  <span
2287
1151
  class="pf-v5-c-chip-group__label"
@@ -2380,64 +1244,45 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2380
1244
  <div class="pf-v5-c-toolbar__content">
2381
1245
  <div class="pf-v5-c-toolbar__content-section">
2382
1246
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
2383
- <div class="pf-v5-c-dropdown">
2384
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
2385
- <label
2386
- class="pf-v5-c-dropdown__toggle-check"
2387
- for="toolbar-selected-filters-example-bulk-select-toggle-check"
2388
- >
2389
- <div class="pf-v5-c-check pf-m-standalone">
2390
- <input
2391
- class="pf-v5-c-check__input"
2392
- type="checkbox"
2393
- id="toolbar-selected-filters-example-bulk-select-toggle-check"
2394
- aria-label="Select all"
2395
- />
2396
- </div>
2397
- </label>
2398
-
2399
- <button
2400
- class="pf-v5-c-dropdown__toggle-button"
2401
- type="button"
2402
- aria-expanded="false"
2403
- id="toolbar-selected-filters-example-bulk-select-toggle-button"
2404
- aria-label="Dropdown toggle"
2405
- >
2406
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2407
- </button>
2408
- </div>
2409
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
2410
- <li role="none">
2411
- <button
2412
- class="pf-v5-c-dropdown__menu-item"
2413
- role="menuitem"
2414
- type="button"
2415
- >Select all</button>
2416
- </li>
2417
- <li role="none">
2418
- <button
2419
- class="pf-v5-c-dropdown__menu-item"
2420
- role="menuitem"
2421
- type="button"
2422
- >Select none</button>
2423
- </li>
2424
- <li role="none">
2425
- <button
2426
- class="pf-v5-c-dropdown__menu-item"
2427
- role="menuitem"
2428
- type="button"
2429
- >Other action</button>
2430
- </li>
2431
- </ul>
1247
+ <div
1248
+ class="pf-v5-c-menu-toggle pf-m-split-button"
1249
+ id="toolbar-selected-filters-example-check"
1250
+ >
1251
+ <label
1252
+ class="pf-v5-c-check pf-m-standalone"
1253
+ id="toolbar-selected-filters-example-check-check"
1254
+ for="toolbar-selected-filters-example-check-check-input"
1255
+ >
1256
+ <input
1257
+ class="pf-v5-c-check__input"
1258
+ type="checkbox"
1259
+ id="toolbar-selected-filters-example-check-check-input"
1260
+ name="toolbar-selected-filters-example-check-check-input"
1261
+ aria-label="Standalone check"
1262
+ />
1263
+ </label>
1264
+ <button
1265
+ class="pf-v5-c-menu-toggle__button"
1266
+ type="button"
1267
+ aria-expanded="false"
1268
+ id="toolbar-selected-filters-example-menu-toggle-toggle-button"
1269
+ aria-label="Menu toggle"
1270
+ >
1271
+ <span class="pf-v5-c-menu-toggle__controls">
1272
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1273
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1274
+ </span>
1275
+ </span>
1276
+ </button>
2432
1277
  </div>
2433
1278
  </div>
2434
1279
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
2435
- <div class="pf-v5-c-toolbar__toggle">
1280
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
2436
1281
  <button
2437
- class="pf-v5-c-button pf-m-plain"
1282
+ class="pf-v5-c-menu-toggle pf-m-plain"
2438
1283
  type="button"
2439
- aria-label="Show filters"
2440
1284
  aria-expanded="false"
1285
+ aria-label="Show filters"
2441
1286
  aria-controls="toolbar-selected-filters-example-expandable-content"
2442
1287
  >
2443
1288
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -2445,218 +1290,34 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2445
1290
  </div>
2446
1291
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
2447
1292
  <div class="pf-v5-c-toolbar__item">
2448
- <div class="pf-v5-c-select">
2449
- <span
2450
- id="toolbar-selected-filters-example-select-checkbox-status-label"
2451
- hidden
2452
- >Choose many</span>
2453
-
2454
- <button
2455
- class="pf-v5-c-select__toggle"
2456
- type="button"
2457
- id="toolbar-selected-filters-example-select-checkbox-status-toggle"
2458
- aria-haspopup="true"
2459
- aria-expanded="false"
2460
- aria-labelledby="toolbar-selected-filters-example-select-checkbox-status-label toolbar-selected-filters-example-select-checkbox-status-toggle"
2461
- >
2462
- <div class="pf-v5-c-select__toggle-wrapper">
2463
- <span class="pf-v5-c-select__toggle-text">Status</span>
2464
- </div>
2465
- <span class="pf-v5-c-select__toggle-arrow">
2466
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1293
+ <button
1294
+ class="pf-v5-c-menu-toggle"
1295
+ type="button"
1296
+ aria-expanded="false"
1297
+ id="toolbar-selected-filters-example-menu-toggle-checkbox-status"
1298
+ >
1299
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
1300
+ <span class="pf-v5-c-menu-toggle__controls">
1301
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1302
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2467
1303
  </span>
2468
- </button>
2469
-
2470
- <div class="pf-v5-c-select__menu" hidden>
2471
- <fieldset
2472
- class="pf-v5-c-select__menu-fieldset"
2473
- aria-label="Select input"
2474
- >
2475
- <label
2476
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2477
- id="toolbar-selected-filters-example-select-checkbox-status-active"
2478
- for="toolbar-selected-filters-example-select-checkbox-status-active-input"
2479
- >
2480
- <input
2481
- class="pf-v5-c-check__input"
2482
- type="checkbox"
2483
- aria-describedby="toolbar-selected-filters-example-select-checkbox-status-active-description"
2484
- id="toolbar-selected-filters-example-select-checkbox-status-active-input"
2485
- name="toolbar-selected-filters-example-select-checkbox-status-active-input"
2486
- />
2487
- <span class="pf-v5-c-check__label">Active</span>
2488
- <span
2489
- class="pf-v5-c-check__description"
2490
- id="toolbar-selected-filters-example-select-checkbox-status-active-description"
2491
- >This is a description</span>
2492
- </label>
2493
- <label
2494
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2495
- id="toolbar-selected-filters-example-select-checkbox-status-canceled"
2496
- for="toolbar-selected-filters-example-select-checkbox-status-canceled-input"
2497
- >
2498
- <input
2499
- class="pf-v5-c-check__input"
2500
- type="checkbox"
2501
- aria-describedby="toolbar-selected-filters-example-select-checkbox-status-canceled-description"
2502
- id="toolbar-selected-filters-example-select-checkbox-status-canceled-input"
2503
- name="toolbar-selected-filters-example-select-checkbox-status-canceled-input"
2504
- />
2505
- <span class="pf-v5-c-check__label">Canceled</span>
2506
- <span
2507
- class="pf-v5-c-check__description"
2508
- id="toolbar-selected-filters-example-select-checkbox-status-canceled-description"
2509
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2510
- </label>
2511
- <label
2512
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2513
- id="toolbar-selected-filters-example-select-checkbox-status-paused"
2514
- for="toolbar-selected-filters-example-select-checkbox-status-paused-input"
2515
- >
2516
- <input
2517
- class="pf-v5-c-check__input"
2518
- type="checkbox"
2519
- id="toolbar-selected-filters-example-select-checkbox-status-paused-input"
2520
- name="toolbar-selected-filters-example-select-checkbox-status-paused-input"
2521
- />
2522
- <span class="pf-v5-c-check__label">Paused</span>
2523
- </label>
2524
- <label
2525
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2526
- id="toolbar-selected-filters-example-select-checkbox-status-warning"
2527
- for="toolbar-selected-filters-example-select-checkbox-status-warning-input"
2528
- >
2529
- <input
2530
- class="pf-v5-c-check__input"
2531
- type="checkbox"
2532
- id="toolbar-selected-filters-example-select-checkbox-status-warning-input"
2533
- name="toolbar-selected-filters-example-select-checkbox-status-warning-input"
2534
- />
2535
- <span class="pf-v5-c-check__label">Warning</span>
2536
- </label>
2537
- <label
2538
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2539
- id="toolbar-selected-filters-example-select-checkbox-status-restarted"
2540
- for="toolbar-selected-filters-example-select-checkbox-status-restarted-input"
2541
- >
2542
- <input
2543
- class="pf-v5-c-check__input"
2544
- type="checkbox"
2545
- id="toolbar-selected-filters-example-select-checkbox-status-restarted-input"
2546
- name="toolbar-selected-filters-example-select-checkbox-status-restarted-input"
2547
- />
2548
- <span class="pf-v5-c-check__label">Restarted</span>
2549
- </label>
2550
- </fieldset>
2551
- </div>
2552
- </div>
1304
+ </span>
1305
+ </button>
2553
1306
  </div>
2554
1307
  <div class="pf-v5-c-toolbar__item">
2555
- <div class="pf-v5-c-select">
2556
- <span
2557
- id="toolbar-selected-filters-example-select-checkbox-risk-label"
2558
- hidden
2559
- >Choose many</span>
2560
-
2561
- <button
2562
- class="pf-v5-c-select__toggle"
2563
- type="button"
2564
- id="toolbar-selected-filters-example-select-checkbox-risk-toggle"
2565
- aria-haspopup="true"
2566
- aria-expanded="false"
2567
- aria-labelledby="toolbar-selected-filters-example-select-checkbox-risk-label toolbar-selected-filters-example-select-checkbox-risk-toggle"
2568
- >
2569
- <div class="pf-v5-c-select__toggle-wrapper">
2570
- <span class="pf-v5-c-select__toggle-text">Risk</span>
2571
- </div>
2572
- <span class="pf-v5-c-select__toggle-arrow">
2573
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1308
+ <button
1309
+ class="pf-v5-c-menu-toggle"
1310
+ type="button"
1311
+ aria-expanded="false"
1312
+ id="toolbar-selected-filters-example-menu-toggle-checkbox-risk"
1313
+ >
1314
+ <span class="pf-v5-c-menu-toggle__text">Risk</span>
1315
+ <span class="pf-v5-c-menu-toggle__controls">
1316
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1317
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2574
1318
  </span>
2575
- </button>
2576
-
2577
- <div class="pf-v5-c-select__menu" hidden>
2578
- <fieldset
2579
- class="pf-v5-c-select__menu-fieldset"
2580
- aria-label="Select input"
2581
- >
2582
- <label
2583
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2584
- id="toolbar-selected-filters-example-select-checkbox-risk-active"
2585
- for="toolbar-selected-filters-example-select-checkbox-risk-active-input"
2586
- >
2587
- <input
2588
- class="pf-v5-c-check__input"
2589
- type="checkbox"
2590
- aria-describedby="toolbar-selected-filters-example-select-checkbox-risk-active-description"
2591
- id="toolbar-selected-filters-example-select-checkbox-risk-active-input"
2592
- name="toolbar-selected-filters-example-select-checkbox-risk-active-input"
2593
- />
2594
- <span class="pf-v5-c-check__label">Active</span>
2595
- <span
2596
- class="pf-v5-c-check__description"
2597
- id="toolbar-selected-filters-example-select-checkbox-risk-active-description"
2598
- >This is a description</span>
2599
- </label>
2600
- <label
2601
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2602
- id="toolbar-selected-filters-example-select-checkbox-risk-canceled"
2603
- for="toolbar-selected-filters-example-select-checkbox-risk-canceled-input"
2604
- >
2605
- <input
2606
- class="pf-v5-c-check__input"
2607
- type="checkbox"
2608
- aria-describedby="toolbar-selected-filters-example-select-checkbox-risk-canceled-description"
2609
- id="toolbar-selected-filters-example-select-checkbox-risk-canceled-input"
2610
- name="toolbar-selected-filters-example-select-checkbox-risk-canceled-input"
2611
- />
2612
- <span class="pf-v5-c-check__label">Canceled</span>
2613
- <span
2614
- class="pf-v5-c-check__description"
2615
- id="toolbar-selected-filters-example-select-checkbox-risk-canceled-description"
2616
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2617
- </label>
2618
- <label
2619
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2620
- id="toolbar-selected-filters-example-select-checkbox-risk-paused"
2621
- for="toolbar-selected-filters-example-select-checkbox-risk-paused-input"
2622
- >
2623
- <input
2624
- class="pf-v5-c-check__input"
2625
- type="checkbox"
2626
- id="toolbar-selected-filters-example-select-checkbox-risk-paused-input"
2627
- name="toolbar-selected-filters-example-select-checkbox-risk-paused-input"
2628
- />
2629
- <span class="pf-v5-c-check__label">Paused</span>
2630
- </label>
2631
- <label
2632
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2633
- id="toolbar-selected-filters-example-select-checkbox-risk-warning"
2634
- for="toolbar-selected-filters-example-select-checkbox-risk-warning-input"
2635
- >
2636
- <input
2637
- class="pf-v5-c-check__input"
2638
- type="checkbox"
2639
- id="toolbar-selected-filters-example-select-checkbox-risk-warning-input"
2640
- name="toolbar-selected-filters-example-select-checkbox-risk-warning-input"
2641
- />
2642
- <span class="pf-v5-c-check__label">Warning</span>
2643
- </label>
2644
- <label
2645
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2646
- id="toolbar-selected-filters-example-select-checkbox-risk-restarted"
2647
- for="toolbar-selected-filters-example-select-checkbox-risk-restarted-input"
2648
- >
2649
- <input
2650
- class="pf-v5-c-check__input"
2651
- type="checkbox"
2652
- id="toolbar-selected-filters-example-select-checkbox-risk-restarted-input"
2653
- name="toolbar-selected-filters-example-select-checkbox-risk-restarted-input"
2654
- />
2655
- <span class="pf-v5-c-check__label">Restarted</span>
2656
- </label>
2657
- </fieldset>
2658
- </div>
2659
- </div>
1319
+ </span>
1320
+ </button>
2660
1321
  </div>
2661
1322
  </div>
2662
1323
  </div>
@@ -2752,521 +1413,263 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2752
1413
  </div>
2753
1414
  <div class="pf-v5-c-toolbar__content pf-m-chip-container">
2754
1415
  <div class="pf-v5-c-toolbar__group">
2755
- <div class="pf-v5-c-toolbar__item pf-m-chip-group">
2756
- <div class="pf-v5-c-chip-group pf-m-category" role="group">
2757
- <div class="pf-v5-c-chip-group__main">
2758
- <span
2759
- class="pf-v5-c-chip-group__label"
2760
- id="toolbar-selected-filters-example-chip-group-status-chip-group-label"
2761
- >Status</span>
2762
- <ul
2763
- class="pf-v5-c-chip-group__list"
2764
- role="list"
2765
- aria-labelledby="toolbar-selected-filters-example-chip-group-status-chip-group-label"
2766
- >
2767
- <li class="pf-v5-c-chip-group__list-item">
2768
- <div class="pf-v5-c-chip">
2769
- <span class="pf-v5-c-chip__content">
2770
- <span
2771
- class="pf-v5-c-chip__text"
2772
- id="toolbar-selected-filters-example-chip-group-statuschip-one"
2773
- >Chip one</span>
2774
- </span>
2775
- <span class="pf-v5-c-chip__actions">
2776
- <button
2777
- class="pf-v5-c-button pf-m-plain"
2778
- type="button"
2779
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-one toolbar-selected-filters-example-chip-group-statuschip-one"
2780
- aria-label="Remove"
2781
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-one"
2782
- >
2783
- <i class="fas fa-times" aria-hidden="true"></i>
2784
- </button>
2785
- </span>
2786
- </div>
2787
- </li>
2788
- <li class="pf-v5-c-chip-group__list-item">
2789
- <div class="pf-v5-c-chip">
2790
- <span class="pf-v5-c-chip__content">
2791
- <span
2792
- class="pf-v5-c-chip__text"
2793
- id="toolbar-selected-filters-example-chip-group-statuschip-two"
2794
- >Chip two</span>
2795
- </span>
2796
- <span class="pf-v5-c-chip__actions">
2797
- <button
2798
- class="pf-v5-c-button pf-m-plain"
2799
- type="button"
2800
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-two toolbar-selected-filters-example-chip-group-statuschip-two"
2801
- aria-label="Remove"
2802
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-two"
2803
- >
2804
- <i class="fas fa-times" aria-hidden="true"></i>
2805
- </button>
2806
- </span>
2807
- </div>
2808
- </li>
2809
- <li class="pf-v5-c-chip-group__list-item">
2810
- <div class="pf-v5-c-chip">
2811
- <span class="pf-v5-c-chip__content">
2812
- <span
2813
- class="pf-v5-c-chip__text"
2814
- id="toolbar-selected-filters-example-chip-group-statuschip-three"
2815
- >Chip three</span>
2816
- </span>
2817
- <span class="pf-v5-c-chip__actions">
2818
- <button
2819
- class="pf-v5-c-button pf-m-plain"
2820
- type="button"
2821
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-three toolbar-selected-filters-example-chip-group-statuschip-three"
2822
- aria-label="Remove"
2823
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-three"
2824
- >
2825
- <i class="fas fa-times" aria-hidden="true"></i>
2826
- </button>
2827
- </span>
2828
- </div>
2829
- </li>
2830
- </ul>
2831
- </div>
2832
- </div>
2833
- </div>
2834
- <div class="pf-v5-c-toolbar__item pf-m-chip-group">
2835
- <div class="pf-v5-c-chip-group pf-m-category" role="group">
2836
- <div class="pf-v5-c-chip-group__main">
2837
- <span
2838
- class="pf-v5-c-chip-group__label"
2839
- id="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
2840
- >Risk</span>
2841
- <ul
2842
- class="pf-v5-c-chip-group__list"
2843
- role="list"
2844
- aria-labelledby="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
2845
- >
2846
- <li class="pf-v5-c-chip-group__list-item">
2847
- <div class="pf-v5-c-chip">
2848
- <span class="pf-v5-c-chip__content">
2849
- <span
2850
- class="pf-v5-c-chip__text"
2851
- id="toolbar-selected-filters-example-chip-group-riskchip-one"
2852
- >Chip one</span>
2853
- </span>
2854
- <span class="pf-v5-c-chip__actions">
2855
- <button
2856
- class="pf-v5-c-button pf-m-plain"
2857
- type="button"
2858
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-one toolbar-selected-filters-example-chip-group-riskchip-one"
2859
- aria-label="Remove"
2860
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-one"
2861
- >
2862
- <i class="fas fa-times" aria-hidden="true"></i>
2863
- </button>
2864
- </span>
2865
- </div>
2866
- </li>
2867
- <li class="pf-v5-c-chip-group__list-item">
2868
- <div class="pf-v5-c-chip">
2869
- <span class="pf-v5-c-chip__content">
2870
- <span
2871
- class="pf-v5-c-chip__text"
2872
- id="toolbar-selected-filters-example-chip-group-riskchip-two"
2873
- >Chip two</span>
2874
- </span>
2875
- <span class="pf-v5-c-chip__actions">
2876
- <button
2877
- class="pf-v5-c-button pf-m-plain"
2878
- type="button"
2879
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-two toolbar-selected-filters-example-chip-group-riskchip-two"
2880
- aria-label="Remove"
2881
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-two"
2882
- >
2883
- <i class="fas fa-times" aria-hidden="true"></i>
2884
- </button>
2885
- </span>
2886
- </div>
2887
- </li>
2888
- <li class="pf-v5-c-chip-group__list-item">
2889
- <div class="pf-v5-c-chip">
2890
- <span class="pf-v5-c-chip__content">
2891
- <span
2892
- class="pf-v5-c-chip__text"
2893
- id="toolbar-selected-filters-example-chip-group-riskchip-three"
2894
- >Chip three</span>
2895
- </span>
2896
- <span class="pf-v5-c-chip__actions">
2897
- <button
2898
- class="pf-v5-c-button pf-m-plain"
2899
- type="button"
2900
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-three toolbar-selected-filters-example-chip-group-riskchip-three"
2901
- aria-label="Remove"
2902
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-three"
2903
- >
2904
- <i class="fas fa-times" aria-hidden="true"></i>
2905
- </button>
2906
- </span>
2907
- </div>
2908
- </li>
2909
- </ul>
1416
+ <div class="pf-v5-c-toolbar__group">
1417
+ <div class="pf-v5-c-toolbar__item">
1418
+ <div class="pf-v5-c-chip-group" role="group">
1419
+ <div class="pf-v5-c-chip-group__main">
1420
+ <span
1421
+ class="pf-v5-c-chip-group__label"
1422
+ id="toolbar-selected-filters-example-chip-group-status-chip-group-label"
1423
+ >Status</span>
1424
+ <ul
1425
+ class="pf-v5-c-chip-group__list"
1426
+ role="list"
1427
+ aria-labelledby="toolbar-selected-filters-example-chip-group-status-chip-group-label"
1428
+ >
1429
+ <li class="pf-v5-c-chip-group__list-item">
1430
+ <div class="pf-v5-c-chip">
1431
+ <span class="pf-v5-c-chip__content">
1432
+ <span
1433
+ class="pf-v5-c-chip__text"
1434
+ id="toolbar-selected-filters-example-chip-group-statuschip-one"
1435
+ >Chip one</span>
1436
+ </span>
1437
+ <span class="pf-v5-c-chip__actions">
1438
+ <button
1439
+ class="pf-v5-c-button pf-m-plain"
1440
+ type="button"
1441
+ aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-one toolbar-selected-filters-example-chip-group-statuschip-one"
1442
+ aria-label="Remove"
1443
+ id="toolbar-selected-filters-example-chip-group-statusremove-chip-one"
1444
+ >
1445
+ <i class="fas fa-times" aria-hidden="true"></i>
1446
+ </button>
1447
+ </span>
1448
+ </div>
1449
+ </li>
1450
+ <li class="pf-v5-c-chip-group__list-item">
1451
+ <div class="pf-v5-c-chip">
1452
+ <span class="pf-v5-c-chip__content">
1453
+ <span
1454
+ class="pf-v5-c-chip__text"
1455
+ id="toolbar-selected-filters-example-chip-group-statuschip-two"
1456
+ >Chip two</span>
1457
+ </span>
1458
+ <span class="pf-v5-c-chip__actions">
1459
+ <button
1460
+ class="pf-v5-c-button pf-m-plain"
1461
+ type="button"
1462
+ aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-two toolbar-selected-filters-example-chip-group-statuschip-two"
1463
+ aria-label="Remove"
1464
+ id="toolbar-selected-filters-example-chip-group-statusremove-chip-two"
1465
+ >
1466
+ <i class="fas fa-times" aria-hidden="true"></i>
1467
+ </button>
1468
+ </span>
1469
+ </div>
1470
+ </li>
1471
+ <li class="pf-v5-c-chip-group__list-item">
1472
+ <div class="pf-v5-c-chip">
1473
+ <span class="pf-v5-c-chip__content">
1474
+ <span
1475
+ class="pf-v5-c-chip__text"
1476
+ id="toolbar-selected-filters-example-chip-group-statuschip-three"
1477
+ >Chip three</span>
1478
+ </span>
1479
+ <span class="pf-v5-c-chip__actions">
1480
+ <button
1481
+ class="pf-v5-c-button pf-m-plain"
1482
+ type="button"
1483
+ aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-three toolbar-selected-filters-example-chip-group-statuschip-three"
1484
+ aria-label="Remove"
1485
+ id="toolbar-selected-filters-example-chip-group-statusremove-chip-three"
1486
+ >
1487
+ <i class="fas fa-times" aria-hidden="true"></i>
1488
+ </button>
1489
+ </span>
1490
+ </div>
1491
+ </li>
1492
+ </ul>
1493
+ </div>
2910
1494
  </div>
2911
1495
  </div>
2912
- </div>
2913
- </div>
2914
- <div class="pf-v5-c-toolbar__item">
2915
- <button
2916
- class="pf-v5-c-button pf-m-link pf-m-inline"
2917
- type="button"
2918
- >Clear all filters</button>
2919
- </div>
2920
- </div>
2921
- </div>
2922
-
2923
- ```
2924
-
2925
- ### Stacked
2926
-
2927
- ### Stacked on desktop
2928
-
2929
- ```html
2930
- <div class="pf-v5-c-toolbar" id="toolbar-stacked-example">
2931
- <div class="pf-v5-c-toolbar__content">
2932
- <div class="pf-v5-c-toolbar__content-section">
2933
- <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-2xl">
2934
- <div class="pf-v5-c-toolbar__toggle">
2935
- <button
2936
- class="pf-v5-c-button pf-m-plain"
2937
- type="button"
2938
- aria-label="Show filters"
2939
- aria-expanded="false"
2940
- aria-controls="toolbar-stacked-example-expandable-content"
2941
- >
2942
- <i class="fas fa-filter" aria-hidden="true"></i>
2943
- </button>
2944
- </div>
2945
- <div class="pf-v5-c-toolbar__group">
2946
- <div
2947
- class="pf-v5-c-toolbar__item pf-m-label"
2948
- id="-select-checkbox-resource-label"
2949
- aria-hidden="true"
1496
+ <div class="pf-v5-c-toolbar__item">
1497
+ <div class="pf-v5-c-chip-group" role="group">
1498
+ <div class="pf-v5-c-chip-group__main">
1499
+ <span
1500
+ class="pf-v5-c-chip-group__label"
1501
+ id="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
1502
+ >Risk</span>
1503
+ <ul
1504
+ class="pf-v5-c-chip-group__list"
1505
+ role="list"
1506
+ aria-labelledby="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
1507
+ >
1508
+ <li class="pf-v5-c-chip-group__list-item">
1509
+ <div class="pf-v5-c-chip">
1510
+ <span class="pf-v5-c-chip__content">
1511
+ <span
1512
+ class="pf-v5-c-chip__text"
1513
+ id="toolbar-selected-filters-example-chip-group-riskchip-one"
1514
+ >Chip one</span>
1515
+ </span>
1516
+ <span class="pf-v5-c-chip__actions">
1517
+ <button
1518
+ class="pf-v5-c-button pf-m-plain"
1519
+ type="button"
1520
+ aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-one toolbar-selected-filters-example-chip-group-riskchip-one"
1521
+ aria-label="Remove"
1522
+ id="toolbar-selected-filters-example-chip-group-riskremove-chip-one"
1523
+ >
1524
+ <i class="fas fa-times" aria-hidden="true"></i>
1525
+ </button>
1526
+ </span>
1527
+ </div>
1528
+ </li>
1529
+ <li class="pf-v5-c-chip-group__list-item">
1530
+ <div class="pf-v5-c-chip">
1531
+ <span class="pf-v5-c-chip__content">
1532
+ <span
1533
+ class="pf-v5-c-chip__text"
1534
+ id="toolbar-selected-filters-example-chip-group-riskchip-two"
1535
+ >Chip two</span>
1536
+ </span>
1537
+ <span class="pf-v5-c-chip__actions">
1538
+ <button
1539
+ class="pf-v5-c-button pf-m-plain"
1540
+ type="button"
1541
+ aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-two toolbar-selected-filters-example-chip-group-riskchip-two"
1542
+ aria-label="Remove"
1543
+ id="toolbar-selected-filters-example-chip-group-riskremove-chip-two"
1544
+ >
1545
+ <i class="fas fa-times" aria-hidden="true"></i>
1546
+ </button>
1547
+ </span>
1548
+ </div>
1549
+ </li>
1550
+ <li class="pf-v5-c-chip-group__list-item">
1551
+ <div class="pf-v5-c-chip">
1552
+ <span class="pf-v5-c-chip__content">
1553
+ <span
1554
+ class="pf-v5-c-chip__text"
1555
+ id="toolbar-selected-filters-example-chip-group-riskchip-three"
1556
+ >Chip three</span>
1557
+ </span>
1558
+ <span class="pf-v5-c-chip__actions">
1559
+ <button
1560
+ class="pf-v5-c-button pf-m-plain"
1561
+ type="button"
1562
+ aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-three toolbar-selected-filters-example-chip-group-riskchip-three"
1563
+ aria-label="Remove"
1564
+ id="toolbar-selected-filters-example-chip-group-riskremove-chip-three"
1565
+ >
1566
+ <i class="fas fa-times" aria-hidden="true"></i>
1567
+ </button>
1568
+ </span>
1569
+ </div>
1570
+ </li>
1571
+ </ul>
1572
+ </div>
1573
+ </div>
1574
+ </div>
1575
+ </div>
1576
+ <div class="pf-v5-c-toolbar__item">
1577
+ <button
1578
+ class="pf-v5-c-button pf-m-link pf-m-inline"
1579
+ type="button"
1580
+ >Clear all filters</button>
1581
+ </div>
1582
+ </div>
1583
+ </div>
1584
+ </div>
1585
+
1586
+ ```
1587
+
1588
+ ### Stacked
1589
+
1590
+ ### Stacked on desktop
1591
+
1592
+ ```html
1593
+ <div class="pf-v5-c-toolbar" id="toolbar-stacked-example">
1594
+ <div class="pf-v5-c-toolbar__content">
1595
+ <div class="pf-v5-c-toolbar__content-section">
1596
+ <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-2xl">
1597
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1598
+ <button
1599
+ class="pf-v5-c-menu-toggle pf-m-plain"
1600
+ type="button"
1601
+ aria-expanded="false"
1602
+ aria-label="Show filters"
1603
+ aria-controls="toolbar-stacked-example-expandable-content"
1604
+ >
1605
+ <i class="fas fa-filter" aria-hidden="true"></i>
1606
+ </button>
1607
+ </div>
1608
+ <div class="pf-v5-c-toolbar__group">
1609
+ <div
1610
+ class="pf-v5-c-toolbar__item pf-m-label"
1611
+ id="toolbar-stacked-example-menu-toggle-resource-label"
1612
+ aria-hidden="true"
2950
1613
  >Resource</div>
1614
+
2951
1615
  <div class="pf-v5-c-toolbar__item">
2952
- <div class="pf-v5-c-select">
2953
- <button
2954
- class="pf-v5-c-select__toggle"
2955
- type="button"
2956
- id="-select-checkbox-resource-toggle"
2957
- aria-haspopup="true"
2958
- aria-expanded="false"
2959
- aria-labelledby="-select-checkbox-resource-label -select-checkbox-resource-toggle"
2960
- >
2961
- <div class="pf-v5-c-select__toggle-wrapper">
2962
- <span class="pf-v5-c-select__toggle-text">Pod</span>
2963
- </div>
2964
- <span class="pf-v5-c-select__toggle-arrow">
2965
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1616
+ <button
1617
+ class="pf-v5-c-menu-toggle"
1618
+ type="button"
1619
+ aria-expanded="false"
1620
+ id="toolbar-stacked-example-menu-toggle-resource"
1621
+ >
1622
+ <span class="pf-v5-c-menu-toggle__text">Pod</span>
1623
+ <span class="pf-v5-c-menu-toggle__controls">
1624
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1625
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2966
1626
  </span>
2967
- </button>
2968
-
2969
- <div class="pf-v5-c-select__menu" hidden>
2970
- <fieldset
2971
- class="pf-v5-c-select__menu-fieldset"
2972
- aria-label="Select input"
2973
- >
2974
- <label
2975
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2976
- id="-select-checkbox-resource-active"
2977
- for="-select-checkbox-resource-active-input"
2978
- >
2979
- <input
2980
- class="pf-v5-c-check__input"
2981
- type="checkbox"
2982
- aria-describedby="-select-checkbox-resource-active-description"
2983
- id="-select-checkbox-resource-active-input"
2984
- name="-select-checkbox-resource-active-input"
2985
- />
2986
- <span class="pf-v5-c-check__label">Active</span>
2987
- <span
2988
- class="pf-v5-c-check__description"
2989
- id="-select-checkbox-resource-active-description"
2990
- >This is a description</span>
2991
- </label>
2992
- <label
2993
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2994
- id="-select-checkbox-resource-canceled"
2995
- for="-select-checkbox-resource-canceled-input"
2996
- >
2997
- <input
2998
- class="pf-v5-c-check__input"
2999
- type="checkbox"
3000
- aria-describedby="-select-checkbox-resource-canceled-description"
3001
- id="-select-checkbox-resource-canceled-input"
3002
- name="-select-checkbox-resource-canceled-input"
3003
- />
3004
- <span class="pf-v5-c-check__label">Canceled</span>
3005
- <span
3006
- class="pf-v5-c-check__description"
3007
- id="-select-checkbox-resource-canceled-description"
3008
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3009
- </label>
3010
- <label
3011
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3012
- id="-select-checkbox-resource-paused"
3013
- for="-select-checkbox-resource-paused-input"
3014
- >
3015
- <input
3016
- class="pf-v5-c-check__input"
3017
- type="checkbox"
3018
- id="-select-checkbox-resource-paused-input"
3019
- name="-select-checkbox-resource-paused-input"
3020
- />
3021
- <span class="pf-v5-c-check__label">Paused</span>
3022
- </label>
3023
- <label
3024
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3025
- id="-select-checkbox-resource-warning"
3026
- for="-select-checkbox-resource-warning-input"
3027
- >
3028
- <input
3029
- class="pf-v5-c-check__input"
3030
- type="checkbox"
3031
- id="-select-checkbox-resource-warning-input"
3032
- name="-select-checkbox-resource-warning-input"
3033
- />
3034
- <span class="pf-v5-c-check__label">Warning</span>
3035
- </label>
3036
- <label
3037
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3038
- id="-select-checkbox-resource-restarted"
3039
- for="-select-checkbox-resource-restarted-input"
3040
- >
3041
- <input
3042
- class="pf-v5-c-check__input"
3043
- type="checkbox"
3044
- id="-select-checkbox-resource-restarted-input"
3045
- name="-select-checkbox-resource-restarted-input"
3046
- />
3047
- <span class="pf-v5-c-check__label">Restarted</span>
3048
- </label>
3049
- </fieldset>
3050
- </div>
3051
- </div>
1627
+ </span>
1628
+ </button>
3052
1629
  </div>
3053
1630
  </div>
3054
1631
  <div class="pf-v5-c-toolbar__group">
3055
1632
  <div
3056
1633
  class="pf-v5-c-toolbar__item pf-m-label"
3057
- id="-select-checkbox-status-label"
1634
+ id="toolbar-stacked-example-menu-toggle-status-label"
3058
1635
  aria-hidden="true"
3059
1636
  >Status</div>
3060
1637
  <div class="pf-v5-c-toolbar__item">
3061
- <div class="pf-v5-c-select">
3062
- <button
3063
- class="pf-v5-c-select__toggle"
3064
- type="button"
3065
- id="-select-checkbox-status-toggle"
3066
- aria-haspopup="true"
3067
- aria-expanded="false"
3068
- aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
3069
- >
3070
- <div class="pf-v5-c-select__toggle-wrapper">
3071
- <span class="pf-v5-c-select__toggle-text">Running</span>
3072
- </div>
3073
- <span class="pf-v5-c-select__toggle-arrow">
3074
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1638
+ <button
1639
+ class="pf-v5-c-menu-toggle"
1640
+ type="button"
1641
+ aria-expanded="false"
1642
+ id="toolbar-stacked-example-menu-toggle-status"
1643
+ >
1644
+ <span class="pf-v5-c-menu-toggle__text">Running</span>
1645
+ <span class="pf-v5-c-menu-toggle__controls">
1646
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1647
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3075
1648
  </span>
3076
- </button>
3077
-
3078
- <div class="pf-v5-c-select__menu" hidden>
3079
- <fieldset
3080
- class="pf-v5-c-select__menu-fieldset"
3081
- aria-label="Select input"
3082
- >
3083
- <label
3084
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3085
- id="-select-checkbox-status-active"
3086
- for="-select-checkbox-status-active-input"
3087
- >
3088
- <input
3089
- class="pf-v5-c-check__input"
3090
- type="checkbox"
3091
- aria-describedby="-select-checkbox-status-active-description"
3092
- id="-select-checkbox-status-active-input"
3093
- name="-select-checkbox-status-active-input"
3094
- />
3095
- <span class="pf-v5-c-check__label">Active</span>
3096
- <span
3097
- class="pf-v5-c-check__description"
3098
- id="-select-checkbox-status-active-description"
3099
- >This is a description</span>
3100
- </label>
3101
- <label
3102
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3103
- id="-select-checkbox-status-canceled"
3104
- for="-select-checkbox-status-canceled-input"
3105
- >
3106
- <input
3107
- class="pf-v5-c-check__input"
3108
- type="checkbox"
3109
- aria-describedby="-select-checkbox-status-canceled-description"
3110
- id="-select-checkbox-status-canceled-input"
3111
- name="-select-checkbox-status-canceled-input"
3112
- />
3113
- <span class="pf-v5-c-check__label">Canceled</span>
3114
- <span
3115
- class="pf-v5-c-check__description"
3116
- id="-select-checkbox-status-canceled-description"
3117
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3118
- </label>
3119
- <label
3120
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3121
- id="-select-checkbox-status-paused"
3122
- for="-select-checkbox-status-paused-input"
3123
- >
3124
- <input
3125
- class="pf-v5-c-check__input"
3126
- type="checkbox"
3127
- id="-select-checkbox-status-paused-input"
3128
- name="-select-checkbox-status-paused-input"
3129
- />
3130
- <span class="pf-v5-c-check__label">Paused</span>
3131
- </label>
3132
- <label
3133
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3134
- id="-select-checkbox-status-warning"
3135
- for="-select-checkbox-status-warning-input"
3136
- >
3137
- <input
3138
- class="pf-v5-c-check__input"
3139
- type="checkbox"
3140
- id="-select-checkbox-status-warning-input"
3141
- name="-select-checkbox-status-warning-input"
3142
- />
3143
- <span class="pf-v5-c-check__label">Warning</span>
3144
- </label>
3145
- <label
3146
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3147
- id="-select-checkbox-status-restarted"
3148
- for="-select-checkbox-status-restarted-input"
3149
- >
3150
- <input
3151
- class="pf-v5-c-check__input"
3152
- type="checkbox"
3153
- id="-select-checkbox-status-restarted-input"
3154
- name="-select-checkbox-status-restarted-input"
3155
- />
3156
- <span class="pf-v5-c-check__label">Restarted</span>
3157
- </label>
3158
- </fieldset>
3159
- </div>
3160
- </div>
1649
+ </span>
1650
+ </button>
3161
1651
  </div>
3162
1652
  </div>
3163
1653
  <div class="pf-v5-c-toolbar__group">
3164
1654
  <div
3165
1655
  class="pf-v5-c-toolbar__item pf-m-label"
3166
- id="-select-checkbox-type-label"
1656
+ id="toolbar-stacked-example-menu-toggle-type-label"
3167
1657
  aria-hidden="true"
3168
1658
  >Type</div>
3169
1659
  <div class="pf-v5-c-toolbar__item">
3170
- <div class="pf-v5-c-select">
3171
- <button
3172
- class="pf-v5-c-select__toggle"
3173
- type="button"
3174
- id="-select-checkbox-type-toggle"
3175
- aria-haspopup="true"
3176
- aria-expanded="false"
3177
- aria-labelledby="-select-checkbox-type-label -select-checkbox-type-toggle"
3178
- >
3179
- <div class="pf-v5-c-select__toggle-wrapper">
3180
- <span class="pf-v5-c-select__toggle-text">Any</span>
3181
- </div>
3182
- <span class="pf-v5-c-select__toggle-arrow">
3183
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1660
+ <button
1661
+ class="pf-v5-c-menu-toggle"
1662
+ type="button"
1663
+ aria-expanded="false"
1664
+ id="toolbar-stacked-example-menu-toggle-type"
1665
+ >
1666
+ <span class="pf-v5-c-menu-toggle__text">Any</span>
1667
+ <span class="pf-v5-c-menu-toggle__controls">
1668
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1669
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3184
1670
  </span>
3185
- </button>
3186
-
3187
- <div class="pf-v5-c-select__menu" hidden>
3188
- <fieldset
3189
- class="pf-v5-c-select__menu-fieldset"
3190
- aria-label="Select input"
3191
- >
3192
- <label
3193
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3194
- id="-select-checkbox-type-active"
3195
- for="-select-checkbox-type-active-input"
3196
- >
3197
- <input
3198
- class="pf-v5-c-check__input"
3199
- type="checkbox"
3200
- aria-describedby="-select-checkbox-type-active-description"
3201
- id="-select-checkbox-type-active-input"
3202
- name="-select-checkbox-type-active-input"
3203
- />
3204
- <span class="pf-v5-c-check__label">Active</span>
3205
- <span
3206
- class="pf-v5-c-check__description"
3207
- id="-select-checkbox-type-active-description"
3208
- >This is a description</span>
3209
- </label>
3210
- <label
3211
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3212
- id="-select-checkbox-type-canceled"
3213
- for="-select-checkbox-type-canceled-input"
3214
- >
3215
- <input
3216
- class="pf-v5-c-check__input"
3217
- type="checkbox"
3218
- aria-describedby="-select-checkbox-type-canceled-description"
3219
- id="-select-checkbox-type-canceled-input"
3220
- name="-select-checkbox-type-canceled-input"
3221
- />
3222
- <span class="pf-v5-c-check__label">Canceled</span>
3223
- <span
3224
- class="pf-v5-c-check__description"
3225
- id="-select-checkbox-type-canceled-description"
3226
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3227
- </label>
3228
- <label
3229
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3230
- id="-select-checkbox-type-paused"
3231
- for="-select-checkbox-type-paused-input"
3232
- >
3233
- <input
3234
- class="pf-v5-c-check__input"
3235
- type="checkbox"
3236
- id="-select-checkbox-type-paused-input"
3237
- name="-select-checkbox-type-paused-input"
3238
- />
3239
- <span class="pf-v5-c-check__label">Paused</span>
3240
- </label>
3241
- <label
3242
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3243
- id="-select-checkbox-type-warning"
3244
- for="-select-checkbox-type-warning-input"
3245
- >
3246
- <input
3247
- class="pf-v5-c-check__input"
3248
- type="checkbox"
3249
- id="-select-checkbox-type-warning-input"
3250
- name="-select-checkbox-type-warning-input"
3251
- />
3252
- <span class="pf-v5-c-check__label">Warning</span>
3253
- </label>
3254
- <label
3255
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3256
- id="-select-checkbox-type-restarted"
3257
- for="-select-checkbox-type-restarted-input"
3258
- >
3259
- <input
3260
- class="pf-v5-c-check__input"
3261
- type="checkbox"
3262
- id="-select-checkbox-type-restarted-input"
3263
- name="-select-checkbox-type-restarted-input"
3264
- />
3265
- <span class="pf-v5-c-check__label">Restarted</span>
3266
- </label>
3267
- </fieldset>
3268
- </div>
3269
- </div>
1671
+ </span>
1672
+ </button>
3270
1673
  </div>
3271
1674
  </div>
3272
1675
  </div>
@@ -3370,128 +1773,110 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3370
1773
  <div class="pf-v5-c-toolbar__content">
3371
1774
  <div class="pf-v5-c-toolbar__content-section">
3372
1775
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
3373
- <div class="pf-v5-c-dropdown">
3374
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
3375
- <label
3376
- class="pf-v5-c-dropdown__toggle-check"
3377
- for="toolbar-stacked-example-bulk-select-toggle-check"
3378
- >
3379
- <div class="pf-v5-c-check pf-m-standalone">
3380
- <input
3381
- class="pf-v5-c-check__input"
3382
- type="checkbox"
3383
- id="toolbar-stacked-example-bulk-select-toggle-check"
3384
- aria-label="Select all"
3385
- />
3386
- </div>
3387
- </label>
3388
-
3389
- <button
3390
- class="pf-v5-c-dropdown__toggle-button"
3391
- type="button"
3392
- aria-expanded="false"
3393
- id="toolbar-stacked-example-bulk-select-toggle-button"
3394
- aria-label="Dropdown toggle"
3395
- >
3396
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3397
- </button>
3398
- </div>
3399
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
3400
- <li role="none">
3401
- <button
3402
- class="pf-v5-c-dropdown__menu-item"
3403
- role="menuitem"
3404
- type="button"
3405
- >Select all</button>
3406
- </li>
3407
- <li role="none">
3408
- <button
3409
- class="pf-v5-c-dropdown__menu-item"
3410
- role="menuitem"
3411
- type="button"
3412
- >Select none</button>
3413
- </li>
3414
- <li role="none">
3415
- <button
3416
- class="pf-v5-c-dropdown__menu-item"
3417
- role="menuitem"
3418
- type="button"
3419
- >Other action</button>
3420
- </li>
3421
- </ul>
1776
+ <div
1777
+ class="pf-v5-c-menu-toggle pf-m-split-button"
1778
+ id="toolbar-stacked-example-check"
1779
+ >
1780
+ <label
1781
+ class="pf-v5-c-check pf-m-standalone"
1782
+ id="toolbar-stacked-example-check-check"
1783
+ for="toolbar-stacked-example-check-check-input"
1784
+ >
1785
+ <input
1786
+ class="pf-v5-c-check__input"
1787
+ type="checkbox"
1788
+ id="toolbar-stacked-example-check-check-input"
1789
+ name="toolbar-stacked-example-check-check-input"
1790
+ aria-label="Standalone check"
1791
+ />
1792
+ </label>
1793
+ <button
1794
+ class="pf-v5-c-menu-toggle__button"
1795
+ type="button"
1796
+ aria-expanded="false"
1797
+ id="toolbar-stacked-example-menu-toggle-toggle-button"
1798
+ aria-label="Menu toggle"
1799
+ >
1800
+ <span class="pf-v5-c-menu-toggle__controls">
1801
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1802
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1803
+ </span>
1804
+ </span>
1805
+ </button>
3422
1806
  </div>
3423
1807
  </div>
3424
1808
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
3425
1809
  <div class="pf-v5-c-pagination" aria-label="Element pagination">
3426
1810
  <div class="pf-v5-c-pagination__total-items">37 items</div>
3427
- <div class="pf-v5-c-options-menu">
3428
- <button
3429
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3430
- type="button"
3431
- id="toolbar-stacked-example-pagination-options-menu-toggle"
3432
- aria-haspopup="listbox"
3433
- aria-expanded="false"
3434
- >
3435
- <span class="pf-v5-c-options-menu__toggle-text">
3436
- <b>1 - 10</b>&nbsp;of&nbsp;
3437
- <b>36</b>
3438
- </span>
3439
- <div class="pf-v5-c-options-menu__toggle-icon">
3440
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3441
- </div>
3442
- </button>
3443
- <ul
3444
- class="pf-v5-c-options-menu__menu"
3445
- role="menu"
3446
- aria-labelledby="toolbar-stacked-example-pagination-options-menu-toggle"
3447
- hidden
3448
- >
3449
- <li role="none">
3450
- <button
3451
- class="pf-v5-c-options-menu__menu-item"
3452
- type="button"
3453
- role="menuitem"
3454
- >5 per page</button>
3455
- </li>
3456
- <li role="none">
3457
- <button
3458
- class="pf-v5-c-options-menu__menu-item"
3459
- type="button"
3460
- role="menuitem"
3461
- >
3462
- 10 per page
3463
- <div class="pf-v5-c-options-menu__menu-item-icon">
3464
- <i class="fas fa-check" aria-hidden="true"></i>
3465
- </div>
3466
- </button>
3467
- </li>
3468
- <li role="none">
3469
- <button
3470
- class="pf-v5-c-options-menu__menu-item"
3471
- type="button"
3472
- role="menuitem"
3473
- >20 per page</button>
3474
- </li>
3475
- </ul>
3476
- </div>
3477
-
3478
- <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
3479
- <div class="pf-v5-c-pagination__nav-control pf-m-first">
1811
+ <div class="pf-v5-c-pagination__page-menu">
1812
+ <div class="pf-v5-c-options-menu">
3480
1813
  <button
3481
- class="pf-v5-c-button pf-m-plain pf-m-disabled"
1814
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3482
1815
  type="button"
3483
- aria-label="Go to first page"
3484
- aria-disabled="true"
1816
+ id="toolbar-stacked-example-pagination-options-menu-toggle"
1817
+ aria-haspopup="listbox"
1818
+ aria-expanded="false"
3485
1819
  >
3486
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1820
+ <span class="pf-v5-c-options-menu__toggle-text">
1821
+ <b>1 - 10</b>&nbsp;of&nbsp;
1822
+ <b>36</b>
1823
+ </span>
1824
+ <div class="pf-v5-c-options-menu__toggle-icon">
1825
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1826
+ </div>
3487
1827
  </button>
3488
- </div>
3489
- <div class="pf-v5-c-pagination__nav-control pf-m-prev">
3490
- <button
3491
- class="pf-v5-c-button pf-m-plain pf-m-disabled"
3492
- type="button"
3493
- aria-label="Go to previous page"
3494
- aria-disabled="true"
1828
+ <ul
1829
+ class="pf-v5-c-options-menu__menu"
1830
+ role="menu"
1831
+ aria-labelledby="toolbar-stacked-example-pagination-options-menu-toggle"
1832
+ hidden
1833
+ >
1834
+ <li role="none">
1835
+ <button
1836
+ class="pf-v5-c-options-menu__menu-item"
1837
+ type="button"
1838
+ role="menuitem"
1839
+ >5 per page</button>
1840
+ </li>
1841
+ <li role="none">
1842
+ <button
1843
+ class="pf-v5-c-options-menu__menu-item"
1844
+ type="button"
1845
+ role="menuitem"
1846
+ >
1847
+ 10 per page
1848
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1849
+ <i class="fas fa-check" aria-hidden="true"></i>
1850
+ </div>
1851
+ </button>
1852
+ </li>
1853
+ <li role="none">
1854
+ <button
1855
+ class="pf-v5-c-options-menu__menu-item"
1856
+ type="button"
1857
+ role="menuitem"
1858
+ >20 per page</button>
1859
+ </li>
1860
+ </ul>
1861
+ </div>
1862
+ </div>
1863
+ <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
1864
+ <div class="pf-v5-c-pagination__nav-control pf-m-first">
1865
+ <button
1866
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
1867
+ type="button"
1868
+ aria-label="Go to first page"
1869
+ aria-disabled="true"
1870
+ >
1871
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1872
+ </button>
1873
+ </div>
1874
+ <div class="pf-v5-c-pagination__nav-control pf-m-prev">
1875
+ <button
1876
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
1877
+ type="button"
1878
+ aria-label="Go to previous page"
1879
+ aria-disabled="true"
3495
1880
  >
3496
1881
  <i class="fas fa-angle-left" aria-hidden="true"></i>
3497
1882
  </button>
@@ -3546,12 +1931,12 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3546
1931
  <div class="pf-v5-c-toolbar__content">
3547
1932
  <div class="pf-v5-c-toolbar__content-section">
3548
1933
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
3549
- <div class="pf-v5-c-toolbar__toggle pf-m-expanded">
1934
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
3550
1935
  <button
3551
- class="pf-v5-c-button pf-m-plain"
1936
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
3552
1937
  type="button"
3553
- aria-label="Show filters"
3554
1938
  aria-expanded="true"
1939
+ aria-label="Show filters"
3555
1940
  aria-controls="toolbar-stacked-collapsed-example-expandable-content"
3556
1941
  >
3557
1942
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -3611,325 +1996,68 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3611
1996
  <div class="pf-v5-c-toolbar__group">
3612
1997
  <div
3613
1998
  class="pf-v5-c-toolbar__item pf-m-label"
3614
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-label"
1999
+ id="toolbar-stacked-collapsed-example-menu-toggle-resource-label"
2000
+ aria-hidden="true"
3615
2001
  >Resource</div>
2002
+
3616
2003
  <div class="pf-v5-c-toolbar__item">
3617
- <div class="pf-v5-c-select">
3618
- <button
3619
- class="pf-v5-c-select__toggle"
3620
- type="button"
3621
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-toggle"
3622
- aria-haspopup="true"
3623
- aria-expanded="false"
3624
- aria-labelledby="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-label toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-toggle"
3625
- >
3626
- <div class="pf-v5-c-select__toggle-wrapper">
3627
- <span class="pf-v5-c-select__toggle-text">Pod</span>
3628
- </div>
3629
- <span class="pf-v5-c-select__toggle-arrow">
3630
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2004
+ <button
2005
+ class="pf-v5-c-menu-toggle"
2006
+ type="button"
2007
+ aria-expanded="false"
2008
+ id="toolbar-stacked-collapsed-example-menu-toggle-resource"
2009
+ >
2010
+ <span class="pf-v5-c-menu-toggle__text">Pod</span>
2011
+ <span class="pf-v5-c-menu-toggle__controls">
2012
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2013
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3631
2014
  </span>
3632
- </button>
3633
-
3634
- <div class="pf-v5-c-select__menu" hidden>
3635
- <fieldset
3636
- class="pf-v5-c-select__menu-fieldset"
3637
- aria-label="Select input"
3638
- >
3639
- <label
3640
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3641
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active"
3642
- for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active-input"
3643
- >
3644
- <input
3645
- class="pf-v5-c-check__input"
3646
- type="checkbox"
3647
- aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active-description"
3648
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active-input"
3649
- name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active-input"
3650
- />
3651
- <span class="pf-v5-c-check__label">Active</span>
3652
- <span
3653
- class="pf-v5-c-check__description"
3654
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-active-description"
3655
- >This is a description</span>
3656
- </label>
3657
- <label
3658
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3659
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled"
3660
- for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled-input"
3661
- >
3662
- <input
3663
- class="pf-v5-c-check__input"
3664
- type="checkbox"
3665
- aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled-description"
3666
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled-input"
3667
- name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled-input"
3668
- />
3669
- <span class="pf-v5-c-check__label">Canceled</span>
3670
- <span
3671
- class="pf-v5-c-check__description"
3672
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-canceled-description"
3673
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3674
- </label>
3675
- <label
3676
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3677
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused"
3678
- for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused-input"
3679
- >
3680
- <input
3681
- class="pf-v5-c-check__input"
3682
- type="checkbox"
3683
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused-input"
3684
- name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-paused-input"
3685
- />
3686
- <span class="pf-v5-c-check__label">Paused</span>
3687
- </label>
3688
- <label
3689
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3690
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning"
3691
- for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning-input"
3692
- >
3693
- <input
3694
- class="pf-v5-c-check__input"
3695
- type="checkbox"
3696
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning-input"
3697
- name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-warning-input"
3698
- />
3699
- <span class="pf-v5-c-check__label">Warning</span>
3700
- </label>
3701
- <label
3702
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3703
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted"
3704
- for="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted-input"
3705
- >
3706
- <input
3707
- class="pf-v5-c-check__input"
3708
- type="checkbox"
3709
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted-input"
3710
- name="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-restarted-input"
3711
- />
3712
- <span class="pf-v5-c-check__label">Restarted</span>
3713
- </label>
3714
- </fieldset>
3715
- </div>
3716
- </div>
2015
+ </span>
2016
+ </button>
3717
2017
  </div>
3718
2018
  </div>
3719
2019
  <div class="pf-v5-c-toolbar__group">
3720
2020
  <div
3721
2021
  class="pf-v5-c-toolbar__item pf-m-label"
3722
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-label"
2022
+ id="-menu-toggle-status-label"
2023
+ aria-hidden="true"
3723
2024
  >Status</div>
3724
2025
  <div class="pf-v5-c-toolbar__item">
3725
- <div class="pf-v5-c-select">
3726
- <button
3727
- class="pf-v5-c-select__toggle"
3728
- type="button"
3729
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-toggle"
3730
- aria-haspopup="true"
3731
- aria-expanded="false"
3732
- aria-labelledby="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-label toolbar-stacked-collapsed-example-select-checkbox-status-expanded-toggle"
3733
- >
3734
- <div class="pf-v5-c-select__toggle-wrapper">
3735
- <span class="pf-v5-c-select__toggle-text">Running</span>
3736
- </div>
3737
- <span class="pf-v5-c-select__toggle-arrow">
3738
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2026
+ <button
2027
+ class="pf-v5-c-menu-toggle"
2028
+ type="button"
2029
+ aria-expanded="false"
2030
+ id="-menu-toggle-status"
2031
+ >
2032
+ <span class="pf-v5-c-menu-toggle__text">Running</span>
2033
+ <span class="pf-v5-c-menu-toggle__controls">
2034
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2035
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3739
2036
  </span>
3740
- </button>
3741
-
3742
- <div class="pf-v5-c-select__menu" hidden>
3743
- <fieldset
3744
- class="pf-v5-c-select__menu-fieldset"
3745
- aria-label="Select input"
3746
- >
3747
- <label
3748
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3749
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active"
3750
- for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active-input"
3751
- >
3752
- <input
3753
- class="pf-v5-c-check__input"
3754
- type="checkbox"
3755
- aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active-description"
3756
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active-input"
3757
- name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active-input"
3758
- />
3759
- <span class="pf-v5-c-check__label">Active</span>
3760
- <span
3761
- class="pf-v5-c-check__description"
3762
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-active-description"
3763
- >This is a description</span>
3764
- </label>
3765
- <label
3766
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3767
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled"
3768
- for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled-input"
3769
- >
3770
- <input
3771
- class="pf-v5-c-check__input"
3772
- type="checkbox"
3773
- aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled-description"
3774
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled-input"
3775
- name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled-input"
3776
- />
3777
- <span class="pf-v5-c-check__label">Canceled</span>
3778
- <span
3779
- class="pf-v5-c-check__description"
3780
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-canceled-description"
3781
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3782
- </label>
3783
- <label
3784
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3785
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused"
3786
- for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused-input"
3787
- >
3788
- <input
3789
- class="pf-v5-c-check__input"
3790
- type="checkbox"
3791
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused-input"
3792
- name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-paused-input"
3793
- />
3794
- <span class="pf-v5-c-check__label">Paused</span>
3795
- </label>
3796
- <label
3797
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3798
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning"
3799
- for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning-input"
3800
- >
3801
- <input
3802
- class="pf-v5-c-check__input"
3803
- type="checkbox"
3804
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning-input"
3805
- name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-warning-input"
3806
- />
3807
- <span class="pf-v5-c-check__label">Warning</span>
3808
- </label>
3809
- <label
3810
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3811
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted"
3812
- for="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted-input"
3813
- >
3814
- <input
3815
- class="pf-v5-c-check__input"
3816
- type="checkbox"
3817
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted-input"
3818
- name="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-restarted-input"
3819
- />
3820
- <span class="pf-v5-c-check__label">Restarted</span>
3821
- </label>
3822
- </fieldset>
3823
- </div>
3824
- </div>
2037
+ </span>
2038
+ </button>
3825
2039
  </div>
3826
2040
  </div>
3827
2041
  <div class="pf-v5-c-toolbar__group">
3828
2042
  <div
3829
2043
  class="pf-v5-c-toolbar__item pf-m-label"
3830
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-label"
2044
+ id="-menu-toggle-type-label"
2045
+ aria-hidden="true"
3831
2046
  >Type</div>
3832
2047
  <div class="pf-v5-c-toolbar__item">
3833
- <div class="pf-v5-c-select">
3834
- <button
3835
- class="pf-v5-c-select__toggle"
3836
- type="button"
3837
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-toggle"
3838
- aria-haspopup="true"
3839
- aria-expanded="false"
3840
- aria-labelledby="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-label toolbar-stacked-collapsed-example-select-checkbox-type-expanded-toggle"
3841
- >
3842
- <div class="pf-v5-c-select__toggle-wrapper">
3843
- <span class="pf-v5-c-select__toggle-text">Any</span>
3844
- </div>
3845
- <span class="pf-v5-c-select__toggle-arrow">
3846
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2048
+ <button
2049
+ class="pf-v5-c-menu-toggle"
2050
+ type="button"
2051
+ aria-expanded="false"
2052
+ id="-menu-toggle-type"
2053
+ >
2054
+ <span class="pf-v5-c-menu-toggle__text">Any</span>
2055
+ <span class="pf-v5-c-menu-toggle__controls">
2056
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2057
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3847
2058
  </span>
3848
- </button>
3849
-
3850
- <div class="pf-v5-c-select__menu" hidden>
3851
- <fieldset
3852
- class="pf-v5-c-select__menu-fieldset"
3853
- aria-label="Select input"
3854
- >
3855
- <label
3856
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3857
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active"
3858
- for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active-input"
3859
- >
3860
- <input
3861
- class="pf-v5-c-check__input"
3862
- type="checkbox"
3863
- aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active-description"
3864
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active-input"
3865
- name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active-input"
3866
- />
3867
- <span class="pf-v5-c-check__label">Active</span>
3868
- <span
3869
- class="pf-v5-c-check__description"
3870
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-active-description"
3871
- >This is a description</span>
3872
- </label>
3873
- <label
3874
- class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
3875
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled"
3876
- for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled-input"
3877
- >
3878
- <input
3879
- class="pf-v5-c-check__input"
3880
- type="checkbox"
3881
- aria-describedby="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled-description"
3882
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled-input"
3883
- name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled-input"
3884
- />
3885
- <span class="pf-v5-c-check__label">Canceled</span>
3886
- <span
3887
- class="pf-v5-c-check__description"
3888
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-canceled-description"
3889
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3890
- </label>
3891
- <label
3892
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3893
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused"
3894
- for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused-input"
3895
- >
3896
- <input
3897
- class="pf-v5-c-check__input"
3898
- type="checkbox"
3899
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused-input"
3900
- name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-paused-input"
3901
- />
3902
- <span class="pf-v5-c-check__label">Paused</span>
3903
- </label>
3904
- <label
3905
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3906
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning"
3907
- for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning-input"
3908
- >
3909
- <input
3910
- class="pf-v5-c-check__input"
3911
- type="checkbox"
3912
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning-input"
3913
- name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-warning-input"
3914
- />
3915
- <span class="pf-v5-c-check__label">Warning</span>
3916
- </label>
3917
- <label
3918
- class="pf-v5-c-check pf-v5-c-select__menu-item"
3919
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted"
3920
- for="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted-input"
3921
- >
3922
- <input
3923
- class="pf-v5-c-check__input"
3924
- type="checkbox"
3925
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted-input"
3926
- name="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-restarted-input"
3927
- />
3928
- <span class="pf-v5-c-check__label">Restarted</span>
3929
- </label>
3930
- </fieldset>
3931
- </div>
3932
- </div>
2059
+ </span>
2060
+ </button>
3933
2061
  </div>
3934
2062
  </div>
3935
2063
  </div>
@@ -3939,111 +2067,93 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3939
2067
  <div class="pf-v5-c-toolbar__content">
3940
2068
  <div class="pf-v5-c-toolbar__content-section">
3941
2069
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
3942
- <div class="pf-v5-c-dropdown">
3943
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
3944
- <label
3945
- class="pf-v5-c-dropdown__toggle-check"
3946
- for="toolbar-stacked-collapsed-example-bulk-select-toggle-check"
3947
- >
3948
- <div class="pf-v5-c-check pf-m-standalone">
3949
- <input
3950
- class="pf-v5-c-check__input"
3951
- type="checkbox"
3952
- id="toolbar-stacked-collapsed-example-bulk-select-toggle-check"
3953
- aria-label="Select all"
3954
- />
3955
- </div>
3956
- </label>
3957
-
3958
- <button
3959
- class="pf-v5-c-dropdown__toggle-button"
3960
- type="button"
3961
- aria-expanded="false"
3962
- id="toolbar-stacked-collapsed-example-bulk-select-toggle-button"
3963
- aria-label="Dropdown toggle"
3964
- >
3965
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3966
- </button>
3967
- </div>
3968
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
3969
- <li role="none">
3970
- <button
3971
- class="pf-v5-c-dropdown__menu-item"
3972
- role="menuitem"
3973
- type="button"
3974
- >Select all</button>
3975
- </li>
3976
- <li role="none">
3977
- <button
3978
- class="pf-v5-c-dropdown__menu-item"
3979
- role="menuitem"
3980
- type="button"
3981
- >Select none</button>
3982
- </li>
3983
- <li role="none">
3984
- <button
3985
- class="pf-v5-c-dropdown__menu-item"
3986
- role="menuitem"
3987
- type="button"
3988
- >Other action</button>
3989
- </li>
3990
- </ul>
2070
+ <div
2071
+ class="pf-v5-c-menu-toggle pf-m-split-button"
2072
+ id="toolbar-stacked-collapsed-example-check"
2073
+ >
2074
+ <label
2075
+ class="pf-v5-c-check pf-m-standalone"
2076
+ id="toolbar-stacked-collapsed-example-check-check"
2077
+ for="toolbar-stacked-collapsed-example-check-check-input"
2078
+ >
2079
+ <input
2080
+ class="pf-v5-c-check__input"
2081
+ type="checkbox"
2082
+ id="toolbar-stacked-collapsed-example-check-check-input"
2083
+ name="toolbar-stacked-collapsed-example-check-check-input"
2084
+ aria-label="Standalone check"
2085
+ />
2086
+ </label>
2087
+ <button
2088
+ class="pf-v5-c-menu-toggle__button"
2089
+ type="button"
2090
+ aria-expanded="false"
2091
+ id="toolbar-stacked-collapsed-example-menu-toggle-toggle-button"
2092
+ aria-label="Menu toggle"
2093
+ >
2094
+ <span class="pf-v5-c-menu-toggle__controls">
2095
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2096
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2097
+ </span>
2098
+ </span>
2099
+ </button>
3991
2100
  </div>
3992
2101
  </div>
3993
2102
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
3994
2103
  <div class="pf-v5-c-pagination" aria-label="Element pagination">
3995
2104
  <div class="pf-v5-c-pagination__total-items">37 items</div>
3996
- <div class="pf-v5-c-options-menu">
3997
- <button
3998
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3999
- type="button"
4000
- id="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
4001
- aria-haspopup="listbox"
4002
- aria-expanded="false"
4003
- >
4004
- <span class="pf-v5-c-options-menu__toggle-text">
4005
- <b>1 - 10</b>&nbsp;of&nbsp;
4006
- <b>36</b>
4007
- </span>
4008
- <div class="pf-v5-c-options-menu__toggle-icon">
4009
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4010
- </div>
4011
- </button>
4012
- <ul
4013
- class="pf-v5-c-options-menu__menu"
4014
- role="menu"
4015
- aria-labelledby="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
4016
- hidden
4017
- >
4018
- <li role="none">
4019
- <button
4020
- class="pf-v5-c-options-menu__menu-item"
4021
- type="button"
4022
- role="menuitem"
4023
- >5 per page</button>
4024
- </li>
4025
- <li role="none">
4026
- <button
4027
- class="pf-v5-c-options-menu__menu-item"
4028
- type="button"
4029
- role="menuitem"
4030
- >
4031
- 10 per page
4032
- <div class="pf-v5-c-options-menu__menu-item-icon">
4033
- <i class="fas fa-check" aria-hidden="true"></i>
4034
- </div>
4035
- </button>
4036
- </li>
4037
- <li role="none">
4038
- <button
4039
- class="pf-v5-c-options-menu__menu-item"
4040
- type="button"
4041
- role="menuitem"
4042
- >20 per page</button>
4043
- </li>
4044
- </ul>
2105
+ <div class="pf-v5-c-pagination__page-menu">
2106
+ <div class="pf-v5-c-options-menu">
2107
+ <button
2108
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2109
+ type="button"
2110
+ id="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
2111
+ aria-haspopup="listbox"
2112
+ aria-expanded="false"
2113
+ >
2114
+ <span class="pf-v5-c-options-menu__toggle-text">
2115
+ <b>1 - 10</b>&nbsp;of&nbsp;
2116
+ <b>36</b>
2117
+ </span>
2118
+ <div class="pf-v5-c-options-menu__toggle-icon">
2119
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2120
+ </div>
2121
+ </button>
2122
+ <ul
2123
+ class="pf-v5-c-options-menu__menu"
2124
+ role="menu"
2125
+ aria-labelledby="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
2126
+ hidden
2127
+ >
2128
+ <li role="none">
2129
+ <button
2130
+ class="pf-v5-c-options-menu__menu-item"
2131
+ type="button"
2132
+ role="menuitem"
2133
+ >5 per page</button>
2134
+ </li>
2135
+ <li role="none">
2136
+ <button
2137
+ class="pf-v5-c-options-menu__menu-item"
2138
+ type="button"
2139
+ role="menuitem"
2140
+ >
2141
+ 10 per page
2142
+ <div class="pf-v5-c-options-menu__menu-item-icon">
2143
+ <i class="fas fa-check" aria-hidden="true"></i>
2144
+ </div>
2145
+ </button>
2146
+ </li>
2147
+ <li role="none">
2148
+ <button
2149
+ class="pf-v5-c-options-menu__menu-item"
2150
+ type="button"
2151
+ role="menuitem"
2152
+ >20 per page</button>
2153
+ </li>
2154
+ </ul>
2155
+ </div>
4045
2156
  </div>
4046
-
4047
2157
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
4048
2158
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
4049
2159
  <button
@@ -4108,471 +2218,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
4108
2218
 
4109
2219
  ```
4110
2220
 
4111
- ### Expanded elements
4112
-
4113
- ```html
4114
- <div class="pf-v5-c-toolbar" id="toolbar-expanded-elements-example">
4115
- <div class="pf-v5-c-toolbar__content">
4116
- <div class="pf-v5-c-toolbar__content-section">
4117
- <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
4118
- <div class="pf-v5-c-dropdown">
4119
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
4120
- <label
4121
- class="pf-v5-c-dropdown__toggle-check"
4122
- for="toolbar-expanded-elements-example-bulk-select-toggle-check"
4123
- >
4124
- <div class="pf-v5-c-check pf-m-standalone">
4125
- <input
4126
- class="pf-v5-c-check__input"
4127
- type="checkbox"
4128
- id="toolbar-expanded-elements-example-bulk-select-toggle-check"
4129
- aria-label="Select all"
4130
- />
4131
- </div>
4132
- </label>
4133
-
4134
- <button
4135
- class="pf-v5-c-dropdown__toggle-button"
4136
- type="button"
4137
- aria-expanded="false"
4138
- id="toolbar-expanded-elements-example-bulk-select-toggle-button"
4139
- aria-label="Dropdown toggle"
4140
- >
4141
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4142
- </button>
4143
- </div>
4144
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
4145
- <li role="none">
4146
- <button
4147
- class="pf-v5-c-dropdown__menu-item"
4148
- role="menuitem"
4149
- type="button"
4150
- >Select all</button>
4151
- </li>
4152
- <li role="none">
4153
- <button
4154
- class="pf-v5-c-dropdown__menu-item"
4155
- role="menuitem"
4156
- type="button"
4157
- >Select none</button>
4158
- </li>
4159
- <li role="none">
4160
- <button
4161
- class="pf-v5-c-dropdown__menu-item"
4162
- role="menuitem"
4163
- type="button"
4164
- >Other action</button>
4165
- </li>
4166
- </ul>
4167
- </div>
4168
- </div>
4169
- <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl">
4170
- <div class="pf-v5-c-toolbar__toggle">
4171
- <button
4172
- class="pf-v5-c-button pf-m-plain"
4173
- type="button"
4174
- aria-label="Show filters"
4175
- aria-expanded="false"
4176
- aria-controls="toolbar-expanded-elements-example-expandable-content"
4177
- >
4178
- <i class="fas fa-filter" aria-hidden="true"></i>
4179
- </button>
4180
- </div>
4181
- <div class="pf-v5-c-toolbar__item pf-m-search-filter">
4182
- <div
4183
- class="pf-v5-c-input-group"
4184
- aria-label="search filter"
4185
- role="group"
4186
- >
4187
- <div class="pf-v5-c-input-group__item">
4188
- <div class="pf-v5-c-select" style="width: 124px">
4189
- <span
4190
- id="toolbar-expanded-elements-example-select-name-label"
4191
- hidden
4192
- >Choose one</span>
4193
-
4194
- <button
4195
- class="pf-v5-c-select__toggle"
4196
- type="button"
4197
- id="toolbar-expanded-elements-example-select-name-toggle"
4198
- aria-haspopup="true"
4199
- aria-expanded="false"
4200
- aria-labelledby="toolbar-expanded-elements-example-select-name-label toolbar-expanded-elements-example-select-name-toggle"
4201
- >
4202
- <div class="pf-v5-c-select__toggle-wrapper">
4203
- <span class="pf-v5-c-select__toggle-icon">
4204
- <i class="fas fa-filter" aria-hidden="true"></i>
4205
- </span>
4206
- <span class="pf-v5-c-select__toggle-text">Name</span>
4207
- </div>
4208
- <span class="pf-v5-c-select__toggle-arrow">
4209
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4210
- </span>
4211
- </button>
4212
-
4213
- <ul
4214
- class="pf-v5-c-select__menu"
4215
- role="listbox"
4216
- aria-labelledby="toolbar-expanded-elements-example-select-name-label"
4217
- hidden
4218
- >
4219
- <li role="presentation">
4220
- <button
4221
- class="pf-v5-c-select__menu-item"
4222
- role="option"
4223
- >Running</button>
4224
- </li>
4225
- <li role="presentation">
4226
- <button
4227
- class="pf-v5-c-select__menu-item pf-m-selected"
4228
- role="option"
4229
- aria-selected="true"
4230
- >
4231
- Stopped
4232
- <span class="pf-v5-c-select__menu-item-icon">
4233
- <i class="fas fa-check" aria-hidden="true"></i>
4234
- </span>
4235
- </button>
4236
- </li>
4237
- <li role="presentation">
4238
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
4239
- </li>
4240
- <li role="presentation">
4241
- <button
4242
- class="pf-v5-c-select__menu-item"
4243
- role="option"
4244
- >Degraded</button>
4245
- </li>
4246
- <li role="presentation">
4247
- <button
4248
- class="pf-v5-c-select__menu-item"
4249
- role="option"
4250
- >Needs maintenance</button>
4251
- </li>
4252
- </ul>
4253
- </div>
4254
- </div>
4255
- <div class="pf-v5-c-input-group__item pf-m-fill">
4256
- <div class="pf-v5-c-text-input-group">
4257
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
4258
- <span class="pf-v5-c-text-input-group__text">
4259
- <span class="pf-v5-c-text-input-group__icon">
4260
- <i class="fas fa-fw fa-search"></i>
4261
- </span>
4262
- <input
4263
- class="pf-v5-c-text-input-group__text-input"
4264
- type="text"
4265
- placeholder="Filter by name"
4266
- value
4267
- aria-label="Search input"
4268
- />
4269
- </span>
4270
- </div>
4271
- </div>
4272
- </div>
4273
- </div>
4274
- </div>
4275
- <div class="pf-v5-c-toolbar__group pf-m-filter-group">
4276
- <div class="pf-v5-c-toolbar__item">
4277
- <div class="pf-v5-c-select pf-m-expanded">
4278
- <span
4279
- id="toolbar-expanded-elements-example-select-checkbox-status-label"
4280
- hidden
4281
- >Choose many</span>
4282
-
4283
- <button
4284
- class="pf-v5-c-select__toggle"
4285
- type="button"
4286
- id="toolbar-expanded-elements-example-select-checkbox-status-toggle"
4287
- aria-haspopup="true"
4288
- aria-expanded="true"
4289
- aria-labelledby="toolbar-expanded-elements-example-select-checkbox-status-label toolbar-expanded-elements-example-select-checkbox-status-toggle"
4290
- >
4291
- <div class="pf-v5-c-select__toggle-wrapper">
4292
- <span class="pf-v5-c-select__toggle-text">Status</span>
4293
- </div>
4294
- <span class="pf-v5-c-select__toggle-arrow">
4295
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4296
- </span>
4297
- </button>
4298
-
4299
- <div class="pf-v5-c-select__menu">
4300
- <fieldset
4301
- class="pf-v5-c-select__menu-fieldset"
4302
- aria-label="Select input"
4303
- >
4304
- <label
4305
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4306
- id="toolbar-expanded-elements-example-select-checkbox-status-check-active"
4307
- for="toolbar-expanded-elements-example-select-checkbox-status-check-active-input"
4308
- >
4309
- <input
4310
- class="pf-v5-c-check__input"
4311
- type="checkbox"
4312
- id="toolbar-expanded-elements-example-select-checkbox-status-check-active-input"
4313
- name="toolbar-expanded-elements-example-select-checkbox-status-check-active-input"
4314
- checked
4315
- />
4316
- <span class="pf-v5-c-check__label">Active</span>
4317
- </label>
4318
- <label
4319
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4320
- id="toolbar-expanded-elements-example-select-checkbox-status-check-canceled"
4321
- for="toolbar-expanded-elements-example-select-checkbox-status-check-canceled-input"
4322
- >
4323
- <input
4324
- class="pf-v5-c-check__input"
4325
- type="checkbox"
4326
- id="toolbar-expanded-elements-example-select-checkbox-status-check-canceled-input"
4327
- name="toolbar-expanded-elements-example-select-checkbox-status-check-canceled-input"
4328
- checked
4329
- />
4330
- <span class="pf-v5-c-check__label">Canceled</span>
4331
- </label>
4332
- <label
4333
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4334
- id="toolbar-expanded-elements-example-select-checkbox-status-check-paused"
4335
- for="toolbar-expanded-elements-example-select-checkbox-status-check-paused-input"
4336
- >
4337
- <input
4338
- class="pf-v5-c-check__input"
4339
- type="checkbox"
4340
- id="toolbar-expanded-elements-example-select-checkbox-status-check-paused-input"
4341
- name="toolbar-expanded-elements-example-select-checkbox-status-check-paused-input"
4342
- />
4343
- <span class="pf-v5-c-check__label">Paused</span>
4344
- </label>
4345
- <label
4346
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4347
- id="toolbar-expanded-elements-example-select-checkbox-status-check-warning"
4348
- for="toolbar-expanded-elements-example-select-checkbox-status-check-warning-input"
4349
- >
4350
- <input
4351
- class="pf-v5-c-check__input"
4352
- type="checkbox"
4353
- id="toolbar-expanded-elements-example-select-checkbox-status-check-warning-input"
4354
- name="toolbar-expanded-elements-example-select-checkbox-status-check-warning-input"
4355
- checked
4356
- />
4357
- <span class="pf-v5-c-check__label">Warning</span>
4358
- </label>
4359
- <label
4360
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4361
- id="toolbar-expanded-elements-example-select-checkbox-status-check-restarted"
4362
- for="toolbar-expanded-elements-example-select-checkbox-status-check-restarted-input"
4363
- >
4364
- <input
4365
- class="pf-v5-c-check__input"
4366
- type="checkbox"
4367
- id="toolbar-expanded-elements-example-select-checkbox-status-check-restarted-input"
4368
- name="toolbar-expanded-elements-example-select-checkbox-status-check-restarted-input"
4369
- />
4370
- <span class="pf-v5-c-check__label">Restarted</span>
4371
- </label>
4372
- </fieldset>
4373
- </div>
4374
- </div>
4375
- </div>
4376
- <div class="pf-v5-c-toolbar__item">
4377
- <div class="pf-v5-c-select pf-m-expanded">
4378
- <span
4379
- id="toolbar-expanded-elements-example-select-checkbox-risk-label"
4380
- hidden
4381
- >Choose many</span>
4382
-
4383
- <button
4384
- class="pf-v5-c-select__toggle"
4385
- type="button"
4386
- id="toolbar-expanded-elements-example-select-checkbox-risk-toggle"
4387
- aria-haspopup="true"
4388
- aria-expanded="true"
4389
- aria-labelledby="toolbar-expanded-elements-example-select-checkbox-risk-label toolbar-expanded-elements-example-select-checkbox-risk-toggle"
4390
- >
4391
- <div class="pf-v5-c-select__toggle-wrapper">
4392
- <span class="pf-v5-c-select__toggle-text">Risk</span>
4393
- </div>
4394
- <span class="pf-v5-c-select__toggle-arrow">
4395
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4396
- </span>
4397
- </button>
4398
-
4399
- <div class="pf-v5-c-select__menu">
4400
- <fieldset
4401
- class="pf-v5-c-select__menu-fieldset"
4402
- aria-label="Select input"
4403
- >
4404
- <label
4405
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4406
- id="toolbar-expanded-elements-example-select-checkbox-risk-check-active"
4407
- for="toolbar-expanded-elements-example-select-checkbox-risk-check-active-input"
4408
- >
4409
- <input
4410
- class="pf-v5-c-check__input"
4411
- type="checkbox"
4412
- id="toolbar-expanded-elements-example-select-checkbox-risk-check-active-input"
4413
- name="toolbar-expanded-elements-example-select-checkbox-risk-check-active-input"
4414
- checked
4415
- />
4416
- <span class="pf-v5-c-check__label">Active</span>
4417
- </label>
4418
- <label
4419
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4420
- id="toolbar-expanded-elements-example-select-checkbox-risk-check-canceled"
4421
- for="toolbar-expanded-elements-example-select-checkbox-risk-check-canceled-input"
4422
- >
4423
- <input
4424
- class="pf-v5-c-check__input"
4425
- type="checkbox"
4426
- id="toolbar-expanded-elements-example-select-checkbox-risk-check-canceled-input"
4427
- name="toolbar-expanded-elements-example-select-checkbox-risk-check-canceled-input"
4428
- checked
4429
- />
4430
- <span class="pf-v5-c-check__label">Canceled</span>
4431
- </label>
4432
- <label
4433
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4434
- id="toolbar-expanded-elements-example-select-checkbox-risk-check-paused"
4435
- for="toolbar-expanded-elements-example-select-checkbox-risk-check-paused-input"
4436
- >
4437
- <input
4438
- class="pf-v5-c-check__input"
4439
- type="checkbox"
4440
- id="toolbar-expanded-elements-example-select-checkbox-risk-check-paused-input"
4441
- name="toolbar-expanded-elements-example-select-checkbox-risk-check-paused-input"
4442
- />
4443
- <span class="pf-v5-c-check__label">Paused</span>
4444
- </label>
4445
- <label
4446
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4447
- id="toolbar-expanded-elements-example-select-checkbox-risk-check-warning"
4448
- for="toolbar-expanded-elements-example-select-checkbox-risk-check-warning-input"
4449
- >
4450
- <input
4451
- class="pf-v5-c-check__input"
4452
- type="checkbox"
4453
- id="toolbar-expanded-elements-example-select-checkbox-risk-check-warning-input"
4454
- name="toolbar-expanded-elements-example-select-checkbox-risk-check-warning-input"
4455
- checked
4456
- />
4457
- <span class="pf-v5-c-check__label">Warning</span>
4458
- </label>
4459
- <label
4460
- class="pf-v5-c-check pf-v5-c-select__menu-item"
4461
- id="toolbar-expanded-elements-example-select-checkbox-risk-check-restarted"
4462
- for="toolbar-expanded-elements-example-select-checkbox-risk-check-restarted-input"
4463
- >
4464
- <input
4465
- class="pf-v5-c-check__input"
4466
- type="checkbox"
4467
- id="toolbar-expanded-elements-example-select-checkbox-risk-check-restarted-input"
4468
- name="toolbar-expanded-elements-example-select-checkbox-risk-check-restarted-input"
4469
- />
4470
- <span class="pf-v5-c-check__label">Restarted</span>
4471
- </label>
4472
- </fieldset>
4473
- </div>
4474
- </div>
4475
- </div>
4476
- </div>
4477
- </div>
4478
- <div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
4479
- <div
4480
- class="pf-v5-c-overflow-menu"
4481
- id="toolbar-expanded-elements-example-icon-button-overflow-menu"
4482
- >
4483
- <div class="pf-v5-c-overflow-menu__content">
4484
- <div class="pf-v5-c-overflow-menu__group pf-m-icon-button-group">
4485
- <div class="pf-v5-c-overflow-menu__item">
4486
- <button
4487
- class="pf-v5-c-button pf-m-plain"
4488
- type="button"
4489
- aria-label="Edit"
4490
- >
4491
- <i class="fas fa-edit" aria-hidden="true"></i>
4492
- </button>
4493
- </div>
4494
- <div class="pf-v5-c-overflow-menu__item">
4495
- <button
4496
- class="pf-v5-c-button pf-m-plain"
4497
- type="button"
4498
- aria-label="Clone"
4499
- >
4500
- <i class="fas fa-clone" aria-hidden="true"></i>
4501
- </button>
4502
- </div>
4503
- <div class="pf-v5-c-overflow-menu__item">
4504
- <button
4505
- class="pf-v5-c-button pf-m-plain"
4506
- type="button"
4507
- aria-label="Sync"
4508
- >
4509
- <i class="fas fa-sync" aria-hidden="true"></i>
4510
- </button>
4511
- </div>
4512
- </div>
4513
- </div>
4514
- </div>
4515
- </div>
4516
- <div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
4517
- <div
4518
- class="pf-v5-c-overflow-menu"
4519
- id="toolbar-expanded-elements-example-overflow-menu"
4520
- >
4521
- <div class="pf-v5-c-overflow-menu__content">
4522
- <div class="pf-v5-c-overflow-menu__group pf-m-button-group">
4523
- <div class="pf-v5-c-overflow-menu__item">
4524
- <button
4525
- class="pf-v5-c-button pf-m-primary"
4526
- type="button"
4527
- >Primary</button>
4528
- </div>
4529
- <div class="pf-v5-c-overflow-menu__item">
4530
- <button
4531
- class="pf-v5-c-button pf-m-secondary"
4532
- type="button"
4533
- >Secondary</button>
4534
- </div>
4535
- </div>
4536
- </div>
4537
-
4538
- <div class="pf-v5-c-overflow-menu__control">
4539
- <div class="pf-v5-c-dropdown pf-m-expanded">
4540
- <button
4541
- class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
4542
- type="button"
4543
- id="toolbar-expanded-elements-example-overflow-menu-dropdown-toggle"
4544
- aria-label="Overflow menu"
4545
- aria-expanded="true"
4546
- >
4547
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4548
- </button>
4549
- <ul
4550
- class="pf-v5-c-dropdown__menu"
4551
- role="menu"
4552
- aria-labelledby="toolbar-expanded-elements-example-overflow-menu-dropdown-toggle"
4553
- >
4554
- <li role="none">
4555
- <button
4556
- role="menuitem"
4557
- class="pf-v5-c-dropdown__menu-item"
4558
- >Tertiary</button>
4559
- </li>
4560
- </ul>
4561
- </div>
4562
- </div>
4563
- </div>
4564
- </div>
4565
- </div>
4566
- <div
4567
- class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
4568
- id="toolbar-expanded-elements-example-expandable-content"
4569
- hidden
4570
- ></div>
4571
- </div>
4572
- </div>
4573
-
4574
- ```
4575
-
4576
2221
  ## Documentation
4577
2222
 
4578
2223
  ### Overview
@@ -4593,37 +2238,23 @@ As the toolbar component is a hybrid layout and component, some of its elements
4593
2238
  | `.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. |
4594
2239
  | `.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. |
4595
2240
  | `.pf-m-expanded` | `.pf-v5-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
4596
- | `.pf-m-bulk-select` | `.pf-v5-c-toolbar__item` | Initiates bulk select spacing. |
4597
- | `.pf-m-overflow-menu` | `.pf-v5-c-toolbar__item` | Initiates overflow menu spacing. |
4598
- | `.pf-m-pagination` | `.pf-v5-c-toolbar__item` | Initiates pagination spacing and margin. |
4599
- | `.pf-m-search-filter` | `.pf-v5-c-toolbar__item` | Initiates search filter spacing. |
4600
- | `.pf-m-chip-group` | `.pf-v5-c-toolbar__item` | Initiates chip group spacing. |
4601
- | `.pf-m-expand-all` | `.pf-v5-c-toolbar__item` | Initiates an item for an expand all button. |
4602
2241
  | `.pf-m-expanded` | `.pf-v5-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
4603
- | `.pf-m-button-group` | `.pf-v5-c-toolbar__group` | Initiates button group spacing. |
4604
2242
  | `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Initiates icon button group spacing. |
4605
2243
  | `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Initiates filter group spacing. |
4606
- | `.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). |
4607
- | `.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). |
4608
- | `.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). |
4609
- | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4610
- | `.pf-m-align-items-center` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
4611
- | `.pf-m-align-items-baseline` | `.pf-v5-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
4612
- | `.pf-m-align-self-center` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
4613
- | `.pf-m-align-self-baseline` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
4614
- | `.pf-m-chip-container` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
2244
+ | `.pf-m-chip-container` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
4615
2245
  | `.pf-m-overflow-container` | `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
4616
2246
  | `.pf-m-expanded` | `.pf-v5-c-toolbar__expandable-content`, `.pf-v5-c-toolbar__toggle` | Modifies the component for the expanded state. |
4617
- | `.pf-m-wrap` | `.pf-v5-c-toolbar`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element to wrap. |
4618
- | `.pf-m-nowrap` | `.pf-v5-c-toolbar`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element to nowrap. |
2247
+ | `.pf-m-[wrap/nowrap]` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies the toolbar element to wrap/not wrap. |
2248
+ | `.pf-m-align-[start/end]` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
2249
+ | `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) child alignment. |
2250
+ | `.pf-m-align-self-[stretch/baseline/start/center/end]` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) self alignment. |
4619
2251
 
4620
2252
  ### Accessibility
4621
2253
 
4622
2254
  | Attribute | Applied to | Outcome |
4623
2255
  | -- | -- | -- |
4624
2256
  | `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** |
4625
- | `aria-expanded="true"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates that the expandable content is visible. **Required** |
4626
- | `aria-expanded="false"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates the the expandable content is hidden. **Required** |
2257
+ | `aria-expanded="[true/false]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates the the expandable content is hidden/visible. **Required** |
4627
2258
  | `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** |
4628
2259
  | `id="[expandable-content_id]"` | `.pf-v5-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
4629
2260
  | `aria-label="Expand all"` | `.pf-v5-c-toolbar__item.pf-m-expand-all` | Provides an accessible label for the expand all item button. **Required** |
@@ -4634,11 +2265,10 @@ As the toolbar component is a hybrid layout and component, some of its elements
4634
2265
  | Class | Applied to | Outcome |
4635
2266
  | -- | -- | -- |
4636
2267
  | `.pf-m-toggle-group` | `.pf-v5-c-toolbar__group` | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. |
4637
- | `.pf-m-show{-on-[breakpoint]}` | `.pf-v5-c-toolbar__group.pf-m-toggle-group`, `.pf-v5-c-toolbar__expandable-content` | Modifies toolbar element to hidden at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
2268
+ | `.pf-m-[show/hide]` | `.pf-v5-c-toolbar__group.pf-m-toggle-group`, `.pf-v5-c-toolbar__expandable-content` | Modifies toolbar element to hidden. |
4638
2269
 
4639
2270
  ### Spacer system
4640
2271
 
4641
2272
  | Class | Applied to | Outcome |
4642
2273
  | -- | -- | -- |
4643
- | `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4644
- | `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-v5-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
2274
+ | `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |