@patternfly/patternfly 6.6.0-prerelease.3 → 6.6.0-prerelease.30

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 (158) hide show
  1. package/assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 +0 -0
  2. package/assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2 +0 -0
  3. package/assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 +0 -0
  4. package/assets/fonts/RedHatMono/RedHatMonoVF.woff2 +0 -0
  5. package/assets/fonts/RedHatText/RedHatTextVF-Italic.woff2 +0 -0
  6. package/assets/fonts/RedHatText/RedHatTextVF.woff2 +0 -0
  7. package/assets/images/img_avatar-rhds.svg +22 -0
  8. package/assets/images/pf-logo-avatar.jpg +0 -0
  9. package/base/patternfly-fonts.css +4 -4
  10. package/base/patternfly-fonts.scss +4 -4
  11. package/base/patternfly-variables.css +8 -6
  12. package/base/tokens/tokens-charts-dark.scss +1 -1
  13. package/base/tokens/tokens-charts-highcontrast-dark.scss +1 -1
  14. package/base/tokens/tokens-charts-highcontrast.scss +1 -1
  15. package/base/tokens/tokens-charts.scss +1 -1
  16. package/base/tokens/tokens-dark.scss +1 -1
  17. package/base/tokens/tokens-default.scss +4 -4
  18. package/base/tokens/tokens-felt-dark.scss +1 -1
  19. package/base/tokens/tokens-felt-glass-dark.scss +1 -1
  20. package/base/tokens/tokens-felt-glass.scss +3 -2
  21. package/base/tokens/tokens-felt-highcontrast-dark.scss +1 -1
  22. package/base/tokens/tokens-felt-highcontrast.scss +1 -1
  23. package/base/tokens/tokens-felt.scss +1 -1
  24. package/base/tokens/tokens-glass-dark.scss +1 -1
  25. package/base/tokens/tokens-glass.scss +3 -2
  26. package/base/tokens/tokens-highcontrast-dark.scss +1 -1
  27. package/base/tokens/tokens-highcontrast.scss +4 -4
  28. package/base/tokens/tokens-palette.scss +1 -1
  29. package/base/tokens/tokens-redhat-highcontrast.scss +3 -3
  30. package/components/AboutModalBox/about-modal-box.css +1 -1
  31. package/components/AboutModalBox/about-modal-box.scss +1 -1
  32. package/components/Accordion/accordion.css +3 -3
  33. package/components/Accordion/accordion.scss +3 -3
  34. package/components/Alert/alert.css +8 -7
  35. package/components/Alert/alert.scss +8 -7
  36. package/components/Avatar/avatar.css +144 -0
  37. package/components/Avatar/avatar.scss +161 -0
  38. package/components/Banner/banner.css +7 -0
  39. package/components/Banner/banner.scss +7 -0
  40. package/components/Breadcrumb/breadcrumb.css +3 -3
  41. package/components/Breadcrumb/breadcrumb.scss +3 -3
  42. package/components/Button/button.css +20 -4
  43. package/components/Button/button.scss +24 -5
  44. package/components/Card/card.css +4 -4
  45. package/components/Card/card.scss +4 -4
  46. package/components/ClipboardCopy/clipboard-copy.css +1 -1
  47. package/components/ClipboardCopy/clipboard-copy.scss +1 -1
  48. package/components/DataList/data-list.css +5 -5
  49. package/components/DataList/data-list.scss +5 -5
  50. package/components/DragDrop/drag-drop.css +4 -0
  51. package/components/DragDrop/drag-drop.scss +4 -0
  52. package/components/DualListSelector/dual-list-selector.css +1 -1
  53. package/components/DualListSelector/dual-list-selector.scss +1 -1
  54. package/components/Form/form.scss +1 -0
  55. package/components/FormControl/form-control.css +12 -2
  56. package/components/FormControl/form-control.scss +14 -2
  57. package/components/Hint/hint.css +2 -2
  58. package/components/Hint/hint.scss +2 -2
  59. package/components/Label/label.css +9 -3
  60. package/components/Label/label.scss +9 -3
  61. package/components/Masthead/masthead.css +1 -1
  62. package/components/Masthead/masthead.scss +1 -1
  63. package/components/Menu/menu.css +2 -2
  64. package/components/Menu/menu.scss +3 -3
  65. package/components/MenuToggle/menu-toggle.css +3 -0
  66. package/components/MenuToggle/menu-toggle.scss +4 -1
  67. package/components/ModalBox/modal-box.css +4 -4
  68. package/components/ModalBox/modal-box.scss +5 -5
  69. package/components/Nav/nav.css +2 -2
  70. package/components/Nav/nav.scss +2 -2
  71. package/components/NotificationDrawer/notification-drawer.css +3 -3
  72. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  73. package/components/Page/page.css +25 -22
  74. package/components/Page/page.scss +28 -28
  75. package/components/Pagination/pagination.css +12 -7
  76. package/components/Pagination/pagination.scss +15 -12
  77. package/components/Panel/panel.css +1 -1
  78. package/components/Panel/panel.scss +2 -2
  79. package/components/Popover/popover.css +1 -1
  80. package/components/Popover/popover.scss +1 -1
  81. package/components/Progress/progress.css +2 -2
  82. package/components/Progress/progress.scss +2 -2
  83. package/components/Sidebar/sidebar.css +4 -7
  84. package/components/Sidebar/sidebar.scss +9 -9
  85. package/components/Table/table-grid.css +25 -13
  86. package/components/Table/table-grid.scss +10 -5
  87. package/components/Table/table-tree-view.css +3 -0
  88. package/components/Table/table-tree-view.scss +2 -0
  89. package/components/Table/table.css +55 -21
  90. package/components/Table/table.scss +82 -34
  91. package/components/Tabs/tabs.css +19 -5
  92. package/components/Tabs/tabs.scss +22 -5
  93. package/components/Title/title.css +1 -1
  94. package/components/Title/title.scss +1 -1
  95. package/components/Tooltip/tooltip.css +1 -1
  96. package/components/Tooltip/tooltip.scss +1 -1
  97. package/components/TreeView/tree-view.css +7 -7
  98. package/components/TreeView/tree-view.scss +7 -7
  99. package/components/Wizard/wizard.css +4 -4
  100. package/components/Wizard/wizard.scss +4 -4
  101. package/components/_index.css +399 -140
  102. package/docs/components/Avatar/examples/Avatar.css +6 -0
  103. package/docs/components/Avatar/examples/Avatar.md +414 -40
  104. package/docs/components/Button/examples/Button.md +2 -2
  105. package/docs/components/CodeEditor/examples/CodeEditor.md +131 -47
  106. package/docs/components/DataList/examples/DataList.md +143 -11
  107. package/docs/components/DatePicker/examples/DatePicker.md +26 -2
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +115 -55
  109. package/docs/components/Drawer/examples/Drawer.md +1 -1
  110. package/docs/components/DualListSelector/examples/DualListSelector.md +355 -139
  111. package/docs/components/EmptyState/examples/EmptyState.md +12 -12
  112. package/docs/components/FileUpload/examples/FileUpload.md +26 -2
  113. package/docs/components/Form/examples/Form.md +140 -16
  114. package/docs/components/FormControl/examples/FormControl.md +260 -20
  115. package/docs/components/HelperText/examples/HelperText.md +139 -11
  116. package/docs/components/Icon/examples/Icon.md +403 -31
  117. package/docs/components/InlineEdit/examples/InlineEdit.md +13 -1
  118. package/docs/components/InputGroup/examples/InputGroup.md +20 -8
  119. package/docs/components/Label/examples/Label.md +4029 -765
  120. package/docs/components/List/examples/List.md +78 -6
  121. package/docs/components/Login/examples/Login.md +104 -8
  122. package/docs/components/Menu/examples/Menu.md +221 -17
  123. package/docs/components/MenuToggle/examples/MenuToggle.md +54 -15
  124. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +247 -19
  125. package/docs/components/NumberInput/examples/NumberInput.md +301 -25
  126. package/docs/components/Pagination/examples/Pagination.md +111 -273
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +169 -13
  128. package/docs/components/Sidebar/examples/Sidebar.md +3 -1
  129. package/docs/components/Switch/examples/Switch.md +52 -4
  130. package/docs/components/Table/examples/Table.css +6 -0
  131. package/docs/components/Table/examples/Table.md +1322 -171
  132. package/docs/components/Tabs/examples/Tabs.md +18 -998
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +355 -115
  134. package/docs/components/Toolbar/examples/Toolbar.md +133 -25
  135. package/docs/components/TreeView/examples/TreeView.md +286 -118
  136. package/docs/components/Wizard/examples/Wizard.md +325 -25
  137. package/docs/demos/Alert/examples/Alert.md +181 -40
  138. package/docs/demos/Button/examples/Button.md +57 -45
  139. package/docs/demos/Card/examples/Card.md +280 -34
  140. package/docs/demos/CardView/examples/CardView.md +12 -12
  141. package/docs/demos/Compass/examples/Compass.md +91 -439
  142. package/docs/demos/Dashboard/examples/Dashboard.md +92 -41
  143. package/docs/demos/DataList/examples/DataList.md +74 -50
  144. package/docs/demos/Form/examples/BasicForms.md +112 -36
  145. package/docs/demos/HelperText/examples/HelperText.md +104 -8
  146. package/docs/demos/Masthead/examples/Masthead.md +52 -4
  147. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +176 -14
  148. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +2570 -4968
  149. package/docs/demos/Table/examples/Table.md +407 -179
  150. package/docs/demos/Toolbar/examples/Toolbar.md +139 -46
  151. package/docs/demos/Wizard/examples/Wizard.md +117 -9
  152. package/package.json +7 -7
  153. package/patternfly-base-no-globals.css +12 -10
  154. package/patternfly-base.css +12 -10
  155. package/patternfly-no-globals.css +411 -150
  156. package/patternfly.css +411 -150
  157. package/patternfly.min.css +1 -1
  158. package/patternfly.min.css.map +1 -1
package/docs/components/FormControl/examples/FormControl.md CHANGED
@@ -67,7 +67,19 @@ cssPrefix: pf-v6-c-form-control
67
67
  />
68
68
  <span class="pf-v6-c-form-control__utilities">
69
69
  <span class="pf-v6-c-form-control__icon pf-m-status">
70
- <i class="fas fa-check-circle" aria-hidden="true"></i>
70
+ <svg
71
+ class="pf-v6-svg"
72
+ fill="currentColor"
73
+ viewBox="0 0 32 32"
74
+ aria-hidden="true"
75
+ role="img"
76
+ width="1em"
77
+ height="1em"
78
+ >
79
+ <path
80
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
81
+ />
82
+ </svg>
71
83
  </span>
72
84
  </span>
73
85
  </span>
@@ -81,7 +93,19 @@ cssPrefix: pf-v6-c-form-control
81
93
  />
82
94
  <span class="pf-v6-c-form-control__utilities">
83
95
  <span class="pf-v6-c-form-control__icon pf-m-status">
84
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
96
+ <svg
97
+ class="pf-v6-svg"
98
+ fill="currentColor"
99
+ viewBox="0 0 32 32"
100
+ aria-hidden="true"
101
+ role="img"
102
+ width="1em"
103
+ height="1em"
104
+ >
105
+ <path
106
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
107
+ />
108
+ </svg>
85
109
  </span>
86
110
  </span>
87
111
  </span>
@@ -97,7 +121,19 @@ cssPrefix: pf-v6-c-form-control
97
121
  />
98
122
  <span class="pf-v6-c-form-control__utilities">
99
123
  <span class="pf-v6-c-form-control__icon pf-m-status">
100
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
124
+ <svg
125
+ class="pf-v6-svg"
126
+ fill="currentColor"
127
+ viewBox="0 0 32 32"
128
+ aria-hidden="true"
129
+ role="img"
130
+ width="1em"
131
+ height="1em"
132
+ >
133
+ <path
134
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
135
+ />
136
+ </svg>
101
137
  </span>
102
138
  </span>
103
139
  </span>
@@ -121,7 +157,19 @@ cssPrefix: pf-v6-c-form-control
121
157
  />
122
158
  <span class="pf-v6-c-form-control__utilities">
123
159
  <span class="pf-v6-c-form-control__icon">
124
- <i class="fas fa-calendar" aria-hidden="true"></i>
160
+ <svg
161
+ class="pf-v6-svg"
162
+ fill="currentColor"
163
+ viewBox="0 0 32 32"
164
+ aria-hidden="true"
165
+ role="img"
166
+ width="1em"
167
+ height="1em"
168
+ >
169
+ <path
170
+ d="M2.01 11.875V6.5c0-.827.673-1.5 1.5-1.5H9V3a1 1 0 1 1 2 0v2h10V3a1 1 0 1 1 2 0v2h5.5c.827 0 1.5.673 1.5 1.5v5.375H2.01Zm6.865 17.414v-6.164H2.711l6.164 6.164ZM2.01 14.125v6.75H9.5c.896 0 1.625.729 1.625 1.625V30H28.5c.827 0 1.5-.673 1.5-1.5V14.125H2.01Z"
171
+ />
172
+ </svg>
125
173
  </span>
126
174
  </span>
127
175
  </span>
@@ -136,10 +184,34 @@ cssPrefix: pf-v6-c-form-control
136
184
  />
137
185
  <span class="pf-v6-c-form-control__utilities">
138
186
  <span class="pf-v6-c-form-control__icon">
139
- <i class="fas fa-clock" aria-hidden="true"></i>
187
+ <svg
188
+ class="pf-v6-svg"
189
+ fill="currentColor"
190
+ viewBox="0 0 32 32"
191
+ aria-hidden="true"
192
+ role="img"
193
+ width="1em"
194
+ height="1em"
195
+ >
196
+ <path
197
+ d="M27 17.125a1.125 1.125 0 0 1 0-2.25h3.943C30.364 7.129 23.891 1 16 1S1.636 7.129 1.057 14.875H5a1.125 1.125 0 0 1 0 2.25H1.057c.551 7.373 6.445 13.267 13.818 13.818V27a1.125 1.125 0 0 1 2.25 0v3.943c7.373-.551 13.267-6.445 13.818-13.818H27Zm-6.205 3.67a1.12 1.12 0 0 1-1.59 0l-4-4a1.125 1.125 0 0 1-.33-.795V7a1.125 1.125 0 0 1 2.25 0v8.534l3.67 3.67a1.126 1.126 0 0 1 0 1.591Z"
198
+ />
199
+ </svg>
140
200
  </span>
141
201
  <span class="pf-v6-c-form-control__icon pf-m-status">
142
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
202
+ <svg
203
+ class="pf-v6-svg"
204
+ fill="currentColor"
205
+ viewBox="0 0 32 32"
206
+ aria-hidden="true"
207
+ role="img"
208
+ width="1em"
209
+ height="1em"
210
+ >
211
+ <path
212
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
213
+ />
214
+ </svg>
143
215
  </span>
144
216
  </span>
145
217
  </span>
@@ -154,7 +226,19 @@ cssPrefix: pf-v6-c-form-control
154
226
  />
155
227
  <span class="pf-v6-c-form-control__utilities">
156
228
  <span class="pf-v6-c-form-control__icon">
157
- <i class="fas fa-bell" aria-hidden="true"></i>
229
+ <svg
230
+ class="pf-v6-svg"
231
+ fill="currentColor"
232
+ viewBox="0 0 32 32"
233
+ aria-hidden="true"
234
+ role="img"
235
+ width="1em"
236
+ height="1em"
237
+ >
238
+ <path
239
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
240
+ />
241
+ </svg>
158
242
  </span>
159
243
  </span>
160
244
  </span>
@@ -182,7 +266,19 @@ cssPrefix: pf-v6-c-form-control
182
266
  </select>
183
267
  <span class="pf-v6-c-form-control__utilities">
184
268
  <span class="pf-v6-c-form-control__toggle-icon">
185
- <i class="fas fa-caret-down" aria-hidden="true"></i>
269
+ <svg
270
+ class="pf-v6-svg"
271
+ fill="currentColor"
272
+ viewBox="0 0 32 32"
273
+ aria-hidden="true"
274
+ role="img"
275
+ width="1em"
276
+ height="1em"
277
+ >
278
+ <path
279
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
280
+ />
281
+ </svg>
186
282
  </span>
187
283
  </span>
188
284
  </span>
@@ -204,7 +300,19 @@ cssPrefix: pf-v6-c-form-control
204
300
  </select>
205
301
  <span class="pf-v6-c-form-control__utilities">
206
302
  <span class="pf-v6-c-form-control__toggle-icon">
207
- <i class="fas fa-caret-down" aria-hidden="true"></i>
303
+ <svg
304
+ class="pf-v6-svg"
305
+ fill="currentColor"
306
+ viewBox="0 0 32 32"
307
+ aria-hidden="true"
308
+ role="img"
309
+ width="1em"
310
+ height="1em"
311
+ >
312
+ <path
313
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
314
+ />
315
+ </svg>
208
316
  </span>
209
317
  </span>
210
318
  </span>
@@ -227,7 +335,19 @@ cssPrefix: pf-v6-c-form-control
227
335
  </select>
228
336
  <span class="pf-v6-c-form-control__utilities">
229
337
  <span class="pf-v6-c-form-control__toggle-icon">
230
- <i class="fas fa-caret-down" aria-hidden="true"></i>
338
+ <svg
339
+ class="pf-v6-svg"
340
+ fill="currentColor"
341
+ viewBox="0 0 32 32"
342
+ aria-hidden="true"
343
+ role="img"
344
+ width="1em"
345
+ height="1em"
346
+ >
347
+ <path
348
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
349
+ />
350
+ </svg>
231
351
  </span>
232
352
  </span>
233
353
  </span>
@@ -251,10 +371,34 @@ cssPrefix: pf-v6-c-form-control
251
371
  </select>
252
372
  <span class="pf-v6-c-form-control__utilities">
253
373
  <span class="pf-v6-c-form-control__icon pf-m-status">
254
- <i class="fas fa-check-circle" aria-hidden="true"></i>
374
+ <svg
375
+ class="pf-v6-svg"
376
+ fill="currentColor"
377
+ viewBox="0 0 32 32"
378
+ aria-hidden="true"
379
+ role="img"
380
+ width="1em"
381
+ height="1em"
382
+ >
383
+ <path
384
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
385
+ />
386
+ </svg>
255
387
  </span>
256
388
  <span class="pf-v6-c-form-control__toggle-icon">
257
- <i class="fas fa-caret-down" aria-hidden="true"></i>
389
+ <svg
390
+ class="pf-v6-svg"
391
+ fill="currentColor"
392
+ viewBox="0 0 32 32"
393
+ aria-hidden="true"
394
+ role="img"
395
+ width="1em"
396
+ height="1em"
397
+ >
398
+ <path
399
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
400
+ />
401
+ </svg>
258
402
  </span>
259
403
  </span>
260
404
  </span>
@@ -278,10 +422,34 @@ cssPrefix: pf-v6-c-form-control
278
422
  </select>
279
423
  <span class="pf-v6-c-form-control__utilities">
280
424
  <span class="pf-v6-c-form-control__icon pf-m-status">
281
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
425
+ <svg
426
+ class="pf-v6-svg"
427
+ fill="currentColor"
428
+ viewBox="0 0 32 32"
429
+ aria-hidden="true"
430
+ role="img"
431
+ width="1em"
432
+ height="1em"
433
+ >
434
+ <path
435
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
436
+ />
437
+ </svg>
282
438
  </span>
283
439
  <span class="pf-v6-c-form-control__toggle-icon">
284
- <i class="fas fa-caret-down" aria-hidden="true"></i>
440
+ <svg
441
+ class="pf-v6-svg"
442
+ fill="currentColor"
443
+ viewBox="0 0 32 32"
444
+ aria-hidden="true"
445
+ role="img"
446
+ width="1em"
447
+ height="1em"
448
+ >
449
+ <path
450
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
451
+ />
452
+ </svg>
285
453
  </span>
286
454
  </span>
287
455
  </span>
@@ -307,10 +475,34 @@ cssPrefix: pf-v6-c-form-control
307
475
  </select>
308
476
  <span class="pf-v6-c-form-control__utilities">
309
477
  <span class="pf-v6-c-form-control__icon pf-m-status">
310
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
478
+ <svg
479
+ class="pf-v6-svg"
480
+ fill="currentColor"
481
+ viewBox="0 0 32 32"
482
+ aria-hidden="true"
483
+ role="img"
484
+ width="1em"
485
+ height="1em"
486
+ >
487
+ <path
488
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
489
+ />
490
+ </svg>
311
491
  </span>
312
492
  <span class="pf-v6-c-form-control__toggle-icon">
313
- <i class="fas fa-caret-down" aria-hidden="true"></i>
493
+ <svg
494
+ class="pf-v6-svg"
495
+ fill="currentColor"
496
+ viewBox="0 0 32 32"
497
+ aria-hidden="true"
498
+ role="img"
499
+ width="1em"
500
+ height="1em"
501
+ >
502
+ <path
503
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
504
+ />
505
+ </svg>
314
506
  </span>
315
507
  </span>
316
508
  </span>
@@ -333,7 +525,19 @@ cssPrefix: pf-v6-c-form-control
333
525
  </select>
334
526
  <span class="pf-v6-c-form-control__utilities">
335
527
  <span class="pf-v6-c-form-control__toggle-icon">
336
- <i class="fas fa-caret-down" aria-hidden="true"></i>
528
+ <svg
529
+ class="pf-v6-svg"
530
+ fill="currentColor"
531
+ viewBox="0 0 32 32"
532
+ aria-hidden="true"
533
+ role="img"
534
+ width="1em"
535
+ height="1em"
536
+ >
537
+ <path
538
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
539
+ />
540
+ </svg>
337
541
  </span>
338
542
  </span>
339
543
  </span>
@@ -391,7 +595,19 @@ cssPrefix: pf-v6-c-form-control
391
595
  </textarea>
392
596
  <span class="pf-v6-c-form-control__utilities">
393
597
  <span class="pf-v6-c-form-control__icon pf-m-status">
394
- <i class="fas fa-check-circle" aria-hidden="true"></i>
598
+ <svg
599
+ class="pf-v6-svg"
600
+ fill="currentColor"
601
+ viewBox="0 0 32 32"
602
+ aria-hidden="true"
603
+ role="img"
604
+ width="1em"
605
+ height="1em"
606
+ >
607
+ <path
608
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
609
+ />
610
+ </svg>
395
611
  </span>
396
612
  </span>
397
613
  </span>
@@ -405,7 +621,19 @@ cssPrefix: pf-v6-c-form-control
405
621
  </textarea>
406
622
  <span class="pf-v6-c-form-control__utilities">
407
623
  <span class="pf-v6-c-form-control__icon pf-m-status">
408
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
624
+ <svg
625
+ class="pf-v6-svg"
626
+ fill="currentColor"
627
+ viewBox="0 0 32 32"
628
+ aria-hidden="true"
629
+ role="img"
630
+ width="1em"
631
+ height="1em"
632
+ >
633
+ <path
634
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
635
+ />
636
+ </svg>
409
637
  </span>
410
638
  </span>
411
639
  </span>
@@ -421,7 +649,19 @@ cssPrefix: pf-v6-c-form-control
421
649
  </textarea>
422
650
  <span class="pf-v6-c-form-control__utilities">
423
651
  <span class="pf-v6-c-form-control__icon pf-m-status">
424
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
652
+ <svg
653
+ class="pf-v6-svg"
654
+ fill="currentColor"
655
+ viewBox="0 0 32 32"
656
+ aria-hidden="true"
657
+ role="img"
658
+ width="1em"
659
+ height="1em"
660
+ >
661
+ <path
662
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
663
+ />
664
+ </svg>
425
665
  </span>
426
666
  </span>
427
667
  </span>
package/docs/components/HelperText/examples/HelperText.md CHANGED
@@ -15,7 +15,17 @@ cssPrefix: pf-v6-c-helper-text
15
15
  <div class="pf-v6-c-helper-text">
16
16
  <div class="pf-v6-c-helper-text__item pf-m-indeterminate">
17
17
  <span class="pf-v6-c-helper-text__item-icon">
18
- <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
18
+ <svg
19
+ class="pf-v6-svg"
20
+ fill="currentColor"
21
+ viewBox="0 0 32 32"
22
+ aria-hidden="true"
23
+ role="img"
24
+ width="1em"
25
+ height="1em"
26
+ >
27
+ <path d="M29 17H3a1 1 0 0 1 0-2h26a1 1 0 0 1 0 2Z" />
28
+ </svg>
19
29
  </span>
20
30
  <span class="pf-v6-c-helper-text__item-text">
21
31
  <span class="pf-v6-screen-reader">Indeterminate:</span>
@@ -26,7 +36,19 @@ cssPrefix: pf-v6-c-helper-text
26
36
  <div class="pf-v6-c-helper-text">
27
37
  <div class="pf-v6-c-helper-text__item pf-m-warning">
28
38
  <span class="pf-v6-c-helper-text__item-icon">
29
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
39
+ <svg
40
+ class="pf-v6-svg"
41
+ fill="currentColor"
42
+ viewBox="0 0 32 32"
43
+ aria-hidden="true"
44
+ role="img"
45
+ width="1em"
46
+ height="1em"
47
+ >
48
+ <path
49
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
50
+ />
51
+ </svg>
30
52
  </span>
31
53
  <span class="pf-v6-c-helper-text__item-text">
32
54
  <span class="pf-v6-screen-reader">Warning:</span>
@@ -37,7 +59,19 @@ cssPrefix: pf-v6-c-helper-text
37
59
  <div class="pf-v6-c-helper-text">
38
60
  <div class="pf-v6-c-helper-text__item pf-m-success">
39
61
  <span class="pf-v6-c-helper-text__item-icon">
40
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
62
+ <svg
63
+ class="pf-v6-svg"
64
+ fill="currentColor"
65
+ viewBox="0 0 32 32"
66
+ aria-hidden="true"
67
+ role="img"
68
+ width="1em"
69
+ height="1em"
70
+ >
71
+ <path
72
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
73
+ />
74
+ </svg>
41
75
  </span>
42
76
  <span class="pf-v6-c-helper-text__item-text">
43
77
  <span class="pf-v6-screen-reader">Success:</span>
@@ -48,7 +82,19 @@ cssPrefix: pf-v6-c-helper-text
48
82
  <div class="pf-v6-c-helper-text">
49
83
  <div class="pf-v6-c-helper-text__item pf-m-error">
50
84
  <span class="pf-v6-c-helper-text__item-icon">
51
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
85
+ <svg
86
+ class="pf-v6-svg"
87
+ fill="currentColor"
88
+ viewBox="0 0 32 32"
89
+ aria-hidden="true"
90
+ role="img"
91
+ width="1em"
92
+ height="1em"
93
+ >
94
+ <path
95
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
96
+ />
97
+ </svg>
52
98
  </span>
53
99
  <span class="pf-v6-c-helper-text__item-text">
54
100
  <span class="pf-v6-screen-reader">Error:</span>
@@ -95,7 +141,17 @@ If the `HelperTextItem` components are expected or intended to dynamically updat
95
141
  <div class="pf-v6-c-helper-text">
96
142
  <div class="pf-v6-c-helper-text__item pf-m-indeterminate pf-m-dynamic">
97
143
  <span class="pf-v6-c-helper-text__item-icon">
98
- <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
144
+ <svg
145
+ class="pf-v6-svg"
146
+ fill="currentColor"
147
+ viewBox="0 0 32 32"
148
+ aria-hidden="true"
149
+ role="img"
150
+ width="1em"
151
+ height="1em"
152
+ >
153
+ <path d="M29 17H3a1 1 0 0 1 0-2h26a1 1 0 0 1 0 2Z" />
154
+ </svg>
99
155
  </span>
100
156
  <span class="pf-v6-c-helper-text__item-text">
101
157
  <span class="pf-v6-screen-reader">Indeterminate:</span>
@@ -106,7 +162,19 @@ If the `HelperTextItem` components are expected or intended to dynamically updat
106
162
  <div class="pf-v6-c-helper-text">
107
163
  <div class="pf-v6-c-helper-text__item pf-m-warning pf-m-dynamic">
108
164
  <span class="pf-v6-c-helper-text__item-icon">
109
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
165
+ <svg
166
+ class="pf-v6-svg"
167
+ fill="currentColor"
168
+ viewBox="0 0 32 32"
169
+ aria-hidden="true"
170
+ role="img"
171
+ width="1em"
172
+ height="1em"
173
+ >
174
+ <path
175
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
176
+ />
177
+ </svg>
110
178
  </span>
111
179
  <span class="pf-v6-c-helper-text__item-text">
112
180
  <span class="pf-v6-screen-reader">Warning:</span>
@@ -117,7 +185,19 @@ If the `HelperTextItem` components are expected or intended to dynamically updat
117
185
  <div class="pf-v6-c-helper-text">
118
186
  <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
119
187
  <span class="pf-v6-c-helper-text__item-icon">
120
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
188
+ <svg
189
+ class="pf-v6-svg"
190
+ fill="currentColor"
191
+ viewBox="0 0 32 32"
192
+ aria-hidden="true"
193
+ role="img"
194
+ width="1em"
195
+ height="1em"
196
+ >
197
+ <path
198
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
199
+ />
200
+ </svg>
121
201
  </span>
122
202
  <span class="pf-v6-c-helper-text__item-text">
123
203
  <span class="pf-v6-screen-reader">Success:</span>
@@ -128,7 +208,19 @@ If the `HelperTextItem` components are expected or intended to dynamically updat
128
208
  <div class="pf-v6-c-helper-text">
129
209
  <div class="pf-v6-c-helper-text__item pf-m-error pf-m-dynamic">
130
210
  <span class="pf-v6-c-helper-text__item-icon">
131
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
211
+ <svg
212
+ class="pf-v6-svg"
213
+ fill="currentColor"
214
+ viewBox="0 0 32 32"
215
+ aria-hidden="true"
216
+ role="img"
217
+ width="1em"
218
+ height="1em"
219
+ >
220
+ <path
221
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
222
+ />
223
+ </svg>
132
224
  </span>
133
225
  <span class="pf-v6-c-helper-text__item-text">
134
226
  <span class="pf-v6-screen-reader">Error:</span>
@@ -145,7 +237,19 @@ If the `HelperTextItem` components are expected or intended to dynamically updat
145
237
  <ul class="pf-v6-c-helper-text" role="list">
146
238
  <li class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
147
239
  <span class="pf-v6-c-helper-text__item-icon">
148
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
240
+ <svg
241
+ class="pf-v6-svg"
242
+ fill="currentColor"
243
+ viewBox="0 0 32 32"
244
+ aria-hidden="true"
245
+ role="img"
246
+ width="1em"
247
+ height="1em"
248
+ >
249
+ <path
250
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
251
+ />
252
+ </svg>
149
253
  </span>
150
254
  <span class="pf-v6-c-helper-text__item-text">
151
255
  <span class="pf-v6-screen-reader">Success:</span>
@@ -154,7 +258,19 @@ If the `HelperTextItem` components are expected or intended to dynamically updat
154
258
  </li>
155
259
  <li class="pf-v6-c-helper-text__item pf-m-error pf-m-dynamic">
156
260
  <span class="pf-v6-c-helper-text__item-icon">
157
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
261
+ <svg
262
+ class="pf-v6-svg"
263
+ fill="currentColor"
264
+ viewBox="0 0 32 32"
265
+ aria-hidden="true"
266
+ role="img"
267
+ width="1em"
268
+ height="1em"
269
+ >
270
+ <path
271
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
272
+ />
273
+ </svg>
158
274
  </span>
159
275
  <span class="pf-v6-c-helper-text__item-text">
160
276
  <span class="pf-v6-screen-reader">Error:</span>
@@ -163,7 +279,19 @@ If the `HelperTextItem` components are expected or intended to dynamically updat
163
279
  </li>
164
280
  <li class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
165
281
  <span class="pf-v6-c-helper-text__item-icon">
166
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
282
+ <svg
283
+ class="pf-v6-svg"
284
+ fill="currentColor"
285
+ viewBox="0 0 32 32"
286
+ aria-hidden="true"
287
+ role="img"
288
+ width="1em"
289
+ height="1em"
290
+ >
291
+ <path
292
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
293
+ />
294
+ </svg>
167
295
  </span>
168
296
  <span class="pf-v6-c-helper-text__item-text">
169
297
  <span class="pf-v6-screen-reader">Success:</span>