@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/ClipboardCopy/examples/ClipboardCopy.md CHANGED
@@ -24,13 +24,25 @@ cssPrefix: pf-v6-c-clipboard-copy
24
24
  aria-label="Copy to clipboard basic editable example"
25
25
  >
26
26
  <span class="pf-v6-c-button__icon">
27
- <i class="fas fa-copy" aria-hidden="true"></i>
27
+ <svg
28
+ class="pf-v6-svg"
29
+ viewBox="0 0 32 32"
30
+ fill="currentColor"
31
+ aria-hidden="true"
32
+ role="img"
33
+ width="1em"
34
+ height="1em"
35
+ >
36
+ <path
37
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
38
+ />
39
+ </svg>
28
40
  </span>
29
41
  </button>
30
42
  </div>
31
43
  </div>
32
44
  <br />
33
- <div class="pf-v6-c-clipboard-copy">
45
+ <div class="pf-v6-c-clipboard-copy pf-m-readonly">
34
46
  <div class="pf-v6-c-clipboard-copy__group">
35
47
  <span class="pf-v6-c-form-control pf-m-readonly">
36
48
  <input
@@ -48,7 +60,19 @@ cssPrefix: pf-v6-c-clipboard-copy
48
60
  aria-label="Copy to clipboard basic read-only example"
49
61
  >
50
62
  <span class="pf-v6-c-button__icon">
51
- <i class="fas fa-copy" aria-hidden="true"></i>
63
+ <svg
64
+ class="pf-v6-svg"
65
+ viewBox="0 0 32 32"
66
+ fill="currentColor"
67
+ aria-hidden="true"
68
+ role="img"
69
+ width="1em"
70
+ height="1em"
71
+ >
72
+ <path
73
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
74
+ />
75
+ </svg>
52
76
  </span>
53
77
  </button>
54
78
  </div>
@@ -72,7 +96,19 @@ cssPrefix: pf-v6-c-clipboard-copy
72
96
  >
73
97
  <span class="pf-v6-c-button__icon">
74
98
  <div class="pf-v6-c-clipboard-copy__toggle-icon">
75
- <i class="fas fa-angle-right" aria-hidden="true"></i>
99
+ <svg
100
+ class="pf-v6-svg"
101
+ viewBox="0 0 20 20"
102
+ fill="currentColor"
103
+ aria-hidden="true"
104
+ role="img"
105
+ width="1em"
106
+ height="1em"
107
+ >
108
+ <path
109
+ 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"
110
+ />
111
+ </svg>
76
112
  </div>
77
113
  </span>
78
114
  </button>
@@ -91,7 +127,19 @@ cssPrefix: pf-v6-c-clipboard-copy
91
127
  id="expandable-not-expanded-editable-copy-button"
92
128
  >
93
129
  <span class="pf-v6-c-button__icon">
94
- <i class="fas fa-copy" aria-hidden="true"></i>
130
+ <svg
131
+ class="pf-v6-svg"
132
+ viewBox="0 0 32 32"
133
+ fill="currentColor"
134
+ aria-hidden="true"
135
+ role="img"
136
+ width="1em"
137
+ height="1em"
138
+ >
139
+ <path
140
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
141
+ />
142
+ </svg>
95
143
  </span>
96
144
  </button>
97
145
  </div>
@@ -114,7 +162,19 @@ cssPrefix: pf-v6-c-clipboard-copy
114
162
  >
115
163
  <span class="pf-v6-c-button__icon">
116
164
  <div class="pf-v6-c-clipboard-copy__toggle-icon">
117
- <i class="fas fa-angle-right" aria-hidden="true"></i>
165
+ <svg
166
+ class="pf-v6-svg"
167
+ viewBox="0 0 20 20"
168
+ fill="currentColor"
169
+ aria-hidden="true"
170
+ role="img"
171
+ width="1em"
172
+ height="1em"
173
+ >
174
+ <path
175
+ 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"
176
+ />
177
+ </svg>
118
178
  </div>
119
179
  </span>
120
180
  </button>
@@ -134,7 +194,19 @@ cssPrefix: pf-v6-c-clipboard-copy
134
194
  id="expandable-expanded-editable-copy-button"
135
195
  >
136
196
  <span class="pf-v6-c-button__icon">
137
- <i class="fas fa-copy" aria-hidden="true"></i>
197
+ <svg
198
+ class="pf-v6-svg"
199
+ viewBox="0 0 32 32"
200
+ fill="currentColor"
201
+ aria-hidden="true"
202
+ role="img"
203
+ width="1em"
204
+ height="1em"
205
+ >
206
+ <path
207
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
208
+ />
209
+ </svg>
138
210
  </span>
139
211
  </button>
140
212
  </div>
@@ -146,7 +218,7 @@ cssPrefix: pf-v6-c-clipboard-copy
146
218
  </div>
147
219
  <br />
148
220
  <h4>Read-only</h4>
149
- <div class="pf-v6-c-clipboard-copy">
221
+ <div class="pf-v6-c-clipboard-copy pf-m-readonly">
150
222
  <div class="pf-v6-c-clipboard-copy__group">
151
223
  <button
152
224
  class="pf-v6-c-button pf-m-control"
@@ -158,7 +230,19 @@ cssPrefix: pf-v6-c-clipboard-copy
158
230
  >
159
231
  <span class="pf-v6-c-button__icon">
160
232
  <div class="pf-v6-c-clipboard-copy__toggle-icon">
161
- <i class="fas fa-angle-right" aria-hidden="true"></i>
233
+ <svg
234
+ class="pf-v6-svg"
235
+ viewBox="0 0 20 20"
236
+ fill="currentColor"
237
+ aria-hidden="true"
238
+ role="img"
239
+ width="1em"
240
+ height="1em"
241
+ >
242
+ <path
243
+ 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"
244
+ />
245
+ </svg>
162
246
  </div>
163
247
  </span>
164
248
  </button>
@@ -166,7 +250,7 @@ cssPrefix: pf-v6-c-clipboard-copy
166
250
  <input
167
251
  readonly
168
252
  type="text"
169
- value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
253
+ value="This is a read-only version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
170
254
  id="expandable-not-expanded-readonly-text-input"
171
255
  aria-label="Copyable input"
172
256
  />
@@ -178,7 +262,19 @@ cssPrefix: pf-v6-c-clipboard-copy
178
262
  id="expandable-not-expanded-readonly-copy-button"
179
263
  >
180
264
  <span class="pf-v6-c-button__icon">
181
- <i class="fas fa-copy" aria-hidden="true"></i>
265
+ <svg
266
+ class="pf-v6-svg"
267
+ viewBox="0 0 32 32"
268
+ fill="currentColor"
269
+ aria-hidden="true"
270
+ role="img"
271
+ width="1em"
272
+ height="1em"
273
+ >
274
+ <path
275
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
276
+ />
277
+ </svg>
182
278
  </span>
183
279
  </button>
184
280
  </div>
@@ -189,7 +285,7 @@ cssPrefix: pf-v6-c-clipboard-copy
189
285
  >This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div>
190
286
  </div>
191
287
  <br />
192
- <div class="pf-v6-c-clipboard-copy pf-m-expanded">
288
+ <div class="pf-v6-c-clipboard-copy pf-m-expanded pf-m-readonly">
193
289
  <div class="pf-v6-c-clipboard-copy__group">
194
290
  <button
195
291
  class="pf-v6-c-button pf-m-control"
@@ -201,7 +297,19 @@ cssPrefix: pf-v6-c-clipboard-copy
201
297
  >
202
298
  <span class="pf-v6-c-button__icon">
203
299
  <div class="pf-v6-c-clipboard-copy__toggle-icon">
204
- <i class="fas fa-angle-right" aria-hidden="true"></i>
300
+ <svg
301
+ class="pf-v6-svg"
302
+ viewBox="0 0 20 20"
303
+ fill="currentColor"
304
+ aria-hidden="true"
305
+ role="img"
306
+ width="1em"
307
+ height="1em"
308
+ >
309
+ <path
310
+ 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"
311
+ />
312
+ </svg>
205
313
  </div>
206
314
  </span>
207
315
  </button>
@@ -209,7 +317,7 @@ cssPrefix: pf-v6-c-clipboard-copy
209
317
  <input
210
318
  readonly
211
319
  type="text"
212
- value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
320
+ value="This is a read-only version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion."
213
321
  id="expandable-expanded-readonly-text-input"
214
322
  aria-label="Copyable input"
215
323
  />
@@ -221,14 +329,26 @@ cssPrefix: pf-v6-c-clipboard-copy
221
329
  id="expandable-expanded-readonly-copy-button"
222
330
  >
223
331
  <span class="pf-v6-c-button__icon">
224
- <i class="fas fa-copy" aria-hidden="true"></i>
332
+ <svg
333
+ class="pf-v6-svg"
334
+ viewBox="0 0 32 32"
335
+ fill="currentColor"
336
+ aria-hidden="true"
337
+ role="img"
338
+ width="1em"
339
+ height="1em"
340
+ >
341
+ <path
342
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
343
+ />
344
+ </svg>
225
345
  </span>
226
346
  </button>
227
347
  </div>
228
348
  <div
229
349
  class="pf-v6-c-clipboard-copy__expandable-content"
230
350
  id="expandable-expanded-readonly-content"
231
- >This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div>
351
+ >This is a read-only version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div>
232
352
  </div>
233
353
  <br />
234
354
  <h4>Code</h4>
@@ -244,7 +364,19 @@ cssPrefix: pf-v6-c-clipboard-copy
244
364
  >
245
365
  <span class="pf-v6-c-button__icon">
246
366
  <div class="pf-v6-c-clipboard-copy__toggle-icon">
247
- <i class="fas fa-angle-right" aria-hidden="true"></i>
367
+ <svg
368
+ class="pf-v6-svg"
369
+ viewBox="0 0 20 20"
370
+ fill="currentColor"
371
+ aria-hidden="true"
372
+ role="img"
373
+ width="1em"
374
+ height="1em"
375
+ >
376
+ <path
377
+ 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"
378
+ />
379
+ </svg>
248
380
  </div>
249
381
  </span>
250
382
  </button>
@@ -264,7 +396,19 @@ cssPrefix: pf-v6-c-clipboard-copy
264
396
  id="expandable-not-expanded-code-copy-button"
265
397
  >
266
398
  <span class="pf-v6-c-button__icon">
267
- <i class="fas fa-copy" aria-hidden="true"></i>
399
+ <svg
400
+ class="pf-v6-svg"
401
+ viewBox="0 0 32 32"
402
+ fill="currentColor"
403
+ aria-hidden="true"
404
+ role="img"
405
+ width="1em"
406
+ height="1em"
407
+ >
408
+ <path
409
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
410
+ />
411
+ </svg>
268
412
  </span>
269
413
  </button>
270
414
  </div>
@@ -300,7 +444,19 @@ cssPrefix: pf-v6-c-clipboard-copy
300
444
  >
301
445
  <span class="pf-v6-c-button__icon">
302
446
  <div class="pf-v6-c-clipboard-copy__toggle-icon">
303
- <i class="fas fa-angle-right" aria-hidden="true"></i>
447
+ <svg
448
+ class="pf-v6-svg"
449
+ viewBox="0 0 20 20"
450
+ fill="currentColor"
451
+ aria-hidden="true"
452
+ role="img"
453
+ width="1em"
454
+ height="1em"
455
+ >
456
+ <path
457
+ 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"
458
+ />
459
+ </svg>
304
460
  </div>
305
461
  </span>
306
462
  </button>
@@ -321,7 +477,19 @@ cssPrefix: pf-v6-c-clipboard-copy
321
477
  id="expandable-expanded-code-copy-button"
322
478
  >
323
479
  <span class="pf-v6-c-button__icon">
324
- <i class="fas fa-copy" aria-hidden="true"></i>
480
+ <svg
481
+ class="pf-v6-svg"
482
+ viewBox="0 0 32 32"
483
+ fill="currentColor"
484
+ aria-hidden="true"
485
+ role="img"
486
+ width="1em"
487
+ height="1em"
488
+ >
489
+ <path
490
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
491
+ />
492
+ </svg>
325
493
  </span>
326
494
  </button>
327
495
  </div>
@@ -360,7 +528,19 @@ cssPrefix: pf-v6-c-clipboard-copy
360
528
  aria-label="Copy to clipboard inline compact example"
361
529
  >
362
530
  <span class="pf-v6-c-button__icon">
363
- <i class="fas fa-copy" aria-hidden="true"></i>
531
+ <svg
532
+ class="pf-v6-svg"
533
+ viewBox="0 0 32 32"
534
+ fill="currentColor"
535
+ aria-hidden="true"
536
+ role="img"
537
+ width="1em"
538
+ height="1em"
539
+ >
540
+ <path
541
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
542
+ />
543
+ </svg>
364
544
  </span>
365
545
  </button>
366
546
  </span>
@@ -382,7 +562,19 @@ cssPrefix: pf-v6-c-clipboard-copy
382
562
  aria-label="Copy to clipboard inline compact code example"
383
563
  >
384
564
  <span class="pf-v6-c-button__icon">
385
- <i class="fas fa-copy" aria-hidden="true"></i>
565
+ <svg
566
+ class="pf-v6-svg"
567
+ viewBox="0 0 32 32"
568
+ fill="currentColor"
569
+ aria-hidden="true"
570
+ role="img"
571
+ width="1em"
572
+ height="1em"
573
+ >
574
+ <path
575
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
576
+ />
577
+ </svg>
386
578
  </span>
387
579
  </button>
388
580
  </span>
@@ -404,7 +596,19 @@ cssPrefix: pf-v6-c-clipboard-copy
404
596
  aria-label="Copy to clipboard inline compact with additional action example"
405
597
  >
406
598
  <span class="pf-v6-c-button__icon">
407
- <i class="fas fa-copy" aria-hidden="true"></i>
599
+ <svg
600
+ class="pf-v6-svg"
601
+ viewBox="0 0 32 32"
602
+ fill="currentColor"
603
+ aria-hidden="true"
604
+ role="img"
605
+ width="1em"
606
+ height="1em"
607
+ >
608
+ <path
609
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
610
+ />
611
+ </svg>
408
612
  </span>
409
613
  </button>
410
614
  </span>
@@ -415,7 +619,19 @@ cssPrefix: pf-v6-c-clipboard-copy
415
619
  aria-label="Run in web terminal"
416
620
  >
417
621
  <span class="pf-v6-c-button__icon">
418
- <i class="fas fa-copy" aria-hidden="true"></i>
622
+ <svg
623
+ class="pf-v6-svg"
624
+ viewBox="0 0 32 32"
625
+ fill="currentColor"
626
+ aria-hidden="true"
627
+ role="img"
628
+ width="1em"
629
+ height="1em"
630
+ >
631
+ <path
632
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
633
+ />
634
+ </svg>
419
635
  </span>
420
636
  </button>
421
637
  </span>
@@ -440,7 +656,19 @@ cssPrefix: pf-v6-c-clipboard-copy
440
656
  aria-label="Copy to clipboard basic inline compact example"
441
657
  >
442
658
  <span class="pf-v6-c-button__icon">
443
- <i class="fas fa-copy" aria-hidden="true"></i>
659
+ <svg
660
+ class="pf-v6-svg"
661
+ viewBox="0 0 32 32"
662
+ fill="currentColor"
663
+ aria-hidden="true"
664
+ role="img"
665
+ width="1em"
666
+ height="1em"
667
+ >
668
+ <path
669
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
670
+ />
671
+ </svg>
444
672
  </span>
445
673
  </button>
446
674
  </span>
@@ -465,7 +693,19 @@ cssPrefix: pf-v6-c-clipboard-copy
465
693
  aria-label="Copy to clipboard long inline compact example"
466
694
  >
467
695
  <span class="pf-v6-c-button__icon">
468
- <i class="fas fa-copy" aria-hidden="true"></i>
696
+ <svg
697
+ class="pf-v6-svg"
698
+ viewBox="0 0 32 32"
699
+ fill="currentColor"
700
+ aria-hidden="true"
701
+ role="img"
702
+ width="1em"
703
+ height="1em"
704
+ >
705
+ <path
706
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
707
+ />
708
+ </svg>
469
709
  </span>
470
710
  </button>
471
711
  </span>
@@ -489,7 +729,19 @@ cssPrefix: pf-v6-c-clipboard-copy
489
729
  aria-label="Copy to clipboard long block compact example"
490
730
  >
491
731
  <span class="pf-v6-c-button__icon">
492
- <i class="fas fa-copy" aria-hidden="true"></i>
732
+ <svg
733
+ class="pf-v6-svg"
734
+ viewBox="0 0 32 32"
735
+ fill="currentColor"
736
+ aria-hidden="true"
737
+ role="img"
738
+ width="1em"
739
+ height="1em"
740
+ >
741
+ <path
742
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
743
+ />
744
+ </svg>
493
745
  </span>
494
746
  </button>
495
747
  </span>
@@ -517,7 +769,19 @@ cssPrefix: pf-v6-c-clipboard-copy
517
769
  aria-label="Copy to clipboard inline compact with truncation example"
518
770
  >
519
771
  <span class="pf-v6-c-button__icon">
520
- <i class="fas fa-copy" aria-hidden="true"></i>
772
+ <svg
773
+ class="pf-v6-svg"
774
+ viewBox="0 0 32 32"
775
+ fill="currentColor"
776
+ aria-hidden="true"
777
+ role="img"
778
+ width="1em"
779
+ height="1em"
780
+ >
781
+ <path
782
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-5.25 17.5v-22c0-.689-.561-1.25-1.25-1.25h-8.375v7.364c0 .833-.678 1.511-1.512 1.511H4.25V24.5c0 .689.561 1.25 1.25 1.25h16c.689 0 1.25-.561 1.25-1.25ZM10.875 1.275a.738.738 0 0 0-.405.195l-6 6a.738.738 0 0 0-.195.405h6.6v-6.6Z"
783
+ />
784
+ </svg>
521
785
  </span>
522
786
  </button>
523
787
  </span>
@@ -554,5 +818,6 @@ cssPrefix: pf-v6-c-clipboard-copy
554
818
  | `.pf-m-block` | `.pf-v6-c-clipboard-copy.pf-m-inline` | Modifies the inline copy clipboard component to have block formatting. |
555
819
  | `.pf-m-truncate` | `.pf-v6-c-clipboard-copy.pf-m-truncate` | Modifies the inline copy clipboard component for use with text used in trucate component. |
556
820
  | `.pf-m-expanded` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for the expanded state. |
821
+ | `.pf-m-readonly` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for read-only styles. |
557
822
  | `.pf-m-expanded` | `.pf-v6-c-button.pf-m-control` | Modifies the control toggle button for the expanded state. |
558
823
  | `.pf-m-code` | `code.pf-v6-c-clipboard-copy__text` | Modifies the inline copy clipboard text styles for use with the `<code>` element. |
package/docs/components/CodeBlock/examples/CodeBlock.md CHANGED
@@ -17,7 +17,19 @@ cssPrefix: pf-v6-c-code-block
17
17
  aria-label="Copy to clipboard basic example code content"
18
18
  >
19
19
  <span class="pf-v6-c-button__icon">
20
- <i class="fas fa-copy" aria-hidden="true"></i>
20
+ <svg
21
+ class="pf-v6-svg"
22
+ viewBox="0 0 448 512"
23
+ fill="currentColor"
24
+ aria-hidden="true"
25
+ role="img"
26
+ width="1em"
27
+ height="1em"
28
+ >
29
+ <path
30
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
31
+ />
32
+ </svg>
21
33
  </span>
22
34
  </button>
23
35
  </div>
@@ -28,7 +40,19 @@ cssPrefix: pf-v6-c-code-block
28
40
  aria-label="Run basic example code in Web Terminal"
29
41
  >
30
42
  <span class="pf-v6-c-button__icon">
31
- <i class="fas fa-play" aria-hidden="true"></i>
43
+ <svg
44
+ class="pf-v6-svg"
45
+ viewBox="0 0 448 512"
46
+ fill="currentColor"
47
+ aria-hidden="true"
48
+ role="img"
49
+ width="1em"
50
+ height="1em"
51
+ >
52
+ <path
53
+ d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"
54
+ />
55
+ </svg>
32
56
  </span>
33
57
  </button>
34
58
  </div>
@@ -61,7 +85,19 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
61
85
  aria-label="Copy to clipboard expandable example code content"
62
86
  >
63
87
  <span class="pf-v6-c-button__icon">
64
- <i class="fas fa-copy" aria-hidden="true"></i>
88
+ <svg
89
+ class="pf-v6-svg"
90
+ viewBox="0 0 448 512"
91
+ fill="currentColor"
92
+ aria-hidden="true"
93
+ role="img"
94
+ width="1em"
95
+ height="1em"
96
+ >
97
+ <path
98
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
99
+ />
100
+ </svg>
65
101
  </span>
66
102
  </button>
67
103
  </div>
@@ -72,7 +108,19 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
72
108
  aria-label="Run expandable example code in Web Terminal"
73
109
  >
74
110
  <span class="pf-v6-c-button__icon">
75
- <i class="fas fa-play" aria-hidden="true"></i>
111
+ <svg
112
+ class="pf-v6-svg"
113
+ viewBox="0 0 448 512"
114
+ fill="currentColor"
115
+ aria-hidden="true"
116
+ role="img"
117
+ width="1em"
118
+ height="1em"
119
+ >
120
+ <path
121
+ d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"
122
+ />
123
+ </svg>
76
124
  </span>
77
125
  </button>
78
126
  </div>
@@ -110,7 +158,19 @@ name: azure-sample-repo<div
110
158
  <span
111
159
  class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top"
112
160
  >
113
- <i class="fas fa-angle-right" aria-hidden="true"></i>
161
+ <svg
162
+ class="pf-v6-svg"
163
+ viewBox="0 0 20 20"
164
+ fill="currentColor"
165
+ aria-hidden="true"
166
+ role="img"
167
+ width="1em"
168
+ height="1em"
169
+ >
170
+ <path
171
+ 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"
172
+ />
173
+ </svg>
114
174
  </span>
115
175
  </span>
116
176
  <span class="pf-v6-c-button__text">Show more</span>
@@ -135,7 +195,19 @@ name: azure-sample-repo<div
135
195
  aria-label="Copy to clipboard expandable expanded example code content"
136
196
  >
137
197
  <span class="pf-v6-c-button__icon">
138
- <i class="fas fa-copy" aria-hidden="true"></i>
198
+ <svg
199
+ class="pf-v6-svg"
200
+ viewBox="0 0 448 512"
201
+ fill="currentColor"
202
+ aria-hidden="true"
203
+ role="img"
204
+ width="1em"
205
+ height="1em"
206
+ >
207
+ <path
208
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
209
+ />
210
+ </svg>
139
211
  </span>
140
212
  </button>
141
213
  </div>
@@ -146,7 +218,19 @@ name: azure-sample-repo<div
146
218
  aria-label="Run expandable expanded example code in Web Terminal"
147
219
  >
148
220
  <span class="pf-v6-c-button__icon">
149
- <i class="fas fa-play" aria-hidden="true"></i>
221
+ <svg
222
+ class="pf-v6-svg"
223
+ viewBox="0 0 448 512"
224
+ fill="currentColor"
225
+ aria-hidden="true"
226
+ role="img"
227
+ width="1em"
228
+ height="1em"
229
+ >
230
+ <path
231
+ d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"
232
+ />
233
+ </svg>
150
234
  </span>
151
235
  </button>
152
236
  </div>
@@ -183,7 +267,19 @@ name: azure-sample-repo<div
183
267
  <span
184
268
  class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top"
185
269
  >
186
- <i class="fas fa-angle-right" aria-hidden="true"></i>
270
+ <svg
271
+ class="pf-v6-svg"
272
+ viewBox="0 0 20 20"
273
+ fill="currentColor"
274
+ aria-hidden="true"
275
+ role="img"
276
+ width="1em"
277
+ height="1em"
278
+ >
279
+ <path
280
+ 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"
281
+ />
282
+ </svg>
187
283
  </span>
188
284
  </span>
189
285
  <span class="pf-v6-c-button__text">Show less</span>