@patternfly/patternfly 6.0.0-alpha.57 → 6.0.0-alpha.58
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/CodeBlock/code-block.css +18 -9
- package/components/CodeBlock/code-block.scss +18 -10
- package/components/DescriptionList/description-list.css +9 -9
- package/components/DescriptionList/description-list.scss +3 -3
- package/components/FileUpload/file-upload.css +28 -34
- package/components/FileUpload/file-upload.scss +30 -42
- package/components/Icon/icon.css +154 -18
- package/components/Icon/icon.scss +187 -20
- package/components/Sidebar/sidebar.css +20 -9
- package/components/Sidebar/sidebar.scss +23 -11
- package/components/ToggleGroup/toggle-group.css +34 -47
- package/components/ToggleGroup/toggle-group.scss +34 -45
- package/docs/components/FileUpload/examples/FileUpload.md +112 -53
- package/docs/components/Icon/examples/Icon.md +82 -11
- package/docs/components/Sidebar/examples/Sidebar.md +19 -0
- package/package.json +1 -1
- package/patternfly-no-globals.css +263 -130
- package/patternfly-theme-dark-unversioned.css +263 -130
- package/patternfly.css +263 -130
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
|
@@ -48,6 +48,57 @@ cssPrefix: pf-v5-c-file-upload
|
|
|
48
48
|
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
+
### With helper text
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<div class="pf-v5-c-file-upload">
|
|
55
|
+
<div class="pf-v5-c-file-upload__file-select">
|
|
56
|
+
<div class="pf-v5-c-input-group">
|
|
57
|
+
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
58
|
+
<span class="pf-v5-c-form-control pf-m-readonly">
|
|
59
|
+
<input
|
|
60
|
+
readonly
|
|
61
|
+
id="file-upload-helper-text-text-input"
|
|
62
|
+
name="file-upload-helper-text-text-input"
|
|
63
|
+
aria-label="Drag and drop a file or upload one"
|
|
64
|
+
placeholder="Drag and drop a file or upload one"
|
|
65
|
+
aria-describedby="file-upload-helper-text-browse"
|
|
66
|
+
/>
|
|
67
|
+
</span>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="pf-v5-c-input-group__item">
|
|
70
|
+
<button
|
|
71
|
+
class="pf-v5-c-button pf-m-control"
|
|
72
|
+
type="button"
|
|
73
|
+
id="file-upload-helper-text-browse"
|
|
74
|
+
aria-describedby="helper-text-example"
|
|
75
|
+
>Upload</button>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="pf-v5-c-input-group__item">
|
|
78
|
+
<button class="pf-v5-c-button pf-m-control" type="button" disabled>Clear</button>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="pf-v5-c-file-upload__file-details">
|
|
83
|
+
<span class="pf-v5-c-form-control pf-m-resize-vertical">
|
|
84
|
+
<textarea
|
|
85
|
+
id="file-upload-helper-text-file-details"
|
|
86
|
+
name="file-upload-helper-text-file-details"
|
|
87
|
+
aria-label="Uploaded file content"
|
|
88
|
+
></textarea>
|
|
89
|
+
</span>
|
|
90
|
+
</div>
|
|
91
|
+
<div class="pf-v5-c-file-upload__helper-text">
|
|
92
|
+
<div class="pf-v5-c-helper-text">
|
|
93
|
+
<div class="pf-v5-c-helper-text__item" id="helper-text-example">
|
|
94
|
+
<span class="pf-v5-c-helper-text__item-text">Upload a CSV file</span>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
```
|
|
101
|
+
|
|
51
102
|
### Upload complete non editable
|
|
52
103
|
|
|
53
104
|
```html
|
|
@@ -187,63 +238,70 @@ cssPrefix: pf-v5-c-file-upload
|
|
|
187
238
|
```html
|
|
188
239
|
<form class="pf-v5-c-form" novalidate>
|
|
189
240
|
<div class="pf-v5-c-form__group">
|
|
190
|
-
<div class="pf-v5-c-
|
|
191
|
-
<div class="pf-v5-c-file-
|
|
192
|
-
<div class="pf-v5-c-
|
|
193
|
-
<div class="pf-v5-c-input-
|
|
194
|
-
<
|
|
195
|
-
<
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
<
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
241
|
+
<div class="pf-v5-c-form__group-control">
|
|
242
|
+
<div class="pf-v5-c-file-upload">
|
|
243
|
+
<div class="pf-v5-c-file-upload__file-select">
|
|
244
|
+
<div class="pf-v5-c-input-group">
|
|
245
|
+
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
246
|
+
<span class="pf-v5-c-form-control pf-m-readonly">
|
|
247
|
+
<input
|
|
248
|
+
readonly
|
|
249
|
+
id="file-upload-error-text-input"
|
|
250
|
+
name="file-upload-error-text-input"
|
|
251
|
+
aria-label="File upload error"
|
|
252
|
+
value="Sample.png"
|
|
253
|
+
aria-describedby="file-upload-error-browse"
|
|
254
|
+
/>
|
|
255
|
+
</span>
|
|
256
|
+
</div>
|
|
257
|
+
<div class="pf-v5-c-input-group__item">
|
|
258
|
+
<button
|
|
259
|
+
class="pf-v5-c-button pf-m-control"
|
|
260
|
+
type="button"
|
|
261
|
+
id="file-upload-error-browse"
|
|
262
|
+
aria-describedby="with-error-example-helper-text"
|
|
263
|
+
>Upload</button>
|
|
264
|
+
</div>
|
|
265
|
+
<div class="pf-v5-c-input-group__item">
|
|
266
|
+
<button class="pf-v5-c-button pf-m-control" type="button">Clear</button>
|
|
267
|
+
</div>
|
|
214
268
|
</div>
|
|
215
269
|
</div>
|
|
216
|
-
</div>
|
|
217
|
-
<div
|
|
218
|
-
class="pf-v5-c-file-upload__file-details"
|
|
219
|
-
aria-describedby="textAreaHelperText1"
|
|
220
|
-
aria-invalid="true"
|
|
221
|
-
>
|
|
222
|
-
<span class="pf-v5-c-form-control pf-m-error pf-m-resize-vertical">
|
|
223
|
-
<textarea
|
|
224
|
-
id="file-upload-error-file-details"
|
|
225
|
-
name="file-upload-error-file-details"
|
|
226
|
-
aria-label="Empty text area"
|
|
227
|
-
aria-describedby="textAreaHelperText1"
|
|
228
|
-
aria-invalid="true"
|
|
229
|
-
></textarea>
|
|
230
|
-
<span class="pf-v5-c-form-control__utilities">
|
|
231
|
-
<span class="pf-v5-c-form-control__icon pf-m-status">
|
|
232
|
-
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
|
|
233
|
-
</span>
|
|
234
|
-
</span>
|
|
235
|
-
</span>
|
|
236
|
-
</div>
|
|
237
|
-
</div>
|
|
238
|
-
<div class="pf-v5-c-form__helper-text" aria-live="polite">
|
|
239
|
-
<div class="pf-v5-c-helper-text">
|
|
240
270
|
<div
|
|
241
|
-
class="pf-v5-c-
|
|
242
|
-
|
|
271
|
+
class="pf-v5-c-file-upload__file-details"
|
|
272
|
+
aria-describedby="with-error-example-helper-text"
|
|
273
|
+
aria-invalid="true"
|
|
243
274
|
>
|
|
244
|
-
<span
|
|
245
|
-
|
|
246
|
-
|
|
275
|
+
<span class="pf-v5-c-form-control pf-m-error pf-m-resize-vertical">
|
|
276
|
+
<textarea
|
|
277
|
+
id="file-upload-error-file-details"
|
|
278
|
+
name="file-upload-error-file-details"
|
|
279
|
+
aria-label="Empty text area"
|
|
280
|
+
aria-describedby="with-error-example-helper-text"
|
|
281
|
+
aria-invalid="true"
|
|
282
|
+
></textarea>
|
|
283
|
+
<span class="pf-v5-c-form-control__utilities">
|
|
284
|
+
<span class="pf-v5-c-form-control__icon pf-m-status">
|
|
285
|
+
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
|
|
286
|
+
</span>
|
|
287
|
+
</span>
|
|
288
|
+
</span>
|
|
289
|
+
</div>
|
|
290
|
+
|
|
291
|
+
<div class="pf-v5-c-file-upload__helper-text">
|
|
292
|
+
<div class="pf-v5-c-helper-text">
|
|
293
|
+
<div
|
|
294
|
+
class="pf-v5-c-helper-text__item pf-m-error"
|
|
295
|
+
id="with-error-example-helper-text"
|
|
296
|
+
>
|
|
297
|
+
<span class="pf-v5-c-helper-text__item-icon">
|
|
298
|
+
<i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
|
|
299
|
+
</span>
|
|
300
|
+
<span
|
|
301
|
+
class="pf-v5-c-helper-text__item-text"
|
|
302
|
+
>Must be a CSV file no larger than 1 KB</span>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
247
305
|
</div>
|
|
248
306
|
</div>
|
|
249
307
|
</div>
|
|
@@ -327,5 +385,6 @@ cssPrefix: pf-v5-c-file-upload
|
|
|
327
385
|
| `.pf-v5-c-file-upload__file-select` | `<div>` | Initiates the file select element. **Required** |
|
|
328
386
|
| `.pf-v5-c-file-upload__file-details` | `<div>` | Initiates the file details element. **Required** |
|
|
329
387
|
| `.pf-v5-c-file-upload__file-details-spinner` | `<div>` | Initiates the file details element. **Required** |
|
|
388
|
+
| `.pf-v5-c-file-upload__helper-text` | `<div>` | Initiates a container for [helper text](/components/helper-text) |
|
|
330
389
|
| `.pf-m-drag-hover` | `.pf-v5-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. |
|
|
331
390
|
| `.pf-m-loading` | `.pf-v5-c-file-upload` | Modifies file upload for the loading state. |
|
|
@@ -33,7 +33,7 @@ cssPrefix: pf-v5-c-icon
|
|
|
33
33
|
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
###
|
|
36
|
+
### Standalone icon sizes
|
|
37
37
|
|
|
38
38
|
```html
|
|
39
39
|
<span class="pf-v5-c-icon pf-m-sm">
|
|
@@ -56,6 +56,73 @@ cssPrefix: pf-v5-c-icon
|
|
|
56
56
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
57
57
|
</span>
|
|
58
58
|
</span>
|
|
59
|
+
<span class="pf-v5-c-icon pf-m-2xl">
|
|
60
|
+
<span class="pf-v5-c-icon__content">
|
|
61
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
62
|
+
</span>
|
|
63
|
+
</span>
|
|
64
|
+
<span class="pf-v5-c-icon pf-m-3xl">
|
|
65
|
+
<span class="pf-v5-c-icon__content">
|
|
66
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
67
|
+
</span>
|
|
68
|
+
</span>
|
|
69
|
+
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Body sizes
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<span class="pf-v5-c-icon pf-m-body-sm">
|
|
76
|
+
<span class="pf-v5-c-icon__content">
|
|
77
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
78
|
+
</span>
|
|
79
|
+
</span>
|
|
80
|
+
<span class="pf-v5-c-icon pf-m-body-default">
|
|
81
|
+
<span class="pf-v5-c-icon__content">
|
|
82
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
83
|
+
</span>
|
|
84
|
+
</span>
|
|
85
|
+
<span class="pf-v5-c-icon pf-m-body-lg">
|
|
86
|
+
<span class="pf-v5-c-icon__content">
|
|
87
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
88
|
+
</span>
|
|
89
|
+
</span>
|
|
90
|
+
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Heading sizes
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<span class="pf-v5-c-icon pf-m-heading-sm">
|
|
97
|
+
<span class="pf-v5-c-icon__content">
|
|
98
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
99
|
+
</span>
|
|
100
|
+
</span>
|
|
101
|
+
<span class="pf-v5-c-icon pf-m-heading-md">
|
|
102
|
+
<span class="pf-v5-c-icon__content">
|
|
103
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
104
|
+
</span>
|
|
105
|
+
</span>
|
|
106
|
+
<span class="pf-v5-c-icon pf-m-heading-lg">
|
|
107
|
+
<span class="pf-v5-c-icon__content">
|
|
108
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
109
|
+
</span>
|
|
110
|
+
</span>
|
|
111
|
+
<span class="pf-v5-c-icon pf-m-heading-xl">
|
|
112
|
+
<span class="pf-v5-c-icon__content">
|
|
113
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
114
|
+
</span>
|
|
115
|
+
</span>
|
|
116
|
+
<span class="pf-v5-c-icon pf-m-heading-2xl">
|
|
117
|
+
<span class="pf-v5-c-icon__content">
|
|
118
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
119
|
+
</span>
|
|
120
|
+
</span>
|
|
121
|
+
<span class="pf-v5-c-icon pf-m-heading-3xl">
|
|
122
|
+
<span class="pf-v5-c-icon__content">
|
|
123
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
124
|
+
</span>
|
|
125
|
+
</span>
|
|
59
126
|
|
|
60
127
|
```
|
|
61
128
|
|
|
@@ -95,23 +162,23 @@ cssPrefix: pf-v5-c-icon
|
|
|
95
162
|
Use a size modifier on the icon container to maintain a consistent size, even if the contents change in size.
|
|
96
163
|
|
|
97
164
|
```html
|
|
98
|
-
<span class="pf-v5-c-icon pf-m-
|
|
99
|
-
<span class="pf-v5-c-icon__content pf-m-
|
|
165
|
+
<span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
|
|
166
|
+
<span class="pf-v5-c-icon__content pf-m-lg">
|
|
100
167
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
101
168
|
</span>
|
|
102
169
|
</span>
|
|
103
|
-
<span class="pf-v5-c-icon pf-m-
|
|
104
|
-
<span class="pf-v5-c-icon__content pf-m-
|
|
170
|
+
<span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
|
|
171
|
+
<span class="pf-v5-c-icon__content pf-m-xl">
|
|
105
172
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
106
173
|
</span>
|
|
107
174
|
</span>
|
|
108
|
-
<span class="pf-v5-c-icon pf-m-
|
|
109
|
-
<span class="pf-v5-c-icon__content pf-m-
|
|
175
|
+
<span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
|
|
176
|
+
<span class="pf-v5-c-icon__content pf-m-2xl">
|
|
110
177
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
111
178
|
</span>
|
|
112
179
|
</span>
|
|
113
|
-
<span class="pf-v5-c-icon pf-m-
|
|
114
|
-
<span class="pf-v5-c-icon__content pf-m-
|
|
180
|
+
<span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
|
|
181
|
+
<span class="pf-v5-c-icon__content pf-m-3xl">
|
|
115
182
|
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
116
183
|
</span>
|
|
117
184
|
</span>
|
|
@@ -248,7 +315,11 @@ Refer to the [icons](/design-foundations/icons) page for information about the P
|
|
|
248
315
|
| `.pf-v5-c-icon__content` | `<span>`, `<div>` | Initiates the icon content. **Required** |
|
|
249
316
|
| `.pf-v5-c-icon__progress` | `<span>`, `<div>` | Initiates a container for a progress spinner. |
|
|
250
317
|
| `.pf-m-inline` | `.pf-v5-c-icon` | Displays the icon inline with text, and allows the icon to inherit the size and color of the parent. |
|
|
251
|
-
| `.pf-m-[sm,md,lg,xl]` | `.pf-v5-c-icon` | Modifies the icon container to be small, medium, large, or extra large. |
|
|
252
|
-
| `.pf-m-[sm,
|
|
318
|
+
| `.pf-m-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon` | Modifies the icon container to be small, medium, large, extra large, double extra large, or triple extra large. |
|
|
319
|
+
| `.pf-m-body-[sm,default,lg]` | `.pf-v5-c-icon` | Modifies the icon container to be a size matching small, default, or large body text. |
|
|
320
|
+
| `.pf-m-heading-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon` | Modifies the icon container to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text. |
|
|
321
|
+
| `.pf-m-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon__content`, `pf-v5-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
|
|
322
|
+
| `.pf-m-body-[sm,default,lg]` | `.pf-v5-c-icon__content` | Modifies the icon content or progress element to be a size matching small, default, or large body text. |
|
|
323
|
+
| `.pf-m-heading-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon__content` | Modifies the icon content or progress element to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text. |
|
|
253
324
|
| `.pf-m-in-progress` | `.pf-v5-c-icon` | Shows the progress element in place of the icon content. |
|
|
254
325
|
| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-custom` | `.pf-v5-c-icon__content` | Modifies the icon content to use a status color. |
|
|
@@ -24,6 +24,24 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
24
24
|
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
+
### With secondary background
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<div class="pf-v5-c-sidebar">
|
|
31
|
+
<div class="pf-v5-c-sidebar__main">
|
|
32
|
+
<div class="pf-v5-c-sidebar__panel pf-m-secondary">Sidebar panel</div>
|
|
33
|
+
<div class="pf-v5-c-sidebar__content pf-m-secondary">
|
|
34
|
+
<div class="pf-v5-c-content">
|
|
35
|
+
<p>Default layout.</p>
|
|
36
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
|
|
37
|
+
<p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
|
|
27
45
|
### Gutter
|
|
28
46
|
|
|
29
47
|
```html
|
|
@@ -249,3 +267,4 @@ cssPrefix: pf-v5-c-sidebar
|
|
|
249
267
|
| `.pf-m-static` | `.pf-v5-c-sidebar__panel` | Modifies the panel to be positioned statically. |
|
|
250
268
|
| `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v5-c-sidebar__panel` | Modifies the panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** does not apply when the panel is stacked on top of the content. |
|
|
251
269
|
| `.pf-m-no-background` | `.pf-v5-c-sidebar`, `.pf-v5-c-sidebar__panel, .pf-v5-c-sidebar__content` | Modifies the element to have a transparent background. |
|
|
270
|
+
| `.pf-m-secondary` | `.pf-v5-c-sidebar__panel, .pf-v5-c-sidebar__content` | Modifies the element to have secondary styling. |
|