@patternfly/patternfly 6.0.0-alpha.6 → 6.0.0-alpha.60

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 (372) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/README.md +13 -3
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/PF-Backdrop.svg +1 -0
  5. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  6. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  7. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  8. package/assets/images/PF-IconLogo-color.svg +17 -0
  9. package/assets/images/PF-IconLogo.svg +17 -0
  10. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  11. package/assets/images/pf-background.svg +22 -0
  12. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  13. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  14. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  15. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  16. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  17. package/assets/images/pf_logo_white.hbs +35 -0
  18. package/assets/images/pf_logo_white.svg +38 -0
  19. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  20. package/assets/pficon/pficon.scss +6 -129
  21. package/base/_common.scss +29 -4
  22. package/base/_globals.scss +5 -7
  23. package/base/_variables.scss +8 -6
  24. package/base/patternfly-common.css +24 -6
  25. package/base/patternfly-globals.css +5 -4
  26. package/base/patternfly-icons.css +5 -1
  27. package/base/patternfly-pf-icons.css +5 -1
  28. package/base/patternfly-variables.css +889 -787
  29. package/base/tokens/_tokens-dark.scss +322 -265
  30. package/base/tokens/_tokens-default.scss +428 -306
  31. package/base/tokens/_tokens-font.scss +41 -46
  32. package/base/tokens/_tokens-palette.scss +69 -71
  33. package/base/tokens/_workspace-overrides.scss +7 -0
  34. package/components/AboutModalBox/about-modal-box.css +78 -104
  35. package/components/AboutModalBox/about-modal-box.scss +62 -74
  36. package/components/Accordion/accordion.css +96 -175
  37. package/components/Accordion/accordion.scss +106 -193
  38. package/components/ActionList/action-list.css +2 -2
  39. package/components/ActionList/action-list.scss +2 -2
  40. package/components/Alert/alert-group.css +27 -20
  41. package/components/Alert/alert-group.scss +27 -20
  42. package/components/Alert/alert.css +74 -95
  43. package/components/Alert/alert.scss +76 -89
  44. package/components/AppLauncher/app-launcher.css +32 -23
  45. package/components/AppLauncher/app-launcher.scss +32 -23
  46. package/components/Avatar/avatar.css +10 -13
  47. package/components/Avatar/avatar.scss +10 -17
  48. package/components/BackToTop/back-to-top.css +17 -15
  49. package/components/BackToTop/back-to-top.scss +14 -13
  50. package/components/Backdrop/backdrop.css +8 -4
  51. package/components/Backdrop/backdrop.scss +7 -4
  52. package/components/BackgroundImage/background-image.css +11 -4
  53. package/components/BackgroundImage/background-image.scss +13 -4
  54. package/components/Badge/badge.css +25 -17
  55. package/components/Badge/badge.scss +27 -19
  56. package/components/Banner/banner.css +95 -69
  57. package/components/Banner/banner.scss +100 -34
  58. package/components/Breadcrumb/breadcrumb.css +28 -19
  59. package/components/Breadcrumb/breadcrumb.scss +26 -19
  60. package/components/Button/button.css +422 -359
  61. package/components/Button/button.scss +480 -487
  62. package/components/CalendarMonth/calendar-month.css +25 -15
  63. package/components/CalendarMonth/calendar-month.scss +23 -15
  64. package/components/Card/card.css +28 -17
  65. package/components/Card/card.scss +32 -17
  66. package/components/Check/check.css +25 -22
  67. package/components/Check/check.scss +26 -24
  68. package/components/Chip/chip-group.css +6 -6
  69. package/components/Chip/chip-group.scss +6 -6
  70. package/components/Chip/chip.css +16 -9
  71. package/components/Chip/chip.scss +17 -9
  72. package/components/ClipboardCopy/clipboard-copy.css +47 -41
  73. package/components/ClipboardCopy/clipboard-copy.scss +50 -34
  74. package/components/CodeBlock/code-block.css +24 -12
  75. package/components/CodeBlock/code-block.scss +24 -13
  76. package/components/CodeEditor/code-editor.css +31 -22
  77. package/components/CodeEditor/code-editor.scss +30 -21
  78. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  79. package/components/Content/content.css +40 -37
  80. package/components/Content/content.scss +40 -37
  81. package/components/ContextSelector/context-selector.css +41 -26
  82. package/components/ContextSelector/context-selector.scss +40 -25
  83. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  84. package/components/DataList/data-list-grid.css +21 -21
  85. package/components/DataList/data-list-grid.scss +3 -3
  86. package/components/DataList/data-list.css +165 -209
  87. package/components/DataList/data-list.scss +138 -185
  88. package/components/DatePicker/date-picker.css +8 -8
  89. package/components/DatePicker/date-picker.scss +8 -8
  90. package/components/DescriptionList/description-list.css +47 -39
  91. package/components/DescriptionList/description-list.scss +33 -30
  92. package/components/Divider/divider.css +97 -177
  93. package/components/Divider/divider.scss +60 -79
  94. package/components/DragDrop/drag-drop.css +26 -22
  95. package/components/DragDrop/drag-drop.scss +26 -25
  96. package/components/Drawer/drawer.css +120 -62
  97. package/components/Drawer/drawer.scss +94 -44
  98. package/components/Dropdown/dropdown.css +76 -69
  99. package/components/Dropdown/dropdown.scss +67 -62
  100. package/components/DualListSelector/dual-list-selector.css +29 -15
  101. package/components/DualListSelector/dual-list-selector.scss +30 -15
  102. package/components/EmptyState/empty-state.css +64 -38
  103. package/components/EmptyState/empty-state.scss +70 -38
  104. package/components/ExpandableSection/expandable-section.css +75 -66
  105. package/components/ExpandableSection/expandable-section.scss +82 -80
  106. package/components/FileUpload/file-upload.css +31 -43
  107. package/components/FileUpload/file-upload.scss +31 -49
  108. package/components/Form/form.css +111 -154
  109. package/components/Form/form.scss +101 -160
  110. package/components/FormControl/form-control.css +95 -111
  111. package/components/FormControl/form-control.scss +97 -92
  112. package/components/HelperText/helper-text.css +29 -35
  113. package/components/HelperText/helper-text.scss +31 -41
  114. package/components/Hint/hint.css +37 -27
  115. package/components/Hint/hint.scss +37 -30
  116. package/components/Icon/icon.css +155 -19
  117. package/components/Icon/icon.scss +188 -21
  118. package/components/InlineEdit/inline-edit.css +12 -11
  119. package/components/InlineEdit/inline-edit.scss +12 -11
  120. package/components/InputGroup/input-group.css +32 -42
  121. package/components/InputGroup/input-group.scss +31 -33
  122. package/components/JumpLinks/jump-links.css +61 -58
  123. package/components/JumpLinks/jump-links.scss +61 -60
  124. package/components/Label/label-group.css +48 -50
  125. package/components/Label/label-group.scss +48 -51
  126. package/components/Label/label.css +266 -363
  127. package/components/Label/label.scss +306 -356
  128. package/components/List/list.css +25 -25
  129. package/components/List/list.scss +26 -26
  130. package/components/LogViewer/log-viewer.css +14 -14
  131. package/components/LogViewer/log-viewer.scss +14 -14
  132. package/components/Login/login.css +104 -122
  133. package/components/Login/login.scss +92 -91
  134. package/components/Masthead/masthead.css +273 -498
  135. package/components/Masthead/masthead.scss +137 -282
  136. package/components/Menu/menu.css +82 -65
  137. package/components/Menu/menu.scss +85 -69
  138. package/components/MenuToggle/menu-toggle.css +37 -31
  139. package/components/MenuToggle/menu-toggle.scss +37 -33
  140. package/components/ModalBox/modal-box.css +76 -69
  141. package/components/ModalBox/modal-box.scss +74 -70
  142. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  144. package/components/Nav/nav.css +248 -899
  145. package/components/Nav/nav.scss +304 -1059
  146. package/components/Nav/themes/dark/nav.scss +2 -2
  147. package/components/NotificationBadge/notification-badge.css +66 -85
  148. package/components/NotificationBadge/notification-badge.scss +72 -103
  149. package/components/NotificationDrawer/notification-drawer.css +130 -128
  150. package/components/NotificationDrawer/notification-drawer.scss +130 -129
  151. package/components/NumberInput/number-input.css +10 -10
  152. package/components/NumberInput/number-input.scss +9 -14
  153. package/components/OptionsMenu/options-menu.css +43 -31
  154. package/components/OptionsMenu/options-menu.scss +43 -31
  155. package/components/OverflowMenu/overflow-menu.css +2 -2
  156. package/components/OverflowMenu/overflow-menu.scss +2 -2
  157. package/components/Page/page.css +182 -232
  158. package/components/Page/page.scss +130 -195
  159. package/components/Pagination/pagination.css +71 -121
  160. package/components/Pagination/pagination.scss +56 -127
  161. package/components/Panel/panel.css +40 -30
  162. package/components/Panel/panel.scss +42 -33
  163. package/components/Popover/popover.css +108 -87
  164. package/components/Popover/popover.scss +120 -109
  165. package/components/Progress/progress.css +40 -52
  166. package/components/Progress/progress.scss +48 -62
  167. package/components/ProgressStepper/progress-stepper.css +26 -20
  168. package/components/ProgressStepper/progress-stepper.scss +25 -19
  169. package/components/Radio/radio.css +30 -23
  170. package/components/Radio/radio.scss +31 -25
  171. package/components/Select/select.css +56 -47
  172. package/components/Select/select.scss +56 -47
  173. package/components/Sidebar/sidebar.css +31 -14
  174. package/components/Sidebar/sidebar.scss +34 -16
  175. package/components/SimpleList/simple-list.css +45 -56
  176. package/components/SimpleList/simple-list.scss +51 -55
  177. package/components/Skeleton/skeleton.css +24 -25
  178. package/components/Skeleton/skeleton.scss +21 -26
  179. package/components/SkipToContent/skip-to-content.css +9 -6
  180. package/components/SkipToContent/skip-to-content.scss +8 -6
  181. package/components/Slider/slider.css +80 -55
  182. package/components/Slider/slider.scss +96 -65
  183. package/components/Spinner/spinner.css +17 -34
  184. package/components/Spinner/spinner.scss +19 -47
  185. package/components/Switch/switch.css +49 -41
  186. package/components/Switch/switch.scss +51 -42
  187. package/components/TabContent/tab-content.css +21 -12
  188. package/components/TabContent/tab-content.scss +22 -15
  189. package/components/Table/table-grid.css +264 -203
  190. package/components/Table/table-grid.scss +61 -47
  191. package/components/Table/table-scrollable.css +4 -4
  192. package/components/Table/table-scrollable.scss +6 -4
  193. package/components/Table/table-tree-view.css +112 -105
  194. package/components/Table/table-tree-view.scss +38 -33
  195. package/components/Table/table.css +105 -89
  196. package/components/Table/table.scss +105 -89
  197. package/components/Tabs/tabs.css +76 -48
  198. package/components/Tabs/tabs.scss +74 -48
  199. package/components/TextInputGroup/text-input-group.css +15 -15
  200. package/components/TextInputGroup/text-input-group.scss +15 -15
  201. package/components/Tile/tile.css +47 -88
  202. package/components/Tile/tile.scss +45 -91
  203. package/components/Timestamp/timestamp.css +12 -9
  204. package/components/Timestamp/timestamp.scss +11 -10
  205. package/components/Title/title.css +70 -19
  206. package/components/Title/title.scss +90 -20
  207. package/components/ToggleGroup/toggle-group.css +48 -58
  208. package/components/ToggleGroup/toggle-group.scss +48 -56
  209. package/components/Toolbar/toolbar.css +57 -43
  210. package/components/Toolbar/toolbar.scss +45 -25
  211. package/components/Tooltip/tooltip.css +74 -44
  212. package/components/Tooltip/tooltip.scss +93 -77
  213. package/components/TreeView/tree-view.css +48 -27
  214. package/components/TreeView/tree-view.scss +50 -28
  215. package/components/Truncate/truncate.css +13 -0
  216. package/components/Truncate/truncate.scss +19 -3
  217. package/components/Wizard/wizard.css +57 -36
  218. package/components/Wizard/wizard.scss +57 -36
  219. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  220. package/docs/components/Accordion/examples/Accordion.md +614 -416
  221. package/docs/components/Alert/examples/Alert.md +3 -3
  222. package/docs/components/Avatar/examples/Avatar.md +5 -19
  223. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  224. package/docs/components/Badge/examples/Badge.md +21 -0
  225. package/docs/components/Banner/examples/Banner.md +48 -25
  226. package/docs/components/Brand/examples/Brand.css +12 -0
  227. package/docs/components/Brand/examples/Brand.md +51 -32
  228. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  229. package/docs/components/Button/examples/Button.css +6 -2
  230. package/docs/components/Button/examples/Button.md +1425 -87
  231. package/docs/components/Card/examples/Card.md +143 -37
  232. package/docs/components/Check/examples/Check.md +71 -58
  233. package/docs/components/Chip/examples/Chip.md +1 -1
  234. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  235. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  236. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  237. package/docs/components/Content/examples/Content.md +5 -5
  238. package/docs/components/Divider/examples/Divider.css +3 -1
  239. package/docs/components/Divider/examples/Divider.md +4 -5
  240. package/docs/components/DragDrop/examples/DragDrop.css +3 -3
  241. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  242. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  243. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  244. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  245. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  246. package/docs/components/Form/examples/Form.md +134 -89
  247. package/docs/components/Icon/examples/Icon.md +82 -11
  248. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  249. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  250. package/docs/components/Label/examples/Label.css +4 -0
  251. package/docs/components/Label/examples/Label.md +1001 -225
  252. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  253. package/docs/components/LogViewer/examples/LogViewer.md +250 -160
  254. package/docs/components/Login/examples/Login.md +10 -5
  255. package/docs/components/Masthead/examples/masthead.md +443 -65
  256. package/docs/components/Menu/examples/Menu.css +8 -0
  257. package/docs/components/Menu/examples/Menu.md +594 -543
  258. package/docs/components/MenuToggle/examples/MenuToggle.md +109 -96
  259. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  260. package/docs/components/Nav/examples/Navigation.css +3 -42
  261. package/docs/components/Nav/examples/Navigation.md +305 -353
  262. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  263. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  264. package/docs/components/Page/examples/Page.css +0 -8
  265. package/docs/components/Page/examples/Page.md +22 -21
  266. package/docs/components/Pagination/examples/Pagination.md +663 -637
  267. package/docs/components/Panel/examples/Panel.md +12 -0
  268. package/docs/components/Popover/examples/Popover.css +4 -9
  269. package/docs/components/Popover/examples/Popover.md +1 -1
  270. package/docs/components/Radio/examples/Radio.md +62 -54
  271. package/docs/components/Select/deprecated/Select.md +184 -177
  272. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  273. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  274. package/docs/components/TabContent/examples/TabContent.md +10 -10
  275. package/docs/components/Table/examples/Table.css +2 -2
  276. package/docs/components/Table/examples/Table.md +10 -10
  277. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  278. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  279. package/docs/components/Tile/examples/Tile.css +1 -1
  280. package/docs/components/Tile/examples/Tile.md +264 -144
  281. package/docs/components/Title/examples/Title.md +18 -0
  282. package/docs/components/Toolbar/examples/Toolbar.md +663 -2894
  283. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  284. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  285. package/docs/components/Truncate/examples/Truncate.css +2 -2
  286. package/docs/components/Truncate/examples/Truncate.md +2 -2
  287. package/docs/demos/AboutModal/examples/AboutModal.md +103 -30
  288. package/docs/demos/Alert/examples/Alert.md +327 -84
  289. package/docs/demos/BackToTop/examples/BackToTop.md +101 -28
  290. package/docs/demos/Banner/examples/Banner.md +209 -58
  291. package/docs/demos/Card/examples/Card.css +3 -3
  292. package/docs/demos/Card/examples/Card.md +28 -12
  293. package/docs/demos/CardView/examples/CardView.md +263 -205
  294. package/docs/demos/ContextSelector/examples/ContextSelector.md +373 -90
  295. package/docs/demos/Dashboard/examples/Dashboard.md +104 -31
  296. package/docs/demos/DataList/examples/DataList.md +995 -928
  297. package/docs/demos/DescriptionList/examples/DescriptionList.md +303 -84
  298. package/docs/demos/Drawer/examples/Drawer.md +605 -220
  299. package/docs/demos/Form/examples/BasicForms.md +133 -82
  300. package/docs/demos/JumpLinks/examples/JumpLinks.md +881 -353
  301. package/docs/demos/Masthead/examples/Masthead.md +767 -323
  302. package/docs/demos/Modal/examples/Modal.md +639 -192
  303. package/docs/demos/Nav/examples/Nav.md +685 -896
  304. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +510 -140
  305. package/docs/demos/Page/examples/Page.md +933 -264
  306. package/docs/demos/Page/examples/Penta.md +569 -501
  307. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  308. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  309. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1296 -917
  310. package/docs/demos/Skeleton/examples/Skeleton.md +108 -63
  311. package/docs/demos/Table/examples/Table.md +3832 -3390
  312. package/docs/demos/Tabs/examples/Tabs.md +636 -191
  313. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  314. package/docs/demos/Toolbar/examples/Toolbar.md +1331 -1493
  315. package/docs/demos/Wizard/examples/Wizard.md +909 -252
  316. package/docs/layouts/Flex/examples/Flex.md +16 -16
  317. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  318. package/icons/pficons.mjs +1 -0
  319. package/layouts/Flex/flex.css +115 -43
  320. package/layouts/Flex/flex.scss +20 -8
  321. package/package.json +36 -32
  322. package/patternfly-addons.css +732 -972
  323. package/patternfly-base-no-globals-theme-dark-unversioned.css +923 -799
  324. package/patternfly-base-no-globals.css +923 -799
  325. package/patternfly-base-theme-dark-unversioned.css +928 -803
  326. package/patternfly-base.css +928 -803
  327. package/patternfly-no-globals.css +6885 -7353
  328. package/patternfly-theme-dark-unversioned.css +6890 -7357
  329. package/patternfly.css +6890 -7357
  330. package/patternfly.min.css +1 -1
  331. package/patternfly.min.css.map +1 -1
  332. package/sass-utilities/functions.scss +6 -0
  333. package/sass-utilities/mixins.scss +80 -2
  334. package/sass-utilities/scss-variables.scss +8 -8
  335. package/sass-utilities/themes/dark/mixins.scss +3 -1
  336. package/utilities/Accessibility/accessibility.css +12 -12
  337. package/utilities/Spacing/spacing.css +720 -960
  338. package/utilities/Spacing/spacing.scss +4 -8
  339. package/base/themes/dark/_variables.scss +0 -102
  340. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  341. package/components/Accordion/themes/dark/accordion.scss +0 -9
  342. package/components/Alert/themes/dark/alert.scss +0 -17
  343. package/components/Badge/themes/dark/badge.scss +0 -9
  344. package/components/Banner/themes/dark/banner.scss +0 -14
  345. package/components/Button/themes/dark/button.scss +0 -51
  346. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  347. package/components/DataList/themes/dark/data-list.scss +0 -10
  348. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  349. package/components/Form/themes/dark/form.scss +0 -7
  350. package/components/FormControl/themes/dark/form-control.scss +0 -24
  351. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  352. package/components/Hint/themes/dark/hint.scss +0 -8
  353. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  354. package/components/Label/themes/dark/label.scss +0 -53
  355. package/components/Login/themes/dark/login.scss +0 -12
  356. package/components/Masthead/themes/dark/masthead.scss +0 -14
  357. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  358. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  359. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  360. package/components/Page/themes/dark/page.scss +0 -69
  361. package/components/Pagination/themes/dark/pagination.scss +0 -7
  362. package/components/Panel/themes/dark/panel.scss +0 -7
  363. package/components/Popover/themes/dark/popover.scss +0 -11
  364. package/components/Progress/themes/dark/progress.scss +0 -9
  365. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  366. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  367. package/components/Switch/themes/dark/switch.scss +0 -11
  368. package/components/Tile/themes/dark/tile.scss +0 -10
  369. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  370. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  371. package/docs/components/Avatar/examples/Avatar.css +0 -3
  372. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -26,12 +26,76 @@ wrapperTag: div
26
26
  </span>
27
27
  <div class="pf-v5-c-masthead__main">
28
28
  <a class="pf-v5-c-masthead__brand" href="#">
29
- <img
30
- class="pf-v5-c-brand"
31
- src="/assets/images/pf-logo.svg"
32
- alt="PatternFly logo"
33
- style="--pf-v5-c-brand--Height:36px"
34
- />
29
+ <svg height="40px" viewBox="0 0 679 158">
30
+ <title>PF-HorizontalLogo-Color</title>
31
+ <defs>
32
+ <linearGradient
33
+ x1="68%"
34
+ y1="2.25860997e-13%"
35
+ x2="32%"
36
+ y2="100%"
37
+ id="linearGradient-data-list-basic-example-masthead"
38
+ >
39
+ <stop stop-color="#2B9AF3" offset="0%" />
40
+ <stop
41
+ stop-color="#73BCF7"
42
+ stop-opacity="0.502212631"
43
+ offset="100%"
44
+ />
45
+ </linearGradient>
46
+ </defs>
47
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
48
+ <g
49
+ transform="translate(206.000000, 45.750000)"
50
+ fill="var(--pf-t--global--text--color--regular)"
51
+ fill-rule="nonzero"
52
+ >
53
+ <path
54
+ 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"
55
+ />
56
+ <path
57
+ 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"
58
+ />
59
+ <path
60
+ 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"
61
+ />
62
+ <path
63
+ 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"
64
+ />
65
+ <path
66
+ 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"
67
+ />
68
+ <path
69
+ 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"
70
+ />
71
+ <path
72
+ 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"
73
+ />
74
+ <polygon
75
+ 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"
76
+ />
77
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
78
+ <path
79
+ 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"
80
+ />
81
+ </g>
82
+ <g transform="translate(0.000000, 0.000000)">
83
+ <path
84
+ 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"
85
+ fill="#0066CC"
86
+ />
87
+ <path
88
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
89
+ fill="url(#linearGradient-data-list-basic-example-masthead)"
90
+ />
91
+ <path
92
+ 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"
93
+ fill="url(#linearGradient-data-list-basic-example-masthead)"
94
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
95
+ />
96
+ </g>
97
+ </g>
98
+ </svg>
35
99
  </a>
36
100
  </div>
37
101
  <div class="pf-v5-c-masthead__content">
@@ -41,8 +105,38 @@ wrapperTag: div
41
105
  >
42
106
  <div class="pf-v5-c-toolbar__content">
43
107
  <div class="pf-v5-c-toolbar__content-section">
108
+ <div class="pf-v5-c-toolbar__item">
109
+ <button
110
+ class="pf-v5-c-menu-toggle"
111
+ type="button"
112
+ aria-expanded="false"
113
+ >
114
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
115
+ <span class="pf-v5-c-menu-toggle__controls">
116
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
117
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
118
+ </span>
119
+ </span>
120
+ </button>
121
+ </div>
122
+
123
+ <div class="pf-v5-c-toolbar__item">
124
+ <button
125
+ class="pf-v5-c-menu-toggle"
126
+ type="button"
127
+ aria-expanded="false"
128
+ >
129
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
130
+ <span class="pf-v5-c-menu-toggle__controls">
131
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
132
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
133
+ </span>
134
+ </span>
135
+ </button>
136
+ </div>
137
+
44
138
  <div
45
- 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"
139
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
46
140
  >
47
141
  <div
48
142
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -89,27 +183,6 @@ wrapperTag: div
89
183
  </button>
90
184
  </div>
91
185
  </div>
92
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
93
- <button
94
- class="pf-v5-c-menu-toggle pf-m-full-height"
95
- type="button"
96
- aria-expanded="false"
97
- >
98
- <span class="pf-v5-c-menu-toggle__icon">
99
- <img
100
- class="pf-v5-c-avatar"
101
- alt="Avatar image"
102
- src="/assets/images/img_avatar-light.svg"
103
- />
104
- </span>
105
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
106
- <span class="pf-v5-c-menu-toggle__controls">
107
- <span class="pf-v5-c-menu-toggle__toggle-icon">
108
- <i class="fas fa-angle-down" aria-hidden="true"></i>
109
- </span>
110
- </span>
111
- </button>
112
- </div>
113
186
  </div>
114
187
  </div>
115
188
  </div>
@@ -199,114 +272,47 @@ wrapperTag: div
199
272
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
200
273
  >
201
274
  <div class="pf-v5-c-card">
202
- <div class="pf-v5-c-toolbar">
275
+ <div class="pf-v5-c-toolbar" id="data-list-basic-example-toolbar">
203
276
  <div class="pf-v5-c-toolbar__content">
204
277
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
205
278
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
206
- <div class="pf-v5-c-dropdown">
207
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
208
- <label
209
- class="pf-v5-c-dropdown__toggle-check"
210
- for="-bulk-select-toggle-check"
211
- >
212
- <div class="pf-v5-c-check pf-m-standalone">
213
- <input
214
- class="pf-v5-c-check__input"
215
- type="checkbox"
216
- id="-bulk-select-toggle-check"
217
- aria-label="Select all"
218
- />
219
- </div>
220
- </label>
221
-
222
- <button
223
- class="pf-v5-c-dropdown__toggle-button"
224
- type="button"
225
- aria-expanded="false"
226
- id="-bulk-select-toggle-button"
227
- aria-label="Dropdown toggle"
228
- >
229
- <i class="fas fa-caret-down" aria-hidden="true"></i>
230
- </button>
231
- </div>
232
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
233
- <li role="none">
234
- <button
235
- class="pf-v5-c-dropdown__menu-item"
236
- role="menuitem"
237
- type="button"
238
- >Select all</button>
239
- </li>
240
- <li role="none">
241
- <button
242
- class="pf-v5-c-dropdown__menu-item"
243
- role="menuitem"
244
- type="button"
245
- >Select none</button>
246
- </li>
247
- <li role="none">
248
- <button
249
- class="pf-v5-c-dropdown__menu-item"
250
- role="menuitem"
251
- type="button"
252
- >Other action</button>
253
- </li>
254
- </ul>
255
- </div>
256
- </div>
257
-
258
- <div class="pf-v5-c-toolbar__item">
259
- <div class="pf-v5-c-context-selector">
260
- <span id="-context-selector-label" hidden>Selected project:</span>
279
+ <div
280
+ class="pf-v5-c-menu-toggle pf-m-split-button"
281
+ id="data-list-basic-example-toolbar-check"
282
+ >
283
+ <label
284
+ class="pf-v5-c-check pf-m-standalone"
285
+ id="data-list-basic-example-toolbar-check-check"
286
+ for="data-list-basic-example-toolbar-check-check-input"
287
+ >
288
+ <input
289
+ class="pf-v5-c-check__input"
290
+ type="checkbox"
291
+ id="data-list-basic-example-toolbar-check-check-input"
292
+ name="data-list-basic-example-toolbar-check-check-input"
293
+ aria-label="Standalone check"
294
+ />
295
+ </label>
261
296
  <button
262
- class="pf-v5-c-context-selector__toggle"
297
+ class="pf-v5-c-menu-toggle__button"
298
+ type="button"
263
299
  aria-expanded="false"
264
- id="-context-selector-toggle"
265
- aria-labelledby="-context-selector-label -context-selector-toggle"
300
+ id="data-list-basic-example-toolbar-menu-toggle-toggle-button"
301
+ aria-label="Menu toggle"
266
302
  >
267
- <span
268
- class="pf-v5-c-context-selector__toggle-text"
269
- >My project</span>
270
- <span class="pf-v5-c-context-selector__toggle-icon">
271
- <i class="fas fa-caret-down" aria-hidden="true"></i>
303
+ <span class="pf-v5-c-menu-toggle__controls">
304
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
305
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
306
+ </span>
272
307
  </span>
273
308
  </button>
274
- <div class="pf-v5-c-context-selector__menu" hidden>
275
- <div class="pf-v5-c-context-selector__menu-search">
276
- <div class="pf-v5-c-text-input-group">
277
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
278
- <span class="pf-v5-c-text-input-group__text">
279
- <span class="pf-v5-c-text-input-group__icon">
280
- <i class="fas fa-fw fa-search"></i>
281
- </span>
282
- <input
283
- class="pf-v5-c-text-input-group__text-input"
284
- type="text"
285
- placeholder="Search"
286
- value
287
- aria-label="Search input"
288
- />
289
- </span>
290
- </div>
291
- </div>
292
- </div>
293
- <ul class="pf-v5-c-context-selector__menu-list" role="menu">
294
- <li>My project</li>
295
- <li>OpenShift cluster</li>
296
- <li>Production Ansible</li>
297
- <li>AWS</li>
298
- <li>Azure</li>
299
- <li>My project</li>
300
- <li>OpenShift cluster</li>
301
- <li>Production Ansible</li>
302
- <li>AWS</li>
303
- <li>Azure</li>
304
- </ul>
305
- </div>
306
309
  </div>
307
310
  </div>
308
311
 
309
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
312
+ <div
313
+ class="pf-v5-c-overflow-menu"
314
+ id="data-list-basic-example-toolbar-overflow-menu"
315
+ >
310
316
  <div
311
317
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
312
318
  >
@@ -324,7 +330,7 @@ wrapperTag: div
324
330
  <button
325
331
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
326
332
  type="button"
327
- id="-overflow-menu-dropdown-toggle"
333
+ id="data-list-basic-example-toolbar-overflow-menu-dropdown-toggle"
328
334
  aria-label="Dropdown with additional options"
329
335
  aria-expanded="false"
330
336
  >
@@ -333,7 +339,7 @@ wrapperTag: div
333
339
  <ul
334
340
  class="pf-v5-c-dropdown__menu"
335
341
  role="menu"
336
- aria-labelledby="-overflow-menu-dropdown-toggle"
342
+ aria-labelledby="data-list-basic-example-toolbar-overflow-menu-dropdown-toggle"
337
343
  hidden
338
344
  >
339
345
  <li role="none">
@@ -349,55 +355,57 @@ wrapperTag: div
349
355
 
350
356
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
351
357
  <div class="pf-v5-c-pagination pf-m-compact">
352
- <div class="pf-v5-c-options-menu">
353
- <button
354
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
355
- type="button"
356
- id="-top-pagination-toggle"
357
- aria-haspopup="listbox"
358
- aria-expanded="false"
359
- >
360
- <span class="pf-v5-c-options-menu__toggle-text">
361
- <b>1 - 10</b>&nbsp;of&nbsp;
362
- <b>36</b>
363
- </span>
364
- <div class="pf-v5-c-options-menu__toggle-icon">
365
- <i class="fas fa-caret-down" aria-hidden="true"></i>
366
- </div>
367
- </button>
368
- <ul
369
- class="pf-v5-c-options-menu__menu"
370
- role="menu"
371
- aria-labelledby="-top-pagination-toggle"
372
- hidden
373
- >
374
- <li role="none">
375
- <button
376
- class="pf-v5-c-options-menu__menu-item"
377
- type="button"
378
- role="menuitem"
379
- >5 per page</button>
380
- </li>
381
- <li role="none">
382
- <button
383
- class="pf-v5-c-options-menu__menu-item"
384
- type="button"
385
- role="menuitem"
386
- >
387
- 10 per page
388
- <div class="pf-v5-c-options-menu__menu-item-icon">
389
- <i class="fas fa-check" aria-hidden="true"></i>
390
- </div>
391
- </button>
392
- </li>
393
- <li role="none">
394
- <button
395
- class="pf-v5-c-options-menu__menu-item"
396
- type="button"
397
- role="menuitem"
398
- >20 per page</button>
399
- </li>
400
- </ul>
358
+ <div class="pf-v5-c-pagination__page-menu">
359
+ <div class="pf-v5-c-options-menu">
360
+ <button
361
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
362
+ type="button"
363
+ id="data-list-basic-example-toolbar-top-pagination-toggle"
364
+ aria-haspopup="listbox"
365
+ aria-expanded="false"
366
+ >
367
+ <span class="pf-v5-c-options-menu__toggle-text">
368
+ <b>1 - 10</b>&nbsp;of&nbsp;
369
+ <b>36</b>
370
+ </span>
371
+ <div class="pf-v5-c-options-menu__toggle-icon">
372
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
373
+ </div>
374
+ </button>
375
+ <ul
376
+ class="pf-v5-c-options-menu__menu"
377
+ role="menu"
378
+ aria-labelledby="data-list-basic-example-toolbar-top-pagination-toggle"
379
+ hidden
380
+ >
381
+ <li role="none">
382
+ <button
383
+ class="pf-v5-c-options-menu__menu-item"
384
+ type="button"
385
+ role="menuitem"
386
+ >5 per page</button>
387
+ </li>
388
+ <li role="none">
389
+ <button
390
+ class="pf-v5-c-options-menu__menu-item"
391
+ type="button"
392
+ role="menuitem"
393
+ >
394
+ 10 per page
395
+ <div class="pf-v5-c-options-menu__menu-item-icon">
396
+ <i class="fas fa-check" aria-hidden="true"></i>
397
+ </div>
398
+ </button>
399
+ </li>
400
+ <li role="none">
401
+ <button
402
+ class="pf-v5-c-options-menu__menu-item"
403
+ type="button"
404
+ role="menuitem"
405
+ >20 per page</button>
406
+ </li>
407
+ </ul>
408
+ </div>
401
409
  </div>
402
410
  <nav
403
411
  class="pf-v5-c-pagination__nav"
@@ -429,7 +437,7 @@ wrapperTag: div
429
437
 
430
438
  <div
431
439
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
432
- id="-expandable-content"
440
+ id="data-list-basic-example-toolbar-expandable-content"
433
441
  hidden
434
442
  ></div>
435
443
  </div>
@@ -765,55 +773,57 @@ wrapperTag: div
765
773
  </li>
766
774
  </ul>
767
775
  <div class="pf-v5-c-pagination pf-m-bottom">
768
- <div class="pf-v5-c-options-menu pf-m-top">
769
- <button
770
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
771
- type="button"
772
- id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
773
- aria-haspopup="listbox"
774
- aria-expanded="false"
775
- >
776
- <span class="pf-v5-c-options-menu__toggle-text">
777
- <b>1 - 10</b>&nbsp;of&nbsp;
778
- <b>36</b>
779
- </span>
780
- <div class="pf-v5-c-options-menu__toggle-icon">
781
- <i class="fas fa-caret-down" aria-hidden="true"></i>
782
- </div>
783
- </button>
784
- <ul
785
- class="pf-v5-c-options-menu__menu pf-m-top"
786
- role="menu"
787
- aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
788
- hidden
789
- >
790
- <li role="none">
791
- <button
792
- class="pf-v5-c-options-menu__menu-item"
793
- type="button"
794
- role="menuitem"
795
- >5 per page</button>
796
- </li>
797
- <li role="none">
798
- <button
799
- class="pf-v5-c-options-menu__menu-item"
800
- type="button"
801
- role="menuitem"
802
- >
803
- 10 per page
804
- <div class="pf-v5-c-options-menu__menu-item-icon">
805
- <i class="fas fa-check" aria-hidden="true"></i>
806
- </div>
807
- </button>
808
- </li>
809
- <li role="none">
810
- <button
811
- class="pf-v5-c-options-menu__menu-item"
812
- type="button"
813
- role="menuitem"
814
- >20 per page</button>
815
- </li>
816
- </ul>
776
+ <div class="pf-v5-c-pagination__page-menu">
777
+ <div class="pf-v5-c-options-menu pf-m-top">
778
+ <button
779
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
780
+ type="button"
781
+ id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
782
+ aria-haspopup="listbox"
783
+ aria-expanded="false"
784
+ >
785
+ <span class="pf-v5-c-options-menu__toggle-text">
786
+ <b>1 - 10</b>&nbsp;of&nbsp;
787
+ <b>36</b>
788
+ </span>
789
+ <div class="pf-v5-c-options-menu__toggle-icon">
790
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
791
+ </div>
792
+ </button>
793
+ <ul
794
+ class="pf-v5-c-options-menu__menu pf-m-top"
795
+ role="menu"
796
+ aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
797
+ hidden
798
+ >
799
+ <li role="none">
800
+ <button
801
+ class="pf-v5-c-options-menu__menu-item"
802
+ type="button"
803
+ role="menuitem"
804
+ >5 per page</button>
805
+ </li>
806
+ <li role="none">
807
+ <button
808
+ class="pf-v5-c-options-menu__menu-item"
809
+ type="button"
810
+ role="menuitem"
811
+ >
812
+ 10 per page
813
+ <div class="pf-v5-c-options-menu__menu-item-icon">
814
+ <i class="fas fa-check" aria-hidden="true"></i>
815
+ </div>
816
+ </button>
817
+ </li>
818
+ <li role="none">
819
+ <button
820
+ class="pf-v5-c-options-menu__menu-item"
821
+ type="button"
822
+ role="menuitem"
823
+ >20 per page</button>
824
+ </li>
825
+ </ul>
826
+ </div>
817
827
  </div>
818
828
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
819
829
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
@@ -897,12 +907,76 @@ wrapperTag: div
897
907
  </span>
898
908
  <div class="pf-v5-c-masthead__main">
899
909
  <a class="pf-v5-c-masthead__brand" href="#">
900
- <img
901
- class="pf-v5-c-brand"
902
- src="/assets/images/pf-logo.svg"
903
- alt="PatternFly logo"
904
- style="--pf-v5-c-brand--Height:36px"
905
- />
910
+ <svg height="40px" viewBox="0 0 679 158">
911
+ <title>PF-HorizontalLogo-Color</title>
912
+ <defs>
913
+ <linearGradient
914
+ x1="68%"
915
+ y1="2.25860997e-13%"
916
+ x2="32%"
917
+ y2="100%"
918
+ id="linearGradient-data-list-actionable-example-masthead"
919
+ >
920
+ <stop stop-color="#2B9AF3" offset="0%" />
921
+ <stop
922
+ stop-color="#73BCF7"
923
+ stop-opacity="0.502212631"
924
+ offset="100%"
925
+ />
926
+ </linearGradient>
927
+ </defs>
928
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
929
+ <g
930
+ transform="translate(206.000000, 45.750000)"
931
+ fill="var(--pf-t--global--text--color--regular)"
932
+ fill-rule="nonzero"
933
+ >
934
+ <path
935
+ 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"
936
+ />
937
+ <path
938
+ 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"
939
+ />
940
+ <path
941
+ 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"
942
+ />
943
+ <path
944
+ 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"
945
+ />
946
+ <path
947
+ 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"
948
+ />
949
+ <path
950
+ 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"
951
+ />
952
+ <path
953
+ 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"
954
+ />
955
+ <polygon
956
+ 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"
957
+ />
958
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
959
+ <path
960
+ 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"
961
+ />
962
+ </g>
963
+ <g transform="translate(0.000000, 0.000000)">
964
+ <path
965
+ 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"
966
+ fill="#0066CC"
967
+ />
968
+ <path
969
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
970
+ fill="url(#linearGradient-data-list-actionable-example-masthead)"
971
+ />
972
+ <path
973
+ 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"
974
+ fill="url(#linearGradient-data-list-actionable-example-masthead)"
975
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
976
+ />
977
+ </g>
978
+ </g>
979
+ </svg>
906
980
  </a>
907
981
  </div>
908
982
  <div class="pf-v5-c-masthead__content">
@@ -912,8 +986,38 @@ wrapperTag: div
912
986
  >
913
987
  <div class="pf-v5-c-toolbar__content">
914
988
  <div class="pf-v5-c-toolbar__content-section">
989
+ <div class="pf-v5-c-toolbar__item">
990
+ <button
991
+ class="pf-v5-c-menu-toggle"
992
+ type="button"
993
+ aria-expanded="false"
994
+ >
995
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
996
+ <span class="pf-v5-c-menu-toggle__controls">
997
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
998
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
999
+ </span>
1000
+ </span>
1001
+ </button>
1002
+ </div>
1003
+
1004
+ <div class="pf-v5-c-toolbar__item">
1005
+ <button
1006
+ class="pf-v5-c-menu-toggle"
1007
+ type="button"
1008
+ aria-expanded="false"
1009
+ >
1010
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1011
+ <span class="pf-v5-c-menu-toggle__controls">
1012
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1013
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1014
+ </span>
1015
+ </span>
1016
+ </button>
1017
+ </div>
1018
+
915
1019
  <div
916
- 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"
1020
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
917
1021
  >
918
1022
  <div
919
1023
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -960,27 +1064,6 @@ wrapperTag: div
960
1064
  </button>
961
1065
  </div>
962
1066
  </div>
963
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
964
- <button
965
- class="pf-v5-c-menu-toggle pf-m-full-height"
966
- type="button"
967
- aria-expanded="false"
968
- >
969
- <span class="pf-v5-c-menu-toggle__icon">
970
- <img
971
- class="pf-v5-c-avatar"
972
- alt="Avatar image"
973
- src="/assets/images/img_avatar-light.svg"
974
- />
975
- </span>
976
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
977
- <span class="pf-v5-c-menu-toggle__controls">
978
- <span class="pf-v5-c-menu-toggle__toggle-icon">
979
- <i class="fas fa-angle-down" aria-hidden="true"></i>
980
- </span>
981
- </span>
982
- </button>
983
- </div>
984
1067
  </div>
985
1068
  </div>
986
1069
  </div>
@@ -1070,7 +1153,7 @@ wrapperTag: div
1070
1153
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
1071
1154
  >
1072
1155
  <div class="pf-v5-c-card">
1073
- <div class="pf-v5-c-toolbar">
1156
+ <div class="pf-v5-c-toolbar" id="data-list-actionable-example-toolbar">
1074
1157
  <div class="pf-v5-c-toolbar__content">
1075
1158
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
1076
1159
  <div
@@ -1078,124 +1161,54 @@ wrapperTag: div
1078
1161
  >
1079
1162
  <div class="pf-v5-c-toolbar__toggle">
1080
1163
  <button
1081
- class="pf-v5-c-button pf-m-plain"
1164
+ class="pf-v5-c-menu-toggle pf-m-plain"
1082
1165
  type="button"
1083
- aria-label="Show filters"
1084
1166
  aria-expanded="false"
1085
- aria-controls="-expandable-content"
1167
+ aria-label="Show filters"
1168
+ aria-controls="data-list-actionable-example-toolbar-expandable-content"
1086
1169
  >
1087
1170
  <i class="fas fa-filter" aria-hidden="true"></i>
1088
1171
  </button>
1089
1172
  </div>
1090
1173
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
1091
- <div class="pf-v5-c-dropdown">
1092
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
1093
- <label
1094
- class="pf-v5-c-dropdown__toggle-check"
1095
- for="-bulk-select-toggle-check"
1096
- >
1097
- <div class="pf-v5-c-check pf-m-standalone">
1098
- <input
1099
- class="pf-v5-c-check__input"
1100
- type="checkbox"
1101
- id="-bulk-select-toggle-check"
1102
- aria-label="Select all"
1103
- />
1104
- </div>
1105
- </label>
1106
-
1107
- <button
1108
- class="pf-v5-c-dropdown__toggle-button"
1109
- type="button"
1110
- aria-expanded="false"
1111
- id="-bulk-select-toggle-button"
1112
- aria-label="Dropdown toggle"
1113
- >
1114
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1115
- </button>
1116
- </div>
1117
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1118
- <li role="none">
1119
- <button
1120
- class="pf-v5-c-dropdown__menu-item"
1121
- role="menuitem"
1122
- type="button"
1123
- >Select all</button>
1124
- </li>
1125
- <li role="none">
1126
- <button
1127
- class="pf-v5-c-dropdown__menu-item"
1128
- role="menuitem"
1129
- type="button"
1130
- >Select none</button>
1131
- </li>
1132
- <li role="none">
1133
- <button
1134
- class="pf-v5-c-dropdown__menu-item"
1135
- role="menuitem"
1136
- type="button"
1137
- >Other action</button>
1138
- </li>
1139
- </ul>
1140
- </div>
1141
- </div>
1142
-
1143
- <div class="pf-v5-c-toolbar__item">
1144
- <div class="pf-v5-c-context-selector">
1145
- <span id="-context-selector-label" hidden>Selected project:</span>
1174
+ <div
1175
+ class="pf-v5-c-menu-toggle pf-m-split-button"
1176
+ id="data-list-actionable-example-toolbar-check"
1177
+ >
1178
+ <label
1179
+ class="pf-v5-c-check pf-m-standalone"
1180
+ id="data-list-actionable-example-toolbar-check-check"
1181
+ for="data-list-actionable-example-toolbar-check-check-input"
1182
+ >
1183
+ <input
1184
+ class="pf-v5-c-check__input"
1185
+ type="checkbox"
1186
+ id="data-list-actionable-example-toolbar-check-check-input"
1187
+ name="data-list-actionable-example-toolbar-check-check-input"
1188
+ aria-label="Standalone check"
1189
+ />
1190
+ </label>
1146
1191
  <button
1147
- class="pf-v5-c-context-selector__toggle"
1192
+ class="pf-v5-c-menu-toggle__button"
1193
+ type="button"
1148
1194
  aria-expanded="false"
1149
- id="-context-selector-toggle"
1150
- aria-labelledby="-context-selector-label -context-selector-toggle"
1195
+ id="data-list-actionable-example-toolbar-menu-toggle-toggle-button"
1196
+ aria-label="Menu toggle"
1151
1197
  >
1152
- <span
1153
- class="pf-v5-c-context-selector__toggle-text"
1154
- >My project</span>
1155
- <span class="pf-v5-c-context-selector__toggle-icon">
1156
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1198
+ <span class="pf-v5-c-menu-toggle__controls">
1199
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1200
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1201
+ </span>
1157
1202
  </span>
1158
1203
  </button>
1159
- <div class="pf-v5-c-context-selector__menu" hidden>
1160
- <div class="pf-v5-c-context-selector__menu-search">
1161
- <div class="pf-v5-c-text-input-group">
1162
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
1163
- <span class="pf-v5-c-text-input-group__text">
1164
- <span class="pf-v5-c-text-input-group__icon">
1165
- <i class="fas fa-fw fa-search"></i>
1166
- </span>
1167
- <input
1168
- class="pf-v5-c-text-input-group__text-input"
1169
- type="text"
1170
- placeholder="Search"
1171
- value
1172
- aria-label="Search input"
1173
- />
1174
- </span>
1175
- </div>
1176
- </div>
1177
- </div>
1178
- <ul
1179
- class="pf-v5-c-context-selector__menu-list"
1180
- role="menu"
1181
- >
1182
- <li>My project</li>
1183
- <li>OpenShift cluster</li>
1184
- <li>Production Ansible</li>
1185
- <li>AWS</li>
1186
- <li>Azure</li>
1187
- <li>My project</li>
1188
- <li>OpenShift cluster</li>
1189
- <li>Production Ansible</li>
1190
- <li>AWS</li>
1191
- <li>Azure</li>
1192
- </ul>
1193
- </div>
1194
1204
  </div>
1195
1205
  </div>
1196
1206
  </div>
1197
1207
 
1198
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
1208
+ <div
1209
+ class="pf-v5-c-overflow-menu"
1210
+ id="data-list-actionable-example-toolbar-overflow-menu"
1211
+ >
1199
1212
  <div
1200
1213
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
1201
1214
  >
@@ -1220,7 +1233,7 @@ wrapperTag: div
1220
1233
  <button
1221
1234
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
1222
1235
  type="button"
1223
- id="-overflow-menu-dropdown-toggle"
1236
+ id="data-list-actionable-example-toolbar-overflow-menu-dropdown-toggle"
1224
1237
  aria-label="Dropdown with additional options"
1225
1238
  aria-expanded="false"
1226
1239
  >
@@ -1229,7 +1242,7 @@ wrapperTag: div
1229
1242
  <ul
1230
1243
  class="pf-v5-c-dropdown__menu"
1231
1244
  role="menu"
1232
- aria-labelledby="-overflow-menu-dropdown-toggle"
1245
+ aria-labelledby="data-list-actionable-example-toolbar-overflow-menu-dropdown-toggle"
1233
1246
  hidden
1234
1247
  >
1235
1248
  <li role="none">
@@ -1245,55 +1258,57 @@ wrapperTag: div
1245
1258
 
1246
1259
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
1247
1260
  <div class="pf-v5-c-pagination pf-m-compact">
1248
- <div class="pf-v5-c-options-menu">
1249
- <button
1250
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1251
- type="button"
1252
- id="-top-pagination-toggle"
1253
- aria-haspopup="listbox"
1254
- aria-expanded="false"
1255
- >
1256
- <span class="pf-v5-c-options-menu__toggle-text">
1257
- <b>1 - 10</b>&nbsp;of&nbsp;
1258
- <b>36</b>
1259
- </span>
1260
- <div class="pf-v5-c-options-menu__toggle-icon">
1261
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1262
- </div>
1263
- </button>
1264
- <ul
1265
- class="pf-v5-c-options-menu__menu"
1266
- role="menu"
1267
- aria-labelledby="-top-pagination-toggle"
1268
- hidden
1269
- >
1270
- <li role="none">
1271
- <button
1272
- class="pf-v5-c-options-menu__menu-item"
1273
- type="button"
1274
- role="menuitem"
1275
- >5 per page</button>
1276
- </li>
1277
- <li role="none">
1278
- <button
1279
- class="pf-v5-c-options-menu__menu-item"
1280
- type="button"
1281
- role="menuitem"
1282
- >
1283
- 10 per page
1284
- <div class="pf-v5-c-options-menu__menu-item-icon">
1285
- <i class="fas fa-check" aria-hidden="true"></i>
1286
- </div>
1287
- </button>
1288
- </li>
1289
- <li role="none">
1290
- <button
1291
- class="pf-v5-c-options-menu__menu-item"
1292
- type="button"
1293
- role="menuitem"
1294
- >20 per page</button>
1295
- </li>
1296
- </ul>
1261
+ <div class="pf-v5-c-pagination__page-menu">
1262
+ <div class="pf-v5-c-options-menu">
1263
+ <button
1264
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1265
+ type="button"
1266
+ id="data-list-actionable-example-toolbar-top-pagination-toggle"
1267
+ aria-haspopup="listbox"
1268
+ aria-expanded="false"
1269
+ >
1270
+ <span class="pf-v5-c-options-menu__toggle-text">
1271
+ <b>1 - 10</b>&nbsp;of&nbsp;
1272
+ <b>36</b>
1273
+ </span>
1274
+ <div class="pf-v5-c-options-menu__toggle-icon">
1275
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1276
+ </div>
1277
+ </button>
1278
+ <ul
1279
+ class="pf-v5-c-options-menu__menu"
1280
+ role="menu"
1281
+ aria-labelledby="data-list-actionable-example-toolbar-top-pagination-toggle"
1282
+ hidden
1283
+ >
1284
+ <li role="none">
1285
+ <button
1286
+ class="pf-v5-c-options-menu__menu-item"
1287
+ type="button"
1288
+ role="menuitem"
1289
+ >5 per page</button>
1290
+ </li>
1291
+ <li role="none">
1292
+ <button
1293
+ class="pf-v5-c-options-menu__menu-item"
1294
+ type="button"
1295
+ role="menuitem"
1296
+ >
1297
+ 10 per page
1298
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1299
+ <i class="fas fa-check" aria-hidden="true"></i>
1300
+ </div>
1301
+ </button>
1302
+ </li>
1303
+ <li role="none">
1304
+ <button
1305
+ class="pf-v5-c-options-menu__menu-item"
1306
+ type="button"
1307
+ role="menuitem"
1308
+ >20 per page</button>
1309
+ </li>
1310
+ </ul>
1311
+ </div>
1297
1312
  </div>
1298
1313
  <nav
1299
1314
  class="pf-v5-c-pagination__nav"
@@ -1325,7 +1340,7 @@ wrapperTag: div
1325
1340
 
1326
1341
  <div
1327
1342
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
1328
- id="-expandable-content"
1343
+ id="data-list-actionable-example-toolbar-expandable-content"
1329
1344
  hidden
1330
1345
  ></div>
1331
1346
  </div>
@@ -1626,55 +1641,57 @@ wrapperTag: div
1626
1641
  </li>
1627
1642
  </ul>
1628
1643
  <div class="pf-v5-c-pagination pf-m-bottom">
1629
- <div class="pf-v5-c-options-menu pf-m-top">
1630
- <button
1631
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1632
- type="button"
1633
- id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
1634
- aria-haspopup="listbox"
1635
- aria-expanded="false"
1636
- >
1637
- <span class="pf-v5-c-options-menu__toggle-text">
1638
- <b>1 - 10</b>&nbsp;of&nbsp;
1639
- <b>36</b>
1640
- </span>
1641
- <div class="pf-v5-c-options-menu__toggle-icon">
1642
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1643
- </div>
1644
- </button>
1645
- <ul
1646
- class="pf-v5-c-options-menu__menu pf-m-top"
1647
- role="menu"
1648
- aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
1649
- hidden
1650
- >
1651
- <li role="none">
1652
- <button
1653
- class="pf-v5-c-options-menu__menu-item"
1654
- type="button"
1655
- role="menuitem"
1656
- >5 per page</button>
1657
- </li>
1658
- <li role="none">
1659
- <button
1660
- class="pf-v5-c-options-menu__menu-item"
1661
- type="button"
1662
- role="menuitem"
1663
- >
1664
- 10 per page
1665
- <div class="pf-v5-c-options-menu__menu-item-icon">
1666
- <i class="fas fa-check" aria-hidden="true"></i>
1667
- </div>
1668
- </button>
1669
- </li>
1670
- <li role="none">
1671
- <button
1672
- class="pf-v5-c-options-menu__menu-item"
1673
- type="button"
1674
- role="menuitem"
1675
- >20 per page</button>
1676
- </li>
1677
- </ul>
1644
+ <div class="pf-v5-c-pagination__page-menu">
1645
+ <div class="pf-v5-c-options-menu pf-m-top">
1646
+ <button
1647
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1648
+ type="button"
1649
+ id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
1650
+ aria-haspopup="listbox"
1651
+ aria-expanded="false"
1652
+ >
1653
+ <span class="pf-v5-c-options-menu__toggle-text">
1654
+ <b>1 - 10</b>&nbsp;of&nbsp;
1655
+ <b>36</b>
1656
+ </span>
1657
+ <div class="pf-v5-c-options-menu__toggle-icon">
1658
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1659
+ </div>
1660
+ </button>
1661
+ <ul
1662
+ class="pf-v5-c-options-menu__menu pf-m-top"
1663
+ role="menu"
1664
+ aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
1665
+ hidden
1666
+ >
1667
+ <li role="none">
1668
+ <button
1669
+ class="pf-v5-c-options-menu__menu-item"
1670
+ type="button"
1671
+ role="menuitem"
1672
+ >5 per page</button>
1673
+ </li>
1674
+ <li role="none">
1675
+ <button
1676
+ class="pf-v5-c-options-menu__menu-item"
1677
+ type="button"
1678
+ role="menuitem"
1679
+ >
1680
+ 10 per page
1681
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1682
+ <i class="fas fa-check" aria-hidden="true"></i>
1683
+ </div>
1684
+ </button>
1685
+ </li>
1686
+ <li role="none">
1687
+ <button
1688
+ class="pf-v5-c-options-menu__menu-item"
1689
+ type="button"
1690
+ role="menuitem"
1691
+ >20 per page</button>
1692
+ </li>
1693
+ </ul>
1694
+ </div>
1678
1695
  </div>
1679
1696
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
1680
1697
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
@@ -1758,12 +1775,76 @@ wrapperTag: div
1758
1775
  </span>
1759
1776
  <div class="pf-v5-c-masthead__main">
1760
1777
  <a class="pf-v5-c-masthead__brand" href="#">
1761
- <img
1762
- class="pf-v5-c-brand"
1763
- src="/assets/images/pf-logo.svg"
1764
- alt="PatternFly logo"
1765
- style="--pf-v5-c-brand--Height:36px"
1766
- />
1778
+ <svg height="40px" viewBox="0 0 679 158">
1779
+ <title>PF-HorizontalLogo-Color</title>
1780
+ <defs>
1781
+ <linearGradient
1782
+ x1="68%"
1783
+ y1="2.25860997e-13%"
1784
+ x2="32%"
1785
+ y2="100%"
1786
+ id="linearGradient-data-list-expandable-example-masthead"
1787
+ >
1788
+ <stop stop-color="#2B9AF3" offset="0%" />
1789
+ <stop
1790
+ stop-color="#73BCF7"
1791
+ stop-opacity="0.502212631"
1792
+ offset="100%"
1793
+ />
1794
+ </linearGradient>
1795
+ </defs>
1796
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1797
+ <g
1798
+ transform="translate(206.000000, 45.750000)"
1799
+ fill="var(--pf-t--global--text--color--regular)"
1800
+ fill-rule="nonzero"
1801
+ >
1802
+ <path
1803
+ 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"
1804
+ />
1805
+ <path
1806
+ 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"
1807
+ />
1808
+ <path
1809
+ 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"
1810
+ />
1811
+ <path
1812
+ 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"
1813
+ />
1814
+ <path
1815
+ 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"
1816
+ />
1817
+ <path
1818
+ 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"
1819
+ />
1820
+ <path
1821
+ 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"
1822
+ />
1823
+ <polygon
1824
+ 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"
1825
+ />
1826
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1827
+ <path
1828
+ 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"
1829
+ />
1830
+ </g>
1831
+ <g transform="translate(0.000000, 0.000000)">
1832
+ <path
1833
+ 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"
1834
+ fill="#0066CC"
1835
+ />
1836
+ <path
1837
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1838
+ fill="url(#linearGradient-data-list-expandable-example-masthead)"
1839
+ />
1840
+ <path
1841
+ 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"
1842
+ fill="url(#linearGradient-data-list-expandable-example-masthead)"
1843
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1844
+ />
1845
+ </g>
1846
+ </g>
1847
+ </svg>
1767
1848
  </a>
1768
1849
  </div>
1769
1850
  <div class="pf-v5-c-masthead__content">
@@ -1773,8 +1854,38 @@ wrapperTag: div
1773
1854
  >
1774
1855
  <div class="pf-v5-c-toolbar__content">
1775
1856
  <div class="pf-v5-c-toolbar__content-section">
1857
+ <div class="pf-v5-c-toolbar__item">
1858
+ <button
1859
+ class="pf-v5-c-menu-toggle"
1860
+ type="button"
1861
+ aria-expanded="false"
1862
+ >
1863
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1864
+ <span class="pf-v5-c-menu-toggle__controls">
1865
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1866
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1867
+ </span>
1868
+ </span>
1869
+ </button>
1870
+ </div>
1871
+
1872
+ <div class="pf-v5-c-toolbar__item">
1873
+ <button
1874
+ class="pf-v5-c-menu-toggle"
1875
+ type="button"
1876
+ aria-expanded="false"
1877
+ >
1878
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1879
+ <span class="pf-v5-c-menu-toggle__controls">
1880
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1881
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1882
+ </span>
1883
+ </span>
1884
+ </button>
1885
+ </div>
1886
+
1776
1887
  <div
1777
- 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"
1888
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1778
1889
  >
1779
1890
  <div
1780
1891
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1821,27 +1932,6 @@ wrapperTag: div
1821
1932
  </button>
1822
1933
  </div>
1823
1934
  </div>
1824
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1825
- <button
1826
- class="pf-v5-c-menu-toggle pf-m-full-height"
1827
- type="button"
1828
- aria-expanded="false"
1829
- >
1830
- <span class="pf-v5-c-menu-toggle__icon">
1831
- <img
1832
- class="pf-v5-c-avatar"
1833
- alt="Avatar image"
1834
- src="/assets/images/img_avatar-light.svg"
1835
- />
1836
- </span>
1837
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1838
- <span class="pf-v5-c-menu-toggle__controls">
1839
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1840
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1841
- </span>
1842
- </span>
1843
- </button>
1844
- </div>
1845
1935
  </div>
1846
1936
  </div>
1847
1937
  </div>
@@ -1931,85 +2021,72 @@ wrapperTag: div
1931
2021
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
1932
2022
  >
1933
2023
  <div class="pf-v5-c-card">
1934
- <div class="pf-v5-c-toolbar">
2024
+ <div class="pf-v5-c-toolbar" id="data-list-expandable-example-toolbar">
1935
2025
  <div class="pf-v5-c-toolbar__content">
1936
2026
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
1937
2027
  <div class="pf-v5-c-toolbar__item pf-m-expand-all">
1938
- <button
1939
- class="pf-v5-c-button pf-m-plain"
1940
- type="button"
1941
- aria-label="Expand all rows"
1942
- >
1943
- <span class="pf-v5-c-toolbar__expand-all-icon">
1944
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1945
- </span>
1946
- </button>
1947
- </div>
1948
-
1949
- <div
1950
- class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
1951
- >
1952
- <div class="pf-v5-c-toolbar__toggle">
1953
- <button
1954
- class="pf-v5-c-button pf-m-plain"
1955
- type="button"
1956
- aria-label="Show filters"
1957
- aria-expanded="false"
1958
- aria-controls="-expandable-content"
1959
- >
1960
- <i class="fas fa-filter" aria-hidden="true"></i>
1961
- </button>
1962
- </div>
1963
- <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
1964
- <div class="pf-v5-c-dropdown">
1965
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
1966
- <label
1967
- class="pf-v5-c-dropdown__toggle-check"
1968
- for="-bulk-select-toggle-check"
1969
- >
1970
- <div class="pf-v5-c-check pf-m-standalone">
1971
- <input
1972
- class="pf-v5-c-check__input"
1973
- type="checkbox"
1974
- id="-bulk-select-toggle-check"
1975
- aria-label="Select all"
1976
- />
1977
- </div>
1978
- </label>
1979
-
1980
- <button
1981
- class="pf-v5-c-dropdown__toggle-button"
1982
- type="button"
1983
- aria-expanded="false"
1984
- id="-bulk-select-toggle-button"
1985
- aria-label="Dropdown toggle"
1986
- >
1987
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1988
- </button>
1989
- </div>
1990
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1991
- <li role="none">
1992
- <button
1993
- class="pf-v5-c-dropdown__menu-item"
1994
- role="menuitem"
1995
- type="button"
1996
- >Select all</button>
1997
- </li>
1998
- <li role="none">
1999
- <button
2000
- class="pf-v5-c-dropdown__menu-item"
2001
- role="menuitem"
2002
- type="button"
2003
- >Select none</button>
2004
- </li>
2005
- <li role="none">
2006
- <button
2007
- class="pf-v5-c-dropdown__menu-item"
2008
- role="menuitem"
2009
- type="button"
2010
- >Other action</button>
2011
- </li>
2012
- </ul>
2028
+ <button
2029
+ class="pf-v5-c-button pf-m-plain"
2030
+ type="button"
2031
+ aria-label="Expand all rows"
2032
+ >
2033
+ <span class="pf-v5-c-icon">
2034
+ <span
2035
+ class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
2036
+ >
2037
+ <span class="pf-v5-c-toolbar__expand-all-icon">
2038
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2039
+ </span>
2040
+ </span>
2041
+ </span>
2042
+ </button>
2043
+ </div>
2044
+
2045
+ <div
2046
+ class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
2047
+ >
2048
+ <div class="pf-v5-c-toolbar__toggle">
2049
+ <button
2050
+ class="pf-v5-c-menu-toggle pf-m-plain"
2051
+ type="button"
2052
+ aria-expanded="false"
2053
+ aria-label="Show filters"
2054
+ aria-controls="data-list-expandable-example-toolbar-expandable-content"
2055
+ >
2056
+ <i class="fas fa-filter" aria-hidden="true"></i>
2057
+ </button>
2058
+ </div>
2059
+ <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
2060
+ <div
2061
+ class="pf-v5-c-menu-toggle pf-m-split-button"
2062
+ id="data-list-expandable-example-toolbar-check"
2063
+ >
2064
+ <label
2065
+ class="pf-v5-c-check pf-m-standalone"
2066
+ id="data-list-expandable-example-toolbar-check-check"
2067
+ for="data-list-expandable-example-toolbar-check-check-input"
2068
+ >
2069
+ <input
2070
+ class="pf-v5-c-check__input"
2071
+ type="checkbox"
2072
+ id="data-list-expandable-example-toolbar-check-check-input"
2073
+ name="data-list-expandable-example-toolbar-check-check-input"
2074
+ aria-label="Standalone check"
2075
+ />
2076
+ </label>
2077
+ <button
2078
+ class="pf-v5-c-menu-toggle__button"
2079
+ type="button"
2080
+ aria-expanded="false"
2081
+ id="data-list-expandable-example-toolbar-menu-toggle-toggle-button"
2082
+ aria-label="Menu toggle"
2083
+ >
2084
+ <span class="pf-v5-c-menu-toggle__controls">
2085
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2086
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2087
+ </span>
2088
+ </span>
2089
+ </button>
2013
2090
  </div>
2014
2091
  </div>
2015
2092
 
@@ -2020,72 +2097,22 @@ wrapperTag: div
2020
2097
  role="group"
2021
2098
  >
2022
2099
  <div class="pf-v5-c-input-group__item">
2023
- <div class="pf-v5-c-select" style="width: 124px">
2024
- <span id="-select-name-label" hidden>Choose one</span>
2025
-
2026
- <button
2027
- class="pf-v5-c-select__toggle"
2028
- type="button"
2029
- id="-select-name-toggle"
2030
- aria-haspopup="true"
2031
- aria-expanded="false"
2032
- aria-labelledby="-select-name-label -select-name-toggle"
2033
- >
2034
- <div class="pf-v5-c-select__toggle-wrapper">
2035
- <span class="pf-v5-c-select__toggle-icon">
2036
- <i class="fas fa-filter" aria-hidden="true"></i>
2037
- </span>
2038
- <span class="pf-v5-c-select__toggle-text">Name</span>
2039
- </div>
2040
- <span class="pf-v5-c-select__toggle-arrow">
2041
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2100
+ <button
2101
+ class="pf-v5-c-menu-toggle"
2102
+ type="button"
2103
+ aria-expanded="false"
2104
+ id="data-list-expandable-example-toolbar-search-filter-menu"
2105
+ >
2106
+ <span class="pf-v5-c-menu-toggle__icon">
2107
+ <i class="fas fa-filter" aria-hidden="true"></i>
2108
+ </span>
2109
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
2110
+ <span class="pf-v5-c-menu-toggle__controls">
2111
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2112
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2042
2113
  </span>
2043
- </button>
2044
-
2045
- <ul
2046
- class="pf-v5-c-select__menu"
2047
- role="listbox"
2048
- aria-labelledby="-select-name-label"
2049
- hidden
2050
- >
2051
- <li role="presentation">
2052
- <button
2053
- class="pf-v5-c-select__menu-item"
2054
- role="option"
2055
- >Running</button>
2056
- </li>
2057
- <li role="presentation">
2058
- <button
2059
- class="pf-v5-c-select__menu-item pf-m-selected"
2060
- role="option"
2061
- aria-selected="true"
2062
- >
2063
- Stopped
2064
- <span class="pf-v5-c-select__menu-item-icon">
2065
- <i class="fas fa-check" aria-hidden="true"></i>
2066
- </span>
2067
- </button>
2068
- </li>
2069
- <li role="presentation">
2070
- <button
2071
- class="pf-v5-c-select__menu-item"
2072
- role="option"
2073
- >Down</button>
2074
- </li>
2075
- <li role="presentation">
2076
- <button
2077
- class="pf-v5-c-select__menu-item"
2078
- role="option"
2079
- >Degraded</button>
2080
- </li>
2081
- <li role="presentation">
2082
- <button
2083
- class="pf-v5-c-select__menu-item"
2084
- role="option"
2085
- >Needs maintenance</button>
2086
- </li>
2087
- </ul>
2088
- </div>
2114
+ </span>
2115
+ </button>
2089
2116
  </div>
2090
2117
  <div class="pf-v5-c-input-group__item pf-m-fill">
2091
2118
  <div class="pf-v5-c-text-input-group">
@@ -2109,7 +2136,10 @@ wrapperTag: div
2109
2136
  </div>
2110
2137
  </div>
2111
2138
 
2112
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
2139
+ <div
2140
+ class="pf-v5-c-overflow-menu"
2141
+ id="data-list-expandable-example-toolbar-overflow-menu"
2142
+ >
2113
2143
  <div
2114
2144
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
2115
2145
  >
@@ -2127,7 +2157,7 @@ wrapperTag: div
2127
2157
  <button
2128
2158
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
2129
2159
  type="button"
2130
- id="-overflow-menu-dropdown-toggle"
2160
+ id="data-list-expandable-example-toolbar-overflow-menu-dropdown-toggle"
2131
2161
  aria-label="Dropdown with additional options"
2132
2162
  aria-expanded="false"
2133
2163
  >
@@ -2136,7 +2166,7 @@ wrapperTag: div
2136
2166
  <ul
2137
2167
  class="pf-v5-c-dropdown__menu"
2138
2168
  role="menu"
2139
- aria-labelledby="-overflow-menu-dropdown-toggle"
2169
+ aria-labelledby="data-list-expandable-example-toolbar-overflow-menu-dropdown-toggle"
2140
2170
  hidden
2141
2171
  >
2142
2172
  <li role="none">
@@ -2152,55 +2182,57 @@ wrapperTag: div
2152
2182
 
2153
2183
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
2154
2184
  <div class="pf-v5-c-pagination pf-m-compact">
2155
- <div class="pf-v5-c-options-menu">
2156
- <button
2157
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2158
- type="button"
2159
- id="-top-pagination-toggle"
2160
- aria-haspopup="listbox"
2161
- aria-expanded="false"
2162
- >
2163
- <span class="pf-v5-c-options-menu__toggle-text">
2164
- <b>1 - 10</b>&nbsp;of&nbsp;
2165
- <b>36</b>
2166
- </span>
2167
- <div class="pf-v5-c-options-menu__toggle-icon">
2168
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2169
- </div>
2170
- </button>
2171
- <ul
2172
- class="pf-v5-c-options-menu__menu"
2173
- role="menu"
2174
- aria-labelledby="-top-pagination-toggle"
2175
- hidden
2176
- >
2177
- <li role="none">
2178
- <button
2179
- class="pf-v5-c-options-menu__menu-item"
2180
- type="button"
2181
- role="menuitem"
2182
- >5 per page</button>
2183
- </li>
2184
- <li role="none">
2185
- <button
2186
- class="pf-v5-c-options-menu__menu-item"
2187
- type="button"
2188
- role="menuitem"
2189
- >
2190
- 10 per page
2191
- <div class="pf-v5-c-options-menu__menu-item-icon">
2192
- <i class="fas fa-check" aria-hidden="true"></i>
2193
- </div>
2194
- </button>
2195
- </li>
2196
- <li role="none">
2197
- <button
2198
- class="pf-v5-c-options-menu__menu-item"
2199
- type="button"
2200
- role="menuitem"
2201
- >20 per page</button>
2202
- </li>
2203
- </ul>
2185
+ <div class="pf-v5-c-pagination__page-menu">
2186
+ <div class="pf-v5-c-options-menu">
2187
+ <button
2188
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2189
+ type="button"
2190
+ id="data-list-expandable-example-toolbar-top-pagination-toggle"
2191
+ aria-haspopup="listbox"
2192
+ aria-expanded="false"
2193
+ >
2194
+ <span class="pf-v5-c-options-menu__toggle-text">
2195
+ <b>1 - 10</b>&nbsp;of&nbsp;
2196
+ <b>36</b>
2197
+ </span>
2198
+ <div class="pf-v5-c-options-menu__toggle-icon">
2199
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2200
+ </div>
2201
+ </button>
2202
+ <ul
2203
+ class="pf-v5-c-options-menu__menu"
2204
+ role="menu"
2205
+ aria-labelledby="data-list-expandable-example-toolbar-top-pagination-toggle"
2206
+ hidden
2207
+ >
2208
+ <li role="none">
2209
+ <button
2210
+ class="pf-v5-c-options-menu__menu-item"
2211
+ type="button"
2212
+ role="menuitem"
2213
+ >5 per page</button>
2214
+ </li>
2215
+ <li role="none">
2216
+ <button
2217
+ class="pf-v5-c-options-menu__menu-item"
2218
+ type="button"
2219
+ role="menuitem"
2220
+ >
2221
+ 10 per page
2222
+ <div class="pf-v5-c-options-menu__menu-item-icon">
2223
+ <i class="fas fa-check" aria-hidden="true"></i>
2224
+ </div>
2225
+ </button>
2226
+ </li>
2227
+ <li role="none">
2228
+ <button
2229
+ class="pf-v5-c-options-menu__menu-item"
2230
+ type="button"
2231
+ role="menuitem"
2232
+ >20 per page</button>
2233
+ </li>
2234
+ </ul>
2235
+ </div>
2204
2236
  </div>
2205
2237
  <nav
2206
2238
  class="pf-v5-c-pagination__nav"
@@ -2232,7 +2264,7 @@ wrapperTag: div
2232
2264
 
2233
2265
  <div
2234
2266
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
2235
- id="-expandable-content"
2267
+ id="data-list-expandable-example-toolbar-expandable-content"
2236
2268
  hidden
2237
2269
  ></div>
2238
2270
  </div>
@@ -3283,55 +3315,57 @@ wrapperTag: div
3283
3315
  </li>
3284
3316
  </ul>
3285
3317
  <div class="pf-v5-c-pagination pf-m-bottom">
3286
- <div class="pf-v5-c-options-menu pf-m-top">
3287
- <button
3288
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3289
- type="button"
3290
- id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
3291
- aria-haspopup="listbox"
3292
- aria-expanded="false"
3293
- >
3294
- <span class="pf-v5-c-options-menu__toggle-text">
3295
- <b>1 - 10</b>&nbsp;of&nbsp;
3296
- <b>36</b>
3297
- </span>
3298
- <div class="pf-v5-c-options-menu__toggle-icon">
3299
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3300
- </div>
3301
- </button>
3302
- <ul
3303
- class="pf-v5-c-options-menu__menu pf-m-top"
3304
- role="menu"
3305
- aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
3306
- hidden
3307
- >
3308
- <li role="none">
3309
- <button
3310
- class="pf-v5-c-options-menu__menu-item"
3311
- type="button"
3312
- role="menuitem"
3313
- >5 per page</button>
3314
- </li>
3315
- <li role="none">
3316
- <button
3317
- class="pf-v5-c-options-menu__menu-item"
3318
- type="button"
3319
- role="menuitem"
3320
- >
3321
- 10 per page
3322
- <div class="pf-v5-c-options-menu__menu-item-icon">
3323
- <i class="fas fa-check" aria-hidden="true"></i>
3324
- </div>
3325
- </button>
3326
- </li>
3327
- <li role="none">
3328
- <button
3329
- class="pf-v5-c-options-menu__menu-item"
3330
- type="button"
3331
- role="menuitem"
3332
- >20 per page</button>
3333
- </li>
3334
- </ul>
3318
+ <div class="pf-v5-c-pagination__page-menu">
3319
+ <div class="pf-v5-c-options-menu pf-m-top">
3320
+ <button
3321
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3322
+ type="button"
3323
+ id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
3324
+ aria-haspopup="listbox"
3325
+ aria-expanded="false"
3326
+ >
3327
+ <span class="pf-v5-c-options-menu__toggle-text">
3328
+ <b>1 - 10</b>&nbsp;of&nbsp;
3329
+ <b>36</b>
3330
+ </span>
3331
+ <div class="pf-v5-c-options-menu__toggle-icon">
3332
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3333
+ </div>
3334
+ </button>
3335
+ <ul
3336
+ class="pf-v5-c-options-menu__menu pf-m-top"
3337
+ role="menu"
3338
+ aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
3339
+ hidden
3340
+ >
3341
+ <li role="none">
3342
+ <button
3343
+ class="pf-v5-c-options-menu__menu-item"
3344
+ type="button"
3345
+ role="menuitem"
3346
+ >5 per page</button>
3347
+ </li>
3348
+ <li role="none">
3349
+ <button
3350
+ class="pf-v5-c-options-menu__menu-item"
3351
+ type="button"
3352
+ role="menuitem"
3353
+ >
3354
+ 10 per page
3355
+ <div class="pf-v5-c-options-menu__menu-item-icon">
3356
+ <i class="fas fa-check" aria-hidden="true"></i>
3357
+ </div>
3358
+ </button>
3359
+ </li>
3360
+ <li role="none">
3361
+ <button
3362
+ class="pf-v5-c-options-menu__menu-item"
3363
+ type="button"
3364
+ role="menuitem"
3365
+ >20 per page</button>
3366
+ </li>
3367
+ </ul>
3368
+ </div>
3335
3369
  </div>
3336
3370
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
3337
3371
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
@@ -3418,12 +3452,76 @@ wrapperTag: div
3418
3452
  </span>
3419
3453
  <div class="pf-v5-c-masthead__main">
3420
3454
  <a class="pf-v5-c-masthead__brand" href="#">
3421
- <img
3422
- class="pf-v5-c-brand"
3423
- src="/assets/images/pf-logo.svg"
3424
- alt="PatternFly logo"
3425
- style="--pf-v5-c-brand--Height:36px"
3426
- />
3455
+ <svg height="40px" viewBox="0 0 679 158">
3456
+ <title>PF-HorizontalLogo-Color</title>
3457
+ <defs>
3458
+ <linearGradient
3459
+ x1="68%"
3460
+ y1="2.25860997e-13%"
3461
+ x2="32%"
3462
+ y2="100%"
3463
+ id="linearGradient-data-list-static-bottom-example-masthead"
3464
+ >
3465
+ <stop stop-color="#2B9AF3" offset="0%" />
3466
+ <stop
3467
+ stop-color="#73BCF7"
3468
+ stop-opacity="0.502212631"
3469
+ offset="100%"
3470
+ />
3471
+ </linearGradient>
3472
+ </defs>
3473
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3474
+ <g
3475
+ transform="translate(206.000000, 45.750000)"
3476
+ fill="var(--pf-t--global--text--color--regular)"
3477
+ fill-rule="nonzero"
3478
+ >
3479
+ <path
3480
+ 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"
3481
+ />
3482
+ <path
3483
+ 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"
3484
+ />
3485
+ <path
3486
+ 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"
3487
+ />
3488
+ <path
3489
+ 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"
3490
+ />
3491
+ <path
3492
+ 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"
3493
+ />
3494
+ <path
3495
+ 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"
3496
+ />
3497
+ <path
3498
+ 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"
3499
+ />
3500
+ <polygon
3501
+ 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"
3502
+ />
3503
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
3504
+ <path
3505
+ 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"
3506
+ />
3507
+ </g>
3508
+ <g transform="translate(0.000000, 0.000000)">
3509
+ <path
3510
+ 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"
3511
+ fill="#0066CC"
3512
+ />
3513
+ <path
3514
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3515
+ fill="url(#linearGradient-data-list-static-bottom-example-masthead)"
3516
+ />
3517
+ <path
3518
+ 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"
3519
+ fill="url(#linearGradient-data-list-static-bottom-example-masthead)"
3520
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3521
+ />
3522
+ </g>
3523
+ </g>
3524
+ </svg>
3427
3525
  </a>
3428
3526
  </div>
3429
3527
  <div class="pf-v5-c-masthead__content">
@@ -3433,8 +3531,38 @@ wrapperTag: div
3433
3531
  >
3434
3532
  <div class="pf-v5-c-toolbar__content">
3435
3533
  <div class="pf-v5-c-toolbar__content-section">
3534
+ <div class="pf-v5-c-toolbar__item">
3535
+ <button
3536
+ class="pf-v5-c-menu-toggle"
3537
+ type="button"
3538
+ aria-expanded="false"
3539
+ >
3540
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3541
+ <span class="pf-v5-c-menu-toggle__controls">
3542
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3543
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3544
+ </span>
3545
+ </span>
3546
+ </button>
3547
+ </div>
3548
+
3549
+ <div class="pf-v5-c-toolbar__item">
3550
+ <button
3551
+ class="pf-v5-c-menu-toggle"
3552
+ type="button"
3553
+ aria-expanded="false"
3554
+ >
3555
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3556
+ <span class="pf-v5-c-menu-toggle__controls">
3557
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3558
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3559
+ </span>
3560
+ </span>
3561
+ </button>
3562
+ </div>
3563
+
3436
3564
  <div
3437
- 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"
3565
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
3438
3566
  >
3439
3567
  <div
3440
3568
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -3481,27 +3609,6 @@ wrapperTag: div
3481
3609
  </button>
3482
3610
  </div>
3483
3611
  </div>
3484
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3485
- <button
3486
- class="pf-v5-c-menu-toggle pf-m-full-height"
3487
- type="button"
3488
- aria-expanded="false"
3489
- >
3490
- <span class="pf-v5-c-menu-toggle__icon">
3491
- <img
3492
- class="pf-v5-c-avatar"
3493
- alt="Avatar image"
3494
- src="/assets/images/img_avatar-light.svg"
3495
- />
3496
- </span>
3497
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3498
- <span class="pf-v5-c-menu-toggle__controls">
3499
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3500
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3501
- </span>
3502
- </span>
3503
- </button>
3504
- </div>
3505
3612
  </div>
3506
3613
  </div>
3507
3614
  </div>
@@ -3591,7 +3698,10 @@ wrapperTag: div
3591
3698
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
3592
3699
  >
3593
3700
  <div class="pf-v5-c-card">
3594
- <div class="pf-v5-c-toolbar">
3701
+ <div
3702
+ class="pf-v5-c-toolbar"
3703
+ id="data-list-static-bottom-example-toolbar"
3704
+ >
3595
3705
  <div class="pf-v5-c-toolbar__content">
3596
3706
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
3597
3707
  <div
@@ -3599,11 +3709,11 @@ wrapperTag: div
3599
3709
  >
3600
3710
  <div class="pf-v5-c-toolbar__toggle">
3601
3711
  <button
3602
- class="pf-v5-c-button pf-m-plain"
3712
+ class="pf-v5-c-menu-toggle pf-m-plain"
3603
3713
  type="button"
3604
- aria-label="Show filters"
3605
3714
  aria-expanded="false"
3606
- aria-controls="-expandable-content"
3715
+ aria-label="Show filters"
3716
+ aria-controls="data-list-static-bottom-example-toolbar-expandable-content"
3607
3717
  >
3608
3718
  <i class="fas fa-filter" aria-hidden="true"></i>
3609
3719
  </button>
@@ -3616,72 +3726,22 @@ wrapperTag: div
3616
3726
  role="group"
3617
3727
  >
3618
3728
  <div class="pf-v5-c-input-group__item">
3619
- <div class="pf-v5-c-select" style="width: 124px">
3620
- <span id="-select-name-label" hidden>Choose one</span>
3621
-
3622
- <button
3623
- class="pf-v5-c-select__toggle"
3624
- type="button"
3625
- id="-select-name-toggle"
3626
- aria-haspopup="true"
3627
- aria-expanded="false"
3628
- aria-labelledby="-select-name-label -select-name-toggle"
3629
- >
3630
- <div class="pf-v5-c-select__toggle-wrapper">
3631
- <span class="pf-v5-c-select__toggle-icon">
3632
- <i class="fas fa-filter" aria-hidden="true"></i>
3633
- </span>
3634
- <span class="pf-v5-c-select__toggle-text">Name</span>
3635
- </div>
3636
- <span class="pf-v5-c-select__toggle-arrow">
3637
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3729
+ <button
3730
+ class="pf-v5-c-menu-toggle"
3731
+ type="button"
3732
+ aria-expanded="false"
3733
+ id="data-list-static-bottom-example-toolbar-search-filter-menu"
3734
+ >
3735
+ <span class="pf-v5-c-menu-toggle__icon">
3736
+ <i class="fas fa-filter" aria-hidden="true"></i>
3737
+ </span>
3738
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
3739
+ <span class="pf-v5-c-menu-toggle__controls">
3740
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3741
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3638
3742
  </span>
3639
- </button>
3640
-
3641
- <ul
3642
- class="pf-v5-c-select__menu"
3643
- role="listbox"
3644
- aria-labelledby="-select-name-label"
3645
- hidden
3646
- >
3647
- <li role="presentation">
3648
- <button
3649
- class="pf-v5-c-select__menu-item"
3650
- role="option"
3651
- >Running</button>
3652
- </li>
3653
- <li role="presentation">
3654
- <button
3655
- class="pf-v5-c-select__menu-item pf-m-selected"
3656
- role="option"
3657
- aria-selected="true"
3658
- >
3659
- Stopped
3660
- <span class="pf-v5-c-select__menu-item-icon">
3661
- <i class="fas fa-check" aria-hidden="true"></i>
3662
- </span>
3663
- </button>
3664
- </li>
3665
- <li role="presentation">
3666
- <button
3667
- class="pf-v5-c-select__menu-item"
3668
- role="option"
3669
- >Down</button>
3670
- </li>
3671
- <li role="presentation">
3672
- <button
3673
- class="pf-v5-c-select__menu-item"
3674
- role="option"
3675
- >Degraded</button>
3676
- </li>
3677
- <li role="presentation">
3678
- <button
3679
- class="pf-v5-c-select__menu-item"
3680
- role="option"
3681
- >Needs maintenance</button>
3682
- </li>
3683
- </ul>
3684
- </div>
3743
+ </span>
3744
+ </button>
3685
3745
  </div>
3686
3746
  <div class="pf-v5-c-input-group__item pf-m-fill">
3687
3747
  <div class="pf-v5-c-text-input-group">
@@ -3705,7 +3765,10 @@ wrapperTag: div
3705
3765
  </div>
3706
3766
  </div>
3707
3767
 
3708
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
3768
+ <div
3769
+ class="pf-v5-c-overflow-menu"
3770
+ id="data-list-static-bottom-example-toolbar-overflow-menu"
3771
+ >
3709
3772
  <div
3710
3773
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
3711
3774
  >
@@ -3730,7 +3793,7 @@ wrapperTag: div
3730
3793
  <button
3731
3794
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
3732
3795
  type="button"
3733
- id="-overflow-menu-dropdown-toggle"
3796
+ id="data-list-static-bottom-example-toolbar-overflow-menu-dropdown-toggle"
3734
3797
  aria-label="Dropdown with additional options"
3735
3798
  aria-expanded="false"
3736
3799
  >
@@ -3739,7 +3802,7 @@ wrapperTag: div
3739
3802
  <ul
3740
3803
  class="pf-v5-c-dropdown__menu"
3741
3804
  role="menu"
3742
- aria-labelledby="-overflow-menu-dropdown-toggle"
3805
+ aria-labelledby="data-list-static-bottom-example-toolbar-overflow-menu-dropdown-toggle"
3743
3806
  hidden
3744
3807
  >
3745
3808
  <li role="none">
@@ -3755,55 +3818,57 @@ wrapperTag: div
3755
3818
 
3756
3819
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
3757
3820
  <div class="pf-v5-c-pagination pf-m-compact">
3758
- <div class="pf-v5-c-options-menu">
3759
- <button
3760
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3761
- type="button"
3762
- id="-top-pagination-toggle"
3763
- aria-haspopup="listbox"
3764
- aria-expanded="false"
3765
- >
3766
- <span class="pf-v5-c-options-menu__toggle-text">
3767
- <b>1 - 10</b>&nbsp;of&nbsp;
3768
- <b>36</b>
3769
- </span>
3770
- <div class="pf-v5-c-options-menu__toggle-icon">
3771
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3772
- </div>
3773
- </button>
3774
- <ul
3775
- class="pf-v5-c-options-menu__menu"
3776
- role="menu"
3777
- aria-labelledby="-top-pagination-toggle"
3778
- hidden
3779
- >
3780
- <li role="none">
3781
- <button
3782
- class="pf-v5-c-options-menu__menu-item"
3783
- type="button"
3784
- role="menuitem"
3785
- >5 per page</button>
3786
- </li>
3787
- <li role="none">
3788
- <button
3789
- class="pf-v5-c-options-menu__menu-item"
3790
- type="button"
3791
- role="menuitem"
3792
- >
3793
- 10 per page
3794
- <div class="pf-v5-c-options-menu__menu-item-icon">
3795
- <i class="fas fa-check" aria-hidden="true"></i>
3796
- </div>
3797
- </button>
3798
- </li>
3799
- <li role="none">
3800
- <button
3801
- class="pf-v5-c-options-menu__menu-item"
3802
- type="button"
3803
- role="menuitem"
3804
- >20 per page</button>
3805
- </li>
3806
- </ul>
3821
+ <div class="pf-v5-c-pagination__page-menu">
3822
+ <div class="pf-v5-c-options-menu">
3823
+ <button
3824
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3825
+ type="button"
3826
+ id="data-list-static-bottom-example-toolbar-top-pagination-toggle"
3827
+ aria-haspopup="listbox"
3828
+ aria-expanded="false"
3829
+ >
3830
+ <span class="pf-v5-c-options-menu__toggle-text">
3831
+ <b>1 - 10</b>&nbsp;of&nbsp;
3832
+ <b>36</b>
3833
+ </span>
3834
+ <div class="pf-v5-c-options-menu__toggle-icon">
3835
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3836
+ </div>
3837
+ </button>
3838
+ <ul
3839
+ class="pf-v5-c-options-menu__menu"
3840
+ role="menu"
3841
+ aria-labelledby="data-list-static-bottom-example-toolbar-top-pagination-toggle"
3842
+ hidden
3843
+ >
3844
+ <li role="none">
3845
+ <button
3846
+ class="pf-v5-c-options-menu__menu-item"
3847
+ type="button"
3848
+ role="menuitem"
3849
+ >5 per page</button>
3850
+ </li>
3851
+ <li role="none">
3852
+ <button
3853
+ class="pf-v5-c-options-menu__menu-item"
3854
+ type="button"
3855
+ role="menuitem"
3856
+ >
3857
+ 10 per page
3858
+ <div class="pf-v5-c-options-menu__menu-item-icon">
3859
+ <i class="fas fa-check" aria-hidden="true"></i>
3860
+ </div>
3861
+ </button>
3862
+ </li>
3863
+ <li role="none">
3864
+ <button
3865
+ class="pf-v5-c-options-menu__menu-item"
3866
+ type="button"
3867
+ role="menuitem"
3868
+ >20 per page</button>
3869
+ </li>
3870
+ </ul>
3871
+ </div>
3807
3872
  </div>
3808
3873
  <nav
3809
3874
  class="pf-v5-c-pagination__nav"
@@ -3835,7 +3900,7 @@ wrapperTag: div
3835
3900
 
3836
3901
  <div
3837
3902
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
3838
- id="-expandable-content"
3903
+ id="data-list-static-bottom-example-toolbar-expandable-content"
3839
3904
  hidden
3840
3905
  ></div>
3841
3906
  </div>
@@ -4171,55 +4236,57 @@ wrapperTag: div
4171
4236
  </li>
4172
4237
  </ul>
4173
4238
  <div class="pf-v5-c-pagination pf-m-bottom pf-m-static">
4174
- <div class="pf-v5-c-options-menu pf-m-top">
4175
- <button
4176
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
4177
- type="button"
4178
- id="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
4179
- aria-haspopup="listbox"
4180
- aria-expanded="false"
4181
- >
4182
- <span class="pf-v5-c-options-menu__toggle-text">
4183
- <b>1 - 10</b>&nbsp;of&nbsp;
4184
- <b>36</b>
4185
- </span>
4186
- <div class="pf-v5-c-options-menu__toggle-icon">
4187
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4188
- </div>
4189
- </button>
4190
- <ul
4191
- class="pf-v5-c-options-menu__menu pf-m-top"
4192
- role="menu"
4193
- aria-labelledby="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
4194
- hidden
4195
- >
4196
- <li role="none">
4197
- <button
4198
- class="pf-v5-c-options-menu__menu-item"
4199
- type="button"
4200
- role="menuitem"
4201
- >5 per page</button>
4202
- </li>
4203
- <li role="none">
4204
- <button
4205
- class="pf-v5-c-options-menu__menu-item"
4206
- type="button"
4207
- role="menuitem"
4208
- >
4209
- 10 per page
4210
- <div class="pf-v5-c-options-menu__menu-item-icon">
4211
- <i class="fas fa-check" aria-hidden="true"></i>
4212
- </div>
4213
- </button>
4214
- </li>
4215
- <li role="none">
4216
- <button
4217
- class="pf-v5-c-options-menu__menu-item"
4218
- type="button"
4219
- role="menuitem"
4220
- >20 per page</button>
4221
- </li>
4222
- </ul>
4239
+ <div class="pf-v5-c-pagination__page-menu">
4240
+ <div class="pf-v5-c-options-menu pf-m-top">
4241
+ <button
4242
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
4243
+ type="button"
4244
+ id="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
4245
+ aria-haspopup="listbox"
4246
+ aria-expanded="false"
4247
+ >
4248
+ <span class="pf-v5-c-options-menu__toggle-text">
4249
+ <b>1 - 10</b>&nbsp;of&nbsp;
4250
+ <b>36</b>
4251
+ </span>
4252
+ <div class="pf-v5-c-options-menu__toggle-icon">
4253
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4254
+ </div>
4255
+ </button>
4256
+ <ul
4257
+ class="pf-v5-c-options-menu__menu pf-m-top"
4258
+ role="menu"
4259
+ aria-labelledby="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
4260
+ hidden
4261
+ >
4262
+ <li role="none">
4263
+ <button
4264
+ class="pf-v5-c-options-menu__menu-item"
4265
+ type="button"
4266
+ role="menuitem"
4267
+ >5 per page</button>
4268
+ </li>
4269
+ <li role="none">
4270
+ <button
4271
+ class="pf-v5-c-options-menu__menu-item"
4272
+ type="button"
4273
+ role="menuitem"
4274
+ >
4275
+ 10 per page
4276
+ <div class="pf-v5-c-options-menu__menu-item-icon">
4277
+ <i class="fas fa-check" aria-hidden="true"></i>
4278
+ </div>
4279
+ </button>
4280
+ </li>
4281
+ <li role="none">
4282
+ <button
4283
+ class="pf-v5-c-options-menu__menu-item"
4284
+ type="button"
4285
+ role="menuitem"
4286
+ >20 per page</button>
4287
+ </li>
4288
+ </ul>
4289
+ </div>
4223
4290
  </div>
4224
4291
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
4225
4292
  <div class="pf-v5-c-pagination__nav-control pf-m-first">