@patternfly/patternfly 6.0.0-alpha.9 → 6.0.0-alpha.90

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 (341) 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 +1005 -856
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +319 -290
  25. package/base/tokens/_tokens-default.scss +485 -329
  26. package/base/tokens/_tokens-font.scss +122 -58
  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 +27 -16
  52. package/components/Breadcrumb/breadcrumb.scss +27 -18
  53. package/components/Button/button.css +398 -354
  54. package/components/Button/button.scss +455 -477
  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 +54 -51
  84. package/components/DualListSelector/dual-list-selector.scss +55 -54
  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 +66 -116
  92. package/components/Form/form.scss +63 -128
  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 +378 -355
  110. package/components/Label/label.scss +431 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +68 -112
  114. package/components/Login/login.scss +54 -82
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +388 -417
  118. package/components/Menu/menu.scss +370 -525
  119. package/components/MenuToggle/menu-toggle.css +223 -276
  120. package/components/MenuToggle/menu-toggle.scss +322 -390
  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 +4 -4
  128. package/components/NotificationBadge/notification-badge.scss +4 -4
  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 +32 -52
  152. package/components/SimpleList/simple-list.scss +37 -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 +31 -47
  166. package/components/Table/table-grid.scss +42 -55
  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 +81 -74
  170. package/components/Table/table-tree-view.scss +53 -39
  171. package/components/Table/table.css +159 -264
  172. package/components/Table/table.scss +216 -351
  173. package/components/Tabs/tabs.css +142 -175
  174. package/components/Tabs/tabs.scss +158 -218
  175. package/components/TextInputGroup/text-input-group.css +0 -14
  176. package/components/TextInputGroup/text-input-group.scss +3 -16
  177. package/components/Tile/tile.css +40 -81
  178. package/components/Tile/tile.scss +38 -84
  179. package/components/Timestamp/timestamp.css +12 -9
  180. package/components/Timestamp/timestamp.scss +11 -10
  181. package/components/Title/title.css +70 -19
  182. package/components/Title/title.scss +90 -20
  183. package/components/ToggleGroup/toggle-group.css +54 -48
  184. package/components/ToggleGroup/toggle-group.scss +62 -50
  185. package/components/Toolbar/toolbar.css +2527 -1031
  186. package/components/Toolbar/toolbar.scss +233 -520
  187. package/components/Tooltip/tooltip.css +16 -18
  188. package/components/Tooltip/tooltip.scss +20 -24
  189. package/components/TreeView/tree-view.css +76 -97
  190. package/components/TreeView/tree-view.scss +82 -113
  191. package/components/Truncate/truncate.css +4 -0
  192. package/components/Truncate/truncate.scss +3 -0
  193. package/components/Wizard/wizard.css +122 -205
  194. package/components/Wizard/wizard.scss +121 -181
  195. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  196. package/docs/components/Accordion/examples/Accordion.md +614 -416
  197. package/docs/components/ActionList/examples/ActionList.md +73 -22
  198. package/docs/components/Alert/examples/Alert.md +3 -3
  199. package/docs/components/Avatar/examples/Avatar.md +5 -19
  200. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  201. package/docs/components/Badge/examples/Badge.md +21 -0
  202. package/docs/components/Banner/examples/Banner.md +48 -25
  203. package/docs/components/Brand/examples/Brand.css +12 -0
  204. package/docs/components/Brand/examples/Brand.md +51 -32
  205. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  206. package/docs/components/Button/examples/Button.css +4 -0
  207. package/docs/components/Button/examples/Button.md +1439 -113
  208. package/docs/components/CalendarMonth/examples/CalendarMonth.md +44 -220
  209. package/docs/components/Card/examples/Card.md +550 -133
  210. package/docs/components/Check/examples/Check.md +1 -0
  211. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  212. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  213. package/docs/components/Content/examples/Content.md +5 -5
  214. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  215. package/docs/components/Divider/examples/Divider.css +3 -1
  216. package/docs/components/Divider/examples/Divider.md +30 -5
  217. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  218. package/docs/components/Drawer/examples/Drawer.md +294 -256
  219. package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
  220. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  221. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  222. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  223. package/docs/components/Form/examples/Form.md +134 -89
  224. package/docs/components/Icon/examples/Icon.md +82 -11
  225. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  226. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  227. package/docs/components/Label/examples/Label.css +4 -0
  228. package/docs/components/Label/examples/Label.md +3090 -703
  229. package/docs/components/LogViewer/examples/LogViewer.md +100 -80
  230. package/docs/components/Login/examples/Login.md +160 -105
  231. package/docs/components/Masthead/examples/masthead.md +443 -65
  232. package/docs/components/Menu/examples/Menu.css +7 -11
  233. package/docs/components/Menu/examples/Menu.md +213 -486
  234. package/docs/components/MenuToggle/examples/MenuToggle.md +253 -224
  235. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  236. package/docs/components/Nav/examples/Navigation.css +1 -23
  237. package/docs/components/Nav/examples/Navigation.md +69 -243
  238. package/docs/components/Page/examples/Page.css +0 -8
  239. package/docs/components/Page/examples/Page.md +22 -21
  240. package/docs/components/Pagination/examples/Pagination.md +663 -637
  241. package/docs/components/Panel/examples/Panel.md +12 -0
  242. package/docs/components/Popover/examples/Popover.md +1 -1
  243. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  244. package/docs/components/Radio/examples/Radio.md +1 -1
  245. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  246. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  247. package/docs/components/TabContent/examples/TabContent.md +10 -10
  248. package/docs/components/Table/examples/Table.md +8 -8
  249. package/docs/components/Tabs/examples/Tabs.css +1 -1
  250. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  251. package/docs/components/Tile/examples/Tile.md +264 -144
  252. package/docs/components/Title/examples/Title.md +18 -0
  253. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  254. package/docs/components/Toolbar/examples/Toolbar.md +985 -3341
  255. package/docs/components/TreeView/examples/TreeView.md +7 -57
  256. package/docs/components/Truncate/examples/Truncate.css +2 -2
  257. package/docs/components/Wizard/examples/Wizard.md +31 -7
  258. package/docs/demos/AboutModal/examples/AboutModal.md +116 -35
  259. package/docs/demos/Alert/examples/Alert.md +366 -99
  260. package/docs/demos/BackToTop/examples/BackToTop.md +114 -33
  261. package/docs/demos/Banner/examples/Banner.md +235 -68
  262. package/docs/demos/Button/examples/Button.md +1 -1
  263. package/docs/demos/Card/examples/Card.md +2 -2
  264. package/docs/demos/CardView/examples/CardView.md +256 -192
  265. package/docs/demos/ContextSelector/examples/ContextSelector.md +414 -107
  266. package/docs/demos/Dashboard/examples/Dashboard.md +114 -33
  267. package/docs/demos/DataList/examples/DataList.md +1049 -950
  268. package/docs/demos/DescriptionList/examples/DescriptionList.md +342 -99
  269. package/docs/demos/Drawer/examples/Drawer.md +700 -271
  270. package/docs/demos/Form/examples/BasicForms.md +138 -84
  271. package/docs/demos/JumpLinks/examples/JumpLinks.md +989 -409
  272. package/docs/demos/Masthead/examples/Masthead.md +833 -357
  273. package/docs/demos/Modal/examples/Modal.md +717 -222
  274. package/docs/demos/Nav/examples/Nav.md +763 -926
  275. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +575 -165
  276. package/docs/demos/Page/examples/Page.md +1050 -309
  277. package/docs/demos/Page/examples/Penta.md +73 -31
  278. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +20 -16
  279. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  280. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1276 -861
  281. package/docs/demos/Skeleton/examples/Skeleton.md +114 -33
  282. package/docs/demos/Table/examples/Table.md +4002 -3503
  283. package/docs/demos/Tabs/examples/Tabs.md +711 -219
  284. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  285. package/docs/demos/Toolbar/examples/Toolbar.md +1350 -1480
  286. package/docs/demos/Wizard/examples/Wizard.md +1134 -315
  287. package/docs/layouts/Flex/examples/Flex.md +11 -11
  288. package/package.json +32 -32
  289. package/patternfly-base-no-globals-theme-dark-unversioned.css +1021 -868
  290. package/patternfly-base-no-globals.css +1021 -868
  291. package/patternfly-base-theme-dark-unversioned.css +1027 -873
  292. package/patternfly-base.css +1027 -873
  293. package/patternfly-no-globals.css +9048 -8979
  294. package/patternfly-theme-dark-unversioned.css +9051 -8981
  295. package/patternfly.css +9051 -8981
  296. package/patternfly.min.css +1 -1
  297. package/patternfly.min.css.map +1 -1
  298. package/sass-utilities/mixins.scss +18 -0
  299. package/base/themes/dark/_variables.scss +0 -102
  300. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  301. package/components/Accordion/themes/dark/accordion.scss +0 -9
  302. package/components/Alert/themes/dark/alert.scss +0 -17
  303. package/components/Badge/themes/dark/badge.scss +0 -9
  304. package/components/Banner/themes/dark/banner.scss +0 -14
  305. package/components/Button/themes/dark/button.scss +0 -51
  306. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  307. package/components/Card/themes/dark/card.scss +0 -20
  308. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  309. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  310. package/components/DataList/themes/dark/data-list.scss +0 -10
  311. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  312. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  313. package/components/Drawer/themes/dark/drawer.scss +0 -13
  314. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  315. package/components/Form/themes/dark/form.scss +0 -7
  316. package/components/FormControl/themes/dark/form-control.scss +0 -24
  317. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  318. package/components/Hint/themes/dark/hint.scss +0 -8
  319. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  320. package/components/Label/themes/dark/label.scss +0 -53
  321. package/components/Login/themes/dark/login.scss +0 -12
  322. package/components/Masthead/themes/dark/masthead.scss +0 -14
  323. package/components/MenuToggle/themes/dark/menu-toggle.scss +0 -27
  324. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  325. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  326. package/components/Page/themes/dark/page.scss +0 -69
  327. package/components/Pagination/themes/dark/pagination.scss +0 -7
  328. package/components/Panel/themes/dark/panel.scss +0 -7
  329. package/components/Popover/themes/dark/popover.scss +0 -11
  330. package/components/Progress/themes/dark/progress.scss +0 -9
  331. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  332. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  333. package/components/Switch/themes/dark/switch.scss +0 -11
  334. package/components/Tabs/themes/dark/tabs.scss +0 -10
  335. package/components/TextInputGroup/themes/dark/text-input-group.scss +0 -11
  336. package/components/Tile/themes/dark/tile.scss +0 -10
  337. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  338. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  339. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  340. package/components/Wizard/themes/dark/wizard.scss +0 -12
  341. package/docs/components/Avatar/examples/Avatar.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">
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">
235
188
  <i class="fas fa-caret-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">
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">
294
203
  <i class="fas fa-caret-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">
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">
353
218
  <i class="fas fa-caret-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,15 +281,17 @@ 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
- <i class="fas fa-filter" aria-hidden="true"></i>
292
+ <span class="pf-v5-c-menu-toggle__icon">
293
+ <i class="fas fa-filter" aria-hidden="true"></i>
294
+ </span>
464
295
  </button>
465
296
  </div>
466
297
  <div class="pf-v5-c-toolbar__item pf-m-search-filter">
@@ -470,72 +301,22 @@ In some instances, it may be necessary to adjust spacing explicitly where items
470
301
  role="group"
471
302
  >
472
303
  <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">
304
+ <button
305
+ class="pf-v5-c-menu-toggle"
306
+ type="button"
307
+ aria-expanded="false"
308
+ id="toolbar-toggle-group-example-search-filter-menu"
309
+ >
310
+ <span class="pf-v5-c-menu-toggle__icon">
311
+ <i class="fas fa-filter" aria-hidden="true"></i>
312
+ </span>
313
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
314
+ <span class="pf-v5-c-menu-toggle__controls">
315
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
494
316
  <i class="fas fa-caret-down" aria-hidden="true"></i>
495
317
  </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>
318
+ </span>
319
+ </button>
539
320
  </div>
540
321
  <div class="pf-v5-c-input-group__item pf-m-fill">
541
322
  <div class="pf-v5-c-text-input-group">
@@ -559,218 +340,34 @@ In some instances, it may be necessary to adjust spacing explicitly where items
559
340
  </div>
560
341
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
561
342
  <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">
343
+ <button
344
+ class="pf-v5-c-menu-toggle"
345
+ type="button"
346
+ aria-expanded="false"
347
+ id="toolbar-toggle-group-example-menu-toggle-checkbox-status"
348
+ >
349
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
350
+ <span class="pf-v5-c-menu-toggle__controls">
351
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
580
352
  <i class="fas fa-caret-down" aria-hidden="true"></i>
581
353
  </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>
354
+ </span>
355
+ </button>
667
356
  </div>
668
357
  <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">
358
+ <button
359
+ class="pf-v5-c-menu-toggle"
360
+ type="button"
361
+ aria-expanded="false"
362
+ id="toolbar-toggle-group-example-menu-toggle-checkbox-risk"
363
+ >
364
+ <span class="pf-v5-c-menu-toggle__text">Risk</span>
365
+ <span class="pf-v5-c-menu-toggle__controls">
366
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
687
367
  <i class="fas fa-caret-down" aria-hidden="true"></i>
688
368
  </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>
369
+ </span>
370
+ </button>
774
371
  </div>
775
372
  </div>
776
373
  </div>
@@ -792,15 +389,17 @@ In some instances, it may be necessary to adjust spacing explicitly where items
792
389
  <div class="pf-v5-c-toolbar__content">
793
390
  <div class="pf-v5-c-toolbar__content-section">
794
391
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
795
- <div class="pf-v5-c-toolbar__toggle pf-m-expanded">
392
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
796
393
  <button
797
- class="pf-v5-c-button pf-m-plain"
394
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
798
395
  type="button"
799
- aria-label="Show filters"
800
396
  aria-expanded="true"
397
+ aria-label="Show filters"
801
398
  aria-controls="toolbar-toggle-group-collapsed-example-expandable-content"
802
399
  >
803
- <i class="fas fa-filter" aria-hidden="true"></i>
400
+ <span class="pf-v5-c-menu-toggle__icon">
401
+ <i class="fas fa-filter" aria-hidden="true"></i>
402
+ </span>
804
403
  </button>
805
404
  </div>
806
405
  </div>
@@ -816,72 +415,22 @@ In some instances, it may be necessary to adjust spacing explicitly where items
816
415
  role="group"
817
416
  >
818
417
  <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">
418
+ <button
419
+ class="pf-v5-c-menu-toggle"
420
+ type="button"
421
+ aria-expanded="false"
422
+ id="toolbar-toggle-group-collapsed-example-search-filter-menu"
423
+ >
424
+ <span class="pf-v5-c-menu-toggle__icon">
425
+ <i class="fas fa-filter" aria-hidden="true"></i>
426
+ </span>
427
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
428
+ <span class="pf-v5-c-menu-toggle__controls">
429
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
840
430
  <i class="fas fa-caret-down" aria-hidden="true"></i>
841
431
  </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>
432
+ </span>
433
+ </button>
885
434
  </div>
886
435
  <div class="pf-v5-c-input-group__item pf-m-fill">
887
436
  <div class="pf-v5-c-text-input-group">
@@ -905,218 +454,34 @@ In some instances, it may be necessary to adjust spacing explicitly where items
905
454
  </div>
906
455
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
907
456
  <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">
457
+ <button
458
+ class="pf-v5-c-menu-toggle"
459
+ type="button"
460
+ aria-expanded="false"
461
+ id="toolbar-toggle-group-collapsed-example-menu-toggle-checkbox-status"
462
+ >
463
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
464
+ <span class="pf-v5-c-menu-toggle__controls">
465
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
926
466
  <i class="fas fa-caret-down" aria-hidden="true"></i>
927
467
  </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>
468
+ </span>
469
+ </button>
1013
470
  </div>
1014
471
  <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">
472
+ <button
473
+ class="pf-v5-c-menu-toggle"
474
+ type="button"
475
+ aria-expanded="false"
476
+ id="toolbar-toggle-group-collapsed-example-menu-toggle-checkbox-risk"
477
+ >
478
+ <span class="pf-v5-c-menu-toggle__text">Risk</span>
479
+ <span class="pf-v5-c-menu-toggle__controls">
480
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1033
481
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1034
482
  </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>
483
+ </span>
484
+ </button>
1120
485
  </div>
1121
486
  </div>
1122
487
  </div>
@@ -1134,8 +499,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1134
499
  | Attribute | Applied to | Outcome |
1135
500
  | -- | -- | -- |
1136
501
  | `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** |
502
+ | `aria-expanded="[true/false]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates that the expandable content is visible/hidden. **Required** |
1139
503
  | `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
504
  | `id="[expandable-content_id]"` | `.pf-v5-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
1141
505
 
@@ -1143,13 +507,13 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1143
507
 
1144
508
  | Attribute | Applied to | Outcome |
1145
509
  | -- | -- | -- |
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** |
510
+ | `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
511
 
1148
512
  ### Usage
1149
513
 
1150
514
  | Class | Applied to | Outcome |
1151
515
  | -- | -- | -- |
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. |
516
+ | `.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
517
  | `.pf-m-chip-container` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
1154
518
  | `.pf-m-expanded` | `.pf-v5-c-toolbar__expandable-content`, `.pf-v5-c-toolbar__toggle` | Modifies the component for the expanded state. |
1155
519
 
@@ -1165,67 +529,50 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1165
529
  <div class="pf-v5-c-toolbar__content">
1166
530
  <div class="pf-v5-c-toolbar__content-section">
1167
531
  <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>
532
+ <div
533
+ class="pf-v5-c-menu-toggle pf-m-split-button"
534
+ id="toolbar-selected-filters-toggle-group-collapsed-example-check"
535
+ >
536
+ <label
537
+ class="pf-v5-c-check pf-m-standalone"
538
+ id="toolbar-selected-filters-toggle-group-collapsed-example-check-check"
539
+ for="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
540
+ >
541
+ <input
542
+ class="pf-v5-c-check__input"
543
+ type="checkbox"
544
+ id="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
545
+ name="toolbar-selected-filters-toggle-group-collapsed-example-check-check-input"
546
+ aria-label="Standalone check"
547
+ />
548
+ </label>
549
+ <button
550
+ class="pf-v5-c-menu-toggle__button"
551
+ type="button"
552
+ aria-expanded="false"
553
+ id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-toggle-button"
554
+ aria-label="Menu toggle"
555
+ >
556
+ <span class="pf-v5-c-menu-toggle__controls">
557
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
558
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
559
+ </span>
560
+ </span>
561
+ </button>
1217
562
  </div>
1218
563
  </div>
1219
564
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
1220
- <div class="pf-v5-c-toolbar__toggle">
565
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1221
566
  <button
1222
- class="pf-v5-c-button pf-m-plain"
567
+ class="pf-v5-c-menu-toggle pf-m-plain"
1223
568
  type="button"
1224
- aria-label="Show filters"
1225
569
  aria-expanded="false"
570
+ aria-label="Show filters"
1226
571
  aria-controls="toolbar-selected-filters-toggle-group-collapsed-example-expandable-content"
1227
572
  >
1228
- <i class="fas fa-filter" aria-hidden="true"></i>
573
+ <span class="pf-v5-c-menu-toggle__icon">
574
+ <i class="fas fa-filter" aria-hidden="true"></i>
575
+ </span>
1229
576
  </button>
1230
577
  </div>
1231
578
  <div class="pf-v5-c-toolbar__item pf-m-search-filter">
@@ -1235,72 +582,22 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1235
582
  role="group"
1236
583
  >
1237
584
  <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">
585
+ <button
586
+ class="pf-v5-c-menu-toggle"
587
+ type="button"
588
+ aria-expanded="false"
589
+ id="toolbar-selected-filters-toggle-group-collapsed-example-search-filter-menu"
590
+ >
591
+ <span class="pf-v5-c-menu-toggle__icon">
592
+ <i class="fas fa-filter" aria-hidden="true"></i>
593
+ </span>
594
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
595
+ <span class="pf-v5-c-menu-toggle__controls">
596
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1259
597
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1260
598
  </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>
599
+ </span>
600
+ </button>
1304
601
  </div>
1305
602
  <div class="pf-v5-c-input-group__item pf-m-fill">
1306
603
  <div class="pf-v5-c-text-input-group">
@@ -1324,218 +621,34 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1324
621
  </div>
1325
622
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
1326
623
  <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">
624
+ <button
625
+ class="pf-v5-c-menu-toggle"
626
+ type="button"
627
+ aria-expanded="false"
628
+ id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-checkbox-status"
629
+ >
630
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
631
+ <span class="pf-v5-c-menu-toggle__controls">
632
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1345
633
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1346
634
  </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>
635
+ </span>
636
+ </button>
1432
637
  </div>
1433
638
  <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">
639
+ <button
640
+ class="pf-v5-c-menu-toggle"
641
+ type="button"
642
+ aria-expanded="false"
643
+ id="toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-checkbox-risk"
644
+ >
645
+ <span class="pf-v5-c-menu-toggle__text">Risk</span>
646
+ <span class="pf-v5-c-menu-toggle__controls">
647
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1452
648
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1453
649
  </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>
650
+ </span>
651
+ </button>
1539
652
  </div>
1540
653
  </div>
1541
654
  </div>
@@ -1591,174 +704,184 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1591
704
  hidden
1592
705
  >
1593
706
  <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>
707
+ <div class="pf-v5-c-toolbar__group pf-m-grow">
708
+ <div class="pf-v5-c-toolbar__item">
709
+ <div class="pf-v5-c-chip-group" role="group">
710
+ <div class="pf-v5-c-chip-group__main">
711
+ <span
712
+ class="pf-v5-c-chip-group__label"
713
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
714
+ >Status</span>
715
+ <ul
716
+ class="pf-v5-c-chip-group__list"
717
+ role="list"
718
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-status-chip-group-label"
719
+ >
720
+ <li class="pf-v5-c-chip-group__list-item">
721
+ <div class="pf-v5-c-chip">
722
+ <span class="pf-v5-c-chip__content">
723
+ <span
724
+ class="pf-v5-c-chip__text"
725
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
726
+ >Chip one</span>
727
+ </span>
728
+ <span class="pf-v5-c-chip__actions">
729
+ <button
730
+ class="pf-v5-c-button pf-m-plain"
731
+ type="button"
732
+ 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"
733
+ aria-label="Remove"
734
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one"
735
+ >
736
+ <i class="fas fa-times" aria-hidden="true"></i>
737
+ </button>
738
+ </span>
739
+ </div>
740
+ </li>
741
+ <li class="pf-v5-c-chip-group__list-item">
742
+ <div class="pf-v5-c-chip">
743
+ <span class="pf-v5-c-chip__content">
744
+ <span
745
+ class="pf-v5-c-chip__text"
746
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
747
+ >Chip two</span>
748
+ </span>
749
+ <span class="pf-v5-c-chip__actions">
750
+ <button
751
+ class="pf-v5-c-button pf-m-plain"
752
+ type="button"
753
+ 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"
754
+ aria-label="Remove"
755
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two"
756
+ >
757
+ <i class="fas fa-times" aria-hidden="true"></i>
758
+ </button>
759
+ </span>
760
+ </div>
761
+ </li>
762
+ <li class="pf-v5-c-chip-group__list-item">
763
+ <div class="pf-v5-c-chip">
764
+ <span class="pf-v5-c-chip__content">
765
+ <span
766
+ class="pf-v5-c-chip__text"
767
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
768
+ >Chip three</span>
769
+ </span>
770
+ <span class="pf-v5-c-chip__actions">
771
+ <button
772
+ class="pf-v5-c-button pf-m-plain"
773
+ type="button"
774
+ 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"
775
+ aria-label="Remove"
776
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three"
777
+ >
778
+ <i class="fas fa-times" aria-hidden="true"></i>
779
+ </button>
780
+ </span>
781
+ </div>
782
+ </li>
783
+ </ul>
784
+ </div>
785
+ </div>
786
+ </div>
787
+ <div class="pf-v5-c-toolbar__item">
788
+ <div class="pf-v5-c-chip-group" role="group">
789
+ <div class="pf-v5-c-chip-group__main">
790
+ <span
791
+ class="pf-v5-c-chip-group__label"
792
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
793
+ >Risk</span>
794
+ <ul
795
+ class="pf-v5-c-chip-group__list"
796
+ role="list"
797
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-risk-chip-group-label"
798
+ >
799
+ <li class="pf-v5-c-chip-group__list-item">
800
+ <div class="pf-v5-c-chip">
801
+ <span class="pf-v5-c-chip__content">
802
+ <span
803
+ class="pf-v5-c-chip__text"
804
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
805
+ >Chip one</span>
806
+ </span>
807
+ <span class="pf-v5-c-chip__actions">
808
+ <button
809
+ class="pf-v5-c-button pf-m-plain"
810
+ type="button"
811
+ 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"
812
+ aria-label="Remove"
813
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one"
814
+ >
815
+ <i class="fas fa-times" aria-hidden="true"></i>
816
+ </button>
817
+ </span>
818
+ </div>
819
+ </li>
820
+ <li class="pf-v5-c-chip-group__list-item">
821
+ <div class="pf-v5-c-chip">
822
+ <span class="pf-v5-c-chip__content">
823
+ <span
824
+ class="pf-v5-c-chip__text"
825
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
826
+ >Chip two</span>
827
+ </span>
828
+ <span class="pf-v5-c-chip__actions">
829
+ <button
830
+ class="pf-v5-c-button pf-m-plain"
831
+ type="button"
832
+ 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"
833
+ aria-label="Remove"
834
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two"
835
+ >
836
+ <i class="fas fa-times" aria-hidden="true"></i>
837
+ </button>
838
+ </span>
839
+ </div>
840
+ </li>
841
+ <li class="pf-v5-c-chip-group__list-item">
842
+ <div class="pf-v5-c-chip">
843
+ <span class="pf-v5-c-chip__content">
844
+ <span
845
+ class="pf-v5-c-chip__text"
846
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
847
+ >Chip three</span>
848
+ </span>
849
+ <span class="pf-v5-c-chip__actions">
850
+ <button
851
+ class="pf-v5-c-button pf-m-plain"
852
+ type="button"
853
+ 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"
854
+ aria-label="Remove"
855
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three"
856
+ >
857
+ <i class="fas fa-times" aria-hidden="true"></i>
858
+ </button>
859
+ </span>
860
+ </div>
861
+ </li>
862
+ </ul>
863
+ </div>
1749
864
  </div>
1750
865
  </div>
1751
866
  </div>
867
+ <div class="pf-v5-c-toolbar__item">
868
+ <button
869
+ class="pf-v5-c-button pf-m-link pf-m-inline"
870
+ type="button"
871
+ >Clear all filters</button>
872
+ </div>
1752
873
  </div>
1753
874
  </div>
1754
875
  </div>
1755
876
  <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>
877
+ <div class="pf-v5-c-toolbar__group">
878
+ <div class="pf-v5-c-toolbar__item">6 filters applied</div>
879
+ <div class="pf-v5-c-toolbar__item">
880
+ <button
881
+ class="pf-v5-c-button pf-m-link pf-m-inline"
882
+ type="button"
883
+ >Clear all filters</button>
884
+ </div>
1762
885
  </div>
1763
886
  </div>
1764
887
  </div>
@@ -1775,67 +898,50 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1775
898
  <div class="pf-v5-c-toolbar__content">
1776
899
  <div class="pf-v5-c-toolbar__content-section">
1777
900
  <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>
901
+ <div
902
+ class="pf-v5-c-menu-toggle pf-m-split-button"
903
+ id="toolbar-selected-filters-toggle-group-expanded-example-check"
904
+ >
905
+ <label
906
+ class="pf-v5-c-check pf-m-standalone"
907
+ id="toolbar-selected-filters-toggle-group-expanded-example-check-check"
908
+ for="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
909
+ >
910
+ <input
911
+ class="pf-v5-c-check__input"
912
+ type="checkbox"
913
+ id="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
914
+ name="toolbar-selected-filters-toggle-group-expanded-example-check-check-input"
915
+ aria-label="Standalone check"
916
+ />
917
+ </label>
918
+ <button
919
+ class="pf-v5-c-menu-toggle__button"
920
+ type="button"
921
+ aria-expanded="false"
922
+ id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-toggle-button"
923
+ aria-label="Menu toggle"
924
+ >
925
+ <span class="pf-v5-c-menu-toggle__controls">
926
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
927
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
928
+ </span>
929
+ </span>
930
+ </button>
1827
931
  </div>
1828
932
  </div>
1829
933
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
1830
- <div class="pf-v5-c-toolbar__toggle pf-m-expanded">
934
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1831
935
  <button
1832
- class="pf-v5-c-button pf-m-plain"
936
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
1833
937
  type="button"
1834
- aria-label="Show filters"
1835
938
  aria-expanded="true"
939
+ aria-label="Show filters"
1836
940
  aria-controls="toolbar-selected-filters-toggle-group-expanded-example-expandable-content"
1837
941
  >
1838
- <i class="fas fa-filter" aria-hidden="true"></i>
942
+ <span class="pf-v5-c-menu-toggle__icon">
943
+ <i class="fas fa-filter" aria-hidden="true"></i>
944
+ </span>
1839
945
  </button>
1840
946
  </div>
1841
947
  </div>
@@ -1896,72 +1002,22 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1896
1002
  role="group"
1897
1003
  >
1898
1004
  <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">
1005
+ <button
1006
+ class="pf-v5-c-menu-toggle"
1007
+ type="button"
1008
+ aria-expanded="false"
1009
+ id="toolbar-selected-filters-toggle-group-expanded-example-search-filter-menu"
1010
+ >
1011
+ <span class="pf-v5-c-menu-toggle__icon">
1012
+ <i class="fas fa-filter" aria-hidden="true"></i>
1013
+ </span>
1014
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
1015
+ <span class="pf-v5-c-menu-toggle__controls">
1016
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1920
1017
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1921
1018
  </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>
1019
+ </span>
1020
+ </button>
1965
1021
  </div>
1966
1022
  <div class="pf-v5-c-input-group__item pf-m-fill">
1967
1023
  <div class="pf-v5-c-text-input-group">
@@ -1985,224 +1041,40 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1985
1041
  </div>
1986
1042
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
1987
1043
  <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">
1044
+ <button
1045
+ class="pf-v5-c-menu-toggle"
1046
+ type="button"
1047
+ aria-expanded="false"
1048
+ id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-status"
1049
+ >
1050
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
1051
+ <span class="pf-v5-c-menu-toggle__controls">
1052
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2006
1053
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2007
1054
  </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>
1055
+ </span>
1056
+ </button>
2093
1057
  </div>
2094
1058
  <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">
1059
+ <button
1060
+ class="pf-v5-c-menu-toggle"
1061
+ type="button"
1062
+ aria-expanded="false"
1063
+ id="toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-risk"
1064
+ >
1065
+ <span class="pf-v5-c-menu-toggle__text">Risk</span>
1066
+ <span class="pf-v5-c-menu-toggle__controls">
1067
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2113
1068
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2114
1069
  </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>
1070
+ </span>
1071
+ </button>
2200
1072
  </div>
2201
1073
  </div>
2202
1074
  <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">
1075
+ <div class="pf-v5-c-toolbar__group pf-m-grow">
1076
+ <div class="pf-v5-c-toolbar__item">
1077
+ <div class="pf-v5-c-chip-group" role="group">
2206
1078
  <div class="pf-v5-c-chip-group__main">
2207
1079
  <span
2208
1080
  class="pf-v5-c-chip-group__label"
@@ -2280,8 +1152,8 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2280
1152
  </div>
2281
1153
  </div>
2282
1154
  </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">
1155
+ <div class="pf-v5-c-toolbar__item">
1156
+ <div class="pf-v5-c-chip-group" role="group">
2285
1157
  <div class="pf-v5-c-chip-group__main">
2286
1158
  <span
2287
1159
  class="pf-v5-c-chip-group__label"
@@ -2380,283 +1252,82 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2380
1252
  <div class="pf-v5-c-toolbar__content">
2381
1253
  <div class="pf-v5-c-toolbar__content-section">
2382
1254
  <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>
1255
+ <div
1256
+ class="pf-v5-c-menu-toggle pf-m-split-button"
1257
+ id="toolbar-selected-filters-example-check"
1258
+ >
1259
+ <label
1260
+ class="pf-v5-c-check pf-m-standalone"
1261
+ id="toolbar-selected-filters-example-check-check"
1262
+ for="toolbar-selected-filters-example-check-check-input"
1263
+ >
1264
+ <input
1265
+ class="pf-v5-c-check__input"
1266
+ type="checkbox"
1267
+ id="toolbar-selected-filters-example-check-check-input"
1268
+ name="toolbar-selected-filters-example-check-check-input"
1269
+ aria-label="Standalone check"
1270
+ />
1271
+ </label>
1272
+ <button
1273
+ class="pf-v5-c-menu-toggle__button"
1274
+ type="button"
1275
+ aria-expanded="false"
1276
+ id="toolbar-selected-filters-example-menu-toggle-toggle-button"
1277
+ aria-label="Menu toggle"
1278
+ >
1279
+ <span class="pf-v5-c-menu-toggle__controls">
1280
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1281
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1282
+ </span>
1283
+ </span>
1284
+ </button>
2432
1285
  </div>
2433
1286
  </div>
2434
1287
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
2435
- <div class="pf-v5-c-toolbar__toggle">
1288
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
2436
1289
  <button
2437
- class="pf-v5-c-button pf-m-plain"
1290
+ class="pf-v5-c-menu-toggle pf-m-plain"
2438
1291
  type="button"
2439
- aria-label="Show filters"
2440
1292
  aria-expanded="false"
1293
+ aria-label="Show filters"
2441
1294
  aria-controls="toolbar-selected-filters-example-expandable-content"
2442
1295
  >
2443
- <i class="fas fa-filter" aria-hidden="true"></i>
1296
+ <span class="pf-v5-c-menu-toggle__icon">
1297
+ <i class="fas fa-filter" aria-hidden="true"></i>
1298
+ </span>
2444
1299
  </button>
2445
1300
  </div>
2446
1301
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
2447
1302
  <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">
1303
+ <button
1304
+ class="pf-v5-c-menu-toggle"
1305
+ type="button"
1306
+ aria-expanded="false"
1307
+ id="toolbar-selected-filters-example-menu-toggle-checkbox-status"
1308
+ >
1309
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
1310
+ <span class="pf-v5-c-menu-toggle__controls">
1311
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2466
1312
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2467
1313
  </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>
1314
+ </span>
1315
+ </button>
2553
1316
  </div>
2554
1317
  <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">
1318
+ <button
1319
+ class="pf-v5-c-menu-toggle"
1320
+ type="button"
1321
+ aria-expanded="false"
1322
+ id="toolbar-selected-filters-example-menu-toggle-checkbox-risk"
1323
+ >
1324
+ <span class="pf-v5-c-menu-toggle__text">Risk</span>
1325
+ <span class="pf-v5-c-menu-toggle__controls">
1326
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2573
1327
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2574
1328
  </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>
1329
+ </span>
1330
+ </button>
2660
1331
  </div>
2661
1332
  </div>
2662
1333
  </div>
@@ -2752,521 +1423,265 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2752
1423
  </div>
2753
1424
  <div class="pf-v5-c-toolbar__content pf-m-chip-container">
2754
1425
  <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>
1426
+ <div class="pf-v5-c-toolbar__group">
1427
+ <div class="pf-v5-c-toolbar__item">
1428
+ <div class="pf-v5-c-chip-group" role="group">
1429
+ <div class="pf-v5-c-chip-group__main">
1430
+ <span
1431
+ class="pf-v5-c-chip-group__label"
1432
+ id="toolbar-selected-filters-example-chip-group-status-chip-group-label"
1433
+ >Status</span>
1434
+ <ul
1435
+ class="pf-v5-c-chip-group__list"
1436
+ role="list"
1437
+ aria-labelledby="toolbar-selected-filters-example-chip-group-status-chip-group-label"
1438
+ >
1439
+ <li class="pf-v5-c-chip-group__list-item">
1440
+ <div class="pf-v5-c-chip">
1441
+ <span class="pf-v5-c-chip__content">
1442
+ <span
1443
+ class="pf-v5-c-chip__text"
1444
+ id="toolbar-selected-filters-example-chip-group-statuschip-one"
1445
+ >Chip one</span>
1446
+ </span>
1447
+ <span class="pf-v5-c-chip__actions">
1448
+ <button
1449
+ class="pf-v5-c-button pf-m-plain"
1450
+ type="button"
1451
+ aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-one toolbar-selected-filters-example-chip-group-statuschip-one"
1452
+ aria-label="Remove"
1453
+ id="toolbar-selected-filters-example-chip-group-statusremove-chip-one"
1454
+ >
1455
+ <i class="fas fa-times" aria-hidden="true"></i>
1456
+ </button>
1457
+ </span>
1458
+ </div>
1459
+ </li>
1460
+ <li class="pf-v5-c-chip-group__list-item">
1461
+ <div class="pf-v5-c-chip">
1462
+ <span class="pf-v5-c-chip__content">
1463
+ <span
1464
+ class="pf-v5-c-chip__text"
1465
+ id="toolbar-selected-filters-example-chip-group-statuschip-two"
1466
+ >Chip two</span>
1467
+ </span>
1468
+ <span class="pf-v5-c-chip__actions">
1469
+ <button
1470
+ class="pf-v5-c-button pf-m-plain"
1471
+ type="button"
1472
+ aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-two toolbar-selected-filters-example-chip-group-statuschip-two"
1473
+ aria-label="Remove"
1474
+ id="toolbar-selected-filters-example-chip-group-statusremove-chip-two"
1475
+ >
1476
+ <i class="fas fa-times" aria-hidden="true"></i>
1477
+ </button>
1478
+ </span>
1479
+ </div>
1480
+ </li>
1481
+ <li class="pf-v5-c-chip-group__list-item">
1482
+ <div class="pf-v5-c-chip">
1483
+ <span class="pf-v5-c-chip__content">
1484
+ <span
1485
+ class="pf-v5-c-chip__text"
1486
+ id="toolbar-selected-filters-example-chip-group-statuschip-three"
1487
+ >Chip three</span>
1488
+ </span>
1489
+ <span class="pf-v5-c-chip__actions">
1490
+ <button
1491
+ class="pf-v5-c-button pf-m-plain"
1492
+ type="button"
1493
+ aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-three toolbar-selected-filters-example-chip-group-statuschip-three"
1494
+ aria-label="Remove"
1495
+ id="toolbar-selected-filters-example-chip-group-statusremove-chip-three"
1496
+ >
1497
+ <i class="fas fa-times" aria-hidden="true"></i>
1498
+ </button>
1499
+ </span>
1500
+ </div>
1501
+ </li>
1502
+ </ul>
1503
+ </div>
2910
1504
  </div>
2911
1505
  </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"
2950
- >Resource</div>
2951
- <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>
2966
- </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>
1506
+ <div class="pf-v5-c-toolbar__item">
1507
+ <div class="pf-v5-c-chip-group" role="group">
1508
+ <div class="pf-v5-c-chip-group__main">
1509
+ <span
1510
+ class="pf-v5-c-chip-group__label"
1511
+ id="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
1512
+ >Risk</span>
1513
+ <ul
1514
+ class="pf-v5-c-chip-group__list"
1515
+ role="list"
1516
+ aria-labelledby="toolbar-selected-filters-example-chip-group-risk-chip-group-label"
1517
+ >
1518
+ <li class="pf-v5-c-chip-group__list-item">
1519
+ <div class="pf-v5-c-chip">
1520
+ <span class="pf-v5-c-chip__content">
1521
+ <span
1522
+ class="pf-v5-c-chip__text"
1523
+ id="toolbar-selected-filters-example-chip-group-riskchip-one"
1524
+ >Chip one</span>
1525
+ </span>
1526
+ <span class="pf-v5-c-chip__actions">
1527
+ <button
1528
+ class="pf-v5-c-button pf-m-plain"
1529
+ type="button"
1530
+ aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-one toolbar-selected-filters-example-chip-group-riskchip-one"
1531
+ aria-label="Remove"
1532
+ id="toolbar-selected-filters-example-chip-group-riskremove-chip-one"
1533
+ >
1534
+ <i class="fas fa-times" aria-hidden="true"></i>
1535
+ </button>
1536
+ </span>
1537
+ </div>
1538
+ </li>
1539
+ <li class="pf-v5-c-chip-group__list-item">
1540
+ <div class="pf-v5-c-chip">
1541
+ <span class="pf-v5-c-chip__content">
1542
+ <span
1543
+ class="pf-v5-c-chip__text"
1544
+ id="toolbar-selected-filters-example-chip-group-riskchip-two"
1545
+ >Chip two</span>
1546
+ </span>
1547
+ <span class="pf-v5-c-chip__actions">
1548
+ <button
1549
+ class="pf-v5-c-button pf-m-plain"
1550
+ type="button"
1551
+ aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-two toolbar-selected-filters-example-chip-group-riskchip-two"
1552
+ aria-label="Remove"
1553
+ id="toolbar-selected-filters-example-chip-group-riskremove-chip-two"
1554
+ >
1555
+ <i class="fas fa-times" aria-hidden="true"></i>
1556
+ </button>
1557
+ </span>
1558
+ </div>
1559
+ </li>
1560
+ <li class="pf-v5-c-chip-group__list-item">
1561
+ <div class="pf-v5-c-chip">
1562
+ <span class="pf-v5-c-chip__content">
1563
+ <span
1564
+ class="pf-v5-c-chip__text"
1565
+ id="toolbar-selected-filters-example-chip-group-riskchip-three"
1566
+ >Chip three</span>
1567
+ </span>
1568
+ <span class="pf-v5-c-chip__actions">
1569
+ <button
1570
+ class="pf-v5-c-button pf-m-plain"
1571
+ type="button"
1572
+ aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-three toolbar-selected-filters-example-chip-group-riskchip-three"
1573
+ aria-label="Remove"
1574
+ id="toolbar-selected-filters-example-chip-group-riskremove-chip-three"
1575
+ >
1576
+ <i class="fas fa-times" aria-hidden="true"></i>
1577
+ </button>
1578
+ </span>
1579
+ </div>
1580
+ </li>
1581
+ </ul>
3051
1582
  </div>
3052
1583
  </div>
3053
1584
  </div>
1585
+ </div>
1586
+ <div class="pf-v5-c-toolbar__item">
1587
+ <button
1588
+ class="pf-v5-c-button pf-m-link pf-m-inline"
1589
+ type="button"
1590
+ >Clear all filters</button>
1591
+ </div>
1592
+ </div>
1593
+ </div>
1594
+ </div>
1595
+
1596
+ ```
1597
+
1598
+ ### Stacked
1599
+
1600
+ ### Stacked on desktop
1601
+
1602
+ ```html
1603
+ <div class="pf-v5-c-toolbar" id="toolbar-stacked-example">
1604
+ <div class="pf-v5-c-toolbar__content">
1605
+ <div class="pf-v5-c-toolbar__content-section">
1606
+ <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-2xl">
1607
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1608
+ <button
1609
+ class="pf-v5-c-menu-toggle pf-m-plain"
1610
+ type="button"
1611
+ aria-expanded="false"
1612
+ aria-label="Show filters"
1613
+ aria-controls="toolbar-stacked-example-expandable-content"
1614
+ >
1615
+ <span class="pf-v5-c-menu-toggle__icon">
1616
+ <i class="fas fa-filter" aria-hidden="true"></i>
1617
+ </span>
1618
+ </button>
1619
+ </div>
1620
+ <div class="pf-v5-c-toolbar__group">
1621
+ <div
1622
+ class="pf-v5-c-toolbar__item pf-m-label"
1623
+ id="toolbar-stacked-example-menu-toggle-resource-label"
1624
+ aria-hidden="true"
1625
+ >Resource</div>
1626
+
1627
+ <div class="pf-v5-c-toolbar__item">
1628
+ <button
1629
+ class="pf-v5-c-menu-toggle"
1630
+ type="button"
1631
+ aria-expanded="false"
1632
+ id="toolbar-stacked-example-menu-toggle-resource"
1633
+ >
1634
+ <span class="pf-v5-c-menu-toggle__text">Pod</span>
1635
+ <span class="pf-v5-c-menu-toggle__controls">
1636
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1637
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1638
+ </span>
1639
+ </span>
1640
+ </button>
1641
+ </div>
1642
+ </div>
3054
1643
  <div class="pf-v5-c-toolbar__group">
3055
1644
  <div
3056
1645
  class="pf-v5-c-toolbar__item pf-m-label"
3057
- id="-select-checkbox-status-label"
1646
+ id="toolbar-stacked-example-menu-toggle-status-label"
3058
1647
  aria-hidden="true"
3059
1648
  >Status</div>
3060
1649
  <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">
1650
+ <button
1651
+ class="pf-v5-c-menu-toggle"
1652
+ type="button"
1653
+ aria-expanded="false"
1654
+ id="toolbar-stacked-example-menu-toggle-status"
1655
+ >
1656
+ <span class="pf-v5-c-menu-toggle__text">Running</span>
1657
+ <span class="pf-v5-c-menu-toggle__controls">
1658
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3074
1659
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3075
1660
  </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>
1661
+ </span>
1662
+ </button>
3161
1663
  </div>
3162
1664
  </div>
3163
1665
  <div class="pf-v5-c-toolbar__group">
3164
1666
  <div
3165
1667
  class="pf-v5-c-toolbar__item pf-m-label"
3166
- id="-select-checkbox-type-label"
1668
+ id="toolbar-stacked-example-menu-toggle-type-label"
3167
1669
  aria-hidden="true"
3168
1670
  >Type</div>
3169
1671
  <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">
1672
+ <button
1673
+ class="pf-v5-c-menu-toggle"
1674
+ type="button"
1675
+ aria-expanded="false"
1676
+ id="toolbar-stacked-example-menu-toggle-type"
1677
+ >
1678
+ <span class="pf-v5-c-menu-toggle__text">Any</span>
1679
+ <span class="pf-v5-c-menu-toggle__controls">
1680
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3183
1681
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3184
1682
  </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>
1683
+ </span>
1684
+ </button>
3270
1685
  </div>
3271
1686
  </div>
3272
1687
  </div>
@@ -3370,130 +1785,112 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3370
1785
  <div class="pf-v5-c-toolbar__content">
3371
1786
  <div class="pf-v5-c-toolbar__content-section">
3372
1787
  <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>
1788
+ <div
1789
+ class="pf-v5-c-menu-toggle pf-m-split-button"
1790
+ id="toolbar-stacked-example-check"
1791
+ >
1792
+ <label
1793
+ class="pf-v5-c-check pf-m-standalone"
1794
+ id="toolbar-stacked-example-check-check"
1795
+ for="toolbar-stacked-example-check-check-input"
1796
+ >
1797
+ <input
1798
+ class="pf-v5-c-check__input"
1799
+ type="checkbox"
1800
+ id="toolbar-stacked-example-check-check-input"
1801
+ name="toolbar-stacked-example-check-check-input"
1802
+ aria-label="Standalone check"
1803
+ />
1804
+ </label>
1805
+ <button
1806
+ class="pf-v5-c-menu-toggle__button"
1807
+ type="button"
1808
+ aria-expanded="false"
1809
+ id="toolbar-stacked-example-menu-toggle-toggle-button"
1810
+ aria-label="Menu toggle"
1811
+ >
1812
+ <span class="pf-v5-c-menu-toggle__controls">
1813
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1814
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1815
+ </span>
1816
+ </span>
1817
+ </button>
3422
1818
  </div>
3423
1819
  </div>
3424
1820
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
3425
1821
  <div class="pf-v5-c-pagination" aria-label="Element pagination">
3426
1822
  <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">
1823
+ <div class="pf-v5-c-pagination__page-menu">
1824
+ <div class="pf-v5-c-options-menu">
3480
1825
  <button
3481
- class="pf-v5-c-button pf-m-plain pf-m-disabled"
1826
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3482
1827
  type="button"
3483
- aria-label="Go to first page"
3484
- aria-disabled="true"
1828
+ id="toolbar-stacked-example-pagination-options-menu-toggle"
1829
+ aria-haspopup="listbox"
1830
+ aria-expanded="false"
3485
1831
  >
3486
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1832
+ <span class="pf-v5-c-options-menu__toggle-text">
1833
+ <b>1 - 10</b>&nbsp;of&nbsp;
1834
+ <b>36</b>
1835
+ </span>
1836
+ <div class="pf-v5-c-options-menu__toggle-icon">
1837
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1838
+ </div>
3487
1839
  </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"
1840
+ <ul
1841
+ class="pf-v5-c-options-menu__menu"
1842
+ role="menu"
1843
+ aria-labelledby="toolbar-stacked-example-pagination-options-menu-toggle"
1844
+ hidden
3495
1845
  >
3496
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1846
+ <li role="none">
1847
+ <button
1848
+ class="pf-v5-c-options-menu__menu-item"
1849
+ type="button"
1850
+ role="menuitem"
1851
+ >5 per page</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
+ >
1859
+ 10 per page
1860
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1861
+ <i class="fas fa-check" aria-hidden="true"></i>
1862
+ </div>
1863
+ </button>
1864
+ </li>
1865
+ <li role="none">
1866
+ <button
1867
+ class="pf-v5-c-options-menu__menu-item"
1868
+ type="button"
1869
+ role="menuitem"
1870
+ >20 per page</button>
1871
+ </li>
1872
+ </ul>
1873
+ </div>
1874
+ </div>
1875
+ <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
1876
+ <div class="pf-v5-c-pagination__nav-control pf-m-first">
1877
+ <button
1878
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
1879
+ type="button"
1880
+ aria-label="Go to first page"
1881
+ aria-disabled="true"
1882
+ >
1883
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1884
+ </button>
1885
+ </div>
1886
+ <div class="pf-v5-c-pagination__nav-control pf-m-prev">
1887
+ <button
1888
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
1889
+ type="button"
1890
+ aria-label="Go to previous page"
1891
+ aria-disabled="true"
1892
+ >
1893
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3497
1894
  </button>
3498
1895
  </div>
3499
1896
 
@@ -3546,15 +1943,17 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3546
1943
  <div class="pf-v5-c-toolbar__content">
3547
1944
  <div class="pf-v5-c-toolbar__content-section">
3548
1945
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
3549
- <div class="pf-v5-c-toolbar__toggle pf-m-expanded">
1946
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
3550
1947
  <button
3551
- class="pf-v5-c-button pf-m-plain"
1948
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
3552
1949
  type="button"
3553
- aria-label="Show filters"
3554
1950
  aria-expanded="true"
1951
+ aria-label="Show filters"
3555
1952
  aria-controls="toolbar-stacked-collapsed-example-expandable-content"
3556
1953
  >
3557
- <i class="fas fa-filter" aria-hidden="true"></i>
1954
+ <span class="pf-v5-c-menu-toggle__icon">
1955
+ <i class="fas fa-filter" aria-hidden="true"></i>
1956
+ </span>
3558
1957
  </button>
3559
1958
  </div>
3560
1959
  </div>
@@ -3611,325 +2010,68 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3611
2010
  <div class="pf-v5-c-toolbar__group">
3612
2011
  <div
3613
2012
  class="pf-v5-c-toolbar__item pf-m-label"
3614
- id="toolbar-stacked-collapsed-example-select-checkbox-resource-expanded-label"
2013
+ id="toolbar-stacked-collapsed-example-menu-toggle-resource-label"
2014
+ aria-hidden="true"
3615
2015
  >Resource</div>
2016
+
3616
2017
  <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">
2018
+ <button
2019
+ class="pf-v5-c-menu-toggle"
2020
+ type="button"
2021
+ aria-expanded="false"
2022
+ id="toolbar-stacked-collapsed-example-menu-toggle-resource"
2023
+ >
2024
+ <span class="pf-v5-c-menu-toggle__text">Pod</span>
2025
+ <span class="pf-v5-c-menu-toggle__controls">
2026
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3630
2027
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3631
2028
  </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>
2029
+ </span>
2030
+ </button>
3717
2031
  </div>
3718
2032
  </div>
3719
2033
  <div class="pf-v5-c-toolbar__group">
3720
2034
  <div
3721
2035
  class="pf-v5-c-toolbar__item pf-m-label"
3722
- id="toolbar-stacked-collapsed-example-select-checkbox-status-expanded-label"
2036
+ id="-menu-toggle-status-label"
2037
+ aria-hidden="true"
3723
2038
  >Status</div>
3724
2039
  <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">
2040
+ <button
2041
+ class="pf-v5-c-menu-toggle"
2042
+ type="button"
2043
+ aria-expanded="false"
2044
+ id="-menu-toggle-status"
2045
+ >
2046
+ <span class="pf-v5-c-menu-toggle__text">Running</span>
2047
+ <span class="pf-v5-c-menu-toggle__controls">
2048
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3738
2049
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3739
2050
  </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>
2051
+ </span>
2052
+ </button>
3825
2053
  </div>
3826
2054
  </div>
3827
2055
  <div class="pf-v5-c-toolbar__group">
3828
2056
  <div
3829
2057
  class="pf-v5-c-toolbar__item pf-m-label"
3830
- id="toolbar-stacked-collapsed-example-select-checkbox-type-expanded-label"
2058
+ id="-menu-toggle-type-label"
2059
+ aria-hidden="true"
3831
2060
  >Type</div>
3832
2061
  <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">
2062
+ <button
2063
+ class="pf-v5-c-menu-toggle"
2064
+ type="button"
2065
+ aria-expanded="false"
2066
+ id="-menu-toggle-type"
2067
+ >
2068
+ <span class="pf-v5-c-menu-toggle__text">Any</span>
2069
+ <span class="pf-v5-c-menu-toggle__controls">
2070
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3846
2071
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3847
2072
  </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>
2073
+ </span>
2074
+ </button>
3933
2075
  </div>
3934
2076
  </div>
3935
2077
  </div>
@@ -3939,111 +2081,93 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3939
2081
  <div class="pf-v5-c-toolbar__content">
3940
2082
  <div class="pf-v5-c-toolbar__content-section">
3941
2083
  <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>
2084
+ <div
2085
+ class="pf-v5-c-menu-toggle pf-m-split-button"
2086
+ id="toolbar-stacked-collapsed-example-check"
2087
+ >
2088
+ <label
2089
+ class="pf-v5-c-check pf-m-standalone"
2090
+ id="toolbar-stacked-collapsed-example-check-check"
2091
+ for="toolbar-stacked-collapsed-example-check-check-input"
2092
+ >
2093
+ <input
2094
+ class="pf-v5-c-check__input"
2095
+ type="checkbox"
2096
+ id="toolbar-stacked-collapsed-example-check-check-input"
2097
+ name="toolbar-stacked-collapsed-example-check-check-input"
2098
+ aria-label="Standalone check"
2099
+ />
2100
+ </label>
2101
+ <button
2102
+ class="pf-v5-c-menu-toggle__button"
2103
+ type="button"
2104
+ aria-expanded="false"
2105
+ id="toolbar-stacked-collapsed-example-menu-toggle-toggle-button"
2106
+ aria-label="Menu toggle"
2107
+ >
2108
+ <span class="pf-v5-c-menu-toggle__controls">
2109
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2110
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2111
+ </span>
2112
+ </span>
2113
+ </button>
3991
2114
  </div>
3992
2115
  </div>
3993
2116
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
3994
2117
  <div class="pf-v5-c-pagination" aria-label="Element pagination">
3995
2118
  <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>
2119
+ <div class="pf-v5-c-pagination__page-menu">
2120
+ <div class="pf-v5-c-options-menu">
2121
+ <button
2122
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2123
+ type="button"
2124
+ id="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
2125
+ aria-haspopup="listbox"
2126
+ aria-expanded="false"
2127
+ >
2128
+ <span class="pf-v5-c-options-menu__toggle-text">
2129
+ <b>1 - 10</b>&nbsp;of&nbsp;
2130
+ <b>36</b>
2131
+ </span>
2132
+ <div class="pf-v5-c-options-menu__toggle-icon">
2133
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2134
+ </div>
2135
+ </button>
2136
+ <ul
2137
+ class="pf-v5-c-options-menu__menu"
2138
+ role="menu"
2139
+ aria-labelledby="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
2140
+ hidden
2141
+ >
2142
+ <li role="none">
2143
+ <button
2144
+ class="pf-v5-c-options-menu__menu-item"
2145
+ type="button"
2146
+ role="menuitem"
2147
+ >5 per page</button>
2148
+ </li>
2149
+ <li role="none">
2150
+ <button
2151
+ class="pf-v5-c-options-menu__menu-item"
2152
+ type="button"
2153
+ role="menuitem"
2154
+ >
2155
+ 10 per page
2156
+ <div class="pf-v5-c-options-menu__menu-item-icon">
2157
+ <i class="fas fa-check" aria-hidden="true"></i>
2158
+ </div>
2159
+ </button>
2160
+ </li>
2161
+ <li role="none">
2162
+ <button
2163
+ class="pf-v5-c-options-menu__menu-item"
2164
+ type="button"
2165
+ role="menuitem"
2166
+ >20 per page</button>
2167
+ </li>
2168
+ </ul>
2169
+ </div>
4045
2170
  </div>
4046
-
4047
2171
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
4048
2172
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
4049
2173
  <button
@@ -4108,471 +2232,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
4108
2232
 
4109
2233
  ```
4110
2234
 
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
2235
  ## Documentation
4577
2236
 
4578
2237
  ### Overview
@@ -4593,37 +2252,23 @@ As the toolbar component is a hybrid layout and component, some of its elements
4593
2252
  | `.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
2253
  | `.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
2254
  | `.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
2255
  | `.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
2256
  | `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Initiates icon button group spacing. |
4605
2257
  | `.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. |
2258
+ | `.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
2259
  | `.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
2260
  | `.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. |
2261
+ | `.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. |
2262
+ | `.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. |
2263
+ | `.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. |
2264
+ | `.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
2265
 
4620
2266
  ### Accessibility
4621
2267
 
4622
2268
  | Attribute | Applied to | Outcome |
4623
2269
  | -- | -- | -- |
4624
2270
  | `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** |
2271
+ | `aria-expanded="[true/false]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | Indicates the the expandable content is hidden/visible. **Required** |
4627
2272
  | `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
2273
  | `id="[expandable-content_id]"` | `.pf-v5-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
4629
2274
  | `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 +2279,10 @@ As the toolbar component is a hybrid layout and component, some of its elements
4634
2279
  | Class | Applied to | Outcome |
4635
2280
  | -- | -- | -- |
4636
2281
  | `.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. |
2282
+ | `.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
2283
 
4639
2284
  ### Spacer system
4640
2285
 
4641
2286
  | Class | Applied to | Outcome |
4642
2287
  | -- | -- | -- |
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). |
2288
+ | `.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). |