@patternfly/patternfly 6.5.0-prerelease.9 → 6.5.0-prerelease.90

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (419) hide show
  1. package/README.md +2 -2
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/assets/images/RHAiExperienceIcon.svg +27 -0
  8. package/assets/images/RHAutomationsLogo.svg +96 -0
  9. package/assets/images/RHServerStackIcon.svg +16 -0
  10. package/assets/images/compass--hero-bg.png +0 -0
  11. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  12. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  13. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  14. package/assets/images/compass--wallpaper-dark.png +0 -0
  15. package/assets/images/compass--wallpaper-light.jpg +0 -0
  16. package/assets/images/compass--wallpaper-light.png +0 -0
  17. package/assets/images/glass-brand-dark.jpg +0 -0
  18. package/assets/images/glass-brand-dark.png +0 -0
  19. package/assets/images/glass-brand-light.jpg +0 -0
  20. package/assets/images/glass-brand-light.png +0 -0
  21. package/base/normalize.scss +16 -1
  22. package/base/patternfly-common.css +4 -0
  23. package/base/patternfly-common.scss +3 -0
  24. package/base/patternfly-svg-icons.css +17 -0
  25. package/base/patternfly-svg-icons.scss +20 -0
  26. package/base/patternfly-variables.css +932 -515
  27. package/base/patternfly-variables.scss +55 -4
  28. package/base/tokens/tokens-charts-dark.scss +4 -2
  29. package/base/tokens/tokens-charts-highcontrast-dark.scss +175 -0
  30. package/base/tokens/tokens-charts-highcontrast.scss +175 -0
  31. package/base/tokens/tokens-charts.scss +4 -2
  32. package/base/tokens/tokens-dark.scss +56 -8
  33. package/base/tokens/tokens-default.scss +70 -15
  34. package/base/tokens/tokens-felt-dark.scss +21 -0
  35. package/base/tokens/tokens-felt-glass-dark.scss +40 -0
  36. package/base/tokens/tokens-felt-glass.scss +30 -0
  37. package/base/tokens/tokens-felt-highcontrast-dark.scss +50 -0
  38. package/base/tokens/tokens-felt-highcontrast.scss +129 -0
  39. package/base/tokens/tokens-felt.scss +15 -0
  40. package/base/tokens/tokens-glass-dark.scss +26 -0
  41. package/base/tokens/tokens-glass.scss +22 -0
  42. package/base/tokens/tokens-local-felt-glass-dark.scss +5 -0
  43. package/base/tokens/tokens-local-felt-glass.scss +5 -0
  44. package/base/tokens/tokens-local-glass-dark.scss +5 -0
  45. package/base/tokens/tokens-local-glass.scss +6 -0
  46. package/base/tokens/tokens-local.scss +15 -0
  47. package/base/tokens/tokens-palette.scss +3 -1
  48. package/base/tokens/tokens-redhat-highcontrast.scss +758 -0
  49. package/components/AboutModalBox/about-modal-box.css +36 -26
  50. package/components/Accordion/accordion.css +26 -14
  51. package/components/Accordion/accordion.scss +12 -2
  52. package/components/ActionList/action-list.css +2 -0
  53. package/components/ActionList/action-list.scss +2 -0
  54. package/components/Alert/alert.css +7 -5
  55. package/components/Alert/alert.scss +2 -1
  56. package/components/Avatar/avatar.css +12 -4
  57. package/components/BackgroundImage/background-image.css +6 -3
  58. package/components/Banner/banner.css +12 -6
  59. package/components/Banner/banner.scss +7 -0
  60. package/components/Brand/brand.css +3 -1
  61. package/components/Breadcrumb/breadcrumb.css +10 -5
  62. package/components/Breadcrumb/breadcrumb.scss +6 -2
  63. package/components/Button/button.css +173 -71
  64. package/components/Button/button.scss +188 -72
  65. package/components/CalendarMonth/calendar-month.css +4 -3
  66. package/components/Card/card.css +51 -15
  67. package/components/Card/card.scss +63 -9
  68. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  69. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  70. package/components/CodeEditor/code-editor.css +2 -2
  71. package/components/CodeEditor/code-editor.scss +2 -2
  72. package/components/Compass/compass.css +403 -0
  73. package/components/Compass/compass.scss +419 -0
  74. package/components/DataList/data-list.css +30 -23
  75. package/components/DataList/data-list.scss +3 -2
  76. package/components/DescriptionList/description-list-order.scss +5 -1
  77. package/components/DescriptionList/description-list.css +7 -5
  78. package/components/DescriptionList/description-list.scss +5 -1
  79. package/components/Divider/divider.css +7 -5
  80. package/components/Drawer/drawer.css +225 -75
  81. package/components/Drawer/drawer.scss +195 -27
  82. package/components/DualListSelector/dual-list-selector.css +18 -12
  83. package/components/DualListSelector/dual-list-selector.scss +1 -1
  84. package/components/ExpandableSection/expandable-section.css +21 -16
  85. package/components/ExpandableSection/expandable-section.scss +6 -3
  86. package/components/Form/form.css +2 -2
  87. package/components/Form/form.scss +2 -2
  88. package/components/FormControl/form-control.css +3 -3
  89. package/components/FormControl/form-control.scss +3 -3
  90. package/components/Hero/hero.css +74 -0
  91. package/components/Hero/hero.scss +87 -0
  92. package/components/JumpLinks/jump-links.css +16 -5
  93. package/components/JumpLinks/jump-links.scss +17 -3
  94. package/components/Label/label-group.css +2 -2
  95. package/components/Label/label-group.scss +2 -2
  96. package/components/Label/label.css +4 -3
  97. package/components/Login/login.css +58 -40
  98. package/components/Login/login.scss +7 -3
  99. package/components/Masthead/masthead.css +111 -16
  100. package/components/Masthead/masthead.scss +111 -1
  101. package/components/Menu/menu.css +49 -33
  102. package/components/Menu/menu.scss +26 -19
  103. package/components/MenuToggle/menu-toggle.css +35 -8
  104. package/components/MenuToggle/menu-toggle.scss +42 -8
  105. package/components/ModalBox/modal-box.css +9 -7
  106. package/components/ModalBox/modal-box.scss +2 -2
  107. package/components/Nav/nav.css +82 -11
  108. package/components/Nav/nav.scss +85 -5
  109. package/components/NotificationDrawer/notification-drawer.css +19 -9
  110. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  111. package/components/OverflowMenu/overflow-menu.css +16 -0
  112. package/components/OverflowMenu/overflow-menu.scss +20 -1
  113. package/components/Page/page.css +423 -32
  114. package/components/Page/page.scss +399 -15
  115. package/components/Pagination/pagination.css +58 -4
  116. package/components/Pagination/pagination.scss +73 -6
  117. package/components/Panel/panel.css +41 -3
  118. package/components/Panel/panel.scss +56 -3
  119. package/components/Progress/progress.css +3 -1
  120. package/components/Progress/progress.scss +3 -1
  121. package/components/ProgressStepper/progress-stepper.scss +5 -1
  122. package/components/Sidebar/sidebar.css +1 -1
  123. package/components/Sidebar/sidebar.scss +7 -3
  124. package/components/Skeleton/skeleton.css +16 -15
  125. package/components/Slider/slider.css +32 -18
  126. package/components/Switch/switch.css +4 -2
  127. package/components/Switch/switch.scss +1 -1
  128. package/components/Table/table-grid.css +28 -36
  129. package/components/Table/table-grid.scss +4 -4
  130. package/components/Table/table-scrollable.css +1 -1
  131. package/components/Table/table-scrollable.scss +1 -1
  132. package/components/Table/table-tree-view.css +4 -2
  133. package/components/Table/table.css +104 -57
  134. package/components/Table/table.scss +92 -37
  135. package/components/Tabs/tabs.css +39 -33
  136. package/components/Tabs/tabs.scss +38 -26
  137. package/components/TextInputGroup/text-input-group.css +2 -2
  138. package/components/TextInputGroup/text-input-group.scss +2 -2
  139. package/components/ToggleGroup/toggle-group.css +44 -19
  140. package/components/ToggleGroup/toggle-group.scss +51 -22
  141. package/components/Toolbar/toolbar.css +199 -17
  142. package/components/Toolbar/toolbar.scss +93 -10
  143. package/components/TreeView/tree-view.css +45 -14
  144. package/components/TreeView/tree-view.scss +32 -1
  145. package/components/Wizard/wizard.css +41 -19
  146. package/components/Wizard/wizard.scss +26 -6
  147. package/components/_index.css +2787 -864
  148. package/components/_index.scss +3 -1
  149. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  150. package/docs/components/Accordion/examples/Accordion.md +392 -30
  151. package/docs/components/ActionList/examples/ActionList.md +143 -11
  152. package/docs/components/Alert/examples/Alert.md +678 -54
  153. package/docs/components/Avatar/examples/Avatar.md +4 -4
  154. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  155. package/docs/components/Banner/examples/Banner.md +196 -5
  156. package/docs/components/Brand/examples/Brand.md +2 -2
  157. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  158. package/docs/components/Button/examples/Button.md +2829 -333
  159. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  160. package/docs/components/Card/examples/Card.md +337 -14
  161. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  162. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  163. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  164. package/docs/components/Compass/examples/Compass.css +8 -0
  165. package/docs/components/Compass/examples/Compass.md +115 -0
  166. package/docs/components/DataList/examples/DataList.md +446 -37
  167. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  168. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  169. package/docs/components/Divider/examples/Divider.md +2 -2
  170. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  171. package/docs/components/Drawer/examples/Drawer.md +415 -35
  172. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  173. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  174. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  175. package/docs/components/Form/examples/Form.md +78 -6
  176. package/docs/components/Hero/examples/Hero.md +25 -0
  177. package/docs/components/Hint/examples/Hint.md +39 -3
  178. package/docs/components/Icon/examples/Icon.md +105 -9
  179. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  180. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  181. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  182. package/docs/components/Label/examples/Label.md +2834 -218
  183. package/docs/components/Login/examples/Login.md +39 -3
  184. package/docs/components/Masthead/examples/masthead.md +158 -7
  185. package/docs/components/Menu/examples/Menu.md +1679 -133
  186. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  187. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  188. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  189. package/docs/components/Nav/examples/Navigation.md +898 -62
  190. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  191. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  192. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  193. package/docs/components/Page/examples/Page.md +211 -25
  194. package/docs/components/Pagination/examples/Pagination.md +1291 -80
  195. package/docs/components/Panel/examples/Panel.css +3 -0
  196. package/docs/components/Panel/examples/Panel.md +71 -4
  197. package/docs/components/Popover/examples/Popover.md +286 -22
  198. package/docs/components/Progress/examples/Progress.md +91 -7
  199. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  200. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  201. package/docs/components/Slider/examples/Slider.md +52 -4
  202. package/docs/components/Table/examples/Table.css +2 -1
  203. package/docs/components/Table/examples/Table.md +7543 -653
  204. package/docs/components/Tabs/examples/Tabs.md +5734 -471
  205. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  206. package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
  207. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  208. package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
  209. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  210. package/docs/components/Wizard/examples/Wizard.md +828 -73
  211. package/docs/demos/AboutModal/examples/AboutModal.md +159 -54
  212. package/docs/demos/Alert/examples/Alert.md +542 -167
  213. package/docs/demos/BackToTop/examples/BackToTop.md +159 -54
  214. package/docs/demos/Banner/examples/Banner.md +292 -106
  215. package/docs/demos/Button/examples/Button.md +13 -1
  216. package/docs/demos/Card/examples/Card.md +1041 -134
  217. package/docs/demos/CardView/examples/CardView.md +571 -172
  218. package/docs/demos/Compass/examples/Compass.md +10178 -0
  219. package/docs/demos/Dashboard/examples/Dashboard.md +746 -178
  220. package/docs/demos/DataList/examples/DataList.md +1305 -296
  221. package/docs/demos/DescriptionList/examples/DescriptionList.md +475 -163
  222. package/docs/demos/Drawer/examples/Drawer.md +723 -267
  223. package/docs/demos/Form/examples/BasicForms.md +273 -21
  224. package/docs/demos/JumpLinks/examples/JumpLinks.md +868 -325
  225. package/docs/demos/Masthead/examples/Masthead.md +1128 -498
  226. package/docs/demos/Modal/examples/Modal.md +954 -327
  227. package/docs/demos/Nav/examples/Nav.md +3455 -505
  228. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2423 -410
  229. package/docs/demos/Page/examples/Page.md +2151 -787
  230. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  231. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  232. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1920 -511
  233. package/docs/demos/Skeleton/examples/Skeleton.md +146 -53
  234. package/docs/demos/Table/examples/Table.md +11822 -2290
  235. package/docs/demos/Tabs/examples/Tabs.md +1123 -343
  236. package/docs/demos/Toolbar/examples/Toolbar.md +1820 -288
  237. package/docs/demos/Wizard/examples/Wizard.md +1714 -535
  238. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  239. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  240. package/docs/layouts/Flex/examples/Flex.css +3 -3
  241. package/docs/layouts/Flex/examples/Flex.md +3 -2
  242. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  243. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  244. package/docs/layouts/Grid/examples/Grid.css +1 -1
  245. package/docs/layouts/Grid/examples/Grid.md +6 -5
  246. package/docs/layouts/Level/examples/Level.css +3 -3
  247. package/docs/layouts/Level/examples/Level.md +2 -1
  248. package/docs/layouts/Split/examples/Split.css +1 -1
  249. package/docs/layouts/Split/examples/Split.md +2 -1
  250. package/docs/layouts/Stack/examples/Stack.css +3 -3
  251. package/docs/layouts/Stack/examples/Stack.md +2 -1
  252. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  253. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  254. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  255. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  256. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  257. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  258. package/docs/utilities/Display/examples/Display.css +1 -1
  259. package/docs/utilities/Display/examples/Display.md +3 -2
  260. package/docs/utilities/Flex/examples/Flex.css +7 -7
  261. package/docs/utilities/Flex/examples/Flex.md +3 -2
  262. package/docs/utilities/Float/examples/Float.css +2 -2
  263. package/docs/utilities/Float/examples/Float.md +3 -2
  264. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  265. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  266. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  267. package/docs/utilities/Text/examples/Text.md +5 -4
  268. package/icons/PfIcons/add-circle-o.svg +4 -0
  269. package/icons/PfIcons/ansible-tower.svg +4 -0
  270. package/icons/PfIcons/applications.svg +4 -0
  271. package/icons/PfIcons/arrow.svg +4 -0
  272. package/icons/PfIcons/asleep.svg +4 -0
  273. package/icons/PfIcons/attention-bell.svg +4 -0
  274. package/icons/PfIcons/automation.svg +4 -0
  275. package/icons/PfIcons/bell.svg +4 -0
  276. package/icons/PfIcons/blueprint.svg +4 -0
  277. package/icons/PfIcons/build.svg +4 -0
  278. package/icons/PfIcons/builder-image.svg +4 -0
  279. package/icons/PfIcons/bundle.svg +4 -0
  280. package/icons/PfIcons/catalog.svg +4 -0
  281. package/icons/PfIcons/chat.svg +4 -0
  282. package/icons/PfIcons/close.svg +4 -0
  283. package/icons/PfIcons/cloud-security.svg +4 -0
  284. package/icons/PfIcons/cloud-tenant.svg +4 -0
  285. package/icons/PfIcons/cluster.svg +4 -0
  286. package/icons/PfIcons/connected.svg +4 -0
  287. package/icons/PfIcons/container-node.svg +4 -0
  288. package/icons/PfIcons/cpu.svg +4 -0
  289. package/icons/PfIcons/critical-risk.svg +4 -0
  290. package/icons/PfIcons/data-processor.svg +4 -0
  291. package/icons/PfIcons/data-sink.svg +4 -0
  292. package/icons/PfIcons/data-source.svg +4 -0
  293. package/icons/PfIcons/degraded.svg +4 -0
  294. package/icons/PfIcons/disconnected.svg +4 -0
  295. package/icons/PfIcons/domain.svg +4 -0
  296. package/icons/PfIcons/edit.svg +4 -0
  297. package/icons/PfIcons/enhancement.svg +4 -0
  298. package/icons/PfIcons/enterprise.svg +4 -0
  299. package/icons/PfIcons/equalizer.svg +4 -0
  300. package/icons/PfIcons/error-circle-o.svg +4 -0
  301. package/icons/PfIcons/export.svg +4 -0
  302. package/icons/PfIcons/filter.svg +4 -0
  303. package/icons/PfIcons/flavor.svg +4 -0
  304. package/icons/PfIcons/folder-close.svg +4 -0
  305. package/icons/PfIcons/folder-open.svg +4 -0
  306. package/icons/PfIcons/globe-route.svg +4 -0
  307. package/icons/PfIcons/help.svg +4 -0
  308. package/icons/PfIcons/history.svg +4 -0
  309. package/icons/PfIcons/home.svg +4 -0
  310. package/icons/PfIcons/import.svg +4 -0
  311. package/icons/PfIcons/in-progress.svg +4 -0
  312. package/icons/PfIcons/info.svg +4 -0
  313. package/icons/PfIcons/infrastructure.svg +4 -0
  314. package/icons/PfIcons/integration.svg +4 -0
  315. package/icons/PfIcons/key.svg +4 -0
  316. package/icons/PfIcons/locked.svg +4 -0
  317. package/icons/PfIcons/maintenance.svg +4 -0
  318. package/icons/PfIcons/memory.svg +4 -0
  319. package/icons/PfIcons/messages.svg +4 -0
  320. package/icons/PfIcons/middleware.svg +4 -0
  321. package/icons/PfIcons/migration.svg +4 -0
  322. package/icons/PfIcons/module.svg +4 -0
  323. package/icons/PfIcons/monitoring.svg +4 -0
  324. package/icons/PfIcons/multicluster.svg +4 -0
  325. package/icons/PfIcons/namespaces.svg +4 -0
  326. package/icons/PfIcons/network.svg +4 -0
  327. package/icons/PfIcons/new-process.svg +4 -0
  328. package/icons/PfIcons/not-started.svg +4 -0
  329. package/icons/PfIcons/off.svg +4 -0
  330. package/icons/PfIcons/ok.svg +4 -0
  331. package/icons/PfIcons/on-running.svg +4 -0
  332. package/icons/PfIcons/on.svg +4 -0
  333. package/icons/PfIcons/open-drawer-right.svg +4 -0
  334. package/icons/PfIcons/openshift.svg +4 -0
  335. package/icons/PfIcons/openstack.svg +4 -0
  336. package/icons/PfIcons/optimize.svg +4 -0
  337. package/icons/PfIcons/orders.svg +4 -0
  338. package/icons/PfIcons/os-image.svg +4 -0
  339. package/icons/PfIcons/package.svg +4 -0
  340. package/icons/PfIcons/panel-close.svg +4 -0
  341. package/icons/PfIcons/panel-open.svg +4 -0
  342. package/icons/PfIcons/paused.svg +4 -0
  343. package/icons/PfIcons/pending.svg +4 -0
  344. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  345. package/icons/PfIcons/pficon-history.svg +4 -0
  346. package/icons/PfIcons/pficon-network-range.svg +4 -0
  347. package/icons/PfIcons/pficon-satellite.svg +4 -0
  348. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  349. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  350. package/icons/PfIcons/pficon-template.svg +4 -0
  351. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  352. package/icons/PfIcons/plugged.svg +4 -0
  353. package/icons/PfIcons/port.svg +4 -0
  354. package/icons/PfIcons/print.svg +4 -0
  355. package/icons/PfIcons/private.svg +4 -0
  356. package/icons/PfIcons/process-automation.svg +4 -0
  357. package/icons/PfIcons/project.svg +4 -0
  358. package/icons/PfIcons/rebalance.svg +4 -0
  359. package/icons/PfIcons/rebooting.svg +4 -0
  360. package/icons/PfIcons/regions.svg +4 -0
  361. package/icons/PfIcons/registry.svg +4 -0
  362. package/icons/PfIcons/remove2.svg +4 -0
  363. package/icons/PfIcons/replicator.svg +4 -0
  364. package/icons/PfIcons/repository.svg +4 -0
  365. package/icons/PfIcons/resource-pool.svg +4 -0
  366. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  367. package/icons/PfIcons/resources-almost-full.svg +4 -0
  368. package/icons/PfIcons/resources-empty.svg +4 -0
  369. package/icons/PfIcons/resources-full.svg +4 -0
  370. package/icons/PfIcons/running.svg +4 -0
  371. package/icons/PfIcons/save.svg +4 -0
  372. package/icons/PfIcons/screen.svg +4 -0
  373. package/icons/PfIcons/security.svg +4 -0
  374. package/icons/PfIcons/server-group.svg +4 -0
  375. package/icons/PfIcons/server.svg +4 -0
  376. package/icons/PfIcons/service-catalog.svg +4 -0
  377. package/icons/PfIcons/service.svg +4 -0
  378. package/icons/PfIcons/services.svg +4 -0
  379. package/icons/PfIcons/severity-critical.svg +4 -0
  380. package/icons/PfIcons/severity-important.svg +4 -0
  381. package/icons/PfIcons/severity-minor.svg +4 -0
  382. package/icons/PfIcons/severity-moderate.svg +4 -0
  383. package/icons/PfIcons/severity-none.svg +4 -0
  384. package/icons/PfIcons/severity-undefined.svg +4 -0
  385. package/icons/PfIcons/spinner.svg +4 -0
  386. package/icons/PfIcons/spinner2.svg +4 -0
  387. package/icons/PfIcons/storage-domain.svg +4 -0
  388. package/icons/PfIcons/task.svg +4 -0
  389. package/icons/PfIcons/tenant.svg +4 -0
  390. package/icons/PfIcons/thumb-tack.svg +4 -0
  391. package/icons/PfIcons/topology.svg +4 -0
  392. package/icons/PfIcons/treeview.svg +4 -0
  393. package/icons/PfIcons/trend-down.svg +4 -0
  394. package/icons/PfIcons/trend-up.svg +4 -0
  395. package/icons/PfIcons/unknown.svg +4 -0
  396. package/icons/PfIcons/unlocked.svg +4 -0
  397. package/icons/PfIcons/unplugged.svg +4 -0
  398. package/icons/PfIcons/user.svg +4 -0
  399. package/icons/PfIcons/users.svg +4 -0
  400. package/icons/PfIcons/virtual-machine.svg +4 -0
  401. package/icons/PfIcons/volume.svg +4 -0
  402. package/icons/PfIcons/warning-triangle.svg +4 -0
  403. package/icons/PfIcons/zone.svg +4 -0
  404. package/layouts/Flex/flex.scss +83 -19
  405. package/layouts/Gallery/gallery.css +6 -2
  406. package/layouts/_index.css +6 -2
  407. package/package.json +57 -17
  408. package/patternfly-base-no-globals.css +944 -506
  409. package/patternfly-base.css +957 -504
  410. package/patternfly-charts.css +379 -20
  411. package/patternfly-charts.scss +38 -15
  412. package/patternfly-no-globals.css +3562 -1197
  413. package/patternfly.css +3577 -1197
  414. package/patternfly.min.css +1 -1
  415. package/patternfly.min.css.map +1 -1
  416. package/sass-utilities/functions.scss +32 -25
  417. package/sass-utilities/mixins.scss +54 -23
  418. package/sass-utilities/namespaces-components.scss +6 -0
  419. package/sass-utilities/scss-variables.scss +3 -0
package/docs/components/DataList/examples/DataList.md CHANGED
@@ -164,7 +164,19 @@ When a list item includes more than one block of content, it can be difficult fo
164
164
  id="data-list-checkboxes-actions-addl-cells-item-1-menu-toggle"
165
165
  >
166
166
  <span class="pf-v6-c-menu-toggle__icon">
167
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
167
+ <svg
168
+ class="pf-v6-svg"
169
+ viewBox="0 0 32 32"
170
+ fill="currentColor"
171
+ aria-hidden="true"
172
+ role="img"
173
+ width="1em"
174
+ height="1em"
175
+ >
176
+ <path
177
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
178
+ />
179
+ </svg>
168
180
  </span>
169
181
  </button>
170
182
  </div>
@@ -208,7 +220,19 @@ When a list item includes more than one block of content, it can be difficult fo
208
220
  id="data-list-checkboxes-actions-addl-cells-item-2-menu-toggle"
209
221
  >
210
222
  <span class="pf-v6-c-menu-toggle__icon">
211
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
223
+ <svg
224
+ class="pf-v6-svg"
225
+ viewBox="0 0 32 32"
226
+ fill="currentColor"
227
+ aria-hidden="true"
228
+ role="img"
229
+ width="1em"
230
+ height="1em"
231
+ >
232
+ <path
233
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
234
+ />
235
+ </svg>
212
236
  </span>
213
237
  </button>
214
238
  </div>
@@ -262,7 +286,19 @@ When a list item includes more than one block of content, it can be difficult fo
262
286
  id="data-list-checkboxes-actions-addl-cells-item-3-menu-toggle"
263
287
  >
264
288
  <span class="pf-v6-c-menu-toggle__icon">
265
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
289
+ <svg
290
+ class="pf-v6-svg"
291
+ viewBox="0 0 32 32"
292
+ fill="currentColor"
293
+ aria-hidden="true"
294
+ role="img"
295
+ width="1em"
296
+ height="1em"
297
+ >
298
+ <path
299
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
300
+ />
301
+ </svg>
266
302
  </span>
267
303
  </button>
268
304
  </div>
@@ -305,8 +341,8 @@ When a list item includes more than one block of content, it can be difficult fo
305
341
  | `.pf-v6-c-data-list__item-action` | `<div>` | Initiates a container for the data list actions. For example, add `.pf-v6-c-data-list__action` here. **Required** |
306
342
  | `.pf-v6-c-data-list__check` | `<div>` | Initiates a data list check cell. **Required** |
307
343
  | `.pf-v6-c-data-list__action` | `<div>` | Initiates a data list action button cell. **Required** |
308
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/tokens/all-patternfly-tokens), or hides it at all breakpoints with `.pf-m-hidden`. |
309
- | `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/tokens/all-patternfly-tokens). |
344
+ | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens), or hides it at all breakpoints with `.pf-m-hidden`. |
345
+ | `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
310
346
 
311
347
  ## Exandable data list
312
348
 
@@ -334,7 +370,19 @@ When a list item includes more than one block of content, it can be difficult fo
334
370
  >
335
371
  <span class="pf-v6-c-button__icon pf-m-start">
336
372
  <div class="pf-v6-c-data-list__toggle-icon">
337
- <i class="fas fa-angle-right" aria-hidden="true"></i>
373
+ <svg
374
+ class="pf-v6-svg"
375
+ viewBox="0 0 20 20"
376
+ fill="currentColor"
377
+ aria-hidden="true"
378
+ role="img"
379
+ width="1em"
380
+ height="1em"
381
+ >
382
+ <path
383
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
384
+ />
385
+ </svg>
338
386
  </div>
339
387
  </span>
340
388
  </button>
@@ -365,7 +413,19 @@ When a list item includes more than one block of content, it can be difficult fo
365
413
  id="data-list-expandable-item-1-menu-toggle"
366
414
  >
367
415
  <span class="pf-v6-c-menu-toggle__icon">
368
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
416
+ <svg
417
+ class="pf-v6-svg"
418
+ viewBox="0 0 32 32"
419
+ fill="currentColor"
420
+ aria-hidden="true"
421
+ role="img"
422
+ width="1em"
423
+ height="1em"
424
+ >
425
+ <path
426
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
427
+ />
428
+ </svg>
369
429
  </span>
370
430
  </button>
371
431
  </div>
@@ -396,7 +456,19 @@ When a list item includes more than one block of content, it can be difficult fo
396
456
  >
397
457
  <span class="pf-v6-c-button__icon pf-m-start">
398
458
  <div class="pf-v6-c-data-list__toggle-icon">
399
- <i class="fas fa-angle-right" aria-hidden="true"></i>
459
+ <svg
460
+ class="pf-v6-svg"
461
+ viewBox="0 0 20 20"
462
+ fill="currentColor"
463
+ aria-hidden="true"
464
+ role="img"
465
+ width="1em"
466
+ height="1em"
467
+ >
468
+ <path
469
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
470
+ />
471
+ </svg>
400
472
  </div>
401
473
  </span>
402
474
  </button>
@@ -423,7 +495,19 @@ When a list item includes more than one block of content, it can be difficult fo
423
495
  id="data-list-expandable-item-2-menu-toggle"
424
496
  >
425
497
  <span class="pf-v6-c-menu-toggle__icon">
426
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
498
+ <svg
499
+ class="pf-v6-svg"
500
+ viewBox="0 0 32 32"
501
+ fill="currentColor"
502
+ aria-hidden="true"
503
+ role="img"
504
+ width="1em"
505
+ height="1em"
506
+ >
507
+ <path
508
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
509
+ />
510
+ </svg>
427
511
  </span>
428
512
  </button>
429
513
  </div>
@@ -455,7 +539,19 @@ When a list item includes more than one block of content, it can be difficult fo
455
539
  >
456
540
  <span class="pf-v6-c-button__icon pf-m-start">
457
541
  <div class="pf-v6-c-data-list__toggle-icon">
458
- <i class="fas fa-angle-right" aria-hidden="true"></i>
542
+ <svg
543
+ class="pf-v6-svg"
544
+ viewBox="0 0 20 20"
545
+ fill="currentColor"
546
+ aria-hidden="true"
547
+ role="img"
548
+ width="1em"
549
+ height="1em"
550
+ >
551
+ <path
552
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
553
+ />
554
+ </svg>
459
555
  </div>
460
556
  </span>
461
557
  </button>
@@ -485,7 +581,19 @@ When a list item includes more than one block of content, it can be difficult fo
485
581
  id="data-list-expandable-item-3-menu-toggle"
486
582
  >
487
583
  <span class="pf-v6-c-menu-toggle__icon">
488
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
584
+ <svg
585
+ class="pf-v6-svg"
586
+ viewBox="0 0 32 32"
587
+ fill="currentColor"
588
+ aria-hidden="true"
589
+ role="img"
590
+ width="1em"
591
+ height="1em"
592
+ >
593
+ <path
594
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
595
+ />
596
+ </svg>
489
597
  </span>
490
598
  </button>
491
599
  </div>
@@ -528,7 +636,19 @@ When a list item includes more than one block of content, it can be difficult fo
528
636
  >
529
637
  <span class="pf-v6-c-button__icon pf-m-start">
530
638
  <div class="pf-v6-c-data-list__toggle-icon">
531
- <i class="fas fa-angle-right" aria-hidden="true"></i>
639
+ <svg
640
+ class="pf-v6-svg"
641
+ viewBox="0 0 20 20"
642
+ fill="currentColor"
643
+ aria-hidden="true"
644
+ role="img"
645
+ width="1em"
646
+ height="1em"
647
+ >
648
+ <path
649
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
650
+ />
651
+ </svg>
532
652
  </div>
533
653
  </span>
534
654
  </button>
@@ -559,7 +679,19 @@ When a list item includes more than one block of content, it can be difficult fo
559
679
  id="data-list-expandable-compact-item-1-menu-toggle"
560
680
  >
561
681
  <span class="pf-v6-c-menu-toggle__icon">
562
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
682
+ <svg
683
+ class="pf-v6-svg"
684
+ viewBox="0 0 32 32"
685
+ fill="currentColor"
686
+ aria-hidden="true"
687
+ role="img"
688
+ width="1em"
689
+ height="1em"
690
+ >
691
+ <path
692
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
693
+ />
694
+ </svg>
563
695
  </span>
564
696
  </button>
565
697
  </div>
@@ -590,7 +722,19 @@ When a list item includes more than one block of content, it can be difficult fo
590
722
  >
591
723
  <span class="pf-v6-c-button__icon pf-m-start">
592
724
  <div class="pf-v6-c-data-list__toggle-icon">
593
- <i class="fas fa-angle-right" aria-hidden="true"></i>
725
+ <svg
726
+ class="pf-v6-svg"
727
+ viewBox="0 0 20 20"
728
+ fill="currentColor"
729
+ aria-hidden="true"
730
+ role="img"
731
+ width="1em"
732
+ height="1em"
733
+ >
734
+ <path
735
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
736
+ />
737
+ </svg>
594
738
  </div>
595
739
  </span>
596
740
  </button>
@@ -620,7 +764,19 @@ When a list item includes more than one block of content, it can be difficult fo
620
764
  id="data-list-expandable-compact-item-2-menu-toggle"
621
765
  >
622
766
  <span class="pf-v6-c-menu-toggle__icon">
623
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
767
+ <svg
768
+ class="pf-v6-svg"
769
+ viewBox="0 0 32 32"
770
+ fill="currentColor"
771
+ aria-hidden="true"
772
+ role="img"
773
+ width="1em"
774
+ height="1em"
775
+ >
776
+ <path
777
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
778
+ />
779
+ </svg>
624
780
  </span>
625
781
  </button>
626
782
  </div>
@@ -652,7 +808,19 @@ When a list item includes more than one block of content, it can be difficult fo
652
808
  >
653
809
  <span class="pf-v6-c-button__icon pf-m-start">
654
810
  <div class="pf-v6-c-data-list__toggle-icon">
655
- <i class="fas fa-angle-right" aria-hidden="true"></i>
811
+ <svg
812
+ class="pf-v6-svg"
813
+ viewBox="0 0 20 20"
814
+ fill="currentColor"
815
+ aria-hidden="true"
816
+ role="img"
817
+ width="1em"
818
+ height="1em"
819
+ >
820
+ <path
821
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
822
+ />
823
+ </svg>
656
824
  </div>
657
825
  </span>
658
826
  </button>
@@ -682,7 +850,19 @@ When a list item includes more than one block of content, it can be difficult fo
682
850
  id="data-list-expandable-compact-item-3-menu-toggle"
683
851
  >
684
852
  <span class="pf-v6-c-menu-toggle__icon">
685
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
853
+ <svg
854
+ class="pf-v6-svg"
855
+ viewBox="0 0 32 32"
856
+ fill="currentColor"
857
+ aria-hidden="true"
858
+ role="img"
859
+ width="1em"
860
+ height="1em"
861
+ >
862
+ <path
863
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
864
+ />
865
+ </svg>
686
866
  </span>
687
867
  </button>
688
868
  </div>
@@ -725,7 +905,19 @@ When a list item includes more than one block of content, it can be difficult fo
725
905
  >
726
906
  <span class="pf-v6-c-button__icon pf-m-start">
727
907
  <div class="pf-v6-c-data-list__toggle-icon">
728
- <i class="fas fa-angle-right" aria-hidden="true"></i>
908
+ <svg
909
+ class="pf-v6-svg"
910
+ viewBox="0 0 20 20"
911
+ fill="currentColor"
912
+ aria-hidden="true"
913
+ role="img"
914
+ width="1em"
915
+ height="1em"
916
+ >
917
+ <path
918
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
919
+ />
920
+ </svg>
729
921
  </div>
730
922
  </span>
731
923
  </button>
@@ -756,7 +948,19 @@ When a list item includes more than one block of content, it can be difficult fo
756
948
  id="data-list-expandable-nested-item-1-menu-toggle"
757
949
  >
758
950
  <span class="pf-v6-c-menu-toggle__icon">
759
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
951
+ <svg
952
+ class="pf-v6-svg"
953
+ viewBox="0 0 32 32"
954
+ fill="currentColor"
955
+ aria-hidden="true"
956
+ role="img"
957
+ width="1em"
958
+ height="1em"
959
+ >
960
+ <path
961
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
962
+ />
963
+ </svg>
760
964
  </span>
761
965
  </button>
762
966
  </div>
@@ -788,7 +992,19 @@ When a list item includes more than one block of content, it can be difficult fo
788
992
  >
789
993
  <span class="pf-v6-c-button__icon pf-m-start">
790
994
  <div class="pf-v6-c-data-list__toggle-icon">
791
- <i class="fas fa-angle-right" aria-hidden="true"></i>
995
+ <svg
996
+ class="pf-v6-svg"
997
+ viewBox="0 0 20 20"
998
+ fill="currentColor"
999
+ aria-hidden="true"
1000
+ role="img"
1001
+ width="1em"
1002
+ height="1em"
1003
+ >
1004
+ <path
1005
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1006
+ />
1007
+ </svg>
792
1008
  </div>
793
1009
  </span>
794
1010
  </button>
@@ -828,7 +1044,19 @@ When a list item includes more than one block of content, it can be difficult fo
828
1044
  >
829
1045
  <span class="pf-v6-c-button__icon pf-m-start">
830
1046
  <div class="pf-v6-c-data-list__toggle-icon">
831
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1047
+ <svg
1048
+ class="pf-v6-svg"
1049
+ viewBox="0 0 20 20"
1050
+ fill="currentColor"
1051
+ aria-hidden="true"
1052
+ role="img"
1053
+ width="1em"
1054
+ height="1em"
1055
+ >
1056
+ <path
1057
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1058
+ />
1059
+ </svg>
832
1060
  </div>
833
1061
  </span>
834
1062
  </button>
@@ -869,7 +1097,19 @@ When a list item includes more than one block of content, it can be difficult fo
869
1097
  >
870
1098
  <span class="pf-v6-c-button__icon pf-m-start">
871
1099
  <div class="pf-v6-c-data-list__toggle-icon">
872
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1100
+ <svg
1101
+ class="pf-v6-svg"
1102
+ viewBox="0 0 20 20"
1103
+ fill="currentColor"
1104
+ aria-hidden="true"
1105
+ role="img"
1106
+ width="1em"
1107
+ height="1em"
1108
+ >
1109
+ <path
1110
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1111
+ />
1112
+ </svg>
873
1113
  </div>
874
1114
  </span>
875
1115
  </button>
@@ -913,7 +1153,19 @@ When a list item includes more than one block of content, it can be difficult fo
913
1153
  >
914
1154
  <span class="pf-v6-c-button__icon pf-m-start">
915
1155
  <div class="pf-v6-c-data-list__toggle-icon">
916
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1156
+ <svg
1157
+ class="pf-v6-svg"
1158
+ viewBox="0 0 20 20"
1159
+ fill="currentColor"
1160
+ aria-hidden="true"
1161
+ role="img"
1162
+ width="1em"
1163
+ height="1em"
1164
+ >
1165
+ <path
1166
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1167
+ />
1168
+ </svg>
917
1169
  </div>
918
1170
  </span>
919
1171
  </button>
@@ -940,7 +1192,19 @@ When a list item includes more than one block of content, it can be difficult fo
940
1192
  id="data-list-expandable-nested-item-2-menu-toggle"
941
1193
  >
942
1194
  <span class="pf-v6-c-menu-toggle__icon">
943
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1195
+ <svg
1196
+ class="pf-v6-svg"
1197
+ viewBox="0 0 32 32"
1198
+ fill="currentColor"
1199
+ aria-hidden="true"
1200
+ role="img"
1201
+ width="1em"
1202
+ height="1em"
1203
+ >
1204
+ <path
1205
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1206
+ />
1207
+ </svg>
944
1208
  </span>
945
1209
  </button>
946
1210
  </div>
@@ -972,7 +1236,19 @@ When a list item includes more than one block of content, it can be difficult fo
972
1236
  >
973
1237
  <span class="pf-v6-c-button__icon pf-m-start">
974
1238
  <div class="pf-v6-c-data-list__toggle-icon">
975
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1239
+ <svg
1240
+ class="pf-v6-svg"
1241
+ viewBox="0 0 20 20"
1242
+ fill="currentColor"
1243
+ aria-hidden="true"
1244
+ role="img"
1245
+ width="1em"
1246
+ height="1em"
1247
+ >
1248
+ <path
1249
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1250
+ />
1251
+ </svg>
976
1252
  </div>
977
1253
  </span>
978
1254
  </button>
@@ -1002,7 +1278,19 @@ When a list item includes more than one block of content, it can be difficult fo
1002
1278
  id="data-list-expandable-nested-item-3-menu-toggle"
1003
1279
  >
1004
1280
  <span class="pf-v6-c-menu-toggle__icon">
1005
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1281
+ <svg
1282
+ class="pf-v6-svg"
1283
+ viewBox="0 0 32 32"
1284
+ fill="currentColor"
1285
+ aria-hidden="true"
1286
+ role="img"
1287
+ width="1em"
1288
+ height="1em"
1289
+ >
1290
+ <path
1291
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1292
+ />
1293
+ </svg>
1006
1294
  </span>
1007
1295
  </button>
1008
1296
  </div>
@@ -1076,7 +1364,19 @@ When a list item includes more than one block of content, it can be difficult fo
1076
1364
  id="data-list-compact-item-1-menu-toggle"
1077
1365
  >
1078
1366
  <span class="pf-v6-c-menu-toggle__icon">
1079
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1367
+ <svg
1368
+ class="pf-v6-svg"
1369
+ viewBox="0 0 32 32"
1370
+ fill="currentColor"
1371
+ aria-hidden="true"
1372
+ role="img"
1373
+ width="1em"
1374
+ height="1em"
1375
+ >
1376
+ <path
1377
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1378
+ />
1379
+ </svg>
1080
1380
  </span>
1081
1381
  </button>
1082
1382
  </div>
@@ -1118,7 +1418,19 @@ When a list item includes more than one block of content, it can be difficult fo
1118
1418
  id="data-list-compact-item-2-menu-toggle"
1119
1419
  >
1120
1420
  <span class="pf-v6-c-menu-toggle__icon">
1121
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1421
+ <svg
1422
+ class="pf-v6-svg"
1423
+ viewBox="0 0 32 32"
1424
+ fill="currentColor"
1425
+ aria-hidden="true"
1426
+ role="img"
1427
+ width="1em"
1428
+ height="1em"
1429
+ >
1430
+ <path
1431
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1432
+ />
1433
+ </svg>
1122
1434
  </span>
1123
1435
  </button>
1124
1436
  </div>
@@ -1170,7 +1482,19 @@ When a list item includes more than one block of content, it can be difficult fo
1170
1482
  id="data-list-compact-item-3-menu-toggle"
1171
1483
  >
1172
1484
  <span class="pf-v6-c-menu-toggle__icon">
1173
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1485
+ <svg
1486
+ class="pf-v6-svg"
1487
+ viewBox="0 0 32 32"
1488
+ fill="currentColor"
1489
+ aria-hidden="true"
1490
+ role="img"
1491
+ width="1em"
1492
+ height="1em"
1493
+ >
1494
+ <path
1495
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1496
+ />
1497
+ </svg>
1174
1498
  </span>
1175
1499
  </button>
1176
1500
  </div>
@@ -1307,7 +1631,19 @@ When a list item includes more than one block of content, it can be difficult fo
1307
1631
  id="data-list-modifiers-item-2-menu-toggle"
1308
1632
  >
1309
1633
  <span class="pf-v6-c-menu-toggle__icon">
1310
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1634
+ <svg
1635
+ class="pf-v6-svg"
1636
+ viewBox="0 0 32 32"
1637
+ fill="currentColor"
1638
+ aria-hidden="true"
1639
+ role="img"
1640
+ width="1em"
1641
+ height="1em"
1642
+ >
1643
+ <path
1644
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1645
+ />
1646
+ </svg>
1311
1647
  </span>
1312
1648
  </button>
1313
1649
  </div>
@@ -1328,7 +1664,19 @@ When a list item includes more than one block of content, it can be difficult fo
1328
1664
  >
1329
1665
  <span class="pf-v6-c-button__icon pf-m-start">
1330
1666
  <div class="pf-v6-c-data-list__toggle-icon">
1331
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1667
+ <svg
1668
+ class="pf-v6-svg"
1669
+ viewBox="0 0 20 20"
1670
+ fill="currentColor"
1671
+ aria-hidden="true"
1672
+ role="img"
1673
+ width="1em"
1674
+ height="1em"
1675
+ >
1676
+ <path
1677
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1678
+ />
1679
+ </svg>
1332
1680
  </div>
1333
1681
  </span>
1334
1682
  </button>
@@ -1384,7 +1732,19 @@ When a list item includes more than one block of content, it can be difficult fo
1384
1732
  id="data-list-modifiers-item-3-menu-toggle"
1385
1733
  >
1386
1734
  <span class="pf-v6-c-menu-toggle__icon">
1387
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1735
+ <svg
1736
+ class="pf-v6-svg"
1737
+ viewBox="0 0 32 32"
1738
+ fill="currentColor"
1739
+ aria-hidden="true"
1740
+ role="img"
1741
+ width="1em"
1742
+ height="1em"
1743
+ >
1744
+ <path
1745
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1746
+ />
1747
+ </svg>
1388
1748
  </span>
1389
1749
  </button>
1390
1750
  </div>
@@ -1568,7 +1928,19 @@ When a list item includes more than one block of content, it can be difficult fo
1568
1928
  >
1569
1929
  <span class="pf-v6-c-button__icon pf-m-start">
1570
1930
  <div class="pf-v6-c-data-list__toggle-icon">
1571
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1931
+ <svg
1932
+ class="pf-v6-svg"
1933
+ viewBox="0 0 20 20"
1934
+ fill="currentColor"
1935
+ aria-hidden="true"
1936
+ role="img"
1937
+ width="1em"
1938
+ height="1em"
1939
+ >
1940
+ <path
1941
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1942
+ />
1943
+ </svg>
1572
1944
  </div>
1573
1945
  </span>
1574
1946
  </button>
@@ -1608,7 +1980,19 @@ When a list item includes more than one block of content, it can be difficult fo
1608
1980
  >
1609
1981
  <span class="pf-v6-c-button__icon pf-m-start">
1610
1982
  <div class="pf-v6-c-data-list__toggle-icon">
1611
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1983
+ <svg
1984
+ class="pf-v6-svg"
1985
+ viewBox="0 0 20 20"
1986
+ fill="currentColor"
1987
+ aria-hidden="true"
1988
+ role="img"
1989
+ width="1em"
1990
+ height="1em"
1991
+ >
1992
+ <path
1993
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1994
+ />
1995
+ </svg>
1612
1996
  </div>
1613
1997
  </span>
1614
1998
  </button>
@@ -1649,7 +2033,19 @@ When a list item includes more than one block of content, it can be difficult fo
1649
2033
  >
1650
2034
  <span class="pf-v6-c-button__icon pf-m-start">
1651
2035
  <div class="pf-v6-c-data-list__toggle-icon">
1652
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2036
+ <svg
2037
+ class="pf-v6-svg"
2038
+ viewBox="0 0 20 20"
2039
+ fill="currentColor"
2040
+ aria-hidden="true"
2041
+ role="img"
2042
+ width="1em"
2043
+ height="1em"
2044
+ >
2045
+ <path
2046
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2047
+ />
2048
+ </svg>
1653
2049
  </div>
1654
2050
  </span>
1655
2051
  </button>
@@ -1689,7 +2085,19 @@ When a list item includes more than one block of content, it can be difficult fo
1689
2085
  >
1690
2086
  <span class="pf-v6-c-button__icon pf-m-start">
1691
2087
  <div class="pf-v6-c-data-list__toggle-icon">
1692
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2088
+ <svg
2089
+ class="pf-v6-svg"
2090
+ viewBox="0 0 20 20"
2091
+ fill="currentColor"
2092
+ aria-hidden="true"
2093
+ role="img"
2094
+ width="1em"
2095
+ height="1em"
2096
+ >
2097
+ <path
2098
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2099
+ />
2100
+ </svg>
1693
2101
  </div>
1694
2102
  </span>
1695
2103
  </button>
@@ -1986,6 +2394,7 @@ When a list item includes more than one block of content, it can be difficult fo
1986
2394
  | Class | Applied to | Outcome |
1987
2395
  | -- | -- | -- |
1988
2396
  | `.pf-m-plain` | `.pf-v6-c-data-list` | Modifies a data list to have a transparent background. |
2397
+ | `.pf-m-no-plain-on-glass` | `.pf-v6-c-data-list` | Prevents the data list from automatically applying plain styling when glass theme is enabled. |
1989
2398
 
1990
2399
  ## Data list as grid
1991
2400
 
@@ -2116,7 +2525,7 @@ When a list item includes more than one block of content, it can be difficult fo
2116
2525
 
2117
2526
  | Class | Applied to | Outcome |
2118
2527
  | -- | -- | -- |
2119
- | `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-v6-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/tokens/all-patternfly-tokens). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |
2528
+ | `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-v6-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |
2120
2529
 
2121
2530
  ## Documentation
2122
2531