@patternfly/patternfly 6.0.0-alpha.3 → 6.0.0-alpha.31

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 (321) hide show
  1. package/README.md +13 -3
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/images/PF-Backdrop.svg +1 -0
  4. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  5. package/assets/images/PF-IconLogo.svg +17 -0
  6. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  7. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  8. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  9. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  10. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  11. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  12. package/assets/images/pf_logo_white.hbs +35 -0
  13. package/assets/images/pf_logo_white.svg +38 -0
  14. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  15. package/assets/pficon/pficon.scss +6 -129
  16. package/base/_common.scss +29 -4
  17. package/base/_globals.scss +5 -9
  18. package/base/_variables.scss +8 -6
  19. package/base/patternfly-common.css +24 -6
  20. package/base/patternfly-globals.css +5 -5
  21. package/base/patternfly-icons.css +5 -1
  22. package/base/patternfly-pf-icons.css +5 -1
  23. package/base/patternfly-variables.css +886 -771
  24. package/base/tokens/_tokens-dark.scss +322 -265
  25. package/base/tokens/_tokens-default.scss +426 -306
  26. package/base/tokens/_tokens-font.scss +59 -35
  27. package/base/tokens/_tokens-palette.scss +69 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +80 -108
  30. package/components/AboutModalBox/about-modal-box.scss +64 -78
  31. package/components/Accordion/accordion.css +96 -175
  32. package/components/Accordion/accordion.scss +106 -193
  33. package/components/ActionList/action-list.css +2 -2
  34. package/components/ActionList/action-list.scss +2 -2
  35. package/components/Alert/alert-group.css +27 -20
  36. package/components/Alert/alert-group.scss +27 -20
  37. package/components/Alert/alert.css +74 -95
  38. package/components/Alert/alert.scss +76 -89
  39. package/components/AppLauncher/app-launcher.css +32 -23
  40. package/components/AppLauncher/app-launcher.scss +32 -23
  41. package/components/BackToTop/back-to-top.css +17 -15
  42. package/components/BackToTop/back-to-top.scss +14 -13
  43. package/components/Backdrop/backdrop.css +2 -2
  44. package/components/Backdrop/backdrop.scss +2 -2
  45. package/components/BackgroundImage/background-image.css +6 -3
  46. package/components/BackgroundImage/background-image.scss +8 -3
  47. package/components/Badge/badge.css +25 -17
  48. package/components/Badge/badge.scss +27 -19
  49. package/components/Banner/banner.css +91 -69
  50. package/components/Banner/banner.scss +95 -34
  51. package/components/Breadcrumb/breadcrumb.css +28 -19
  52. package/components/Breadcrumb/breadcrumb.scss +26 -19
  53. package/components/Button/button.css +35 -23
  54. package/components/Button/button.scss +36 -26
  55. package/components/Button/themes/dark/button.scss +1 -1
  56. package/components/CalendarMonth/calendar-month.css +25 -15
  57. package/components/CalendarMonth/calendar-month.scss +23 -15
  58. package/components/Card/card.css +25 -17
  59. package/components/Card/card.scss +24 -17
  60. package/components/Check/check.css +12 -10
  61. package/components/Check/check.scss +17 -12
  62. package/components/Chip/chip-group.css +6 -6
  63. package/components/Chip/chip-group.scss +6 -6
  64. package/components/Chip/chip.css +16 -9
  65. package/components/Chip/chip.scss +17 -9
  66. package/components/ClipboardCopy/clipboard-copy.css +19 -10
  67. package/components/ClipboardCopy/clipboard-copy.scss +16 -8
  68. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  69. package/components/CodeBlock/code-block.css +6 -3
  70. package/components/CodeBlock/code-block.scss +6 -3
  71. package/components/CodeEditor/code-editor.css +31 -22
  72. package/components/CodeEditor/code-editor.scss +30 -21
  73. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  74. package/components/Content/content.css +100 -97
  75. package/components/Content/content.scss +101 -98
  76. package/components/ContextSelector/context-selector.css +41 -26
  77. package/components/ContextSelector/context-selector.scss +40 -25
  78. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  79. package/components/DataList/data-list-grid.css +21 -21
  80. package/components/DataList/data-list-grid.scss +3 -3
  81. package/components/DataList/data-list.css +69 -56
  82. package/components/DataList/data-list.scss +47 -35
  83. package/components/DatePicker/date-picker.css +8 -8
  84. package/components/DatePicker/date-picker.scss +8 -8
  85. package/components/DescriptionList/description-list.css +8 -5
  86. package/components/DescriptionList/description-list.scss +8 -5
  87. package/components/DragDrop/drag-drop.css +8 -8
  88. package/components/DragDrop/drag-drop.scss +8 -8
  89. package/components/Drawer/drawer.css +120 -62
  90. package/components/Drawer/drawer.scss +94 -44
  91. package/components/Dropdown/dropdown.css +76 -69
  92. package/components/Dropdown/dropdown.scss +67 -62
  93. package/components/DualListSelector/dual-list-selector.css +29 -15
  94. package/components/DualListSelector/dual-list-selector.scss +30 -15
  95. package/components/EmptyState/empty-state.css +7 -4
  96. package/components/EmptyState/empty-state.scss +7 -4
  97. package/components/ExpandableSection/expandable-section.css +75 -59
  98. package/components/ExpandableSection/expandable-section.scss +81 -72
  99. package/components/FileUpload/file-upload.css +9 -15
  100. package/components/FileUpload/file-upload.scss +9 -15
  101. package/components/Form/form.css +53 -50
  102. package/components/Form/form.scss +46 -44
  103. package/components/FormControl/form-control.css +18 -9
  104. package/components/FormControl/form-control.scss +18 -9
  105. package/components/HelperText/helper-text.css +29 -35
  106. package/components/HelperText/helper-text.scss +31 -41
  107. package/components/Hint/hint.css +37 -27
  108. package/components/Hint/hint.scss +37 -30
  109. package/components/Icon/icon.css +1 -1
  110. package/components/Icon/icon.scss +1 -1
  111. package/components/InlineEdit/inline-edit.css +9 -9
  112. package/components/InlineEdit/inline-edit.scss +9 -9
  113. package/components/InputGroup/input-group.css +12 -6
  114. package/components/InputGroup/input-group.scss +11 -5
  115. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  116. package/components/JumpLinks/jump-links.css +27 -24
  117. package/components/JumpLinks/jump-links.scss +26 -24
  118. package/components/Label/label-group.css +13 -10
  119. package/components/Label/label-group.scss +13 -10
  120. package/components/Label/label.css +9 -9
  121. package/components/Label/label.scss +9 -9
  122. package/components/List/list.css +25 -25
  123. package/components/List/list.scss +26 -26
  124. package/components/LogViewer/log-viewer.css +14 -14
  125. package/components/LogViewer/log-viewer.scss +14 -14
  126. package/components/Login/login.css +104 -122
  127. package/components/Login/login.scss +92 -91
  128. package/components/Masthead/masthead.css +68 -125
  129. package/components/Masthead/masthead.scss +123 -153
  130. package/components/Menu/menu.css +82 -65
  131. package/components/Menu/menu.scss +85 -69
  132. package/components/MenuToggle/menu-toggle.css +89 -100
  133. package/components/MenuToggle/menu-toggle.scss +92 -112
  134. package/components/ModalBox/modal-box.css +76 -69
  135. package/components/ModalBox/modal-box.scss +74 -70
  136. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  137. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  138. package/components/Nav/nav.css +162 -133
  139. package/components/Nav/nav.scss +162 -135
  140. package/components/Nav/themes/dark/nav.scss +2 -2
  141. package/components/NotificationBadge/notification-badge.css +66 -85
  142. package/components/NotificationBadge/notification-badge.scss +72 -103
  143. package/components/NotificationDrawer/notification-drawer.css +32 -19
  144. package/components/NotificationDrawer/notification-drawer.scss +30 -19
  145. package/components/NumberInput/number-input.css +2 -2
  146. package/components/NumberInput/number-input.scss +2 -2
  147. package/components/OptionsMenu/options-menu.css +43 -31
  148. package/components/OptionsMenu/options-menu.scss +43 -31
  149. package/components/OverflowMenu/overflow-menu.css +2 -2
  150. package/components/OverflowMenu/overflow-menu.scss +2 -2
  151. package/components/Page/page.css +232 -271
  152. package/components/Page/page.scss +180 -231
  153. package/components/Pagination/pagination.css +27 -17
  154. package/components/Pagination/pagination.scss +25 -17
  155. package/components/Panel/panel.css +13 -7
  156. package/components/Panel/panel.scss +13 -7
  157. package/components/Popover/popover.css +110 -87
  158. package/components/Popover/popover.scss +120 -109
  159. package/components/Progress/progress.css +9 -7
  160. package/components/Progress/progress.scss +12 -7
  161. package/components/ProgressStepper/progress-stepper.css +26 -20
  162. package/components/ProgressStepper/progress-stepper.scss +25 -19
  163. package/components/Radio/radio.css +16 -13
  164. package/components/Radio/radio.scss +20 -14
  165. package/components/Select/select.css +56 -47
  166. package/components/Select/select.scss +56 -47
  167. package/components/Sidebar/sidebar.css +11 -5
  168. package/components/Sidebar/sidebar.scss +11 -5
  169. package/components/SimpleList/simple-list.css +10 -4
  170. package/components/SimpleList/simple-list.scss +10 -4
  171. package/components/Skeleton/skeleton.css +6 -5
  172. package/components/Skeleton/skeleton.scss +4 -5
  173. package/components/SkipToContent/skip-to-content.css +9 -6
  174. package/components/SkipToContent/skip-to-content.scss +8 -6
  175. package/components/Slider/slider.css +47 -26
  176. package/components/Slider/slider.scss +56 -28
  177. package/components/Switch/switch.css +10 -6
  178. package/components/Switch/switch.scss +11 -7
  179. package/components/TabContent/tab-content.css +4 -1
  180. package/components/TabContent/tab-content.scss +4 -1
  181. package/components/Table/table-grid.css +264 -203
  182. package/components/Table/table-grid.scss +61 -47
  183. package/components/Table/table-scrollable.css +4 -4
  184. package/components/Table/table-scrollable.scss +6 -4
  185. package/components/Table/table-tree-view.css +112 -105
  186. package/components/Table/table-tree-view.scss +38 -33
  187. package/components/Table/table.css +176 -159
  188. package/components/Table/table.scss +177 -165
  189. package/components/Tabs/tabs.css +76 -48
  190. package/components/Tabs/tabs.scss +74 -48
  191. package/components/TextInputGroup/text-input-group.css +15 -15
  192. package/components/TextInputGroup/text-input-group.scss +15 -15
  193. package/components/Tile/tile.css +10 -10
  194. package/components/Tile/tile.scss +10 -10
  195. package/components/Title/title.css +70 -19
  196. package/components/Title/title.scss +90 -20
  197. package/components/ToggleGroup/toggle-group.css +14 -11
  198. package/components/ToggleGroup/toggle-group.scss +14 -11
  199. package/components/Toolbar/toolbar.css +57 -44
  200. package/components/Toolbar/toolbar.scss +45 -26
  201. package/components/Tooltip/tooltip.css +76 -44
  202. package/components/Tooltip/tooltip.scss +93 -77
  203. package/components/TreeView/tree-view.css +48 -27
  204. package/components/TreeView/tree-view.scss +50 -28
  205. package/components/Truncate/truncate.css +9 -0
  206. package/components/Truncate/truncate.scss +16 -3
  207. package/components/Wizard/wizard.css +57 -36
  208. package/components/Wizard/wizard.scss +57 -36
  209. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  210. package/docs/components/Accordion/examples/Accordion.md +614 -416
  211. package/docs/components/Alert/examples/Alert.md +1 -1
  212. package/docs/components/Badge/examples/Badge.md +21 -0
  213. package/docs/components/Banner/examples/Banner.md +48 -25
  214. package/docs/components/Brand/examples/Brand.css +12 -0
  215. package/docs/components/Brand/examples/Brand.md +75 -32
  216. package/docs/components/Button/examples/Button.css +2 -2
  217. package/docs/components/Button/examples/Button.md +15 -3
  218. package/docs/components/Card/examples/Card.md +125 -17
  219. package/docs/components/Check/examples/Check.md +71 -59
  220. package/docs/components/Chip/examples/Chip.md +1 -1
  221. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  222. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  223. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  224. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  225. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  226. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -24
  227. package/docs/components/Label/examples/Label.md +1 -1
  228. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  229. package/docs/components/LogViewer/examples/LogViewer.md +250 -160
  230. package/docs/components/Login/examples/Login.md +5 -0
  231. package/docs/components/Masthead/examples/masthead.md +7 -54
  232. package/docs/components/Menu/examples/Menu.css +8 -0
  233. package/docs/components/Menu/examples/Menu.md +594 -543
  234. package/docs/components/MenuToggle/examples/MenuToggle.md +151 -138
  235. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  236. package/docs/components/Nav/examples/Navigation.css +3 -25
  237. package/docs/components/Nav/examples/Navigation.md +239 -113
  238. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  239. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  240. package/docs/components/Page/examples/Page.css +0 -8
  241. package/docs/components/Page/examples/Page.md +22 -21
  242. package/docs/components/Popover/examples/Popover.css +4 -9
  243. package/docs/components/Popover/examples/Popover.md +1 -1
  244. package/docs/components/Radio/examples/Radio.md +63 -55
  245. package/docs/components/Select/deprecated/Select.md +184 -177
  246. package/docs/components/Table/examples/Table.css +2 -2
  247. package/docs/components/Table/examples/Table.md +2 -2
  248. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  249. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  250. package/docs/components/Tile/examples/Tile.css +1 -1
  251. package/docs/components/Title/examples/Title.md +18 -0
  252. package/docs/components/Toolbar/examples/Toolbar.md +570 -2803
  253. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  254. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  255. package/docs/components/Truncate/examples/Truncate.md +2 -2
  256. package/docs/demos/AboutModal/examples/AboutModal.md +85 -10
  257. package/docs/demos/Alert/examples/Alert.md +249 -24
  258. package/docs/demos/BackToTop/examples/BackToTop.md +83 -8
  259. package/docs/demos/Banner/examples/Banner.md +168 -16
  260. package/docs/demos/Card/examples/Card.css +3 -3
  261. package/docs/demos/Card/examples/Card.md +28 -12
  262. package/docs/demos/CardView/examples/CardView.md +139 -79
  263. package/docs/demos/ContextSelector/examples/ContextSelector.md +332 -32
  264. package/docs/demos/Dashboard/examples/Dashboard.md +86 -11
  265. package/docs/demos/DataList/examples/DataList.md +524 -354
  266. package/docs/demos/DescriptionList/examples/DescriptionList.md +249 -24
  267. package/docs/demos/Drawer/examples/Drawer.md +415 -40
  268. package/docs/demos/JumpLinks/examples/JumpLinks.md +498 -48
  269. package/docs/demos/Masthead/examples/Masthead.md +793 -277
  270. package/docs/demos/Modal/examples/Modal.md +498 -48
  271. package/docs/demos/Nav/examples/Nav.md +664 -64
  272. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +420 -40
  273. package/docs/demos/Page/examples/Page.md +747 -72
  274. package/docs/demos/Page/examples/Penta.md +746 -0
  275. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -1
  276. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +824 -451
  277. package/docs/demos/Skeleton/examples/Skeleton.md +90 -43
  278. package/docs/demos/Table/examples/Table.md +2313 -1887
  279. package/docs/demos/Tabs/examples/Tabs.md +528 -71
  280. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  281. package/docs/demos/Toolbar/examples/Toolbar.md +870 -1044
  282. package/docs/demos/Wizard/examples/Wizard.md +747 -72
  283. package/docs/layouts/Flex/examples/Flex.md +5 -5
  284. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  285. package/icons/pficons.mjs +1 -0
  286. package/layouts/Flex/flex.css +115 -43
  287. package/layouts/Flex/flex.scss +20 -8
  288. package/package.json +9 -5
  289. package/patternfly-addons.css +732 -972
  290. package/patternfly-base-no-globals-theme-dark-unversioned.css +921 -784
  291. package/patternfly-base-no-globals.css +921 -784
  292. package/patternfly-base-theme-dark-unversioned.css +926 -789
  293. package/patternfly-base.css +926 -789
  294. package/patternfly-no-globals.css +4838 -4253
  295. package/patternfly-theme-dark-unversioned.css +4843 -4258
  296. package/patternfly.css +4843 -4258
  297. package/patternfly.min.css +1 -1
  298. package/patternfly.min.css.map +1 -1
  299. package/sass-utilities/functions.scss +6 -0
  300. package/sass-utilities/mixins.scss +62 -2
  301. package/sass-utilities/scss-variables.scss +8 -8
  302. package/sass-utilities/themes/dark/mixins.scss +3 -1
  303. package/utilities/Accessibility/accessibility.css +12 -12
  304. package/utilities/Spacing/spacing.css +720 -960
  305. package/utilities/Spacing/spacing.scss +4 -8
  306. package/base/themes/dark/_variables.scss +0 -102
  307. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  308. package/components/Accordion/themes/dark/accordion.scss +0 -9
  309. package/components/Alert/themes/dark/alert.scss +0 -17
  310. package/components/Badge/themes/dark/badge.scss +0 -9
  311. package/components/Banner/themes/dark/banner.scss +0 -14
  312. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  313. package/components/Hint/themes/dark/hint.scss +0 -8
  314. package/components/Login/themes/dark/login.scss +0 -12
  315. package/components/Masthead/themes/dark/masthead.scss +0 -14
  316. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  317. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  318. package/components/Page/themes/dark/page.scss +0 -69
  319. package/components/Popover/themes/dark/popover.scss +0 -11
  320. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  321. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -25,13 +25,88 @@ wrapperTag: div
25
25
  </button>
26
26
  </span>
27
27
  <div class="pf-v5-c-masthead__main">
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
- />
28
+ <a
29
+ class="pf-v5-c-masthead__brand"
30
+ href="#"
31
+ style="--pf-v5-c-brand--Height: 36px;"
32
+ >
33
+ <svg height="36px" viewBox="0 0 679 158" role="img">
34
+ <title>Patternfly logo</title>
35
+ <defs>
36
+ <linearGradient
37
+ x1="68%"
38
+ y1="2.25860997e-13%"
39
+ x2="32%"
40
+ y2="100%"
41
+ id="linearGradient-1"
42
+ >
43
+ <stop stop-color="#2B9AF3" offset="0%" />
44
+ <stop
45
+ stop-color="#73BCF7"
46
+ stop-opacity="0.502212631"
47
+ offset="100%"
48
+ />
49
+ </linearGradient>
50
+ </defs>
51
+ <g
52
+ id="PF-HorizontalLogo-Color"
53
+ stroke="none"
54
+ stroke-width="1"
55
+ fill="none"
56
+ fill-rule="evenodd"
57
+ >
58
+ <g
59
+ transform="translate(206.000000, 45.750000)"
60
+ fill="var(--pf-t--global--text--color--regular)"
61
+ fill-rule="nonzero"
62
+ >
63
+ <path
64
+ 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"
65
+ />
66
+ <path
67
+ 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"
68
+ />
69
+ <path
70
+ 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"
71
+ />
72
+ <path
73
+ 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"
74
+ />
75
+ <path
76
+ 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"
77
+ />
78
+ <path
79
+ 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"
80
+ />
81
+ <path
82
+ 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"
83
+ />
84
+ <polygon
85
+ 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"
86
+ />
87
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
88
+ <path
89
+ 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"
90
+ />
91
+ </g>
92
+ <g id="Logo" transform="translate(0.000000, 0.000000)">
93
+ <path
94
+ 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"
95
+ id="Rectangle-Copy-17"
96
+ fill="var(--pf-t--global--color--brand--200)"
97
+ />
98
+ <path
99
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
100
+ fill="url(#linearGradient-1)"
101
+ />
102
+ <path
103
+ 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"
104
+ fill="url(#linearGradient-1)"
105
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
106
+ />
107
+ </g>
108
+ </g>
109
+ </svg>
35
110
  </a>
36
111
  </div>
37
112
  <div class="pf-v5-c-masthead__content">
@@ -105,7 +180,7 @@ wrapperTag: div
105
180
  <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
106
181
  <span class="pf-v5-c-menu-toggle__controls">
107
182
  <span class="pf-v5-c-menu-toggle__toggle-icon">
108
- <i class="fas fa-caret-down" aria-hidden="true"></i>
183
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
109
184
  </span>
110
185
  </span>
111
186
  </button>
@@ -199,70 +274,54 @@ wrapperTag: div
199
274
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
200
275
  >
201
276
  <div class="pf-v5-c-card">
202
- <div class="pf-v5-c-toolbar">
277
+ <div class="pf-v5-c-toolbar" id="data-list-basic-example-toolbar">
203
278
  <div class="pf-v5-c-toolbar__content">
204
279
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
205
280
  <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>
281
+ <div
282
+ class="pf-v5-c-menu-toggle pf-m-split-button"
283
+ id="data-list-basic-example-toolbar-check"
284
+ >
285
+ <label
286
+ class="pf-v5-c-check pf-m-standalone"
287
+ id="data-list-basic-example-toolbar-check-check"
288
+ for="data-list-basic-example-toolbar-check-check-input"
289
+ >
290
+ <input
291
+ class="pf-v5-c-check__input"
292
+ type="checkbox"
293
+ id="data-list-basic-example-toolbar-check-check-input"
294
+ name="data-list-basic-example-toolbar-check-check-input"
295
+ aria-label="Standalone check"
296
+ />
297
+ </label>
298
+ <button
299
+ class="pf-v5-c-menu-toggle__button"
300
+ type="button"
301
+ aria-expanded="false"
302
+ id="data-list-basic-example-toolbar-menu-toggle-toggle-button"
303
+ aria-label="Menu toggle"
304
+ >
305
+ <span class="pf-v5-c-menu-toggle__controls">
306
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
307
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
308
+ </span>
309
+ </span>
310
+ </button>
255
311
  </div>
256
312
  </div>
257
313
 
258
314
  <div class="pf-v5-c-toolbar__item">
259
315
  <div class="pf-v5-c-context-selector">
260
- <span id="-context-selector-label" hidden>Selected project:</span>
316
+ <span
317
+ id="data-list-basic-example-toolbar-context-selector-label"
318
+ hidden
319
+ >Selected project:</span>
261
320
  <button
262
321
  class="pf-v5-c-context-selector__toggle"
263
322
  aria-expanded="false"
264
- id="-context-selector-toggle"
265
- aria-labelledby="-context-selector-label -context-selector-toggle"
323
+ id="data-list-basic-example-toolbar-context-selector-toggle"
324
+ aria-labelledby="data-list-basic-example-toolbar-context-selector-label data-list-basic-example-toolbar-context-selector-toggle"
266
325
  >
267
326
  <span
268
327
  class="pf-v5-c-context-selector__toggle-text"
@@ -306,7 +365,10 @@ wrapperTag: div
306
365
  </div>
307
366
  </div>
308
367
 
309
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
368
+ <div
369
+ class="pf-v5-c-overflow-menu"
370
+ id="data-list-basic-example-toolbar-overflow-menu"
371
+ >
310
372
  <div
311
373
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
312
374
  >
@@ -324,7 +386,7 @@ wrapperTag: div
324
386
  <button
325
387
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
326
388
  type="button"
327
- id="-overflow-menu-dropdown-toggle"
389
+ id="data-list-basic-example-toolbar-overflow-menu-dropdown-toggle"
328
390
  aria-label="Dropdown with additional options"
329
391
  aria-expanded="false"
330
392
  >
@@ -333,7 +395,7 @@ wrapperTag: div
333
395
  <ul
334
396
  class="pf-v5-c-dropdown__menu"
335
397
  role="menu"
336
- aria-labelledby="-overflow-menu-dropdown-toggle"
398
+ aria-labelledby="data-list-basic-example-toolbar-overflow-menu-dropdown-toggle"
337
399
  hidden
338
400
  >
339
401
  <li role="none">
@@ -353,7 +415,7 @@ wrapperTag: div
353
415
  <button
354
416
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
355
417
  type="button"
356
- id="-top-pagination-toggle"
418
+ id="data-list-basic-example-toolbar-top-pagination-toggle"
357
419
  aria-haspopup="listbox"
358
420
  aria-expanded="false"
359
421
  >
@@ -368,7 +430,7 @@ wrapperTag: div
368
430
  <ul
369
431
  class="pf-v5-c-options-menu__menu"
370
432
  role="menu"
371
- aria-labelledby="-top-pagination-toggle"
433
+ aria-labelledby="data-list-basic-example-toolbar-top-pagination-toggle"
372
434
  hidden
373
435
  >
374
436
  <li role="none">
@@ -429,7 +491,7 @@ wrapperTag: div
429
491
 
430
492
  <div
431
493
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
432
- id="-expandable-content"
494
+ id="data-list-basic-example-toolbar-expandable-content"
433
495
  hidden
434
496
  ></div>
435
497
  </div>
@@ -896,13 +958,88 @@ wrapperTag: div
896
958
  </button>
897
959
  </span>
898
960
  <div class="pf-v5-c-masthead__main">
899
- <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
- />
961
+ <a
962
+ class="pf-v5-c-masthead__brand"
963
+ href="#"
964
+ style="--pf-v5-c-brand--Height: 36px;"
965
+ >
966
+ <svg height="36px" viewBox="0 0 679 158" role="img">
967
+ <title>Patternfly logo</title>
968
+ <defs>
969
+ <linearGradient
970
+ x1="68%"
971
+ y1="2.25860997e-13%"
972
+ x2="32%"
973
+ y2="100%"
974
+ id="linearGradient-1"
975
+ >
976
+ <stop stop-color="#2B9AF3" offset="0%" />
977
+ <stop
978
+ stop-color="#73BCF7"
979
+ stop-opacity="0.502212631"
980
+ offset="100%"
981
+ />
982
+ </linearGradient>
983
+ </defs>
984
+ <g
985
+ id="PF-HorizontalLogo-Color"
986
+ stroke="none"
987
+ stroke-width="1"
988
+ fill="none"
989
+ fill-rule="evenodd"
990
+ >
991
+ <g
992
+ transform="translate(206.000000, 45.750000)"
993
+ fill="var(--pf-t--global--text--color--regular)"
994
+ fill-rule="nonzero"
995
+ >
996
+ <path
997
+ 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"
998
+ />
999
+ <path
1000
+ 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"
1001
+ />
1002
+ <path
1003
+ 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"
1004
+ />
1005
+ <path
1006
+ 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"
1007
+ />
1008
+ <path
1009
+ 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"
1010
+ />
1011
+ <path
1012
+ 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"
1013
+ />
1014
+ <path
1015
+ 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"
1016
+ />
1017
+ <polygon
1018
+ 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"
1019
+ />
1020
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1021
+ <path
1022
+ 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"
1023
+ />
1024
+ </g>
1025
+ <g id="Logo" transform="translate(0.000000, 0.000000)">
1026
+ <path
1027
+ 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"
1028
+ id="Rectangle-Copy-17"
1029
+ fill="var(--pf-t--global--color--brand--200)"
1030
+ />
1031
+ <path
1032
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1033
+ fill="url(#linearGradient-1)"
1034
+ />
1035
+ <path
1036
+ 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"
1037
+ fill="url(#linearGradient-1)"
1038
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1039
+ />
1040
+ </g>
1041
+ </g>
1042
+ </svg>
906
1043
  </a>
907
1044
  </div>
908
1045
  <div class="pf-v5-c-masthead__content">
@@ -976,7 +1113,7 @@ wrapperTag: div
976
1113
  <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
977
1114
  <span class="pf-v5-c-menu-toggle__controls">
978
1115
  <span class="pf-v5-c-menu-toggle__toggle-icon">
979
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1116
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
980
1117
  </span>
981
1118
  </span>
982
1119
  </button>
@@ -1070,7 +1207,7 @@ wrapperTag: div
1070
1207
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
1071
1208
  >
1072
1209
  <div class="pf-v5-c-card">
1073
- <div class="pf-v5-c-toolbar">
1210
+ <div class="pf-v5-c-toolbar" id="data-list-actionable-example-toolbar">
1074
1211
  <div class="pf-v5-c-toolbar__content">
1075
1212
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
1076
1213
  <div
@@ -1078,76 +1215,60 @@ wrapperTag: div
1078
1215
  >
1079
1216
  <div class="pf-v5-c-toolbar__toggle">
1080
1217
  <button
1081
- class="pf-v5-c-button pf-m-plain"
1218
+ class="pf-v5-c-menu-toggle pf-m-plain"
1082
1219
  type="button"
1083
- aria-label="Show filters"
1084
1220
  aria-expanded="false"
1085
- aria-controls="-expandable-content"
1221
+ aria-label="Show filters"
1222
+ aria-controls="data-list-actionable-example-toolbar-expandable-content"
1086
1223
  >
1087
1224
  <i class="fas fa-filter" aria-hidden="true"></i>
1088
1225
  </button>
1089
1226
  </div>
1090
1227
  <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>
1228
+ <div
1229
+ class="pf-v5-c-menu-toggle pf-m-split-button"
1230
+ id="data-list-actionable-example-toolbar-check"
1231
+ >
1232
+ <label
1233
+ class="pf-v5-c-check pf-m-standalone"
1234
+ id="data-list-actionable-example-toolbar-check-check"
1235
+ for="data-list-actionable-example-toolbar-check-check-input"
1236
+ >
1237
+ <input
1238
+ class="pf-v5-c-check__input"
1239
+ type="checkbox"
1240
+ id="data-list-actionable-example-toolbar-check-check-input"
1241
+ name="data-list-actionable-example-toolbar-check-check-input"
1242
+ aria-label="Standalone check"
1243
+ />
1244
+ </label>
1245
+ <button
1246
+ class="pf-v5-c-menu-toggle__button"
1247
+ type="button"
1248
+ aria-expanded="false"
1249
+ id="data-list-actionable-example-toolbar-menu-toggle-toggle-button"
1250
+ aria-label="Menu toggle"
1251
+ >
1252
+ <span class="pf-v5-c-menu-toggle__controls">
1253
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1254
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1255
+ </span>
1256
+ </span>
1257
+ </button>
1140
1258
  </div>
1141
1259
  </div>
1142
1260
 
1143
1261
  <div class="pf-v5-c-toolbar__item">
1144
1262
  <div class="pf-v5-c-context-selector">
1145
- <span id="-context-selector-label" hidden>Selected project:</span>
1263
+ <span
1264
+ id="data-list-actionable-example-toolbar-context-selector-label"
1265
+ hidden
1266
+ >Selected project:</span>
1146
1267
  <button
1147
1268
  class="pf-v5-c-context-selector__toggle"
1148
1269
  aria-expanded="false"
1149
- id="-context-selector-toggle"
1150
- aria-labelledby="-context-selector-label -context-selector-toggle"
1270
+ id="data-list-actionable-example-toolbar-context-selector-toggle"
1271
+ aria-labelledby="data-list-actionable-example-toolbar-context-selector-label data-list-actionable-example-toolbar-context-selector-toggle"
1151
1272
  >
1152
1273
  <span
1153
1274
  class="pf-v5-c-context-selector__toggle-text"
@@ -1195,7 +1316,10 @@ wrapperTag: div
1195
1316
  </div>
1196
1317
  </div>
1197
1318
 
1198
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
1319
+ <div
1320
+ class="pf-v5-c-overflow-menu"
1321
+ id="data-list-actionable-example-toolbar-overflow-menu"
1322
+ >
1199
1323
  <div
1200
1324
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
1201
1325
  >
@@ -1220,7 +1344,7 @@ wrapperTag: div
1220
1344
  <button
1221
1345
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
1222
1346
  type="button"
1223
- id="-overflow-menu-dropdown-toggle"
1347
+ id="data-list-actionable-example-toolbar-overflow-menu-dropdown-toggle"
1224
1348
  aria-label="Dropdown with additional options"
1225
1349
  aria-expanded="false"
1226
1350
  >
@@ -1229,7 +1353,7 @@ wrapperTag: div
1229
1353
  <ul
1230
1354
  class="pf-v5-c-dropdown__menu"
1231
1355
  role="menu"
1232
- aria-labelledby="-overflow-menu-dropdown-toggle"
1356
+ aria-labelledby="data-list-actionable-example-toolbar-overflow-menu-dropdown-toggle"
1233
1357
  hidden
1234
1358
  >
1235
1359
  <li role="none">
@@ -1249,7 +1373,7 @@ wrapperTag: div
1249
1373
  <button
1250
1374
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1251
1375
  type="button"
1252
- id="-top-pagination-toggle"
1376
+ id="data-list-actionable-example-toolbar-top-pagination-toggle"
1253
1377
  aria-haspopup="listbox"
1254
1378
  aria-expanded="false"
1255
1379
  >
@@ -1264,7 +1388,7 @@ wrapperTag: div
1264
1388
  <ul
1265
1389
  class="pf-v5-c-options-menu__menu"
1266
1390
  role="menu"
1267
- aria-labelledby="-top-pagination-toggle"
1391
+ aria-labelledby="data-list-actionable-example-toolbar-top-pagination-toggle"
1268
1392
  hidden
1269
1393
  >
1270
1394
  <li role="none">
@@ -1325,7 +1449,7 @@ wrapperTag: div
1325
1449
 
1326
1450
  <div
1327
1451
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
1328
- id="-expandable-content"
1452
+ id="data-list-actionable-example-toolbar-expandable-content"
1329
1453
  hidden
1330
1454
  ></div>
1331
1455
  </div>
@@ -1757,13 +1881,88 @@ wrapperTag: div
1757
1881
  </button>
1758
1882
  </span>
1759
1883
  <div class="pf-v5-c-masthead__main">
1760
- <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
- />
1884
+ <a
1885
+ class="pf-v5-c-masthead__brand"
1886
+ href="#"
1887
+ style="--pf-v5-c-brand--Height: 36px;"
1888
+ >
1889
+ <svg height="36px" viewBox="0 0 679 158" role="img">
1890
+ <title>Patternfly logo</title>
1891
+ <defs>
1892
+ <linearGradient
1893
+ x1="68%"
1894
+ y1="2.25860997e-13%"
1895
+ x2="32%"
1896
+ y2="100%"
1897
+ id="linearGradient-1"
1898
+ >
1899
+ <stop stop-color="#2B9AF3" offset="0%" />
1900
+ <stop
1901
+ stop-color="#73BCF7"
1902
+ stop-opacity="0.502212631"
1903
+ offset="100%"
1904
+ />
1905
+ </linearGradient>
1906
+ </defs>
1907
+ <g
1908
+ id="PF-HorizontalLogo-Color"
1909
+ stroke="none"
1910
+ stroke-width="1"
1911
+ fill="none"
1912
+ fill-rule="evenodd"
1913
+ >
1914
+ <g
1915
+ transform="translate(206.000000, 45.750000)"
1916
+ fill="var(--pf-t--global--text--color--regular)"
1917
+ fill-rule="nonzero"
1918
+ >
1919
+ <path
1920
+ 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"
1921
+ />
1922
+ <path
1923
+ 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"
1924
+ />
1925
+ <path
1926
+ 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"
1927
+ />
1928
+ <path
1929
+ 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"
1930
+ />
1931
+ <path
1932
+ 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"
1933
+ />
1934
+ <path
1935
+ 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"
1936
+ />
1937
+ <path
1938
+ 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"
1939
+ />
1940
+ <polygon
1941
+ 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"
1942
+ />
1943
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1944
+ <path
1945
+ 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"
1946
+ />
1947
+ </g>
1948
+ <g id="Logo" transform="translate(0.000000, 0.000000)">
1949
+ <path
1950
+ 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"
1951
+ id="Rectangle-Copy-17"
1952
+ fill="var(--pf-t--global--color--brand--200)"
1953
+ />
1954
+ <path
1955
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1956
+ fill="url(#linearGradient-1)"
1957
+ />
1958
+ <path
1959
+ 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"
1960
+ fill="url(#linearGradient-1)"
1961
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1962
+ />
1963
+ </g>
1964
+ </g>
1965
+ </svg>
1767
1966
  </a>
1768
1967
  </div>
1769
1968
  <div class="pf-v5-c-masthead__content">
@@ -1837,7 +2036,7 @@ wrapperTag: div
1837
2036
  <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1838
2037
  <span class="pf-v5-c-menu-toggle__controls">
1839
2038
  <span class="pf-v5-c-menu-toggle__toggle-icon">
1840
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2039
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1841
2040
  </span>
1842
2041
  </span>
1843
2042
  </button>
@@ -1931,7 +2130,7 @@ wrapperTag: div
1931
2130
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
1932
2131
  >
1933
2132
  <div class="pf-v5-c-card">
1934
- <div class="pf-v5-c-toolbar">
2133
+ <div class="pf-v5-c-toolbar" id="data-list-expandable-example-toolbar">
1935
2134
  <div class="pf-v5-c-toolbar__content">
1936
2135
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
1937
2136
  <div class="pf-v5-c-toolbar__item pf-m-expand-all">
@@ -1940,8 +2139,14 @@ wrapperTag: div
1940
2139
  type="button"
1941
2140
  aria-label="Expand all rows"
1942
2141
  >
1943
- <span class="pf-v5-c-toolbar__expand-all-icon">
1944
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2142
+ <span class="pf-v5-c-icon">
2143
+ <span
2144
+ class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
2145
+ >
2146
+ <span class="pf-v5-c-toolbar__expand-all-icon">
2147
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2148
+ </span>
2149
+ </span>
1945
2150
  </span>
1946
2151
  </button>
1947
2152
  </div>
@@ -1951,65 +2156,46 @@ wrapperTag: div
1951
2156
  >
1952
2157
  <div class="pf-v5-c-toolbar__toggle">
1953
2158
  <button
1954
- class="pf-v5-c-button pf-m-plain"
2159
+ class="pf-v5-c-menu-toggle pf-m-plain"
1955
2160
  type="button"
1956
- aria-label="Show filters"
1957
2161
  aria-expanded="false"
1958
- aria-controls="-expandable-content"
2162
+ aria-label="Show filters"
2163
+ aria-controls="data-list-expandable-example-toolbar-expandable-content"
1959
2164
  >
1960
2165
  <i class="fas fa-filter" aria-hidden="true"></i>
1961
2166
  </button>
1962
2167
  </div>
1963
2168
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
1964
- <div class="pf-v5-c-dropdown">
1965
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
1966
- <label
1967
- class="pf-v5-c-dropdown__toggle-check"
1968
- for="-bulk-select-toggle-check"
1969
- >
1970
- <div class="pf-v5-c-check pf-m-standalone">
1971
- <input
1972
- class="pf-v5-c-check__input"
1973
- type="checkbox"
1974
- id="-bulk-select-toggle-check"
1975
- aria-label="Select all"
1976
- />
1977
- </div>
1978
- </label>
1979
-
1980
- <button
1981
- class="pf-v5-c-dropdown__toggle-button"
1982
- type="button"
1983
- aria-expanded="false"
1984
- id="-bulk-select-toggle-button"
1985
- aria-label="Dropdown toggle"
1986
- >
1987
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1988
- </button>
1989
- </div>
1990
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1991
- <li role="none">
1992
- <button
1993
- class="pf-v5-c-dropdown__menu-item"
1994
- role="menuitem"
1995
- type="button"
1996
- >Select all</button>
1997
- </li>
1998
- <li role="none">
1999
- <button
2000
- class="pf-v5-c-dropdown__menu-item"
2001
- role="menuitem"
2002
- type="button"
2003
- >Select none</button>
2004
- </li>
2005
- <li role="none">
2006
- <button
2007
- class="pf-v5-c-dropdown__menu-item"
2008
- role="menuitem"
2009
- type="button"
2010
- >Other action</button>
2011
- </li>
2012
- </ul>
2169
+ <div
2170
+ class="pf-v5-c-menu-toggle pf-m-split-button"
2171
+ id="data-list-expandable-example-toolbar-check"
2172
+ >
2173
+ <label
2174
+ class="pf-v5-c-check pf-m-standalone"
2175
+ id="data-list-expandable-example-toolbar-check-check"
2176
+ for="data-list-expandable-example-toolbar-check-check-input"
2177
+ >
2178
+ <input
2179
+ class="pf-v5-c-check__input"
2180
+ type="checkbox"
2181
+ id="data-list-expandable-example-toolbar-check-check-input"
2182
+ name="data-list-expandable-example-toolbar-check-check-input"
2183
+ aria-label="Standalone check"
2184
+ />
2185
+ </label>
2186
+ <button
2187
+ class="pf-v5-c-menu-toggle__button"
2188
+ type="button"
2189
+ aria-expanded="false"
2190
+ id="data-list-expandable-example-toolbar-menu-toggle-toggle-button"
2191
+ aria-label="Menu toggle"
2192
+ >
2193
+ <span class="pf-v5-c-menu-toggle__controls">
2194
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2195
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2196
+ </span>
2197
+ </span>
2198
+ </button>
2013
2199
  </div>
2014
2200
  </div>
2015
2201
 
@@ -2020,72 +2206,22 @@ wrapperTag: div
2020
2206
  role="group"
2021
2207
  >
2022
2208
  <div class="pf-v5-c-input-group__item">
2023
- <div class="pf-v5-c-select" style="width: 124px">
2024
- <span id="-select-name-label" hidden>Choose one</span>
2025
-
2026
- <button
2027
- class="pf-v5-c-select__toggle"
2028
- type="button"
2029
- id="-select-name-toggle"
2030
- aria-haspopup="true"
2031
- aria-expanded="false"
2032
- aria-labelledby="-select-name-label -select-name-toggle"
2033
- >
2034
- <div class="pf-v5-c-select__toggle-wrapper">
2035
- <span class="pf-v5-c-select__toggle-icon">
2036
- <i class="fas fa-filter" aria-hidden="true"></i>
2037
- </span>
2038
- <span class="pf-v5-c-select__toggle-text">Name</span>
2039
- </div>
2040
- <span class="pf-v5-c-select__toggle-arrow">
2041
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2209
+ <button
2210
+ class="pf-v5-c-menu-toggle"
2211
+ type="button"
2212
+ aria-expanded="false"
2213
+ id="data-list-expandable-example-toolbar-search-filter-menu"
2214
+ >
2215
+ <span class="pf-v5-c-menu-toggle__icon">
2216
+ <i class="fas fa-filter" aria-hidden="true"></i>
2217
+ </span>
2218
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
2219
+ <span class="pf-v5-c-menu-toggle__controls">
2220
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2221
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2042
2222
  </span>
2043
- </button>
2044
-
2045
- <ul
2046
- class="pf-v5-c-select__menu"
2047
- role="listbox"
2048
- aria-labelledby="-select-name-label"
2049
- hidden
2050
- >
2051
- <li role="presentation">
2052
- <button
2053
- class="pf-v5-c-select__menu-item"
2054
- role="option"
2055
- >Running</button>
2056
- </li>
2057
- <li role="presentation">
2058
- <button
2059
- class="pf-v5-c-select__menu-item pf-m-selected"
2060
- role="option"
2061
- aria-selected="true"
2062
- >
2063
- Stopped
2064
- <span class="pf-v5-c-select__menu-item-icon">
2065
- <i class="fas fa-check" aria-hidden="true"></i>
2066
- </span>
2067
- </button>
2068
- </li>
2069
- <li role="presentation">
2070
- <button
2071
- class="pf-v5-c-select__menu-item"
2072
- role="option"
2073
- >Down</button>
2074
- </li>
2075
- <li role="presentation">
2076
- <button
2077
- class="pf-v5-c-select__menu-item"
2078
- role="option"
2079
- >Degraded</button>
2080
- </li>
2081
- <li role="presentation">
2082
- <button
2083
- class="pf-v5-c-select__menu-item"
2084
- role="option"
2085
- >Needs maintenance</button>
2086
- </li>
2087
- </ul>
2088
- </div>
2223
+ </span>
2224
+ </button>
2089
2225
  </div>
2090
2226
  <div class="pf-v5-c-input-group__item pf-m-fill">
2091
2227
  <div class="pf-v5-c-text-input-group">
@@ -2109,7 +2245,10 @@ wrapperTag: div
2109
2245
  </div>
2110
2246
  </div>
2111
2247
 
2112
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
2248
+ <div
2249
+ class="pf-v5-c-overflow-menu"
2250
+ id="data-list-expandable-example-toolbar-overflow-menu"
2251
+ >
2113
2252
  <div
2114
2253
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
2115
2254
  >
@@ -2127,7 +2266,7 @@ wrapperTag: div
2127
2266
  <button
2128
2267
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
2129
2268
  type="button"
2130
- id="-overflow-menu-dropdown-toggle"
2269
+ id="data-list-expandable-example-toolbar-overflow-menu-dropdown-toggle"
2131
2270
  aria-label="Dropdown with additional options"
2132
2271
  aria-expanded="false"
2133
2272
  >
@@ -2136,7 +2275,7 @@ wrapperTag: div
2136
2275
  <ul
2137
2276
  class="pf-v5-c-dropdown__menu"
2138
2277
  role="menu"
2139
- aria-labelledby="-overflow-menu-dropdown-toggle"
2278
+ aria-labelledby="data-list-expandable-example-toolbar-overflow-menu-dropdown-toggle"
2140
2279
  hidden
2141
2280
  >
2142
2281
  <li role="none">
@@ -2156,7 +2295,7 @@ wrapperTag: div
2156
2295
  <button
2157
2296
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2158
2297
  type="button"
2159
- id="-top-pagination-toggle"
2298
+ id="data-list-expandable-example-toolbar-top-pagination-toggle"
2160
2299
  aria-haspopup="listbox"
2161
2300
  aria-expanded="false"
2162
2301
  >
@@ -2171,7 +2310,7 @@ wrapperTag: div
2171
2310
  <ul
2172
2311
  class="pf-v5-c-options-menu__menu"
2173
2312
  role="menu"
2174
- aria-labelledby="-top-pagination-toggle"
2313
+ aria-labelledby="data-list-expandable-example-toolbar-top-pagination-toggle"
2175
2314
  hidden
2176
2315
  >
2177
2316
  <li role="none">
@@ -2232,7 +2371,7 @@ wrapperTag: div
2232
2371
 
2233
2372
  <div
2234
2373
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
2235
- id="-expandable-content"
2374
+ id="data-list-expandable-example-toolbar-expandable-content"
2236
2375
  hidden
2237
2376
  ></div>
2238
2377
  </div>
@@ -3417,13 +3556,88 @@ wrapperTag: div
3417
3556
  </button>
3418
3557
  </span>
3419
3558
  <div class="pf-v5-c-masthead__main">
3420
- <a class="pf-v5-c-masthead__brand" href="#">
3421
- <img
3422
- class="pf-v5-c-brand"
3423
- src="/assets/images/pf-logo.svg"
3424
- alt="PatternFly logo"
3425
- style="--pf-v5-c-brand--Height:36px"
3426
- />
3559
+ <a
3560
+ class="pf-v5-c-masthead__brand"
3561
+ href="#"
3562
+ style="--pf-v5-c-brand--Height: 36px;"
3563
+ >
3564
+ <svg height="36px" viewBox="0 0 679 158" role="img">
3565
+ <title>Patternfly logo</title>
3566
+ <defs>
3567
+ <linearGradient
3568
+ x1="68%"
3569
+ y1="2.25860997e-13%"
3570
+ x2="32%"
3571
+ y2="100%"
3572
+ id="linearGradient-1"
3573
+ >
3574
+ <stop stop-color="#2B9AF3" offset="0%" />
3575
+ <stop
3576
+ stop-color="#73BCF7"
3577
+ stop-opacity="0.502212631"
3578
+ offset="100%"
3579
+ />
3580
+ </linearGradient>
3581
+ </defs>
3582
+ <g
3583
+ id="PF-HorizontalLogo-Color"
3584
+ stroke="none"
3585
+ stroke-width="1"
3586
+ fill="none"
3587
+ fill-rule="evenodd"
3588
+ >
3589
+ <g
3590
+ transform="translate(206.000000, 45.750000)"
3591
+ fill="var(--pf-t--global--text--color--regular)"
3592
+ fill-rule="nonzero"
3593
+ >
3594
+ <path
3595
+ 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"
3596
+ />
3597
+ <path
3598
+ 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"
3599
+ />
3600
+ <path
3601
+ 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"
3602
+ />
3603
+ <path
3604
+ 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"
3605
+ />
3606
+ <path
3607
+ 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"
3608
+ />
3609
+ <path
3610
+ 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"
3611
+ />
3612
+ <path
3613
+ 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"
3614
+ />
3615
+ <polygon
3616
+ 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"
3617
+ />
3618
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
3619
+ <path
3620
+ 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"
3621
+ />
3622
+ </g>
3623
+ <g id="Logo" transform="translate(0.000000, 0.000000)">
3624
+ <path
3625
+ 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"
3626
+ id="Rectangle-Copy-17"
3627
+ fill="var(--pf-t--global--color--brand--200)"
3628
+ />
3629
+ <path
3630
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3631
+ fill="url(#linearGradient-1)"
3632
+ />
3633
+ <path
3634
+ 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"
3635
+ fill="url(#linearGradient-1)"
3636
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3637
+ />
3638
+ </g>
3639
+ </g>
3640
+ </svg>
3427
3641
  </a>
3428
3642
  </div>
3429
3643
  <div class="pf-v5-c-masthead__content">
@@ -3497,7 +3711,7 @@ wrapperTag: div
3497
3711
  <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3498
3712
  <span class="pf-v5-c-menu-toggle__controls">
3499
3713
  <span class="pf-v5-c-menu-toggle__toggle-icon">
3500
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3714
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3501
3715
  </span>
3502
3716
  </span>
3503
3717
  </button>
@@ -3591,7 +3805,10 @@ wrapperTag: div
3591
3805
  class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl"
3592
3806
  >
3593
3807
  <div class="pf-v5-c-card">
3594
- <div class="pf-v5-c-toolbar">
3808
+ <div
3809
+ class="pf-v5-c-toolbar"
3810
+ id="data-list-static-bottom-example-toolbar"
3811
+ >
3595
3812
  <div class="pf-v5-c-toolbar__content">
3596
3813
  <div class="pf-v5-c-toolbar__content-section pf-m-nowrap">
3597
3814
  <div
@@ -3599,11 +3816,11 @@ wrapperTag: div
3599
3816
  >
3600
3817
  <div class="pf-v5-c-toolbar__toggle">
3601
3818
  <button
3602
- class="pf-v5-c-button pf-m-plain"
3819
+ class="pf-v5-c-menu-toggle pf-m-plain"
3603
3820
  type="button"
3604
- aria-label="Show filters"
3605
3821
  aria-expanded="false"
3606
- aria-controls="-expandable-content"
3822
+ aria-label="Show filters"
3823
+ aria-controls="data-list-static-bottom-example-toolbar-expandable-content"
3607
3824
  >
3608
3825
  <i class="fas fa-filter" aria-hidden="true"></i>
3609
3826
  </button>
@@ -3616,72 +3833,22 @@ wrapperTag: div
3616
3833
  role="group"
3617
3834
  >
3618
3835
  <div class="pf-v5-c-input-group__item">
3619
- <div class="pf-v5-c-select" style="width: 124px">
3620
- <span id="-select-name-label" hidden>Choose one</span>
3621
-
3622
- <button
3623
- class="pf-v5-c-select__toggle"
3624
- type="button"
3625
- id="-select-name-toggle"
3626
- aria-haspopup="true"
3627
- aria-expanded="false"
3628
- aria-labelledby="-select-name-label -select-name-toggle"
3629
- >
3630
- <div class="pf-v5-c-select__toggle-wrapper">
3631
- <span class="pf-v5-c-select__toggle-icon">
3632
- <i class="fas fa-filter" aria-hidden="true"></i>
3633
- </span>
3634
- <span class="pf-v5-c-select__toggle-text">Name</span>
3635
- </div>
3636
- <span class="pf-v5-c-select__toggle-arrow">
3637
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3836
+ <button
3837
+ class="pf-v5-c-menu-toggle"
3838
+ type="button"
3839
+ aria-expanded="false"
3840
+ id="data-list-static-bottom-example-toolbar-search-filter-menu"
3841
+ >
3842
+ <span class="pf-v5-c-menu-toggle__icon">
3843
+ <i class="fas fa-filter" aria-hidden="true"></i>
3844
+ </span>
3845
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
3846
+ <span class="pf-v5-c-menu-toggle__controls">
3847
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3848
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3638
3849
  </span>
3639
- </button>
3640
-
3641
- <ul
3642
- class="pf-v5-c-select__menu"
3643
- role="listbox"
3644
- aria-labelledby="-select-name-label"
3645
- hidden
3646
- >
3647
- <li role="presentation">
3648
- <button
3649
- class="pf-v5-c-select__menu-item"
3650
- role="option"
3651
- >Running</button>
3652
- </li>
3653
- <li role="presentation">
3654
- <button
3655
- class="pf-v5-c-select__menu-item pf-m-selected"
3656
- role="option"
3657
- aria-selected="true"
3658
- >
3659
- Stopped
3660
- <span class="pf-v5-c-select__menu-item-icon">
3661
- <i class="fas fa-check" aria-hidden="true"></i>
3662
- </span>
3663
- </button>
3664
- </li>
3665
- <li role="presentation">
3666
- <button
3667
- class="pf-v5-c-select__menu-item"
3668
- role="option"
3669
- >Down</button>
3670
- </li>
3671
- <li role="presentation">
3672
- <button
3673
- class="pf-v5-c-select__menu-item"
3674
- role="option"
3675
- >Degraded</button>
3676
- </li>
3677
- <li role="presentation">
3678
- <button
3679
- class="pf-v5-c-select__menu-item"
3680
- role="option"
3681
- >Needs maintenance</button>
3682
- </li>
3683
- </ul>
3684
- </div>
3850
+ </span>
3851
+ </button>
3685
3852
  </div>
3686
3853
  <div class="pf-v5-c-input-group__item pf-m-fill">
3687
3854
  <div class="pf-v5-c-text-input-group">
@@ -3705,7 +3872,10 @@ wrapperTag: div
3705
3872
  </div>
3706
3873
  </div>
3707
3874
 
3708
- <div class="pf-v5-c-overflow-menu" id="-overflow-menu">
3875
+ <div
3876
+ class="pf-v5-c-overflow-menu"
3877
+ id="data-list-static-bottom-example-toolbar-overflow-menu"
3878
+ >
3709
3879
  <div
3710
3880
  class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
3711
3881
  >
@@ -3730,7 +3900,7 @@ wrapperTag: div
3730
3900
  <button
3731
3901
  class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain"
3732
3902
  type="button"
3733
- id="-overflow-menu-dropdown-toggle"
3903
+ id="data-list-static-bottom-example-toolbar-overflow-menu-dropdown-toggle"
3734
3904
  aria-label="Dropdown with additional options"
3735
3905
  aria-expanded="false"
3736
3906
  >
@@ -3739,7 +3909,7 @@ wrapperTag: div
3739
3909
  <ul
3740
3910
  class="pf-v5-c-dropdown__menu"
3741
3911
  role="menu"
3742
- aria-labelledby="-overflow-menu-dropdown-toggle"
3912
+ aria-labelledby="data-list-static-bottom-example-toolbar-overflow-menu-dropdown-toggle"
3743
3913
  hidden
3744
3914
  >
3745
3915
  <li role="none">
@@ -3759,7 +3929,7 @@ wrapperTag: div
3759
3929
  <button
3760
3930
  class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3761
3931
  type="button"
3762
- id="-top-pagination-toggle"
3932
+ id="data-list-static-bottom-example-toolbar-top-pagination-toggle"
3763
3933
  aria-haspopup="listbox"
3764
3934
  aria-expanded="false"
3765
3935
  >
@@ -3774,7 +3944,7 @@ wrapperTag: div
3774
3944
  <ul
3775
3945
  class="pf-v5-c-options-menu__menu"
3776
3946
  role="menu"
3777
- aria-labelledby="-top-pagination-toggle"
3947
+ aria-labelledby="data-list-static-bottom-example-toolbar-top-pagination-toggle"
3778
3948
  hidden
3779
3949
  >
3780
3950
  <li role="none">
@@ -3835,7 +4005,7 @@ wrapperTag: div
3835
4005
 
3836
4006
  <div
3837
4007
  class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
3838
- id="-expandable-content"
4008
+ id="data-list-static-bottom-example-toolbar-expandable-content"
3839
4009
  hidden
3840
4010
  ></div>
3841
4011
  </div>