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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (334) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +884 -871
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +311 -287
  25. package/base/tokens/_tokens-default.scss +425 -329
  26. package/base/tokens/_tokens-font.scss +29 -36
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +19 -16
  52. package/components/Breadcrumb/breadcrumb.scss +18 -16
  53. package/components/Button/button.css +419 -353
  54. package/components/Button/button.scss +476 -476
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/DualListSelector/dual-list-selector.css +56 -48
  84. package/components/DualListSelector/dual-list-selector.scss +57 -50
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +68 -114
  92. package/components/Form/form.scss +65 -126
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +380 -355
  110. package/components/Label/label.scss +434 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +70 -97
  114. package/components/Login/login.scss +56 -64
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +3 -0
  118. package/components/Menu/menu.scss +7 -3
  119. package/components/MenuToggle/menu-toggle.css +8 -8
  120. package/components/MenuToggle/menu-toggle.scss +8 -10
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +56 -81
  128. package/components/NotificationBadge/notification-badge.scss +60 -97
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +35 -52
  152. package/components/SimpleList/simple-list.scss +41 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +29 -45
  166. package/components/Table/table-grid.scss +40 -53
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +76 -74
  170. package/components/Table/table-tree-view.scss +44 -39
  171. package/components/Table/table.css +67 -93
  172. package/components/Table/table.scss +83 -105
  173. package/components/Tabs/tabs.css +143 -175
  174. package/components/Tabs/tabs.scss +159 -217
  175. package/components/Tile/tile.css +40 -81
  176. package/components/Tile/tile.scss +38 -84
  177. package/components/Timestamp/timestamp.css +12 -9
  178. package/components/Timestamp/timestamp.scss +11 -10
  179. package/components/Title/title.css +70 -19
  180. package/components/Title/title.scss +90 -20
  181. package/components/ToggleGroup/toggle-group.css +54 -48
  182. package/components/ToggleGroup/toggle-group.scss +62 -50
  183. package/components/Toolbar/toolbar.css +2527 -1031
  184. package/components/Toolbar/toolbar.scss +233 -520
  185. package/components/Tooltip/tooltip.css +16 -18
  186. package/components/Tooltip/tooltip.scss +20 -24
  187. package/components/TreeView/tree-view.css +76 -97
  188. package/components/TreeView/tree-view.scss +82 -113
  189. package/components/Truncate/truncate.css +4 -0
  190. package/components/Truncate/truncate.scss +3 -0
  191. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  192. package/docs/components/Accordion/examples/Accordion.md +614 -416
  193. package/docs/components/ActionList/examples/ActionList.md +73 -22
  194. package/docs/components/Alert/examples/Alert.md +3 -3
  195. package/docs/components/Avatar/examples/Avatar.md +5 -19
  196. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  197. package/docs/components/Badge/examples/Badge.md +21 -0
  198. package/docs/components/Banner/examples/Banner.md +48 -25
  199. package/docs/components/Brand/examples/Brand.css +12 -0
  200. package/docs/components/Brand/examples/Brand.md +51 -32
  201. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  202. package/docs/components/Button/examples/Button.css +4 -0
  203. package/docs/components/Button/examples/Button.md +1419 -93
  204. package/docs/components/CalendarMonth/examples/CalendarMonth.md +48 -224
  205. package/docs/components/Card/examples/Card.md +550 -133
  206. package/docs/components/Check/examples/Check.md +1 -0
  207. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  208. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  209. package/docs/components/Content/examples/Content.md +5 -5
  210. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  211. package/docs/components/Divider/examples/Divider.css +3 -1
  212. package/docs/components/Divider/examples/Divider.md +30 -5
  213. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  214. package/docs/components/Drawer/examples/Drawer.md +294 -256
  215. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  216. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  217. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  218. package/docs/components/Form/examples/Form.md +134 -89
  219. package/docs/components/Icon/examples/Icon.md +82 -11
  220. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  221. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  222. package/docs/components/Label/examples/Label.css +4 -0
  223. package/docs/components/Label/examples/Label.md +3090 -703
  224. package/docs/components/LogViewer/examples/LogViewer.md +180 -180
  225. package/docs/components/Login/examples/Login.md +10 -5
  226. package/docs/components/Masthead/examples/masthead.md +443 -65
  227. package/docs/components/Menu/examples/Menu.md +507 -473
  228. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  229. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  230. package/docs/components/Nav/examples/Navigation.css +1 -23
  231. package/docs/components/Nav/examples/Navigation.md +209 -356
  232. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  233. package/docs/components/Page/examples/Page.css +0 -8
  234. package/docs/components/Page/examples/Page.md +22 -21
  235. package/docs/components/Pagination/examples/Pagination.md +663 -637
  236. package/docs/components/Panel/examples/Panel.md +12 -0
  237. package/docs/components/Popover/examples/Popover.md +1 -1
  238. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  239. package/docs/components/Radio/examples/Radio.md +1 -1
  240. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  241. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  242. package/docs/components/TabContent/examples/TabContent.md +10 -10
  243. package/docs/components/Table/examples/Table.md +8 -8
  244. package/docs/components/Tabs/examples/Tabs.css +1 -1
  245. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  246. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  247. package/docs/components/Tile/examples/Tile.md +264 -144
  248. package/docs/components/Title/examples/Title.md +18 -0
  249. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  250. package/docs/components/Toolbar/examples/Toolbar.md +985 -3355
  251. package/docs/components/TreeView/examples/TreeView.md +7 -57
  252. package/docs/components/Truncate/examples/Truncate.css +2 -2
  253. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  254. package/docs/demos/Alert/examples/Alert.md +330 -87
  255. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  256. package/docs/demos/Banner/examples/Banner.md +211 -60
  257. package/docs/demos/Card/examples/Card.md +2 -2
  258. package/docs/demos/CardView/examples/CardView.md +241 -187
  259. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  260. package/docs/demos/Dashboard/examples/Dashboard.md +102 -29
  261. package/docs/demos/DataList/examples/DataList.md +999 -938
  262. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  263. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  264. package/docs/demos/Form/examples/BasicForms.md +138 -84
  265. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  266. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  267. package/docs/demos/Modal/examples/Modal.md +645 -198
  268. package/docs/demos/Nav/examples/Nav.md +691 -902
  269. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  270. package/docs/demos/Page/examples/Page.md +942 -273
  271. package/docs/demos/Page/examples/Penta.md +66 -26
  272. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  273. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  274. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1183 -832
  275. package/docs/demos/Skeleton/examples/Skeleton.md +102 -29
  276. package/docs/demos/Table/examples/Table.md +3811 -3456
  277. package/docs/demos/Tabs/examples/Tabs.md +636 -194
  278. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  279. package/docs/demos/Toolbar/examples/Toolbar.md +1316 -1478
  280. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  281. package/docs/layouts/Flex/examples/Flex.md +11 -11
  282. package/package.json +32 -32
  283. package/patternfly-base-no-globals-theme-dark-unversioned.css +897 -880
  284. package/patternfly-base-no-globals.css +897 -880
  285. package/patternfly-base-theme-dark-unversioned.css +890 -872
  286. package/patternfly-base.css +890 -872
  287. package/patternfly-no-globals.css +8107 -8027
  288. package/patternfly-theme-dark-unversioned.css +8111 -8030
  289. package/patternfly.css +8111 -8030
  290. package/patternfly.min.css +1 -1
  291. package/patternfly.min.css.map +1 -1
  292. package/sass-utilities/mixins.scss +18 -0
  293. package/base/themes/dark/_variables.scss +0 -102
  294. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  295. package/components/Accordion/themes/dark/accordion.scss +0 -9
  296. package/components/Alert/themes/dark/alert.scss +0 -17
  297. package/components/Badge/themes/dark/badge.scss +0 -9
  298. package/components/Banner/themes/dark/banner.scss +0 -14
  299. package/components/Button/themes/dark/button.scss +0 -51
  300. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  301. package/components/Card/themes/dark/card.scss +0 -20
  302. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  303. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  304. package/components/DataList/themes/dark/data-list.scss +0 -10
  305. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  306. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  307. package/components/Drawer/themes/dark/drawer.scss +0 -13
  308. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  309. package/components/Form/themes/dark/form.scss +0 -7
  310. package/components/FormControl/themes/dark/form-control.scss +0 -24
  311. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  312. package/components/Hint/themes/dark/hint.scss +0 -8
  313. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  314. package/components/Label/themes/dark/label.scss +0 -53
  315. package/components/Login/themes/dark/login.scss +0 -12
  316. package/components/Masthead/themes/dark/masthead.scss +0 -14
  317. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  318. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  319. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  320. package/components/Page/themes/dark/page.scss +0 -69
  321. package/components/Pagination/themes/dark/pagination.scss +0 -7
  322. package/components/Panel/themes/dark/panel.scss +0 -7
  323. package/components/Popover/themes/dark/popover.scss +0 -11
  324. package/components/Progress/themes/dark/progress.scss +0 -9
  325. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  326. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  327. package/components/Switch/themes/dark/switch.scss +0 -11
  328. package/components/Tabs/themes/dark/tabs.scss +0 -10
  329. package/components/Tile/themes/dark/tile.scss +0 -10
  330. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  331. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  332. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  333. package/docs/components/Avatar/examples/Avatar.css +0 -3
  334. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -26,23 +26,117 @@ 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">
38
102
  <div
39
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
103
+ class="pf-v5-c-toolbar pf-m-static"
40
104
  id="data-list-basic-example-masthead-toolbar"
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-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,23 +907,117 @@ 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">
909
983
  <div
910
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
984
+ class="pf-v5-c-toolbar pf-m-static"
911
985
  id="data-list-actionable-example-masthead-toolbar"
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-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,132 +1153,62 @@ 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
1077
1160
  class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
1078
1161
  >
1079
- <div class="pf-v5-c-toolbar__toggle">
1162
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
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,23 +1775,117 @@ 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">
1770
1851
  <div
1771
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1852
+ class="pf-v5-c-toolbar pf-m-static"
1772
1853
  id="data-list-expandable-example-masthead-toolbar"
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-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,91 +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
2028
  <button
1939
2029
  class="pf-v5-c-button pf-m-plain"
1940
- type="button"
1941
- aria-label="Expand all rows"
1942
- >
1943
- <span class="pf-v5-c-icon">
1944
- <span
1945
- class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
1946
- >
1947
- <span class="pf-v5-c-toolbar__expand-all-icon">
1948
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1949
- </span>
1950
- </span>
1951
- </span>
1952
- </button>
1953
- </div>
1954
-
1955
- <div
1956
- class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
1957
- >
1958
- <div class="pf-v5-c-toolbar__toggle">
1959
- <button
1960
- class="pf-v5-c-button pf-m-plain"
1961
- type="button"
1962
- aria-label="Show filters"
1963
- aria-expanded="false"
1964
- aria-controls="-expandable-content"
1965
- >
1966
- <i class="fas fa-filter" aria-hidden="true"></i>
1967
- </button>
1968
- </div>
1969
- <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
1970
- <div class="pf-v5-c-dropdown">
1971
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
1972
- <label
1973
- class="pf-v5-c-dropdown__toggle-check"
1974
- for="-bulk-select-toggle-check"
1975
- >
1976
- <div class="pf-v5-c-check pf-m-standalone">
1977
- <input
1978
- class="pf-v5-c-check__input"
1979
- type="checkbox"
1980
- id="-bulk-select-toggle-check"
1981
- aria-label="Select all"
1982
- />
1983
- </div>
1984
- </label>
1985
-
1986
- <button
1987
- class="pf-v5-c-dropdown__toggle-button"
1988
- type="button"
1989
- aria-expanded="false"
1990
- id="-bulk-select-toggle-button"
1991
- aria-label="Dropdown toggle"
1992
- >
1993
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1994
- </button>
1995
- </div>
1996
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1997
- <li role="none">
1998
- <button
1999
- class="pf-v5-c-dropdown__menu-item"
2000
- role="menuitem"
2001
- type="button"
2002
- >Select all</button>
2003
- </li>
2004
- <li role="none">
2005
- <button
2006
- class="pf-v5-c-dropdown__menu-item"
2007
- role="menuitem"
2008
- type="button"
2009
- >Select none</button>
2010
- </li>
2011
- <li role="none">
2012
- <button
2013
- class="pf-v5-c-dropdown__menu-item"
2014
- role="menuitem"
2015
- type="button"
2016
- >Other action</button>
2017
- </li>
2018
- </ul>
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 pf-m-show">
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>
2019
2090
  </div>
2020
2091
  </div>
2021
2092
 
@@ -2026,72 +2097,22 @@ wrapperTag: div
2026
2097
  role="group"
2027
2098
  >
2028
2099
  <div class="pf-v5-c-input-group__item">
2029
- <div class="pf-v5-c-select" style="width: 124px">
2030
- <span id="-select-name-label" hidden>Choose one</span>
2031
-
2032
- <button
2033
- class="pf-v5-c-select__toggle"
2034
- type="button"
2035
- id="-select-name-toggle"
2036
- aria-haspopup="true"
2037
- aria-expanded="false"
2038
- aria-labelledby="-select-name-label -select-name-toggle"
2039
- >
2040
- <div class="pf-v5-c-select__toggle-wrapper">
2041
- <span class="pf-v5-c-select__toggle-icon">
2042
- <i class="fas fa-filter" aria-hidden="true"></i>
2043
- </span>
2044
- <span class="pf-v5-c-select__toggle-text">Name</span>
2045
- </div>
2046
- <span class="pf-v5-c-select__toggle-arrow">
2047
- <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>
2048
2113
  </span>
2049
- </button>
2050
-
2051
- <ul
2052
- class="pf-v5-c-select__menu"
2053
- role="listbox"
2054
- aria-labelledby="-select-name-label"
2055
- hidden
2056
- >
2057
- <li role="presentation">
2058
- <button
2059
- class="pf-v5-c-select__menu-item"
2060
- role="option"
2061
- >Running</button>
2062
- </li>
2063
- <li role="presentation">
2064
- <button
2065
- class="pf-v5-c-select__menu-item pf-m-selected"
2066
- role="option"
2067
- aria-selected="true"
2068
- >
2069
- Stopped
2070
- <span class="pf-v5-c-select__menu-item-icon">
2071
- <i class="fas fa-check" aria-hidden="true"></i>
2072
- </span>
2073
- </button>
2074
- </li>
2075
- <li role="presentation">
2076
- <button
2077
- class="pf-v5-c-select__menu-item"
2078
- role="option"
2079
- >Down</button>
2080
- </li>
2081
- <li role="presentation">
2082
- <button
2083
- class="pf-v5-c-select__menu-item"
2084
- role="option"
2085
- >Degraded</button>
2086
- </li>
2087
- <li role="presentation">
2088
- <button
2089
- class="pf-v5-c-select__menu-item"
2090
- role="option"
2091
- >Needs maintenance</button>
2092
- </li>
2093
- </ul>
2094
- </div>
2114
+ </span>
2115
+ </button>
2095
2116
  </div>
2096
2117
  <div class="pf-v5-c-input-group__item pf-m-fill">
2097
2118
  <div class="pf-v5-c-text-input-group">
@@ -2115,7 +2136,10 @@ wrapperTag: div
2115
2136
  </div>
2116
2137
  </div>
2117
2138
 
2118
- <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
+ >
2119
2143
  <div
2120
2144
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
2121
2145
  >
@@ -2133,7 +2157,7 @@ wrapperTag: div
2133
2157
  <button
2134
2158
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
2135
2159
  type="button"
2136
- id="-overflow-menu-dropdown-toggle"
2160
+ id="data-list-expandable-example-toolbar-overflow-menu-dropdown-toggle"
2137
2161
  aria-label="Dropdown with additional options"
2138
2162
  aria-expanded="false"
2139
2163
  >
@@ -2142,7 +2166,7 @@ wrapperTag: div
2142
2166
  <ul
2143
2167
  class="pf-v5-c-dropdown__menu"
2144
2168
  role="menu"
2145
- aria-labelledby="-overflow-menu-dropdown-toggle"
2169
+ aria-labelledby="data-list-expandable-example-toolbar-overflow-menu-dropdown-toggle"
2146
2170
  hidden
2147
2171
  >
2148
2172
  <li role="none">
@@ -2158,55 +2182,57 @@ wrapperTag: div
2158
2182
 
2159
2183
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
2160
2184
  <div class="pf-v5-c-pagination pf-m-compact">
2161
- <div class="pf-v5-c-options-menu">
2162
- <button
2163
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2164
- type="button"
2165
- id="-top-pagination-toggle"
2166
- aria-haspopup="listbox"
2167
- aria-expanded="false"
2168
- >
2169
- <span class="pf-v5-c-options-menu__toggle-text">
2170
- <b>1 - 10</b>&nbsp;of&nbsp;
2171
- <b>36</b>
2172
- </span>
2173
- <div class="pf-v5-c-options-menu__toggle-icon">
2174
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2175
- </div>
2176
- </button>
2177
- <ul
2178
- class="pf-v5-c-options-menu__menu"
2179
- role="menu"
2180
- aria-labelledby="-top-pagination-toggle"
2181
- hidden
2182
- >
2183
- <li role="none">
2184
- <button
2185
- class="pf-v5-c-options-menu__menu-item"
2186
- type="button"
2187
- role="menuitem"
2188
- >5 per page</button>
2189
- </li>
2190
- <li role="none">
2191
- <button
2192
- class="pf-v5-c-options-menu__menu-item"
2193
- type="button"
2194
- role="menuitem"
2195
- >
2196
- 10 per page
2197
- <div class="pf-v5-c-options-menu__menu-item-icon">
2198
- <i class="fas fa-check" aria-hidden="true"></i>
2199
- </div>
2200
- </button>
2201
- </li>
2202
- <li role="none">
2203
- <button
2204
- class="pf-v5-c-options-menu__menu-item"
2205
- type="button"
2206
- role="menuitem"
2207
- >20 per page</button>
2208
- </li>
2209
- </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>
2210
2236
  </div>
2211
2237
  <nav
2212
2238
  class="pf-v5-c-pagination__nav"
@@ -2238,7 +2264,7 @@ wrapperTag: div
2238
2264
 
2239
2265
  <div
2240
2266
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
2241
- id="-expandable-content"
2267
+ id="data-list-expandable-example-toolbar-expandable-content"
2242
2268
  hidden
2243
2269
  ></div>
2244
2270
  </div>
@@ -3289,55 +3315,57 @@ wrapperTag: div
3289
3315
  </li>
3290
3316
  </ul>
3291
3317
  <div class="pf-v5-c-pagination pf-m-bottom">
3292
- <div class="pf-v5-c-options-menu pf-m-top">
3293
- <button
3294
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3295
- type="button"
3296
- id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
3297
- aria-haspopup="listbox"
3298
- aria-expanded="false"
3299
- >
3300
- <span class="pf-v5-c-options-menu__toggle-text">
3301
- <b>1 - 10</b>&nbsp;of&nbsp;
3302
- <b>36</b>
3303
- </span>
3304
- <div class="pf-v5-c-options-menu__toggle-icon">
3305
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3306
- </div>
3307
- </button>
3308
- <ul
3309
- class="pf-v5-c-options-menu__menu pf-m-top"
3310
- role="menu"
3311
- aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
3312
- hidden
3313
- >
3314
- <li role="none">
3315
- <button
3316
- class="pf-v5-c-options-menu__menu-item"
3317
- type="button"
3318
- role="menuitem"
3319
- >5 per page</button>
3320
- </li>
3321
- <li role="none">
3322
- <button
3323
- class="pf-v5-c-options-menu__menu-item"
3324
- type="button"
3325
- role="menuitem"
3326
- >
3327
- 10 per page
3328
- <div class="pf-v5-c-options-menu__menu-item-icon">
3329
- <i class="fas fa-check" aria-hidden="true"></i>
3330
- </div>
3331
- </button>
3332
- </li>
3333
- <li role="none">
3334
- <button
3335
- class="pf-v5-c-options-menu__menu-item"
3336
- type="button"
3337
- role="menuitem"
3338
- >20 per page</button>
3339
- </li>
3340
- </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>
3341
3369
  </div>
3342
3370
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
3343
3371
  <div class="pf-v5-c-pagination__nav-control pf-m-first">
@@ -3424,23 +3452,117 @@ wrapperTag: div
3424
3452
  </span>
3425
3453
  <div class="pf-v5-c-masthead__main">
3426
3454
  <a class="pf-v5-c-masthead__brand" href="#">
3427
- <img
3428
- class="pf-v5-c-brand"
3429
- src="/assets/images/pf-logo.svg"
3430
- alt="PatternFly logo"
3431
- style="--pf-v5-c-brand--Height:36px"
3432
- />
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>
3433
3525
  </a>
3434
3526
  </div>
3435
3527
  <div class="pf-v5-c-masthead__content">
3436
3528
  <div
3437
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
3529
+ class="pf-v5-c-toolbar pf-m-static"
3438
3530
  id="data-list-static-bottom-example-masthead-toolbar"
3439
3531
  >
3440
3532
  <div class="pf-v5-c-toolbar__content">
3441
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
+
3442
3564
  <div
3443
- 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-spacer-none pf-m-spacer-md-on-md"
3444
3566
  >
3445
3567
  <div
3446
3568
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -3487,27 +3609,6 @@ wrapperTag: div
3487
3609
  </button>
3488
3610
  </div>
3489
3611
  </div>
3490
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3491
- <button
3492
- class="pf-v5-c-menu-toggle pf-m-full-height"
3493
- type="button"
3494
- aria-expanded="false"
3495
- >
3496
- <span class="pf-v5-c-menu-toggle__icon">
3497
- <img
3498
- class="pf-v5-c-avatar"
3499
- alt="Avatar image"
3500
- src="/assets/images/img_avatar-light.svg"
3501
- />
3502
- </span>
3503
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3504
- <span class="pf-v5-c-menu-toggle__controls">
3505
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3506
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3507
- </span>
3508
- </span>
3509
- </button>
3510
- </div>
3511
3612
  </div>
3512
3613
  </div>
3513
3614
  </div>
@@ -3597,19 +3698,22 @@ wrapperTag: div
3597
3698
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
3598
3699
  >
3599
3700
  <div class="pf-v5-c-card">
3600
- <div class="pf-v5-c-toolbar">
3701
+ <div
3702
+ class="pf-v5-c-toolbar"
3703
+ id="data-list-static-bottom-example-toolbar"
3704
+ >
3601
3705
  <div class="pf-v5-c-toolbar__content">
3602
3706
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
3603
3707
  <div
3604
3708
  class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
3605
3709
  >
3606
- <div class="pf-v5-c-toolbar__toggle">
3710
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
3607
3711
  <button
3608
- class="pf-v5-c-button pf-m-plain"
3712
+ class="pf-v5-c-menu-toggle pf-m-plain"
3609
3713
  type="button"
3610
- aria-label="Show filters"
3611
3714
  aria-expanded="false"
3612
- aria-controls="-expandable-content"
3715
+ aria-label="Show filters"
3716
+ aria-controls="data-list-static-bottom-example-toolbar-expandable-content"
3613
3717
  >
3614
3718
  <i class="fas fa-filter" aria-hidden="true"></i>
3615
3719
  </button>
@@ -3622,72 +3726,22 @@ wrapperTag: div
3622
3726
  role="group"
3623
3727
  >
3624
3728
  <div class="pf-v5-c-input-group__item">
3625
- <div class="pf-v5-c-select" style="width: 124px">
3626
- <span id="-select-name-label" hidden>Choose one</span>
3627
-
3628
- <button
3629
- class="pf-v5-c-select__toggle"
3630
- type="button"
3631
- id="-select-name-toggle"
3632
- aria-haspopup="true"
3633
- aria-expanded="false"
3634
- aria-labelledby="-select-name-label -select-name-toggle"
3635
- >
3636
- <div class="pf-v5-c-select__toggle-wrapper">
3637
- <span class="pf-v5-c-select__toggle-icon">
3638
- <i class="fas fa-filter" aria-hidden="true"></i>
3639
- </span>
3640
- <span class="pf-v5-c-select__toggle-text">Name</span>
3641
- </div>
3642
- <span class="pf-v5-c-select__toggle-arrow">
3643
- <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>
3644
3742
  </span>
3645
- </button>
3646
-
3647
- <ul
3648
- class="pf-v5-c-select__menu"
3649
- role="listbox"
3650
- aria-labelledby="-select-name-label"
3651
- hidden
3652
- >
3653
- <li role="presentation">
3654
- <button
3655
- class="pf-v5-c-select__menu-item"
3656
- role="option"
3657
- >Running</button>
3658
- </li>
3659
- <li role="presentation">
3660
- <button
3661
- class="pf-v5-c-select__menu-item pf-m-selected"
3662
- role="option"
3663
- aria-selected="true"
3664
- >
3665
- Stopped
3666
- <span class="pf-v5-c-select__menu-item-icon">
3667
- <i class="fas fa-check" aria-hidden="true"></i>
3668
- </span>
3669
- </button>
3670
- </li>
3671
- <li role="presentation">
3672
- <button
3673
- class="pf-v5-c-select__menu-item"
3674
- role="option"
3675
- >Down</button>
3676
- </li>
3677
- <li role="presentation">
3678
- <button
3679
- class="pf-v5-c-select__menu-item"
3680
- role="option"
3681
- >Degraded</button>
3682
- </li>
3683
- <li role="presentation">
3684
- <button
3685
- class="pf-v5-c-select__menu-item"
3686
- role="option"
3687
- >Needs maintenance</button>
3688
- </li>
3689
- </ul>
3690
- </div>
3743
+ </span>
3744
+ </button>
3691
3745
  </div>
3692
3746
  <div class="pf-v5-c-input-group__item pf-m-fill">
3693
3747
  <div class="pf-v5-c-text-input-group">
@@ -3711,7 +3765,10 @@ wrapperTag: div
3711
3765
  </div>
3712
3766
  </div>
3713
3767
 
3714
- <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
+ >
3715
3772
  <div
3716
3773
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
3717
3774
  >
@@ -3736,7 +3793,7 @@ wrapperTag: div
3736
3793
  <button
3737
3794
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
3738
3795
  type="button"
3739
- id="-overflow-menu-dropdown-toggle"
3796
+ id="data-list-static-bottom-example-toolbar-overflow-menu-dropdown-toggle"
3740
3797
  aria-label="Dropdown with additional options"
3741
3798
  aria-expanded="false"
3742
3799
  >
@@ -3745,7 +3802,7 @@ wrapperTag: div
3745
3802
  <ul
3746
3803
  class="pf-v5-c-dropdown__menu"
3747
3804
  role="menu"
3748
- aria-labelledby="-overflow-menu-dropdown-toggle"
3805
+ aria-labelledby="data-list-static-bottom-example-toolbar-overflow-menu-dropdown-toggle"
3749
3806
  hidden
3750
3807
  >
3751
3808
  <li role="none">
@@ -3761,55 +3818,57 @@ wrapperTag: div
3761
3818
 
3762
3819
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
3763
3820
  <div class="pf-v5-c-pagination pf-m-compact">
3764
- <div class="pf-v5-c-options-menu">
3765
- <button
3766
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3767
- type="button"
3768
- id="-top-pagination-toggle"
3769
- aria-haspopup="listbox"
3770
- aria-expanded="false"
3771
- >
3772
- <span class="pf-v5-c-options-menu__toggle-text">
3773
- <b>1 - 10</b>&nbsp;of&nbsp;
3774
- <b>36</b>
3775
- </span>
3776
- <div class="pf-v5-c-options-menu__toggle-icon">
3777
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3778
- </div>
3779
- </button>
3780
- <ul
3781
- class="pf-v5-c-options-menu__menu"
3782
- role="menu"
3783
- aria-labelledby="-top-pagination-toggle"
3784
- hidden
3785
- >
3786
- <li role="none">
3787
- <button
3788
- class="pf-v5-c-options-menu__menu-item"
3789
- type="button"
3790
- role="menuitem"
3791
- >5 per page</button>
3792
- </li>
3793
- <li role="none">
3794
- <button
3795
- class="pf-v5-c-options-menu__menu-item"
3796
- type="button"
3797
- role="menuitem"
3798
- >
3799
- 10 per page
3800
- <div class="pf-v5-c-options-menu__menu-item-icon">
3801
- <i class="fas fa-check" aria-hidden="true"></i>
3802
- </div>
3803
- </button>
3804
- </li>
3805
- <li role="none">
3806
- <button
3807
- class="pf-v5-c-options-menu__menu-item"
3808
- type="button"
3809
- role="menuitem"
3810
- >20 per page</button>
3811
- </li>
3812
- </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>
3813
3872
  </div>
3814
3873
  <nav
3815
3874
  class="pf-v5-c-pagination__nav"
@@ -3841,7 +3900,7 @@ wrapperTag: div
3841
3900
 
3842
3901
  <div
3843
3902
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
3844
- id="-expandable-content"
3903
+ id="data-list-static-bottom-example-toolbar-expandable-content"
3845
3904
  hidden
3846
3905
  ></div>
3847
3906
  </div>
@@ -4177,55 +4236,57 @@ wrapperTag: div
4177
4236
  </li>
4178
4237
  </ul>
4179
4238
  <div class="pf-v5-c-pagination pf-m-bottom pf-m-static">
4180
- <div class="pf-v5-c-options-menu pf-m-top">
4181
- <button
4182
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
4183
- type="button"
4184
- id="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
4185
- aria-haspopup="listbox"
4186
- aria-expanded="false"
4187
- >
4188
- <span class="pf-v5-c-options-menu__toggle-text">
4189
- <b>1 - 10</b>&nbsp;of&nbsp;
4190
- <b>36</b>
4191
- </span>
4192
- <div class="pf-v5-c-options-menu__toggle-icon">
4193
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4194
- </div>
4195
- </button>
4196
- <ul
4197
- class="pf-v5-c-options-menu__menu pf-m-top"
4198
- role="menu"
4199
- aria-labelledby="{{page--id}}pagination-options-menu-bottom-example-static-toggle"
4200
- hidden
4201
- >
4202
- <li role="none">
4203
- <button
4204
- class="pf-v5-c-options-menu__menu-item"
4205
- type="button"
4206
- role="menuitem"
4207
- >5 per page</button>
4208
- </li>
4209
- <li role="none">
4210
- <button
4211
- class="pf-v5-c-options-menu__menu-item"
4212
- type="button"
4213
- role="menuitem"
4214
- >
4215
- 10 per page
4216
- <div class="pf-v5-c-options-menu__menu-item-icon">
4217
- <i class="fas fa-check" aria-hidden="true"></i>
4218
- </div>
4219
- </button>
4220
- </li>
4221
- <li role="none">
4222
- <button
4223
- class="pf-v5-c-options-menu__menu-item"
4224
- type="button"
4225
- role="menuitem"
4226
- >20 per page</button>
4227
- </li>
4228
- </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>
4229
4290
  </div>
4230
4291
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
4231
4292
  <div class="pf-v5-c-pagination__nav-control pf-m-first">