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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (334) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +884 -871
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +311 -287
  25. package/base/tokens/_tokens-default.scss +425 -329
  26. package/base/tokens/_tokens-font.scss +29 -36
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +19 -16
  52. package/components/Breadcrumb/breadcrumb.scss +18 -16
  53. package/components/Button/button.css +419 -353
  54. package/components/Button/button.scss +476 -476
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/DualListSelector/dual-list-selector.css +56 -48
  84. package/components/DualListSelector/dual-list-selector.scss +57 -50
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +68 -114
  92. package/components/Form/form.scss +65 -126
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +380 -355
  110. package/components/Label/label.scss +434 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +70 -97
  114. package/components/Login/login.scss +56 -64
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +3 -0
  118. package/components/Menu/menu.scss +7 -3
  119. package/components/MenuToggle/menu-toggle.css +8 -8
  120. package/components/MenuToggle/menu-toggle.scss +8 -10
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +56 -81
  128. package/components/NotificationBadge/notification-badge.scss +60 -97
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +35 -52
  152. package/components/SimpleList/simple-list.scss +41 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +29 -45
  166. package/components/Table/table-grid.scss +40 -53
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +76 -74
  170. package/components/Table/table-tree-view.scss +44 -39
  171. package/components/Table/table.css +67 -93
  172. package/components/Table/table.scss +83 -105
  173. package/components/Tabs/tabs.css +143 -175
  174. package/components/Tabs/tabs.scss +159 -217
  175. package/components/Tile/tile.css +40 -81
  176. package/components/Tile/tile.scss +38 -84
  177. package/components/Timestamp/timestamp.css +12 -9
  178. package/components/Timestamp/timestamp.scss +11 -10
  179. package/components/Title/title.css +70 -19
  180. package/components/Title/title.scss +90 -20
  181. package/components/ToggleGroup/toggle-group.css +54 -48
  182. package/components/ToggleGroup/toggle-group.scss +62 -50
  183. package/components/Toolbar/toolbar.css +2527 -1031
  184. package/components/Toolbar/toolbar.scss +233 -520
  185. package/components/Tooltip/tooltip.css +16 -18
  186. package/components/Tooltip/tooltip.scss +20 -24
  187. package/components/TreeView/tree-view.css +76 -97
  188. package/components/TreeView/tree-view.scss +82 -113
  189. package/components/Truncate/truncate.css +4 -0
  190. package/components/Truncate/truncate.scss +3 -0
  191. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  192. package/docs/components/Accordion/examples/Accordion.md +614 -416
  193. package/docs/components/ActionList/examples/ActionList.md +73 -22
  194. package/docs/components/Alert/examples/Alert.md +3 -3
  195. package/docs/components/Avatar/examples/Avatar.md +5 -19
  196. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  197. package/docs/components/Badge/examples/Badge.md +21 -0
  198. package/docs/components/Banner/examples/Banner.md +48 -25
  199. package/docs/components/Brand/examples/Brand.css +12 -0
  200. package/docs/components/Brand/examples/Brand.md +51 -32
  201. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  202. package/docs/components/Button/examples/Button.css +4 -0
  203. package/docs/components/Button/examples/Button.md +1419 -93
  204. package/docs/components/CalendarMonth/examples/CalendarMonth.md +48 -224
  205. package/docs/components/Card/examples/Card.md +550 -133
  206. package/docs/components/Check/examples/Check.md +1 -0
  207. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  208. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  209. package/docs/components/Content/examples/Content.md +5 -5
  210. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  211. package/docs/components/Divider/examples/Divider.css +3 -1
  212. package/docs/components/Divider/examples/Divider.md +30 -5
  213. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  214. package/docs/components/Drawer/examples/Drawer.md +294 -256
  215. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  216. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  217. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  218. package/docs/components/Form/examples/Form.md +134 -89
  219. package/docs/components/Icon/examples/Icon.md +82 -11
  220. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  221. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  222. package/docs/components/Label/examples/Label.css +4 -0
  223. package/docs/components/Label/examples/Label.md +3090 -703
  224. package/docs/components/LogViewer/examples/LogViewer.md +180 -180
  225. package/docs/components/Login/examples/Login.md +10 -5
  226. package/docs/components/Masthead/examples/masthead.md +443 -65
  227. package/docs/components/Menu/examples/Menu.md +507 -473
  228. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  229. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  230. package/docs/components/Nav/examples/Navigation.css +1 -23
  231. package/docs/components/Nav/examples/Navigation.md +209 -356
  232. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  233. package/docs/components/Page/examples/Page.css +0 -8
  234. package/docs/components/Page/examples/Page.md +22 -21
  235. package/docs/components/Pagination/examples/Pagination.md +663 -637
  236. package/docs/components/Panel/examples/Panel.md +12 -0
  237. package/docs/components/Popover/examples/Popover.md +1 -1
  238. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  239. package/docs/components/Radio/examples/Radio.md +1 -1
  240. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  241. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  242. package/docs/components/TabContent/examples/TabContent.md +10 -10
  243. package/docs/components/Table/examples/Table.md +8 -8
  244. package/docs/components/Tabs/examples/Tabs.css +1 -1
  245. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  246. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  247. package/docs/components/Tile/examples/Tile.md +264 -144
  248. package/docs/components/Title/examples/Title.md +18 -0
  249. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  250. package/docs/components/Toolbar/examples/Toolbar.md +985 -3355
  251. package/docs/components/TreeView/examples/TreeView.md +7 -57
  252. package/docs/components/Truncate/examples/Truncate.css +2 -2
  253. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  254. package/docs/demos/Alert/examples/Alert.md +330 -87
  255. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  256. package/docs/demos/Banner/examples/Banner.md +211 -60
  257. package/docs/demos/Card/examples/Card.md +2 -2
  258. package/docs/demos/CardView/examples/CardView.md +241 -187
  259. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  260. package/docs/demos/Dashboard/examples/Dashboard.md +102 -29
  261. package/docs/demos/DataList/examples/DataList.md +999 -938
  262. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  263. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  264. package/docs/demos/Form/examples/BasicForms.md +138 -84
  265. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  266. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  267. package/docs/demos/Modal/examples/Modal.md +645 -198
  268. package/docs/demos/Nav/examples/Nav.md +691 -902
  269. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  270. package/docs/demos/Page/examples/Page.md +942 -273
  271. package/docs/demos/Page/examples/Penta.md +66 -26
  272. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  273. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  274. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1183 -832
  275. package/docs/demos/Skeleton/examples/Skeleton.md +102 -29
  276. package/docs/demos/Table/examples/Table.md +3811 -3456
  277. package/docs/demos/Tabs/examples/Tabs.md +636 -194
  278. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  279. package/docs/demos/Toolbar/examples/Toolbar.md +1316 -1478
  280. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  281. package/docs/layouts/Flex/examples/Flex.md +11 -11
  282. package/package.json +32 -32
  283. package/patternfly-base-no-globals-theme-dark-unversioned.css +897 -880
  284. package/patternfly-base-no-globals.css +897 -880
  285. package/patternfly-base-theme-dark-unversioned.css +890 -872
  286. package/patternfly-base.css +890 -872
  287. package/patternfly-no-globals.css +8107 -8027
  288. package/patternfly-theme-dark-unversioned.css +8111 -8030
  289. package/patternfly.css +8111 -8030
  290. package/patternfly.min.css +1 -1
  291. package/patternfly.min.css.map +1 -1
  292. package/sass-utilities/mixins.scss +18 -0
  293. package/base/themes/dark/_variables.scss +0 -102
  294. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  295. package/components/Accordion/themes/dark/accordion.scss +0 -9
  296. package/components/Alert/themes/dark/alert.scss +0 -17
  297. package/components/Badge/themes/dark/badge.scss +0 -9
  298. package/components/Banner/themes/dark/banner.scss +0 -14
  299. package/components/Button/themes/dark/button.scss +0 -51
  300. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  301. package/components/Card/themes/dark/card.scss +0 -20
  302. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  303. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  304. package/components/DataList/themes/dark/data-list.scss +0 -10
  305. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  306. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  307. package/components/Drawer/themes/dark/drawer.scss +0 -13
  308. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  309. package/components/Form/themes/dark/form.scss +0 -7
  310. package/components/FormControl/themes/dark/form-control.scss +0 -24
  311. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  312. package/components/Hint/themes/dark/hint.scss +0 -8
  313. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  314. package/components/Label/themes/dark/label.scss +0 -53
  315. package/components/Login/themes/dark/login.scss +0 -12
  316. package/components/Masthead/themes/dark/masthead.scss +0 -14
  317. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  318. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  319. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  320. package/components/Page/themes/dark/page.scss +0 -69
  321. package/components/Pagination/themes/dark/pagination.scss +0 -7
  322. package/components/Panel/themes/dark/panel.scss +0 -7
  323. package/components/Popover/themes/dark/popover.scss +0 -11
  324. package/components/Progress/themes/dark/progress.scss +0 -9
  325. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  326. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  327. package/components/Switch/themes/dark/switch.scss +0 -11
  328. package/components/Tabs/themes/dark/tabs.scss +0 -10
  329. package/components/Tile/themes/dark/tile.scss +0 -10
  330. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  331. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  332. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  333. package/docs/components/Avatar/examples/Avatar.css +0 -3
  334. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -15,12 +15,12 @@ section: components
15
15
  <div class="pf-v5-c-toolbar__content">
16
16
  <div class="pf-v5-c-toolbar__content-section">
17
17
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
18
- <div class="pf-v5-c-toolbar__toggle">
18
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
19
19
  <button
20
- class="pf-v5-c-button pf-m-plain"
20
+ class="pf-v5-c-menu-toggle pf-m-plain"
21
21
  type="button"
22
- aria-label="Show filters"
23
22
  aria-expanded="false"
23
+ aria-label="Show filters"
24
24
  aria-controls="toolbar-attribute-value-search-filter-desktop-example-expandable-content"
25
25
  >
26
26
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -33,72 +33,22 @@ section: components
33
33
  role="group"
34
34
  >
35
35
  <div class="pf-v5-c-input-group__item">
36
- <div class="pf-v5-c-select" style="width: 124px">
37
- <span
38
- id="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
39
- hidden
40
- >Choose one</span>
41
-
42
- <button
43
- class="pf-v5-c-select__toggle"
44
- type="button"
45
- id="toolbar-attribute-value-search-filter-desktop-example-select-name-toggle"
46
- aria-haspopup="true"
47
- aria-expanded="false"
48
- aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label toolbar-attribute-value-search-filter-desktop-example-select-name-toggle"
49
- >
50
- <div class="pf-v5-c-select__toggle-wrapper">
51
- <span class="pf-v5-c-select__toggle-icon">
52
- <i class="fas fa-filter" aria-hidden="true"></i>
53
- </span>
54
- <span class="pf-v5-c-select__toggle-text">Name</span>
55
- </div>
56
- <span class="pf-v5-c-select__toggle-arrow">
57
- <i class="fas fa-caret-down" aria-hidden="true"></i>
36
+ <button
37
+ class="pf-v5-c-menu-toggle"
38
+ type="button"
39
+ aria-expanded="false"
40
+ id="toolbar-attribute-value-search-filter-desktop-example-search-filter-menu"
41
+ >
42
+ <span class="pf-v5-c-menu-toggle__icon">
43
+ <i class="fas fa-filter" aria-hidden="true"></i>
44
+ </span>
45
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
46
+ <span class="pf-v5-c-menu-toggle__controls">
47
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
48
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
58
49
  </span>
59
- </button>
60
-
61
- <ul
62
- class="pf-v5-c-select__menu"
63
- role="listbox"
64
- aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
65
- hidden
66
- >
67
- <li role="presentation">
68
- <button
69
- class="pf-v5-c-select__menu-item"
70
- role="option"
71
- >Running</button>
72
- </li>
73
- <li role="presentation">
74
- <button
75
- class="pf-v5-c-select__menu-item pf-m-selected"
76
- role="option"
77
- aria-selected="true"
78
- >
79
- Stopped
80
- <span class="pf-v5-c-select__menu-item-icon">
81
- <i class="fas fa-check" aria-hidden="true"></i>
82
- </span>
83
- </button>
84
- </li>
85
- <li role="presentation">
86
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
87
- </li>
88
- <li role="presentation">
89
- <button
90
- class="pf-v5-c-select__menu-item"
91
- role="option"
92
- >Degraded</button>
93
- </li>
94
- <li role="presentation">
95
- <button
96
- class="pf-v5-c-select__menu-item"
97
- role="option"
98
- >Needs maintenance</button>
99
- </li>
100
- </ul>
101
- </div>
50
+ </span>
51
+ </button>
102
52
  </div>
103
53
  <div class="pf-v5-c-input-group__item pf-m-fill">
104
54
  <div class="pf-v5-c-text-input-group">
@@ -178,55 +128,57 @@ section: components
178
128
  <div
179
129
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
180
130
  >
181
- <div class="pf-v5-c-options-menu">
182
- <button
183
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
184
- type="button"
185
- id="toolbar-attribute-value-search-filter-desktop-example-pagination-options-menu-toggle"
186
- aria-haspopup="listbox"
187
- aria-expanded="false"
188
- >
189
- <span class="pf-v5-c-options-menu__toggle-text">
190
- <b>1 - 10</b>&nbsp;of&nbsp;
191
- <b>36</b>
192
- </span>
193
- <div class="pf-v5-c-options-menu__toggle-icon">
194
- <i class="fas fa-caret-down" aria-hidden="true"></i>
195
- </div>
196
- </button>
197
- <ul
198
- class="pf-v5-c-options-menu__menu"
199
- role="menu"
200
- aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-pagination-options-menu-toggle"
201
- hidden
202
- >
203
- <li role="none">
204
- <button
205
- class="pf-v5-c-options-menu__menu-item"
206
- type="button"
207
- role="menuitem"
208
- >5 per page</button>
209
- </li>
210
- <li role="none">
211
- <button
212
- class="pf-v5-c-options-menu__menu-item"
213
- type="button"
214
- role="menuitem"
215
- >
216
- 10 per page
217
- <div class="pf-v5-c-options-menu__menu-item-icon">
218
- <i class="fas fa-check" aria-hidden="true"></i>
219
- </div>
220
- </button>
221
- </li>
222
- <li role="none">
223
- <button
224
- class="pf-v5-c-options-menu__menu-item"
225
- type="button"
226
- role="menuitem"
227
- >20 per page</button>
228
- </li>
229
- </ul>
131
+ <div class="pf-v5-c-pagination__page-menu">
132
+ <div class="pf-v5-c-options-menu">
133
+ <button
134
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
135
+ type="button"
136
+ id="toolbar-attribute-value-search-filter-desktop-example-pagination-options-menu-toggle"
137
+ aria-haspopup="listbox"
138
+ aria-expanded="false"
139
+ >
140
+ <span class="pf-v5-c-options-menu__toggle-text">
141
+ <b>1 - 10</b>&nbsp;of&nbsp;
142
+ <b>36</b>
143
+ </span>
144
+ <div class="pf-v5-c-options-menu__toggle-icon">
145
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
146
+ </div>
147
+ </button>
148
+ <ul
149
+ class="pf-v5-c-options-menu__menu"
150
+ role="menu"
151
+ aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-pagination-options-menu-toggle"
152
+ hidden
153
+ >
154
+ <li role="none">
155
+ <button
156
+ class="pf-v5-c-options-menu__menu-item"
157
+ type="button"
158
+ role="menuitem"
159
+ >5 per page</button>
160
+ </li>
161
+ <li role="none">
162
+ <button
163
+ class="pf-v5-c-options-menu__menu-item"
164
+ type="button"
165
+ role="menuitem"
166
+ >
167
+ 10 per page
168
+ <div class="pf-v5-c-options-menu__menu-item-icon">
169
+ <i class="fas fa-check" aria-hidden="true"></i>
170
+ </div>
171
+ </button>
172
+ </li>
173
+ <li role="none">
174
+ <button
175
+ class="pf-v5-c-options-menu__menu-item"
176
+ type="button"
177
+ role="menuitem"
178
+ >20 per page</button>
179
+ </li>
180
+ </ul>
181
+ </div>
230
182
  </div>
231
183
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
232
184
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -288,23 +240,117 @@ section: components
288
240
  </span>
289
241
  <div class="pf-v5-c-masthead__main">
290
242
  <a class="pf-v5-c-masthead__brand" href="#">
291
- <img
292
- class="pf-v5-c-brand"
293
- src="/assets/images/pf-logo.svg"
294
- alt="PatternFly logo"
295
- style="--pf-v5-c-brand--Height:36px"
296
- />
243
+ <svg height="40px" viewBox="0 0 679 158">
244
+ <title>PF-HorizontalLogo-Color</title>
245
+ <defs>
246
+ <linearGradient
247
+ x1="68%"
248
+ y1="2.25860997e-13%"
249
+ x2="32%"
250
+ y2="100%"
251
+ id="linearGradient-toolbar-pagination-management-example-masthead"
252
+ >
253
+ <stop stop-color="#2B9AF3" offset="0%" />
254
+ <stop
255
+ stop-color="#73BCF7"
256
+ stop-opacity="0.502212631"
257
+ offset="100%"
258
+ />
259
+ </linearGradient>
260
+ </defs>
261
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
262
+ <g
263
+ transform="translate(206.000000, 45.750000)"
264
+ fill="var(--pf-t--global--text--color--regular)"
265
+ fill-rule="nonzero"
266
+ >
267
+ <path
268
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
269
+ />
270
+ <path
271
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
272
+ />
273
+ <path
274
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
275
+ />
276
+ <path
277
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
278
+ />
279
+ <path
280
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
281
+ />
282
+ <path
283
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
284
+ />
285
+ <path
286
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
287
+ />
288
+ <polygon
289
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
290
+ />
291
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
292
+ <path
293
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
294
+ />
295
+ </g>
296
+ <g transform="translate(0.000000, 0.000000)">
297
+ <path
298
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
299
+ fill="#0066CC"
300
+ />
301
+ <path
302
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
303
+ fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
304
+ />
305
+ <path
306
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
307
+ fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
308
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
309
+ />
310
+ </g>
311
+ </g>
312
+ </svg>
297
313
  </a>
298
314
  </div>
299
315
  <div class="pf-v5-c-masthead__content">
300
316
  <div
301
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
317
+ class="pf-v5-c-toolbar pf-m-static"
302
318
  id="toolbar-pagination-management-example-masthead-toolbar"
303
319
  >
304
320
  <div class="pf-v5-c-toolbar__content">
305
321
  <div class="pf-v5-c-toolbar__content-section">
322
+ <div class="pf-v5-c-toolbar__item">
323
+ <button
324
+ class="pf-v5-c-menu-toggle"
325
+ type="button"
326
+ aria-expanded="false"
327
+ >
328
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
329
+ <span class="pf-v5-c-menu-toggle__controls">
330
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
331
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
332
+ </span>
333
+ </span>
334
+ </button>
335
+ </div>
336
+
337
+ <div class="pf-v5-c-toolbar__item">
338
+ <button
339
+ class="pf-v5-c-menu-toggle"
340
+ type="button"
341
+ aria-expanded="false"
342
+ >
343
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
344
+ <span class="pf-v5-c-menu-toggle__controls">
345
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
346
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
347
+ </span>
348
+ </span>
349
+ </button>
350
+ </div>
351
+
306
352
  <div
307
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
353
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
308
354
  >
309
355
  <div
310
356
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -351,27 +397,6 @@ section: components
351
397
  </button>
352
398
  </div>
353
399
  </div>
354
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
355
- <button
356
- class="pf-v5-c-menu-toggle pf-m-full-height"
357
- type="button"
358
- aria-expanded="false"
359
- >
360
- <span class="pf-v5-c-menu-toggle__icon">
361
- <img
362
- class="pf-v5-c-avatar"
363
- alt="Avatar image"
364
- src="/assets/images/img_avatar-light.svg"
365
- />
366
- </span>
367
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
368
- <span class="pf-v5-c-menu-toggle__controls">
369
- <span class="pf-v5-c-menu-toggle__toggle-icon">
370
- <i class="fas fa-angle-down" aria-hidden="true"></i>
371
- </span>
372
- </span>
373
- </button>
374
- </div>
375
400
  </div>
376
401
  </div>
377
402
  </div>
@@ -462,14 +487,14 @@ section: components
462
487
  <div class="pf-v5-c-toolbar__content">
463
488
  <div class="pf-v5-c-toolbar__content-section">
464
489
  <div
465
- class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-2xl"
490
+ class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg"
466
491
  >
467
- <div class="pf-v5-c-toolbar__toggle">
492
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
468
493
  <button
469
- class="pf-v5-c-button pf-m-plain"
494
+ class="pf-v5-c-menu-toggle pf-m-plain"
470
495
  type="button"
471
- aria-label="Show filters"
472
496
  aria-expanded="false"
497
+ aria-label="Show filters"
473
498
  aria-controls="toolbar-with-validation-example-expandable-content"
474
499
  >
475
500
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -482,153 +507,106 @@ section: components
482
507
  aria-label="search filter"
483
508
  role="group"
484
509
  >
485
- <div class="pf-v5-c-select" style="width: 160px">
486
- <span
487
- id="toolbar-with-validation-example-select-month-label"
488
- hidden
489
- >Choose one</span>
490
-
510
+ <div class="pf-v5-c-input-group__item">
491
511
  <button
492
- class="pf-v5-c-select__toggle"
512
+ class="pf-v5-c-menu-toggle"
493
513
  type="button"
494
- id="toolbar-with-validation-example-select-month-toggle"
495
- aria-haspopup="true"
496
514
  aria-expanded="false"
497
- aria-labelledby="toolbar-with-validation-example-select-month-label toolbar-with-validation-example-select-month-toggle"
515
+ id="toolbar-with-validation-example-month"
498
516
  >
499
- <div class="pf-v5-c-select__toggle-wrapper">
500
- <span class="pf-v5-c-select__toggle-icon">
501
- <i class="fas fa-filter" aria-hidden="true"></i>
517
+ <span class="pf-v5-c-menu-toggle__icon">
518
+ <i class="fas fa-filter" aria-hidden="true"></i>
519
+ </span>
520
+ <span class="pf-v5-c-menu-toggle__text">Last month</span>
521
+ <span class="pf-v5-c-menu-toggle__controls">
522
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
523
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
502
524
  </span>
503
- <span class="pf-v5-c-select__toggle-text">Last month</span>
504
- </div>
505
- <span class="pf-v5-c-select__toggle-arrow">
506
- <i class="fas fa-caret-down" aria-hidden="true"></i>
507
525
  </span>
508
526
  </button>
509
-
510
- <ul
511
- class="pf-v5-c-select__menu"
512
- role="listbox"
513
- aria-labelledby="toolbar-with-validation-example-select-month-label"
514
- hidden
515
- >
516
- <li role="presentation">
517
- <button
518
- class="pf-v5-c-select__menu-item"
519
- role="option"
520
- >Running</button>
521
- </li>
522
- <li role="presentation">
523
- <button
524
- class="pf-v5-c-select__menu-item pf-m-selected"
525
- role="option"
526
- aria-selected="true"
527
- >
528
- Stopped
529
- <span class="pf-v5-c-select__menu-item-icon">
530
- <i class="fas fa-check" aria-hidden="true"></i>
531
- </span>
532
- </button>
533
- </li>
534
- <li role="presentation">
535
- <button
536
- class="pf-v5-c-select__menu-item"
537
- role="option"
538
- >Down</button>
539
- </li>
540
- <li role="presentation">
541
- <button
542
- class="pf-v5-c-select__menu-item"
543
- role="option"
544
- >Degraded</button>
545
- </li>
546
- <li role="presentation">
547
- <button
548
- class="pf-v5-c-select__menu-item"
549
- role="option"
550
- >Needs maintenance</button>
551
- </li>
552
- </ul>
553
527
  </div>
554
- <div class="pf-v5-c-date-picker">
555
- <div class="pf-v5-c-date-picker__input">
556
- <div
557
- class="pf-v5-c-input-group"
558
- aria-label="search filter"
559
- role="group"
560
- >
561
- <span class="pf-v5-c-form-control">
562
- <input
563
- type="text"
564
- value="2020-03-05"
565
- id="toolbar-with-validation-example-helper-text-input"
566
- name="toolbar-with-validation-example-helper-text-input"
567
- aria-label="Date picker"
568
- />
569
- </span>
570
- <button
571
- class="pf-v5-c-button pf-m-control"
572
- type="button"
573
- aria-label="Toggle date picker"
528
+ <div class="pf-v5-c-input-group__item">
529
+ <div class="pf-v5-c-date-picker">
530
+ <div class="pf-v5-c-date-picker__input">
531
+ <div
532
+ class="pf-v5-c-input-group"
533
+ aria-label="search filter"
534
+ role="group"
574
535
  >
575
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
576
- </button>
536
+ <span class="pf-v5-c-form-control">
537
+ <input
538
+ type="text"
539
+ value="2020-03-05"
540
+ id="toolbar-with-validation-example-helper-text-input"
541
+ name="toolbar-with-validation-example-helper-text-input"
542
+ aria-label="Date picker"
543
+ />
544
+ </span>
545
+ <button
546
+ class="pf-v5-c-button pf-m-control"
547
+ type="button"
548
+ aria-label="Toggle date picker"
549
+ >
550
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
551
+ </button>
552
+ </div>
577
553
  </div>
578
- </div>
579
- <div class="pf-v5-c-date-picker__helper-text">
580
- <div class="pf-v5-c-helper-text">
581
- <div class="pf-v5-c-helper-text__item">
582
- <span
583
- class="pf-v5-c-helper-text__item-text"
584
- >MM/DD/YYYY</span>
554
+ <div class="pf-v5-c-date-picker__helper-text">
555
+ <div class="pf-v5-c-helper-text">
556
+ <div class="pf-v5-c-helper-text__item">
557
+ <span
558
+ class="pf-v5-c-helper-text__item-text"
559
+ >MM/DD/YYYY</span>
560
+ </div>
585
561
  </div>
586
562
  </div>
587
563
  </div>
588
564
  </div>
589
- <div class="pf-v5-c-date-picker">
590
- <div class="pf-v5-c-date-picker__input">
591
- <div
592
- class="pf-v5-c-input-group"
593
- aria-label="search filter"
594
- role="group"
595
- >
596
- <span class="pf-v5-c-form-control pf-m-error">
597
- <input
598
- aria-invalid="true"
599
- type="text"
600
- value="2020-03-05"
601
- id="toolbar-with-validation-example-invalid-input"
602
- name="toolbar-with-validation-example-invalid-input"
603
- aria-label="Date picker"
604
- />
605
- <span class="pf-v5-c-form-control__utilities">
606
- <span
607
- class="pf-v5-c-form-control__icon pf-m-status"
608
- >
609
- <i
610
- class="fas fa-exclamation-circle"
611
- aria-hidden="true"
612
- ></i>
565
+ <div class="pf-v5-c-input-group__item">
566
+ <div class="pf-v5-c-date-picker">
567
+ <div class="pf-v5-c-date-picker__input">
568
+ <div
569
+ class="pf-v5-c-input-group"
570
+ aria-label="search filter"
571
+ role="group"
572
+ >
573
+ <span class="pf-v5-c-form-control pf-m-error">
574
+ <input
575
+ aria-invalid="true"
576
+ type="text"
577
+ value="2020-03-05"
578
+ id="toolbar-with-validation-example-invalid-input"
579
+ name="toolbar-with-validation-example-invalid-input"
580
+ aria-label="Date picker"
581
+ />
582
+ <span class="pf-v5-c-form-control__utilities">
583
+ <span
584
+ class="pf-v5-c-form-control__icon pf-m-status"
585
+ >
586
+ <i
587
+ class="fas fa-exclamation-circle"
588
+ aria-hidden="true"
589
+ ></i>
590
+ </span>
613
591
  </span>
614
592
  </span>
615
- </span>
616
- <button
617
- class="pf-v5-c-button pf-m-control"
618
- type="button"
619
- aria-label="Toggle date picker"
620
- >
621
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
622
- </button>
593
+ <button
594
+ class="pf-v5-c-button pf-m-control"
595
+ type="button"
596
+ aria-label="Toggle date picker"
597
+ >
598
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
599
+ </button>
600
+ </div>
601
+ <div class="pf-v5-c-date-picker__helper-text"></div>
623
602
  </div>
624
- <div class="pf-v5-c-date-picker__helper-text"></div>
625
- </div>
626
- <div class="pf-v5-c-date-picker__helper-text">
627
- <div class="pf-v5-c-helper-text">
628
- <div class="pf-v5-c-helper-text__item">
629
- <span
630
- class="pf-v5-c-helper-text__item-text"
631
- >Max: 08/10/2022</span>
603
+ <div class="pf-v5-c-date-picker__helper-text">
604
+ <div class="pf-v5-c-helper-text">
605
+ <div class="pf-v5-c-helper-text__item">
606
+ <span
607
+ class="pf-v5-c-helper-text__item-text"
608
+ >Max: 08/10/2022</span>
609
+ </div>
632
610
  </div>
633
611
  </div>
634
612
  </div>
@@ -643,75 +621,22 @@ section: components
643
621
  role="group"
644
622
  >
645
623
  <div class="pf-v5-c-input-group__item">
646
- <div class="pf-v5-c-select" style="width: 160px">
647
- <span
648
- id="toolbar-with-validation-example-select-name-label"
649
- hidden
650
- >Choose one</span>
651
-
652
- <button
653
- class="pf-v5-c-select__toggle"
654
- type="button"
655
- id="toolbar-with-validation-example-select-name-toggle"
656
- aria-haspopup="true"
657
- aria-expanded="false"
658
- aria-labelledby="toolbar-with-validation-example-select-name-label toolbar-with-validation-example-select-name-toggle"
659
- >
660
- <div class="pf-v5-c-select__toggle-wrapper">
661
- <span class="pf-v5-c-select__toggle-icon">
662
- <i class="fas fa-filter" aria-hidden="true"></i>
663
- </span>
664
- <span class="pf-v5-c-select__toggle-text">Description</span>
665
- </div>
666
- <span class="pf-v5-c-select__toggle-arrow">
667
- <i class="fas fa-caret-down" aria-hidden="true"></i>
624
+ <button
625
+ class="pf-v5-c-menu-toggle"
626
+ type="button"
627
+ aria-expanded="false"
628
+ id="toolbar-with-validation-example-search-filter-menu"
629
+ >
630
+ <span class="pf-v5-c-menu-toggle__icon">
631
+ <i class="fas fa-filter" aria-hidden="true"></i>
632
+ </span>
633
+ <span class="pf-v5-c-menu-toggle__text">Description</span>
634
+ <span class="pf-v5-c-menu-toggle__controls">
635
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
636
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
668
637
  </span>
669
- </button>
670
-
671
- <ul
672
- class="pf-v5-c-select__menu"
673
- role="listbox"
674
- aria-labelledby="toolbar-with-validation-example-select-name-label"
675
- hidden
676
- >
677
- <li role="presentation">
678
- <button
679
- class="pf-v5-c-select__menu-item"
680
- role="option"
681
- >Running</button>
682
- </li>
683
- <li role="presentation">
684
- <button
685
- class="pf-v5-c-select__menu-item pf-m-selected"
686
- role="option"
687
- aria-selected="true"
688
- >
689
- Stopped
690
- <span class="pf-v5-c-select__menu-item-icon">
691
- <i class="fas fa-check" aria-hidden="true"></i>
692
- </span>
693
- </button>
694
- </li>
695
- <li role="presentation">
696
- <button
697
- class="pf-v5-c-select__menu-item"
698
- role="option"
699
- >Down</button>
700
- </li>
701
- <li role="presentation">
702
- <button
703
- class="pf-v5-c-select__menu-item"
704
- role="option"
705
- >Degraded</button>
706
- </li>
707
- <li role="presentation">
708
- <button
709
- class="pf-v5-c-select__menu-item"
710
- role="option"
711
- >Needs maintenance</button>
712
- </li>
713
- </ul>
714
- </div>
638
+ </span>
639
+ </button>
715
640
  </div>
716
641
  <div class="pf-v5-c-input-group__item pf-m-fill">
717
642
  <div class="pf-v5-c-text-input-group">
@@ -723,7 +648,7 @@ section: components
723
648
  <input
724
649
  class="pf-v5-c-text-input-group__text-input"
725
650
  type="text"
726
- placeholder="Filter by Description"
651
+ placeholder="Description"
727
652
  value
728
653
  aria-label="Search input"
729
654
  />
@@ -1347,12 +1272,12 @@ section: components
1347
1272
  <div class="pf-v5-c-toolbar__content">
1348
1273
  <div class="pf-v5-c-toolbar__content-section">
1349
1274
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
1350
- <div class="pf-v5-c-toolbar__toggle pf-m-expanded">
1275
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1351
1276
  <button
1352
- class="pf-v5-c-button pf-m-plain"
1277
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
1353
1278
  type="button"
1354
- aria-label="Show filters"
1355
1279
  aria-expanded="true"
1280
+ aria-label="Show filters"
1356
1281
  aria-controls="toolbar-attribute-value-search-filter-mobile-example-expandable-content"
1357
1282
  >
1358
1283
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -1411,55 +1336,57 @@ section: components
1411
1336
  <div
1412
1337
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
1413
1338
  >
1414
- <div class="pf-v5-c-options-menu">
1415
- <button
1416
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1417
- type="button"
1418
- id="toolbar-attribute-value-search-filter-mobile-example-pagination-options-menu-toggle"
1419
- aria-haspopup="listbox"
1420
- aria-expanded="false"
1421
- >
1422
- <span class="pf-v5-c-options-menu__toggle-text">
1423
- <b>1 - 10</b>&nbsp;of&nbsp;
1424
- <b>36</b>
1425
- </span>
1426
- <div class="pf-v5-c-options-menu__toggle-icon">
1427
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1428
- </div>
1429
- </button>
1430
- <ul
1431
- class="pf-v5-c-options-menu__menu"
1432
- role="menu"
1433
- aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-pagination-options-menu-toggle"
1434
- hidden
1435
- >
1436
- <li role="none">
1437
- <button
1438
- class="pf-v5-c-options-menu__menu-item"
1439
- type="button"
1440
- role="menuitem"
1441
- >5 per page</button>
1442
- </li>
1443
- <li role="none">
1444
- <button
1445
- class="pf-v5-c-options-menu__menu-item"
1446
- type="button"
1447
- role="menuitem"
1448
- >
1449
- 10 per page
1450
- <div class="pf-v5-c-options-menu__menu-item-icon">
1451
- <i class="fas fa-check" aria-hidden="true"></i>
1452
- </div>
1453
- </button>
1454
- </li>
1455
- <li role="none">
1456
- <button
1457
- class="pf-v5-c-options-menu__menu-item"
1458
- type="button"
1459
- role="menuitem"
1460
- >20 per page</button>
1461
- </li>
1462
- </ul>
1339
+ <div class="pf-v5-c-pagination__page-menu">
1340
+ <div class="pf-v5-c-options-menu">
1341
+ <button
1342
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1343
+ type="button"
1344
+ id="toolbar-attribute-value-search-filter-mobile-example-pagination-options-menu-toggle"
1345
+ aria-haspopup="listbox"
1346
+ aria-expanded="false"
1347
+ >
1348
+ <span class="pf-v5-c-options-menu__toggle-text">
1349
+ <b>1 - 10</b>&nbsp;of&nbsp;
1350
+ <b>36</b>
1351
+ </span>
1352
+ <div class="pf-v5-c-options-menu__toggle-icon">
1353
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1354
+ </div>
1355
+ </button>
1356
+ <ul
1357
+ class="pf-v5-c-options-menu__menu"
1358
+ role="menu"
1359
+ aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-pagination-options-menu-toggle"
1360
+ hidden
1361
+ >
1362
+ <li role="none">
1363
+ <button
1364
+ class="pf-v5-c-options-menu__menu-item"
1365
+ type="button"
1366
+ role="menuitem"
1367
+ >5 per page</button>
1368
+ </li>
1369
+ <li role="none">
1370
+ <button
1371
+ class="pf-v5-c-options-menu__menu-item"
1372
+ type="button"
1373
+ role="menuitem"
1374
+ >
1375
+ 10 per page
1376
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1377
+ <i class="fas fa-check" aria-hidden="true"></i>
1378
+ </div>
1379
+ </button>
1380
+ </li>
1381
+ <li role="none">
1382
+ <button
1383
+ class="pf-v5-c-options-menu__menu-item"
1384
+ type="button"
1385
+ role="menuitem"
1386
+ >20 per page</button>
1387
+ </li>
1388
+ </ul>
1389
+ </div>
1463
1390
  </div>
1464
1391
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
1465
1392
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -1497,72 +1424,22 @@ section: components
1497
1424
  role="group"
1498
1425
  >
1499
1426
  <div class="pf-v5-c-input-group__item">
1500
- <div class="pf-v5-c-select" style="width: 124px">
1501
- <span
1502
- id="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
1503
- hidden
1504
- >Choose one</span>
1505
-
1506
- <button
1507
- class="pf-v5-c-select__toggle"
1508
- type="button"
1509
- id="toolbar-attribute-value-search-filter-mobile-example-select-name-toggle"
1510
- aria-haspopup="true"
1511
- aria-expanded="false"
1512
- aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label toolbar-attribute-value-search-filter-mobile-example-select-name-toggle"
1513
- >
1514
- <div class="pf-v5-c-select__toggle-wrapper">
1515
- <span class="pf-v5-c-select__toggle-icon">
1516
- <i class="fas fa-filter" aria-hidden="true"></i>
1517
- </span>
1518
- <span class="pf-v5-c-select__toggle-text">Name</span>
1519
- </div>
1520
- <span class="pf-v5-c-select__toggle-arrow">
1521
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1427
+ <button
1428
+ class="pf-v5-c-menu-toggle"
1429
+ type="button"
1430
+ aria-expanded="false"
1431
+ id="toolbar-attribute-value-search-filter-mobile-example-search-filter-menu"
1432
+ >
1433
+ <span class="pf-v5-c-menu-toggle__icon">
1434
+ <i class="fas fa-filter" aria-hidden="true"></i>
1435
+ </span>
1436
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
1437
+ <span class="pf-v5-c-menu-toggle__controls">
1438
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1439
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1522
1440
  </span>
1523
- </button>
1524
-
1525
- <ul
1526
- class="pf-v5-c-select__menu"
1527
- role="listbox"
1528
- aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-label"
1529
- hidden
1530
- >
1531
- <li role="presentation">
1532
- <button
1533
- class="pf-v5-c-select__menu-item"
1534
- role="option"
1535
- >Running</button>
1536
- </li>
1537
- <li role="presentation">
1538
- <button
1539
- class="pf-v5-c-select__menu-item pf-m-selected"
1540
- role="option"
1541
- aria-selected="true"
1542
- >
1543
- Stopped
1544
- <span class="pf-v5-c-select__menu-item-icon">
1545
- <i class="fas fa-check" aria-hidden="true"></i>
1546
- </span>
1547
- </button>
1548
- </li>
1549
- <li role="presentation">
1550
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
1551
- </li>
1552
- <li role="presentation">
1553
- <button
1554
- class="pf-v5-c-select__menu-item"
1555
- role="option"
1556
- >Degraded</button>
1557
- </li>
1558
- <li role="presentation">
1559
- <button
1560
- class="pf-v5-c-select__menu-item"
1561
- role="option"
1562
- >Needs maintenance</button>
1563
- </li>
1564
- </ul>
1565
- </div>
1441
+ </span>
1442
+ </button>
1566
1443
  </div>
1567
1444
  <div class="pf-v5-c-input-group__item pf-m-fill">
1568
1445
  <div class="pf-v5-c-text-input-group">
@@ -1595,155 +1472,116 @@ section: components
1595
1472
  ```html
1596
1473
  <div
1597
1474
  class="pf-v5-c-toolbar"
1598
- id="toolbar-attribute-value-single-select-filter-desktop-example"
1475
+ id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example"
1599
1476
  >
1600
1477
  <div class="pf-v5-c-toolbar__content">
1601
1478
  <div class="pf-v5-c-toolbar__content-section">
1602
1479
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
1603
- <div class="pf-v5-c-toolbar__toggle">
1480
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1604
1481
  <button
1605
- class="pf-v5-c-button pf-m-plain"
1482
+ class="pf-v5-c-menu-toggle pf-m-plain"
1606
1483
  type="button"
1607
- aria-label="Show filters"
1608
1484
  aria-expanded="false"
1609
- aria-controls="toolbar-attribute-value-single-select-filter-desktop-example-expandable-content"
1485
+ aria-label="Show filters"
1486
+ aria-controls="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-expandable-content"
1610
1487
  >
1611
1488
  <i class="fas fa-filter" aria-hidden="true"></i>
1612
1489
  </button>
1613
1490
  </div>
1614
1491
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
1615
1492
  <div class="pf-v5-c-toolbar__item">
1616
- <div class="pf-v5-c-select" style="width: 175px">
1617
- <span
1618
- id="toolbar-attribute-value-single-select-filter-desktop-example-select-status-label"
1619
- hidden
1620
- >Choose one</span>
1621
-
1622
- <button
1623
- class="pf-v5-c-select__toggle"
1624
- type="button"
1625
- id="toolbar-attribute-value-single-select-filter-desktop-example-select-status-toggle"
1626
- aria-haspopup="true"
1627
- aria-expanded="false"
1628
- aria-labelledby="toolbar-attribute-value-single-select-filter-desktop-example-select-status-label toolbar-attribute-value-single-select-filter-desktop-example-select-status-toggle"
1629
- >
1630
- <div class="pf-v5-c-select__toggle-wrapper">
1631
- <span class="pf-v5-c-select__toggle-icon">
1632
- <i class="fas fa-filter" aria-hidden="true"></i>
1633
- </span>
1634
- <span class="pf-v5-c-select__toggle-text">Status</span>
1635
- </div>
1636
- <span class="pf-v5-c-select__toggle-arrow">
1637
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1493
+ <button
1494
+ class="pf-v5-c-menu-toggle"
1495
+ type="button"
1496
+ aria-expanded="false"
1497
+ id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-menu-toggle-status"
1498
+ >
1499
+ <span class="pf-v5-c-menu-toggle__icon">
1500
+ <i class="fas fa-filter" aria-hidden="true"></i>
1501
+ </span>
1502
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
1503
+ <span class="pf-v5-c-menu-toggle__controls">
1504
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1505
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1638
1506
  </span>
1639
- </button>
1640
-
1641
- <ul
1642
- class="pf-v5-c-select__menu"
1643
- role="listbox"
1644
- aria-labelledby="toolbar-attribute-value-single-select-filter-desktop-example-select-status-label"
1645
- hidden
1646
- style="width: 175px"
1647
- >
1648
- <li role="presentation">
1649
- <button
1650
- class="pf-v5-c-select__menu-item"
1651
- role="option"
1652
- >Running</button>
1653
- </li>
1654
- <li role="presentation">
1655
- <button
1656
- class="pf-v5-c-select__menu-item pf-m-selected"
1657
- role="option"
1658
- aria-selected="true"
1659
- >
1660
- Stopped
1661
- <span class="pf-v5-c-select__menu-item-icon">
1662
- <i class="fas fa-check" aria-hidden="true"></i>
1663
- </span>
1664
- </button>
1665
- </li>
1666
- <li role="presentation">
1667
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
1668
- </li>
1669
- <li role="presentation">
1670
- <button
1671
- class="pf-v5-c-select__menu-item"
1672
- role="option"
1673
- >Degraded</button>
1674
- </li>
1675
- <li role="presentation">
1676
- <button
1677
- class="pf-v5-c-select__menu-item"
1678
- role="option"
1679
- >Needs maintenance</button>
1680
- </li>
1681
- </ul>
1682
- </div>
1507
+ </span>
1508
+ </button>
1683
1509
  </div>
1684
1510
  <div class="pf-v5-c-toolbar__item">
1685
- <div class="pf-v5-c-select pf-m-expanded" style="width: 200px">
1686
- <span
1687
- id="toolbar-attribute-value-single-select-filter-desktop-example-select-status-two-label"
1688
- hidden
1689
- >Choose one</span>
1690
-
1691
- <button
1692
- class="pf-v5-c-select__toggle"
1693
- type="button"
1694
- id="toolbar-attribute-value-single-select-filter-desktop-example-select-status-two-toggle"
1695
- aria-haspopup="true"
1696
- aria-expanded="true"
1697
- aria-labelledby="toolbar-attribute-value-single-select-filter-desktop-example-select-status-two-label toolbar-attribute-value-single-select-filter-desktop-example-select-status-two-toggle"
1698
- >
1699
- <div class="pf-v5-c-select__toggle-wrapper">
1700
- <span class="pf-v5-c-select__toggle-text">Stopped</span>
1701
- </div>
1702
- <span class="pf-v5-c-select__toggle-arrow">
1703
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1511
+ <button
1512
+ class="pf-v5-c-menu-toggle pf-m-expanded"
1513
+ type="button"
1514
+ aria-expanded="true"
1515
+ id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-menu-toggle-stopped"
1516
+ >
1517
+ <span class="pf-v5-c-menu-toggle__text">Stopped</span>
1518
+ <span class="pf-v5-c-menu-toggle__controls">
1519
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1520
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1704
1521
  </span>
1705
- </button>
1706
-
1707
- <ul
1708
- class="pf-v5-c-select__menu"
1709
- role="listbox"
1710
- aria-labelledby="toolbar-attribute-value-single-select-filter-desktop-example-select-status-two-label"
1711
- style="width: 200px"
1712
- >
1713
- <li role="presentation">
1714
- <button
1715
- class="pf-v5-c-select__menu-item"
1716
- role="option"
1717
- >Running</button>
1718
- </li>
1719
- <li role="presentation">
1720
- <button
1721
- class="pf-v5-c-select__menu-item pf-m-selected"
1722
- role="option"
1723
- aria-selected="true"
1724
- >
1725
- Stopped
1726
- <span class="pf-v5-c-select__menu-item-icon">
1727
- <i class="fas fa-check" aria-hidden="true"></i>
1728
- </span>
1729
- </button>
1730
- </li>
1731
- <li role="presentation">
1732
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
1733
- </li>
1734
- <li role="presentation">
1735
- <button
1736
- class="pf-v5-c-select__menu-item"
1737
- role="option"
1738
- >Degraded</button>
1739
- </li>
1740
- <li role="presentation">
1741
- <button
1742
- class="pf-v5-c-select__menu-item"
1743
- role="option"
1744
- >Needs maintenance</button>
1745
- </li>
1746
- </ul>
1522
+ </span>
1523
+ </button>
1524
+ <div class="pf-v5-c-panel">
1525
+ <div class="pf-v5-c-menu" width="175px">
1526
+ <div class="pf-v5-c-menu__content">
1527
+ <section class="pf-v5-c-menu__group">
1528
+ <ul class="pf-v5-c-menu__list" role="menu">
1529
+ <li class="pf-v5-c-menu__list-item" role="group">
1530
+ <button
1531
+ class="pf-v5-c-menu__item"
1532
+ type="button"
1533
+ role="menuitem"
1534
+ >
1535
+ <span class="pf-v5-c-menu__item-text">Running</span>
1536
+ </button>
1537
+ </li>
1538
+ <li class="pf-v5-c-menu__list-item" role="group">
1539
+ <button
1540
+ class="pf-v5-c-menu__item pf-m-selected"
1541
+ type="button"
1542
+ role="menuitem"
1543
+ >
1544
+ <span class="pf-v5-c-menu__item-main">
1545
+ <span class="pf-v5-c-menu__item-text">Stopped</span>
1546
+ <span class="pf-v5-c-menu__item-select-icon">
1547
+ <i class="fas fa-check" aria-hidden="true"></i>
1548
+ </span>
1549
+ </span>
1550
+ </button>
1551
+ </li>
1552
+ <li class="pf-v5-c-menu__list-item" role="group">
1553
+ <button
1554
+ class="pf-v5-c-menu__item"
1555
+ type="button"
1556
+ role="menuitem"
1557
+ >
1558
+ <span class="pf-v5-c-menu__item-text">Down</span>
1559
+ </button>
1560
+ </li>
1561
+ <li class="pf-v5-c-menu__list-item" role="group">
1562
+ <button
1563
+ class="pf-v5-c-menu__item"
1564
+ type="button"
1565
+ role="menuitem"
1566
+ >
1567
+ <span class="pf-v5-c-menu__item-text">Degraded</span>
1568
+ </button>
1569
+ </li>
1570
+ <li class="pf-v5-c-menu__list-item" role="group">
1571
+ <button
1572
+ class="pf-v5-c-menu__item"
1573
+ type="button"
1574
+ role="menuitem"
1575
+ >
1576
+ <span
1577
+ class="pf-v5-c-menu__item-text"
1578
+ >Needs maintenance</span>
1579
+ </button>
1580
+ </li>
1581
+ </ul>
1582
+ </section>
1583
+ </div>
1584
+ </div>
1747
1585
  </div>
1748
1586
  </div>
1749
1587
  </div>
@@ -1751,7 +1589,7 @@ section: components
1751
1589
  <div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
1752
1590
  <div
1753
1591
  class="pf-v5-c-overflow-menu"
1754
- id="toolbar-attribute-value-single-select-filter-desktop-example-overflow-menu"
1592
+ id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-overflow-menu"
1755
1593
  >
1756
1594
  <div class="pf-v5-c-overflow-menu__content">
1757
1595
  <div class="pf-v5-c-overflow-menu__group pf-m-button-group">
@@ -1775,7 +1613,7 @@ section: components
1775
1613
  <button
1776
1614
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
1777
1615
  type="button"
1778
- id="toolbar-attribute-value-single-select-filter-desktop-example-overflow-menu-dropdown-toggle"
1616
+ id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-overflow-menu-dropdown-toggle"
1779
1617
  aria-label="Overflow menu"
1780
1618
  aria-expanded="false"
1781
1619
  >
@@ -1784,7 +1622,7 @@ section: components
1784
1622
  <ul
1785
1623
  class="pf-v5-c-dropdown__menu"
1786
1624
  role="menu"
1787
- aria-labelledby="toolbar-attribute-value-single-select-filter-desktop-example-overflow-menu-dropdown-toggle"
1625
+ aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-overflow-menu-dropdown-toggle"
1788
1626
  hidden
1789
1627
  >
1790
1628
  <li role="none">
@@ -1805,55 +1643,57 @@ section: components
1805
1643
  <div
1806
1644
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
1807
1645
  >
1808
- <div class="pf-v5-c-options-menu">
1809
- <button
1810
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1811
- type="button"
1812
- id="toolbar-attribute-value-single-select-filter-desktop-example-pagination-options-menu-toggle"
1813
- aria-haspopup="listbox"
1814
- aria-expanded="false"
1815
- >
1816
- <span class="pf-v5-c-options-menu__toggle-text">
1817
- <b>1 - 10</b>&nbsp;of&nbsp;
1818
- <b>36</b>
1819
- </span>
1820
- <div class="pf-v5-c-options-menu__toggle-icon">
1821
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1822
- </div>
1823
- </button>
1824
- <ul
1825
- class="pf-v5-c-options-menu__menu"
1826
- role="menu"
1827
- aria-labelledby="toolbar-attribute-value-single-select-filter-desktop-example-pagination-options-menu-toggle"
1828
- hidden
1829
- >
1830
- <li role="none">
1831
- <button
1832
- class="pf-v5-c-options-menu__menu-item"
1833
- type="button"
1834
- role="menuitem"
1835
- >5 per page</button>
1836
- </li>
1837
- <li role="none">
1838
- <button
1839
- class="pf-v5-c-options-menu__menu-item"
1840
- type="button"
1841
- role="menuitem"
1842
- >
1843
- 10 per page
1844
- <div class="pf-v5-c-options-menu__menu-item-icon">
1845
- <i class="fas fa-check" aria-hidden="true"></i>
1846
- </div>
1847
- </button>
1848
- </li>
1849
- <li role="none">
1850
- <button
1851
- class="pf-v5-c-options-menu__menu-item"
1852
- type="button"
1853
- role="menuitem"
1854
- >20 per page</button>
1855
- </li>
1856
- </ul>
1646
+ <div class="pf-v5-c-pagination__page-menu">
1647
+ <div class="pf-v5-c-options-menu">
1648
+ <button
1649
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1650
+ type="button"
1651
+ id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
1652
+ aria-haspopup="listbox"
1653
+ aria-expanded="false"
1654
+ >
1655
+ <span class="pf-v5-c-options-menu__toggle-text">
1656
+ <b>1 - 10</b>&nbsp;of&nbsp;
1657
+ <b>36</b>
1658
+ </span>
1659
+ <div class="pf-v5-c-options-menu__toggle-icon">
1660
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1661
+ </div>
1662
+ </button>
1663
+ <ul
1664
+ class="pf-v5-c-options-menu__menu"
1665
+ role="menu"
1666
+ aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
1667
+ hidden
1668
+ >
1669
+ <li role="none">
1670
+ <button
1671
+ class="pf-v5-c-options-menu__menu-item"
1672
+ type="button"
1673
+ role="menuitem"
1674
+ >5 per page</button>
1675
+ </li>
1676
+ <li role="none">
1677
+ <button
1678
+ class="pf-v5-c-options-menu__menu-item"
1679
+ type="button"
1680
+ role="menuitem"
1681
+ >
1682
+ 10 per page
1683
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1684
+ <i class="fas fa-check" aria-hidden="true"></i>
1685
+ </div>
1686
+ </button>
1687
+ </li>
1688
+ <li role="none">
1689
+ <button
1690
+ class="pf-v5-c-options-menu__menu-item"
1691
+ type="button"
1692
+ role="menuitem"
1693
+ >20 per page</button>
1694
+ </li>
1695
+ </ul>
1696
+ </div>
1857
1697
  </div>
1858
1698
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
1859
1699
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -1882,7 +1722,7 @@ section: components
1882
1722
  </div>
1883
1723
  <div
1884
1724
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
1885
- id="toolbar-attribute-value-single-select-filter-desktop-example-expandable-content"
1725
+ id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-expandable-content"
1886
1726
  hidden
1887
1727
  ></div>
1888
1728
  </div>
@@ -1895,18 +1735,18 @@ section: components
1895
1735
  ```html
1896
1736
  <div
1897
1737
  class="pf-v5-c-toolbar"
1898
- id="toolbar-attribute-value-single-select-filter-mobile-example"
1738
+ id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example"
1899
1739
  >
1900
1740
  <div class="pf-v5-c-toolbar__content">
1901
1741
  <div class="pf-v5-c-toolbar__content-section">
1902
1742
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
1903
- <div class="pf-v5-c-toolbar__toggle pf-m-expanded">
1743
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1904
1744
  <button
1905
- class="pf-v5-c-button pf-m-plain"
1745
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
1906
1746
  type="button"
1907
- aria-label="Show filters"
1908
1747
  aria-expanded="true"
1909
- aria-controls="toolbar-attribute-value-single-select-filter-mobile-example-expandable-content"
1748
+ aria-label="Show filters"
1749
+ aria-controls="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-expandable-content"
1910
1750
  >
1911
1751
  <i class="fas fa-filter" aria-hidden="true"></i>
1912
1752
  </button>
@@ -1915,14 +1755,14 @@ section: components
1915
1755
  <div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
1916
1756
  <div
1917
1757
  class="pf-v5-c-overflow-menu"
1918
- id="toolbar-attribute-value-single-select-filter-mobile-example-overflow-menu"
1758
+ id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-overflow-menu"
1919
1759
  >
1920
1760
  <div class="pf-v5-c-overflow-menu__control">
1921
1761
  <div class="pf-v5-c-dropdown">
1922
1762
  <button
1923
1763
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
1924
1764
  type="button"
1925
- id="toolbar-attribute-value-single-select-filter-mobile-example-overflow-menu-dropdown-toggle"
1765
+ id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-overflow-menu-dropdown-toggle"
1926
1766
  aria-label="Overflow menu"
1927
1767
  aria-expanded="false"
1928
1768
  >
@@ -1931,7 +1771,7 @@ section: components
1931
1771
  <ul
1932
1772
  class="pf-v5-c-dropdown__menu"
1933
1773
  role="menu"
1934
- aria-labelledby="toolbar-attribute-value-single-select-filter-mobile-example-overflow-menu-dropdown-toggle"
1774
+ aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-overflow-menu-dropdown-toggle"
1935
1775
  hidden
1936
1776
  >
1937
1777
  <li role="none">
@@ -1964,55 +1804,57 @@ section: components
1964
1804
  <div
1965
1805
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
1966
1806
  >
1967
- <div class="pf-v5-c-options-menu">
1968
- <button
1969
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1970
- type="button"
1971
- id="toolbar-attribute-value-single-select-filter-mobile-example-pagination-options-menu-toggle"
1972
- aria-haspopup="listbox"
1973
- aria-expanded="false"
1974
- >
1975
- <span class="pf-v5-c-options-menu__toggle-text">
1976
- <b>1 - 10</b>&nbsp;of&nbsp;
1977
- <b>36</b>
1978
- </span>
1979
- <div class="pf-v5-c-options-menu__toggle-icon">
1980
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1981
- </div>
1982
- </button>
1983
- <ul
1984
- class="pf-v5-c-options-menu__menu"
1985
- role="menu"
1986
- aria-labelledby="toolbar-attribute-value-single-select-filter-mobile-example-pagination-options-menu-toggle"
1987
- hidden
1988
- >
1989
- <li role="none">
1990
- <button
1991
- class="pf-v5-c-options-menu__menu-item"
1992
- type="button"
1993
- role="menuitem"
1994
- >5 per page</button>
1995
- </li>
1996
- <li role="none">
1997
- <button
1998
- class="pf-v5-c-options-menu__menu-item"
1999
- type="button"
2000
- role="menuitem"
2001
- >
2002
- 10 per page
2003
- <div class="pf-v5-c-options-menu__menu-item-icon">
2004
- <i class="fas fa-check" aria-hidden="true"></i>
2005
- </div>
2006
- </button>
2007
- </li>
2008
- <li role="none">
2009
- <button
2010
- class="pf-v5-c-options-menu__menu-item"
2011
- type="button"
2012
- role="menuitem"
2013
- >20 per page</button>
2014
- </li>
2015
- </ul>
1807
+ <div class="pf-v5-c-pagination__page-menu">
1808
+ <div class="pf-v5-c-options-menu">
1809
+ <button
1810
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1811
+ type="button"
1812
+ id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
1813
+ aria-haspopup="listbox"
1814
+ aria-expanded="false"
1815
+ >
1816
+ <span class="pf-v5-c-options-menu__toggle-text">
1817
+ <b>1 - 10</b>&nbsp;of&nbsp;
1818
+ <b>36</b>
1819
+ </span>
1820
+ <div class="pf-v5-c-options-menu__toggle-icon">
1821
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1822
+ </div>
1823
+ </button>
1824
+ <ul
1825
+ class="pf-v5-c-options-menu__menu"
1826
+ role="menu"
1827
+ aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
1828
+ hidden
1829
+ >
1830
+ <li role="none">
1831
+ <button
1832
+ class="pf-v5-c-options-menu__menu-item"
1833
+ type="button"
1834
+ role="menuitem"
1835
+ >5 per page</button>
1836
+ </li>
1837
+ <li role="none">
1838
+ <button
1839
+ class="pf-v5-c-options-menu__menu-item"
1840
+ type="button"
1841
+ role="menuitem"
1842
+ >
1843
+ 10 per page
1844
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1845
+ <i class="fas fa-check" aria-hidden="true"></i>
1846
+ </div>
1847
+ </button>
1848
+ </li>
1849
+ <li role="none">
1850
+ <button
1851
+ class="pf-v5-c-options-menu__menu-item"
1852
+ type="button"
1853
+ role="menuitem"
1854
+ >20 per page</button>
1855
+ </li>
1856
+ </ul>
1857
+ </div>
2016
1858
  </div>
2017
1859
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
2018
1860
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -2041,127 +1883,100 @@ section: components
2041
1883
  </div>
2042
1884
  <div
2043
1885
  class="pf-v5-c-toolbar__expandable-content pf-m-expanded"
2044
- id="toolbar-attribute-value-single-select-filter-mobile-example-expandable-content"
1886
+ id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-expandable-content"
2045
1887
  >
2046
1888
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
2047
1889
  <div class="pf-v5-c-toolbar__item">
2048
- <div class="pf-v5-c-select">
2049
- <span
2050
- id="toolbar-attribute-value-single-select-filter-mobile-example-select-status-expanded-label"
2051
- hidden
2052
- >Choose one</span>
2053
-
2054
- <button
2055
- class="pf-v5-c-select__toggle"
2056
- type="button"
2057
- id="toolbar-attribute-value-single-select-filter-mobile-example-select-status-expanded-toggle"
2058
- aria-haspopup="true"
2059
- aria-expanded="false"
2060
- aria-labelledby="toolbar-attribute-value-single-select-filter-mobile-example-select-status-expanded-label toolbar-attribute-value-single-select-filter-mobile-example-select-status-expanded-toggle"
2061
- >
2062
- <div class="pf-v5-c-select__toggle-wrapper">
2063
- <span class="pf-v5-c-select__toggle-icon">
2064
- <i class="fas fa-filter" aria-hidden="true"></i>
2065
- </span>
2066
- <span class="pf-v5-c-select__toggle-text">Status</span>
2067
- </div>
2068
- <span class="pf-v5-c-select__toggle-arrow">
2069
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1890
+ <button
1891
+ class="pf-v5-c-menu-toggle"
1892
+ type="button"
1893
+ aria-expanded="false"
1894
+ id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-menu-toggle-status"
1895
+ >
1896
+ <span class="pf-v5-c-menu-toggle__icon">
1897
+ <i class="fas fa-filter" aria-hidden="true"></i>
1898
+ </span>
1899
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
1900
+ <span class="pf-v5-c-menu-toggle__controls">
1901
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1902
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2070
1903
  </span>
2071
- </button>
2072
-
2073
- <ul
2074
- class="pf-v5-c-select__menu"
2075
- role="listbox"
2076
- aria-labelledby="toolbar-attribute-value-single-select-filter-mobile-example-select-status-expanded-label"
2077
- hidden
2078
- >
2079
- <li role="presentation">
2080
- <button class="pf-v5-c-select__menu-item" role="option">Running</button>
2081
- </li>
2082
- <li role="presentation">
2083
- <button
2084
- class="pf-v5-c-select__menu-item pf-m-selected"
2085
- role="option"
2086
- aria-selected="true"
2087
- >
2088
- Stopped
2089
- <span class="pf-v5-c-select__menu-item-icon">
2090
- <i class="fas fa-check" aria-hidden="true"></i>
2091
- </span>
2092
- </button>
2093
- </li>
2094
- <li role="presentation">
2095
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
2096
- </li>
2097
- <li role="presentation">
2098
- <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
2099
- </li>
2100
- <li role="presentation">
2101
- <button
2102
- class="pf-v5-c-select__menu-item"
2103
- role="option"
2104
- >Needs maintenance</button>
2105
- </li>
2106
- </ul>
2107
- </div>
1904
+ </span>
1905
+ </button>
2108
1906
  </div>
2109
1907
  <div class="pf-v5-c-toolbar__item">
2110
- <div class="pf-v5-c-select pf-m-expanded">
2111
- <span
2112
- id="toolbar-attribute-value-single-select-filter-mobile-example-select-status-two-expanded-label"
2113
- hidden
2114
- >Choose one</span>
2115
-
2116
- <button
2117
- class="pf-v5-c-select__toggle"
2118
- type="button"
2119
- id="toolbar-attribute-value-single-select-filter-mobile-example-select-status-two-expanded-toggle"
2120
- aria-haspopup="true"
2121
- aria-expanded="true"
2122
- aria-labelledby="toolbar-attribute-value-single-select-filter-mobile-example-select-status-two-expanded-label toolbar-attribute-value-single-select-filter-mobile-example-select-status-two-expanded-toggle"
2123
- >
2124
- <div class="pf-v5-c-select__toggle-wrapper">
2125
- <span class="pf-v5-c-select__toggle-text">Stopped</span>
2126
- </div>
2127
- <span class="pf-v5-c-select__toggle-arrow">
2128
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1908
+ <button
1909
+ class="pf-v5-c-menu-toggle pf-m-expanded"
1910
+ type="button"
1911
+ aria-expanded="true"
1912
+ id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-menu-toggle-stopped"
1913
+ >
1914
+ <span class="pf-v5-c-menu-toggle__text">Stopped</span>
1915
+ <span class="pf-v5-c-menu-toggle__controls">
1916
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1917
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2129
1918
  </span>
2130
- </button>
2131
-
2132
- <ul
2133
- class="pf-v5-c-select__menu"
2134
- role="listbox"
2135
- aria-labelledby="toolbar-attribute-value-single-select-filter-mobile-example-select-status-two-expanded-label"
2136
- >
2137
- <li role="presentation">
2138
- <button class="pf-v5-c-select__menu-item" role="option">Running</button>
2139
- </li>
2140
- <li role="presentation">
2141
- <button
2142
- class="pf-v5-c-select__menu-item pf-m-selected"
2143
- role="option"
2144
- aria-selected="true"
2145
- >
2146
- Stopped
2147
- <span class="pf-v5-c-select__menu-item-icon">
2148
- <i class="fas fa-check" aria-hidden="true"></i>
2149
- </span>
2150
- </button>
2151
- </li>
2152
- <li role="presentation">
2153
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
2154
- </li>
2155
- <li role="presentation">
2156
- <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
2157
- </li>
2158
- <li role="presentation">
2159
- <button
2160
- class="pf-v5-c-select__menu-item"
2161
- role="option"
2162
- >Needs maintenance</button>
2163
- </li>
2164
- </ul>
1919
+ </span>
1920
+ </button>
1921
+ <div class="pf-v5-c-panel">
1922
+ <div class="pf-v5-c-menu" width="175px">
1923
+ <div class="pf-v5-c-menu__content">
1924
+ <section class="pf-v5-c-menu__group">
1925
+ <ul class="pf-v5-c-menu__list" role="menu">
1926
+ <li class="pf-v5-c-menu__list-item" role="group">
1927
+ <button
1928
+ class="pf-v5-c-menu__item"
1929
+ type="button"
1930
+ role="menuitem"
1931
+ >
1932
+ <span class="pf-v5-c-menu__item-text">Running</span>
1933
+ </button>
1934
+ </li>
1935
+ <li class="pf-v5-c-menu__list-item" role="group">
1936
+ <button
1937
+ class="pf-v5-c-menu__item pf-m-selected"
1938
+ type="button"
1939
+ role="menuitem"
1940
+ >
1941
+ <span class="pf-v5-c-menu__item-main">
1942
+ <span class="pf-v5-c-menu__item-text">Stopped</span>
1943
+ <span class="pf-v5-c-menu__item-select-icon">
1944
+ <i class="fas fa-check" aria-hidden="true"></i>
1945
+ </span>
1946
+ </span>
1947
+ </button>
1948
+ </li>
1949
+ <li class="pf-v5-c-menu__list-item" role="group">
1950
+ <button
1951
+ class="pf-v5-c-menu__item"
1952
+ type="button"
1953
+ role="menuitem"
1954
+ >
1955
+ <span class="pf-v5-c-menu__item-text">Down</span>
1956
+ </button>
1957
+ </li>
1958
+ <li class="pf-v5-c-menu__list-item" role="group">
1959
+ <button
1960
+ class="pf-v5-c-menu__item"
1961
+ type="button"
1962
+ role="menuitem"
1963
+ >
1964
+ <span class="pf-v5-c-menu__item-text">Degraded</span>
1965
+ </button>
1966
+ </li>
1967
+ <li class="pf-v5-c-menu__list-item" role="group">
1968
+ <button
1969
+ class="pf-v5-c-menu__item"
1970
+ type="button"
1971
+ role="menuitem"
1972
+ >
1973
+ <span class="pf-v5-c-menu__item-text">Needs maintenance</span>
1974
+ </button>
1975
+ </li>
1976
+ </ul>
1977
+ </section>
1978
+ </div>
1979
+ </div>
2165
1980
  </div>
2166
1981
  </div>
2167
1982
  </div>
@@ -2171,194 +1986,188 @@ section: components
2171
1986
 
2172
1987
  ```
2173
1988
 
2174
- ### Toolbar attribute value checkbox select filter on desktop
1989
+ ### Toolbar attribute value checkbox menu toggle filter on desktop
2175
1990
 
2176
1991
  ```html
2177
1992
  <div
2178
1993
  class="pf-v5-c-toolbar"
2179
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example"
1994
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example"
2180
1995
  >
2181
1996
  <div class="pf-v5-c-toolbar__content">
2182
1997
  <div class="pf-v5-c-toolbar__content-section">
2183
1998
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
2184
- <div class="pf-v5-c-toolbar__toggle">
1999
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
2185
2000
  <button
2186
- class="pf-v5-c-button pf-m-plain"
2001
+ class="pf-v5-c-menu-toggle pf-m-plain"
2187
2002
  type="button"
2188
- aria-label="Show filters"
2189
2003
  aria-expanded="false"
2190
- aria-controls="toolbar-attribute-value-checkbox-select-filter-desktop-example-expandable-content"
2004
+ aria-label="Show filters"
2005
+ aria-controls="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-expandable-content"
2191
2006
  >
2192
2007
  <i class="fas fa-filter" aria-hidden="true"></i>
2193
2008
  </button>
2194
2009
  </div>
2195
- <div class="pf-v5-c-toolbar__group pf-m-filter-group">
2196
- <div class="pf-v5-c-toolbar__item">
2197
- <div class="pf-v5-c-select" style="width: 175px">
2198
- <span
2199
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-status-label"
2200
- hidden
2201
- >Choose one</span>
2202
-
2203
- <button
2204
- class="pf-v5-c-select__toggle"
2205
- type="button"
2206
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-status-toggle"
2207
- aria-haspopup="true"
2208
- aria-expanded="false"
2209
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-status-label toolbar-attribute-value-checkbox-select-filter-desktop-example-select-status-toggle"
2210
- >
2211
- <div class="pf-v5-c-select__toggle-wrapper">
2212
- <span class="pf-v5-c-select__toggle-icon">
2213
- <i class="fas fa-filter" aria-hidden="true"></i>
2214
- </span>
2215
- <span class="pf-v5-c-select__toggle-text">Status</span>
2216
- </div>
2217
- <span class="pf-v5-c-select__toggle-arrow">
2218
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2219
- </span>
2220
- </button>
2221
-
2222
- <ul
2223
- class="pf-v5-c-select__menu"
2224
- role="listbox"
2225
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-status-label"
2226
- hidden
2227
- style="width: 175px"
2228
- >
2229
- <li role="presentation">
2230
- <button
2231
- class="pf-v5-c-select__menu-item"
2232
- role="option"
2233
- >Running</button>
2234
- </li>
2235
- <li role="presentation">
2236
- <button
2237
- class="pf-v5-c-select__menu-item pf-m-selected"
2238
- role="option"
2239
- aria-selected="true"
2240
- >
2241
- Stopped
2242
- <span class="pf-v5-c-select__menu-item-icon">
2243
- <i class="fas fa-check" aria-hidden="true"></i>
2244
- </span>
2245
- </button>
2246
- </li>
2247
- <li role="presentation">
2248
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
2249
- </li>
2250
- <li role="presentation">
2251
- <button
2252
- class="pf-v5-c-select__menu-item"
2253
- role="option"
2254
- >Degraded</button>
2255
- </li>
2256
- <li role="presentation">
2257
- <button
2258
- class="pf-v5-c-select__menu-item"
2259
- role="option"
2260
- >Needs maintenance</button>
2261
- </li>
2262
- </ul>
2263
- </div>
2010
+ <div class="pf-v5-c-toolbar__group pf-m-filter-group">
2011
+ <div class="pf-v5-c-toolbar__item">
2012
+ <button
2013
+ class="pf-v5-c-menu-toggle"
2014
+ type="button"
2015
+ aria-expanded="false"
2016
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-menu-toggle-status"
2017
+ >
2018
+ <span class="pf-v5-c-menu-toggle__icon">
2019
+ <i class="fas fa-filter" aria-hidden="true"></i>
2020
+ </span>
2021
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
2022
+ <span class="pf-v5-c-menu-toggle__controls">
2023
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2024
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2025
+ </span>
2026
+ </span>
2027
+ </button>
2264
2028
  </div>
2265
2029
  <div class="pf-v5-c-toolbar__item">
2266
- <div class="pf-v5-c-select pf-m-expanded">
2267
- <span
2268
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-label"
2269
- hidden
2270
- >Choose many</span>
2271
-
2272
- <button
2273
- class="pf-v5-c-select__toggle"
2274
- type="button"
2275
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-toggle"
2276
- aria-haspopup="true"
2277
- aria-expanded="true"
2278
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-label toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-toggle"
2279
- >
2280
- <div class="pf-v5-c-select__toggle-wrapper">
2281
- <span class="pf-v5-c-select__toggle-text">Filter by status</span>
2282
- </div>
2283
- <span class="pf-v5-c-select__toggle-arrow">
2284
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2030
+ <button
2031
+ class="pf-v5-c-menu-toggle pf-m-expanded"
2032
+ type="button"
2033
+ aria-expanded="true"
2034
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-menu-toggle-filter-by-status"
2035
+ >
2036
+ <span class="pf-v5-c-menu-toggle__text">Filter by status</span>
2037
+ <span class="pf-v5-c-menu-toggle__controls">
2038
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2039
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2285
2040
  </span>
2286
- </button>
2287
-
2288
- <div class="pf-v5-c-select__menu">
2289
- <fieldset
2290
- class="pf-v5-c-select__menu-fieldset"
2291
- aria-label="Select input"
2292
- >
2293
- <label
2294
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2295
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-active"
2296
- for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-active-input"
2297
- >
2298
- <input
2299
- class="pf-v5-c-check__input"
2300
- type="checkbox"
2301
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-active-input"
2302
- name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-active-input"
2303
- checked
2304
- />
2305
- <span class="pf-v5-c-check__label">Active</span>
2306
- </label>
2307
- <label
2308
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2309
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-canceled"
2310
- for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-canceled-input"
2311
- >
2312
- <input
2313
- class="pf-v5-c-check__input"
2314
- type="checkbox"
2315
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-canceled-input"
2316
- name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-canceled-input"
2317
- checked
2318
- />
2319
- <span class="pf-v5-c-check__label">Canceled</span>
2320
- </label>
2321
- <label
2322
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2323
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-paused"
2324
- for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-paused-input"
2325
- >
2326
- <input
2327
- class="pf-v5-c-check__input"
2328
- type="checkbox"
2329
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-paused-input"
2330
- name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-paused-input"
2331
- />
2332
- <span class="pf-v5-c-check__label">Paused</span>
2333
- </label>
2334
- <label
2335
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2336
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-warning"
2337
- for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-warning-input"
2338
- >
2339
- <input
2340
- class="pf-v5-c-check__input"
2341
- type="checkbox"
2342
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-warning-input"
2343
- name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-warning-input"
2344
- checked
2345
- />
2346
- <span class="pf-v5-c-check__label">Warning</span>
2347
- </label>
2348
- <label
2349
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2350
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-restarted"
2351
- for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-restarted-input"
2352
- >
2353
- <input
2354
- class="pf-v5-c-check__input"
2355
- type="checkbox"
2356
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-restarted-input"
2357
- name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-restarted-input"
2358
- />
2359
- <span class="pf-v5-c-check__label">Restarted</span>
2360
- </label>
2361
- </fieldset>
2041
+ </span>
2042
+ </button>
2043
+ <div class="pf-v5-c-panel">
2044
+ <div class="pf-v5-c-menu">
2045
+ <div class="pf-v5-c-menu__content">
2046
+ <ul class="pf-v5-c-menu__list" role="menu">
2047
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2048
+ <label
2049
+ class="pf-v5-c-menu__item"
2050
+ for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check1"
2051
+ >
2052
+ <span class="pf-v5-c-menu__item-main">
2053
+ <span class="pf-v5-c-menu__item-check">
2054
+ <div
2055
+ class="pf-v5-c-check pf-m-standalone"
2056
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check1"
2057
+ >
2058
+ <input
2059
+ class="pf-v5-c-check__input"
2060
+ type="checkbox"
2061
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check1-input"
2062
+ name="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check1-input"
2063
+ aria-label="Standalone check"
2064
+ />
2065
+ </div>
2066
+ </span>
2067
+ <span class="pf-v5-c-menu__item-text">Active</span>
2068
+ </span>
2069
+ </label>
2070
+ </li>
2071
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2072
+ <label
2073
+ class="pf-v5-c-menu__item"
2074
+ for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check2"
2075
+ >
2076
+ <span class="pf-v5-c-menu__item-main">
2077
+ <span class="pf-v5-c-menu__item-check">
2078
+ <div
2079
+ class="pf-v5-c-check pf-m-standalone"
2080
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check2"
2081
+ >
2082
+ <input
2083
+ class="pf-v5-c-check__input"
2084
+ type="checkbox"
2085
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check2-input"
2086
+ name="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check2-input"
2087
+ aria-label="Standalone check"
2088
+ checked
2089
+ />
2090
+ </div>
2091
+ </span>
2092
+ <span class="pf-v5-c-menu__item-text">Cancelled</span>
2093
+ </span>
2094
+ </label>
2095
+ </li>
2096
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2097
+ <label
2098
+ class="pf-v5-c-menu__item"
2099
+ for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check3"
2100
+ >
2101
+ <span class="pf-v5-c-menu__item-main">
2102
+ <span class="pf-v5-c-menu__item-check">
2103
+ <div
2104
+ class="pf-v5-c-check pf-m-standalone"
2105
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check3"
2106
+ >
2107
+ <input
2108
+ class="pf-v5-c-check__input"
2109
+ type="checkbox"
2110
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check3-input"
2111
+ name="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check3-input"
2112
+ aria-label="Standalone check"
2113
+ checked
2114
+ />
2115
+ </div>
2116
+ </span>
2117
+ <span class="pf-v5-c-menu__item-text">Paused</span>
2118
+ </span>
2119
+ </label>
2120
+ </li>
2121
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2122
+ <label
2123
+ class="pf-v5-c-menu__item"
2124
+ for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check4"
2125
+ >
2126
+ <span class="pf-v5-c-menu__item-main">
2127
+ <span class="pf-v5-c-menu__item-check">
2128
+ <div
2129
+ class="pf-v5-c-check pf-m-standalone"
2130
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check4"
2131
+ >
2132
+ <input
2133
+ class="pf-v5-c-check__input"
2134
+ type="checkbox"
2135
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check4-input"
2136
+ name="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check4-input"
2137
+ aria-label="Standalone check"
2138
+ />
2139
+ </div>
2140
+ </span>
2141
+ <span class="pf-v5-c-menu__item-text">Warning</span>
2142
+ </span>
2143
+ </label>
2144
+ </li>
2145
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2146
+ <label
2147
+ class="pf-v5-c-menu__item"
2148
+ for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check5"
2149
+ >
2150
+ <span class="pf-v5-c-menu__item-main">
2151
+ <span class="pf-v5-c-menu__item-check">
2152
+ <div
2153
+ class="pf-v5-c-check pf-m-standalone"
2154
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check5"
2155
+ >
2156
+ <input
2157
+ class="pf-v5-c-check__input"
2158
+ type="checkbox"
2159
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check5-input"
2160
+ name="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check5-input"
2161
+ aria-label="Standalone check"
2162
+ />
2163
+ </div>
2164
+ </span>
2165
+ <span class="pf-v5-c-menu__item-text">Restarted</span>
2166
+ </span>
2167
+ </label>
2168
+ </li>
2169
+ </ul>
2170
+ </div>
2362
2171
  </div>
2363
2172
  </div>
2364
2173
  </div>
@@ -2367,7 +2176,7 @@ section: components
2367
2176
  <div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
2368
2177
  <div
2369
2178
  class="pf-v5-c-overflow-menu"
2370
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-overflow-menu"
2179
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-overflow-menu"
2371
2180
  >
2372
2181
  <div class="pf-v5-c-overflow-menu__content">
2373
2182
  <div class="pf-v5-c-overflow-menu__group pf-m-button-group">
@@ -2391,7 +2200,7 @@ section: components
2391
2200
  <button
2392
2201
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
2393
2202
  type="button"
2394
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-overflow-menu-dropdown-toggle"
2203
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-overflow-menu-dropdown-toggle"
2395
2204
  aria-label="Overflow menu"
2396
2205
  aria-expanded="false"
2397
2206
  >
@@ -2400,7 +2209,7 @@ section: components
2400
2209
  <ul
2401
2210
  class="pf-v5-c-dropdown__menu"
2402
2211
  role="menu"
2403
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-overflow-menu-dropdown-toggle"
2212
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-overflow-menu-dropdown-toggle"
2404
2213
  hidden
2405
2214
  >
2406
2215
  <li role="none">
@@ -2421,55 +2230,57 @@ section: components
2421
2230
  <div
2422
2231
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
2423
2232
  >
2424
- <div class="pf-v5-c-options-menu">
2425
- <button
2426
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2427
- type="button"
2428
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-pagination-options-menu-toggle"
2429
- aria-haspopup="listbox"
2430
- aria-expanded="false"
2431
- >
2432
- <span class="pf-v5-c-options-menu__toggle-text">
2433
- <b>1 - 10</b>&nbsp;of&nbsp;
2434
- <b>36</b>
2435
- </span>
2436
- <div class="pf-v5-c-options-menu__toggle-icon">
2437
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2438
- </div>
2439
- </button>
2440
- <ul
2441
- class="pf-v5-c-options-menu__menu"
2442
- role="menu"
2443
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-pagination-options-menu-toggle"
2444
- hidden
2445
- >
2446
- <li role="none">
2447
- <button
2448
- class="pf-v5-c-options-menu__menu-item"
2449
- type="button"
2450
- role="menuitem"
2451
- >5 per page</button>
2452
- </li>
2453
- <li role="none">
2454
- <button
2455
- class="pf-v5-c-options-menu__menu-item"
2456
- type="button"
2457
- role="menuitem"
2458
- >
2459
- 10 per page
2460
- <div class="pf-v5-c-options-menu__menu-item-icon">
2461
- <i class="fas fa-check" aria-hidden="true"></i>
2462
- </div>
2463
- </button>
2464
- </li>
2465
- <li role="none">
2466
- <button
2467
- class="pf-v5-c-options-menu__menu-item"
2468
- type="button"
2469
- role="menuitem"
2470
- >20 per page</button>
2471
- </li>
2472
- </ul>
2233
+ <div class="pf-v5-c-pagination__page-menu">
2234
+ <div class="pf-v5-c-options-menu">
2235
+ <button
2236
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2237
+ type="button"
2238
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
2239
+ aria-haspopup="listbox"
2240
+ aria-expanded="false"
2241
+ >
2242
+ <span class="pf-v5-c-options-menu__toggle-text">
2243
+ <b>1 - 10</b>&nbsp;of&nbsp;
2244
+ <b>36</b>
2245
+ </span>
2246
+ <div class="pf-v5-c-options-menu__toggle-icon">
2247
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2248
+ </div>
2249
+ </button>
2250
+ <ul
2251
+ class="pf-v5-c-options-menu__menu"
2252
+ role="menu"
2253
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
2254
+ hidden
2255
+ >
2256
+ <li role="none">
2257
+ <button
2258
+ class="pf-v5-c-options-menu__menu-item"
2259
+ type="button"
2260
+ role="menuitem"
2261
+ >5 per page</button>
2262
+ </li>
2263
+ <li role="none">
2264
+ <button
2265
+ class="pf-v5-c-options-menu__menu-item"
2266
+ type="button"
2267
+ role="menuitem"
2268
+ >
2269
+ 10 per page
2270
+ <div class="pf-v5-c-options-menu__menu-item-icon">
2271
+ <i class="fas fa-check" aria-hidden="true"></i>
2272
+ </div>
2273
+ </button>
2274
+ </li>
2275
+ <li role="none">
2276
+ <button
2277
+ class="pf-v5-c-options-menu__menu-item"
2278
+ type="button"
2279
+ role="menuitem"
2280
+ >20 per page</button>
2281
+ </li>
2282
+ </ul>
2283
+ </div>
2473
2284
  </div>
2474
2285
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
2475
2286
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -2498,7 +2309,7 @@ section: components
2498
2309
  </div>
2499
2310
  <div
2500
2311
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
2501
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-expandable-content"
2312
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-expandable-content"
2502
2313
  hidden
2503
2314
  ></div>
2504
2315
  </div>
@@ -2508,28 +2319,28 @@ section: components
2508
2319
  <div class="pf-v5-c-chip-group__main">
2509
2320
  <span
2510
2321
  class="pf-v5-c-chip-group__label"
2511
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-group-chip-group-label"
2322
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-group-chip-group-label"
2512
2323
  >Status</span>
2513
2324
  <ul
2514
2325
  class="pf-v5-c-chip-group__list"
2515
2326
  role="list"
2516
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-group-chip-group-label"
2327
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-group-chip-group-label"
2517
2328
  >
2518
2329
  <li class="pf-v5-c-chip-group__list-item">
2519
2330
  <div class="pf-v5-c-chip">
2520
2331
  <span class="pf-v5-c-chip__content">
2521
2332
  <span
2522
2333
  class="pf-v5-c-chip__text"
2523
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-group-chip-one"
2334
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-group-chip-one"
2524
2335
  >Canceled</span>
2525
2336
  </span>
2526
2337
  <span class="pf-v5-c-chip__actions">
2527
2338
  <button
2528
2339
  class="pf-v5-c-button pf-m-plain"
2529
2340
  type="button"
2530
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-one toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-one"
2341
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupremove-chip-one toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupchip-one"
2531
2342
  aria-label="Remove"
2532
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-one"
2343
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupremove-chip-one"
2533
2344
  >
2534
2345
  <i class="fas fa-times" aria-hidden="true"></i>
2535
2346
  </button>
@@ -2541,16 +2352,16 @@ section: components
2541
2352
  <span class="pf-v5-c-chip__content">
2542
2353
  <span
2543
2354
  class="pf-v5-c-chip__text"
2544
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-two"
2355
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupchip-two"
2545
2356
  >Paused</span>
2546
2357
  </span>
2547
2358
  <span class="pf-v5-c-chip__actions">
2548
2359
  <button
2549
2360
  class="pf-v5-c-button pf-m-plain"
2550
2361
  type="button"
2551
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-two toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-two"
2362
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupremove-chip-two toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupchip-two"
2552
2363
  aria-label="Remove"
2553
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-two"
2364
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupremove-chip-two"
2554
2365
  >
2555
2366
  <i class="fas fa-times" aria-hidden="true"></i>
2556
2367
  </button>
@@ -2562,16 +2373,16 @@ section: components
2562
2373
  <span class="pf-v5-c-chip__content">
2563
2374
  <span
2564
2375
  class="pf-v5-c-chip__text"
2565
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-three"
2376
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupchip-three"
2566
2377
  >Restarted</span>
2567
2378
  </span>
2568
2379
  <span class="pf-v5-c-chip__actions">
2569
2380
  <button
2570
2381
  class="pf-v5-c-button pf-m-plain"
2571
2382
  type="button"
2572
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-three toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-three"
2383
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupremove-chip-three toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupchip-three"
2573
2384
  aria-label="Remove"
2574
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-three"
2385
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupremove-chip-three"
2575
2386
  >
2576
2387
  <i class="fas fa-times" aria-hidden="true"></i>
2577
2388
  </button>
@@ -2593,23 +2404,23 @@ section: components
2593
2404
 
2594
2405
  ```
2595
2406
 
2596
- ### Toolbar attribute value checkbox select filter on mobile
2407
+ ### Toolbar attribute value checkbox menu toggle filter on mobile
2597
2408
 
2598
2409
  ```html
2599
2410
  <div
2600
2411
  class="pf-v5-c-toolbar"
2601
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example"
2412
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example"
2602
2413
  >
2603
2414
  <div class="pf-v5-c-toolbar__content">
2604
2415
  <div class="pf-v5-c-toolbar__content-section">
2605
2416
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
2606
- <div class="pf-v5-c-toolbar__toggle pf-m-expanded">
2417
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
2607
2418
  <button
2608
- class="pf-v5-c-button pf-m-plain"
2419
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
2609
2420
  type="button"
2610
- aria-label="Show filters"
2611
2421
  aria-expanded="true"
2612
- aria-controls="toolbar-attribute-value-checkbox-select-filter-mobile-example-expandable-content"
2422
+ aria-label="Show filters"
2423
+ aria-controls="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-expandable-content"
2613
2424
  >
2614
2425
  <i class="fas fa-filter" aria-hidden="true"></i>
2615
2426
  </button>
@@ -2618,14 +2429,14 @@ section: components
2618
2429
  <div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
2619
2430
  <div
2620
2431
  class="pf-v5-c-overflow-menu"
2621
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-overflow-menu"
2432
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-overflow-menu"
2622
2433
  >
2623
2434
  <div class="pf-v5-c-overflow-menu__control">
2624
2435
  <div class="pf-v5-c-dropdown">
2625
2436
  <button
2626
2437
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
2627
2438
  type="button"
2628
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-overflow-menu-dropdown-toggle"
2439
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-overflow-menu-dropdown-toggle"
2629
2440
  aria-label="Overflow menu"
2630
2441
  aria-expanded="false"
2631
2442
  >
@@ -2634,7 +2445,7 @@ section: components
2634
2445
  <ul
2635
2446
  class="pf-v5-c-dropdown__menu"
2636
2447
  role="menu"
2637
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-overflow-menu-dropdown-toggle"
2448
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-overflow-menu-dropdown-toggle"
2638
2449
  hidden
2639
2450
  >
2640
2451
  <li role="none">
@@ -2667,55 +2478,57 @@ section: components
2667
2478
  <div
2668
2479
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
2669
2480
  >
2670
- <div class="pf-v5-c-options-menu">
2671
- <button
2672
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2673
- type="button"
2674
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-pagination-options-menu-toggle"
2675
- aria-haspopup="listbox"
2676
- aria-expanded="false"
2677
- >
2678
- <span class="pf-v5-c-options-menu__toggle-text">
2679
- <b>1 - 10</b>&nbsp;of&nbsp;
2680
- <b>36</b>
2681
- </span>
2682
- <div class="pf-v5-c-options-menu__toggle-icon">
2683
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2684
- </div>
2685
- </button>
2686
- <ul
2687
- class="pf-v5-c-options-menu__menu"
2688
- role="menu"
2689
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-pagination-options-menu-toggle"
2690
- hidden
2691
- >
2692
- <li role="none">
2693
- <button
2694
- class="pf-v5-c-options-menu__menu-item"
2695
- type="button"
2696
- role="menuitem"
2697
- >5 per page</button>
2698
- </li>
2699
- <li role="none">
2700
- <button
2701
- class="pf-v5-c-options-menu__menu-item"
2702
- type="button"
2703
- role="menuitem"
2704
- >
2705
- 10 per page
2706
- <div class="pf-v5-c-options-menu__menu-item-icon">
2707
- <i class="fas fa-check" aria-hidden="true"></i>
2708
- </div>
2709
- </button>
2710
- </li>
2711
- <li role="none">
2712
- <button
2713
- class="pf-v5-c-options-menu__menu-item"
2714
- type="button"
2715
- role="menuitem"
2716
- >20 per page</button>
2717
- </li>
2718
- </ul>
2481
+ <div class="pf-v5-c-pagination__page-menu">
2482
+ <div class="pf-v5-c-options-menu">
2483
+ <button
2484
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2485
+ type="button"
2486
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
2487
+ aria-haspopup="listbox"
2488
+ aria-expanded="false"
2489
+ >
2490
+ <span class="pf-v5-c-options-menu__toggle-text">
2491
+ <b>1 - 10</b>&nbsp;of&nbsp;
2492
+ <b>36</b>
2493
+ </span>
2494
+ <div class="pf-v5-c-options-menu__toggle-icon">
2495
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2496
+ </div>
2497
+ </button>
2498
+ <ul
2499
+ class="pf-v5-c-options-menu__menu"
2500
+ role="menu"
2501
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
2502
+ hidden
2503
+ >
2504
+ <li role="none">
2505
+ <button
2506
+ class="pf-v5-c-options-menu__menu-item"
2507
+ type="button"
2508
+ role="menuitem"
2509
+ >5 per page</button>
2510
+ </li>
2511
+ <li role="none">
2512
+ <button
2513
+ class="pf-v5-c-options-menu__menu-item"
2514
+ type="button"
2515
+ role="menuitem"
2516
+ >
2517
+ 10 per page
2518
+ <div class="pf-v5-c-options-menu__menu-item-icon">
2519
+ <i class="fas fa-check" aria-hidden="true"></i>
2520
+ </div>
2521
+ </button>
2522
+ </li>
2523
+ <li role="none">
2524
+ <button
2525
+ class="pf-v5-c-options-menu__menu-item"
2526
+ type="button"
2527
+ role="menuitem"
2528
+ >20 per page</button>
2529
+ </li>
2530
+ </ul>
2531
+ </div>
2719
2532
  </div>
2720
2533
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
2721
2534
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -2744,168 +2557,169 @@ section: components
2744
2557
  </div>
2745
2558
  <div
2746
2559
  class="pf-v5-c-toolbar__expandable-content pf-m-expanded"
2747
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-expandable-content"
2560
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-expandable-content"
2748
2561
  >
2749
2562
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
2750
2563
  <div class="pf-v5-c-toolbar__item">
2751
- <div class="pf-v5-c-select">
2752
- <span
2753
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-status-expanded-label"
2754
- hidden
2755
- >Choose one</span>
2756
-
2757
- <button
2758
- class="pf-v5-c-select__toggle"
2759
- type="button"
2760
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-status-expanded-toggle"
2761
- aria-haspopup="true"
2762
- aria-expanded="false"
2763
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-status-expanded-label toolbar-attribute-value-checkbox-select-filter-mobile-example-select-status-expanded-toggle"
2764
- >
2765
- <div class="pf-v5-c-select__toggle-wrapper">
2766
- <span class="pf-v5-c-select__toggle-icon">
2767
- <i class="fas fa-filter" aria-hidden="true"></i>
2768
- </span>
2769
- <span class="pf-v5-c-select__toggle-text">Status</span>
2770
- </div>
2771
- <span class="pf-v5-c-select__toggle-arrow">
2772
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2564
+ <button
2565
+ class="pf-v5-c-menu-toggle"
2566
+ type="button"
2567
+ aria-expanded="false"
2568
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-menu-toggle-status"
2569
+ >
2570
+ <span class="pf-v5-c-menu-toggle__icon">
2571
+ <i class="fas fa-filter" aria-hidden="true"></i>
2572
+ </span>
2573
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
2574
+ <span class="pf-v5-c-menu-toggle__controls">
2575
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2576
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2773
2577
  </span>
2774
- </button>
2775
-
2776
- <ul
2777
- class="pf-v5-c-select__menu"
2778
- role="listbox"
2779
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-status-expanded-label"
2780
- hidden
2781
- >
2782
- <li role="presentation">
2783
- <button class="pf-v5-c-select__menu-item" role="option">Running</button>
2784
- </li>
2785
- <li role="presentation">
2786
- <button
2787
- class="pf-v5-c-select__menu-item pf-m-selected"
2788
- role="option"
2789
- aria-selected="true"
2790
- >
2791
- Stopped
2792
- <span class="pf-v5-c-select__menu-item-icon">
2793
- <i class="fas fa-check" aria-hidden="true"></i>
2794
- </span>
2795
- </button>
2796
- </li>
2797
- <li role="presentation">
2798
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
2799
- </li>
2800
- <li role="presentation">
2801
- <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
2802
- </li>
2803
- <li role="presentation">
2804
- <button
2805
- class="pf-v5-c-select__menu-item"
2806
- role="option"
2807
- >Needs maintenance</button>
2808
- </li>
2809
- </ul>
2810
- </div>
2578
+ </span>
2579
+ </button>
2811
2580
  </div>
2812
2581
  <div class="pf-v5-c-toolbar__item">
2813
- <div class="pf-v5-c-select">
2814
- <span
2815
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-label"
2816
- hidden
2817
- >Choose many</span>
2818
-
2819
- <button
2820
- class="pf-v5-c-select__toggle"
2821
- type="button"
2822
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-toggle"
2823
- aria-haspopup="true"
2824
- aria-expanded="false"
2825
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-label toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-toggle"
2826
- >
2827
- <div class="pf-v5-c-select__toggle-wrapper">
2828
- <span class="pf-v5-c-select__toggle-text">Filter by status</span>
2582
+ <button
2583
+ class="pf-v5-c-menu-toggle pf-m-expanded"
2584
+ type="button"
2585
+ aria-expanded="true"
2586
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-menu-toggle-filter-by-status"
2587
+ >
2588
+ <span class="pf-v5-c-menu-toggle__text">Filter by status</span>
2589
+ <span class="pf-v5-c-menu-toggle__controls">
2590
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2591
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2592
+ </span>
2593
+ </span>
2594
+ </button>
2595
+ <div class="pf-v5-c-panel">
2596
+ <div class="pf-v5-c-menu">
2597
+ <div class="pf-v5-c-menu__content">
2598
+ <ul class="pf-v5-c-menu__list" role="menu">
2599
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2600
+ <label
2601
+ class="pf-v5-c-menu__item"
2602
+ for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check1"
2603
+ >
2604
+ <span class="pf-v5-c-menu__item-main">
2605
+ <span class="pf-v5-c-menu__item-check">
2606
+ <div
2607
+ class="pf-v5-c-check pf-m-standalone"
2608
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check1"
2609
+ >
2610
+ <input
2611
+ class="pf-v5-c-check__input"
2612
+ type="checkbox"
2613
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check1-input"
2614
+ name="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check1-input"
2615
+ aria-label="Standalone check"
2616
+ />
2617
+ </div>
2618
+ </span>
2619
+ <span class="pf-v5-c-menu__item-text">Active</span>
2620
+ </span>
2621
+ </label>
2622
+ </li>
2623
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2624
+ <label
2625
+ class="pf-v5-c-menu__item"
2626
+ for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check2"
2627
+ >
2628
+ <span class="pf-v5-c-menu__item-main">
2629
+ <span class="pf-v5-c-menu__item-check">
2630
+ <div
2631
+ class="pf-v5-c-check pf-m-standalone"
2632
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check2"
2633
+ >
2634
+ <input
2635
+ class="pf-v5-c-check__input"
2636
+ type="checkbox"
2637
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check2-input"
2638
+ name="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check2-input"
2639
+ aria-label="Standalone check"
2640
+ checked
2641
+ />
2642
+ </div>
2643
+ </span>
2644
+ <span class="pf-v5-c-menu__item-text">Cancelled</span>
2645
+ </span>
2646
+ </label>
2647
+ </li>
2648
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2649
+ <label
2650
+ class="pf-v5-c-menu__item"
2651
+ for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check3"
2652
+ >
2653
+ <span class="pf-v5-c-menu__item-main">
2654
+ <span class="pf-v5-c-menu__item-check">
2655
+ <div
2656
+ class="pf-v5-c-check pf-m-standalone"
2657
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check3"
2658
+ >
2659
+ <input
2660
+ class="pf-v5-c-check__input"
2661
+ type="checkbox"
2662
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check3-input"
2663
+ name="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check3-input"
2664
+ aria-label="Standalone check"
2665
+ checked
2666
+ />
2667
+ </div>
2668
+ </span>
2669
+ <span class="pf-v5-c-menu__item-text">Paused</span>
2670
+ </span>
2671
+ </label>
2672
+ </li>
2673
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2674
+ <label
2675
+ class="pf-v5-c-menu__item"
2676
+ for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check4"
2677
+ >
2678
+ <span class="pf-v5-c-menu__item-main">
2679
+ <span class="pf-v5-c-menu__item-check">
2680
+ <div
2681
+ class="pf-v5-c-check pf-m-standalone"
2682
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check4"
2683
+ >
2684
+ <input
2685
+ class="pf-v5-c-check__input"
2686
+ type="checkbox"
2687
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check4-input"
2688
+ name="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check4-input"
2689
+ aria-label="Standalone check"
2690
+ />
2691
+ </div>
2692
+ </span>
2693
+ <span class="pf-v5-c-menu__item-text">Warning</span>
2694
+ </span>
2695
+ </label>
2696
+ </li>
2697
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2698
+ <label
2699
+ class="pf-v5-c-menu__item"
2700
+ for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check5"
2701
+ >
2702
+ <span class="pf-v5-c-menu__item-main">
2703
+ <span class="pf-v5-c-menu__item-check">
2704
+ <div
2705
+ class="pf-v5-c-check pf-m-standalone"
2706
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check5"
2707
+ >
2708
+ <input
2709
+ class="pf-v5-c-check__input"
2710
+ type="checkbox"
2711
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check5-input"
2712
+ name="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check5-input"
2713
+ aria-label="Standalone check"
2714
+ />
2715
+ </div>
2716
+ </span>
2717
+ <span class="pf-v5-c-menu__item-text">Restarted</span>
2718
+ </span>
2719
+ </label>
2720
+ </li>
2721
+ </ul>
2829
2722
  </div>
2830
- <span class="pf-v5-c-select__toggle-arrow">
2831
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2832
- </span>
2833
- </button>
2834
-
2835
- <div class="pf-v5-c-select__menu" hidden>
2836
- <fieldset
2837
- class="pf-v5-c-select__menu-fieldset"
2838
- aria-label="Select input"
2839
- >
2840
- <label
2841
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2842
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-active"
2843
- for="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-active-input"
2844
- >
2845
- <input
2846
- class="pf-v5-c-check__input"
2847
- type="checkbox"
2848
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-active-input"
2849
- name="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-active-input"
2850
- checked
2851
- />
2852
- <span class="pf-v5-c-check__label">Active</span>
2853
- </label>
2854
- <label
2855
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2856
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-canceled"
2857
- for="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-canceled-input"
2858
- >
2859
- <input
2860
- class="pf-v5-c-check__input"
2861
- type="checkbox"
2862
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-canceled-input"
2863
- name="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-canceled-input"
2864
- checked
2865
- />
2866
- <span class="pf-v5-c-check__label">Canceled</span>
2867
- </label>
2868
- <label
2869
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2870
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-paused"
2871
- for="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-paused-input"
2872
- >
2873
- <input
2874
- class="pf-v5-c-check__input"
2875
- type="checkbox"
2876
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-paused-input"
2877
- name="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-paused-input"
2878
- />
2879
- <span class="pf-v5-c-check__label">Paused</span>
2880
- </label>
2881
- <label
2882
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2883
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-warning"
2884
- for="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-warning-input"
2885
- >
2886
- <input
2887
- class="pf-v5-c-check__input"
2888
- type="checkbox"
2889
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-warning-input"
2890
- name="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-warning-input"
2891
- checked
2892
- />
2893
- <span class="pf-v5-c-check__label">Warning</span>
2894
- </label>
2895
- <label
2896
- class="pf-v5-c-check pf-v5-c-select__menu-item"
2897
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-restarted"
2898
- for="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-restarted-input"
2899
- >
2900
- <input
2901
- class="pf-v5-c-check__input"
2902
- type="checkbox"
2903
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-restarted-input"
2904
- name="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-restarted-input"
2905
- />
2906
- <span class="pf-v5-c-check__label">Restarted</span>
2907
- </label>
2908
- </fieldset>
2909
2723
  </div>
2910
2724
  </div>
2911
2725
  </div>
@@ -2914,28 +2728,28 @@ section: components
2914
2728
  <div class="pf-v5-c-chip-group__main">
2915
2729
  <span
2916
2730
  class="pf-v5-c-chip-group__label"
2917
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-group-chip-group-label"
2731
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-group-chip-group-label"
2918
2732
  >Status</span>
2919
2733
  <ul
2920
2734
  class="pf-v5-c-chip-group__list"
2921
2735
  role="list"
2922
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-group-chip-group-label"
2736
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-group-chip-group-label"
2923
2737
  >
2924
2738
  <li class="pf-v5-c-chip-group__list-item">
2925
2739
  <div class="pf-v5-c-chip">
2926
2740
  <span class="pf-v5-c-chip__content">
2927
2741
  <span
2928
2742
  class="pf-v5-c-chip__text"
2929
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-one"
2743
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupchip-one"
2930
2744
  >Canceled</span>
2931
2745
  </span>
2932
2746
  <span class="pf-v5-c-chip__actions">
2933
2747
  <button
2934
2748
  class="pf-v5-c-button pf-m-plain"
2935
2749
  type="button"
2936
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-one toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-one"
2750
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupremove-chip-one toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupchip-one"
2937
2751
  aria-label="Remove"
2938
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-one"
2752
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupremove-chip-one"
2939
2753
  >
2940
2754
  <i class="fas fa-times" aria-hidden="true"></i>
2941
2755
  </button>
@@ -2947,16 +2761,16 @@ section: components
2947
2761
  <span class="pf-v5-c-chip__content">
2948
2762
  <span
2949
2763
  class="pf-v5-c-chip__text"
2950
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-two"
2764
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupchip-two"
2951
2765
  >Paused</span>
2952
2766
  </span>
2953
2767
  <span class="pf-v5-c-chip__actions">
2954
2768
  <button
2955
2769
  class="pf-v5-c-button pf-m-plain"
2956
2770
  type="button"
2957
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-two toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-two"
2771
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupremove-chip-two toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupchip-two"
2958
2772
  aria-label="Remove"
2959
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-two"
2773
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupremove-chip-two"
2960
2774
  >
2961
2775
  <i class="fas fa-times" aria-hidden="true"></i>
2962
2776
  </button>
@@ -2968,16 +2782,16 @@ section: components
2968
2782
  <span class="pf-v5-c-chip__content">
2969
2783
  <span
2970
2784
  class="pf-v5-c-chip__text"
2971
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-three"
2785
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupchip-three"
2972
2786
  >Restarted</span>
2973
2787
  </span>
2974
2788
  <span class="pf-v5-c-chip__actions">
2975
2789
  <button
2976
2790
  class="pf-v5-c-button pf-m-plain"
2977
2791
  type="button"
2978
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-three toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-three"
2792
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupremove-chip-three toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupchip-three"
2979
2793
  aria-label="Remove"
2980
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-three"
2794
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupremove-chip-three"
2981
2795
  >
2982
2796
  <i class="fas fa-times" aria-hidden="true"></i>
2983
2797
  </button>
@@ -3026,23 +2840,117 @@ section: components
3026
2840
  </span>
3027
2841
  <div class="pf-v5-c-masthead__main">
3028
2842
  <a class="pf-v5-c-masthead__brand" href="#">
3029
- <img
3030
- class="pf-v5-c-brand"
3031
- src="/assets/images/pf-logo.svg"
3032
- alt="PatternFly logo"
3033
- style="--pf-v5-c-brand--Height:36px"
3034
- />
2843
+ <svg height="40px" viewBox="0 0 679 158">
2844
+ <title>PF-HorizontalLogo-Color</title>
2845
+ <defs>
2846
+ <linearGradient
2847
+ x1="68%"
2848
+ y1="2.25860997e-13%"
2849
+ x2="32%"
2850
+ y2="100%"
2851
+ id="linearGradient-toolbar-pagination-management-example-masthead"
2852
+ >
2853
+ <stop stop-color="#2B9AF3" offset="0%" />
2854
+ <stop
2855
+ stop-color="#73BCF7"
2856
+ stop-opacity="0.502212631"
2857
+ offset="100%"
2858
+ />
2859
+ </linearGradient>
2860
+ </defs>
2861
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2862
+ <g
2863
+ transform="translate(206.000000, 45.750000)"
2864
+ fill="var(--pf-t--global--text--color--regular)"
2865
+ fill-rule="nonzero"
2866
+ >
2867
+ <path
2868
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
2869
+ />
2870
+ <path
2871
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
2872
+ />
2873
+ <path
2874
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
2875
+ />
2876
+ <path
2877
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
2878
+ />
2879
+ <path
2880
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
2881
+ />
2882
+ <path
2883
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
2884
+ />
2885
+ <path
2886
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
2887
+ />
2888
+ <polygon
2889
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
2890
+ />
2891
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2892
+ <path
2893
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
2894
+ />
2895
+ </g>
2896
+ <g transform="translate(0.000000, 0.000000)">
2897
+ <path
2898
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
2899
+ fill="#0066CC"
2900
+ />
2901
+ <path
2902
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2903
+ fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
2904
+ />
2905
+ <path
2906
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2907
+ fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
2908
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2909
+ />
2910
+ </g>
2911
+ </g>
2912
+ </svg>
3035
2913
  </a>
3036
2914
  </div>
3037
2915
  <div class="pf-v5-c-masthead__content">
3038
2916
  <div
3039
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
2917
+ class="pf-v5-c-toolbar pf-m-static"
3040
2918
  id="toolbar-pagination-management-example-masthead-toolbar"
3041
2919
  >
3042
2920
  <div class="pf-v5-c-toolbar__content">
3043
2921
  <div class="pf-v5-c-toolbar__content-section">
2922
+ <div class="pf-v5-c-toolbar__item">
2923
+ <button
2924
+ class="pf-v5-c-menu-toggle"
2925
+ type="button"
2926
+ aria-expanded="false"
2927
+ >
2928
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2929
+ <span class="pf-v5-c-menu-toggle__controls">
2930
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2931
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2932
+ </span>
2933
+ </span>
2934
+ </button>
2935
+ </div>
2936
+
2937
+ <div class="pf-v5-c-toolbar__item">
2938
+ <button
2939
+ class="pf-v5-c-menu-toggle"
2940
+ type="button"
2941
+ aria-expanded="false"
2942
+ >
2943
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2944
+ <span class="pf-v5-c-menu-toggle__controls">
2945
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2946
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2947
+ </span>
2948
+ </span>
2949
+ </button>
2950
+ </div>
2951
+
3044
2952
  <div
3045
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2953
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
3046
2954
  >
3047
2955
  <div
3048
2956
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -3089,27 +2997,6 @@ section: components
3089
2997
  </button>
3090
2998
  </div>
3091
2999
  </div>
3092
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3093
- <button
3094
- class="pf-v5-c-menu-toggle pf-m-full-height"
3095
- type="button"
3096
- aria-expanded="false"
3097
- >
3098
- <span class="pf-v5-c-menu-toggle__icon">
3099
- <img
3100
- class="pf-v5-c-avatar"
3101
- alt="Avatar image"
3102
- src="/assets/images/img_avatar-light.svg"
3103
- />
3104
- </span>
3105
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3106
- <span class="pf-v5-c-menu-toggle__controls">
3107
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3108
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3109
- </span>
3110
- </span>
3111
- </button>
3112
- </div>
3113
3000
  </div>
3114
3001
  </div>
3115
3002
  </div>
@@ -3203,12 +3090,12 @@ section: components
3203
3090
  <div class="pf-v5-c-toolbar__content">
3204
3091
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
3205
3092
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
3206
- <div class="pf-v5-c-toolbar__toggle">
3093
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
3207
3094
  <button
3208
- class="pf-v5-c-button pf-m-plain"
3095
+ class="pf-v5-c-menu-toggle pf-m-plain"
3209
3096
  type="button"
3210
- aria-label="Show filters"
3211
3097
  aria-expanded="false"
3098
+ aria-label="Show filters"
3212
3099
  aria-controls="toolbar-pagination-management-example-toolbar-expandable-content"
3213
3100
  >
3214
3101
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -3221,75 +3108,22 @@ section: components
3221
3108
  role="group"
3222
3109
  >
3223
3110
  <div class="pf-v5-c-input-group__item">
3224
- <div class="pf-v5-c-select" style="width: 124px">
3225
- <span
3226
- id="toolbar-pagination-management-example-toolbar-select-name-label"
3227
- hidden
3228
- >Choose one</span>
3229
-
3230
- <button
3231
- class="pf-v5-c-select__toggle"
3232
- type="button"
3233
- id="toolbar-pagination-management-example-toolbar-select-name-toggle"
3234
- aria-haspopup="true"
3235
- aria-expanded="false"
3236
- aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label toolbar-pagination-management-example-toolbar-select-name-toggle"
3237
- >
3238
- <div class="pf-v5-c-select__toggle-wrapper">
3239
- <span class="pf-v5-c-select__toggle-icon">
3240
- <i class="fas fa-filter" aria-hidden="true"></i>
3241
- </span>
3242
- <span class="pf-v5-c-select__toggle-text">Name</span>
3243
- </div>
3244
- <span class="pf-v5-c-select__toggle-arrow">
3245
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3111
+ <button
3112
+ class="pf-v5-c-menu-toggle"
3113
+ type="button"
3114
+ aria-expanded="false"
3115
+ id="toolbar-pagination-management-example-toolbar-search-filter-menu"
3116
+ >
3117
+ <span class="pf-v5-c-menu-toggle__icon">
3118
+ <i class="fas fa-filter" aria-hidden="true"></i>
3119
+ </span>
3120
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
3121
+ <span class="pf-v5-c-menu-toggle__controls">
3122
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3123
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3246
3124
  </span>
3247
- </button>
3248
-
3249
- <ul
3250
- class="pf-v5-c-select__menu"
3251
- role="listbox"
3252
- aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label"
3253
- hidden
3254
- >
3255
- <li role="presentation">
3256
- <button
3257
- class="pf-v5-c-select__menu-item"
3258
- role="option"
3259
- >Running</button>
3260
- </li>
3261
- <li role="presentation">
3262
- <button
3263
- class="pf-v5-c-select__menu-item pf-m-selected"
3264
- role="option"
3265
- aria-selected="true"
3266
- >
3267
- Stopped
3268
- <span class="pf-v5-c-select__menu-item-icon">
3269
- <i class="fas fa-check" aria-hidden="true"></i>
3270
- </span>
3271
- </button>
3272
- </li>
3273
- <li role="presentation">
3274
- <button
3275
- class="pf-v5-c-select__menu-item"
3276
- role="option"
3277
- >Down</button>
3278
- </li>
3279
- <li role="presentation">
3280
- <button
3281
- class="pf-v5-c-select__menu-item"
3282
- role="option"
3283
- >Degraded</button>
3284
- </li>
3285
- <li role="presentation">
3286
- <button
3287
- class="pf-v5-c-select__menu-item"
3288
- role="option"
3289
- >Needs maintenance</button>
3290
- </li>
3291
- </ul>
3292
- </div>
3125
+ </span>
3126
+ </button>
3293
3127
  </div>
3294
3128
  <div class="pf-v5-c-input-group__item pf-m-fill">
3295
3129
  <div class="pf-v5-c-text-input-group">
@@ -3364,55 +3198,57 @@ section: components
3364
3198
  <div
3365
3199
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
3366
3200
  >
3367
- <div class="pf-v5-c-options-menu">
3368
- <button
3369
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3370
- type="button"
3371
- id="toolbar-pagination-management-example-toolbar-pagination-options-menu-toggle"
3372
- aria-haspopup="listbox"
3373
- aria-expanded="false"
3374
- >
3375
- <span class="pf-v5-c-options-menu__toggle-text">
3376
- <b>1 - 10</b>&nbsp;of&nbsp;
3377
- <b>36</b>
3378
- </span>
3379
- <div class="pf-v5-c-options-menu__toggle-icon">
3380
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3381
- </div>
3382
- </button>
3383
- <ul
3384
- class="pf-v5-c-options-menu__menu"
3385
- role="menu"
3386
- aria-labelledby="toolbar-pagination-management-example-toolbar-pagination-options-menu-toggle"
3387
- hidden
3388
- >
3389
- <li role="none">
3390
- <button
3391
- class="pf-v5-c-options-menu__menu-item"
3392
- type="button"
3393
- role="menuitem"
3394
- >5 per page</button>
3395
- </li>
3396
- <li role="none">
3397
- <button
3398
- class="pf-v5-c-options-menu__menu-item"
3399
- type="button"
3400
- role="menuitem"
3401
- >
3402
- 10 per page
3403
- <div class="pf-v5-c-options-menu__menu-item-icon">
3404
- <i class="fas fa-check" aria-hidden="true"></i>
3405
- </div>
3406
- </button>
3407
- </li>
3408
- <li role="none">
3409
- <button
3410
- class="pf-v5-c-options-menu__menu-item"
3411
- type="button"
3412
- role="menuitem"
3413
- >20 per page</button>
3414
- </li>
3415
- </ul>
3201
+ <div class="pf-v5-c-pagination__page-menu">
3202
+ <div class="pf-v5-c-options-menu">
3203
+ <button
3204
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3205
+ type="button"
3206
+ id="toolbar-pagination-management-example-toolbar-pagination-options-menu-toggle"
3207
+ aria-haspopup="listbox"
3208
+ aria-expanded="false"
3209
+ >
3210
+ <span class="pf-v5-c-options-menu__toggle-text">
3211
+ <b>1 - 10</b>&nbsp;of&nbsp;
3212
+ <b>36</b>
3213
+ </span>
3214
+ <div class="pf-v5-c-options-menu__toggle-icon">
3215
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3216
+ </div>
3217
+ </button>
3218
+ <ul
3219
+ class="pf-v5-c-options-menu__menu"
3220
+ role="menu"
3221
+ aria-labelledby="toolbar-pagination-management-example-toolbar-pagination-options-menu-toggle"
3222
+ hidden
3223
+ >
3224
+ <li role="none">
3225
+ <button
3226
+ class="pf-v5-c-options-menu__menu-item"
3227
+ type="button"
3228
+ role="menuitem"
3229
+ >5 per page</button>
3230
+ </li>
3231
+ <li role="none">
3232
+ <button
3233
+ class="pf-v5-c-options-menu__menu-item"
3234
+ type="button"
3235
+ role="menuitem"
3236
+ >
3237
+ 10 per page
3238
+ <div class="pf-v5-c-options-menu__menu-item-icon">
3239
+ <i class="fas fa-check" aria-hidden="true"></i>
3240
+ </div>
3241
+ </button>
3242
+ </li>
3243
+ <li role="none">
3244
+ <button
3245
+ class="pf-v5-c-options-menu__menu-item"
3246
+ type="button"
3247
+ role="menuitem"
3248
+ >20 per page</button>
3249
+ </li>
3250
+ </ul>
3251
+ </div>
3416
3252
  </div>
3417
3253
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
3418
3254
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -4044,55 +3880,57 @@ section: components
4044
3880
  </tbody>
4045
3881
  </table>
4046
3882
  <div class="pf-v5-c-pagination pf-m-bottom">
4047
- <div class="pf-v5-c-options-menu pf-m-top">
4048
- <button
4049
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
4050
- type="button"
4051
- id="pagination-options-menu-bottom-collapsed-example-toggle"
4052
- aria-haspopup="listbox"
4053
- aria-expanded="false"
4054
- >
4055
- <span class="pf-v5-c-options-menu__toggle-text">
4056
- <b>1 - 10</b>&nbsp;of&nbsp;
4057
- <b>36</b>
4058
- </span>
4059
- <div class="pf-v5-c-options-menu__toggle-icon">
4060
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4061
- </div>
4062
- </button>
4063
- <ul
4064
- class="pf-v5-c-options-menu__menu pf-m-top"
4065
- role="menu"
4066
- aria-labelledby="pagination-options-menu-bottom-collapsed-example-toggle"
4067
- hidden
4068
- >
4069
- <li role="none">
4070
- <button
4071
- class="pf-v5-c-options-menu__menu-item"
4072
- type="button"
4073
- role="menuitem"
4074
- >5 per page</button>
4075
- </li>
4076
- <li role="none">
4077
- <button
4078
- class="pf-v5-c-options-menu__menu-item"
4079
- type="button"
4080
- role="menuitem"
4081
- >
4082
- 10 per page
4083
- <div class="pf-v5-c-options-menu__menu-item-icon">
4084
- <i class="fas fa-check" aria-hidden="true"></i>
4085
- </div>
4086
- </button>
4087
- </li>
4088
- <li role="none">
4089
- <button
4090
- class="pf-v5-c-options-menu__menu-item"
4091
- type="button"
4092
- role="menuitem"
4093
- >20 per page</button>
4094
- </li>
4095
- </ul>
3883
+ <div class="pf-v5-c-pagination__page-menu">
3884
+ <div class="pf-v5-c-options-menu pf-m-top">
3885
+ <button
3886
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3887
+ type="button"
3888
+ id="pagination-options-menu-bottom-collapsed-example-toggle"
3889
+ aria-haspopup="listbox"
3890
+ aria-expanded="false"
3891
+ >
3892
+ <span class="pf-v5-c-options-menu__toggle-text">
3893
+ <b>1 - 10</b>&nbsp;of&nbsp;
3894
+ <b>36</b>
3895
+ </span>
3896
+ <div class="pf-v5-c-options-menu__toggle-icon">
3897
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3898
+ </div>
3899
+ </button>
3900
+ <ul
3901
+ class="pf-v5-c-options-menu__menu pf-m-top"
3902
+ role="menu"
3903
+ aria-labelledby="pagination-options-menu-bottom-collapsed-example-toggle"
3904
+ hidden
3905
+ >
3906
+ <li role="none">
3907
+ <button
3908
+ class="pf-v5-c-options-menu__menu-item"
3909
+ type="button"
3910
+ role="menuitem"
3911
+ >5 per page</button>
3912
+ </li>
3913
+ <li role="none">
3914
+ <button
3915
+ class="pf-v5-c-options-menu__menu-item"
3916
+ type="button"
3917
+ role="menuitem"
3918
+ >
3919
+ 10 per page
3920
+ <div class="pf-v5-c-options-menu__menu-item-icon">
3921
+ <i class="fas fa-check" aria-hidden="true"></i>
3922
+ </div>
3923
+ </button>
3924
+ </li>
3925
+ <li role="none">
3926
+ <button
3927
+ class="pf-v5-c-options-menu__menu-item"
3928
+ type="button"
3929
+ role="menuitem"
3930
+ >20 per page</button>
3931
+ </li>
3932
+ </ul>
3933
+ </div>
4096
3934
  </div>
4097
3935
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
4098
3936
  <div class="pf-v5-c-pagination__nav-control pf-m-first">