@patternfly/patternfly 6.5.0-prerelease.43 → 6.5.0-prerelease.45

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 (65) hide show
  1. package/components/Button/button.css +76 -3
  2. package/components/Button/button.scss +85 -4
  3. package/components/_index.css +76 -3
  4. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  5. package/docs/components/ActionList/examples/ActionList.md +143 -11
  6. package/docs/components/Alert/examples/Alert.md +182 -14
  7. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  8. package/docs/components/Button/examples/Button.md +2017 -157
  9. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  10. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +208 -16
  11. package/docs/components/CodeBlock/examples/CodeBlock.md +78 -6
  12. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  13. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  14. package/docs/components/DescriptionList/examples/DescriptionList.md +325 -25
  15. package/docs/components/Drawer/examples/Drawer.md +273 -21
  16. package/docs/components/DualListSelector/examples/DualListSelector.md +106 -112
  17. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  18. package/docs/components/InputGroup/examples/InputGroup.md +26 -2
  19. package/docs/components/Label/examples/Label.md +242 -218
  20. package/docs/components/Login/examples/Login.md +26 -2
  21. package/docs/components/Masthead/examples/masthead.md +13 -1
  22. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  23. package/docs/components/ModalBox/examples/ModalBox.md +195 -15
  24. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +117 -9
  25. package/docs/components/Nav/examples/Navigation.md +52 -4
  26. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +26 -2
  27. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  28. package/docs/components/Page/examples/Page.md +13 -1
  29. package/docs/components/Pagination/examples/Pagination.md +624 -48
  30. package/docs/components/Popover/examples/Popover.md +208 -16
  31. package/docs/components/Slider/examples/Slider.md +4 -4
  32. package/docs/components/Table/examples/Table.md +52 -4
  33. package/docs/components/Tabs/examples/Tabs.md +1378 -106
  34. package/docs/components/TextInputGroup/examples/TextInputGroup.md +128 -44
  35. package/docs/components/Toolbar/examples/Toolbar.md +455 -35
  36. package/docs/components/TreeView/examples/TreeView.md +52 -4
  37. package/docs/components/Wizard/examples/Wizard.md +169 -13
  38. package/docs/demos/AboutModal/examples/AboutModal.md +13 -1
  39. package/docs/demos/Alert/examples/Alert.md +39 -3
  40. package/docs/demos/BackToTop/examples/BackToTop.md +13 -1
  41. package/docs/demos/Button/examples/Button.md +13 -1
  42. package/docs/demos/Card/examples/Card.md +65 -5
  43. package/docs/demos/CardView/examples/CardView.md +78 -6
  44. package/docs/demos/Compass/examples/Compass.md +323 -29
  45. package/docs/demos/Dashboard/examples/Dashboard.md +39 -3
  46. package/docs/demos/DataList/examples/DataList.md +312 -24
  47. package/docs/demos/DescriptionList/examples/DescriptionList.md +13 -1
  48. package/docs/demos/Drawer/examples/Drawer.md +39 -3
  49. package/docs/demos/Form/examples/BasicForms.md +106 -10
  50. package/docs/demos/JumpLinks/examples/JumpLinks.md +26 -2
  51. package/docs/demos/Masthead/examples/Masthead.md +40 -4
  52. package/docs/demos/Modal/examples/Modal.md +78 -6
  53. package/docs/demos/Nav/examples/Nav.md +52 -4
  54. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  55. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  56. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +295 -55
  57. package/docs/demos/Table/examples/Table.md +1108 -145
  58. package/docs/demos/Tabs/examples/Tabs.md +53 -8
  59. package/docs/demos/Toolbar/examples/Toolbar.md +414 -36
  60. package/docs/demos/Wizard/examples/Wizard.md +130 -10
  61. package/package.json +2 -2
  62. package/patternfly-no-globals.css +76 -3
  63. package/patternfly.css +76 -3
  64. package/patternfly.min.css +1 -1
  65. package/patternfly.min.css.map +1 -1
package/docs/components/TreeView/examples/TreeView.md CHANGED
@@ -2121,7 +2121,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2121
2121
  tabindex="-1"
2122
2122
  >
2123
2123
  <span class="pf-v6-c-button__icon">
2124
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2124
+ <svg
2125
+ class="pf-v6-svg"
2126
+ viewBox="0 0 192 512"
2127
+ fill="currentColor"
2128
+ aria-hidden="true"
2129
+ role="img"
2130
+ width="1em"
2131
+ height="1em"
2132
+ >
2133
+ <path
2134
+ d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
2135
+ />
2136
+ </svg>
2125
2137
  </span>
2126
2138
  </button>
2127
2139
  </div>
@@ -2154,7 +2166,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2154
2166
  tabindex="-1"
2155
2167
  >
2156
2168
  <span class="pf-v6-c-button__icon">
2157
- <i class="fas fa-clipboard" aria-hidden="true"></i>
2169
+ <svg
2170
+ class="pf-v6-svg"
2171
+ viewBox="0 0 384 512"
2172
+ fill="currentColor"
2173
+ aria-hidden="true"
2174
+ role="img"
2175
+ width="1em"
2176
+ height="1em"
2177
+ >
2178
+ <path
2179
+ d="M384 112v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h80c0-35.29 28.71-64 64-64s64 28.71 64 64h80c26.51 0 48 21.49 48 48zM192 40c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24m96 114v-20a6 6 0 0 0-6-6H102a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h180a6 6 0 0 0 6-6z"
2180
+ />
2181
+ </svg>
2158
2182
  </span>
2159
2183
  </button>
2160
2184
  </div>
@@ -2217,7 +2241,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2217
2241
  tabindex="-1"
2218
2242
  >
2219
2243
  <span class="pf-v6-c-button__icon">
2220
- <i class="fas fa-bars" aria-hidden="true"></i>
2244
+ <svg
2245
+ class="pf-v6-svg"
2246
+ viewBox="0 0 448 512"
2247
+ fill="currentColor"
2248
+ aria-hidden="true"
2249
+ role="img"
2250
+ width="1em"
2251
+ height="1em"
2252
+ >
2253
+ <path
2254
+ d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
2255
+ />
2256
+ </svg>
2221
2257
  </span>
2222
2258
  </button>
2223
2259
  </div>
@@ -2386,7 +2422,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2386
2422
  tabindex="-1"
2387
2423
  >
2388
2424
  <span class="pf-v6-c-button__icon">
2389
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2425
+ <svg
2426
+ class="pf-v6-svg"
2427
+ viewBox="0 0 192 512"
2428
+ fill="currentColor"
2429
+ aria-hidden="true"
2430
+ role="img"
2431
+ width="1em"
2432
+ height="1em"
2433
+ >
2434
+ <path
2435
+ d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
2436
+ />
2437
+ </svg>
2390
2438
  </span>
2391
2439
  </button>
2392
2440
  </div>
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -19,7 +19,19 @@ wrapperTag: div
19
19
  aria-label="Close"
20
20
  >
21
21
  <span class="pf-v6-c-button__icon">
22
- <i class="fas fa-times" aria-hidden="true"></i>
22
+ <svg
23
+ class="pf-v6-svg"
24
+ viewBox="0 0 352 512"
25
+ fill="currentColor"
26
+ aria-hidden="true"
27
+ role="img"
28
+ width="1em"
29
+ height="1em"
30
+ >
31
+ <path
32
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
33
+ />
34
+ </svg>
23
35
  </span>
24
36
  </button>
25
37
  </div>
@@ -305,7 +317,19 @@ wrapperTag: div
305
317
  aria-label="Close"
306
318
  >
307
319
  <span class="pf-v6-c-button__icon">
308
- <i class="fas fa-times" aria-hidden="true"></i>
320
+ <svg
321
+ class="pf-v6-svg"
322
+ viewBox="0 0 352 512"
323
+ fill="currentColor"
324
+ aria-hidden="true"
325
+ role="img"
326
+ width="1em"
327
+ height="1em"
328
+ >
329
+ <path
330
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
331
+ />
332
+ </svg>
309
333
  </span>
310
334
  </button>
311
335
  </div>
@@ -591,7 +615,19 @@ wrapperTag: div
591
615
  aria-label="Close"
592
616
  >
593
617
  <span class="pf-v6-c-button__icon">
594
- <i class="fas fa-times" aria-hidden="true"></i>
618
+ <svg
619
+ class="pf-v6-svg"
620
+ viewBox="0 0 352 512"
621
+ fill="currentColor"
622
+ aria-hidden="true"
623
+ role="img"
624
+ width="1em"
625
+ height="1em"
626
+ >
627
+ <path
628
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
629
+ />
630
+ </svg>
595
631
  </span>
596
632
  </button>
597
633
  </div>
@@ -856,7 +892,19 @@ wrapperTag: div
856
892
  aria-label="Close drawer panel"
857
893
  >
858
894
  <span class="pf-v6-c-button__icon">
859
- <i class="fas fa-times" aria-hidden="true"></i>
895
+ <svg
896
+ class="pf-v6-svg"
897
+ viewBox="0 0 352 512"
898
+ fill="currentColor"
899
+ aria-hidden="true"
900
+ role="img"
901
+ width="1em"
902
+ height="1em"
903
+ >
904
+ <path
905
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
906
+ />
907
+ </svg>
860
908
  </span>
861
909
  </button>
862
910
  </div>
@@ -908,7 +956,19 @@ wrapperTag: div
908
956
  aria-label="Close"
909
957
  >
910
958
  <span class="pf-v6-c-button__icon">
911
- <i class="fas fa-times" aria-hidden="true"></i>
959
+ <svg
960
+ class="pf-v6-svg"
961
+ viewBox="0 0 352 512"
962
+ fill="currentColor"
963
+ aria-hidden="true"
964
+ role="img"
965
+ width="1em"
966
+ height="1em"
967
+ >
968
+ <path
969
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
970
+ />
971
+ </svg>
912
972
  </span>
913
973
  </button>
914
974
  </div>
@@ -1194,7 +1254,19 @@ wrapperTag: div
1194
1254
  aria-label="Close"
1195
1255
  >
1196
1256
  <span class="pf-v6-c-button__icon">
1197
- <i class="fas fa-times" aria-hidden="true"></i>
1257
+ <svg
1258
+ class="pf-v6-svg"
1259
+ viewBox="0 0 352 512"
1260
+ fill="currentColor"
1261
+ aria-hidden="true"
1262
+ role="img"
1263
+ width="1em"
1264
+ height="1em"
1265
+ >
1266
+ <path
1267
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1268
+ />
1269
+ </svg>
1198
1270
  </span>
1199
1271
  </button>
1200
1272
  </div>
@@ -1480,7 +1552,19 @@ wrapperTag: div
1480
1552
  aria-label="Close"
1481
1553
  >
1482
1554
  <span class="pf-v6-c-button__icon">
1483
- <i class="fas fa-times" aria-hidden="true"></i>
1555
+ <svg
1556
+ class="pf-v6-svg"
1557
+ viewBox="0 0 352 512"
1558
+ fill="currentColor"
1559
+ aria-hidden="true"
1560
+ role="img"
1561
+ width="1em"
1562
+ height="1em"
1563
+ >
1564
+ <path
1565
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1566
+ />
1567
+ </svg>
1484
1568
  </span>
1485
1569
  </button>
1486
1570
  </div>
@@ -1659,7 +1743,19 @@ wrapperTag: div
1659
1743
  aria-label="Close"
1660
1744
  >
1661
1745
  <span class="pf-v6-c-button__icon">
1662
- <i class="fas fa-times" aria-hidden="true"></i>
1746
+ <svg
1747
+ class="pf-v6-svg"
1748
+ viewBox="0 0 352 512"
1749
+ fill="currentColor"
1750
+ aria-hidden="true"
1751
+ role="img"
1752
+ width="1em"
1753
+ height="1em"
1754
+ >
1755
+ <path
1756
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1757
+ />
1758
+ </svg>
1663
1759
  </span>
1664
1760
  </button>
1665
1761
  </div>
@@ -1950,7 +2046,19 @@ wrapperTag: div
1950
2046
  aria-label="Close"
1951
2047
  >
1952
2048
  <span class="pf-v6-c-button__icon">
1953
- <i class="fas fa-times" aria-hidden="true"></i>
2049
+ <svg
2050
+ class="pf-v6-svg"
2051
+ viewBox="0 0 352 512"
2052
+ fill="currentColor"
2053
+ aria-hidden="true"
2054
+ role="img"
2055
+ width="1em"
2056
+ height="1em"
2057
+ >
2058
+ <path
2059
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
2060
+ />
2061
+ </svg>
1954
2062
  </span>
1955
2063
  </button>
1956
2064
  </div>
@@ -2241,7 +2349,19 @@ wrapperTag: div
2241
2349
  aria-label="Close"
2242
2350
  >
2243
2351
  <span class="pf-v6-c-button__icon">
2244
- <i class="fas fa-times" aria-hidden="true"></i>
2352
+ <svg
2353
+ class="pf-v6-svg"
2354
+ viewBox="0 0 352 512"
2355
+ fill="currentColor"
2356
+ aria-hidden="true"
2357
+ role="img"
2358
+ width="1em"
2359
+ height="1em"
2360
+ >
2361
+ <path
2362
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
2363
+ />
2364
+ </svg>
2245
2365
  </span>
2246
2366
  </button>
2247
2367
  </div>
@@ -2532,7 +2652,19 @@ wrapperTag: div
2532
2652
  aria-label="Close"
2533
2653
  >
2534
2654
  <span class="pf-v6-c-button__icon">
2535
- <i class="fas fa-times" aria-hidden="true"></i>
2655
+ <svg
2656
+ class="pf-v6-svg"
2657
+ viewBox="0 0 352 512"
2658
+ fill="currentColor"
2659
+ aria-hidden="true"
2660
+ role="img"
2661
+ width="1em"
2662
+ height="1em"
2663
+ >
2664
+ <path
2665
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
2666
+ />
2667
+ </svg>
2536
2668
  </span>
2537
2669
  </button>
2538
2670
  </div>
@@ -2823,7 +2955,19 @@ wrapperTag: div
2823
2955
  aria-label="Close"
2824
2956
  >
2825
2957
  <span class="pf-v6-c-button__icon">
2826
- <i class="fas fa-times" aria-hidden="true"></i>
2958
+ <svg
2959
+ class="pf-v6-svg"
2960
+ viewBox="0 0 352 512"
2961
+ fill="currentColor"
2962
+ aria-hidden="true"
2963
+ role="img"
2964
+ width="1em"
2965
+ height="1em"
2966
+ >
2967
+ <path
2968
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
2969
+ />
2970
+ </svg>
2827
2971
  </span>
2828
2972
  </button>
2829
2973
  </div>
@@ -3114,7 +3258,19 @@ wrapperTag: div
3114
3258
  aria-label="Close"
3115
3259
  >
3116
3260
  <span class="pf-v6-c-button__icon">
3117
- <i class="fas fa-times" aria-hidden="true"></i>
3261
+ <svg
3262
+ class="pf-v6-svg"
3263
+ viewBox="0 0 352 512"
3264
+ fill="currentColor"
3265
+ aria-hidden="true"
3266
+ role="img"
3267
+ width="1em"
3268
+ height="1em"
3269
+ >
3270
+ <path
3271
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
3272
+ />
3273
+ </svg>
3118
3274
  </span>
3119
3275
  </button>
3120
3276
  </div>
package/docs/demos/AboutModal/examples/AboutModal.md CHANGED
@@ -349,7 +349,19 @@ This demo implements the about modal, including the backdrop.
349
349
  aria-label="Close dialog"
350
350
  >
351
351
  <span class="pf-v6-c-button__icon">
352
- <i class="fas fa-times" aria-hidden="true"></i>
352
+ <svg
353
+ class="pf-v6-svg"
354
+ viewBox="0 0 352 512"
355
+ fill="currentColor"
356
+ aria-hidden="true"
357
+ role="img"
358
+ width="1em"
359
+ height="1em"
360
+ >
361
+ <path
362
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
363
+ />
364
+ </svg>
353
365
  </span>
354
366
  </button>
355
367
  </div>
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -338,7 +338,19 @@ section: components
338
338
  aria-label="Close success alert: Newest notification"
339
339
  >
340
340
  <span class="pf-v6-c-button__icon">
341
- <i class="fas fa-times" aria-hidden="true"></i>
341
+ <svg
342
+ class="pf-v6-svg"
343
+ viewBox="0 0 352 512"
344
+ fill="currentColor"
345
+ aria-hidden="true"
346
+ role="img"
347
+ width="1em"
348
+ height="1em"
349
+ >
350
+ <path
351
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
352
+ />
353
+ </svg>
342
354
  </span>
343
355
  </button>
344
356
  </div>
@@ -363,7 +375,19 @@ section: components
363
375
  aria-label="Close warning alert: second newest notification"
364
376
  >
365
377
  <span class="pf-v6-c-button__icon">
366
- <i class="fas fa-times" aria-hidden="true"></i>
378
+ <svg
379
+ class="pf-v6-svg"
380
+ viewBox="0 0 352 512"
381
+ fill="currentColor"
382
+ aria-hidden="true"
383
+ role="img"
384
+ width="1em"
385
+ height="1em"
386
+ >
387
+ <path
388
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
389
+ />
390
+ </svg>
367
391
  </span>
368
392
  </button>
369
393
  </div>
@@ -388,7 +412,19 @@ section: components
388
412
  aria-label="Close danger alert: Last notification"
389
413
  >
390
414
  <span class="pf-v6-c-button__icon">
391
- <i class="fas fa-times" aria-hidden="true"></i>
415
+ <svg
416
+ class="pf-v6-svg"
417
+ viewBox="0 0 352 512"
418
+ fill="currentColor"
419
+ aria-hidden="true"
420
+ role="img"
421
+ width="1em"
422
+ height="1em"
423
+ >
424
+ <path
425
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
426
+ />
427
+ </svg>
392
428
  </span>
393
429
  </button>
394
430
  </div>
package/docs/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -446,7 +446,19 @@ cssPrefix: pf-d-back-to-top
446
446
  >
447
447
  <span class="pf-v6-c-button__text">Back to top</span>
448
448
  <span class="pf-v6-c-button__icon pf-m-end">
449
- <i class="fas fa-angle-up" aria-hidden="true"></i>
449
+ <svg
450
+ class="pf-v6-svg"
451
+ viewBox="0 0 320 512"
452
+ fill="currentColor"
453
+ aria-hidden="true"
454
+ role="img"
455
+ width="1em"
456
+ height="1em"
457
+ >
458
+ <path
459
+ d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
460
+ />
461
+ </svg>
450
462
  </span>
451
463
  </a>
452
464
  </div>
package/docs/demos/Button/examples/Button.md CHANGED
@@ -170,7 +170,19 @@ cssPrefix: pf-d-button
170
170
  <div class="pf-v6-c-form__actions">
171
171
  <button class="pf-v6-c-button pf-m-primary" type="submit">
172
172
  <span class="pf-v6-c-button__icon pf-m-start">
173
- <i class="fas fa-check-circle" aria-hidden="true"></i>
173
+ <svg
174
+ class="pf-v6-svg"
175
+ viewBox="0 0 512 512"
176
+ fill="currentColor"
177
+ aria-hidden="true"
178
+ role="img"
179
+ width="1em"
180
+ height="1em"
181
+ >
182
+ <path
183
+ 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"
184
+ />
185
+ </svg>
174
186
  </span>
175
187
  <span class="pf-v6-c-button__text">Logged in</span>
176
188
  </button>
package/docs/demos/Card/examples/Card.md CHANGED
@@ -184,7 +184,19 @@ wrapperTag: div
184
184
  <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
185
185
  <span class="pf-v6-c-button__text">View all set up cluster steps</span>
186
186
  <span class="pf-v6-c-button__icon pf-m-end">
187
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
187
+ <svg
188
+ class="pf-v6-svg"
189
+ viewBox="0 0 448 512"
190
+ fill="currentColor"
191
+ aria-hidden="true"
192
+ role="img"
193
+ width="1em"
194
+ height="1em"
195
+ >
196
+ <path
197
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
198
+ />
199
+ </svg>
188
200
  </span>
189
201
  </a>
190
202
  </div>
@@ -215,7 +227,19 @@ wrapperTag: div
215
227
  <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
216
228
  <span class="pf-v6-c-button__text">View all guided tours</span>
217
229
  <span class="pf-v6-c-button__icon pf-m-end">
218
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
230
+ <svg
231
+ class="pf-v6-svg"
232
+ viewBox="0 0 448 512"
233
+ fill="currentColor"
234
+ aria-hidden="true"
235
+ role="img"
236
+ width="1em"
237
+ height="1em"
238
+ >
239
+ <path
240
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
241
+ />
242
+ </svg>
219
243
  </span>
220
244
  </a>
221
245
  </div>
@@ -249,7 +273,19 @@ wrapperTag: div
249
273
  <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
250
274
  <span class="pf-v6-c-button__text">View all quick starts</span>
251
275
  <span class="pf-v6-c-button__icon pf-m-end">
252
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
276
+ <svg
277
+ class="pf-v6-svg"
278
+ viewBox="0 0 448 512"
279
+ fill="currentColor"
280
+ aria-hidden="true"
281
+ role="img"
282
+ width="1em"
283
+ height="1em"
284
+ >
285
+ <path
286
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
287
+ />
288
+ </svg>
253
289
  </span>
254
290
  </a>
255
291
  </div>
@@ -286,7 +322,19 @@ wrapperTag: div
286
322
  <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
287
323
  <span class="pf-v6-c-button__text">View all learning resources</span>
288
324
  <span class="pf-v6-c-button__icon pf-m-end">
289
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
325
+ <svg
326
+ class="pf-v6-svg"
327
+ viewBox="0 0 448 512"
328
+ fill="currentColor"
329
+ aria-hidden="true"
330
+ role="img"
331
+ width="1em"
332
+ height="1em"
333
+ >
334
+ <path
335
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
336
+ />
337
+ </svg>
290
338
  </span>
291
339
  </a>
292
340
  </div>
@@ -1354,7 +1402,19 @@ wrapperTag: div
1354
1402
  aria-label="Close"
1355
1403
  >
1356
1404
  <span class="pf-v6-c-button__icon">
1357
- <i class="fas fa-times" aria-hidden="true"></i>
1405
+ <svg
1406
+ class="pf-v6-svg"
1407
+ viewBox="0 0 352 512"
1408
+ fill="currentColor"
1409
+ aria-hidden="true"
1410
+ role="img"
1411
+ width="1em"
1412
+ height="1em"
1413
+ >
1414
+ <path
1415
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1416
+ />
1417
+ </svg>
1358
1418
  </span>
1359
1419
  </button>
1360
1420
  </div>