@patternfly/patternfly 6.6.0-prerelease.26 → 6.6.0-prerelease.28
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.
- package/components/Button/button.css +2 -3
- package/components/Button/button.scss +3 -4
- package/components/Label/label.css +9 -3
- package/components/Label/label.scss +9 -3
- package/components/_index.css +11 -6
- package/docs/components/CodeEditor/examples/CodeEditor.md +131 -47
- package/docs/components/DataList/examples/DataList.md +143 -11
- package/docs/components/DatePicker/examples/DatePicker.md +26 -2
- package/docs/components/DescriptionList/examples/DescriptionList.md +115 -55
- package/docs/components/DualListSelector/examples/DualListSelector.md +270 -54
- package/docs/components/EmptyState/examples/EmptyState.md +12 -12
- package/docs/components/FileUpload/examples/FileUpload.md +26 -2
- package/docs/components/Form/examples/Form.md +104 -8
- package/docs/components/FormControl/examples/FormControl.md +260 -20
- package/docs/components/HelperText/examples/HelperText.md +139 -11
- package/docs/components/Icon/examples/Icon.md +403 -31
- package/docs/components/InlineEdit/examples/InlineEdit.md +13 -1
- package/docs/components/InputGroup/examples/InputGroup.md +19 -7
- package/docs/components/Label/examples/Label.md +4029 -765
- package/docs/components/List/examples/List.md +78 -6
- package/docs/components/Login/examples/Login.md +104 -8
- package/docs/components/Menu/examples/Menu.md +221 -17
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +247 -19
- package/docs/components/NumberInput/examples/NumberInput.md +301 -25
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +169 -13
- package/docs/components/Switch/examples/Switch.md +52 -4
- package/docs/components/Table/examples/Table.md +936 -72
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +309 -81
- package/docs/components/Toolbar/examples/Toolbar.md +117 -9
- package/docs/components/TreeView/examples/TreeView.md +186 -18
- package/docs/components/Wizard/examples/Wizard.md +325 -25
- package/docs/demos/Alert/examples/Alert.md +149 -26
- package/docs/demos/Card/examples/Card.md +280 -34
- package/docs/demos/Dashboard/examples/Dashboard.md +72 -18
- package/docs/demos/DataList/examples/DataList.md +26 -2
- package/docs/demos/Form/examples/BasicForms.md +56 -8
- package/docs/demos/HelperText/examples/HelperText.md +104 -8
- package/docs/demos/Masthead/examples/Masthead.md +52 -4
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +176 -14
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +52 -4
- package/docs/demos/Table/examples/Table.md +247 -19
- package/docs/demos/Toolbar/examples/Toolbar.md +103 -10
- package/docs/demos/Wizard/examples/Wizard.md +117 -9
- package/package.json +1 -1
- package/patternfly-no-globals.css +11 -6
- package/patternfly.css +11 -6
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -9,7 +9,19 @@ cssPrefix: pf-v6-c-icon
|
|
|
9
9
|
```html
|
|
10
10
|
<span class="pf-v6-c-icon">
|
|
11
11
|
<span class="pf-v6-c-icon__content">
|
|
12
|
-
<
|
|
12
|
+
<svg
|
|
13
|
+
class="pf-v6-svg"
|
|
14
|
+
fill="currentColor"
|
|
15
|
+
viewBox="0 0 32 32"
|
|
16
|
+
aria-hidden="true"
|
|
17
|
+
role="img"
|
|
18
|
+
width="1em"
|
|
19
|
+
height="1em"
|
|
20
|
+
>
|
|
21
|
+
<path
|
|
22
|
+
d="m22.707 24.707-5.646 5.646c-.292.292-.676.438-1.061.438s-.768-.146-1.061-.438l-5.646-5.646a.999.999 0 1 1 1.414-1.414L15 27.586V2a1 1 0 0 1 2 0v25.586l4.293-4.293a.999.999 0 1 1 1.414 1.414Z"
|
|
23
|
+
/>
|
|
24
|
+
</svg>
|
|
13
25
|
</span>
|
|
14
26
|
</span>
|
|
15
27
|
|
|
@@ -74,32 +86,104 @@ cssPrefix: pf-v6-c-icon
|
|
|
74
86
|
```html
|
|
75
87
|
<span class="pf-v6-c-icon pf-m-sm">
|
|
76
88
|
<span class="pf-v6-c-icon__content">
|
|
77
|
-
<
|
|
89
|
+
<svg
|
|
90
|
+
class="pf-v6-svg"
|
|
91
|
+
fill="currentColor"
|
|
92
|
+
viewBox="0 0 32 32"
|
|
93
|
+
aria-hidden="true"
|
|
94
|
+
role="img"
|
|
95
|
+
width="1em"
|
|
96
|
+
height="1em"
|
|
97
|
+
>
|
|
98
|
+
<path
|
|
99
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
100
|
+
/>
|
|
101
|
+
</svg>
|
|
78
102
|
</span>
|
|
79
103
|
</span>
|
|
80
104
|
<span class="pf-v6-c-icon pf-m-md">
|
|
81
105
|
<span class="pf-v6-c-icon__content">
|
|
82
|
-
<
|
|
106
|
+
<svg
|
|
107
|
+
class="pf-v6-svg"
|
|
108
|
+
fill="currentColor"
|
|
109
|
+
viewBox="0 0 32 32"
|
|
110
|
+
aria-hidden="true"
|
|
111
|
+
role="img"
|
|
112
|
+
width="1em"
|
|
113
|
+
height="1em"
|
|
114
|
+
>
|
|
115
|
+
<path
|
|
116
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
117
|
+
/>
|
|
118
|
+
</svg>
|
|
83
119
|
</span>
|
|
84
120
|
</span>
|
|
85
121
|
<span class="pf-v6-c-icon pf-m-lg">
|
|
86
122
|
<span class="pf-v6-c-icon__content">
|
|
87
|
-
<
|
|
123
|
+
<svg
|
|
124
|
+
class="pf-v6-svg"
|
|
125
|
+
fill="currentColor"
|
|
126
|
+
viewBox="0 0 32 32"
|
|
127
|
+
aria-hidden="true"
|
|
128
|
+
role="img"
|
|
129
|
+
width="1em"
|
|
130
|
+
height="1em"
|
|
131
|
+
>
|
|
132
|
+
<path
|
|
133
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
134
|
+
/>
|
|
135
|
+
</svg>
|
|
88
136
|
</span>
|
|
89
137
|
</span>
|
|
90
138
|
<span class="pf-v6-c-icon pf-m-xl">
|
|
91
139
|
<span class="pf-v6-c-icon__content">
|
|
92
|
-
<
|
|
140
|
+
<svg
|
|
141
|
+
class="pf-v6-svg"
|
|
142
|
+
fill="currentColor"
|
|
143
|
+
viewBox="0 0 32 32"
|
|
144
|
+
aria-hidden="true"
|
|
145
|
+
role="img"
|
|
146
|
+
width="1em"
|
|
147
|
+
height="1em"
|
|
148
|
+
>
|
|
149
|
+
<path
|
|
150
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
151
|
+
/>
|
|
152
|
+
</svg>
|
|
93
153
|
</span>
|
|
94
154
|
</span>
|
|
95
155
|
<span class="pf-v6-c-icon pf-m-2xl">
|
|
96
156
|
<span class="pf-v6-c-icon__content">
|
|
97
|
-
<
|
|
157
|
+
<svg
|
|
158
|
+
class="pf-v6-svg"
|
|
159
|
+
fill="currentColor"
|
|
160
|
+
viewBox="0 0 32 32"
|
|
161
|
+
aria-hidden="true"
|
|
162
|
+
role="img"
|
|
163
|
+
width="1em"
|
|
164
|
+
height="1em"
|
|
165
|
+
>
|
|
166
|
+
<path
|
|
167
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
168
|
+
/>
|
|
169
|
+
</svg>
|
|
98
170
|
</span>
|
|
99
171
|
</span>
|
|
100
172
|
<span class="pf-v6-c-icon pf-m-3xl">
|
|
101
173
|
<span class="pf-v6-c-icon__content">
|
|
102
|
-
<
|
|
174
|
+
<svg
|
|
175
|
+
class="pf-v6-svg"
|
|
176
|
+
fill="currentColor"
|
|
177
|
+
viewBox="0 0 32 32"
|
|
178
|
+
aria-hidden="true"
|
|
179
|
+
role="img"
|
|
180
|
+
width="1em"
|
|
181
|
+
height="1em"
|
|
182
|
+
>
|
|
183
|
+
<path
|
|
184
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
185
|
+
/>
|
|
186
|
+
</svg>
|
|
103
187
|
</span>
|
|
104
188
|
</span>
|
|
105
189
|
|
|
@@ -110,17 +194,53 @@ cssPrefix: pf-v6-c-icon
|
|
|
110
194
|
```html
|
|
111
195
|
<span class="pf-v6-c-icon pf-m-body-sm">
|
|
112
196
|
<span class="pf-v6-c-icon__content">
|
|
113
|
-
<
|
|
197
|
+
<svg
|
|
198
|
+
class="pf-v6-svg"
|
|
199
|
+
fill="currentColor"
|
|
200
|
+
viewBox="0 0 32 32"
|
|
201
|
+
aria-hidden="true"
|
|
202
|
+
role="img"
|
|
203
|
+
width="1em"
|
|
204
|
+
height="1em"
|
|
205
|
+
>
|
|
206
|
+
<path
|
|
207
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
208
|
+
/>
|
|
209
|
+
</svg>
|
|
114
210
|
</span>
|
|
115
211
|
</span>
|
|
116
212
|
<span class="pf-v6-c-icon pf-m-body-default">
|
|
117
213
|
<span class="pf-v6-c-icon__content">
|
|
118
|
-
<
|
|
214
|
+
<svg
|
|
215
|
+
class="pf-v6-svg"
|
|
216
|
+
fill="currentColor"
|
|
217
|
+
viewBox="0 0 32 32"
|
|
218
|
+
aria-hidden="true"
|
|
219
|
+
role="img"
|
|
220
|
+
width="1em"
|
|
221
|
+
height="1em"
|
|
222
|
+
>
|
|
223
|
+
<path
|
|
224
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
225
|
+
/>
|
|
226
|
+
</svg>
|
|
119
227
|
</span>
|
|
120
228
|
</span>
|
|
121
229
|
<span class="pf-v6-c-icon pf-m-body-lg">
|
|
122
230
|
<span class="pf-v6-c-icon__content">
|
|
123
|
-
<
|
|
231
|
+
<svg
|
|
232
|
+
class="pf-v6-svg"
|
|
233
|
+
fill="currentColor"
|
|
234
|
+
viewBox="0 0 32 32"
|
|
235
|
+
aria-hidden="true"
|
|
236
|
+
role="img"
|
|
237
|
+
width="1em"
|
|
238
|
+
height="1em"
|
|
239
|
+
>
|
|
240
|
+
<path
|
|
241
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
242
|
+
/>
|
|
243
|
+
</svg>
|
|
124
244
|
</span>
|
|
125
245
|
</span>
|
|
126
246
|
|
|
@@ -131,32 +251,104 @@ cssPrefix: pf-v6-c-icon
|
|
|
131
251
|
```html
|
|
132
252
|
<span class="pf-v6-c-icon pf-m-heading-sm">
|
|
133
253
|
<span class="pf-v6-c-icon__content">
|
|
134
|
-
<
|
|
254
|
+
<svg
|
|
255
|
+
class="pf-v6-svg"
|
|
256
|
+
fill="currentColor"
|
|
257
|
+
viewBox="0 0 32 32"
|
|
258
|
+
aria-hidden="true"
|
|
259
|
+
role="img"
|
|
260
|
+
width="1em"
|
|
261
|
+
height="1em"
|
|
262
|
+
>
|
|
263
|
+
<path
|
|
264
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
265
|
+
/>
|
|
266
|
+
</svg>
|
|
135
267
|
</span>
|
|
136
268
|
</span>
|
|
137
269
|
<span class="pf-v6-c-icon pf-m-heading-md">
|
|
138
270
|
<span class="pf-v6-c-icon__content">
|
|
139
|
-
<
|
|
271
|
+
<svg
|
|
272
|
+
class="pf-v6-svg"
|
|
273
|
+
fill="currentColor"
|
|
274
|
+
viewBox="0 0 32 32"
|
|
275
|
+
aria-hidden="true"
|
|
276
|
+
role="img"
|
|
277
|
+
width="1em"
|
|
278
|
+
height="1em"
|
|
279
|
+
>
|
|
280
|
+
<path
|
|
281
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
282
|
+
/>
|
|
283
|
+
</svg>
|
|
140
284
|
</span>
|
|
141
285
|
</span>
|
|
142
286
|
<span class="pf-v6-c-icon pf-m-heading-lg">
|
|
143
287
|
<span class="pf-v6-c-icon__content">
|
|
144
|
-
<
|
|
288
|
+
<svg
|
|
289
|
+
class="pf-v6-svg"
|
|
290
|
+
fill="currentColor"
|
|
291
|
+
viewBox="0 0 32 32"
|
|
292
|
+
aria-hidden="true"
|
|
293
|
+
role="img"
|
|
294
|
+
width="1em"
|
|
295
|
+
height="1em"
|
|
296
|
+
>
|
|
297
|
+
<path
|
|
298
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
299
|
+
/>
|
|
300
|
+
</svg>
|
|
145
301
|
</span>
|
|
146
302
|
</span>
|
|
147
303
|
<span class="pf-v6-c-icon pf-m-heading-xl">
|
|
148
304
|
<span class="pf-v6-c-icon__content">
|
|
149
|
-
<
|
|
305
|
+
<svg
|
|
306
|
+
class="pf-v6-svg"
|
|
307
|
+
fill="currentColor"
|
|
308
|
+
viewBox="0 0 32 32"
|
|
309
|
+
aria-hidden="true"
|
|
310
|
+
role="img"
|
|
311
|
+
width="1em"
|
|
312
|
+
height="1em"
|
|
313
|
+
>
|
|
314
|
+
<path
|
|
315
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
316
|
+
/>
|
|
317
|
+
</svg>
|
|
150
318
|
</span>
|
|
151
319
|
</span>
|
|
152
320
|
<span class="pf-v6-c-icon pf-m-heading-2xl">
|
|
153
321
|
<span class="pf-v6-c-icon__content">
|
|
154
|
-
<
|
|
322
|
+
<svg
|
|
323
|
+
class="pf-v6-svg"
|
|
324
|
+
fill="currentColor"
|
|
325
|
+
viewBox="0 0 32 32"
|
|
326
|
+
aria-hidden="true"
|
|
327
|
+
role="img"
|
|
328
|
+
width="1em"
|
|
329
|
+
height="1em"
|
|
330
|
+
>
|
|
331
|
+
<path
|
|
332
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
333
|
+
/>
|
|
334
|
+
</svg>
|
|
155
335
|
</span>
|
|
156
336
|
</span>
|
|
157
337
|
<span class="pf-v6-c-icon pf-m-heading-3xl">
|
|
158
338
|
<span class="pf-v6-c-icon__content">
|
|
159
|
-
<
|
|
339
|
+
<svg
|
|
340
|
+
class="pf-v6-svg"
|
|
341
|
+
fill="currentColor"
|
|
342
|
+
viewBox="0 0 32 32"
|
|
343
|
+
aria-hidden="true"
|
|
344
|
+
role="img"
|
|
345
|
+
width="1em"
|
|
346
|
+
height="1em"
|
|
347
|
+
>
|
|
348
|
+
<path
|
|
349
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
350
|
+
/>
|
|
351
|
+
</svg>
|
|
160
352
|
</span>
|
|
161
353
|
</span>
|
|
162
354
|
|
|
@@ -260,22 +452,70 @@ Use a size modifier on the icon container to maintain a consistent size, even if
|
|
|
260
452
|
```html
|
|
261
453
|
<span class="pf-v6-c-icon pf-m-3xl pf-m-inline">
|
|
262
454
|
<span class="pf-v6-c-icon__content pf-m-lg">
|
|
263
|
-
<
|
|
455
|
+
<svg
|
|
456
|
+
class="pf-v6-svg"
|
|
457
|
+
fill="currentColor"
|
|
458
|
+
viewBox="0 0 32 32"
|
|
459
|
+
aria-hidden="true"
|
|
460
|
+
role="img"
|
|
461
|
+
width="1em"
|
|
462
|
+
height="1em"
|
|
463
|
+
>
|
|
464
|
+
<path
|
|
465
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
466
|
+
/>
|
|
467
|
+
</svg>
|
|
264
468
|
</span>
|
|
265
469
|
</span>
|
|
266
470
|
<span class="pf-v6-c-icon pf-m-3xl pf-m-inline">
|
|
267
471
|
<span class="pf-v6-c-icon__content pf-m-xl">
|
|
268
|
-
<
|
|
472
|
+
<svg
|
|
473
|
+
class="pf-v6-svg"
|
|
474
|
+
fill="currentColor"
|
|
475
|
+
viewBox="0 0 32 32"
|
|
476
|
+
aria-hidden="true"
|
|
477
|
+
role="img"
|
|
478
|
+
width="1em"
|
|
479
|
+
height="1em"
|
|
480
|
+
>
|
|
481
|
+
<path
|
|
482
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
483
|
+
/>
|
|
484
|
+
</svg>
|
|
269
485
|
</span>
|
|
270
486
|
</span>
|
|
271
487
|
<span class="pf-v6-c-icon pf-m-3xl pf-m-inline">
|
|
272
488
|
<span class="pf-v6-c-icon__content pf-m-2xl">
|
|
273
|
-
<
|
|
489
|
+
<svg
|
|
490
|
+
class="pf-v6-svg"
|
|
491
|
+
fill="currentColor"
|
|
492
|
+
viewBox="0 0 32 32"
|
|
493
|
+
aria-hidden="true"
|
|
494
|
+
role="img"
|
|
495
|
+
width="1em"
|
|
496
|
+
height="1em"
|
|
497
|
+
>
|
|
498
|
+
<path
|
|
499
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
500
|
+
/>
|
|
501
|
+
</svg>
|
|
274
502
|
</span>
|
|
275
503
|
</span>
|
|
276
504
|
<span class="pf-v6-c-icon pf-m-3xl pf-m-inline">
|
|
277
505
|
<span class="pf-v6-c-icon__content pf-m-3xl">
|
|
278
|
-
<
|
|
506
|
+
<svg
|
|
507
|
+
class="pf-v6-svg"
|
|
508
|
+
fill="currentColor"
|
|
509
|
+
viewBox="0 0 32 32"
|
|
510
|
+
aria-hidden="true"
|
|
511
|
+
role="img"
|
|
512
|
+
width="1em"
|
|
513
|
+
height="1em"
|
|
514
|
+
>
|
|
515
|
+
<path
|
|
516
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
517
|
+
/>
|
|
518
|
+
</svg>
|
|
279
519
|
</span>
|
|
280
520
|
</span>
|
|
281
521
|
|
|
@@ -289,7 +529,19 @@ Use a size modifier on the icon container to maintain a consistent size, even if
|
|
|
289
529
|
Heading
|
|
290
530
|
<span class="pf-v6-c-icon pf-m-inline">
|
|
291
531
|
<span class="pf-v6-c-icon__content">
|
|
292
|
-
<
|
|
532
|
+
<svg
|
|
533
|
+
class="pf-v6-svg"
|
|
534
|
+
fill="currentColor"
|
|
535
|
+
viewBox="0 0 32 32"
|
|
536
|
+
aria-hidden="true"
|
|
537
|
+
role="img"
|
|
538
|
+
width="1em"
|
|
539
|
+
height="1em"
|
|
540
|
+
>
|
|
541
|
+
<path
|
|
542
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
543
|
+
/>
|
|
544
|
+
</svg>
|
|
293
545
|
</span>
|
|
294
546
|
</span>
|
|
295
547
|
</h1>
|
|
@@ -301,14 +553,38 @@ Use a size modifier on the icon container to maintain a consistent size, even if
|
|
|
301
553
|
Second level
|
|
302
554
|
<span class="pf-v6-c-icon pf-m-inline">
|
|
303
555
|
<span class="pf-v6-c-icon__content">
|
|
304
|
-
<
|
|
556
|
+
<svg
|
|
557
|
+
class="pf-v6-svg"
|
|
558
|
+
fill="currentColor"
|
|
559
|
+
viewBox="0 0 32 32"
|
|
560
|
+
aria-hidden="true"
|
|
561
|
+
role="img"
|
|
562
|
+
width="1em"
|
|
563
|
+
height="1em"
|
|
564
|
+
>
|
|
565
|
+
<path
|
|
566
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
567
|
+
/>
|
|
568
|
+
</svg>
|
|
305
569
|
</span>
|
|
306
570
|
</span>
|
|
307
571
|
</h2>
|
|
308
572
|
<p>
|
|
309
573
|
<span class="pf-v6-c-icon pf-m-inline">
|
|
310
574
|
<span class="pf-v6-c-icon__content">
|
|
311
|
-
<
|
|
575
|
+
<svg
|
|
576
|
+
class="pf-v6-svg"
|
|
577
|
+
fill="currentColor"
|
|
578
|
+
viewBox="0 0 32 32"
|
|
579
|
+
aria-hidden="true"
|
|
580
|
+
role="img"
|
|
581
|
+
width="1em"
|
|
582
|
+
height="1em"
|
|
583
|
+
>
|
|
584
|
+
<path
|
|
585
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
586
|
+
/>
|
|
587
|
+
</svg>
|
|
312
588
|
</span>
|
|
313
589
|
</span>
|
|
314
590
|
Curabitur accumsan turpis pharetra
|
|
@@ -316,7 +592,19 @@ Use a size modifier on the icon container to maintain a consistent size, even if
|
|
|
316
592
|
augue tincidunt
|
|
317
593
|
<span class="pf-v6-c-icon pf-m-inline">
|
|
318
594
|
<span class="pf-v6-c-icon__content">
|
|
319
|
-
<
|
|
595
|
+
<svg
|
|
596
|
+
class="pf-v6-svg"
|
|
597
|
+
fill="currentColor"
|
|
598
|
+
viewBox="0 0 32 32"
|
|
599
|
+
aria-hidden="true"
|
|
600
|
+
role="img"
|
|
601
|
+
width="1em"
|
|
602
|
+
height="1em"
|
|
603
|
+
>
|
|
604
|
+
<path
|
|
605
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
606
|
+
/>
|
|
607
|
+
</svg>
|
|
320
608
|
</span>
|
|
321
609
|
</span>
|
|
322
610
|
</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel
|
|
@@ -326,32 +614,92 @@ Use a size modifier on the icon container to maintain a consistent size, even if
|
|
|
326
614
|
Sometimes you need small text
|
|
327
615
|
<span class="pf-v6-c-icon pf-m-inline">
|
|
328
616
|
<span class="pf-v6-c-icon__content">
|
|
329
|
-
<
|
|
617
|
+
<svg
|
|
618
|
+
class="pf-v6-svg"
|
|
619
|
+
fill="currentColor"
|
|
620
|
+
viewBox="0 0 32 32"
|
|
621
|
+
aria-hidden="true"
|
|
622
|
+
role="img"
|
|
623
|
+
width="1em"
|
|
624
|
+
height="1em"
|
|
625
|
+
>
|
|
626
|
+
<path
|
|
627
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
628
|
+
/>
|
|
629
|
+
</svg>
|
|
330
630
|
</span>
|
|
331
631
|
</span>
|
|
332
632
|
</small>
|
|
333
633
|
</div>Inline with size specified:
|
|
334
634
|
<span class="pf-v6-c-icon pf-m-sm pf-m-inline">
|
|
335
635
|
<span class="pf-v6-c-icon__content">
|
|
336
|
-
<
|
|
636
|
+
<svg
|
|
637
|
+
class="pf-v6-svg"
|
|
638
|
+
fill="currentColor"
|
|
639
|
+
viewBox="0 0 32 32"
|
|
640
|
+
aria-hidden="true"
|
|
641
|
+
role="img"
|
|
642
|
+
width="1em"
|
|
643
|
+
height="1em"
|
|
644
|
+
>
|
|
645
|
+
<path
|
|
646
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
647
|
+
/>
|
|
648
|
+
</svg>
|
|
337
649
|
</span>
|
|
338
650
|
</span>
|
|
339
651
|
small,
|
|
340
652
|
<span class="pf-v6-c-icon pf-m-md pf-m-inline">
|
|
341
653
|
<span class="pf-v6-c-icon__content">
|
|
342
|
-
<
|
|
654
|
+
<svg
|
|
655
|
+
class="pf-v6-svg"
|
|
656
|
+
fill="currentColor"
|
|
657
|
+
viewBox="0 0 32 32"
|
|
658
|
+
aria-hidden="true"
|
|
659
|
+
role="img"
|
|
660
|
+
width="1em"
|
|
661
|
+
height="1em"
|
|
662
|
+
>
|
|
663
|
+
<path
|
|
664
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
665
|
+
/>
|
|
666
|
+
</svg>
|
|
343
667
|
</span>
|
|
344
668
|
</span>
|
|
345
669
|
medium,
|
|
346
670
|
<span class="pf-v6-c-icon pf-m-lg pf-m-inline">
|
|
347
671
|
<span class="pf-v6-c-icon__content">
|
|
348
|
-
<
|
|
672
|
+
<svg
|
|
673
|
+
class="pf-v6-svg"
|
|
674
|
+
fill="currentColor"
|
|
675
|
+
viewBox="0 0 32 32"
|
|
676
|
+
aria-hidden="true"
|
|
677
|
+
role="img"
|
|
678
|
+
width="1em"
|
|
679
|
+
height="1em"
|
|
680
|
+
>
|
|
681
|
+
<path
|
|
682
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
683
|
+
/>
|
|
684
|
+
</svg>
|
|
349
685
|
</span>
|
|
350
686
|
</span>
|
|
351
687
|
large,
|
|
352
688
|
<span class="pf-v6-c-icon pf-m-xl pf-m-inline">
|
|
353
689
|
<span class="pf-v6-c-icon__content">
|
|
354
|
-
<
|
|
690
|
+
<svg
|
|
691
|
+
class="pf-v6-svg"
|
|
692
|
+
fill="currentColor"
|
|
693
|
+
viewBox="0 0 32 32"
|
|
694
|
+
aria-hidden="true"
|
|
695
|
+
role="img"
|
|
696
|
+
width="1em"
|
|
697
|
+
height="1em"
|
|
698
|
+
>
|
|
699
|
+
<path
|
|
700
|
+
d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
|
|
701
|
+
/>
|
|
702
|
+
</svg>
|
|
355
703
|
</span>
|
|
356
704
|
</span>
|
|
357
705
|
extra large
|
|
@@ -363,7 +711,19 @@ extra large
|
|
|
363
711
|
```html
|
|
364
712
|
<span class="pf-v6-c-icon pf-m-md pf-m-in-progress">
|
|
365
713
|
<span class="pf-v6-c-icon__content">
|
|
366
|
-
<
|
|
714
|
+
<svg
|
|
715
|
+
class="pf-v6-svg"
|
|
716
|
+
fill="currentColor"
|
|
717
|
+
viewBox="0 0 32 32"
|
|
718
|
+
aria-hidden="true"
|
|
719
|
+
role="img"
|
|
720
|
+
width="1em"
|
|
721
|
+
height="1em"
|
|
722
|
+
>
|
|
723
|
+
<path
|
|
724
|
+
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"
|
|
725
|
+
/>
|
|
726
|
+
</svg>
|
|
367
727
|
</span>
|
|
368
728
|
<span class="pf-v6-c-icon__progress">
|
|
369
729
|
<svg
|
|
@@ -379,7 +739,19 @@ extra large
|
|
|
379
739
|
|
|
380
740
|
<span class="pf-v6-c-icon pf-m-md">
|
|
381
741
|
<span class="pf-v6-c-icon__content">
|
|
382
|
-
<
|
|
742
|
+
<svg
|
|
743
|
+
class="pf-v6-svg"
|
|
744
|
+
fill="currentColor"
|
|
745
|
+
viewBox="0 0 32 32"
|
|
746
|
+
aria-hidden="true"
|
|
747
|
+
role="img"
|
|
748
|
+
width="1em"
|
|
749
|
+
height="1em"
|
|
750
|
+
>
|
|
751
|
+
<path
|
|
752
|
+
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"
|
|
753
|
+
/>
|
|
754
|
+
</svg>
|
|
383
755
|
</span>
|
|
384
756
|
</span>
|
|
385
757
|
|
|
@@ -614,7 +614,19 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
614
614
|
/>
|
|
615
615
|
<span class="pf-v6-c-form-control__utilities">
|
|
616
616
|
<span class="pf-v6-c-form-control__icon pf-m-status">
|
|
617
|
-
<
|
|
617
|
+
<svg
|
|
618
|
+
class="pf-v6-svg"
|
|
619
|
+
fill="currentColor"
|
|
620
|
+
viewBox="0 0 32 32"
|
|
621
|
+
aria-hidden="true"
|
|
622
|
+
role="img"
|
|
623
|
+
width="1em"
|
|
624
|
+
height="1em"
|
|
625
|
+
>
|
|
626
|
+
<path
|
|
627
|
+
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"
|
|
628
|
+
/>
|
|
629
|
+
</svg>
|
|
618
630
|
</span>
|
|
619
631
|
</span>
|
|
620
632
|
</span>
|