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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (342) hide show
  1. package/README.md +4 -4
  2. package/RELEASE-NOTES.md +18 -1
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/pfbg-icon.svg +1 -0
  5. package/assets/pficon/pficon.scss +7 -2
  6. package/assets/pficon/pficon.woff2 +0 -0
  7. package/base/_base.scss +0 -18
  8. package/base/_chart-globals.scss +0 -4
  9. package/base/_common.scss +0 -22
  10. package/base/_fa-icons.scss +1 -2
  11. package/base/_fonts.scss +22 -27
  12. package/base/_globals.scss +92 -86
  13. package/base/_icons.scss +1 -28
  14. package/base/_svg-icons.scss +6 -0
  15. package/base/_variables.scss +4 -4
  16. package/base/patternfly-common.css +0 -10
  17. package/base/patternfly-fa-icons.css +1 -1
  18. package/base/patternfly-fonts.css +17 -17
  19. package/base/patternfly-globals.css +35 -41
  20. package/base/patternfly-icons.css +8 -22
  21. package/base/patternfly-pf-icons.css +6 -2
  22. package/base/patternfly-themes.css +0 -42
  23. package/base/patternfly-variables.css +3 -3
  24. package/base/themes/dark/_globals.scss +1 -1
  25. package/base/themes/dark/_variables.scss +1 -1
  26. package/components/AboutModalBox/about-modal-box.css +20 -50
  27. package/components/AboutModalBox/about-modal-box.scss +22 -14
  28. package/components/Accordion/accordion.css +2 -0
  29. package/components/Accordion/accordion.scss +2 -0
  30. package/components/Alert/alert.css +17 -8
  31. package/components/Alert/alert.scss +21 -7
  32. package/components/Alert/themes/dark/alert.scss +1 -1
  33. package/components/AppLauncher/app-launcher.css +2 -0
  34. package/components/AppLauncher/app-launcher.scss +2 -0
  35. package/components/Avatar/avatar.scss +2 -2
  36. package/components/BackgroundImage/background-image.css +8 -35
  37. package/components/BackgroundImage/background-image.scss +17 -43
  38. package/components/Banner/banner.css +14 -52
  39. package/components/Banner/banner.scss +9 -13
  40. package/components/Breadcrumb/breadcrumb.css +2 -0
  41. package/components/Breadcrumb/breadcrumb.scss +2 -0
  42. package/components/CalendarMonth/calendar-month.css +2 -2
  43. package/components/CalendarMonth/calendar-month.scss +3 -3
  44. package/components/Card/card.css +115 -50
  45. package/components/Card/card.scss +164 -63
  46. package/components/Chip/chip.css +33 -24
  47. package/components/Chip/chip.scss +40 -31
  48. package/components/ChipGroup/chip-group.css +27 -17
  49. package/components/ChipGroup/chip-group.scss +36 -22
  50. package/components/Content/content.css +11 -5
  51. package/components/Content/content.scss +17 -9
  52. package/components/ContextSelector/context-selector.css +13 -6
  53. package/components/ContextSelector/context-selector.scss +14 -7
  54. package/components/DataList/data-list-grid.css +7 -7
  55. package/components/DataList/data-list-grid.scss +1 -1
  56. package/components/DataList/data-list.css +46 -40
  57. package/components/DataList/data-list.scss +37 -28
  58. package/components/DatePicker/date-picker.css +0 -8
  59. package/components/DatePicker/date-picker.scss +0 -9
  60. package/components/DescriptionList/description-list.css +7 -7
  61. package/components/DescriptionList/description-list.scss +7 -7
  62. package/components/Divider/divider.css +2 -2
  63. package/components/Divider/divider.scss +3 -3
  64. package/components/Drawer/drawer.css +15 -16
  65. package/components/Drawer/drawer.scss +2 -3
  66. package/components/Dropdown/dropdown.css +26 -25
  67. package/components/Dropdown/dropdown.scss +17 -18
  68. package/components/DualListSelector/dual-list-selector.css +1 -1
  69. package/components/DualListSelector/dual-list-selector.scss +1 -1
  70. package/components/EmptyState/empty-state.css +46 -52
  71. package/components/EmptyState/empty-state.scss +58 -57
  72. package/components/ExpandableSection/expandable-section.css +2 -0
  73. package/components/ExpandableSection/expandable-section.scss +2 -0
  74. package/components/Form/form.css +14 -12
  75. package/components/Form/form.scss +9 -7
  76. package/components/FormControl/form-control.css +2 -5
  77. package/components/FormControl/themes/dark/form-control.scss +2 -6
  78. package/components/HelperText/helper-text.css +4 -0
  79. package/components/HelperText/helper-text.scss +5 -0
  80. package/components/Hint/hint.css +2 -2
  81. package/components/Hint/hint.scss +2 -2
  82. package/components/Icon/icon.css +3 -3
  83. package/components/Icon/icon.scss +3 -3
  84. package/components/InputGroup/input-group.css +61 -85
  85. package/components/InputGroup/input-group.scss +55 -61
  86. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  87. package/components/Label/label.css +49 -36
  88. package/components/Label/label.scss +53 -38
  89. package/components/Label/themes/dark/label.scss +2 -2
  90. package/components/LabelGroup/label-group.css +26 -22
  91. package/components/LabelGroup/label-group.scss +31 -26
  92. package/components/LogViewer/log-viewer.css +0 -38
  93. package/components/Login/login.css +20 -60
  94. package/components/Login/login.scss +16 -18
  95. package/components/Login/themes/dark/login.scss +4 -0
  96. package/components/Masthead/masthead.css +4 -42
  97. package/components/Masthead/masthead.scss +4 -4
  98. package/components/Menu/menu.css +9 -6
  99. package/components/Menu/menu.scss +34 -31
  100. package/components/MenuToggle/menu-toggle.css +3 -1
  101. package/components/MenuToggle/menu-toggle.scss +3 -1
  102. package/components/ModalBox/modal-box.css +12 -11
  103. package/components/ModalBox/modal-box.scss +14 -14
  104. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  105. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  106. package/components/Nav/nav.css +1 -1
  107. package/components/Nav/nav.scss +2 -2
  108. package/components/NotificationDrawer/notification-drawer.css +8 -8
  109. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  110. package/components/OptionsMenu/options-menu.css +8 -10
  111. package/components/OptionsMenu/options-menu.scss +9 -11
  112. package/components/Page/page.css +101 -122
  113. package/components/Page/page.scss +49 -21
  114. package/components/Pagination/pagination.css +2 -110
  115. package/components/Pagination/pagination.scss +0 -6
  116. package/components/Popover/popover.css +31 -37
  117. package/components/Popover/popover.scss +32 -37
  118. package/components/Popover/themes/dark/popover.scss +3 -9
  119. package/components/Progress/progress.css +13 -10
  120. package/components/Progress/progress.scss +13 -10
  121. package/components/ProgressStepper/progress-stepper.css +5 -5
  122. package/components/ProgressStepper/progress-stepper.scss +5 -5
  123. package/components/SearchInput/search-input.css +4 -2
  124. package/components/SearchInput/search-input.scss +4 -2
  125. package/components/Select/select.css +1 -1
  126. package/components/Select/select.scss +1 -1
  127. package/components/Sidebar/sidebar.css +69 -26
  128. package/components/Sidebar/sidebar.scss +84 -27
  129. package/components/SimpleList/simple-list.css +1 -1
  130. package/components/SimpleList/simple-list.scss +2 -2
  131. package/components/Spinner/spinner.css +4 -133
  132. package/components/Spinner/spinner.scss +4 -173
  133. package/components/Table/table-grid.css +28 -28
  134. package/components/Table/table-scrollable.css +31 -26
  135. package/components/Table/table-scrollable.scss +33 -28
  136. package/components/Table/table-tree-view.css +14 -4
  137. package/components/Table/table-tree-view.scss +15 -0
  138. package/components/Table/table.css +67 -65
  139. package/components/Table/table.scss +65 -62
  140. package/components/Tabs/tabs.css +0 -4
  141. package/components/Tabs/tabs.scss +0 -7
  142. package/components/TextInputGroup/text-input-group.css +6 -4
  143. package/components/TextInputGroup/text-input-group.scss +6 -5
  144. package/components/Tile/tile.css +1 -1
  145. package/components/Tile/tile.scss +1 -1
  146. package/components/Timestamp/timestamp.css +3 -3
  147. package/components/Timestamp/timestamp.scss +3 -3
  148. package/components/Toolbar/toolbar.css +78 -43
  149. package/components/Toolbar/toolbar.scss +50 -10
  150. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  151. package/components/Tooltip/tooltip.css +7 -12
  152. package/components/Tooltip/tooltip.scss +6 -3
  153. package/components/TreeView/tree-view.css +7 -15
  154. package/components/TreeView/tree-view.scss +7 -18
  155. package/components/Wizard/wizard.css +16 -39
  156. package/components/Wizard/wizard.scss +20 -2
  157. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  158. package/docs/components/Accordion/examples/Accordion.md +12 -12
  159. package/docs/components/ActionList/examples/ActionList.md +6 -6
  160. package/docs/components/Alert/examples/Alert.md +29 -29
  161. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  162. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  163. package/docs/components/Avatar/examples/Avatar.md +11 -11
  164. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  165. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  166. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  167. package/docs/components/Badge/examples/Badge.md +5 -5
  168. package/docs/components/Banner/examples/Banner.md +8 -8
  169. package/docs/components/Brand/examples/Brand.md +9 -9
  170. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  171. package/docs/components/Button/examples/Button.md +51 -55
  172. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  173. package/docs/components/Card/examples/Card.md +676 -116
  174. package/docs/components/Check/examples/Check.md +16 -19
  175. package/docs/components/Chip/examples/Chip.md +70 -52
  176. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  177. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  178. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  179. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  180. package/docs/components/Content/examples/Content.md +37 -9
  181. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  182. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  183. package/docs/components/DataList/examples/DataList.md +239 -202
  184. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  185. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  186. package/docs/components/Divider/examples/Divider.md +10 -10
  187. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  188. package/docs/components/Drawer/examples/Drawer.md +43 -43
  189. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  190. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  191. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  192. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  193. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  194. package/docs/components/FileUpload/examples/FileUpload.md +150 -110
  195. package/docs/components/Form/examples/Form.md +152 -130
  196. package/docs/components/FormControl/examples/FormControl.md +21 -20
  197. package/docs/components/HelperText/examples/HelperText.md +24 -35
  198. package/docs/components/Hint/examples/Hint.md +7 -7
  199. package/docs/components/Icon/examples/Icon.md +11 -12
  200. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  201. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  202. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  203. package/docs/components/Label/examples/Label.md +1427 -746
  204. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  205. package/docs/components/List/examples/List.md +18 -18
  206. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  207. package/docs/components/Login/examples/Login.md +103 -181
  208. package/docs/components/Masthead/examples/masthead.md +9 -9
  209. package/docs/components/Menu/examples/Menu.md +93 -85
  210. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  211. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  212. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  213. package/docs/components/Nav/examples/Navigation.md +69 -69
  214. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  215. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  216. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  217. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  218. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  219. package/docs/components/Page/examples/Page.css +7 -1
  220. package/docs/components/Page/examples/Page.md +81 -54
  221. package/docs/components/Pagination/examples/Pagination.md +27 -27
  222. package/docs/components/Panel/examples/Panel.md +10 -10
  223. package/docs/components/Popover/examples/Popover.md +206 -149
  224. package/docs/components/Progress/examples/Progress.md +32 -61
  225. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  226. package/docs/components/Radio/examples/Radio.md +12 -11
  227. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  228. package/docs/components/Select/examples/Select.md +372 -318
  229. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  230. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  231. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  232. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  233. package/docs/components/Slider/examples/Slider.md +84 -62
  234. package/docs/components/Spinner/examples/Spinner.md +18 -67
  235. package/docs/components/Switch/examples/Switch.md +19 -19
  236. package/docs/components/TabContent/examples/TabContent.md +13 -13
  237. package/docs/components/Table/examples/Table.css +4 -0
  238. package/docs/components/Table/examples/Table.md +5212 -5750
  239. package/docs/components/Tabs/examples/Tabs.md +155 -155
  240. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  241. package/docs/components/Tile/examples/Tile.md +16 -17
  242. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  243. package/docs/components/Title/examples/Title.md +17 -17
  244. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  245. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  246. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  247. package/docs/components/TreeView/examples/TreeView.md +34 -34
  248. package/docs/components/Truncate/examples/Truncate.md +4 -5
  249. package/docs/components/Wizard/examples/Wizard.md +119 -127
  250. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  251. package/docs/demos/Alert/examples/Alert.md +118 -71
  252. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  253. package/docs/demos/Banner/examples/Banner.md +8 -9
  254. package/docs/demos/Button/examples/Button.md +10 -5
  255. package/docs/demos/Card/examples/Card.md +246 -168
  256. package/docs/demos/CardView/examples/CardView.md +57 -30
  257. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  258. package/docs/demos/Dashboard/examples/Dashboard.md +61 -38
  259. package/docs/demos/DataList/examples/DataList.md +312 -255
  260. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  261. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  262. package/docs/demos/Form/examples/BasicForms.md +220 -213
  263. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  264. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  265. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  266. package/docs/demos/Modal/examples/Modal.md +54 -66
  267. package/docs/demos/Nav/examples/Nav.md +47 -47
  268. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  269. package/docs/demos/Page/examples/Page.md +982 -51
  270. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  271. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  272. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  273. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  274. package/docs/demos/Table/examples/Table.md +3373 -1333
  275. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  276. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  277. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  278. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  279. package/docs/layouts/Flex/examples/Flex.md +98 -98
  280. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  281. package/docs/layouts/Grid/examples/Grid.md +9 -9
  282. package/docs/layouts/Level/examples/Level.md +5 -5
  283. package/docs/layouts/Split/examples/Split.md +7 -7
  284. package/docs/layouts/Stack/examples/Stack.md +6 -6
  285. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  286. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  287. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  288. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  289. package/docs/utilities/Display/examples/Display.md +12 -12
  290. package/docs/utilities/Flex/examples/Flex.md +35 -35
  291. package/docs/utilities/Float/examples/Float.md +5 -5
  292. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  293. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  294. package/docs/utilities/Text/examples/Text.md +31 -31
  295. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  296. package/layouts/Gallery/gallery.css +1 -1
  297. package/layouts/Gallery/gallery.scss +1 -1
  298. package/layouts/Grid/grid.css +7 -7
  299. package/layouts/Grid/grid.scss +2 -2
  300. package/package.json +60 -66
  301. package/patternfly-addons.css +48 -48
  302. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  303. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  304. package/patternfly-base.css +63 -114
  305. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1206 -2449
  306. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  307. package/patternfly.css +1234 -2483
  308. package/patternfly.min.css +1 -1
  309. package/patternfly.min.css.map +1 -1
  310. package/sass-utilities/functions.scss +8 -24
  311. package/sass-utilities/mixins.scss +15 -39
  312. package/sass-utilities/placeholders.scss +0 -23
  313. package/sass-utilities/scss-variables.scss +5 -6
  314. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  315. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  316. package/utilities/Spacing/spacing.scss +2 -2
  317. package/utilities/Text/text.css +48 -48
  318. package/utilities/Text/text.scss +6 -6
  319. package/utilities/Text/themes/dark/text.scss +2 -2
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  326. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  327. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  332. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  333. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  334. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  335. package/assets/pficon/pficon.woff +0 -0
  336. package/base/_shield-inheritable.scss +0 -69
  337. package/base/_shield-noninheritable.scss +0 -13
  338. package/base/patternfly-shield-inheritable.css +0 -66
  339. package/base/patternfly-shield-inheritable.scss +0 -4
  340. package/base/patternfly-shield-noninheritable.css +0 -9
  341. package/base/patternfly-shield-noninheritable.scss +0 -4
  342. package/sass-utilities/bs-variables.scss +0 -709
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -10,28 +10,32 @@ Toolbar relies on groups (`.pf-c-toolbar__group`) and items (`.pf-c-toolbar__ite
10
10
 
11
11
  ### Default spacing for items and groups:
12
12
 
13
- | Class | CSS Variable | Computed Value |
14
- | ---------------------- | ------------------------------- | -------------- |
15
- | `.pf-c-toolbar__item` | `--pf-c-toolbar__item--spacer` | `16px` |
16
- | `.pf-c-toolbar__group` | `--pf-c-toolbar__group--spacer` | `16px` |
13
+ | Class | CSS Variable | Computed Value |
14
+ | -- | -- | -- |
15
+ | `.pf-c-toolbar__item` | `--pf-c-toolbar__item--spacer` | `16px` |
16
+ | `.pf-c-toolbar__group` | `--pf-c-toolbar__group--spacer` | `16px` |
17
17
 
18
18
  ### Toolbar item types
19
19
 
20
- | Class | Applied to | Outcome |
21
- | --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------ |
22
- | `.pf-m-bulk-select` | `.pf-c-toolbar__item` | Initiates bulk select spacing. Spacer value is set to `var(--pf-c-toolbar--m-bulk-select--spacer)`. |
23
- | `.pf-m-overflow-menu` | `.pf-c-toolbar__item` | Initiates overflow menu spacing. Spacer value is set to `var(--pf-c-toolbar--m-overflow-menu--spacer)`. |
24
- | `.pf-m-pagination` | `.pf-c-toolbar__item` | Initiates pagination spacing and margin. Spacer value is set to `var(--pf-c-toolbar--m-pagination--spacer)`. |
25
- | `.pf-m-search-filter` | `.pf-c-toolbar__item` | Initiates search filter spacing. Spacer value is set to `var(--pf-c-toolbar--m-search-filter--spacer)`. |
20
+ | Class | Applied to | Outcome |
21
+ | -- | -- | -- |
22
+ | `.pf-m-bulk-select` | `.pf-c-toolbar__item` | Initiates bulk select spacing. Spacer value is set to `var(--pf-c-toolbar--m-bulk-select--spacer)`. |
23
+ | `.pf-m-overflow-menu` | `.pf-c-toolbar__item` | Initiates overflow menu spacing. Spacer value is set to `var(--pf-c-toolbar--m-overflow-menu--spacer)`. |
24
+ | `.pf-m-pagination` | `.pf-c-toolbar__item` | Initiates pagination spacing and margin. Spacer value is set to `var(--pf-c-toolbar--m-pagination--spacer)`. |
25
+ | `.pf-m-search-filter` | `.pf-c-toolbar__item` | Initiates search filter spacing. Spacer value is set to `var(--pf-c-toolbar--m-search-filter--spacer)`. |
26
26
 
27
27
  ### Modifiers
28
28
 
29
- | Class | Applied to | Outcome |
30
- | ------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
31
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-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-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
29
+ | Class | Applied to | Outcome |
30
+ | -- | -- | -- |
31
+ | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-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-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
33
33
  | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-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-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
34
+ | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-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-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
36
+ | `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
37
+ | `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
38
+ | `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
35
39
 
36
40
  ### Special notes
37
41
 
@@ -68,10 +72,10 @@ Several components in the following examples do not include functional and/or ac
68
72
 
69
73
  ### Item types
70
74
 
71
- | Class | Applied to | Outcome |
72
- | ---------------------- | ---------- | -------------------------------------------------- |
73
- | `.pf-c-toolbar__item` | `<div>` | Initiates the toolbar component item. **Required** |
74
- | `.pf-c-toolbar__group` | `<div>` | Initiates the toolbar component group. |
75
+ | Class | Applied to | Outcome |
76
+ | -- | -- | -- |
77
+ | `.pf-c-toolbar__item` | `<div>` | Initiates the toolbar component item. **Required** |
78
+ | `.pf-c-toolbar__group` | `<div>` | Initiates the toolbar component group. |
75
79
 
76
80
  ### Spacers
77
81
 
@@ -164,12 +168,12 @@ In some instances, it may be necessary to adjust spacing explicitly where items
164
168
 
165
169
  ### Toolbar spacers and insets
166
170
 
167
- | Class | Applied to | Outcome |
168
- | ----------------------------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
169
- | `.pf-m-page-insets` | `.pf-c-toolbar` | Modifies toolbar insets to match page section, table, page header or any other component whose inset shifts from `--pf-global--spacer--md` to `--pf-global--spacer--lg` at the `xl` breakpoint. |
170
- | `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
171
- | `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
172
- | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar` | Modifies toolbar horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
171
+ | Class | Applied to | Outcome |
172
+ | -- | -- | -- |
173
+ | `.pf-m-page-insets` | `.pf-c-toolbar` | Modifies toolbar insets to match page section, table, page header or any other component whose inset shifts from `--pf-global--spacer--md` to `--pf-global--spacer--lg` at the `xl` breakpoint. |
174
+ | `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
175
+ | `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
176
+ | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar` | Modifies toolbar horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
173
177
 
174
178
  ### Width control
175
179
 
@@ -195,10 +199,10 @@ In some instances, it may be necessary to adjust spacing explicitly where items
195
199
 
196
200
  ### Width control usage
197
201
 
198
- | Class | Applied to | Outcome |
199
- | ----------------------------------------------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
200
- | `--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
201
- | `--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-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). |
202
+ | Class | Applied to | Outcome |
203
+ | -- | -- | -- |
204
+ | `--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
205
+ | `--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-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). |
202
206
 
203
207
  ### Group types
204
208
 
@@ -433,11 +437,11 @@ In some instances, it may be necessary to adjust spacing explicitly where items
433
437
 
434
438
  ### Toolbar group types
435
439
 
436
- | Class | Applied to | Outcome |
437
- | ------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
438
- | `.pf-m-filter-group` | `.pf-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-c-toolbar__group--m-filter-group--spacer)`. Child spacer value is set to `var(--pf-c-toolbar__group--m-filter-group--space-items)`. |
440
+ | Class | Applied to | Outcome |
441
+ | -- | -- | -- |
442
+ | `.pf-m-filter-group` | `.pf-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-c-toolbar__group--m-filter-group--spacer)`. Child spacer value is set to `var(--pf-c-toolbar__group--m-filter-group--space-items)`. |
439
443
  | `.pf-m-icon-button-group` | `.pf-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-c-toolbar__group--m-toggle-group--spacer)`. Child spacer value is set to `var(--pf-c-toolbar__group--m-icon-button-group--space-items)`. |
440
- | `.pf-m-button-group` | `.pf-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-c-toolbar__group--m-toggle-group--spacer)`. Child spacer value is set to `var(--pf-c-toolbar__group--m-button-group--space-items)`. |
444
+ | `.pf-m-button-group` | `.pf-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-c-toolbar__group--m-toggle-group--spacer)`. Child spacer value is set to `var(--pf-c-toolbar__group--m-button-group--space-items)`. |
441
445
 
442
446
  ### Toggle group
443
447
 
@@ -459,81 +463,87 @@ In some instances, it may be necessary to adjust spacing explicitly where items
459
463
  </div>
460
464
  <div class="pf-c-toolbar__item pf-m-search-filter">
461
465
  <div class="pf-c-input-group" aria-label="search filter" role="group">
462
- <div class="pf-c-select" style="width: 175px">
463
- <span
464
- id="toolbar-toggle-group-example-select-name-label"
465
- hidden
466
- >Choose one</span>
466
+ <div class="pf-c-input-group__item pf-m-fill">
467
+ <div class="pf-c-select" style="width: 124px">
468
+ <span
469
+ id="toolbar-toggle-group-example-select-name-label"
470
+ hidden
471
+ >Choose one</span>
467
472
 
468
- <button
469
- class="pf-c-select__toggle"
470
- type="button"
471
- id="toolbar-toggle-group-example-select-name-toggle"
472
- aria-haspopup="true"
473
- aria-expanded="false"
474
- aria-labelledby="toolbar-toggle-group-example-select-name-label toolbar-toggle-group-example-select-name-toggle"
475
- >
476
- <div class="pf-c-select__toggle-wrapper">
477
- <span class="pf-c-select__toggle-icon">
478
- <i class="fas fa-filter" aria-hidden="true"></i>
473
+ <button
474
+ class="pf-c-select__toggle"
475
+ type="button"
476
+ id="toolbar-toggle-group-example-select-name-toggle"
477
+ aria-haspopup="true"
478
+ aria-expanded="false"
479
+ aria-labelledby="toolbar-toggle-group-example-select-name-label toolbar-toggle-group-example-select-name-toggle"
480
+ >
481
+ <div class="pf-c-select__toggle-wrapper">
482
+ <span class="pf-c-select__toggle-icon">
483
+ <i class="fas fa-filter" aria-hidden="true"></i>
484
+ </span>
485
+ <span class="pf-c-select__toggle-text">Name</span>
486
+ </div>
487
+ <span class="pf-c-select__toggle-arrow">
488
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
479
489
  </span>
480
- <span class="pf-c-select__toggle-text">Name</span>
481
- </div>
482
- <span class="pf-c-select__toggle-arrow">
483
- <i class="fas fa-caret-down" aria-hidden="true"></i>
484
- </span>
485
- </button>
490
+ </button>
486
491
 
487
- <ul
488
- class="pf-c-select__menu"
489
- role="listbox"
490
- aria-labelledby="toolbar-toggle-group-example-select-name-label"
491
- hidden
492
- style="width: 175px"
493
- >
494
- <li role="presentation">
495
- <button class="pf-c-select__menu-item" role="option">Running</button>
496
- </li>
497
- <li role="presentation">
498
- <button
499
- class="pf-c-select__menu-item pf-m-selected"
500
- role="option"
501
- aria-selected="true"
502
- >
503
- Stopped
504
- <span class="pf-c-select__menu-item-icon">
505
- <i class="fas fa-check" aria-hidden="true"></i>
506
- </span>
507
- </button>
508
- </li>
509
- <li role="presentation">
510
- <button class="pf-c-select__menu-item" role="option">Down</button>
511
- </li>
512
- <li role="presentation">
513
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
514
- </li>
515
- <li role="presentation">
516
- <button
517
- class="pf-c-select__menu-item"
518
- role="option"
519
- >Needs maintenance</button>
520
- </li>
521
- </ul>
492
+ <ul
493
+ class="pf-c-select__menu"
494
+ role="listbox"
495
+ aria-labelledby="toolbar-toggle-group-example-select-name-label"
496
+ hidden
497
+ >
498
+ <li role="presentation">
499
+ <button class="pf-c-select__menu-item" role="option">Running</button>
500
+ </li>
501
+ <li role="presentation">
502
+ <button
503
+ class="pf-c-select__menu-item pf-m-selected"
504
+ role="option"
505
+ aria-selected="true"
506
+ >
507
+ Stopped
508
+ <span class="pf-c-select__menu-item-icon">
509
+ <i class="fas fa-check" aria-hidden="true"></i>
510
+ </span>
511
+ </button>
512
+ </li>
513
+ <li role="presentation">
514
+ <button class="pf-c-select__menu-item" role="option">Down</button>
515
+ </li>
516
+ <li role="presentation">
517
+ <button
518
+ class="pf-c-select__menu-item"
519
+ role="option"
520
+ >Degraded</button>
521
+ </li>
522
+ <li role="presentation">
523
+ <button
524
+ class="pf-c-select__menu-item"
525
+ role="option"
526
+ >Needs maintenance</button>
527
+ </li>
528
+ </ul>
529
+ </div>
522
530
  </div>
523
- <div class="pf-c-text-input-group">
524
- <div class="pf-c-text-input-group__main pf-m-icon">
525
- <span class="pf-c-text-input-group__text">
526
- <span class="pf-c-text-input-group__icon">
527
- <i class="fas fa-fw fa-search"></i>
531
+ <div class="pf-c-input-group__item">
532
+ <div class="pf-c-text-input-group" style="width: auto">
533
+ <div class="pf-c-text-input-group__main pf-m-icon">
534
+ <span class="pf-c-text-input-group__text">
535
+ <span class="pf-c-text-input-group__icon">
536
+ <i class="fas fa-fw fa-search"></i>
537
+ </span>
538
+ <input
539
+ class="pf-c-text-input-group__text-input"
540
+ type="search"
541
+ placeholder="Filter by name"
542
+ value
543
+ aria-label="Type to filter"
544
+ />
528
545
  </span>
529
- <input
530
- class="pf-c-text-input-group__text-input"
531
- type="text"
532
- value
533
- placeholder="Filter by name"
534
- aria-label="Type to filter"
535
- />
536
- </span>
546
+ </div>
537
547
  </div>
538
548
  </div>
539
549
  </div>
@@ -780,81 +790,84 @@ In some instances, it may be necessary to adjust spacing explicitly where items
780
790
  >
781
791
  <div class="pf-c-toolbar__item pf-m-search-filter">
782
792
  <div class="pf-c-input-group" aria-label="search filter" role="group">
783
- <div class="pf-c-select" style="width: 175px">
784
- <span
785
- id="toolbar-toggle-group-collapsed-example-select-name-label"
786
- hidden
787
- >Choose one</span>
793
+ <div class="pf-c-input-group__item pf-m-fill">
794
+ <div class="pf-c-select" style="width: 124px">
795
+ <span
796
+ id="toolbar-toggle-group-collapsed-example-select-name-label"
797
+ hidden
798
+ >Choose one</span>
788
799
 
789
- <button
790
- class="pf-c-select__toggle"
791
- type="button"
792
- id="toolbar-toggle-group-collapsed-example-select-name-toggle"
793
- aria-haspopup="true"
794
- aria-expanded="false"
795
- aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label toolbar-toggle-group-collapsed-example-select-name-toggle"
796
- >
797
- <div class="pf-c-select__toggle-wrapper">
798
- <span class="pf-c-select__toggle-icon">
799
- <i class="fas fa-filter" aria-hidden="true"></i>
800
+ <button
801
+ class="pf-c-select__toggle"
802
+ type="button"
803
+ id="toolbar-toggle-group-collapsed-example-select-name-toggle"
804
+ aria-haspopup="true"
805
+ aria-expanded="false"
806
+ aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label toolbar-toggle-group-collapsed-example-select-name-toggle"
807
+ >
808
+ <div class="pf-c-select__toggle-wrapper">
809
+ <span class="pf-c-select__toggle-icon">
810
+ <i class="fas fa-filter" aria-hidden="true"></i>
811
+ </span>
812
+ <span class="pf-c-select__toggle-text">Name</span>
813
+ </div>
814
+ <span class="pf-c-select__toggle-arrow">
815
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
800
816
  </span>
801
- <span class="pf-c-select__toggle-text">Name</span>
802
- </div>
803
- <span class="pf-c-select__toggle-arrow">
804
- <i class="fas fa-caret-down" aria-hidden="true"></i>
805
- </span>
806
- </button>
817
+ </button>
807
818
 
808
- <ul
809
- class="pf-c-select__menu"
810
- role="listbox"
811
- aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label"
812
- hidden
813
- style="width: 175px"
814
- >
815
- <li role="presentation">
816
- <button class="pf-c-select__menu-item" role="option">Running</button>
817
- </li>
818
- <li role="presentation">
819
- <button
820
- class="pf-c-select__menu-item pf-m-selected"
821
- role="option"
822
- aria-selected="true"
823
- >
824
- Stopped
825
- <span class="pf-c-select__menu-item-icon">
826
- <i class="fas fa-check" aria-hidden="true"></i>
827
- </span>
828
- </button>
829
- </li>
830
- <li role="presentation">
831
- <button class="pf-c-select__menu-item" role="option">Down</button>
832
- </li>
833
- <li role="presentation">
834
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
835
- </li>
836
- <li role="presentation">
837
- <button
838
- class="pf-c-select__menu-item"
839
- role="option"
840
- >Needs maintenance</button>
841
- </li>
842
- </ul>
819
+ <ul
820
+ class="pf-c-select__menu"
821
+ role="listbox"
822
+ aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label"
823
+ hidden
824
+ >
825
+ <li role="presentation">
826
+ <button class="pf-c-select__menu-item" role="option">Running</button>
827
+ </li>
828
+ <li role="presentation">
829
+ <button
830
+ class="pf-c-select__menu-item pf-m-selected"
831
+ role="option"
832
+ aria-selected="true"
833
+ >
834
+ Stopped
835
+ <span class="pf-c-select__menu-item-icon">
836
+ <i class="fas fa-check" aria-hidden="true"></i>
837
+ </span>
838
+ </button>
839
+ </li>
840
+ <li role="presentation">
841
+ <button class="pf-c-select__menu-item" role="option">Down</button>
842
+ </li>
843
+ <li role="presentation">
844
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
845
+ </li>
846
+ <li role="presentation">
847
+ <button
848
+ class="pf-c-select__menu-item"
849
+ role="option"
850
+ >Needs maintenance</button>
851
+ </li>
852
+ </ul>
853
+ </div>
843
854
  </div>
844
- <div class="pf-c-text-input-group">
845
- <div class="pf-c-text-input-group__main pf-m-icon">
846
- <span class="pf-c-text-input-group__text">
847
- <span class="pf-c-text-input-group__icon">
848
- <i class="fas fa-fw fa-search"></i>
855
+ <div class="pf-c-input-group__item">
856
+ <div class="pf-c-text-input-group" style="width: auto">
857
+ <div class="pf-c-text-input-group__main pf-m-icon">
858
+ <span class="pf-c-text-input-group__text">
859
+ <span class="pf-c-text-input-group__icon">
860
+ <i class="fas fa-fw fa-search"></i>
861
+ </span>
862
+ <input
863
+ class="pf-c-text-input-group__text-input"
864
+ type="search"
865
+ placeholder="Filter by name"
866
+ value
867
+ aria-label="Type to filter"
868
+ />
849
869
  </span>
850
- <input
851
- class="pf-c-text-input-group__text-input"
852
- type="text"
853
- value
854
- placeholder="Filter by name"
855
- aria-label="Type to filter"
856
- />
857
- </span>
870
+ </div>
858
871
  </div>
859
872
  </div>
860
873
  </div>
@@ -1075,27 +1088,27 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1075
1088
 
1076
1089
  ### Accessibility
1077
1090
 
1078
- | Attribute | Applied to | Outcome |
1079
- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
1080
- | `hidden` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group`, `.pf-c-toolbar__toggle`, `.pf-c-toolbar__expandable-content` | Indicates that the toggle group element is hidden. **Required** |
1081
- | `aria-expanded="true"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates that the expandable content is visible. **Required** |
1082
- | `aria-expanded="false"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates the the expandable content is hidden. **Required** |
1083
- | `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
1084
- | `id="[expandable-content_id]"` | `.pf-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
1091
+ | Attribute | Applied to | Outcome |
1092
+ | -- | -- | -- |
1093
+ | `hidden` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group`, `.pf-c-toolbar__toggle`, `.pf-c-toolbar__expandable-content` | Indicates that the toggle group element is hidden. **Required** |
1094
+ | `aria-expanded="true"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates that the expandable content is visible. **Required** |
1095
+ | `aria-expanded="false"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates the the expandable content is hidden. **Required** |
1096
+ | `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
1097
+ | `id="[expandable-content_id]"` | `.pf-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
1085
1098
 
1086
1099
  ### Responsive attributes
1087
1100
 
1088
- | Attribute | Applied to | Outcome |
1089
- | ---------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1101
+ | Attribute | Applied to | Outcome |
1102
+ | -- | -- | -- |
1090
1103
  | `aria-haspopup="true"` | `.pf-c-toolbar__toggle > .pf-c-button` | When expandable content appears above content (mobile viewport), `aria-haspopup="true"` should be applied to indicate that focus should be trapped. **Required** |
1091
1104
 
1092
1105
  ### Usage
1093
1106
 
1094
- | Class | Applied to | Outcome |
1095
- | ------------------------------ | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1107
+ | Class | Applied to | Outcome |
1108
+ | -- | -- | -- |
1096
1109
  | `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-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. |
1097
- | `.pf-m-chip-container` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
1098
- | `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
1110
+ | `.pf-m-chip-container` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
1111
+ | `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
1099
1112
 
1100
1113
  ### Selected
1101
1114
 
@@ -1115,11 +1128,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1115
1128
  class="pf-c-dropdown__toggle-check"
1116
1129
  for="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check"
1117
1130
  >
1118
- <input
1119
- type="checkbox"
1120
- id="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check"
1121
- aria-label="Select all"
1122
- />
1131
+ <div class="pf-c-check pf-m-standalone">
1132
+ <input
1133
+ class="pf-c-check__input"
1134
+ type="checkbox"
1135
+ id="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check"
1136
+ aria-label="Select all"
1137
+ />
1138
+ </div>
1123
1139
  </label>
1124
1140
 
1125
1141
  <button
@@ -1162,103 +1178,109 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1162
1178
  </div>
1163
1179
  <div class="pf-c-toolbar__item pf-m-search-filter">
1164
1180
  <div class="pf-c-input-group" aria-label="search filter" role="group">
1165
- <div class="pf-c-select" style="width: 175px">
1181
+ <div class="pf-c-input-group__item pf-m-fill">
1182
+ <div class="pf-c-select" style="width: 124px">
1183
+ <span
1184
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1185
+ hidden
1186
+ >Choose one</span>
1187
+
1188
+ <button
1189
+ class="pf-c-select__toggle"
1190
+ type="button"
1191
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-name-toggle"
1192
+ aria-haspopup="true"
1193
+ aria-expanded="false"
1194
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label toolbar-selected-filters-toggle-group-collapsed-example-select-name-toggle"
1195
+ >
1196
+ <div class="pf-c-select__toggle-wrapper">
1197
+ <span class="pf-c-select__toggle-icon">
1198
+ <i class="fas fa-filter" aria-hidden="true"></i>
1199
+ </span>
1200
+ <span class="pf-c-select__toggle-text">Name</span>
1201
+ </div>
1202
+ <span class="pf-c-select__toggle-arrow">
1203
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1204
+ </span>
1205
+ </button>
1206
+
1207
+ <ul
1208
+ class="pf-c-select__menu"
1209
+ role="listbox"
1210
+ aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1211
+ hidden
1212
+ >
1213
+ <li role="presentation">
1214
+ <button class="pf-c-select__menu-item" role="option">Running</button>
1215
+ </li>
1216
+ <li role="presentation">
1217
+ <button
1218
+ class="pf-c-select__menu-item pf-m-selected"
1219
+ role="option"
1220
+ aria-selected="true"
1221
+ >
1222
+ Stopped
1223
+ <span class="pf-c-select__menu-item-icon">
1224
+ <i class="fas fa-check" aria-hidden="true"></i>
1225
+ </span>
1226
+ </button>
1227
+ </li>
1228
+ <li role="presentation">
1229
+ <button class="pf-c-select__menu-item" role="option">Down</button>
1230
+ </li>
1231
+ <li role="presentation">
1232
+ <button
1233
+ class="pf-c-select__menu-item"
1234
+ role="option"
1235
+ >Degraded</button>
1236
+ </li>
1237
+ <li role="presentation">
1238
+ <button
1239
+ class="pf-c-select__menu-item"
1240
+ role="option"
1241
+ >Needs maintenance</button>
1242
+ </li>
1243
+ </ul>
1244
+ </div>
1245
+ </div>
1246
+ <div class="pf-c-input-group__item">
1247
+ <div class="pf-c-text-input-group" style="width: auto">
1248
+ <div class="pf-c-text-input-group__main pf-m-icon">
1249
+ <span class="pf-c-text-input-group__text">
1250
+ <span class="pf-c-text-input-group__icon">
1251
+ <i class="fas fa-fw fa-search"></i>
1252
+ </span>
1253
+ <input
1254
+ class="pf-c-text-input-group__text-input"
1255
+ type="search"
1256
+ placeholder="Filter by name"
1257
+ value
1258
+ aria-label="Type to filter"
1259
+ />
1260
+ </span>
1261
+ </div>
1262
+ </div>
1263
+ </div>
1264
+ </div>
1265
+ </div>
1266
+ <div class="pf-c-toolbar__group pf-m-filter-group">
1267
+ <div class="pf-c-toolbar__item">
1268
+ <div class="pf-c-select">
1166
1269
  <span
1167
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1270
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-label"
1168
1271
  hidden
1169
1272
  >Choose one</span>
1170
1273
 
1171
1274
  <button
1172
1275
  class="pf-c-select__toggle"
1173
1276
  type="button"
1174
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-name-toggle"
1277
+ id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle"
1175
1278
  aria-haspopup="true"
1176
1279
  aria-expanded="false"
1177
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label toolbar-selected-filters-toggle-group-collapsed-example-select-name-toggle"
1280
+ 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"
1178
1281
  >
1179
1282
  <div class="pf-c-select__toggle-wrapper">
1180
- <span class="pf-c-select__toggle-icon">
1181
- <i class="fas fa-filter" aria-hidden="true"></i>
1182
- </span>
1183
- <span class="pf-c-select__toggle-text">Name</span>
1184
- </div>
1185
- <span class="pf-c-select__toggle-arrow">
1186
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1187
- </span>
1188
- </button>
1189
-
1190
- <ul
1191
- class="pf-c-select__menu"
1192
- role="listbox"
1193
- aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1194
- hidden
1195
- style="width: 175px"
1196
- >
1197
- <li role="presentation">
1198
- <button class="pf-c-select__menu-item" role="option">Running</button>
1199
- </li>
1200
- <li role="presentation">
1201
- <button
1202
- class="pf-c-select__menu-item pf-m-selected"
1203
- role="option"
1204
- aria-selected="true"
1205
- >
1206
- Stopped
1207
- <span class="pf-c-select__menu-item-icon">
1208
- <i class="fas fa-check" aria-hidden="true"></i>
1209
- </span>
1210
- </button>
1211
- </li>
1212
- <li role="presentation">
1213
- <button class="pf-c-select__menu-item" role="option">Down</button>
1214
- </li>
1215
- <li role="presentation">
1216
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
1217
- </li>
1218
- <li role="presentation">
1219
- <button
1220
- class="pf-c-select__menu-item"
1221
- role="option"
1222
- >Needs maintenance</button>
1223
- </li>
1224
- </ul>
1225
- </div>
1226
- <div class="pf-c-text-input-group">
1227
- <div class="pf-c-text-input-group__main pf-m-icon">
1228
- <span class="pf-c-text-input-group__text">
1229
- <span class="pf-c-text-input-group__icon">
1230
- <i class="fas fa-fw fa-search"></i>
1231
- </span>
1232
- <input
1233
- class="pf-c-text-input-group__text-input"
1234
- type="text"
1235
- value
1236
- placeholder="Filter by name"
1237
- aria-label="Type to filter"
1238
- />
1239
- </span>
1240
- </div>
1241
- </div>
1242
- </div>
1243
- </div>
1244
- <div class="pf-c-toolbar__group pf-m-filter-group">
1245
- <div class="pf-c-toolbar__item">
1246
- <div class="pf-c-select">
1247
- <span
1248
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-label"
1249
- hidden
1250
- >Choose one</span>
1251
-
1252
- <button
1253
- class="pf-c-select__toggle"
1254
- type="button"
1255
- id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-toggle"
1256
- aria-haspopup="true"
1257
- aria-expanded="false"
1258
- 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"
1259
- >
1260
- <div class="pf-c-select__toggle-wrapper">
1261
- <span class="pf-c-select__toggle-text">Status</span>
1283
+ <span class="pf-c-select__toggle-text">Status</span>
1262
1284
  </div>
1263
1285
  <span class="pf-c-select__toggle-arrow">
1264
1286
  <i class="fas fa-caret-down" aria-hidden="true"></i>
@@ -1503,53 +1525,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1503
1525
  >
1504
1526
  <li class="pf-c-chip-group__list-item">
1505
1527
  <div class="pf-c-chip">
1506
- <span
1507
- class="pf-c-chip__text"
1508
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
1509
- >Chip one</span>
1510
- <button
1511
- class="pf-c-button pf-m-plain"
1512
- type="button"
1513
- 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"
1514
- aria-label="Remove"
1515
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one"
1516
- >
1517
- <i class="fas fa-times" aria-hidden="true"></i>
1518
- </button>
1528
+ <span class="pf-c-chip__content">
1529
+ <span
1530
+ class="pf-c-chip__text"
1531
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-one"
1532
+ >Chip one</span>
1533
+ </span>
1534
+ <span class="pf-c-chip__actions">
1535
+ <button
1536
+ class="pf-c-button pf-m-plain"
1537
+ type="button"
1538
+ 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"
1539
+ aria-label="Remove"
1540
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-one"
1541
+ >
1542
+ <i class="fas fa-times" aria-hidden="true"></i>
1543
+ </button>
1544
+ </span>
1519
1545
  </div>
1520
1546
  </li>
1521
1547
  <li class="pf-c-chip-group__list-item">
1522
1548
  <div class="pf-c-chip">
1523
- <span
1524
- class="pf-c-chip__text"
1525
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
1526
- >Chip two</span>
1527
- <button
1528
- class="pf-c-button pf-m-plain"
1529
- type="button"
1530
- 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"
1531
- aria-label="Remove"
1532
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two"
1533
- >
1534
- <i class="fas fa-times" aria-hidden="true"></i>
1535
- </button>
1549
+ <span class="pf-c-chip__content">
1550
+ <span
1551
+ class="pf-c-chip__text"
1552
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-two"
1553
+ >Chip two</span>
1554
+ </span>
1555
+ <span class="pf-c-chip__actions">
1556
+ <button
1557
+ class="pf-c-button pf-m-plain"
1558
+ type="button"
1559
+ 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"
1560
+ aria-label="Remove"
1561
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-two"
1562
+ >
1563
+ <i class="fas fa-times" aria-hidden="true"></i>
1564
+ </button>
1565
+ </span>
1536
1566
  </div>
1537
1567
  </li>
1538
1568
  <li class="pf-c-chip-group__list-item">
1539
1569
  <div class="pf-c-chip">
1540
- <span
1541
- class="pf-c-chip__text"
1542
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
1543
- >Chip three</span>
1544
- <button
1545
- class="pf-c-button pf-m-plain"
1546
- type="button"
1547
- 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"
1548
- aria-label="Remove"
1549
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three"
1550
- >
1551
- <i class="fas fa-times" aria-hidden="true"></i>
1552
- </button>
1570
+ <span class="pf-c-chip__content">
1571
+ <span
1572
+ class="pf-c-chip__text"
1573
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statuschip-three"
1574
+ >Chip three</span>
1575
+ </span>
1576
+ <span class="pf-c-chip__actions">
1577
+ <button
1578
+ class="pf-c-button pf-m-plain"
1579
+ type="button"
1580
+ 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"
1581
+ aria-label="Remove"
1582
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-statusremove-chip-three"
1583
+ >
1584
+ <i class="fas fa-times" aria-hidden="true"></i>
1585
+ </button>
1586
+ </span>
1553
1587
  </div>
1554
1588
  </li>
1555
1589
  </ul>
@@ -1571,53 +1605,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1571
1605
  >
1572
1606
  <li class="pf-c-chip-group__list-item">
1573
1607
  <div class="pf-c-chip">
1574
- <span
1575
- class="pf-c-chip__text"
1576
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
1577
- >Chip one</span>
1578
- <button
1579
- class="pf-c-button pf-m-plain"
1580
- type="button"
1581
- 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"
1582
- aria-label="Remove"
1583
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one"
1584
- >
1585
- <i class="fas fa-times" aria-hidden="true"></i>
1586
- </button>
1608
+ <span class="pf-c-chip__content">
1609
+ <span
1610
+ class="pf-c-chip__text"
1611
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-one"
1612
+ >Chip one</span>
1613
+ </span>
1614
+ <span class="pf-c-chip__actions">
1615
+ <button
1616
+ class="pf-c-button pf-m-plain"
1617
+ type="button"
1618
+ 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"
1619
+ aria-label="Remove"
1620
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-one"
1621
+ >
1622
+ <i class="fas fa-times" aria-hidden="true"></i>
1623
+ </button>
1624
+ </span>
1587
1625
  </div>
1588
1626
  </li>
1589
1627
  <li class="pf-c-chip-group__list-item">
1590
1628
  <div class="pf-c-chip">
1591
- <span
1592
- class="pf-c-chip__text"
1593
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
1594
- >Chip two</span>
1595
- <button
1596
- class="pf-c-button pf-m-plain"
1597
- type="button"
1598
- 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"
1599
- aria-label="Remove"
1600
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two"
1601
- >
1602
- <i class="fas fa-times" aria-hidden="true"></i>
1603
- </button>
1629
+ <span class="pf-c-chip__content">
1630
+ <span
1631
+ class="pf-c-chip__text"
1632
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-two"
1633
+ >Chip two</span>
1634
+ </span>
1635
+ <span class="pf-c-chip__actions">
1636
+ <button
1637
+ class="pf-c-button pf-m-plain"
1638
+ type="button"
1639
+ 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"
1640
+ aria-label="Remove"
1641
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-two"
1642
+ >
1643
+ <i class="fas fa-times" aria-hidden="true"></i>
1644
+ </button>
1645
+ </span>
1604
1646
  </div>
1605
1647
  </li>
1606
1648
  <li class="pf-c-chip-group__list-item">
1607
1649
  <div class="pf-c-chip">
1608
- <span
1609
- class="pf-c-chip__text"
1610
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
1611
- >Chip three</span>
1612
- <button
1613
- class="pf-c-button pf-m-plain"
1614
- type="button"
1615
- 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"
1616
- aria-label="Remove"
1617
- id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three"
1618
- >
1619
- <i class="fas fa-times" aria-hidden="true"></i>
1620
- </button>
1650
+ <span class="pf-c-chip__content">
1651
+ <span
1652
+ class="pf-c-chip__text"
1653
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskchip-three"
1654
+ >Chip three</span>
1655
+ </span>
1656
+ <span class="pf-c-chip__actions">
1657
+ <button
1658
+ class="pf-c-button pf-m-plain"
1659
+ type="button"
1660
+ 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"
1661
+ aria-label="Remove"
1662
+ id="toolbar-selected-filters-toggle-group-collapsed-example-chip-group-riskremove-chip-three"
1663
+ >
1664
+ <i class="fas fa-times" aria-hidden="true"></i>
1665
+ </button>
1666
+ </span>
1621
1667
  </div>
1622
1668
  </li>
1623
1669
  </ul>
@@ -1656,11 +1702,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1656
1702
  class="pf-c-dropdown__toggle-check"
1657
1703
  for="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-check"
1658
1704
  >
1659
- <input
1660
- type="checkbox"
1661
- id="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-check"
1662
- aria-label="Select all"
1663
- />
1705
+ <div class="pf-c-check pf-m-standalone">
1706
+ <input
1707
+ class="pf-c-check__input"
1708
+ type="checkbox"
1709
+ id="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-check"
1710
+ aria-label="Select all"
1711
+ />
1712
+ </div>
1664
1713
  </label>
1665
1714
 
1666
1715
  <button
@@ -1744,81 +1793,84 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1744
1793
  >
1745
1794
  <div class="pf-c-toolbar__item pf-m-search-filter">
1746
1795
  <div class="pf-c-input-group" aria-label="search filter" role="group">
1747
- <div class="pf-c-select" style="width: 175px">
1748
- <span
1749
- id="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1750
- hidden
1751
- >Choose one</span>
1796
+ <div class="pf-c-input-group__item pf-m-fill">
1797
+ <div class="pf-c-select" style="width: 124px">
1798
+ <span
1799
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1800
+ hidden
1801
+ >Choose one</span>
1752
1802
 
1753
- <button
1754
- class="pf-c-select__toggle"
1755
- type="button"
1756
- id="toolbar-selected-filters-toggle-group-expanded-example-select-name-toggle"
1757
- aria-haspopup="true"
1758
- aria-expanded="false"
1759
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label toolbar-selected-filters-toggle-group-expanded-example-select-name-toggle"
1760
- >
1761
- <div class="pf-c-select__toggle-wrapper">
1762
- <span class="pf-c-select__toggle-icon">
1763
- <i class="fas fa-filter" aria-hidden="true"></i>
1803
+ <button
1804
+ class="pf-c-select__toggle"
1805
+ type="button"
1806
+ id="toolbar-selected-filters-toggle-group-expanded-example-select-name-toggle"
1807
+ aria-haspopup="true"
1808
+ aria-expanded="false"
1809
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label toolbar-selected-filters-toggle-group-expanded-example-select-name-toggle"
1810
+ >
1811
+ <div class="pf-c-select__toggle-wrapper">
1812
+ <span class="pf-c-select__toggle-icon">
1813
+ <i class="fas fa-filter" aria-hidden="true"></i>
1814
+ </span>
1815
+ <span class="pf-c-select__toggle-text">Name</span>
1816
+ </div>
1817
+ <span class="pf-c-select__toggle-arrow">
1818
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1764
1819
  </span>
1765
- <span class="pf-c-select__toggle-text">Name</span>
1766
- </div>
1767
- <span class="pf-c-select__toggle-arrow">
1768
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1769
- </span>
1770
- </button>
1820
+ </button>
1771
1821
 
1772
- <ul
1773
- class="pf-c-select__menu"
1774
- role="listbox"
1775
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1776
- hidden
1777
- style="width: 175px"
1778
- >
1779
- <li role="presentation">
1780
- <button class="pf-c-select__menu-item" role="option">Running</button>
1781
- </li>
1782
- <li role="presentation">
1783
- <button
1784
- class="pf-c-select__menu-item pf-m-selected"
1785
- role="option"
1786
- aria-selected="true"
1787
- >
1788
- Stopped
1789
- <span class="pf-c-select__menu-item-icon">
1790
- <i class="fas fa-check" aria-hidden="true"></i>
1791
- </span>
1792
- </button>
1793
- </li>
1794
- <li role="presentation">
1795
- <button class="pf-c-select__menu-item" role="option">Down</button>
1796
- </li>
1797
- <li role="presentation">
1798
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
1799
- </li>
1800
- <li role="presentation">
1801
- <button
1802
- class="pf-c-select__menu-item"
1803
- role="option"
1804
- >Needs maintenance</button>
1805
- </li>
1806
- </ul>
1822
+ <ul
1823
+ class="pf-c-select__menu"
1824
+ role="listbox"
1825
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1826
+ hidden
1827
+ >
1828
+ <li role="presentation">
1829
+ <button class="pf-c-select__menu-item" role="option">Running</button>
1830
+ </li>
1831
+ <li role="presentation">
1832
+ <button
1833
+ class="pf-c-select__menu-item pf-m-selected"
1834
+ role="option"
1835
+ aria-selected="true"
1836
+ >
1837
+ Stopped
1838
+ <span class="pf-c-select__menu-item-icon">
1839
+ <i class="fas fa-check" aria-hidden="true"></i>
1840
+ </span>
1841
+ </button>
1842
+ </li>
1843
+ <li role="presentation">
1844
+ <button class="pf-c-select__menu-item" role="option">Down</button>
1845
+ </li>
1846
+ <li role="presentation">
1847
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
1848
+ </li>
1849
+ <li role="presentation">
1850
+ <button
1851
+ class="pf-c-select__menu-item"
1852
+ role="option"
1853
+ >Needs maintenance</button>
1854
+ </li>
1855
+ </ul>
1856
+ </div>
1807
1857
  </div>
1808
- <div class="pf-c-text-input-group">
1809
- <div class="pf-c-text-input-group__main pf-m-icon">
1810
- <span class="pf-c-text-input-group__text">
1811
- <span class="pf-c-text-input-group__icon">
1812
- <i class="fas fa-fw fa-search"></i>
1858
+ <div class="pf-c-input-group__item">
1859
+ <div class="pf-c-text-input-group" style="width: auto">
1860
+ <div class="pf-c-text-input-group__main pf-m-icon">
1861
+ <span class="pf-c-text-input-group__text">
1862
+ <span class="pf-c-text-input-group__icon">
1863
+ <i class="fas fa-fw fa-search"></i>
1864
+ </span>
1865
+ <input
1866
+ class="pf-c-text-input-group__text-input"
1867
+ type="search"
1868
+ placeholder="Filter by name"
1869
+ value
1870
+ aria-label="Type to filter"
1871
+ />
1813
1872
  </span>
1814
- <input
1815
- class="pf-c-text-input-group__text-input"
1816
- type="text"
1817
- value
1818
- placeholder="Filter by name"
1819
- aria-label="Type to filter"
1820
- />
1821
- </span>
1873
+ </div>
1822
1874
  </div>
1823
1875
  </div>
1824
1876
  </div>
@@ -2042,55 +2094,67 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2042
2094
  role="list"
2043
2095
  aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-status-chip-group-label"
2044
2096
  >
2045
- <li class="pf-c-chip-group__list-item">
2046
- <div class="pf-c-chip">
2047
- <span
2048
- class="pf-c-chip__text"
2049
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-one"
2050
- >Chip one</span>
2051
- <button
2052
- class="pf-c-button pf-m-plain"
2053
- type="button"
2054
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-one"
2055
- aria-label="Remove"
2056
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-one"
2057
- >
2058
- <i class="fas fa-times" aria-hidden="true"></i>
2059
- </button>
2097
+ <li class="pf-c-chip-group__list-item">
2098
+ <div class="pf-c-chip">
2099
+ <span class="pf-c-chip__content">
2100
+ <span
2101
+ class="pf-c-chip__text"
2102
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-one"
2103
+ >Chip one</span>
2104
+ </span>
2105
+ <span class="pf-c-chip__actions">
2106
+ <button
2107
+ class="pf-c-button pf-m-plain"
2108
+ type="button"
2109
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-one toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-one"
2110
+ aria-label="Remove"
2111
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-one"
2112
+ >
2113
+ <i class="fas fa-times" aria-hidden="true"></i>
2114
+ </button>
2115
+ </span>
2060
2116
  </div>
2061
2117
  </li>
2062
2118
  <li class="pf-c-chip-group__list-item">
2063
2119
  <div class="pf-c-chip">
2064
- <span
2065
- class="pf-c-chip__text"
2066
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-two"
2067
- >Chip two</span>
2068
- <button
2069
- class="pf-c-button pf-m-plain"
2070
- type="button"
2071
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-two"
2072
- aria-label="Remove"
2073
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-two"
2074
- >
2075
- <i class="fas fa-times" aria-hidden="true"></i>
2076
- </button>
2120
+ <span class="pf-c-chip__content">
2121
+ <span
2122
+ class="pf-c-chip__text"
2123
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-two"
2124
+ >Chip two</span>
2125
+ </span>
2126
+ <span class="pf-c-chip__actions">
2127
+ <button
2128
+ class="pf-c-button pf-m-plain"
2129
+ type="button"
2130
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-two toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-two"
2131
+ aria-label="Remove"
2132
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-two"
2133
+ >
2134
+ <i class="fas fa-times" aria-hidden="true"></i>
2135
+ </button>
2136
+ </span>
2077
2137
  </div>
2078
2138
  </li>
2079
2139
  <li class="pf-c-chip-group__list-item">
2080
2140
  <div class="pf-c-chip">
2081
- <span
2082
- class="pf-c-chip__text"
2083
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-three"
2084
- >Chip three</span>
2085
- <button
2086
- class="pf-c-button pf-m-plain"
2087
- type="button"
2088
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-three"
2089
- aria-label="Remove"
2090
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-three"
2091
- >
2092
- <i class="fas fa-times" aria-hidden="true"></i>
2093
- </button>
2141
+ <span class="pf-c-chip__content">
2142
+ <span
2143
+ class="pf-c-chip__text"
2144
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-three"
2145
+ >Chip three</span>
2146
+ </span>
2147
+ <span class="pf-c-chip__actions">
2148
+ <button
2149
+ class="pf-c-button pf-m-plain"
2150
+ type="button"
2151
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-three toolbar-selected-filters-toggle-group-expanded-example-chip-group-statuschip-three"
2152
+ aria-label="Remove"
2153
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-statusremove-chip-three"
2154
+ >
2155
+ <i class="fas fa-times" aria-hidden="true"></i>
2156
+ </button>
2157
+ </span>
2094
2158
  </div>
2095
2159
  </li>
2096
2160
  </ul>
@@ -2112,53 +2176,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2112
2176
  >
2113
2177
  <li class="pf-c-chip-group__list-item">
2114
2178
  <div class="pf-c-chip">
2115
- <span
2116
- class="pf-c-chip__text"
2117
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-one"
2118
- >Chip one</span>
2119
- <button
2120
- class="pf-c-button pf-m-plain"
2121
- type="button"
2122
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-one"
2123
- aria-label="Remove"
2124
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-one"
2125
- >
2126
- <i class="fas fa-times" aria-hidden="true"></i>
2127
- </button>
2179
+ <span class="pf-c-chip__content">
2180
+ <span
2181
+ class="pf-c-chip__text"
2182
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-one"
2183
+ >Chip one</span>
2184
+ </span>
2185
+ <span class="pf-c-chip__actions">
2186
+ <button
2187
+ class="pf-c-button pf-m-plain"
2188
+ type="button"
2189
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-one toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-one"
2190
+ aria-label="Remove"
2191
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-one"
2192
+ >
2193
+ <i class="fas fa-times" aria-hidden="true"></i>
2194
+ </button>
2195
+ </span>
2128
2196
  </div>
2129
2197
  </li>
2130
2198
  <li class="pf-c-chip-group__list-item">
2131
2199
  <div class="pf-c-chip">
2132
- <span
2133
- class="pf-c-chip__text"
2134
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-two"
2135
- >Chip two</span>
2136
- <button
2137
- class="pf-c-button pf-m-plain"
2138
- type="button"
2139
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-two"
2140
- aria-label="Remove"
2141
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-two"
2142
- >
2143
- <i class="fas fa-times" aria-hidden="true"></i>
2144
- </button>
2200
+ <span class="pf-c-chip__content">
2201
+ <span
2202
+ class="pf-c-chip__text"
2203
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-two"
2204
+ >Chip two</span>
2205
+ </span>
2206
+ <span class="pf-c-chip__actions">
2207
+ <button
2208
+ class="pf-c-button pf-m-plain"
2209
+ type="button"
2210
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-two toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-two"
2211
+ aria-label="Remove"
2212
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-two"
2213
+ >
2214
+ <i class="fas fa-times" aria-hidden="true"></i>
2215
+ </button>
2216
+ </span>
2145
2217
  </div>
2146
2218
  </li>
2147
2219
  <li class="pf-c-chip-group__list-item">
2148
2220
  <div class="pf-c-chip">
2149
- <span
2150
- class="pf-c-chip__text"
2151
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-three"
2152
- >Chip three</span>
2153
- <button
2154
- class="pf-c-button pf-m-plain"
2155
- type="button"
2156
- aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-three"
2157
- aria-label="Remove"
2158
- id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-three"
2159
- >
2160
- <i class="fas fa-times" aria-hidden="true"></i>
2161
- </button>
2221
+ <span class="pf-c-chip__content">
2222
+ <span
2223
+ class="pf-c-chip__text"
2224
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-three"
2225
+ >Chip three</span>
2226
+ </span>
2227
+ <span class="pf-c-chip__actions">
2228
+ <button
2229
+ class="pf-c-button pf-m-plain"
2230
+ type="button"
2231
+ aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-three toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskchip-three"
2232
+ aria-label="Remove"
2233
+ id="toolbar-selected-filters-toggle-group-expanded-example-chip-group-riskremove-chip-three"
2234
+ >
2235
+ <i class="fas fa-times" aria-hidden="true"></i>
2236
+ </button>
2237
+ </span>
2162
2238
  </div>
2163
2239
  </li>
2164
2240
  </ul>
@@ -2192,11 +2268,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2192
2268
  class="pf-c-dropdown__toggle-check"
2193
2269
  for="toolbar-selected-filters-example-bulk-select-toggle-check"
2194
2270
  >
2195
- <input
2196
- type="checkbox"
2197
- id="toolbar-selected-filters-example-bulk-select-toggle-check"
2198
- aria-label="Select all"
2199
- />
2271
+ <div class="pf-c-check pf-m-standalone">
2272
+ <input
2273
+ class="pf-c-check__input"
2274
+ type="checkbox"
2275
+ id="toolbar-selected-filters-example-bulk-select-toggle-check"
2276
+ aria-label="Select all"
2277
+ />
2278
+ </div>
2200
2279
  </label>
2201
2280
 
2202
2281
  <button
@@ -2542,53 +2621,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2542
2621
  >
2543
2622
  <li class="pf-c-chip-group__list-item">
2544
2623
  <div class="pf-c-chip">
2545
- <span
2546
- class="pf-c-chip__text"
2547
- id="toolbar-selected-filters-example-chip-group-statuschip-one"
2548
- >Chip one</span>
2549
- <button
2550
- class="pf-c-button pf-m-plain"
2551
- type="button"
2552
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-one toolbar-selected-filters-example-chip-group-statuschip-one"
2553
- aria-label="Remove"
2554
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-one"
2555
- >
2556
- <i class="fas fa-times" aria-hidden="true"></i>
2557
- </button>
2624
+ <span class="pf-c-chip__content">
2625
+ <span
2626
+ class="pf-c-chip__text"
2627
+ id="toolbar-selected-filters-example-chip-group-statuschip-one"
2628
+ >Chip one</span>
2629
+ </span>
2630
+ <span class="pf-c-chip__actions">
2631
+ <button
2632
+ class="pf-c-button pf-m-plain"
2633
+ type="button"
2634
+ aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-one toolbar-selected-filters-example-chip-group-statuschip-one"
2635
+ aria-label="Remove"
2636
+ id="toolbar-selected-filters-example-chip-group-statusremove-chip-one"
2637
+ >
2638
+ <i class="fas fa-times" aria-hidden="true"></i>
2639
+ </button>
2640
+ </span>
2558
2641
  </div>
2559
2642
  </li>
2560
2643
  <li class="pf-c-chip-group__list-item">
2561
2644
  <div class="pf-c-chip">
2562
- <span
2563
- class="pf-c-chip__text"
2564
- id="toolbar-selected-filters-example-chip-group-statuschip-two"
2565
- >Chip two</span>
2566
- <button
2567
- class="pf-c-button pf-m-plain"
2568
- type="button"
2569
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-two toolbar-selected-filters-example-chip-group-statuschip-two"
2570
- aria-label="Remove"
2571
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-two"
2572
- >
2573
- <i class="fas fa-times" aria-hidden="true"></i>
2574
- </button>
2645
+ <span class="pf-c-chip__content">
2646
+ <span
2647
+ class="pf-c-chip__text"
2648
+ id="toolbar-selected-filters-example-chip-group-statuschip-two"
2649
+ >Chip two</span>
2650
+ </span>
2651
+ <span class="pf-c-chip__actions">
2652
+ <button
2653
+ class="pf-c-button pf-m-plain"
2654
+ type="button"
2655
+ aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-two toolbar-selected-filters-example-chip-group-statuschip-two"
2656
+ aria-label="Remove"
2657
+ id="toolbar-selected-filters-example-chip-group-statusremove-chip-two"
2658
+ >
2659
+ <i class="fas fa-times" aria-hidden="true"></i>
2660
+ </button>
2661
+ </span>
2575
2662
  </div>
2576
2663
  </li>
2577
2664
  <li class="pf-c-chip-group__list-item">
2578
2665
  <div class="pf-c-chip">
2579
- <span
2580
- class="pf-c-chip__text"
2581
- id="toolbar-selected-filters-example-chip-group-statuschip-three"
2582
- >Chip three</span>
2583
- <button
2584
- class="pf-c-button pf-m-plain"
2585
- type="button"
2586
- aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-three toolbar-selected-filters-example-chip-group-statuschip-three"
2587
- aria-label="Remove"
2588
- id="toolbar-selected-filters-example-chip-group-statusremove-chip-three"
2589
- >
2590
- <i class="fas fa-times" aria-hidden="true"></i>
2591
- </button>
2666
+ <span class="pf-c-chip__content">
2667
+ <span
2668
+ class="pf-c-chip__text"
2669
+ id="toolbar-selected-filters-example-chip-group-statuschip-three"
2670
+ >Chip three</span>
2671
+ </span>
2672
+ <span class="pf-c-chip__actions">
2673
+ <button
2674
+ class="pf-c-button pf-m-plain"
2675
+ type="button"
2676
+ aria-labelledby="toolbar-selected-filters-example-chip-group-statusremove-chip-three toolbar-selected-filters-example-chip-group-statuschip-three"
2677
+ aria-label="Remove"
2678
+ id="toolbar-selected-filters-example-chip-group-statusremove-chip-three"
2679
+ >
2680
+ <i class="fas fa-times" aria-hidden="true"></i>
2681
+ </button>
2682
+ </span>
2592
2683
  </div>
2593
2684
  </li>
2594
2685
  </ul>
@@ -2610,53 +2701,65 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2610
2701
  >
2611
2702
  <li class="pf-c-chip-group__list-item">
2612
2703
  <div class="pf-c-chip">
2613
- <span
2614
- class="pf-c-chip__text"
2615
- id="toolbar-selected-filters-example-chip-group-riskchip-one"
2616
- >Chip one</span>
2617
- <button
2618
- class="pf-c-button pf-m-plain"
2619
- type="button"
2620
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-one toolbar-selected-filters-example-chip-group-riskchip-one"
2621
- aria-label="Remove"
2622
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-one"
2623
- >
2624
- <i class="fas fa-times" aria-hidden="true"></i>
2625
- </button>
2704
+ <span class="pf-c-chip__content">
2705
+ <span
2706
+ class="pf-c-chip__text"
2707
+ id="toolbar-selected-filters-example-chip-group-riskchip-one"
2708
+ >Chip one</span>
2709
+ </span>
2710
+ <span class="pf-c-chip__actions">
2711
+ <button
2712
+ class="pf-c-button pf-m-plain"
2713
+ type="button"
2714
+ aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-one toolbar-selected-filters-example-chip-group-riskchip-one"
2715
+ aria-label="Remove"
2716
+ id="toolbar-selected-filters-example-chip-group-riskremove-chip-one"
2717
+ >
2718
+ <i class="fas fa-times" aria-hidden="true"></i>
2719
+ </button>
2720
+ </span>
2626
2721
  </div>
2627
2722
  </li>
2628
2723
  <li class="pf-c-chip-group__list-item">
2629
2724
  <div class="pf-c-chip">
2630
- <span
2631
- class="pf-c-chip__text"
2632
- id="toolbar-selected-filters-example-chip-group-riskchip-two"
2633
- >Chip two</span>
2634
- <button
2635
- class="pf-c-button pf-m-plain"
2636
- type="button"
2637
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-two toolbar-selected-filters-example-chip-group-riskchip-two"
2638
- aria-label="Remove"
2639
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-two"
2640
- >
2641
- <i class="fas fa-times" aria-hidden="true"></i>
2642
- </button>
2725
+ <span class="pf-c-chip__content">
2726
+ <span
2727
+ class="pf-c-chip__text"
2728
+ id="toolbar-selected-filters-example-chip-group-riskchip-two"
2729
+ >Chip two</span>
2730
+ </span>
2731
+ <span class="pf-c-chip__actions">
2732
+ <button
2733
+ class="pf-c-button pf-m-plain"
2734
+ type="button"
2735
+ aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-two toolbar-selected-filters-example-chip-group-riskchip-two"
2736
+ aria-label="Remove"
2737
+ id="toolbar-selected-filters-example-chip-group-riskremove-chip-two"
2738
+ >
2739
+ <i class="fas fa-times" aria-hidden="true"></i>
2740
+ </button>
2741
+ </span>
2643
2742
  </div>
2644
2743
  </li>
2645
2744
  <li class="pf-c-chip-group__list-item">
2646
2745
  <div class="pf-c-chip">
2647
- <span
2648
- class="pf-c-chip__text"
2649
- id="toolbar-selected-filters-example-chip-group-riskchip-three"
2650
- >Chip three</span>
2651
- <button
2652
- class="pf-c-button pf-m-plain"
2653
- type="button"
2654
- aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-three toolbar-selected-filters-example-chip-group-riskchip-three"
2655
- aria-label="Remove"
2656
- id="toolbar-selected-filters-example-chip-group-riskremove-chip-three"
2657
- >
2658
- <i class="fas fa-times" aria-hidden="true"></i>
2659
- </button>
2746
+ <span class="pf-c-chip__content">
2747
+ <span
2748
+ class="pf-c-chip__text"
2749
+ id="toolbar-selected-filters-example-chip-group-riskchip-three"
2750
+ >Chip three</span>
2751
+ </span>
2752
+ <span class="pf-c-chip__actions">
2753
+ <button
2754
+ class="pf-c-button pf-m-plain"
2755
+ type="button"
2756
+ aria-labelledby="toolbar-selected-filters-example-chip-group-riskremove-chip-three toolbar-selected-filters-example-chip-group-riskchip-three"
2757
+ aria-label="Remove"
2758
+ id="toolbar-selected-filters-example-chip-group-riskremove-chip-three"
2759
+ >
2760
+ <i class="fas fa-times" aria-hidden="true"></i>
2761
+ </button>
2762
+ </span>
2660
2763
  </div>
2661
2764
  </li>
2662
2765
  </ul>
@@ -3104,11 +3207,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3104
3207
  class="pf-c-dropdown__toggle-check"
3105
3208
  for="toolbar-stacked-example-bulk-select-toggle-check"
3106
3209
  >
3107
- <input
3108
- type="checkbox"
3109
- id="toolbar-stacked-example-bulk-select-toggle-check"
3110
- aria-label="Select all"
3111
- />
3210
+ <div class="pf-c-check pf-m-standalone">
3211
+ <input
3212
+ class="pf-c-check__input"
3213
+ type="checkbox"
3214
+ id="toolbar-stacked-example-bulk-select-toggle-check"
3215
+ aria-label="Select all"
3216
+ />
3217
+ </div>
3112
3218
  </label>
3113
3219
 
3114
3220
  <button
@@ -3617,11 +3723,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3617
3723
  class="pf-c-dropdown__toggle-check"
3618
3724
  for="toolbar-stacked-collapsed-example-bulk-select-toggle-check"
3619
3725
  >
3620
- <input
3621
- type="checkbox"
3622
- id="toolbar-stacked-collapsed-example-bulk-select-toggle-check"
3623
- aria-label="Select all"
3624
- />
3726
+ <div class="pf-c-check pf-m-standalone">
3727
+ <input
3728
+ class="pf-c-check__input"
3729
+ type="checkbox"
3730
+ id="toolbar-stacked-collapsed-example-bulk-select-toggle-check"
3731
+ aria-label="Select all"
3732
+ />
3733
+ </div>
3625
3734
  </label>
3626
3735
 
3627
3736
  <button
@@ -3765,11 +3874,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3765
3874
  class="pf-c-dropdown__toggle-check"
3766
3875
  for="toolbar-expanded-elements-example-bulk-select-toggle-check"
3767
3876
  >
3768
- <input
3769
- type="checkbox"
3770
- id="toolbar-expanded-elements-example-bulk-select-toggle-check"
3771
- aria-label="Select all"
3772
- />
3877
+ <div class="pf-c-check pf-m-standalone">
3878
+ <input
3879
+ class="pf-c-check__input"
3880
+ type="checkbox"
3881
+ id="toolbar-expanded-elements-example-bulk-select-toggle-check"
3882
+ aria-label="Select all"
3883
+ />
3884
+ </div>
3773
3885
  </label>
3774
3886
 
3775
3887
  <button
@@ -3812,81 +3924,87 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3812
3924
  </div>
3813
3925
  <div class="pf-c-toolbar__item pf-m-search-filter">
3814
3926
  <div class="pf-c-input-group" aria-label="search filter" role="group">
3815
- <div class="pf-c-select" style="width: 175px">
3816
- <span
3817
- id="toolbar-expanded-elements-example-select-name-label"
3818
- hidden
3819
- >Choose one</span>
3927
+ <div class="pf-c-input-group__item pf-m-fill">
3928
+ <div class="pf-c-select" style="width: 124px">
3929
+ <span
3930
+ id="toolbar-expanded-elements-example-select-name-label"
3931
+ hidden
3932
+ >Choose one</span>
3820
3933
 
3821
- <button
3822
- class="pf-c-select__toggle"
3823
- type="button"
3824
- id="toolbar-expanded-elements-example-select-name-toggle"
3825
- aria-haspopup="true"
3826
- aria-expanded="false"
3827
- aria-labelledby="toolbar-expanded-elements-example-select-name-label toolbar-expanded-elements-example-select-name-toggle"
3828
- >
3829
- <div class="pf-c-select__toggle-wrapper">
3830
- <span class="pf-c-select__toggle-icon">
3831
- <i class="fas fa-filter" aria-hidden="true"></i>
3934
+ <button
3935
+ class="pf-c-select__toggle"
3936
+ type="button"
3937
+ id="toolbar-expanded-elements-example-select-name-toggle"
3938
+ aria-haspopup="true"
3939
+ aria-expanded="false"
3940
+ aria-labelledby="toolbar-expanded-elements-example-select-name-label toolbar-expanded-elements-example-select-name-toggle"
3941
+ >
3942
+ <div class="pf-c-select__toggle-wrapper">
3943
+ <span class="pf-c-select__toggle-icon">
3944
+ <i class="fas fa-filter" aria-hidden="true"></i>
3945
+ </span>
3946
+ <span class="pf-c-select__toggle-text">Name</span>
3947
+ </div>
3948
+ <span class="pf-c-select__toggle-arrow">
3949
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3832
3950
  </span>
3833
- <span class="pf-c-select__toggle-text">Name</span>
3834
- </div>
3835
- <span class="pf-c-select__toggle-arrow">
3836
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3837
- </span>
3838
- </button>
3951
+ </button>
3839
3952
 
3840
- <ul
3841
- class="pf-c-select__menu"
3842
- role="listbox"
3843
- aria-labelledby="toolbar-expanded-elements-example-select-name-label"
3844
- hidden
3845
- style="width: 175px"
3846
- >
3847
- <li role="presentation">
3848
- <button class="pf-c-select__menu-item" role="option">Running</button>
3849
- </li>
3850
- <li role="presentation">
3851
- <button
3852
- class="pf-c-select__menu-item pf-m-selected"
3853
- role="option"
3854
- aria-selected="true"
3855
- >
3856
- Stopped
3857
- <span class="pf-c-select__menu-item-icon">
3858
- <i class="fas fa-check" aria-hidden="true"></i>
3859
- </span>
3860
- </button>
3861
- </li>
3862
- <li role="presentation">
3863
- <button class="pf-c-select__menu-item" role="option">Down</button>
3864
- </li>
3865
- <li role="presentation">
3866
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
3867
- </li>
3868
- <li role="presentation">
3869
- <button
3870
- class="pf-c-select__menu-item"
3871
- role="option"
3872
- >Needs maintenance</button>
3873
- </li>
3874
- </ul>
3953
+ <ul
3954
+ class="pf-c-select__menu"
3955
+ role="listbox"
3956
+ aria-labelledby="toolbar-expanded-elements-example-select-name-label"
3957
+ hidden
3958
+ >
3959
+ <li role="presentation">
3960
+ <button class="pf-c-select__menu-item" role="option">Running</button>
3961
+ </li>
3962
+ <li role="presentation">
3963
+ <button
3964
+ class="pf-c-select__menu-item pf-m-selected"
3965
+ role="option"
3966
+ aria-selected="true"
3967
+ >
3968
+ Stopped
3969
+ <span class="pf-c-select__menu-item-icon">
3970
+ <i class="fas fa-check" aria-hidden="true"></i>
3971
+ </span>
3972
+ </button>
3973
+ </li>
3974
+ <li role="presentation">
3975
+ <button class="pf-c-select__menu-item" role="option">Down</button>
3976
+ </li>
3977
+ <li role="presentation">
3978
+ <button
3979
+ class="pf-c-select__menu-item"
3980
+ role="option"
3981
+ >Degraded</button>
3982
+ </li>
3983
+ <li role="presentation">
3984
+ <button
3985
+ class="pf-c-select__menu-item"
3986
+ role="option"
3987
+ >Needs maintenance</button>
3988
+ </li>
3989
+ </ul>
3990
+ </div>
3875
3991
  </div>
3876
- <div class="pf-c-text-input-group">
3877
- <div class="pf-c-text-input-group__main pf-m-icon">
3878
- <span class="pf-c-text-input-group__text">
3879
- <span class="pf-c-text-input-group__icon">
3880
- <i class="fas fa-fw fa-search"></i>
3992
+ <div class="pf-c-input-group__item">
3993
+ <div class="pf-c-text-input-group" style="width: auto">
3994
+ <div class="pf-c-text-input-group__main pf-m-icon">
3995
+ <span class="pf-c-text-input-group__text">
3996
+ <span class="pf-c-text-input-group__icon">
3997
+ <i class="fas fa-fw fa-search"></i>
3998
+ </span>
3999
+ <input
4000
+ class="pf-c-text-input-group__text-input"
4001
+ type="search"
4002
+ placeholder="Filter by name"
4003
+ value
4004
+ aria-label="Type to filter"
4005
+ />
3881
4006
  </span>
3882
- <input
3883
- class="pf-c-text-input-group__text-input"
3884
- type="text"
3885
- value
3886
- placeholder="Filter by name"
3887
- aria-label="Type to filter"
3888
- />
3889
- </span>
4007
+ </div>
3890
4008
  </div>
3891
4009
  </div>
3892
4010
  </div>
@@ -4193,61 +4311,65 @@ As the toolbar component is a hybrid layout and component, some of its elements
4193
4311
 
4194
4312
  ### Usage
4195
4313
 
4196
- | Class | Applied to | Outcome |
4197
- | ------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
4198
- | `.pf-c-toolbar` | `<div>` | Initiates the toolbar component. **Required** |
4199
- | `.pf-c-toolbar__item` | `<div>` | Initiates a toolbar item. **Required** |
4200
- | `.pf-c-toolbar__group` | `<div>` | Initiates a toolbar group. |
4201
- | `.pf-c-toolbar__content` | `<div>` | Initiates a toolbar content container. **Required** |
4202
- | `.pf-c-toolbar__content-section` | `<div>` | Initiates a toolbar content section. This is used to separate static elements from dynamic elements within a content container. There should be no more than one `.pf-c-toolbar__content-section` per `.pf-c-toolbar__content` **Required** |
4203
- | `.pf-c-toolbar__expandable-content` | `<div>` | Initiates a toolbar expandable content section. |
4204
- | `.pf-m-sticky` | `.pf-c-toolbar` | Modifies toolbar component to be sticky to the top of its container. |
4205
- | `.pf-m-full-height` | `.pf-c-toolbar` | Modifies toolbar component to full height of its container and removes vertical padding. |
4206
- | `.pf-m-static` | `.pf-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. |
4207
- | `.pf-m-expanded` | `.pf-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
4208
- | `.pf-m-bulk-select` | `.pf-c-toolbar__item` | Initiates bulk select spacing. |
4209
- | `.pf-m-overflow-menu` | `.pf-c-toolbar__item` | Initiates overflow menu spacing. |
4210
- | `.pf-m-pagination` | `.pf-c-toolbar__item` | Initiates pagination spacing and margin. |
4211
- | `.pf-m-search-filter` | `.pf-c-toolbar__item` | Initiates search filter spacing. |
4212
- | `.pf-m-chip-group` | `.pf-c-toolbar__item` | Initiates chip group spacing. |
4213
- | `.pf-m-expand-all` | `.pf-c-toolbar__item` | Initiates an item for an expand all button. |
4214
- | `.pf-m-expanded` | `.pf-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
4215
- | `.pf-m-button-group` | `.pf-c-toolbar__group` | Initiates button group spacing. |
4216
- | `.pf-m-icon-button-group` | `.pf-c-toolbar__group` | Initiates icon button group spacing. |
4217
- | `.pf-m-filter-group` | `.pf-c-toolbar__group` | Initiates filter group spacing. |
4218
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4219
- | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4220
- | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4221
- | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4222
- | `.pf-m-label` | `.pf-c-toolbar__item` | Modifies toolbar item to label. |
4223
- | `.pf-m-chip-container` | `.pf-c-toolbar__content`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
4224
- | `.pf-m-overflow-container` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
4225
- | `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
4226
- | `.pf-m-wrap` | `.pf-c-toolbar`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element to wrap. |
4227
- | `.pf-m-nowrap` | `.pf-c-toolbar`, `.pf-c-toolbar__group` | Modifies the toolbar element to nowrap. |
4314
+ | Class | Applied to | Outcome |
4315
+ | -- | -- | -- |
4316
+ | `.pf-c-toolbar` | `<div>` | Initiates the toolbar component. **Required** |
4317
+ | `.pf-c-toolbar__item` | `<div>` | Initiates a toolbar item. **Required** |
4318
+ | `.pf-c-toolbar__group` | `<div>` | Initiates a toolbar group. |
4319
+ | `.pf-c-toolbar__content` | `<div>` | Initiates a toolbar content container. **Required** |
4320
+ | `.pf-c-toolbar__content-section` | `<div>` | Initiates a toolbar content section. This is used to separate static elements from dynamic elements within a content container. There should be no more than one `.pf-c-toolbar__content-section` per `.pf-c-toolbar__content` **Required** |
4321
+ | `.pf-c-toolbar__expandable-content` | `<div>` | Initiates a toolbar expandable content section. |
4322
+ | `.pf-m-sticky` | `.pf-c-toolbar` | Modifies toolbar component to be sticky to the top of its container. |
4323
+ | `.pf-m-full-height` | `.pf-c-toolbar` | Modifies toolbar component to full height of its container and removes vertical padding. |
4324
+ | `.pf-m-static` | `.pf-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. |
4325
+ | `.pf-m-expanded` | `.pf-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
4326
+ | `.pf-m-bulk-select` | `.pf-c-toolbar__item` | Initiates bulk select spacing. |
4327
+ | `.pf-m-overflow-menu` | `.pf-c-toolbar__item` | Initiates overflow menu spacing. |
4328
+ | `.pf-m-pagination` | `.pf-c-toolbar__item` | Initiates pagination spacing and margin. |
4329
+ | `.pf-m-search-filter` | `.pf-c-toolbar__item` | Initiates search filter spacing. |
4330
+ | `.pf-m-chip-group` | `.pf-c-toolbar__item` | Initiates chip group spacing. |
4331
+ | `.pf-m-expand-all` | `.pf-c-toolbar__item` | Initiates an item for an expand all button. |
4332
+ | `.pf-m-expanded` | `.pf-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
4333
+ | `.pf-m-button-group` | `.pf-c-toolbar__group` | Initiates button group spacing. |
4334
+ | `.pf-m-icon-button-group` | `.pf-c-toolbar__group` | Initiates icon button group spacing. |
4335
+ | `.pf-m-filter-group` | `.pf-c-toolbar__group` | Initiates filter group spacing. |
4336
+ | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4337
+ | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4338
+ | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4339
+ | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4340
+ | `.pf-m-align-items-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
4341
+ | `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
4342
+ | `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
4343
+ | `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
4344
+ | `.pf-m-label` | `.pf-c-toolbar__item` | Modifies toolbar item to label. |
4345
+ | `.pf-m-chip-container` | `.pf-c-toolbar__content`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
4346
+ | `.pf-m-overflow-container` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
4347
+ | `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
4348
+ | `.pf-m-wrap` | `.pf-c-toolbar`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element to wrap. |
4349
+ | `.pf-m-nowrap` | `.pf-c-toolbar`, `.pf-c-toolbar__group` | Modifies the toolbar element to nowrap. |
4228
4350
 
4229
4351
  ### Accessibility
4230
4352
 
4231
- | Attribute | Applied to | Outcome |
4232
- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
4233
- | `hidden` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group`, `.pf-c-toolbar__toggle`, `.pf-c-toolbar__expandable-content` | Indicates that the toolbar element is hidden. **Required** |
4234
- | `aria-expanded="true"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates that the expandable content is visible. **Required** |
4235
- | `aria-expanded="false"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates the the expandable content is hidden. **Required** |
4236
- | `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
4237
- | `id="[expandable-content_id]"` | `.pf-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
4238
- | `aria-label="Expand all"` | `.pf-c-toolbar__item.pf-m-expand-all` | Provides an accessible label for the expand all item button. **Required** |
4239
- | `aria-label="Collapse all"` | `.pf-c-toolbar__item.pf-m-expand-all.pf-m-expanded` | Provides an accessible label for the expand all item button. **Required** |
4353
+ | Attribute | Applied to | Outcome |
4354
+ | -- | -- | -- |
4355
+ | `hidden` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group`, `.pf-c-toolbar__toggle`, `.pf-c-toolbar__expandable-content` | Indicates that the toolbar element is hidden. **Required** |
4356
+ | `aria-expanded="true"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates that the expandable content is visible. **Required** |
4357
+ | `aria-expanded="false"` | `.pf-c-toolbar__toggle > .pf-c-button` | Indicates the the expandable content is hidden. **Required** |
4358
+ | `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button` | Identifies the expanded content controlled by the toggle button. **Required** |
4359
+ | `id="[expandable-content_id]"` | `.pf-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
4360
+ | `aria-label="Expand all"` | `.pf-c-toolbar__item.pf-m-expand-all` | Provides an accessible label for the expand all item button. **Required** |
4361
+ | `aria-label="Collapse all"` | `.pf-c-toolbar__item.pf-m-expand-all.pf-m-expanded` | Provides an accessible label for the expand all item button. **Required** |
4240
4362
 
4241
4363
  ### Toggle group usage
4242
4364
 
4243
- | Class | Applied to | Outcome |
4244
- | ------------------------------ | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
4245
- | `.pf-m-toggle-group` | `.pf-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. |
4365
+ | Class | Applied to | Outcome |
4366
+ | -- | -- | -- |
4367
+ | `.pf-m-toggle-group` | `.pf-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. |
4246
4368
  | `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-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. |
4247
4369
 
4248
4370
  ### Spacer system
4249
4371
 
4250
- | Class | Applied to | Outcome |
4251
- | ------------------------------------------------------------ | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
4252
- | `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4253
- | `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4372
+ | Class | Applied to | Outcome |
4373
+ | -- | -- | -- |
4374
+ | `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4375
+ | `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |