@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
@@ -41,7 +41,19 @@ cssPrefix: pf-v6-c-action-list
41
41
  aria-label="Toggle"
42
42
  >
43
43
  <span class="pf-v6-c-button__icon">
44
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
44
+ <svg
45
+ class="pf-v6-svg"
46
+ viewBox="0 0 192 512"
47
+ fill="currentColor"
48
+ aria-hidden="true"
49
+ role="img"
50
+ width="1em"
51
+ height="1em"
52
+ >
53
+ <path
54
+ 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"
55
+ />
56
+ </svg>
45
57
  </span>
46
58
  </button>
47
59
  </div>
@@ -57,14 +69,38 @@ cssPrefix: pf-v6-c-action-list
57
69
  <div class="pf-v6-c-action-list__item">
58
70
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
59
71
  <span class="pf-v6-c-button__icon">
60
- <i class="fas fa-times" aria-hidden="true"></i>
72
+ <svg
73
+ class="pf-v6-svg"
74
+ viewBox="0 0 352 512"
75
+ fill="currentColor"
76
+ aria-hidden="true"
77
+ role="img"
78
+ width="1em"
79
+ height="1em"
80
+ >
81
+ <path
82
+ 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"
83
+ />
84
+ </svg>
61
85
  </span>
62
86
  </button>
63
87
  </div>
64
88
  <div class="pf-v6-c-action-list__item">
65
89
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Toggle">
66
90
  <span class="pf-v6-c-button__icon">
67
- <i class="fas fa-check" aria-hidden="true"></i>
91
+ <svg
92
+ class="pf-v6-svg"
93
+ viewBox="0 0 512 512"
94
+ fill="currentColor"
95
+ aria-hidden="true"
96
+ role="img"
97
+ width="1em"
98
+ height="1em"
99
+ >
100
+ <path
101
+ d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
102
+ />
103
+ </svg>
68
104
  </span>
69
105
  </button>
70
106
  </div>
@@ -79,7 +115,19 @@ cssPrefix: pf-v6-c-action-list
79
115
  aria-label="Close"
80
116
  >
81
117
  <span class="pf-v6-c-button__icon pf-m-start">
82
- <i class="fas fa-times" aria-hidden="true"></i>
118
+ <svg
119
+ class="pf-v6-svg"
120
+ viewBox="0 0 352 512"
121
+ fill="currentColor"
122
+ aria-hidden="true"
123
+ role="img"
124
+ width="1em"
125
+ height="1em"
126
+ >
127
+ <path
128
+ 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"
129
+ />
130
+ </svg>
83
131
  </span>
84
132
  </button>
85
133
  </div>
@@ -90,7 +138,19 @@ cssPrefix: pf-v6-c-action-list
90
138
  aria-label="Toggle"
91
139
  >
92
140
  <span class="pf-v6-c-button__icon">
93
- <i class="fas fa-check" aria-hidden="true"></i>
141
+ <svg
142
+ class="pf-v6-svg"
143
+ viewBox="0 0 512 512"
144
+ fill="currentColor"
145
+ aria-hidden="true"
146
+ role="img"
147
+ width="1em"
148
+ height="1em"
149
+ >
150
+ <path
151
+ d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
152
+ />
153
+ </svg>
94
154
  </span>
95
155
  </button>
96
156
  </div>
@@ -103,7 +163,19 @@ cssPrefix: pf-v6-c-action-list
103
163
  aria-label="Close"
104
164
  >
105
165
  <span class="pf-v6-c-button__icon">
106
- <i class="fas fa-times" aria-hidden="true"></i>
166
+ <svg
167
+ class="pf-v6-svg"
168
+ viewBox="0 0 352 512"
169
+ fill="currentColor"
170
+ aria-hidden="true"
171
+ role="img"
172
+ width="1em"
173
+ height="1em"
174
+ >
175
+ <path
176
+ 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"
177
+ />
178
+ </svg>
107
179
  </span>
108
180
  </button>
109
181
  </div>
@@ -114,7 +186,19 @@ cssPrefix: pf-v6-c-action-list
114
186
  aria-label="Toggle"
115
187
  >
116
188
  <span class="pf-v6-c-button__icon">
117
- <i class="fas fa-check" aria-hidden="true"></i>
189
+ <svg
190
+ class="pf-v6-svg"
191
+ viewBox="0 0 512 512"
192
+ fill="currentColor"
193
+ aria-hidden="true"
194
+ role="img"
195
+ width="1em"
196
+ height="1em"
197
+ >
198
+ <path
199
+ d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
200
+ />
201
+ </svg>
118
202
  </span>
119
203
  </button>
120
204
  </div>
@@ -236,7 +320,19 @@ Icons, in two groups
236
320
  aria-label="Close"
237
321
  >
238
322
  <span class="pf-v6-c-button__icon pf-m-start">
239
- <i class="fas fa-times" aria-hidden="true"></i>
323
+ <svg
324
+ class="pf-v6-svg"
325
+ viewBox="0 0 352 512"
326
+ fill="currentColor"
327
+ aria-hidden="true"
328
+ role="img"
329
+ width="1em"
330
+ height="1em"
331
+ >
332
+ <path
333
+ 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"
334
+ />
335
+ </svg>
240
336
  </span>
241
337
  </button>
242
338
  </div>
@@ -247,7 +343,19 @@ Icons, in two groups
247
343
  aria-label="Toggle"
248
344
  >
249
345
  <span class="pf-v6-c-button__icon">
250
- <i class="fas fa-check" aria-hidden="true"></i>
346
+ <svg
347
+ class="pf-v6-svg"
348
+ viewBox="0 0 512 512"
349
+ fill="currentColor"
350
+ aria-hidden="true"
351
+ role="img"
352
+ width="1em"
353
+ height="1em"
354
+ >
355
+ <path
356
+ d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
357
+ />
358
+ </svg>
251
359
  </span>
252
360
  </button>
253
361
  </div>
@@ -260,7 +368,19 @@ Icons, in two groups
260
368
  aria-label="Close"
261
369
  >
262
370
  <span class="pf-v6-c-button__icon">
263
- <i class="fas fa-times" aria-hidden="true"></i>
371
+ <svg
372
+ class="pf-v6-svg"
373
+ viewBox="0 0 352 512"
374
+ fill="currentColor"
375
+ aria-hidden="true"
376
+ role="img"
377
+ width="1em"
378
+ height="1em"
379
+ >
380
+ <path
381
+ 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"
382
+ />
383
+ </svg>
264
384
  </span>
265
385
  </button>
266
386
  </div>
@@ -271,7 +391,19 @@ Icons, in two groups
271
391
  aria-label="Toggle"
272
392
  >
273
393
  <span class="pf-v6-c-button__icon">
274
- <i class="fas fa-check" aria-hidden="true"></i>
394
+ <svg
395
+ class="pf-v6-svg"
396
+ viewBox="0 0 512 512"
397
+ fill="currentColor"
398
+ aria-hidden="true"
399
+ role="img"
400
+ width="1em"
401
+ height="1em"
402
+ >
403
+ <path
404
+ d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
405
+ />
406
+ </svg>
275
407
  </span>
276
408
  </button>
277
409
  </div>
@@ -77,7 +77,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
77
77
  aria-label="Close success alert: Success alert title"
78
78
  >
79
79
  <span class="pf-v6-c-button__icon">
80
- <i class="fas fa-times" aria-hidden="true"></i>
80
+ <svg
81
+ class="pf-v6-svg"
82
+ viewBox="0 0 352 512"
83
+ fill="currentColor"
84
+ aria-hidden="true"
85
+ role="img"
86
+ width="1em"
87
+ height="1em"
88
+ >
89
+ <path
90
+ 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"
91
+ />
92
+ </svg>
81
93
  </span>
82
94
  </button>
83
95
  </div>
@@ -109,7 +121,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
109
121
  aria-label="Close success alert: Success alert title"
110
122
  >
111
123
  <span class="pf-v6-c-button__icon">
112
- <i class="fas fa-times" aria-hidden="true"></i>
124
+ <svg
125
+ class="pf-v6-svg"
126
+ viewBox="0 0 352 512"
127
+ fill="currentColor"
128
+ aria-hidden="true"
129
+ role="img"
130
+ width="1em"
131
+ height="1em"
132
+ >
133
+ <path
134
+ 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"
135
+ />
136
+ </svg>
113
137
  </span>
114
138
  </button>
115
139
  </div>
@@ -136,7 +160,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
136
160
  aria-label="Close success alert: Success alert title"
137
161
  >
138
162
  <span class="pf-v6-c-button__icon">
139
- <i class="fas fa-times" aria-hidden="true"></i>
163
+ <svg
164
+ class="pf-v6-svg"
165
+ viewBox="0 0 352 512"
166
+ fill="currentColor"
167
+ aria-hidden="true"
168
+ role="img"
169
+ width="1em"
170
+ height="1em"
171
+ >
172
+ <path
173
+ 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"
174
+ />
175
+ </svg>
140
176
  </span>
141
177
  </button>
142
178
  </div>
@@ -165,7 +201,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
165
201
  aria-label="Close success alert: Success alert title"
166
202
  >
167
203
  <span class="pf-v6-c-button__icon">
168
- <i class="fas fa-times" aria-hidden="true"></i>
204
+ <svg
205
+ class="pf-v6-svg"
206
+ viewBox="0 0 352 512"
207
+ fill="currentColor"
208
+ aria-hidden="true"
209
+ role="img"
210
+ width="1em"
211
+ height="1em"
212
+ >
213
+ <path
214
+ 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"
215
+ />
216
+ </svg>
169
217
  </span>
170
218
  </button>
171
219
  </div>
@@ -306,7 +354,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
306
354
  aria-label="Close success alert: Success alert title"
307
355
  >
308
356
  <span class="pf-v6-c-button__icon">
309
- <i class="fas fa-times" aria-hidden="true"></i>
357
+ <svg
358
+ class="pf-v6-svg"
359
+ viewBox="0 0 352 512"
360
+ fill="currentColor"
361
+ aria-hidden="true"
362
+ role="img"
363
+ width="1em"
364
+ height="1em"
365
+ >
366
+ <path
367
+ 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"
368
+ />
369
+ </svg>
310
370
  </span>
311
371
  </button>
312
372
  </div>
@@ -338,7 +398,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
338
398
  aria-label="Close success alert: Success alert title"
339
399
  >
340
400
  <span class="pf-v6-c-button__icon">
341
- <i class="fas fa-times" aria-hidden="true"></i>
401
+ <svg
402
+ class="pf-v6-svg"
403
+ viewBox="0 0 352 512"
404
+ fill="currentColor"
405
+ aria-hidden="true"
406
+ role="img"
407
+ width="1em"
408
+ height="1em"
409
+ >
410
+ <path
411
+ 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"
412
+ />
413
+ </svg>
342
414
  </span>
343
415
  </button>
344
416
  </div>
@@ -365,7 +437,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
365
437
  aria-label="Close success alert: Success alert title"
366
438
  >
367
439
  <span class="pf-v6-c-button__icon">
368
- <i class="fas fa-times" aria-hidden="true"></i>
440
+ <svg
441
+ class="pf-v6-svg"
442
+ viewBox="0 0 352 512"
443
+ fill="currentColor"
444
+ aria-hidden="true"
445
+ role="img"
446
+ width="1em"
447
+ height="1em"
448
+ >
449
+ <path
450
+ 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"
451
+ />
452
+ </svg>
369
453
  </span>
370
454
  </button>
371
455
  </div>
@@ -471,7 +555,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
471
555
  aria-label="Close success alert: Success alert title"
472
556
  >
473
557
  <span class="pf-v6-c-button__icon">
474
- <i class="fas fa-times" aria-hidden="true"></i>
558
+ <svg
559
+ class="pf-v6-svg"
560
+ viewBox="0 0 352 512"
561
+ fill="currentColor"
562
+ aria-hidden="true"
563
+ role="img"
564
+ width="1em"
565
+ height="1em"
566
+ >
567
+ <path
568
+ 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"
569
+ />
570
+ </svg>
475
571
  </span>
476
572
  </button>
477
573
  </div>
@@ -522,7 +618,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
522
618
  aria-label="Close success alert: Success alert title"
523
619
  >
524
620
  <span class="pf-v6-c-button__icon">
525
- <i class="fas fa-times" aria-hidden="true"></i>
621
+ <svg
622
+ class="pf-v6-svg"
623
+ viewBox="0 0 352 512"
624
+ fill="currentColor"
625
+ aria-hidden="true"
626
+ role="img"
627
+ width="1em"
628
+ height="1em"
629
+ >
630
+ <path
631
+ 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"
632
+ />
633
+ </svg>
526
634
  </span>
527
635
  </button>
528
636
  </div>
@@ -573,7 +681,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
573
681
  aria-label="Close success alert: Success alert title"
574
682
  >
575
683
  <span class="pf-v6-c-button__icon">
576
- <i class="fas fa-times" aria-hidden="true"></i>
684
+ <svg
685
+ class="pf-v6-svg"
686
+ viewBox="0 0 352 512"
687
+ fill="currentColor"
688
+ aria-hidden="true"
689
+ role="img"
690
+ width="1em"
691
+ height="1em"
692
+ >
693
+ <path
694
+ 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"
695
+ />
696
+ </svg>
577
697
  </span>
578
698
  </button>
579
699
  </div>
@@ -624,7 +744,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
624
744
  aria-label="Close success alert: Success alert title"
625
745
  >
626
746
  <span class="pf-v6-c-button__icon">
627
- <i class="fas fa-times" aria-hidden="true"></i>
747
+ <svg
748
+ class="pf-v6-svg"
749
+ viewBox="0 0 352 512"
750
+ fill="currentColor"
751
+ aria-hidden="true"
752
+ role="img"
753
+ width="1em"
754
+ height="1em"
755
+ >
756
+ <path
757
+ 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"
758
+ />
759
+ </svg>
628
760
  </span>
629
761
  </button>
630
762
  </div>
@@ -742,7 +874,19 @@ For sighted users, interactive elements can be included in this message in one o
742
874
  aria-label="Close success alert: Success alert title"
743
875
  >
744
876
  <span class="pf-v6-c-button__icon">
745
- <i class="fas fa-times" aria-hidden="true"></i>
877
+ <svg
878
+ class="pf-v6-svg"
879
+ viewBox="0 0 352 512"
880
+ fill="currentColor"
881
+ aria-hidden="true"
882
+ role="img"
883
+ width="1em"
884
+ height="1em"
885
+ >
886
+ <path
887
+ 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"
888
+ />
889
+ </svg>
746
890
  </span>
747
891
  </button>
748
892
  </div>
@@ -765,7 +909,19 @@ For sighted users, interactive elements can be included in this message in one o
765
909
  aria-label="Close success alert: Success alert title"
766
910
  >
767
911
  <span class="pf-v6-c-button__icon">
768
- <i class="fas fa-times" aria-hidden="true"></i>
912
+ <svg
913
+ class="pf-v6-svg"
914
+ viewBox="0 0 352 512"
915
+ fill="currentColor"
916
+ aria-hidden="true"
917
+ role="img"
918
+ width="1em"
919
+ height="1em"
920
+ >
921
+ <path
922
+ 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"
923
+ />
924
+ </svg>
769
925
  </span>
770
926
  </button>
771
927
  </div>
@@ -794,7 +950,19 @@ For sighted users, interactive elements can be included in this message in one o
794
950
  aria-label="Close success alert: Success alert title"
795
951
  >
796
952
  <span class="pf-v6-c-button__icon">
797
- <i class="fas fa-times" aria-hidden="true"></i>
953
+ <svg
954
+ class="pf-v6-svg"
955
+ viewBox="0 0 352 512"
956
+ fill="currentColor"
957
+ aria-hidden="true"
958
+ role="img"
959
+ width="1em"
960
+ height="1em"
961
+ >
962
+ <path
963
+ 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"
964
+ />
965
+ </svg>
798
966
  </span>
799
967
  </button>
800
968
  </div>
@@ -13,7 +13,19 @@ cssPrefix: pf-v6-c-back-to-top
13
13
  <a class="pf-v6-c-button pf-m-primary" href="#">
14
14
  <span class="pf-v6-c-button__text">Back to top</span>
15
15
  <span class="pf-v6-c-button__icon pf-m-end">
16
- <i class="fas fa-angle-up" aria-hidden="true"></i>
16
+ <svg
17
+ class="pf-v6-svg"
18
+ viewBox="0 0 320 512"
19
+ fill="currentColor"
20
+ aria-hidden="true"
21
+ role="img"
22
+ width="1em"
23
+ height="1em"
24
+ >
25
+ <path
26
+ 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"
27
+ />
28
+ </svg>
17
29
  </span>
18
30
  </a>
19
31
  </div>