@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (410) 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 +7 -0
  22. package/base/patternfly-common.css +50 -0
  23. package/base/patternfly-common.scss +59 -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 +926 -513
  27. package/base/patternfly-variables.scss +46 -4
  28. package/base/tokens/tokens-dark.scss +56 -8
  29. package/base/tokens/tokens-default.scss +69 -14
  30. package/base/tokens/tokens-glass-dark.scss +26 -0
  31. package/base/tokens/tokens-glass.scss +22 -0
  32. package/base/tokens/tokens-local.scss +17 -0
  33. package/base/tokens/tokens-palette.scss +3 -1
  34. package/base/tokens/tokens-redhat-dark.scss +21 -0
  35. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  36. package/base/tokens/tokens-redhat-glass.scss +30 -0
  37. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  38. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  39. package/base/tokens/tokens-redhat.scss +15 -0
  40. package/components/AboutModalBox/about-modal-box.css +36 -26
  41. package/components/Accordion/accordion.css +26 -14
  42. package/components/Accordion/accordion.scss +12 -2
  43. package/components/ActionList/action-list.css +2 -0
  44. package/components/ActionList/action-list.scss +2 -0
  45. package/components/Alert/alert.css +7 -5
  46. package/components/Alert/alert.scss +2 -1
  47. package/components/Avatar/avatar.css +12 -4
  48. package/components/BackgroundImage/background-image.css +6 -3
  49. package/components/Banner/banner.css +12 -6
  50. package/components/Banner/banner.scss +7 -0
  51. package/components/Brand/brand.css +3 -1
  52. package/components/Breadcrumb/breadcrumb.css +10 -5
  53. package/components/Breadcrumb/breadcrumb.scss +6 -2
  54. package/components/Button/button.css +173 -71
  55. package/components/Button/button.scss +188 -72
  56. package/components/CalendarMonth/calendar-month.css +4 -3
  57. package/components/Card/card.css +51 -15
  58. package/components/Card/card.scss +65 -9
  59. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  60. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  61. package/components/CodeEditor/code-editor.css +2 -2
  62. package/components/CodeEditor/code-editor.scss +2 -2
  63. package/components/Compass/compass.css +399 -0
  64. package/components/Compass/compass.scss +413 -0
  65. package/components/DataList/data-list.css +30 -23
  66. package/components/DataList/data-list.scss +3 -2
  67. package/components/DescriptionList/description-list-order.scss +5 -1
  68. package/components/DescriptionList/description-list.css +7 -5
  69. package/components/DescriptionList/description-list.scss +5 -1
  70. package/components/Divider/divider.css +7 -5
  71. package/components/Drawer/drawer.css +224 -75
  72. package/components/Drawer/drawer.scss +194 -27
  73. package/components/DualListSelector/dual-list-selector.css +18 -12
  74. package/components/DualListSelector/dual-list-selector.scss +1 -1
  75. package/components/ExpandableSection/expandable-section.css +21 -16
  76. package/components/ExpandableSection/expandable-section.scss +6 -3
  77. package/components/Form/form.css +2 -2
  78. package/components/Form/form.scss +2 -2
  79. package/components/FormControl/form-control.css +3 -3
  80. package/components/FormControl/form-control.scss +3 -3
  81. package/components/Hero/hero.css +74 -0
  82. package/components/Hero/hero.scss +86 -0
  83. package/components/JumpLinks/jump-links.css +16 -5
  84. package/components/JumpLinks/jump-links.scss +17 -3
  85. package/components/Label/label-group.css +2 -2
  86. package/components/Label/label-group.scss +2 -2
  87. package/components/Label/label.css +4 -3
  88. package/components/Login/login.css +58 -40
  89. package/components/Login/login.scss +7 -3
  90. package/components/Masthead/masthead.css +111 -16
  91. package/components/Masthead/masthead.scss +111 -1
  92. package/components/Menu/menu.css +49 -33
  93. package/components/Menu/menu.scss +26 -19
  94. package/components/MenuToggle/menu-toggle.css +35 -8
  95. package/components/MenuToggle/menu-toggle.scss +42 -8
  96. package/components/ModalBox/modal-box.css +9 -7
  97. package/components/ModalBox/modal-box.scss +2 -2
  98. package/components/Nav/nav.css +82 -11
  99. package/components/Nav/nav.scss +85 -5
  100. package/components/NotificationDrawer/notification-drawer.css +19 -9
  101. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  102. package/components/OverflowMenu/overflow-menu.css +16 -0
  103. package/components/OverflowMenu/overflow-menu.scss +20 -1
  104. package/components/Page/page.css +421 -32
  105. package/components/Page/page.scss +397 -15
  106. package/components/Pagination/pagination.css +56 -4
  107. package/components/Pagination/pagination.scss +71 -6
  108. package/components/Panel/panel.css +41 -3
  109. package/components/Panel/panel.scss +56 -3
  110. package/components/Progress/progress.css +3 -1
  111. package/components/Progress/progress.scss +3 -1
  112. package/components/ProgressStepper/progress-stepper.scss +5 -1
  113. package/components/Sidebar/sidebar.css +1 -1
  114. package/components/Sidebar/sidebar.scss +7 -3
  115. package/components/Skeleton/skeleton.css +16 -15
  116. package/components/Slider/slider.css +32 -18
  117. package/components/Switch/switch.css +4 -2
  118. package/components/Switch/switch.scss +1 -1
  119. package/components/Table/table-grid.css +28 -36
  120. package/components/Table/table-grid.scss +4 -4
  121. package/components/Table/table-scrollable.css +1 -1
  122. package/components/Table/table-scrollable.scss +1 -1
  123. package/components/Table/table-tree-view.css +4 -2
  124. package/components/Table/table.css +104 -57
  125. package/components/Table/table.scss +92 -37
  126. package/components/Tabs/tabs.css +39 -33
  127. package/components/Tabs/tabs.scss +38 -26
  128. package/components/TextInputGroup/text-input-group.css +2 -2
  129. package/components/TextInputGroup/text-input-group.scss +2 -2
  130. package/components/ToggleGroup/toggle-group.css +44 -19
  131. package/components/ToggleGroup/toggle-group.scss +51 -22
  132. package/components/Toolbar/toolbar.css +195 -16
  133. package/components/Toolbar/toolbar.scss +89 -9
  134. package/components/TreeView/tree-view.css +45 -14
  135. package/components/TreeView/tree-view.scss +32 -1
  136. package/components/Wizard/wizard.css +41 -19
  137. package/components/Wizard/wizard.scss +26 -6
  138. package/components/_index.css +2740 -829
  139. package/components/_index.scss +3 -1
  140. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  141. package/docs/components/Accordion/examples/Accordion.md +392 -30
  142. package/docs/components/ActionList/examples/ActionList.md +143 -11
  143. package/docs/components/Alert/examples/Alert.md +678 -54
  144. package/docs/components/Avatar/examples/Avatar.md +4 -4
  145. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  146. package/docs/components/Banner/examples/Banner.md +196 -5
  147. package/docs/components/Brand/examples/Brand.md +2 -2
  148. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  149. package/docs/components/Button/examples/Button.md +2829 -333
  150. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  151. package/docs/components/Card/examples/Card.md +335 -12
  152. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  153. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  154. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  155. package/docs/components/Compass/examples/Compass.css +8 -0
  156. package/docs/components/Compass/examples/Compass.md +109 -0
  157. package/docs/components/DataList/examples/DataList.md +468 -78
  158. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  159. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  160. package/docs/components/Divider/examples/Divider.md +2 -2
  161. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  162. package/docs/components/Drawer/examples/Drawer.md +415 -35
  163. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  164. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  165. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  166. package/docs/components/Form/examples/Form.md +78 -6
  167. package/docs/components/Hero/examples/Hero.md +25 -0
  168. package/docs/components/Hint/examples/Hint.md +39 -3
  169. package/docs/components/Icon/examples/Icon.md +105 -9
  170. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  171. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  172. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  173. package/docs/components/Label/examples/Label.md +2834 -218
  174. package/docs/components/Login/examples/Login.md +39 -3
  175. package/docs/components/Masthead/examples/masthead.md +80 -1
  176. package/docs/components/Menu/examples/Menu.md +1679 -133
  177. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  178. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  179. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  180. package/docs/components/Nav/examples/Navigation.md +898 -62
  181. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  182. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  183. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  184. package/docs/components/Page/examples/Page.md +211 -25
  185. package/docs/components/Pagination/examples/Pagination.md +1291 -80
  186. package/docs/components/Panel/examples/Panel.css +3 -0
  187. package/docs/components/Panel/examples/Panel.md +71 -4
  188. package/docs/components/Popover/examples/Popover.md +286 -22
  189. package/docs/components/Progress/examples/Progress.md +91 -7
  190. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  191. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  192. package/docs/components/Slider/examples/Slider.md +52 -4
  193. package/docs/components/Table/examples/Table.css +2 -1
  194. package/docs/components/Table/examples/Table.md +7543 -653
  195. package/docs/components/Tabs/examples/Tabs.md +5734 -471
  196. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  197. package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
  198. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  199. package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
  200. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  201. package/docs/components/Wizard/examples/Wizard.md +828 -73
  202. package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
  203. package/docs/demos/Alert/examples/Alert.md +539 -164
  204. package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
  205. package/docs/demos/Banner/examples/Banner.md +290 -104
  206. package/docs/demos/Button/examples/Button.md +13 -1
  207. package/docs/demos/Card/examples/Card.md +1041 -134
  208. package/docs/demos/CardView/examples/CardView.md +570 -171
  209. package/docs/demos/Compass/examples/Compass.md +10005 -0
  210. package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
  211. package/docs/demos/DataList/examples/DataList.md +1301 -292
  212. package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
  213. package/docs/demos/Drawer/examples/Drawer.md +718 -262
  214. package/docs/demos/Form/examples/BasicForms.md +273 -21
  215. package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
  216. package/docs/demos/Masthead/examples/Masthead.md +1119 -489
  217. package/docs/demos/Modal/examples/Modal.md +948 -321
  218. package/docs/demos/Nav/examples/Nav.md +3449 -499
  219. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
  220. package/docs/demos/Page/examples/Page.md +2137 -773
  221. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  222. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  223. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
  224. package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
  225. package/docs/demos/Table/examples/Table.md +11807 -2275
  226. package/docs/demos/Tabs/examples/Tabs.md +1117 -337
  227. package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
  228. package/docs/demos/Wizard/examples/Wizard.md +1705 -526
  229. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  230. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  231. package/docs/layouts/Flex/examples/Flex.css +3 -3
  232. package/docs/layouts/Flex/examples/Flex.md +3 -2
  233. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  234. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  235. package/docs/layouts/Grid/examples/Grid.css +1 -1
  236. package/docs/layouts/Grid/examples/Grid.md +6 -5
  237. package/docs/layouts/Level/examples/Level.css +3 -3
  238. package/docs/layouts/Level/examples/Level.md +2 -1
  239. package/docs/layouts/Split/examples/Split.css +1 -1
  240. package/docs/layouts/Split/examples/Split.md +2 -1
  241. package/docs/layouts/Stack/examples/Stack.css +3 -3
  242. package/docs/layouts/Stack/examples/Stack.md +2 -1
  243. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  244. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  245. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  246. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  247. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  248. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  249. package/docs/utilities/Display/examples/Display.css +1 -1
  250. package/docs/utilities/Display/examples/Display.md +3 -2
  251. package/docs/utilities/Flex/examples/Flex.css +7 -7
  252. package/docs/utilities/Flex/examples/Flex.md +3 -2
  253. package/docs/utilities/Float/examples/Float.css +2 -2
  254. package/docs/utilities/Float/examples/Float.md +3 -2
  255. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  256. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  257. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  258. package/docs/utilities/Text/examples/Text.md +5 -4
  259. package/icons/PfIcons/add-circle-o.svg +4 -0
  260. package/icons/PfIcons/ansible-tower.svg +4 -0
  261. package/icons/PfIcons/applications.svg +4 -0
  262. package/icons/PfIcons/arrow.svg +4 -0
  263. package/icons/PfIcons/asleep.svg +4 -0
  264. package/icons/PfIcons/attention-bell.svg +4 -0
  265. package/icons/PfIcons/automation.svg +4 -0
  266. package/icons/PfIcons/bell.svg +4 -0
  267. package/icons/PfIcons/blueprint.svg +4 -0
  268. package/icons/PfIcons/build.svg +4 -0
  269. package/icons/PfIcons/builder-image.svg +4 -0
  270. package/icons/PfIcons/bundle.svg +4 -0
  271. package/icons/PfIcons/catalog.svg +4 -0
  272. package/icons/PfIcons/chat.svg +4 -0
  273. package/icons/PfIcons/close.svg +4 -0
  274. package/icons/PfIcons/cloud-security.svg +4 -0
  275. package/icons/PfIcons/cloud-tenant.svg +4 -0
  276. package/icons/PfIcons/cluster.svg +4 -0
  277. package/icons/PfIcons/connected.svg +4 -0
  278. package/icons/PfIcons/container-node.svg +4 -0
  279. package/icons/PfIcons/cpu.svg +4 -0
  280. package/icons/PfIcons/critical-risk.svg +4 -0
  281. package/icons/PfIcons/data-processor.svg +4 -0
  282. package/icons/PfIcons/data-sink.svg +4 -0
  283. package/icons/PfIcons/data-source.svg +4 -0
  284. package/icons/PfIcons/degraded.svg +4 -0
  285. package/icons/PfIcons/disconnected.svg +4 -0
  286. package/icons/PfIcons/domain.svg +4 -0
  287. package/icons/PfIcons/edit.svg +4 -0
  288. package/icons/PfIcons/enhancement.svg +4 -0
  289. package/icons/PfIcons/enterprise.svg +4 -0
  290. package/icons/PfIcons/equalizer.svg +4 -0
  291. package/icons/PfIcons/error-circle-o.svg +4 -0
  292. package/icons/PfIcons/export.svg +4 -0
  293. package/icons/PfIcons/filter.svg +4 -0
  294. package/icons/PfIcons/flavor.svg +4 -0
  295. package/icons/PfIcons/folder-close.svg +4 -0
  296. package/icons/PfIcons/folder-open.svg +4 -0
  297. package/icons/PfIcons/globe-route.svg +4 -0
  298. package/icons/PfIcons/help.svg +4 -0
  299. package/icons/PfIcons/history.svg +4 -0
  300. package/icons/PfIcons/home.svg +4 -0
  301. package/icons/PfIcons/import.svg +4 -0
  302. package/icons/PfIcons/in-progress.svg +4 -0
  303. package/icons/PfIcons/info.svg +4 -0
  304. package/icons/PfIcons/infrastructure.svg +4 -0
  305. package/icons/PfIcons/integration.svg +4 -0
  306. package/icons/PfIcons/key.svg +4 -0
  307. package/icons/PfIcons/locked.svg +4 -0
  308. package/icons/PfIcons/maintenance.svg +4 -0
  309. package/icons/PfIcons/memory.svg +4 -0
  310. package/icons/PfIcons/messages.svg +4 -0
  311. package/icons/PfIcons/middleware.svg +4 -0
  312. package/icons/PfIcons/migration.svg +4 -0
  313. package/icons/PfIcons/module.svg +4 -0
  314. package/icons/PfIcons/monitoring.svg +4 -0
  315. package/icons/PfIcons/multicluster.svg +4 -0
  316. package/icons/PfIcons/namespaces.svg +4 -0
  317. package/icons/PfIcons/network.svg +4 -0
  318. package/icons/PfIcons/new-process.svg +4 -0
  319. package/icons/PfIcons/not-started.svg +4 -0
  320. package/icons/PfIcons/off.svg +4 -0
  321. package/icons/PfIcons/ok.svg +4 -0
  322. package/icons/PfIcons/on-running.svg +4 -0
  323. package/icons/PfIcons/on.svg +4 -0
  324. package/icons/PfIcons/open-drawer-right.svg +4 -0
  325. package/icons/PfIcons/openshift.svg +4 -0
  326. package/icons/PfIcons/openstack.svg +4 -0
  327. package/icons/PfIcons/optimize.svg +4 -0
  328. package/icons/PfIcons/orders.svg +4 -0
  329. package/icons/PfIcons/os-image.svg +4 -0
  330. package/icons/PfIcons/package.svg +4 -0
  331. package/icons/PfIcons/panel-close.svg +4 -0
  332. package/icons/PfIcons/panel-open.svg +4 -0
  333. package/icons/PfIcons/paused.svg +4 -0
  334. package/icons/PfIcons/pending.svg +4 -0
  335. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  336. package/icons/PfIcons/pficon-history.svg +4 -0
  337. package/icons/PfIcons/pficon-network-range.svg +4 -0
  338. package/icons/PfIcons/pficon-satellite.svg +4 -0
  339. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  340. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  341. package/icons/PfIcons/pficon-template.svg +4 -0
  342. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  343. package/icons/PfIcons/plugged.svg +4 -0
  344. package/icons/PfIcons/port.svg +4 -0
  345. package/icons/PfIcons/print.svg +4 -0
  346. package/icons/PfIcons/private.svg +4 -0
  347. package/icons/PfIcons/process-automation.svg +4 -0
  348. package/icons/PfIcons/project.svg +4 -0
  349. package/icons/PfIcons/rebalance.svg +4 -0
  350. package/icons/PfIcons/rebooting.svg +4 -0
  351. package/icons/PfIcons/regions.svg +4 -0
  352. package/icons/PfIcons/registry.svg +4 -0
  353. package/icons/PfIcons/remove2.svg +4 -0
  354. package/icons/PfIcons/replicator.svg +4 -0
  355. package/icons/PfIcons/repository.svg +4 -0
  356. package/icons/PfIcons/resource-pool.svg +4 -0
  357. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  358. package/icons/PfIcons/resources-almost-full.svg +4 -0
  359. package/icons/PfIcons/resources-empty.svg +4 -0
  360. package/icons/PfIcons/resources-full.svg +4 -0
  361. package/icons/PfIcons/running.svg +4 -0
  362. package/icons/PfIcons/save.svg +4 -0
  363. package/icons/PfIcons/screen.svg +4 -0
  364. package/icons/PfIcons/security.svg +4 -0
  365. package/icons/PfIcons/server-group.svg +4 -0
  366. package/icons/PfIcons/server.svg +4 -0
  367. package/icons/PfIcons/service-catalog.svg +4 -0
  368. package/icons/PfIcons/service.svg +4 -0
  369. package/icons/PfIcons/services.svg +4 -0
  370. package/icons/PfIcons/severity-critical.svg +4 -0
  371. package/icons/PfIcons/severity-important.svg +4 -0
  372. package/icons/PfIcons/severity-minor.svg +4 -0
  373. package/icons/PfIcons/severity-moderate.svg +4 -0
  374. package/icons/PfIcons/severity-none.svg +4 -0
  375. package/icons/PfIcons/severity-undefined.svg +4 -0
  376. package/icons/PfIcons/spinner.svg +4 -0
  377. package/icons/PfIcons/spinner2.svg +4 -0
  378. package/icons/PfIcons/storage-domain.svg +4 -0
  379. package/icons/PfIcons/task.svg +4 -0
  380. package/icons/PfIcons/tenant.svg +4 -0
  381. package/icons/PfIcons/thumb-tack.svg +4 -0
  382. package/icons/PfIcons/topology.svg +4 -0
  383. package/icons/PfIcons/treeview.svg +4 -0
  384. package/icons/PfIcons/trend-down.svg +4 -0
  385. package/icons/PfIcons/trend-up.svg +4 -0
  386. package/icons/PfIcons/unknown.svg +4 -0
  387. package/icons/PfIcons/unlocked.svg +4 -0
  388. package/icons/PfIcons/unplugged.svg +4 -0
  389. package/icons/PfIcons/user.svg +4 -0
  390. package/icons/PfIcons/users.svg +4 -0
  391. package/icons/PfIcons/virtual-machine.svg +4 -0
  392. package/icons/PfIcons/volume.svg +4 -0
  393. package/icons/PfIcons/warning-triangle.svg +4 -0
  394. package/icons/PfIcons/zone.svg +4 -0
  395. package/layouts/Flex/flex.scss +83 -19
  396. package/layouts/Gallery/gallery.css +6 -2
  397. package/layouts/_index.css +6 -2
  398. package/package.json +55 -17
  399. package/patternfly-base-no-globals.css +969 -489
  400. package/patternfly-base.css +976 -489
  401. package/patternfly-charts.css +3 -3
  402. package/patternfly-no-globals.css +3623 -1194
  403. package/patternfly.css +3630 -1194
  404. package/patternfly.min.css +1 -1
  405. package/patternfly.min.css.map +1 -1
  406. package/patternfly.scss +48 -0
  407. package/sass-utilities/functions.scss +32 -25
  408. package/sass-utilities/mixins.scss +54 -23
  409. package/sass-utilities/namespaces-components.scss +6 -0
  410. package/sass-utilities/scss-variables.scss +3 -0
package/docs/components/EmptyState/examples/EmptyState.md CHANGED
@@ -11,7 +11,19 @@ cssPrefix: pf-v6-c-empty-state
11
11
  <div class="pf-v6-c-empty-state__content">
12
12
  <div class="pf-v6-c-empty-state__header">
13
13
  <div class="pf-v6-c-empty-state__icon">
14
- <i class="fas fa-cubes" aria-hidden="true"></i>
14
+ <svg
15
+ class="pf-v6-svg"
16
+ viewBox="0 0 512 512"
17
+ fill="currentColor"
18
+ aria-hidden="true"
19
+ role="img"
20
+ width="1em"
21
+ height="1em"
22
+ >
23
+ <path
24
+ d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z"
25
+ />
26
+ </svg>
15
27
  </div>
16
28
  <div class="pf-v6-c-empty-state__title">
17
29
  <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
@@ -61,7 +73,19 @@ cssPrefix: pf-v6-c-empty-state
61
73
  <div class="pf-v6-c-empty-state__content">
62
74
  <div class="pf-v6-c-empty-state__header">
63
75
  <div class="pf-v6-c-empty-state__icon">
64
- <i class="fas fa-cubes" aria-hidden="true"></i>
76
+ <svg
77
+ class="pf-v6-svg"
78
+ viewBox="0 0 512 512"
79
+ fill="currentColor"
80
+ aria-hidden="true"
81
+ role="img"
82
+ width="1em"
83
+ height="1em"
84
+ >
85
+ <path
86
+ d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z"
87
+ />
88
+ </svg>
65
89
  </div>
66
90
  <div class="pf-v6-c-empty-state__title">
67
91
  <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
@@ -106,7 +130,19 @@ cssPrefix: pf-v6-c-empty-state
106
130
  <div class="pf-v6-c-empty-state__content">
107
131
  <div class="pf-v6-c-empty-state__header">
108
132
  <div class="pf-v6-c-empty-state__icon">
109
- <i class="fas fa-cubes" aria-hidden="true"></i>
133
+ <svg
134
+ class="pf-v6-svg"
135
+ viewBox="0 0 512 512"
136
+ fill="currentColor"
137
+ aria-hidden="true"
138
+ role="img"
139
+ width="1em"
140
+ height="1em"
141
+ >
142
+ <path
143
+ d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z"
144
+ />
145
+ </svg>
110
146
  </div>
111
147
  <div class="pf-v6-c-empty-state__title">
112
148
  <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
@@ -157,7 +193,19 @@ cssPrefix: pf-v6-c-empty-state
157
193
  <div class="pf-v6-c-empty-state__content">
158
194
  <div class="pf-v6-c-empty-state__header">
159
195
  <div class="pf-v6-c-empty-state__icon">
160
- <i class="fas fa-cubes" aria-hidden="true"></i>
196
+ <svg
197
+ class="pf-v6-svg"
198
+ viewBox="0 0 512 512"
199
+ fill="currentColor"
200
+ aria-hidden="true"
201
+ role="img"
202
+ width="1em"
203
+ height="1em"
204
+ >
205
+ <path
206
+ d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z"
207
+ />
208
+ </svg>
161
209
  </div>
162
210
  <div class="pf-v6-c-empty-state__title">
163
211
  <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
@@ -207,7 +255,19 @@ cssPrefix: pf-v6-c-empty-state
207
255
  <div class="pf-v6-c-empty-state__content">
208
256
  <div class="pf-v6-c-empty-state__header">
209
257
  <div class="pf-v6-c-empty-state__icon">
210
- <i class="fas fa-cubes" aria-hidden="true"></i>
258
+ <svg
259
+ class="pf-v6-svg"
260
+ viewBox="0 0 512 512"
261
+ fill="currentColor"
262
+ aria-hidden="true"
263
+ role="img"
264
+ width="1em"
265
+ height="1em"
266
+ >
267
+ <path
268
+ d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z"
269
+ />
270
+ </svg>
211
271
  </div>
212
272
  <div class="pf-v6-c-empty-state__title">
213
273
  <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
@@ -256,7 +316,19 @@ cssPrefix: pf-v6-c-empty-state
256
316
  <div class="pf-v6-c-empty-state__content">
257
317
  <div class="pf-v6-c-empty-state__header">
258
318
  <div class="pf-v6-c-empty-state__icon">
259
- <i class="fas fa- fa-check-circle" aria-hidden="true"></i>
319
+ <svg
320
+ class="pf-v6-svg"
321
+ viewBox="0 0 512 512"
322
+ fill="currentColor"
323
+ aria-hidden="true"
324
+ role="img"
325
+ width="1em"
326
+ height="1em"
327
+ >
328
+ <path
329
+ d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
330
+ />
331
+ </svg>
260
332
  </div>
261
333
  <div class="pf-v6-c-empty-state__title">
262
334
  <h4 class="pf-v6-c-empty-state__title-text">You're all set</h4>
package/docs/components/ExpandableSection/examples/ExpandableSection.md CHANGED
@@ -18,7 +18,19 @@ cssPrefix: pf-v6-c-expandable-section
18
18
  >
19
19
  <span class="pf-v6-c-button__icon pf-m-start">
20
20
  <span class="pf-v6-c-expandable-section__toggle-icon">
21
- <i class="fas fa-angle-right" aria-hidden="true"></i>
21
+ <svg
22
+ class="pf-v6-svg"
23
+ viewBox="0 0 20 20"
24
+ fill="currentColor"
25
+ aria-hidden="true"
26
+ role="img"
27
+ width="1em"
28
+ height="1em"
29
+ >
30
+ <path
31
+ 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"
32
+ />
33
+ </svg>
22
34
  </span>
23
35
  </span>
24
36
  <span class="pf-v6-c-button__text">Show more hidden example content</span>
@@ -49,7 +61,19 @@ cssPrefix: pf-v6-c-expandable-section
49
61
  >
50
62
  <span class="pf-v6-c-button__icon pf-m-start">
51
63
  <span class="pf-v6-c-expandable-section__toggle-icon">
52
- <i class="fas fa-angle-right" aria-hidden="true"></i>
64
+ <svg
65
+ class="pf-v6-svg"
66
+ viewBox="0 0 20 20"
67
+ fill="currentColor"
68
+ aria-hidden="true"
69
+ role="img"
70
+ width="1em"
71
+ height="1em"
72
+ >
73
+ <path
74
+ 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"
75
+ />
76
+ </svg>
53
77
  </span>
54
78
  </span>
55
79
  <span class="pf-v6-c-button__text">Show less expanded example content</span>
@@ -79,7 +103,19 @@ cssPrefix: pf-v6-c-expandable-section
79
103
  >
80
104
  <span class="pf-v6-c-button__icon pf-m-start">
81
105
  <span class="pf-v6-c-expandable-section__toggle-icon">
82
- <i class="fas fa-angle-right" aria-hidden="true"></i>
106
+ <svg
107
+ class="pf-v6-svg"
108
+ viewBox="0 0 20 20"
109
+ fill="currentColor"
110
+ aria-hidden="true"
111
+ role="img"
112
+ width="1em"
113
+ height="1em"
114
+ >
115
+ <path
116
+ 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"
117
+ />
118
+ </svg>
83
119
  </span>
84
120
  </span>
85
121
  <span class="pf-v6-c-button__text">Show less indented example content</span>
@@ -109,7 +145,19 @@ cssPrefix: pf-v6-c-expandable-section
109
145
  >
110
146
  <span class="pf-v6-c-button__icon pf-m-start">
111
147
  <span class="pf-v6-c-expandable-section__toggle-icon">
112
- <i class="fas fa-angle-right" aria-hidden="true"></i>
148
+ <svg
149
+ class="pf-v6-svg"
150
+ viewBox="0 0 20 20"
151
+ fill="currentColor"
152
+ aria-hidden="true"
153
+ role="img"
154
+ width="1em"
155
+ height="1em"
156
+ >
157
+ <path
158
+ 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"
159
+ />
160
+ </svg>
113
161
  </span>
114
162
  </span>
115
163
  <span
@@ -144,7 +192,19 @@ cssPrefix: pf-v6-c-expandable-section
144
192
  >
145
193
  <span class="pf-v6-c-button__icon pf-m-start">
146
194
  <span class="pf-v6-c-expandable-section__toggle-icon">
147
- <i class="fas fa-angle-right" aria-hidden="true"></i>
195
+ <svg
196
+ class="pf-v6-svg"
197
+ viewBox="0 0 20 20"
198
+ fill="currentColor"
199
+ aria-hidden="true"
200
+ role="img"
201
+ width="1em"
202
+ height="1em"
203
+ >
204
+ <path
205
+ 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"
206
+ />
207
+ </svg>
148
208
  </span>
149
209
  </span>
150
210
  <span
@@ -178,7 +238,19 @@ cssPrefix: pf-v6-c-expandable-section
178
238
  >
179
239
  <span class="pf-v6-c-button__icon pf-m-start">
180
240
  <span class="pf-v6-c-expandable-section__toggle-icon">
181
- <i class="fas fa-angle-right" aria-hidden="true"></i>
241
+ <svg
242
+ class="pf-v6-svg"
243
+ viewBox="0 0 20 20"
244
+ fill="currentColor"
245
+ aria-hidden="true"
246
+ role="img"
247
+ width="1em"
248
+ height="1em"
249
+ >
250
+ <path
251
+ 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"
252
+ />
253
+ </svg>
182
254
  </span>
183
255
  </span>
184
256
  <span
@@ -227,7 +299,19 @@ cssPrefix: pf-v6-c-expandable-section
227
299
  >
228
300
  <span class="pf-v6-c-button__icon pf-m-start">
229
301
  <span class="pf-v6-c-expandable-section__toggle-icon">
230
- <i class="fas fa-angle-right" aria-hidden="true"></i>
302
+ <svg
303
+ class="pf-v6-svg"
304
+ viewBox="0 0 20 20"
305
+ fill="currentColor"
306
+ aria-hidden="true"
307
+ role="img"
308
+ width="1em"
309
+ height="1em"
310
+ >
311
+ <path
312
+ 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"
313
+ />
314
+ </svg>
231
315
  </span>
232
316
  </span>
233
317
  <span class="pf-v6-c-button__text">Show less detached example content</span>
package/docs/components/Form/examples/Form.md CHANGED
@@ -803,7 +803,19 @@ cssPrefix: pf-v6-c-form
803
803
  >
804
804
  <span class="pf-v6-c-button__icon">
805
805
  <span class="pf-v6-c-form__field-group-toggle-icon">
806
- <i class="fas fa-angle-right" aria-hidden="true"></i>
806
+ <svg
807
+ class="pf-v6-svg"
808
+ viewBox="0 0 20 20"
809
+ fill="currentColor"
810
+ aria-hidden="true"
811
+ role="img"
812
+ width="1em"
813
+ height="1em"
814
+ >
815
+ <path
816
+ 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"
817
+ />
818
+ </svg>
807
819
  </span>
808
820
  </span>
809
821
  </button>
@@ -845,7 +857,19 @@ cssPrefix: pf-v6-c-form
845
857
  >
846
858
  <span class="pf-v6-c-button__icon">
847
859
  <span class="pf-v6-c-form__field-group-toggle-icon">
848
- <i class="fas fa-angle-right" aria-hidden="true"></i>
860
+ <svg
861
+ class="pf-v6-svg"
862
+ viewBox="0 0 20 20"
863
+ fill="currentColor"
864
+ aria-hidden="true"
865
+ role="img"
866
+ width="1em"
867
+ height="1em"
868
+ >
869
+ <path
870
+ 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"
871
+ />
872
+ </svg>
849
873
  </span>
850
874
  </span>
851
875
  </button>
@@ -980,7 +1004,19 @@ cssPrefix: pf-v6-c-form
980
1004
  >
981
1005
  <span class="pf-v6-c-button__icon">
982
1006
  <span class="pf-v6-c-form__field-group-toggle-icon">
983
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1007
+ <svg
1008
+ class="pf-v6-svg"
1009
+ viewBox="0 0 20 20"
1010
+ fill="currentColor"
1011
+ aria-hidden="true"
1012
+ role="img"
1013
+ width="1em"
1014
+ height="1em"
1015
+ >
1016
+ <path
1017
+ 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"
1018
+ />
1019
+ </svg>
984
1020
  </span>
985
1021
  </span>
986
1022
  </button>
@@ -1112,7 +1148,19 @@ cssPrefix: pf-v6-c-form
1112
1148
  >
1113
1149
  <span class="pf-v6-c-button__icon">
1114
1150
  <span class="pf-v6-c-form__field-group-toggle-icon">
1115
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1151
+ <svg
1152
+ class="pf-v6-svg"
1153
+ viewBox="0 0 20 20"
1154
+ fill="currentColor"
1155
+ aria-hidden="true"
1156
+ role="img"
1157
+ width="1em"
1158
+ height="1em"
1159
+ >
1160
+ <path
1161
+ 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"
1162
+ />
1163
+ </svg>
1116
1164
  </span>
1117
1165
  </span>
1118
1166
  </button>
@@ -1287,7 +1335,19 @@ cssPrefix: pf-v6-c-form
1287
1335
  >
1288
1336
  <span class="pf-v6-c-button__icon">
1289
1337
  <span class="pf-v6-c-form__field-group-toggle-icon">
1290
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1338
+ <svg
1339
+ class="pf-v6-svg"
1340
+ viewBox="0 0 20 20"
1341
+ fill="currentColor"
1342
+ aria-hidden="true"
1343
+ role="img"
1344
+ width="1em"
1345
+ height="1em"
1346
+ >
1347
+ <path
1348
+ 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"
1349
+ />
1350
+ </svg>
1291
1351
  </span>
1292
1352
  </span>
1293
1353
  </button>
@@ -1519,7 +1579,19 @@ cssPrefix: pf-v6-c-form
1519
1579
  >
1520
1580
  <span class="pf-v6-c-button__icon">
1521
1581
  <span class="pf-v6-c-form__field-group-toggle-icon">
1522
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1582
+ <svg
1583
+ class="pf-v6-svg"
1584
+ viewBox="0 0 20 20"
1585
+ fill="currentColor"
1586
+ aria-hidden="true"
1587
+ role="img"
1588
+ width="1em"
1589
+ height="1em"
1590
+ >
1591
+ <path
1592
+ 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"
1593
+ />
1594
+ </svg>
1523
1595
  </span>
1524
1596
  </span>
1525
1597
  </button>
package/docs/components/Hero/examples/Hero.md ADDED
@@ -0,0 +1,25 @@
1
+ ---
2
+ id: 'Hero'
3
+ beta: true
4
+ section: components
5
+ cssPrefix: pf-v6-c-hero
6
+ ---## Examples
7
+
8
+ ### Basic
9
+
10
+ ```html isBeta
11
+ <div class="pf-v6-c-hero">
12
+ <div class="pf-v6-c-hero__body">Basic hero content</div>
13
+ </div>
14
+
15
+ ```
16
+
17
+ ## Documentation
18
+
19
+ ### Usage
20
+
21
+ | Class | Applied to | Outcome |
22
+ | -- | -- | -- |
23
+ | `.pf-v6-c-hero` | `<div>` | Initiates the hero. **Required** |
24
+ | `.pf-v6-c-hero__body` | `<div>` | Initiates the hero body. |
25
+ | `.pf-m-no-glass` | `.pf-v6-c-hero` | Modifies the hero to remove glass styling when using glass theme. |
package/docs/components/Hint/examples/Hint.md CHANGED
@@ -17,7 +17,19 @@ cssPrefix: pf-v6-c-hint
17
17
  id="hint-with-title-example-hint"
18
18
  >
19
19
  <span class="pf-v6-c-menu-toggle__icon">
20
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
20
+ <svg
21
+ class="pf-v6-svg"
22
+ viewBox="0 0 32 32"
23
+ fill="currentColor"
24
+ aria-hidden="true"
25
+ role="img"
26
+ width="1em"
27
+ height="1em"
28
+ >
29
+ <path
30
+ 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"
31
+ />
32
+ </svg>
21
33
  </span>
22
34
  </button>
23
35
  </div>
@@ -39,7 +51,19 @@ cssPrefix: pf-v6-c-hint
39
51
  id="hint-with-title-and-actions-example-hint"
40
52
  >
41
53
  <span class="pf-v6-c-menu-toggle__icon">
42
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
54
+ <svg
55
+ class="pf-v6-svg"
56
+ viewBox="0 0 32 32"
57
+ fill="currentColor"
58
+ aria-hidden="true"
59
+ role="img"
60
+ width="1em"
61
+ height="1em"
62
+ >
63
+ <path
64
+ 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"
65
+ />
66
+ </svg>
43
67
  </span>
44
68
  </button>
45
69
  </div>
@@ -78,7 +102,19 @@ cssPrefix: pf-v6-c-hint
78
102
  id="hint-with-no-title-example-hint"
79
103
  >
80
104
  <span class="pf-v6-c-menu-toggle__icon">
81
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
105
+ <svg
106
+ class="pf-v6-svg"
107
+ viewBox="0 0 32 32"
108
+ fill="currentColor"
109
+ aria-hidden="true"
110
+ role="img"
111
+ width="1em"
112
+ height="1em"
113
+ >
114
+ <path
115
+ 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"
116
+ />
117
+ </svg>
82
118
  </span>
83
119
  </button>
84
120
  </div>
package/docs/components/Icon/examples/Icon.md CHANGED
@@ -15,19 +15,55 @@ cssPrefix: pf-v6-c-icon
15
15
 
16
16
  <span class="pf-v6-c-icon">
17
17
  <span class="pf-v6-c-icon__content">
18
- <i class="fas fa-angle-right" aria-hidden="true"></i>
18
+ <svg
19
+ class="pf-v6-svg"
20
+ viewBox="0 0 20 20"
21
+ fill="currentColor"
22
+ aria-hidden="true"
23
+ role="img"
24
+ width="1em"
25
+ height="1em"
26
+ >
27
+ <path
28
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
29
+ />
30
+ </svg>
19
31
  </span>
20
32
  </span>
21
33
 
22
34
  <span class="pf-v6-c-icon">
23
35
  <span class="pf-v6-c-icon__content">
24
- <i class="fas fa-angle-down" aria-hidden="true"></i>
36
+ <svg
37
+ class="pf-v6-svg"
38
+ viewBox="0 0 20 20"
39
+ fill="currentColor"
40
+ aria-hidden="true"
41
+ role="img"
42
+ width="1em"
43
+ height="1em"
44
+ >
45
+ <path
46
+ 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"
47
+ />
48
+ </svg>
25
49
  </span>
26
50
  </span>
27
51
 
28
52
  <span class="pf-v6-c-icon">
29
53
  <span class="pf-v6-c-icon__content">
30
- <i class="fas fa-cog" aria-hidden="true"></i>
54
+ <svg
55
+ class="pf-v6-svg"
56
+ viewBox="0 0 32 32"
57
+ fill="currentColor"
58
+ aria-hidden="true"
59
+ role="img"
60
+ width="1em"
61
+ height="1em"
62
+ >
63
+ <path
64
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
65
+ />
66
+ </svg>
31
67
  </span>
32
68
  </span>
33
69
 
@@ -131,27 +167,87 @@ cssPrefix: pf-v6-c-icon
131
167
  ```html
132
168
  <span class="pf-v6-c-icon">
133
169
  <span class="pf-v6-c-icon__content pf-m-danger">
134
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
170
+ <svg
171
+ class="pf-v6-svg"
172
+ viewBox="0 0 32 32"
173
+ fill="currentColor"
174
+ aria-hidden="true"
175
+ role="img"
176
+ width="1em"
177
+ height="1em"
178
+ >
179
+ <path
180
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
181
+ />
182
+ </svg>
135
183
  </span>
136
184
  </span>
137
185
  <span class="pf-v6-c-icon">
138
186
  <span class="pf-v6-c-icon__content pf-m-warning">
139
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
187
+ <svg
188
+ class="pf-v6-svg"
189
+ viewBox="0 0 32 32"
190
+ fill="currentColor"
191
+ aria-hidden="true"
192
+ role="img"
193
+ width="1em"
194
+ height="1em"
195
+ >
196
+ <path
197
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
198
+ />
199
+ </svg>
140
200
  </span>
141
201
  </span>
142
202
  <span class="pf-v6-c-icon">
143
203
  <span class="pf-v6-c-icon__content pf-m-success">
144
- <i class="fas fa-check-circle" aria-hidden="true"></i>
204
+ <svg
205
+ class="pf-v6-svg"
206
+ viewBox="0 0 32 32"
207
+ fill="currentColor"
208
+ aria-hidden="true"
209
+ role="img"
210
+ width="1em"
211
+ height="1em"
212
+ >
213
+ <path
214
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
215
+ />
216
+ </svg>
145
217
  </span>
146
218
  </span>
147
219
  <span class="pf-v6-c-icon">
148
220
  <span class="pf-v6-c-icon__content pf-m-info">
149
- <i class="fas fa-info-circle" aria-hidden="true"></i>
221
+ <svg
222
+ class="pf-v6-svg"
223
+ viewBox="0 0 32 32"
224
+ fill="currentColor"
225
+ aria-hidden="true"
226
+ role="img"
227
+ width="1em"
228
+ height="1em"
229
+ >
230
+ <path
231
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
232
+ />
233
+ </svg>
150
234
  </span>
151
235
  </span>
152
236
  <span class="pf-v6-c-icon">
153
237
  <span class="pf-v6-c-icon__content pf-m-custom">
154
- <i class="fas fa-bell" aria-hidden="true"></i>
238
+ <svg
239
+ class="pf-v6-svg"
240
+ viewBox="0 0 32 32"
241
+ fill="currentColor"
242
+ aria-hidden="true"
243
+ role="img"
244
+ width="1em"
245
+ height="1em"
246
+ >
247
+ <path
248
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
249
+ />
250
+ </svg>
155
251
  </span>
156
252
  </span>
157
253
 
@@ -295,7 +391,7 @@ extra large
295
391
 
296
392
  The icon element is a container used to maintain a stable space for an icon or spinner, regardless of size or aspect ratio of the contents.
297
393
 
298
- Refer to the [icons](/design-foundations/icons) page for information about the PatternFly icon set and guidelines for use.
394
+ Refer to the [icons](/foundations-and-styles/iconography) page for information about the PatternFly icon set and guidelines for use.
299
395
 
300
396
  ### Usage
301
397