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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (341) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +1005 -856
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +319 -290
  25. package/base/tokens/_tokens-default.scss +485 -329
  26. package/base/tokens/_tokens-font.scss +122 -58
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +27 -16
  52. package/components/Breadcrumb/breadcrumb.scss +27 -18
  53. package/components/Button/button.css +398 -354
  54. package/components/Button/button.scss +455 -477
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/DualListSelector/dual-list-selector.css +54 -51
  84. package/components/DualListSelector/dual-list-selector.scss +55 -54
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +66 -116
  92. package/components/Form/form.scss +63 -128
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +378 -355
  110. package/components/Label/label.scss +431 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +68 -112
  114. package/components/Login/login.scss +54 -82
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +388 -417
  118. package/components/Menu/menu.scss +370 -525
  119. package/components/MenuToggle/menu-toggle.css +223 -276
  120. package/components/MenuToggle/menu-toggle.scss +322 -390
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +4 -4
  128. package/components/NotificationBadge/notification-badge.scss +4 -4
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +32 -52
  152. package/components/SimpleList/simple-list.scss +37 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +31 -47
  166. package/components/Table/table-grid.scss +42 -55
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +81 -74
  170. package/components/Table/table-tree-view.scss +53 -39
  171. package/components/Table/table.css +159 -264
  172. package/components/Table/table.scss +216 -351
  173. package/components/Tabs/tabs.css +142 -175
  174. package/components/Tabs/tabs.scss +158 -218
  175. package/components/TextInputGroup/text-input-group.css +0 -14
  176. package/components/TextInputGroup/text-input-group.scss +3 -16
  177. package/components/Tile/tile.css +40 -81
  178. package/components/Tile/tile.scss +38 -84
  179. package/components/Timestamp/timestamp.css +12 -9
  180. package/components/Timestamp/timestamp.scss +11 -10
  181. package/components/Title/title.css +70 -19
  182. package/components/Title/title.scss +90 -20
  183. package/components/ToggleGroup/toggle-group.css +54 -48
  184. package/components/ToggleGroup/toggle-group.scss +62 -50
  185. package/components/Toolbar/toolbar.css +2527 -1031
  186. package/components/Toolbar/toolbar.scss +233 -520
  187. package/components/Tooltip/tooltip.css +16 -18
  188. package/components/Tooltip/tooltip.scss +20 -24
  189. package/components/TreeView/tree-view.css +76 -97
  190. package/components/TreeView/tree-view.scss +82 -113
  191. package/components/Truncate/truncate.css +4 -0
  192. package/components/Truncate/truncate.scss +3 -0
  193. package/components/Wizard/wizard.css +122 -205
  194. package/components/Wizard/wizard.scss +121 -181
  195. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  196. package/docs/components/Accordion/examples/Accordion.md +614 -416
  197. package/docs/components/ActionList/examples/ActionList.md +73 -22
  198. package/docs/components/Alert/examples/Alert.md +3 -3
  199. package/docs/components/Avatar/examples/Avatar.md +5 -19
  200. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  201. package/docs/components/Badge/examples/Badge.md +21 -0
  202. package/docs/components/Banner/examples/Banner.md +48 -25
  203. package/docs/components/Brand/examples/Brand.css +12 -0
  204. package/docs/components/Brand/examples/Brand.md +51 -32
  205. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  206. package/docs/components/Button/examples/Button.css +4 -0
  207. package/docs/components/Button/examples/Button.md +1439 -113
  208. package/docs/components/CalendarMonth/examples/CalendarMonth.md +44 -220
  209. package/docs/components/Card/examples/Card.md +550 -133
  210. package/docs/components/Check/examples/Check.md +1 -0
  211. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  212. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  213. package/docs/components/Content/examples/Content.md +5 -5
  214. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  215. package/docs/components/Divider/examples/Divider.css +3 -1
  216. package/docs/components/Divider/examples/Divider.md +30 -5
  217. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  218. package/docs/components/Drawer/examples/Drawer.md +294 -256
  219. package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
  220. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  221. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  222. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  223. package/docs/components/Form/examples/Form.md +134 -89
  224. package/docs/components/Icon/examples/Icon.md +82 -11
  225. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  226. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  227. package/docs/components/Label/examples/Label.css +4 -0
  228. package/docs/components/Label/examples/Label.md +3090 -703
  229. package/docs/components/LogViewer/examples/LogViewer.md +100 -80
  230. package/docs/components/Login/examples/Login.md +160 -105
  231. package/docs/components/Masthead/examples/masthead.md +443 -65
  232. package/docs/components/Menu/examples/Menu.css +7 -11
  233. package/docs/components/Menu/examples/Menu.md +213 -486
  234. package/docs/components/MenuToggle/examples/MenuToggle.md +253 -224
  235. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  236. package/docs/components/Nav/examples/Navigation.css +1 -23
  237. package/docs/components/Nav/examples/Navigation.md +69 -243
  238. package/docs/components/Page/examples/Page.css +0 -8
  239. package/docs/components/Page/examples/Page.md +22 -21
  240. package/docs/components/Pagination/examples/Pagination.md +663 -637
  241. package/docs/components/Panel/examples/Panel.md +12 -0
  242. package/docs/components/Popover/examples/Popover.md +1 -1
  243. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  244. package/docs/components/Radio/examples/Radio.md +1 -1
  245. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  246. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  247. package/docs/components/TabContent/examples/TabContent.md +10 -10
  248. package/docs/components/Table/examples/Table.md +8 -8
  249. package/docs/components/Tabs/examples/Tabs.css +1 -1
  250. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  251. package/docs/components/Tile/examples/Tile.md +264 -144
  252. package/docs/components/Title/examples/Title.md +18 -0
  253. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  254. package/docs/components/Toolbar/examples/Toolbar.md +985 -3341
  255. package/docs/components/TreeView/examples/TreeView.md +7 -57
  256. package/docs/components/Truncate/examples/Truncate.css +2 -2
  257. package/docs/components/Wizard/examples/Wizard.md +31 -7
  258. package/docs/demos/AboutModal/examples/AboutModal.md +116 -35
  259. package/docs/demos/Alert/examples/Alert.md +366 -99
  260. package/docs/demos/BackToTop/examples/BackToTop.md +114 -33
  261. package/docs/demos/Banner/examples/Banner.md +235 -68
  262. package/docs/demos/Button/examples/Button.md +1 -1
  263. package/docs/demos/Card/examples/Card.md +2 -2
  264. package/docs/demos/CardView/examples/CardView.md +256 -192
  265. package/docs/demos/ContextSelector/examples/ContextSelector.md +414 -107
  266. package/docs/demos/Dashboard/examples/Dashboard.md +114 -33
  267. package/docs/demos/DataList/examples/DataList.md +1049 -950
  268. package/docs/demos/DescriptionList/examples/DescriptionList.md +342 -99
  269. package/docs/demos/Drawer/examples/Drawer.md +700 -271
  270. package/docs/demos/Form/examples/BasicForms.md +138 -84
  271. package/docs/demos/JumpLinks/examples/JumpLinks.md +989 -409
  272. package/docs/demos/Masthead/examples/Masthead.md +833 -357
  273. package/docs/demos/Modal/examples/Modal.md +717 -222
  274. package/docs/demos/Nav/examples/Nav.md +763 -926
  275. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +575 -165
  276. package/docs/demos/Page/examples/Page.md +1050 -309
  277. package/docs/demos/Page/examples/Penta.md +73 -31
  278. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +20 -16
  279. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  280. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1276 -861
  281. package/docs/demos/Skeleton/examples/Skeleton.md +114 -33
  282. package/docs/demos/Table/examples/Table.md +4002 -3503
  283. package/docs/demos/Tabs/examples/Tabs.md +711 -219
  284. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  285. package/docs/demos/Toolbar/examples/Toolbar.md +1350 -1480
  286. package/docs/demos/Wizard/examples/Wizard.md +1134 -315
  287. package/docs/layouts/Flex/examples/Flex.md +11 -11
  288. package/package.json +32 -32
  289. package/patternfly-base-no-globals-theme-dark-unversioned.css +1021 -868
  290. package/patternfly-base-no-globals.css +1021 -868
  291. package/patternfly-base-theme-dark-unversioned.css +1027 -873
  292. package/patternfly-base.css +1027 -873
  293. package/patternfly-no-globals.css +9048 -8979
  294. package/patternfly-theme-dark-unversioned.css +9051 -8981
  295. package/patternfly.css +9051 -8981
  296. package/patternfly.min.css +1 -1
  297. package/patternfly.min.css.map +1 -1
  298. package/sass-utilities/mixins.scss +18 -0
  299. package/base/themes/dark/_variables.scss +0 -102
  300. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  301. package/components/Accordion/themes/dark/accordion.scss +0 -9
  302. package/components/Alert/themes/dark/alert.scss +0 -17
  303. package/components/Badge/themes/dark/badge.scss +0 -9
  304. package/components/Banner/themes/dark/banner.scss +0 -14
  305. package/components/Button/themes/dark/button.scss +0 -51
  306. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  307. package/components/Card/themes/dark/card.scss +0 -20
  308. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  309. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  310. package/components/DataList/themes/dark/data-list.scss +0 -10
  311. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  312. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  313. package/components/Drawer/themes/dark/drawer.scss +0 -13
  314. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  315. package/components/Form/themes/dark/form.scss +0 -7
  316. package/components/FormControl/themes/dark/form-control.scss +0 -24
  317. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  318. package/components/Hint/themes/dark/hint.scss +0 -8
  319. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  320. package/components/Label/themes/dark/label.scss +0 -53
  321. package/components/Login/themes/dark/login.scss +0 -12
  322. package/components/Masthead/themes/dark/masthead.scss +0 -14
  323. package/components/MenuToggle/themes/dark/menu-toggle.scss +0 -27
  324. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  325. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  326. package/components/Page/themes/dark/page.scss +0 -69
  327. package/components/Pagination/themes/dark/pagination.scss +0 -7
  328. package/components/Panel/themes/dark/panel.scss +0 -7
  329. package/components/Popover/themes/dark/popover.scss +0 -11
  330. package/components/Progress/themes/dark/progress.scss +0 -9
  331. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  332. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  333. package/components/Switch/themes/dark/switch.scss +0 -11
  334. package/components/Tabs/themes/dark/tabs.scss +0 -10
  335. package/components/TextInputGroup/themes/dark/text-input-group.scss +0 -11
  336. package/components/Tile/themes/dark/tile.scss +0 -10
  337. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  338. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  339. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  340. package/components/Wizard/themes/dark/wizard.scss +0 -12
  341. package/docs/components/Avatar/examples/Avatar.css +0 -3
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -15,15 +15,17 @@ 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
- <i class="fas fa-filter" aria-hidden="true"></i>
26
+ <span class="pf-v5-c-menu-toggle__icon">
27
+ <i class="fas fa-filter" aria-hidden="true"></i>
28
+ </span>
27
29
  </button>
28
30
  </div>
29
31
  <div class="pf-v5-c-toolbar__item pf-m-search-filter">
@@ -33,72 +35,22 @@ section: components
33
35
  role="group"
34
36
  >
35
37
  <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">
38
+ <button
39
+ class="pf-v5-c-menu-toggle"
40
+ type="button"
41
+ aria-expanded="false"
42
+ id="toolbar-attribute-value-search-filter-desktop-example-search-filter-menu"
43
+ >
44
+ <span class="pf-v5-c-menu-toggle__icon">
45
+ <i class="fas fa-filter" aria-hidden="true"></i>
46
+ </span>
47
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
48
+ <span class="pf-v5-c-menu-toggle__controls">
49
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
57
50
  <i class="fas fa-caret-down" aria-hidden="true"></i>
58
51
  </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>
52
+ </span>
53
+ </button>
102
54
  </div>
103
55
  <div class="pf-v5-c-input-group__item pf-m-fill">
104
56
  <div class="pf-v5-c-text-input-group">
@@ -178,55 +130,57 @@ section: components
178
130
  <div
179
131
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
180
132
  >
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>
133
+ <div class="pf-v5-c-pagination__page-menu">
134
+ <div class="pf-v5-c-options-menu">
135
+ <button
136
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
137
+ type="button"
138
+ id="toolbar-attribute-value-search-filter-desktop-example-pagination-options-menu-toggle"
139
+ aria-haspopup="listbox"
140
+ aria-expanded="false"
141
+ >
142
+ <span class="pf-v5-c-options-menu__toggle-text">
143
+ <b>1 - 10</b>&nbsp;of&nbsp;
144
+ <b>36</b>
145
+ </span>
146
+ <div class="pf-v5-c-options-menu__toggle-icon">
147
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
148
+ </div>
149
+ </button>
150
+ <ul
151
+ class="pf-v5-c-options-menu__menu"
152
+ role="menu"
153
+ aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-pagination-options-menu-toggle"
154
+ hidden
155
+ >
156
+ <li role="none">
157
+ <button
158
+ class="pf-v5-c-options-menu__menu-item"
159
+ type="button"
160
+ role="menuitem"
161
+ >5 per page</button>
162
+ </li>
163
+ <li role="none">
164
+ <button
165
+ class="pf-v5-c-options-menu__menu-item"
166
+ type="button"
167
+ role="menuitem"
168
+ >
169
+ 10 per page
170
+ <div class="pf-v5-c-options-menu__menu-item-icon">
171
+ <i class="fas fa-check" aria-hidden="true"></i>
172
+ </div>
173
+ </button>
174
+ </li>
175
+ <li role="none">
176
+ <button
177
+ class="pf-v5-c-options-menu__menu-item"
178
+ type="button"
179
+ role="menuitem"
180
+ >20 per page</button>
181
+ </li>
182
+ </ul>
183
+ </div>
230
184
  </div>
231
185
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
232
186
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -288,23 +242,117 @@ section: components
288
242
  </span>
289
243
  <div class="pf-v5-c-masthead__main">
290
244
  <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
- />
245
+ <svg height="40px" viewBox="0 0 679 158">
246
+ <title>PF-HorizontalLogo-Color</title>
247
+ <defs>
248
+ <linearGradient
249
+ x1="68%"
250
+ y1="2.25860997e-13%"
251
+ x2="32%"
252
+ y2="100%"
253
+ id="linearGradient-toolbar-pagination-management-example-masthead"
254
+ >
255
+ <stop stop-color="#2B9AF3" offset="0%" />
256
+ <stop
257
+ stop-color="#73BCF7"
258
+ stop-opacity="0.502212631"
259
+ offset="100%"
260
+ />
261
+ </linearGradient>
262
+ </defs>
263
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
264
+ <g
265
+ transform="translate(206.000000, 45.750000)"
266
+ fill="var(--pf-t--global--text--color--regular)"
267
+ fill-rule="nonzero"
268
+ >
269
+ <path
270
+ 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"
271
+ />
272
+ <path
273
+ 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"
274
+ />
275
+ <path
276
+ 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"
277
+ />
278
+ <path
279
+ 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"
280
+ />
281
+ <path
282
+ 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"
283
+ />
284
+ <path
285
+ 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"
286
+ />
287
+ <path
288
+ 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"
289
+ />
290
+ <polygon
291
+ 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"
292
+ />
293
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
294
+ <path
295
+ 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"
296
+ />
297
+ </g>
298
+ <g transform="translate(0.000000, 0.000000)">
299
+ <path
300
+ 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"
301
+ fill="#0066CC"
302
+ />
303
+ <path
304
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
305
+ fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
306
+ />
307
+ <path
308
+ 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"
309
+ fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
310
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
311
+ />
312
+ </g>
313
+ </g>
314
+ </svg>
297
315
  </a>
298
316
  </div>
299
317
  <div class="pf-v5-c-masthead__content">
300
318
  <div
301
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
319
+ class="pf-v5-c-toolbar pf-m-static"
302
320
  id="toolbar-pagination-management-example-masthead-toolbar"
303
321
  >
304
322
  <div class="pf-v5-c-toolbar__content">
305
323
  <div class="pf-v5-c-toolbar__content-section">
324
+ <div class="pf-v5-c-toolbar__item">
325
+ <button
326
+ class="pf-v5-c-menu-toggle"
327
+ type="button"
328
+ aria-expanded="false"
329
+ >
330
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
331
+ <span class="pf-v5-c-menu-toggle__controls">
332
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
333
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
334
+ </span>
335
+ </span>
336
+ </button>
337
+ </div>
338
+
339
+ <div class="pf-v5-c-toolbar__item">
340
+ <button
341
+ class="pf-v5-c-menu-toggle"
342
+ type="button"
343
+ aria-expanded="false"
344
+ >
345
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
346
+ <span class="pf-v5-c-menu-toggle__controls">
347
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
348
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
349
+ </span>
350
+ </span>
351
+ </button>
352
+ </div>
353
+
306
354
  <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"
355
+ 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
356
  >
309
357
  <div
310
358
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -316,7 +364,9 @@ section: components
316
364
  aria-expanded="false"
317
365
  aria-label="Application launcher"
318
366
  >
319
- <i class="fas fa-th" aria-hidden="true"></i>
367
+ <span class="pf-v5-c-menu-toggle__icon">
368
+ <i class="fas fa-th" aria-hidden="true"></i>
369
+ </span>
320
370
  </button>
321
371
  </div>
322
372
  <div class="pf-v5-c-toolbar__item">
@@ -326,7 +376,9 @@ section: components
326
376
  aria-expanded="false"
327
377
  aria-label="Settings"
328
378
  >
329
- <i class="fas fa-cog" aria-hidden="true"></i>
379
+ <span class="pf-v5-c-menu-toggle__icon">
380
+ <i class="fas fa-cog" aria-hidden="true"></i>
381
+ </span>
330
382
  </button>
331
383
  </div>
332
384
  <div class="pf-v5-c-toolbar__item">
@@ -336,7 +388,9 @@ section: components
336
388
  aria-expanded="false"
337
389
  aria-label="Help"
338
390
  >
339
- <i class="fas fa-question-circle" aria-hidden="true"></i>
391
+ <span class="pf-v5-c-menu-toggle__icon">
392
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
393
+ </span>
340
394
  </button>
341
395
  </div>
342
396
  </div>
@@ -347,31 +401,12 @@ section: components
347
401
  aria-expanded="false"
348
402
  aria-label="Actions"
349
403
  >
350
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
404
+ <span class="pf-v5-c-menu-toggle__icon">
405
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
406
+ </span>
351
407
  </button>
352
408
  </div>
353
409
  </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
410
  </div>
376
411
  </div>
377
412
  </div>
@@ -462,17 +497,19 @@ section: components
462
497
  <div class="pf-v5-c-toolbar__content">
463
498
  <div class="pf-v5-c-toolbar__content-section">
464
499
  <div
465
- class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-2xl"
500
+ class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg"
466
501
  >
467
- <div class="pf-v5-c-toolbar__toggle">
502
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
468
503
  <button
469
- class="pf-v5-c-button pf-m-plain"
504
+ class="pf-v5-c-menu-toggle pf-m-plain"
470
505
  type="button"
471
- aria-label="Show filters"
472
506
  aria-expanded="false"
507
+ aria-label="Show filters"
473
508
  aria-controls="toolbar-with-validation-example-expandable-content"
474
509
  >
475
- <i class="fas fa-filter" aria-hidden="true"></i>
510
+ <span class="pf-v5-c-menu-toggle__icon">
511
+ <i class="fas fa-filter" aria-hidden="true"></i>
512
+ </span>
476
513
  </button>
477
514
  </div>
478
515
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
@@ -482,153 +519,106 @@ section: components
482
519
  aria-label="search filter"
483
520
  role="group"
484
521
  >
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
-
522
+ <div class="pf-v5-c-input-group__item">
491
523
  <button
492
- class="pf-v5-c-select__toggle"
524
+ class="pf-v5-c-menu-toggle"
493
525
  type="button"
494
- id="toolbar-with-validation-example-select-month-toggle"
495
- aria-haspopup="true"
496
526
  aria-expanded="false"
497
- aria-labelledby="toolbar-with-validation-example-select-month-label toolbar-with-validation-example-select-month-toggle"
527
+ id="toolbar-with-validation-example-month"
498
528
  >
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>
529
+ <span class="pf-v5-c-menu-toggle__icon">
530
+ <i class="fas fa-filter" aria-hidden="true"></i>
531
+ </span>
532
+ <span class="pf-v5-c-menu-toggle__text">Last month</span>
533
+ <span class="pf-v5-c-menu-toggle__controls">
534
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
535
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
502
536
  </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
537
  </span>
508
538
  </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
539
  </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"
540
+ <div class="pf-v5-c-input-group__item">
541
+ <div class="pf-v5-c-date-picker">
542
+ <div class="pf-v5-c-date-picker__input">
543
+ <div
544
+ class="pf-v5-c-input-group"
545
+ aria-label="search filter"
546
+ role="group"
574
547
  >
575
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
576
- </button>
548
+ <span class="pf-v5-c-form-control">
549
+ <input
550
+ type="text"
551
+ value="2020-03-05"
552
+ id="toolbar-with-validation-example-helper-text-input"
553
+ name="toolbar-with-validation-example-helper-text-input"
554
+ aria-label="Date picker"
555
+ />
556
+ </span>
557
+ <button
558
+ class="pf-v5-c-button pf-m-control"
559
+ type="button"
560
+ aria-label="Toggle date picker"
561
+ >
562
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
563
+ </button>
564
+ </div>
577
565
  </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>
566
+ <div class="pf-v5-c-date-picker__helper-text">
567
+ <div class="pf-v5-c-helper-text">
568
+ <div class="pf-v5-c-helper-text__item">
569
+ <span
570
+ class="pf-v5-c-helper-text__item-text"
571
+ >MM/DD/YYYY</span>
572
+ </div>
585
573
  </div>
586
574
  </div>
587
575
  </div>
588
576
  </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>
577
+ <div class="pf-v5-c-input-group__item">
578
+ <div class="pf-v5-c-date-picker">
579
+ <div class="pf-v5-c-date-picker__input">
580
+ <div
581
+ class="pf-v5-c-input-group"
582
+ aria-label="search filter"
583
+ role="group"
584
+ >
585
+ <span class="pf-v5-c-form-control pf-m-error">
586
+ <input
587
+ aria-invalid="true"
588
+ type="text"
589
+ value="2020-03-05"
590
+ id="toolbar-with-validation-example-invalid-input"
591
+ name="toolbar-with-validation-example-invalid-input"
592
+ aria-label="Date picker"
593
+ />
594
+ <span class="pf-v5-c-form-control__utilities">
595
+ <span
596
+ class="pf-v5-c-form-control__icon pf-m-status"
597
+ >
598
+ <i
599
+ class="fas fa-exclamation-circle"
600
+ aria-hidden="true"
601
+ ></i>
602
+ </span>
613
603
  </span>
614
604
  </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>
605
+ <button
606
+ class="pf-v5-c-button pf-m-control"
607
+ type="button"
608
+ aria-label="Toggle date picker"
609
+ >
610
+ <i class="fas fa-calendar-alt" aria-hidden="true"></i>
611
+ </button>
612
+ </div>
613
+ <div class="pf-v5-c-date-picker__helper-text"></div>
623
614
  </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>
615
+ <div class="pf-v5-c-date-picker__helper-text">
616
+ <div class="pf-v5-c-helper-text">
617
+ <div class="pf-v5-c-helper-text__item">
618
+ <span
619
+ class="pf-v5-c-helper-text__item-text"
620
+ >Max: 08/10/2022</span>
621
+ </div>
632
622
  </div>
633
623
  </div>
634
624
  </div>
@@ -643,75 +633,22 @@ section: components
643
633
  role="group"
644
634
  >
645
635
  <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">
636
+ <button
637
+ class="pf-v5-c-menu-toggle"
638
+ type="button"
639
+ aria-expanded="false"
640
+ id="toolbar-with-validation-example-search-filter-menu"
641
+ >
642
+ <span class="pf-v5-c-menu-toggle__icon">
643
+ <i class="fas fa-filter" aria-hidden="true"></i>
644
+ </span>
645
+ <span class="pf-v5-c-menu-toggle__text">Description</span>
646
+ <span class="pf-v5-c-menu-toggle__controls">
647
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
667
648
  <i class="fas fa-caret-down" aria-hidden="true"></i>
668
649
  </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>
650
+ </span>
651
+ </button>
715
652
  </div>
716
653
  <div class="pf-v5-c-input-group__item pf-m-fill">
717
654
  <div class="pf-v5-c-text-input-group">
@@ -723,7 +660,7 @@ section: components
723
660
  <input
724
661
  class="pf-v5-c-text-input-group__text-input"
725
662
  type="text"
726
- placeholder="Filter by Description"
663
+ placeholder="Description"
727
664
  value
728
665
  aria-label="Search input"
729
666
  />
@@ -1347,15 +1284,17 @@ section: components
1347
1284
  <div class="pf-v5-c-toolbar__content">
1348
1285
  <div class="pf-v5-c-toolbar__content-section">
1349
1286
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
1350
- <div class="pf-v5-c-toolbar__toggle pf-m-expanded">
1287
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1351
1288
  <button
1352
- class="pf-v5-c-button pf-m-plain"
1289
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
1353
1290
  type="button"
1354
- aria-label="Show filters"
1355
1291
  aria-expanded="true"
1292
+ aria-label="Show filters"
1356
1293
  aria-controls="toolbar-attribute-value-search-filter-mobile-example-expandable-content"
1357
1294
  >
1358
- <i class="fas fa-filter" aria-hidden="true"></i>
1295
+ <span class="pf-v5-c-menu-toggle__icon">
1296
+ <i class="fas fa-filter" aria-hidden="true"></i>
1297
+ </span>
1359
1298
  </button>
1360
1299
  </div>
1361
1300
  </div>
@@ -1411,55 +1350,57 @@ section: components
1411
1350
  <div
1412
1351
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
1413
1352
  >
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>
1353
+ <div class="pf-v5-c-pagination__page-menu">
1354
+ <div class="pf-v5-c-options-menu">
1355
+ <button
1356
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1357
+ type="button"
1358
+ id="toolbar-attribute-value-search-filter-mobile-example-pagination-options-menu-toggle"
1359
+ aria-haspopup="listbox"
1360
+ aria-expanded="false"
1361
+ >
1362
+ <span class="pf-v5-c-options-menu__toggle-text">
1363
+ <b>1 - 10</b>&nbsp;of&nbsp;
1364
+ <b>36</b>
1365
+ </span>
1366
+ <div class="pf-v5-c-options-menu__toggle-icon">
1367
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1368
+ </div>
1369
+ </button>
1370
+ <ul
1371
+ class="pf-v5-c-options-menu__menu"
1372
+ role="menu"
1373
+ aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-pagination-options-menu-toggle"
1374
+ hidden
1375
+ >
1376
+ <li role="none">
1377
+ <button
1378
+ class="pf-v5-c-options-menu__menu-item"
1379
+ type="button"
1380
+ role="menuitem"
1381
+ >5 per page</button>
1382
+ </li>
1383
+ <li role="none">
1384
+ <button
1385
+ class="pf-v5-c-options-menu__menu-item"
1386
+ type="button"
1387
+ role="menuitem"
1388
+ >
1389
+ 10 per page
1390
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1391
+ <i class="fas fa-check" aria-hidden="true"></i>
1392
+ </div>
1393
+ </button>
1394
+ </li>
1395
+ <li role="none">
1396
+ <button
1397
+ class="pf-v5-c-options-menu__menu-item"
1398
+ type="button"
1399
+ role="menuitem"
1400
+ >20 per page</button>
1401
+ </li>
1402
+ </ul>
1403
+ </div>
1463
1404
  </div>
1464
1405
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
1465
1406
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -1497,72 +1438,22 @@ section: components
1497
1438
  role="group"
1498
1439
  >
1499
1440
  <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">
1441
+ <button
1442
+ class="pf-v5-c-menu-toggle"
1443
+ type="button"
1444
+ aria-expanded="false"
1445
+ id="toolbar-attribute-value-search-filter-mobile-example-search-filter-menu"
1446
+ >
1447
+ <span class="pf-v5-c-menu-toggle__icon">
1448
+ <i class="fas fa-filter" aria-hidden="true"></i>
1449
+ </span>
1450
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
1451
+ <span class="pf-v5-c-menu-toggle__controls">
1452
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1521
1453
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1522
1454
  </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>
1455
+ </span>
1456
+ </button>
1566
1457
  </div>
1567
1458
  <div class="pf-v5-c-input-group__item pf-m-fill">
1568
1459
  <div class="pf-v5-c-text-input-group">
@@ -1595,155 +1486,118 @@ section: components
1595
1486
  ```html
1596
1487
  <div
1597
1488
  class="pf-v5-c-toolbar"
1598
- id="toolbar-attribute-value-single-select-filter-desktop-example"
1489
+ id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example"
1599
1490
  >
1600
1491
  <div class="pf-v5-c-toolbar__content">
1601
1492
  <div class="pf-v5-c-toolbar__content-section">
1602
1493
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
1603
- <div class="pf-v5-c-toolbar__toggle">
1494
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1604
1495
  <button
1605
- class="pf-v5-c-button pf-m-plain"
1496
+ class="pf-v5-c-menu-toggle pf-m-plain"
1606
1497
  type="button"
1607
- aria-label="Show filters"
1608
1498
  aria-expanded="false"
1609
- aria-controls="toolbar-attribute-value-single-select-filter-desktop-example-expandable-content"
1499
+ aria-label="Show filters"
1500
+ aria-controls="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-expandable-content"
1610
1501
  >
1611
- <i class="fas fa-filter" aria-hidden="true"></i>
1502
+ <span class="pf-v5-c-menu-toggle__icon">
1503
+ <i class="fas fa-filter" aria-hidden="true"></i>
1504
+ </span>
1612
1505
  </button>
1613
1506
  </div>
1614
1507
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
1615
1508
  <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">
1509
+ <button
1510
+ class="pf-v5-c-menu-toggle"
1511
+ type="button"
1512
+ aria-expanded="false"
1513
+ id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-menu-toggle-status"
1514
+ >
1515
+ <span class="pf-v5-c-menu-toggle__icon">
1516
+ <i class="fas fa-filter" aria-hidden="true"></i>
1517
+ </span>
1518
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
1519
+ <span class="pf-v5-c-menu-toggle__controls">
1520
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1637
1521
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1638
1522
  </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>
1523
+ </span>
1524
+ </button>
1683
1525
  </div>
1684
1526
  <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">
1527
+ <button
1528
+ class="pf-v5-c-menu-toggle pf-m-expanded"
1529
+ type="button"
1530
+ aria-expanded="true"
1531
+ id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-menu-toggle-stopped"
1532
+ >
1533
+ <span class="pf-v5-c-menu-toggle__text">Stopped</span>
1534
+ <span class="pf-v5-c-menu-toggle__controls">
1535
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1703
1536
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1704
1537
  </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>
1538
+ </span>
1539
+ </button>
1540
+ <div class="pf-v5-c-panel">
1541
+ <div class="pf-v5-c-menu" width="175px">
1542
+ <div class="pf-v5-c-menu__content">
1543
+ <section class="pf-v5-c-menu__group">
1544
+ <ul class="pf-v5-c-menu__list" role="menu">
1545
+ <li class="pf-v5-c-menu__list-item" role="none">
1546
+ <button
1547
+ class="pf-v5-c-menu__item"
1548
+ type="button"
1549
+ role="menuitem"
1550
+ >
1551
+ <span class="pf-v5-c-menu__item-text">Running</span>
1552
+ </button>
1553
+ </li>
1554
+ <li class="pf-v5-c-menu__list-item" role="none">
1555
+ <button
1556
+ class="pf-v5-c-menu__item pf-m-selected"
1557
+ type="button"
1558
+ role="menuitem"
1559
+ >
1560
+ <span class="pf-v5-c-menu__item-main">
1561
+ <span class="pf-v5-c-menu__item-text">Stopped</span>
1562
+ <span class="pf-v5-c-menu__item-select-icon">
1563
+ <i class="fas fa-check" aria-hidden="true"></i>
1564
+ </span>
1565
+ </span>
1566
+ </button>
1567
+ </li>
1568
+ <li class="pf-v5-c-menu__list-item" role="none">
1569
+ <button
1570
+ class="pf-v5-c-menu__item"
1571
+ type="button"
1572
+ role="menuitem"
1573
+ >
1574
+ <span class="pf-v5-c-menu__item-text">Down</span>
1575
+ </button>
1576
+ </li>
1577
+ <li class="pf-v5-c-menu__list-item" role="none">
1578
+ <button
1579
+ class="pf-v5-c-menu__item"
1580
+ type="button"
1581
+ role="menuitem"
1582
+ >
1583
+ <span class="pf-v5-c-menu__item-text">Degraded</span>
1584
+ </button>
1585
+ </li>
1586
+ <li class="pf-v5-c-menu__list-item" role="none">
1587
+ <button
1588
+ class="pf-v5-c-menu__item"
1589
+ type="button"
1590
+ role="menuitem"
1591
+ >
1592
+ <span
1593
+ class="pf-v5-c-menu__item-text"
1594
+ >Needs maintenance</span>
1595
+ </button>
1596
+ </li>
1597
+ </ul>
1598
+ </section>
1599
+ </div>
1600
+ </div>
1747
1601
  </div>
1748
1602
  </div>
1749
1603
  </div>
@@ -1751,7 +1605,7 @@ section: components
1751
1605
  <div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
1752
1606
  <div
1753
1607
  class="pf-v5-c-overflow-menu"
1754
- id="toolbar-attribute-value-single-select-filter-desktop-example-overflow-menu"
1608
+ id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-overflow-menu"
1755
1609
  >
1756
1610
  <div class="pf-v5-c-overflow-menu__content">
1757
1611
  <div class="pf-v5-c-overflow-menu__group pf-m-button-group">
@@ -1775,7 +1629,7 @@ section: components
1775
1629
  <button
1776
1630
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
1777
1631
  type="button"
1778
- id="toolbar-attribute-value-single-select-filter-desktop-example-overflow-menu-dropdown-toggle"
1632
+ id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-overflow-menu-dropdown-toggle"
1779
1633
  aria-label="Overflow menu"
1780
1634
  aria-expanded="false"
1781
1635
  >
@@ -1784,7 +1638,7 @@ section: components
1784
1638
  <ul
1785
1639
  class="pf-v5-c-dropdown__menu"
1786
1640
  role="menu"
1787
- aria-labelledby="toolbar-attribute-value-single-select-filter-desktop-example-overflow-menu-dropdown-toggle"
1641
+ aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-overflow-menu-dropdown-toggle"
1788
1642
  hidden
1789
1643
  >
1790
1644
  <li role="none">
@@ -1805,55 +1659,57 @@ section: components
1805
1659
  <div
1806
1660
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
1807
1661
  >
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>
1662
+ <div class="pf-v5-c-pagination__page-menu">
1663
+ <div class="pf-v5-c-options-menu">
1664
+ <button
1665
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1666
+ type="button"
1667
+ id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
1668
+ aria-haspopup="listbox"
1669
+ aria-expanded="false"
1670
+ >
1671
+ <span class="pf-v5-c-options-menu__toggle-text">
1672
+ <b>1 - 10</b>&nbsp;of&nbsp;
1673
+ <b>36</b>
1674
+ </span>
1675
+ <div class="pf-v5-c-options-menu__toggle-icon">
1676
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1677
+ </div>
1678
+ </button>
1679
+ <ul
1680
+ class="pf-v5-c-options-menu__menu"
1681
+ role="menu"
1682
+ aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
1683
+ hidden
1684
+ >
1685
+ <li role="none">
1686
+ <button
1687
+ class="pf-v5-c-options-menu__menu-item"
1688
+ type="button"
1689
+ role="menuitem"
1690
+ >5 per page</button>
1691
+ </li>
1692
+ <li role="none">
1693
+ <button
1694
+ class="pf-v5-c-options-menu__menu-item"
1695
+ type="button"
1696
+ role="menuitem"
1697
+ >
1698
+ 10 per page
1699
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1700
+ <i class="fas fa-check" aria-hidden="true"></i>
1701
+ </div>
1702
+ </button>
1703
+ </li>
1704
+ <li role="none">
1705
+ <button
1706
+ class="pf-v5-c-options-menu__menu-item"
1707
+ type="button"
1708
+ role="menuitem"
1709
+ >20 per page</button>
1710
+ </li>
1711
+ </ul>
1712
+ </div>
1857
1713
  </div>
1858
1714
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
1859
1715
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -1882,7 +1738,7 @@ section: components
1882
1738
  </div>
1883
1739
  <div
1884
1740
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
1885
- id="toolbar-attribute-value-single-select-filter-desktop-example-expandable-content"
1741
+ id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-expandable-content"
1886
1742
  hidden
1887
1743
  ></div>
1888
1744
  </div>
@@ -1895,34 +1751,36 @@ section: components
1895
1751
  ```html
1896
1752
  <div
1897
1753
  class="pf-v5-c-toolbar"
1898
- id="toolbar-attribute-value-single-select-filter-mobile-example"
1754
+ id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example"
1899
1755
  >
1900
1756
  <div class="pf-v5-c-toolbar__content">
1901
1757
  <div class="pf-v5-c-toolbar__content-section">
1902
1758
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
1903
- <div class="pf-v5-c-toolbar__toggle pf-m-expanded">
1759
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1904
1760
  <button
1905
- class="pf-v5-c-button pf-m-plain"
1761
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
1906
1762
  type="button"
1907
- aria-label="Show filters"
1908
1763
  aria-expanded="true"
1909
- aria-controls="toolbar-attribute-value-single-select-filter-mobile-example-expandable-content"
1764
+ aria-label="Show filters"
1765
+ aria-controls="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-expandable-content"
1910
1766
  >
1911
- <i class="fas fa-filter" aria-hidden="true"></i>
1767
+ <span class="pf-v5-c-menu-toggle__icon">
1768
+ <i class="fas fa-filter" aria-hidden="true"></i>
1769
+ </span>
1912
1770
  </button>
1913
1771
  </div>
1914
1772
  </div>
1915
1773
  <div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
1916
1774
  <div
1917
1775
  class="pf-v5-c-overflow-menu"
1918
- id="toolbar-attribute-value-single-select-filter-mobile-example-overflow-menu"
1776
+ id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-overflow-menu"
1919
1777
  >
1920
1778
  <div class="pf-v5-c-overflow-menu__control">
1921
1779
  <div class="pf-v5-c-dropdown">
1922
1780
  <button
1923
1781
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
1924
1782
  type="button"
1925
- id="toolbar-attribute-value-single-select-filter-mobile-example-overflow-menu-dropdown-toggle"
1783
+ id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-overflow-menu-dropdown-toggle"
1926
1784
  aria-label="Overflow menu"
1927
1785
  aria-expanded="false"
1928
1786
  >
@@ -1931,7 +1789,7 @@ section: components
1931
1789
  <ul
1932
1790
  class="pf-v5-c-dropdown__menu"
1933
1791
  role="menu"
1934
- aria-labelledby="toolbar-attribute-value-single-select-filter-mobile-example-overflow-menu-dropdown-toggle"
1792
+ aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-overflow-menu-dropdown-toggle"
1935
1793
  hidden
1936
1794
  >
1937
1795
  <li role="none">
@@ -1964,55 +1822,57 @@ section: components
1964
1822
  <div
1965
1823
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
1966
1824
  >
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>
1825
+ <div class="pf-v5-c-pagination__page-menu">
1826
+ <div class="pf-v5-c-options-menu">
1827
+ <button
1828
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1829
+ type="button"
1830
+ id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
1831
+ aria-haspopup="listbox"
1832
+ aria-expanded="false"
1833
+ >
1834
+ <span class="pf-v5-c-options-menu__toggle-text">
1835
+ <b>1 - 10</b>&nbsp;of&nbsp;
1836
+ <b>36</b>
1837
+ </span>
1838
+ <div class="pf-v5-c-options-menu__toggle-icon">
1839
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1840
+ </div>
1841
+ </button>
1842
+ <ul
1843
+ class="pf-v5-c-options-menu__menu"
1844
+ role="menu"
1845
+ aria-labelledby="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
1846
+ hidden
1847
+ >
1848
+ <li role="none">
1849
+ <button
1850
+ class="pf-v5-c-options-menu__menu-item"
1851
+ type="button"
1852
+ role="menuitem"
1853
+ >5 per page</button>
1854
+ </li>
1855
+ <li role="none">
1856
+ <button
1857
+ class="pf-v5-c-options-menu__menu-item"
1858
+ type="button"
1859
+ role="menuitem"
1860
+ >
1861
+ 10 per page
1862
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1863
+ <i class="fas fa-check" aria-hidden="true"></i>
1864
+ </div>
1865
+ </button>
1866
+ </li>
1867
+ <li role="none">
1868
+ <button
1869
+ class="pf-v5-c-options-menu__menu-item"
1870
+ type="button"
1871
+ role="menuitem"
1872
+ >20 per page</button>
1873
+ </li>
1874
+ </ul>
1875
+ </div>
2016
1876
  </div>
2017
1877
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
2018
1878
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -2041,127 +1901,100 @@ section: components
2041
1901
  </div>
2042
1902
  <div
2043
1903
  class="pf-v5-c-toolbar__expandable-content pf-m-expanded"
2044
- id="toolbar-attribute-value-single-select-filter-mobile-example-expandable-content"
1904
+ id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-expandable-content"
2045
1905
  >
2046
1906
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
2047
1907
  <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">
1908
+ <button
1909
+ class="pf-v5-c-menu-toggle"
1910
+ type="button"
1911
+ aria-expanded="false"
1912
+ id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-menu-toggle-status"
1913
+ >
1914
+ <span class="pf-v5-c-menu-toggle__icon">
1915
+ <i class="fas fa-filter" aria-hidden="true"></i>
1916
+ </span>
1917
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
1918
+ <span class="pf-v5-c-menu-toggle__controls">
1919
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2069
1920
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2070
1921
  </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>
1922
+ </span>
1923
+ </button>
2108
1924
  </div>
2109
1925
  <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">
1926
+ <button
1927
+ class="pf-v5-c-menu-toggle pf-m-expanded"
1928
+ type="button"
1929
+ aria-expanded="true"
1930
+ id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-menu-toggle-stopped"
1931
+ >
1932
+ <span class="pf-v5-c-menu-toggle__text">Stopped</span>
1933
+ <span class="pf-v5-c-menu-toggle__controls">
1934
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2128
1935
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2129
1936
  </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>
1937
+ </span>
1938
+ </button>
1939
+ <div class="pf-v5-c-panel">
1940
+ <div class="pf-v5-c-menu" width="175px">
1941
+ <div class="pf-v5-c-menu__content">
1942
+ <section class="pf-v5-c-menu__group">
1943
+ <ul class="pf-v5-c-menu__list" role="menu">
1944
+ <li class="pf-v5-c-menu__list-item" role="none">
1945
+ <button
1946
+ class="pf-v5-c-menu__item"
1947
+ type="button"
1948
+ role="menuitem"
1949
+ >
1950
+ <span class="pf-v5-c-menu__item-text">Running</span>
1951
+ </button>
1952
+ </li>
1953
+ <li class="pf-v5-c-menu__list-item" role="none">
1954
+ <button
1955
+ class="pf-v5-c-menu__item pf-m-selected"
1956
+ type="button"
1957
+ role="menuitem"
1958
+ >
1959
+ <span class="pf-v5-c-menu__item-main">
1960
+ <span class="pf-v5-c-menu__item-text">Stopped</span>
1961
+ <span class="pf-v5-c-menu__item-select-icon">
1962
+ <i class="fas fa-check" aria-hidden="true"></i>
1963
+ </span>
1964
+ </span>
1965
+ </button>
1966
+ </li>
1967
+ <li class="pf-v5-c-menu__list-item" role="none">
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">Down</span>
1974
+ </button>
1975
+ </li>
1976
+ <li class="pf-v5-c-menu__list-item" role="none">
1977
+ <button
1978
+ class="pf-v5-c-menu__item"
1979
+ type="button"
1980
+ role="menuitem"
1981
+ >
1982
+ <span class="pf-v5-c-menu__item-text">Degraded</span>
1983
+ </button>
1984
+ </li>
1985
+ <li class="pf-v5-c-menu__list-item" role="none">
1986
+ <button
1987
+ class="pf-v5-c-menu__item"
1988
+ type="button"
1989
+ role="menuitem"
1990
+ >
1991
+ <span class="pf-v5-c-menu__item-text">Needs maintenance</span>
1992
+ </button>
1993
+ </li>
1994
+ </ul>
1995
+ </section>
1996
+ </div>
1997
+ </div>
2165
1998
  </div>
2166
1999
  </div>
2167
2000
  </div>
@@ -2171,194 +2004,190 @@ section: components
2171
2004
 
2172
2005
  ```
2173
2006
 
2174
- ### Toolbar attribute value checkbox select filter on desktop
2007
+ ### Toolbar attribute value checkbox menu toggle filter on desktop
2175
2008
 
2176
2009
  ```html
2177
2010
  <div
2178
2011
  class="pf-v5-c-toolbar"
2179
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example"
2012
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example"
2180
2013
  >
2181
2014
  <div class="pf-v5-c-toolbar__content">
2182
2015
  <div class="pf-v5-c-toolbar__content-section">
2183
2016
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
2184
- <div class="pf-v5-c-toolbar__toggle">
2017
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
2185
2018
  <button
2186
- class="pf-v5-c-button pf-m-plain"
2019
+ class="pf-v5-c-menu-toggle pf-m-plain"
2187
2020
  type="button"
2188
- aria-label="Show filters"
2189
2021
  aria-expanded="false"
2190
- aria-controls="toolbar-attribute-value-checkbox-select-filter-desktop-example-expandable-content"
2022
+ aria-label="Show filters"
2023
+ aria-controls="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-expandable-content"
2191
2024
  >
2192
- <i class="fas fa-filter" aria-hidden="true"></i>
2025
+ <span class="pf-v5-c-menu-toggle__icon">
2026
+ <i class="fas fa-filter" aria-hidden="true"></i>
2027
+ </span>
2193
2028
  </button>
2194
2029
  </div>
2195
2030
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
2196
2031
  <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">
2032
+ <button
2033
+ class="pf-v5-c-menu-toggle"
2034
+ type="button"
2035
+ aria-expanded="false"
2036
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-menu-toggle-status"
2037
+ >
2038
+ <span class="pf-v5-c-menu-toggle__icon">
2039
+ <i class="fas fa-filter" aria-hidden="true"></i>
2040
+ </span>
2041
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
2042
+ <span class="pf-v5-c-menu-toggle__controls">
2043
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2218
2044
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2219
2045
  </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>
2046
+ </span>
2047
+ </button>
2264
2048
  </div>
2265
2049
  <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">
2050
+ <button
2051
+ class="pf-v5-c-menu-toggle pf-m-expanded"
2052
+ type="button"
2053
+ aria-expanded="true"
2054
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-menu-toggle-filter-by-status"
2055
+ >
2056
+ <span class="pf-v5-c-menu-toggle__text">Filter by status</span>
2057
+ <span class="pf-v5-c-menu-toggle__controls">
2058
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2284
2059
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2285
2060
  </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>
2061
+ </span>
2062
+ </button>
2063
+ <div class="pf-v5-c-panel">
2064
+ <div class="pf-v5-c-menu">
2065
+ <div class="pf-v5-c-menu__content">
2066
+ <ul class="pf-v5-c-menu__list" role="menu">
2067
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2068
+ <label
2069
+ class="pf-v5-c-menu__item"
2070
+ 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"
2071
+ >
2072
+ <span class="pf-v5-c-menu__item-main">
2073
+ <span class="pf-v5-c-menu__item-check">
2074
+ <div
2075
+ class="pf-v5-c-check pf-m-standalone"
2076
+ 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"
2077
+ >
2078
+ <input
2079
+ class="pf-v5-c-check__input"
2080
+ type="checkbox"
2081
+ 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"
2082
+ 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"
2083
+ aria-label="Standalone check"
2084
+ />
2085
+ </div>
2086
+ </span>
2087
+ <span class="pf-v5-c-menu__item-text">Active</span>
2088
+ </span>
2089
+ </label>
2090
+ </li>
2091
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2092
+ <label
2093
+ class="pf-v5-c-menu__item"
2094
+ 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"
2095
+ >
2096
+ <span class="pf-v5-c-menu__item-main">
2097
+ <span class="pf-v5-c-menu__item-check">
2098
+ <div
2099
+ class="pf-v5-c-check pf-m-standalone"
2100
+ 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"
2101
+ >
2102
+ <input
2103
+ class="pf-v5-c-check__input"
2104
+ type="checkbox"
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-check2-input"
2106
+ 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"
2107
+ aria-label="Standalone check"
2108
+ checked
2109
+ />
2110
+ </div>
2111
+ </span>
2112
+ <span class="pf-v5-c-menu__item-text">Cancelled</span>
2113
+ </span>
2114
+ </label>
2115
+ </li>
2116
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2117
+ <label
2118
+ class="pf-v5-c-menu__item"
2119
+ 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"
2120
+ >
2121
+ <span class="pf-v5-c-menu__item-main">
2122
+ <span class="pf-v5-c-menu__item-check">
2123
+ <div
2124
+ class="pf-v5-c-check pf-m-standalone"
2125
+ 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"
2126
+ >
2127
+ <input
2128
+ class="pf-v5-c-check__input"
2129
+ type="checkbox"
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-check3-input"
2131
+ 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"
2132
+ aria-label="Standalone check"
2133
+ checked
2134
+ />
2135
+ </div>
2136
+ </span>
2137
+ <span class="pf-v5-c-menu__item-text">Paused</span>
2138
+ </span>
2139
+ </label>
2140
+ </li>
2141
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2142
+ <label
2143
+ class="pf-v5-c-menu__item"
2144
+ 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"
2145
+ >
2146
+ <span class="pf-v5-c-menu__item-main">
2147
+ <span class="pf-v5-c-menu__item-check">
2148
+ <div
2149
+ class="pf-v5-c-check pf-m-standalone"
2150
+ 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"
2151
+ >
2152
+ <input
2153
+ class="pf-v5-c-check__input"
2154
+ type="checkbox"
2155
+ 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"
2156
+ 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"
2157
+ aria-label="Standalone check"
2158
+ />
2159
+ </div>
2160
+ </span>
2161
+ <span class="pf-v5-c-menu__item-text">Warning</span>
2162
+ </span>
2163
+ </label>
2164
+ </li>
2165
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2166
+ <label
2167
+ class="pf-v5-c-menu__item"
2168
+ 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"
2169
+ >
2170
+ <span class="pf-v5-c-menu__item-main">
2171
+ <span class="pf-v5-c-menu__item-check">
2172
+ <div
2173
+ class="pf-v5-c-check pf-m-standalone"
2174
+ 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"
2175
+ >
2176
+ <input
2177
+ class="pf-v5-c-check__input"
2178
+ type="checkbox"
2179
+ 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"
2180
+ 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"
2181
+ aria-label="Standalone check"
2182
+ />
2183
+ </div>
2184
+ </span>
2185
+ <span class="pf-v5-c-menu__item-text">Restarted</span>
2186
+ </span>
2187
+ </label>
2188
+ </li>
2189
+ </ul>
2190
+ </div>
2362
2191
  </div>
2363
2192
  </div>
2364
2193
  </div>
@@ -2367,7 +2196,7 @@ section: components
2367
2196
  <div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
2368
2197
  <div
2369
2198
  class="pf-v5-c-overflow-menu"
2370
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-overflow-menu"
2199
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-overflow-menu"
2371
2200
  >
2372
2201
  <div class="pf-v5-c-overflow-menu__content">
2373
2202
  <div class="pf-v5-c-overflow-menu__group pf-m-button-group">
@@ -2391,7 +2220,7 @@ section: components
2391
2220
  <button
2392
2221
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
2393
2222
  type="button"
2394
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-overflow-menu-dropdown-toggle"
2223
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-overflow-menu-dropdown-toggle"
2395
2224
  aria-label="Overflow menu"
2396
2225
  aria-expanded="false"
2397
2226
  >
@@ -2400,7 +2229,7 @@ section: components
2400
2229
  <ul
2401
2230
  class="pf-v5-c-dropdown__menu"
2402
2231
  role="menu"
2403
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-overflow-menu-dropdown-toggle"
2232
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-overflow-menu-dropdown-toggle"
2404
2233
  hidden
2405
2234
  >
2406
2235
  <li role="none">
@@ -2421,55 +2250,57 @@ section: components
2421
2250
  <div
2422
2251
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
2423
2252
  >
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>
2253
+ <div class="pf-v5-c-pagination__page-menu">
2254
+ <div class="pf-v5-c-options-menu">
2255
+ <button
2256
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2257
+ type="button"
2258
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
2259
+ aria-haspopup="listbox"
2260
+ aria-expanded="false"
2261
+ >
2262
+ <span class="pf-v5-c-options-menu__toggle-text">
2263
+ <b>1 - 10</b>&nbsp;of&nbsp;
2264
+ <b>36</b>
2265
+ </span>
2266
+ <div class="pf-v5-c-options-menu__toggle-icon">
2267
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2268
+ </div>
2269
+ </button>
2270
+ <ul
2271
+ class="pf-v5-c-options-menu__menu"
2272
+ role="menu"
2273
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-pagination-options-menu-toggle"
2274
+ hidden
2275
+ >
2276
+ <li role="none">
2277
+ <button
2278
+ class="pf-v5-c-options-menu__menu-item"
2279
+ type="button"
2280
+ role="menuitem"
2281
+ >5 per page</button>
2282
+ </li>
2283
+ <li role="none">
2284
+ <button
2285
+ class="pf-v5-c-options-menu__menu-item"
2286
+ type="button"
2287
+ role="menuitem"
2288
+ >
2289
+ 10 per page
2290
+ <div class="pf-v5-c-options-menu__menu-item-icon">
2291
+ <i class="fas fa-check" aria-hidden="true"></i>
2292
+ </div>
2293
+ </button>
2294
+ </li>
2295
+ <li role="none">
2296
+ <button
2297
+ class="pf-v5-c-options-menu__menu-item"
2298
+ type="button"
2299
+ role="menuitem"
2300
+ >20 per page</button>
2301
+ </li>
2302
+ </ul>
2303
+ </div>
2473
2304
  </div>
2474
2305
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
2475
2306
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -2498,7 +2329,7 @@ section: components
2498
2329
  </div>
2499
2330
  <div
2500
2331
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
2501
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-expandable-content"
2332
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-expandable-content"
2502
2333
  hidden
2503
2334
  ></div>
2504
2335
  </div>
@@ -2508,28 +2339,28 @@ section: components
2508
2339
  <div class="pf-v5-c-chip-group__main">
2509
2340
  <span
2510
2341
  class="pf-v5-c-chip-group__label"
2511
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-group-chip-group-label"
2342
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-group-chip-group-label"
2512
2343
  >Status</span>
2513
2344
  <ul
2514
2345
  class="pf-v5-c-chip-group__list"
2515
2346
  role="list"
2516
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-group-chip-group-label"
2347
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-group-chip-group-label"
2517
2348
  >
2518
2349
  <li class="pf-v5-c-chip-group__list-item">
2519
2350
  <div class="pf-v5-c-chip">
2520
2351
  <span class="pf-v5-c-chip__content">
2521
2352
  <span
2522
2353
  class="pf-v5-c-chip__text"
2523
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-group-chip-one"
2354
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-group-chip-one"
2524
2355
  >Canceled</span>
2525
2356
  </span>
2526
2357
  <span class="pf-v5-c-chip__actions">
2527
2358
  <button
2528
2359
  class="pf-v5-c-button pf-m-plain"
2529
2360
  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"
2361
+ 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
2362
  aria-label="Remove"
2532
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-one"
2363
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupremove-chip-one"
2533
2364
  >
2534
2365
  <i class="fas fa-times" aria-hidden="true"></i>
2535
2366
  </button>
@@ -2541,16 +2372,16 @@ section: components
2541
2372
  <span class="pf-v5-c-chip__content">
2542
2373
  <span
2543
2374
  class="pf-v5-c-chip__text"
2544
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-two"
2375
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupchip-two"
2545
2376
  >Paused</span>
2546
2377
  </span>
2547
2378
  <span class="pf-v5-c-chip__actions">
2548
2379
  <button
2549
2380
  class="pf-v5-c-button pf-m-plain"
2550
2381
  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"
2382
+ 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
2383
  aria-label="Remove"
2553
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-two"
2384
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupremove-chip-two"
2554
2385
  >
2555
2386
  <i class="fas fa-times" aria-hidden="true"></i>
2556
2387
  </button>
@@ -2562,16 +2393,16 @@ section: components
2562
2393
  <span class="pf-v5-c-chip__content">
2563
2394
  <span
2564
2395
  class="pf-v5-c-chip__text"
2565
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupchip-three"
2396
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupchip-three"
2566
2397
  >Restarted</span>
2567
2398
  </span>
2568
2399
  <span class="pf-v5-c-chip__actions">
2569
2400
  <button
2570
2401
  class="pf-v5-c-button pf-m-plain"
2571
2402
  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"
2403
+ 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
2404
  aria-label="Remove"
2574
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-chip-groupremove-chip-three"
2405
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-chip-groupremove-chip-three"
2575
2406
  >
2576
2407
  <i class="fas fa-times" aria-hidden="true"></i>
2577
2408
  </button>
@@ -2593,39 +2424,41 @@ section: components
2593
2424
 
2594
2425
  ```
2595
2426
 
2596
- ### Toolbar attribute value checkbox select filter on mobile
2427
+ ### Toolbar attribute value checkbox menu toggle filter on mobile
2597
2428
 
2598
2429
  ```html
2599
2430
  <div
2600
2431
  class="pf-v5-c-toolbar"
2601
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example"
2432
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example"
2602
2433
  >
2603
2434
  <div class="pf-v5-c-toolbar__content">
2604
2435
  <div class="pf-v5-c-toolbar__content-section">
2605
2436
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group">
2606
- <div class="pf-v5-c-toolbar__toggle pf-m-expanded">
2437
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
2607
2438
  <button
2608
- class="pf-v5-c-button pf-m-plain"
2439
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
2609
2440
  type="button"
2610
- aria-label="Show filters"
2611
2441
  aria-expanded="true"
2612
- aria-controls="toolbar-attribute-value-checkbox-select-filter-mobile-example-expandable-content"
2442
+ aria-label="Show filters"
2443
+ aria-controls="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-expandable-content"
2613
2444
  >
2614
- <i class="fas fa-filter" aria-hidden="true"></i>
2445
+ <span class="pf-v5-c-menu-toggle__icon">
2446
+ <i class="fas fa-filter" aria-hidden="true"></i>
2447
+ </span>
2615
2448
  </button>
2616
2449
  </div>
2617
2450
  </div>
2618
2451
  <div class="pf-v5-c-toolbar__item pf-m-overflow-menu">
2619
2452
  <div
2620
2453
  class="pf-v5-c-overflow-menu"
2621
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-overflow-menu"
2454
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-overflow-menu"
2622
2455
  >
2623
2456
  <div class="pf-v5-c-overflow-menu__control">
2624
2457
  <div class="pf-v5-c-dropdown">
2625
2458
  <button
2626
2459
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
2627
2460
  type="button"
2628
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-overflow-menu-dropdown-toggle"
2461
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-overflow-menu-dropdown-toggle"
2629
2462
  aria-label="Overflow menu"
2630
2463
  aria-expanded="false"
2631
2464
  >
@@ -2634,7 +2467,7 @@ section: components
2634
2467
  <ul
2635
2468
  class="pf-v5-c-dropdown__menu"
2636
2469
  role="menu"
2637
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-overflow-menu-dropdown-toggle"
2470
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-overflow-menu-dropdown-toggle"
2638
2471
  hidden
2639
2472
  >
2640
2473
  <li role="none">
@@ -2667,55 +2500,57 @@ section: components
2667
2500
  <div
2668
2501
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
2669
2502
  >
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>
2503
+ <div class="pf-v5-c-pagination__page-menu">
2504
+ <div class="pf-v5-c-options-menu">
2505
+ <button
2506
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2507
+ type="button"
2508
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
2509
+ aria-haspopup="listbox"
2510
+ aria-expanded="false"
2511
+ >
2512
+ <span class="pf-v5-c-options-menu__toggle-text">
2513
+ <b>1 - 10</b>&nbsp;of&nbsp;
2514
+ <b>36</b>
2515
+ </span>
2516
+ <div class="pf-v5-c-options-menu__toggle-icon">
2517
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2518
+ </div>
2519
+ </button>
2520
+ <ul
2521
+ class="pf-v5-c-options-menu__menu"
2522
+ role="menu"
2523
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-pagination-options-menu-toggle"
2524
+ hidden
2525
+ >
2526
+ <li role="none">
2527
+ <button
2528
+ class="pf-v5-c-options-menu__menu-item"
2529
+ type="button"
2530
+ role="menuitem"
2531
+ >5 per page</button>
2532
+ </li>
2533
+ <li role="none">
2534
+ <button
2535
+ class="pf-v5-c-options-menu__menu-item"
2536
+ type="button"
2537
+ role="menuitem"
2538
+ >
2539
+ 10 per page
2540
+ <div class="pf-v5-c-options-menu__menu-item-icon">
2541
+ <i class="fas fa-check" aria-hidden="true"></i>
2542
+ </div>
2543
+ </button>
2544
+ </li>
2545
+ <li role="none">
2546
+ <button
2547
+ class="pf-v5-c-options-menu__menu-item"
2548
+ type="button"
2549
+ role="menuitem"
2550
+ >20 per page</button>
2551
+ </li>
2552
+ </ul>
2553
+ </div>
2719
2554
  </div>
2720
2555
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
2721
2556
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -2744,168 +2579,169 @@ section: components
2744
2579
  </div>
2745
2580
  <div
2746
2581
  class="pf-v5-c-toolbar__expandable-content pf-m-expanded"
2747
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-expandable-content"
2582
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-expandable-content"
2748
2583
  >
2749
2584
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
2750
2585
  <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">
2586
+ <button
2587
+ class="pf-v5-c-menu-toggle"
2588
+ type="button"
2589
+ aria-expanded="false"
2590
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-menu-toggle-status"
2591
+ >
2592
+ <span class="pf-v5-c-menu-toggle__icon">
2593
+ <i class="fas fa-filter" aria-hidden="true"></i>
2594
+ </span>
2595
+ <span class="pf-v5-c-menu-toggle__text">Status</span>
2596
+ <span class="pf-v5-c-menu-toggle__controls">
2597
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2772
2598
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2773
2599
  </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>
2600
+ </span>
2601
+ </button>
2811
2602
  </div>
2812
2603
  <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>
2604
+ <button
2605
+ class="pf-v5-c-menu-toggle pf-m-expanded"
2606
+ type="button"
2607
+ aria-expanded="true"
2608
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-menu-toggle-filter-by-status"
2609
+ >
2610
+ <span class="pf-v5-c-menu-toggle__text">Filter by status</span>
2611
+ <span class="pf-v5-c-menu-toggle__controls">
2612
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2613
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2614
+ </span>
2615
+ </span>
2616
+ </button>
2617
+ <div class="pf-v5-c-panel">
2618
+ <div class="pf-v5-c-menu">
2619
+ <div class="pf-v5-c-menu__content">
2620
+ <ul class="pf-v5-c-menu__list" role="menu">
2621
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2622
+ <label
2623
+ class="pf-v5-c-menu__item"
2624
+ 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"
2625
+ >
2626
+ <span class="pf-v5-c-menu__item-main">
2627
+ <span class="pf-v5-c-menu__item-check">
2628
+ <div
2629
+ class="pf-v5-c-check pf-m-standalone"
2630
+ 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"
2631
+ >
2632
+ <input
2633
+ class="pf-v5-c-check__input"
2634
+ type="checkbox"
2635
+ 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"
2636
+ 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"
2637
+ aria-label="Standalone check"
2638
+ />
2639
+ </div>
2640
+ </span>
2641
+ <span class="pf-v5-c-menu__item-text">Active</span>
2642
+ </span>
2643
+ </label>
2644
+ </li>
2645
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2646
+ <label
2647
+ class="pf-v5-c-menu__item"
2648
+ 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"
2649
+ >
2650
+ <span class="pf-v5-c-menu__item-main">
2651
+ <span class="pf-v5-c-menu__item-check">
2652
+ <div
2653
+ class="pf-v5-c-check pf-m-standalone"
2654
+ 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"
2655
+ >
2656
+ <input
2657
+ class="pf-v5-c-check__input"
2658
+ type="checkbox"
2659
+ 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"
2660
+ 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"
2661
+ aria-label="Standalone check"
2662
+ checked
2663
+ />
2664
+ </div>
2665
+ </span>
2666
+ <span class="pf-v5-c-menu__item-text">Cancelled</span>
2667
+ </span>
2668
+ </label>
2669
+ </li>
2670
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2671
+ <label
2672
+ class="pf-v5-c-menu__item"
2673
+ 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"
2674
+ >
2675
+ <span class="pf-v5-c-menu__item-main">
2676
+ <span class="pf-v5-c-menu__item-check">
2677
+ <div
2678
+ class="pf-v5-c-check pf-m-standalone"
2679
+ 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"
2680
+ >
2681
+ <input
2682
+ class="pf-v5-c-check__input"
2683
+ type="checkbox"
2684
+ 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"
2685
+ 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"
2686
+ aria-label="Standalone check"
2687
+ checked
2688
+ />
2689
+ </div>
2690
+ </span>
2691
+ <span class="pf-v5-c-menu__item-text">Paused</span>
2692
+ </span>
2693
+ </label>
2694
+ </li>
2695
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2696
+ <label
2697
+ class="pf-v5-c-menu__item"
2698
+ 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"
2699
+ >
2700
+ <span class="pf-v5-c-menu__item-main">
2701
+ <span class="pf-v5-c-menu__item-check">
2702
+ <div
2703
+ class="pf-v5-c-check pf-m-standalone"
2704
+ 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"
2705
+ >
2706
+ <input
2707
+ class="pf-v5-c-check__input"
2708
+ type="checkbox"
2709
+ 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"
2710
+ 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"
2711
+ aria-label="Standalone check"
2712
+ />
2713
+ </div>
2714
+ </span>
2715
+ <span class="pf-v5-c-menu__item-text">Warning</span>
2716
+ </span>
2717
+ </label>
2718
+ </li>
2719
+ <li class="pf-v5-c-menu__list-item" role="menuitem">
2720
+ <label
2721
+ class="pf-v5-c-menu__item"
2722
+ 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"
2723
+ >
2724
+ <span class="pf-v5-c-menu__item-main">
2725
+ <span class="pf-v5-c-menu__item-check">
2726
+ <div
2727
+ class="pf-v5-c-check pf-m-standalone"
2728
+ 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"
2729
+ >
2730
+ <input
2731
+ class="pf-v5-c-check__input"
2732
+ type="checkbox"
2733
+ 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"
2734
+ 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"
2735
+ aria-label="Standalone check"
2736
+ />
2737
+ </div>
2738
+ </span>
2739
+ <span class="pf-v5-c-menu__item-text">Restarted</span>
2740
+ </span>
2741
+ </label>
2742
+ </li>
2743
+ </ul>
2829
2744
  </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
2745
  </div>
2910
2746
  </div>
2911
2747
  </div>
@@ -2914,28 +2750,28 @@ section: components
2914
2750
  <div class="pf-v5-c-chip-group__main">
2915
2751
  <span
2916
2752
  class="pf-v5-c-chip-group__label"
2917
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-group-chip-group-label"
2753
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-group-chip-group-label"
2918
2754
  >Status</span>
2919
2755
  <ul
2920
2756
  class="pf-v5-c-chip-group__list"
2921
2757
  role="list"
2922
- aria-labelledby="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-group-chip-group-label"
2758
+ aria-labelledby="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-group-chip-group-label"
2923
2759
  >
2924
2760
  <li class="pf-v5-c-chip-group__list-item">
2925
2761
  <div class="pf-v5-c-chip">
2926
2762
  <span class="pf-v5-c-chip__content">
2927
2763
  <span
2928
2764
  class="pf-v5-c-chip__text"
2929
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-one"
2765
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupchip-one"
2930
2766
  >Canceled</span>
2931
2767
  </span>
2932
2768
  <span class="pf-v5-c-chip__actions">
2933
2769
  <button
2934
2770
  class="pf-v5-c-button pf-m-plain"
2935
2771
  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"
2772
+ 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
2773
  aria-label="Remove"
2938
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-one"
2774
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupremove-chip-one"
2939
2775
  >
2940
2776
  <i class="fas fa-times" aria-hidden="true"></i>
2941
2777
  </button>
@@ -2947,16 +2783,16 @@ section: components
2947
2783
  <span class="pf-v5-c-chip__content">
2948
2784
  <span
2949
2785
  class="pf-v5-c-chip__text"
2950
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-two"
2786
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupchip-two"
2951
2787
  >Paused</span>
2952
2788
  </span>
2953
2789
  <span class="pf-v5-c-chip__actions">
2954
2790
  <button
2955
2791
  class="pf-v5-c-button pf-m-plain"
2956
2792
  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"
2793
+ 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
2794
  aria-label="Remove"
2959
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-two"
2795
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupremove-chip-two"
2960
2796
  >
2961
2797
  <i class="fas fa-times" aria-hidden="true"></i>
2962
2798
  </button>
@@ -2968,16 +2804,16 @@ section: components
2968
2804
  <span class="pf-v5-c-chip__content">
2969
2805
  <span
2970
2806
  class="pf-v5-c-chip__text"
2971
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupchip-three"
2807
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupchip-three"
2972
2808
  >Restarted</span>
2973
2809
  </span>
2974
2810
  <span class="pf-v5-c-chip__actions">
2975
2811
  <button
2976
2812
  class="pf-v5-c-button pf-m-plain"
2977
2813
  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"
2814
+ 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
2815
  aria-label="Remove"
2980
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-chip-groupremove-chip-three"
2816
+ id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-chip-groupremove-chip-three"
2981
2817
  >
2982
2818
  <i class="fas fa-times" aria-hidden="true"></i>
2983
2819
  </button>
@@ -3026,23 +2862,117 @@ section: components
3026
2862
  </span>
3027
2863
  <div class="pf-v5-c-masthead__main">
3028
2864
  <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
- />
2865
+ <svg height="40px" viewBox="0 0 679 158">
2866
+ <title>PF-HorizontalLogo-Color</title>
2867
+ <defs>
2868
+ <linearGradient
2869
+ x1="68%"
2870
+ y1="2.25860997e-13%"
2871
+ x2="32%"
2872
+ y2="100%"
2873
+ id="linearGradient-toolbar-pagination-management-example-masthead"
2874
+ >
2875
+ <stop stop-color="#2B9AF3" offset="0%" />
2876
+ <stop
2877
+ stop-color="#73BCF7"
2878
+ stop-opacity="0.502212631"
2879
+ offset="100%"
2880
+ />
2881
+ </linearGradient>
2882
+ </defs>
2883
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2884
+ <g
2885
+ transform="translate(206.000000, 45.750000)"
2886
+ fill="var(--pf-t--global--text--color--regular)"
2887
+ fill-rule="nonzero"
2888
+ >
2889
+ <path
2890
+ 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"
2891
+ />
2892
+ <path
2893
+ 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"
2894
+ />
2895
+ <path
2896
+ 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"
2897
+ />
2898
+ <path
2899
+ 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"
2900
+ />
2901
+ <path
2902
+ 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"
2903
+ />
2904
+ <path
2905
+ 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"
2906
+ />
2907
+ <path
2908
+ 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"
2909
+ />
2910
+ <polygon
2911
+ 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"
2912
+ />
2913
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2914
+ <path
2915
+ 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"
2916
+ />
2917
+ </g>
2918
+ <g transform="translate(0.000000, 0.000000)">
2919
+ <path
2920
+ 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"
2921
+ fill="#0066CC"
2922
+ />
2923
+ <path
2924
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2925
+ fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
2926
+ />
2927
+ <path
2928
+ 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"
2929
+ fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
2930
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2931
+ />
2932
+ </g>
2933
+ </g>
2934
+ </svg>
3035
2935
  </a>
3036
2936
  </div>
3037
2937
  <div class="pf-v5-c-masthead__content">
3038
2938
  <div
3039
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
2939
+ class="pf-v5-c-toolbar pf-m-static"
3040
2940
  id="toolbar-pagination-management-example-masthead-toolbar"
3041
2941
  >
3042
2942
  <div class="pf-v5-c-toolbar__content">
3043
2943
  <div class="pf-v5-c-toolbar__content-section">
2944
+ <div class="pf-v5-c-toolbar__item">
2945
+ <button
2946
+ class="pf-v5-c-menu-toggle"
2947
+ type="button"
2948
+ aria-expanded="false"
2949
+ >
2950
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2951
+ <span class="pf-v5-c-menu-toggle__controls">
2952
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2953
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2954
+ </span>
2955
+ </span>
2956
+ </button>
2957
+ </div>
2958
+
2959
+ <div class="pf-v5-c-toolbar__item">
2960
+ <button
2961
+ class="pf-v5-c-menu-toggle"
2962
+ type="button"
2963
+ aria-expanded="false"
2964
+ >
2965
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2966
+ <span class="pf-v5-c-menu-toggle__controls">
2967
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2968
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2969
+ </span>
2970
+ </span>
2971
+ </button>
2972
+ </div>
2973
+
3044
2974
  <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"
2975
+ 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
2976
  >
3047
2977
  <div
3048
2978
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -3054,7 +2984,9 @@ section: components
3054
2984
  aria-expanded="false"
3055
2985
  aria-label="Application launcher"
3056
2986
  >
3057
- <i class="fas fa-th" aria-hidden="true"></i>
2987
+ <span class="pf-v5-c-menu-toggle__icon">
2988
+ <i class="fas fa-th" aria-hidden="true"></i>
2989
+ </span>
3058
2990
  </button>
3059
2991
  </div>
3060
2992
  <div class="pf-v5-c-toolbar__item">
@@ -3064,7 +2996,9 @@ section: components
3064
2996
  aria-expanded="false"
3065
2997
  aria-label="Settings"
3066
2998
  >
3067
- <i class="fas fa-cog" aria-hidden="true"></i>
2999
+ <span class="pf-v5-c-menu-toggle__icon">
3000
+ <i class="fas fa-cog" aria-hidden="true"></i>
3001
+ </span>
3068
3002
  </button>
3069
3003
  </div>
3070
3004
  <div class="pf-v5-c-toolbar__item">
@@ -3074,7 +3008,9 @@ section: components
3074
3008
  aria-expanded="false"
3075
3009
  aria-label="Help"
3076
3010
  >
3077
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3011
+ <span class="pf-v5-c-menu-toggle__icon">
3012
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3013
+ </span>
3078
3014
  </button>
3079
3015
  </div>
3080
3016
  </div>
@@ -3085,31 +3021,12 @@ section: components
3085
3021
  aria-expanded="false"
3086
3022
  aria-label="Actions"
3087
3023
  >
3088
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3024
+ <span class="pf-v5-c-menu-toggle__icon">
3025
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3026
+ </span>
3089
3027
  </button>
3090
3028
  </div>
3091
3029
  </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
3030
  </div>
3114
3031
  </div>
3115
3032
  </div>
@@ -3203,15 +3120,17 @@ section: components
3203
3120
  <div class="pf-v5-c-toolbar__content">
3204
3121
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
3205
3122
  <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show">
3206
- <div class="pf-v5-c-toolbar__toggle">
3123
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
3207
3124
  <button
3208
- class="pf-v5-c-button pf-m-plain"
3125
+ class="pf-v5-c-menu-toggle pf-m-plain"
3209
3126
  type="button"
3210
- aria-label="Show filters"
3211
3127
  aria-expanded="false"
3128
+ aria-label="Show filters"
3212
3129
  aria-controls="toolbar-pagination-management-example-toolbar-expandable-content"
3213
3130
  >
3214
- <i class="fas fa-filter" aria-hidden="true"></i>
3131
+ <span class="pf-v5-c-menu-toggle__icon">
3132
+ <i class="fas fa-filter" aria-hidden="true"></i>
3133
+ </span>
3215
3134
  </button>
3216
3135
  </div>
3217
3136
  <div class="pf-v5-c-toolbar__item pf-m-search-filter">
@@ -3221,75 +3140,22 @@ section: components
3221
3140
  role="group"
3222
3141
  >
3223
3142
  <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">
3143
+ <button
3144
+ class="pf-v5-c-menu-toggle"
3145
+ type="button"
3146
+ aria-expanded="false"
3147
+ id="toolbar-pagination-management-example-toolbar-search-filter-menu"
3148
+ >
3149
+ <span class="pf-v5-c-menu-toggle__icon">
3150
+ <i class="fas fa-filter" aria-hidden="true"></i>
3151
+ </span>
3152
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
3153
+ <span class="pf-v5-c-menu-toggle__controls">
3154
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3245
3155
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3246
3156
  </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>
3157
+ </span>
3158
+ </button>
3293
3159
  </div>
3294
3160
  <div class="pf-v5-c-input-group__item pf-m-fill">
3295
3161
  <div class="pf-v5-c-text-input-group">
@@ -3364,55 +3230,57 @@ section: components
3364
3230
  <div
3365
3231
  class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
3366
3232
  >
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>
3233
+ <div class="pf-v5-c-pagination__page-menu">
3234
+ <div class="pf-v5-c-options-menu">
3235
+ <button
3236
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3237
+ type="button"
3238
+ id="toolbar-pagination-management-example-toolbar-pagination-options-menu-toggle"
3239
+ aria-haspopup="listbox"
3240
+ aria-expanded="false"
3241
+ >
3242
+ <span class="pf-v5-c-options-menu__toggle-text">
3243
+ <b>1 - 10</b>&nbsp;of&nbsp;
3244
+ <b>36</b>
3245
+ </span>
3246
+ <div class="pf-v5-c-options-menu__toggle-icon">
3247
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3248
+ </div>
3249
+ </button>
3250
+ <ul
3251
+ class="pf-v5-c-options-menu__menu"
3252
+ role="menu"
3253
+ aria-labelledby="toolbar-pagination-management-example-toolbar-pagination-options-menu-toggle"
3254
+ hidden
3255
+ >
3256
+ <li role="none">
3257
+ <button
3258
+ class="pf-v5-c-options-menu__menu-item"
3259
+ type="button"
3260
+ role="menuitem"
3261
+ >5 per page</button>
3262
+ </li>
3263
+ <li role="none">
3264
+ <button
3265
+ class="pf-v5-c-options-menu__menu-item"
3266
+ type="button"
3267
+ role="menuitem"
3268
+ >
3269
+ 10 per page
3270
+ <div class="pf-v5-c-options-menu__menu-item-icon">
3271
+ <i class="fas fa-check" aria-hidden="true"></i>
3272
+ </div>
3273
+ </button>
3274
+ </li>
3275
+ <li role="none">
3276
+ <button
3277
+ class="pf-v5-c-options-menu__menu-item"
3278
+ type="button"
3279
+ role="menuitem"
3280
+ >20 per page</button>
3281
+ </li>
3282
+ </ul>
3283
+ </div>
3416
3284
  </div>
3417
3285
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
3418
3286
  <div class="pf-v5-c-pagination__nav-control pf-m-prev">
@@ -4044,55 +3912,57 @@ section: components
4044
3912
  </tbody>
4045
3913
  </table>
4046
3914
  <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>
3915
+ <div class="pf-v5-c-pagination__page-menu">
3916
+ <div class="pf-v5-c-options-menu pf-m-top">
3917
+ <button
3918
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3919
+ type="button"
3920
+ id="pagination-options-menu-bottom-collapsed-example-toggle"
3921
+ aria-haspopup="listbox"
3922
+ aria-expanded="false"
3923
+ >
3924
+ <span class="pf-v5-c-options-menu__toggle-text">
3925
+ <b>1 - 10</b>&nbsp;of&nbsp;
3926
+ <b>36</b>
3927
+ </span>
3928
+ <div class="pf-v5-c-options-menu__toggle-icon">
3929
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3930
+ </div>
3931
+ </button>
3932
+ <ul
3933
+ class="pf-v5-c-options-menu__menu pf-m-top"
3934
+ role="menu"
3935
+ aria-labelledby="pagination-options-menu-bottom-collapsed-example-toggle"
3936
+ hidden
3937
+ >
3938
+ <li role="none">
3939
+ <button
3940
+ class="pf-v5-c-options-menu__menu-item"
3941
+ type="button"
3942
+ role="menuitem"
3943
+ >5 per page</button>
3944
+ </li>
3945
+ <li role="none">
3946
+ <button
3947
+ class="pf-v5-c-options-menu__menu-item"
3948
+ type="button"
3949
+ role="menuitem"
3950
+ >
3951
+ 10 per page
3952
+ <div class="pf-v5-c-options-menu__menu-item-icon">
3953
+ <i class="fas fa-check" aria-hidden="true"></i>
3954
+ </div>
3955
+ </button>
3956
+ </li>
3957
+ <li role="none">
3958
+ <button
3959
+ class="pf-v5-c-options-menu__menu-item"
3960
+ type="button"
3961
+ role="menuitem"
3962
+ >20 per page</button>
3963
+ </li>
3964
+ </ul>
3965
+ </div>
4096
3966
  </div>
4097
3967
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
4098
3968
  <div class="pf-v5-c-pagination__nav-control pf-m-first">