@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.60
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/README.md +22 -14
- package/assets/images/icon-help.hbs +3 -0
- package/assets/images/icon-outlined-star.hbs +3 -0
- package/assets/images/icon-star.hbs +3 -0
- package/base/normalize.scss +4 -0
- package/base/patternfly-common.css +46 -11
- package/base/patternfly-common.scss +58 -13
- package/base/patternfly-variables.css +1172 -1
- package/base/patternfly-variables.scss +10 -0
- package/base/tokens/tokens-charts-dark.scss +1 -1
- package/base/tokens/tokens-charts.scss +1 -1
- package/base/tokens/tokens-dark.scss +13 -1
- package/base/tokens/tokens-default.scss +60 -2
- package/base/tokens/tokens-highcontrast-dark.scss +396 -0
- package/base/tokens/tokens-highcontrast.scss +703 -0
- package/base/tokens/tokens-local.scss +1 -0
- package/base/tokens/tokens-palette.scss +9 -1
- package/components/Accordion/accordion.css +102 -6
- package/components/Accordion/accordion.scss +112 -10
- package/components/Alert/alert-group.css +67 -33
- package/components/Alert/alert-group.scss +95 -48
- package/components/Badge/badge.css +2 -0
- package/components/Badge/badge.scss +2 -0
- package/components/Banner/banner.css +4 -0
- package/components/Banner/banner.scss +4 -0
- package/components/Button/button.css +187 -9
- package/components/Button/button.scss +195 -13
- package/components/CalendarMonth/calendar-month.css +16 -0
- package/components/CalendarMonth/calendar-month.scss +16 -0
- package/components/Card/card.css +5 -4
- package/components/Card/card.scss +5 -4
- package/components/CodeBlock/code-block.css +3 -0
- package/components/CodeBlock/code-block.scss +3 -0
- package/components/CodeEditor/code-editor.css +8 -3
- package/components/CodeEditor/code-editor.scss +11 -6
- package/components/DataList/data-list.css +2 -2
- package/components/DataList/data-list.scss +2 -2
- package/components/DatePicker/date-picker.css +3 -0
- package/components/DatePicker/date-picker.scss +4 -0
- package/components/Drawer/drawer.css +44 -41
- package/components/Drawer/drawer.scss +42 -36
- package/components/DualListSelector/dual-list-selector.css +55 -1
- package/components/DualListSelector/dual-list-selector.scss +63 -1
- package/components/ExpandableSection/expandable-section.css +63 -1
- package/components/ExpandableSection/expandable-section.scss +76 -2
- package/components/FileUpload/file-upload.css +3 -3
- package/components/FileUpload/file-upload.scss +3 -3
- package/components/Form/form.css +40 -1
- package/components/Form/form.scss +47 -1
- package/components/FormControl/form-control.css +16 -0
- package/components/FormControl/form-control.scss +9 -0
- package/components/InputGroup/input-group.css +80 -0
- package/components/InputGroup/input-group.scss +95 -0
- package/components/Label/label.css +20 -11
- package/components/Label/label.scss +21 -11
- package/components/Login/login.css +3 -0
- package/components/Login/login.scss +3 -0
- package/components/Menu/menu.css +35 -4
- package/components/Menu/menu.scss +32 -6
- package/components/MenuToggle/menu-toggle.css +51 -10
- package/components/MenuToggle/menu-toggle.scss +61 -9
- package/components/ModalBox/modal-box.css +3 -0
- package/components/ModalBox/modal-box.scss +3 -0
- package/components/Nav/nav.css +39 -8
- package/components/Nav/nav.scss +42 -9
- package/components/Page/page.css +124 -26
- package/components/Page/page.scss +86 -16
- package/components/Pagination/pagination.css +14 -1
- package/components/Pagination/pagination.scss +14 -1
- package/components/Panel/panel.css +7 -1
- package/components/Panel/panel.scss +7 -1
- package/components/Popover/popover.css +4 -0
- package/components/Popover/popover.scss +4 -0
- package/components/Progress/progress.css +26 -0
- package/components/Progress/progress.scss +22 -1
- package/components/ProgressStepper/progress-stepper.scss +1 -0
- package/components/SimpleList/simple-list.css +15 -0
- package/components/SimpleList/simple-list.scss +17 -1
- package/components/Skeleton/skeleton.css +22 -2
- package/components/Skeleton/skeleton.scss +25 -3
- package/components/Spinner/spinner.css +5 -0
- package/components/Spinner/spinner.scss +6 -0
- package/components/Table/table-grid.css +51 -5
- package/components/Table/table-grid.scss +22 -1
- package/components/Table/table.css +124 -2
- package/components/Table/table.scss +171 -3
- package/components/Tabs/tabs.css +32 -15
- package/components/Tabs/tabs.scss +34 -14
- package/components/TextInputGroup/text-input-group.css +23 -0
- package/components/TextInputGroup/text-input-group.scss +16 -1
- package/components/Timestamp/timestamp.css +4 -0
- package/components/Timestamp/timestamp.scss +7 -0
- package/components/TreeView/tree-view.css +54 -0
- package/components/TreeView/tree-view.scss +59 -2
- package/components/Truncate/truncate.css +1 -0
- package/components/Truncate/truncate.scss +3 -0
- package/components/Wizard/wizard.css +33 -6
- package/components/Wizard/wizard.scss +38 -8
- package/components/_index.css +1390 -195
- package/docs/components/Alert/examples/Alert.md +2 -2
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
- package/docs/components/Button/examples/Button.md +159 -6
- package/docs/components/Card/examples/Card.md +8 -8
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -32
- package/docs/components/CodeBlock/examples/CodeBlock.md +10 -10
- package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
- package/docs/components/DataList/examples/DataList.md +83 -207
- package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
- package/docs/components/DualListSelector/examples/DualListSelector.md +642 -319
- package/docs/components/EmptyState/examples/EmptyState.md +6 -6
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +26 -15
- package/docs/components/Form/examples/Form.md +1178 -113
- package/docs/components/Hint/examples/Hint.md +3 -3
- package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
- package/docs/components/InputGroup/examples/InputGroup.md +5 -1
- package/docs/components/Label/examples/Label.md +2 -2
- package/docs/components/Login/examples/Login.md +22 -22
- package/docs/components/Masthead/examples/masthead.md +90 -12
- package/docs/components/Menu/examples/Menu.md +122 -6
- package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
- package/docs/components/ModalBox/examples/ModalBox.md +13 -1
- package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
- package/docs/components/Page/examples/Page.md +147 -14
- package/docs/components/Pagination/examples/Pagination.md +123 -12
- package/docs/components/Popover/examples/Popover.md +0 -4
- package/docs/components/Progress/examples/Progress.md +222 -210
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
- package/docs/components/Skeleton/examples/Skeleton.md +21 -7
- package/docs/components/Slider/examples/Slider.md +2 -2
- package/docs/components/Spinner/examples/Spinner.md +10 -0
- package/docs/components/Table/examples/Table.md +7699 -4896
- package/docs/components/Tabs/examples/Tabs.md +1214 -6729
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -49
- package/docs/components/Title/examples/Title.md +8 -8
- package/docs/components/Toolbar/examples/Toolbar.md +7 -7
- package/docs/components/Wizard/examples/Wizard.md +583 -0
- package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
- package/docs/demos/Alert/examples/Alert.md +66 -9
- package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
- package/docs/demos/Banner/examples/Banner.md +47 -6
- package/docs/demos/Card/examples/Card.md +13 -67
- package/docs/demos/CardView/examples/CardView.md +24 -5
- package/docs/demos/Dashboard/examples/Dashboard.md +34 -27
- package/docs/demos/DataList/examples/DataList.md +628 -192
- package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
- package/docs/demos/Drawer/examples/Drawer.md +110 -53
- package/docs/demos/Form/examples/BasicForms.md +146 -26
- package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
- package/docs/demos/Masthead/examples/Masthead.md +170 -18
- package/docs/demos/Modal/examples/Modal.md +171 -21
- package/docs/demos/Nav/examples/Nav.md +111 -16
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +114 -19
- package/docs/demos/Page/examples/Page.md +309 -43
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +886 -415
- package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
- package/docs/demos/Table/examples/Table.md +480 -177
- package/docs/demos/Tabs/examples/Tabs.md +139 -594
- package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
- package/docs/demos/Wizard/examples/Wizard.md +198 -27
- package/package.json +12 -7
- package/patternfly-base-no-globals.css +1217 -12
- package/patternfly-base.css +1221 -12
- package/patternfly-no-globals.css +2837 -437
- package/patternfly.css +2839 -435
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +54 -0
|
@@ -132,185 +132,6 @@ cssPrefix: pf-v6-c-progress
|
|
|
132
132
|
|
|
133
133
|
```
|
|
134
134
|
|
|
135
|
-
### Success
|
|
136
|
-
|
|
137
|
-
```html
|
|
138
|
-
<div class="pf-v6-c-progress pf-m-success" id="progress-success-example">
|
|
139
|
-
<div
|
|
140
|
-
class="pf-v6-c-progress__description"
|
|
141
|
-
id="progress-success-example-description"
|
|
142
|
-
>Title</div>
|
|
143
|
-
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
144
|
-
<span class="pf-v6-c-progress__measure">100%</span>
|
|
145
|
-
<span class="pf-v6-c-progress__status-icon">
|
|
146
|
-
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
147
|
-
</span>
|
|
148
|
-
</div>
|
|
149
|
-
<div
|
|
150
|
-
class="pf-v6-c-progress__bar"
|
|
151
|
-
role="progressbar"
|
|
152
|
-
aria-valuemin="0"
|
|
153
|
-
aria-valuemax="100"
|
|
154
|
-
aria-valuenow="100"
|
|
155
|
-
aria-labelledby="progress-success-example-description"
|
|
156
|
-
>
|
|
157
|
-
<div class="pf-v6-c-progress__indicator" style="width:100%;"></div>
|
|
158
|
-
</div>
|
|
159
|
-
</div>
|
|
160
|
-
|
|
161
|
-
```
|
|
162
|
-
|
|
163
|
-
### Warning
|
|
164
|
-
|
|
165
|
-
```html
|
|
166
|
-
<div class="pf-v6-c-progress pf-m-warning" id="progress-warning-example">
|
|
167
|
-
<div
|
|
168
|
-
class="pf-v6-c-progress__description"
|
|
169
|
-
id="progress-warning-example-description"
|
|
170
|
-
>Title</div>
|
|
171
|
-
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
172
|
-
<span class="pf-v6-c-progress__measure">100%</span>
|
|
173
|
-
<span class="pf-v6-c-progress__status-icon">
|
|
174
|
-
<i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
|
|
175
|
-
</span>
|
|
176
|
-
</div>
|
|
177
|
-
<div
|
|
178
|
-
class="pf-v6-c-progress__bar"
|
|
179
|
-
role="progressbar"
|
|
180
|
-
aria-valuemin="0"
|
|
181
|
-
aria-valuemax="100"
|
|
182
|
-
aria-valuenow="100"
|
|
183
|
-
aria-labelledby="progress-warning-example-description"
|
|
184
|
-
>
|
|
185
|
-
<div class="pf-v6-c-progress__indicator" style="width:100%;"></div>
|
|
186
|
-
</div>
|
|
187
|
-
</div>
|
|
188
|
-
|
|
189
|
-
```
|
|
190
|
-
|
|
191
|
-
### Failure
|
|
192
|
-
|
|
193
|
-
```html
|
|
194
|
-
<div class="pf-v6-c-progress pf-m-danger" id="progress-failure-example">
|
|
195
|
-
<div
|
|
196
|
-
class="pf-v6-c-progress__description"
|
|
197
|
-
id="progress-failure-example-description"
|
|
198
|
-
>Title</div>
|
|
199
|
-
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
200
|
-
<span class="pf-v6-c-progress__measure">33%</span>
|
|
201
|
-
<span class="pf-v6-c-progress__status-icon">
|
|
202
|
-
<i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
|
|
203
|
-
</span>
|
|
204
|
-
</div>
|
|
205
|
-
<div
|
|
206
|
-
class="pf-v6-c-progress__bar"
|
|
207
|
-
role="progressbar"
|
|
208
|
-
aria-valuemin="0"
|
|
209
|
-
aria-valuemax="100"
|
|
210
|
-
aria-valuenow="33"
|
|
211
|
-
aria-labelledby="progress-failure-example-description"
|
|
212
|
-
>
|
|
213
|
-
<div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
|
|
214
|
-
</div>
|
|
215
|
-
</div>
|
|
216
|
-
|
|
217
|
-
```
|
|
218
|
-
|
|
219
|
-
### Inside success
|
|
220
|
-
|
|
221
|
-
```html
|
|
222
|
-
<div
|
|
223
|
-
class="pf-v6-c-progress pf-m-lg pf-m-inside pf-m-success"
|
|
224
|
-
id="progress-inside-success-example"
|
|
225
|
-
>
|
|
226
|
-
<div
|
|
227
|
-
class="pf-v6-c-progress__description"
|
|
228
|
-
id="progress-inside-success-example-description"
|
|
229
|
-
>Title</div>
|
|
230
|
-
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
231
|
-
<span class="pf-v6-c-progress__status-icon">
|
|
232
|
-
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
233
|
-
</span>
|
|
234
|
-
</div>
|
|
235
|
-
<div
|
|
236
|
-
class="pf-v6-c-progress__bar"
|
|
237
|
-
role="progressbar"
|
|
238
|
-
aria-valuemin="0"
|
|
239
|
-
aria-valuemax="100"
|
|
240
|
-
aria-valuenow="100"
|
|
241
|
-
aria-labelledby="progress-inside-success-example-description"
|
|
242
|
-
>
|
|
243
|
-
<div class="pf-v6-c-progress__indicator" style="width:100%;">
|
|
244
|
-
<span class="pf-v6-c-progress__measure">100%</span>
|
|
245
|
-
</div>
|
|
246
|
-
</div>
|
|
247
|
-
</div>
|
|
248
|
-
|
|
249
|
-
```
|
|
250
|
-
|
|
251
|
-
### Inside warning
|
|
252
|
-
|
|
253
|
-
```html
|
|
254
|
-
<div
|
|
255
|
-
class="pf-v6-c-progress pf-m-lg pf-m-inside pf-m-warning"
|
|
256
|
-
id="progress-inside-warning-example"
|
|
257
|
-
>
|
|
258
|
-
<div
|
|
259
|
-
class="pf-v6-c-progress__description"
|
|
260
|
-
id="progress-inside-warning-example-description"
|
|
261
|
-
>Title</div>
|
|
262
|
-
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
263
|
-
<span class="pf-v6-c-progress__status-icon">
|
|
264
|
-
<i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
|
|
265
|
-
</span>
|
|
266
|
-
</div>
|
|
267
|
-
<div
|
|
268
|
-
class="pf-v6-c-progress__bar"
|
|
269
|
-
role="progressbar"
|
|
270
|
-
aria-valuemin="0"
|
|
271
|
-
aria-valuemax="100"
|
|
272
|
-
aria-valuenow="100"
|
|
273
|
-
aria-labelledby="progress-inside-warning-example-description"
|
|
274
|
-
>
|
|
275
|
-
<div class="pf-v6-c-progress__indicator" style="width:100%;">
|
|
276
|
-
<span class="pf-v6-c-progress__measure">100%</span>
|
|
277
|
-
</div>
|
|
278
|
-
</div>
|
|
279
|
-
</div>
|
|
280
|
-
|
|
281
|
-
```
|
|
282
|
-
|
|
283
|
-
### Outside failure
|
|
284
|
-
|
|
285
|
-
```html
|
|
286
|
-
<div
|
|
287
|
-
class="pf-v6-c-progress pf-m-outside pf-m-lg pf-m-danger"
|
|
288
|
-
id="progress-outside-failure-example"
|
|
289
|
-
>
|
|
290
|
-
<div
|
|
291
|
-
class="pf-v6-c-progress__description"
|
|
292
|
-
id="progress-outside-failure-example-description"
|
|
293
|
-
>Title</div>
|
|
294
|
-
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
295
|
-
<span class="pf-v6-c-progress__measure">33%</span>
|
|
296
|
-
<span class="pf-v6-c-progress__status-icon">
|
|
297
|
-
<i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
|
|
298
|
-
</span>
|
|
299
|
-
</div>
|
|
300
|
-
<div
|
|
301
|
-
class="pf-v6-c-progress__bar"
|
|
302
|
-
role="progressbar"
|
|
303
|
-
aria-valuemin="0"
|
|
304
|
-
aria-valuemax="100"
|
|
305
|
-
aria-valuenow="33"
|
|
306
|
-
aria-labelledby="progress-outside-failure-example-description"
|
|
307
|
-
>
|
|
308
|
-
<div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
|
|
309
|
-
</div>
|
|
310
|
-
</div>
|
|
311
|
-
|
|
312
|
-
```
|
|
313
|
-
|
|
314
135
|
### Outside static width measure
|
|
315
136
|
|
|
316
137
|
```html
|
|
@@ -482,36 +303,6 @@ cssPrefix: pf-v6-c-progress
|
|
|
482
303
|
|
|
483
304
|
```
|
|
484
305
|
|
|
485
|
-
### Failure without measure
|
|
486
|
-
|
|
487
|
-
```html
|
|
488
|
-
<div
|
|
489
|
-
class="pf-v6-c-progress pf-m-danger"
|
|
490
|
-
id="progress-no-measure-failure-example"
|
|
491
|
-
>
|
|
492
|
-
<div
|
|
493
|
-
class="pf-v6-c-progress__description"
|
|
494
|
-
id="progress-no-measure-failure-example-description"
|
|
495
|
-
>Title</div>
|
|
496
|
-
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
497
|
-
<span class="pf-v6-c-progress__status-icon">
|
|
498
|
-
<i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
|
|
499
|
-
</span>
|
|
500
|
-
</div>
|
|
501
|
-
<div
|
|
502
|
-
class="pf-v6-c-progress__bar"
|
|
503
|
-
role="progressbar"
|
|
504
|
-
aria-valuemin="0"
|
|
505
|
-
aria-valuemax="100"
|
|
506
|
-
aria-valuenow="33"
|
|
507
|
-
aria-labelledby="progress-no-measure-failure-example-description"
|
|
508
|
-
>
|
|
509
|
-
<div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
|
|
510
|
-
</div>
|
|
511
|
-
</div>
|
|
512
|
-
|
|
513
|
-
```
|
|
514
|
-
|
|
515
306
|
### Finite step
|
|
516
307
|
|
|
517
308
|
```html
|
|
@@ -580,12 +371,16 @@ cssPrefix: pf-v6-c-progress
|
|
|
580
371
|
aria-valuemin="0"
|
|
581
372
|
aria-valuemax="100"
|
|
582
373
|
aria-valuenow="33"
|
|
374
|
+
aria-describedby="progress-helper-text-example-help-text"
|
|
583
375
|
aria-labelledby="progress-helper-text-example-description"
|
|
584
376
|
>
|
|
585
377
|
<div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
|
|
586
378
|
</div>
|
|
587
379
|
<div class="pf-v6-c-progress__helper-text">
|
|
588
|
-
<div
|
|
380
|
+
<div
|
|
381
|
+
class="pf-v6-c-helper-text"
|
|
382
|
+
id="progress-helper-text-example-help-text"
|
|
383
|
+
>
|
|
589
384
|
<div class="pf-v6-c-helper-text__item">
|
|
590
385
|
<span class="pf-v6-c-helper-text__item-text">Progress helper text</span>
|
|
591
386
|
</div>
|
|
@@ -625,6 +420,223 @@ If the status that displays with the bar is not a percentage, then the ARIA tag
|
|
|
625
420
|
|
|
626
421
|
```
|
|
627
422
|
|
|
423
|
+
## Status examples
|
|
424
|
+
|
|
425
|
+
When conveying status, you should ensure:
|
|
426
|
+
|
|
427
|
+
* There is visible helper text that explains the status.
|
|
428
|
+
* The helper text includes the status icon, as seen in our [basic helper text example](/components/helper-text/html#basic).
|
|
429
|
+
* The helper text is linked to the `.pf-v6-c-progress__bar[role="progressbar"]` element via an `aria-describedby` attribute, as seen in the [progress helper text example](#helper-text).
|
|
430
|
+
|
|
431
|
+
### Success
|
|
432
|
+
|
|
433
|
+
```html
|
|
434
|
+
<div class="pf-v6-c-progress pf-m-success" id="progress-success-example">
|
|
435
|
+
<div
|
|
436
|
+
class="pf-v6-c-progress__description"
|
|
437
|
+
id="progress-success-example-description"
|
|
438
|
+
>Title</div>
|
|
439
|
+
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
440
|
+
<span class="pf-v6-c-progress__measure">100%</span>
|
|
441
|
+
<span class="pf-v6-c-progress__status-icon">
|
|
442
|
+
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
443
|
+
</span>
|
|
444
|
+
</div>
|
|
445
|
+
<div
|
|
446
|
+
class="pf-v6-c-progress__bar"
|
|
447
|
+
role="progressbar"
|
|
448
|
+
aria-valuemin="0"
|
|
449
|
+
aria-valuemax="100"
|
|
450
|
+
aria-valuenow="100"
|
|
451
|
+
aria-labelledby="progress-success-example-description"
|
|
452
|
+
>
|
|
453
|
+
<div class="pf-v6-c-progress__indicator" style="width:100%;"></div>
|
|
454
|
+
</div>
|
|
455
|
+
</div>
|
|
456
|
+
|
|
457
|
+
```
|
|
458
|
+
|
|
459
|
+
### Warning
|
|
460
|
+
|
|
461
|
+
```html
|
|
462
|
+
<div class="pf-v6-c-progress pf-m-warning" id="progress-warning-example">
|
|
463
|
+
<div
|
|
464
|
+
class="pf-v6-c-progress__description"
|
|
465
|
+
id="progress-warning-example-description"
|
|
466
|
+
>Title</div>
|
|
467
|
+
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
468
|
+
<span class="pf-v6-c-progress__measure">100%</span>
|
|
469
|
+
<span class="pf-v6-c-progress__status-icon">
|
|
470
|
+
<i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
|
|
471
|
+
</span>
|
|
472
|
+
</div>
|
|
473
|
+
<div
|
|
474
|
+
class="pf-v6-c-progress__bar"
|
|
475
|
+
role="progressbar"
|
|
476
|
+
aria-valuemin="0"
|
|
477
|
+
aria-valuemax="100"
|
|
478
|
+
aria-valuenow="100"
|
|
479
|
+
aria-labelledby="progress-warning-example-description"
|
|
480
|
+
>
|
|
481
|
+
<div class="pf-v6-c-progress__indicator" style="width:100%;"></div>
|
|
482
|
+
</div>
|
|
483
|
+
</div>
|
|
484
|
+
|
|
485
|
+
```
|
|
486
|
+
|
|
487
|
+
### Failure
|
|
488
|
+
|
|
489
|
+
```html
|
|
490
|
+
<div class="pf-v6-c-progress pf-m-danger" id="progress-failure-example">
|
|
491
|
+
<div
|
|
492
|
+
class="pf-v6-c-progress__description"
|
|
493
|
+
id="progress-failure-example-description"
|
|
494
|
+
>Title</div>
|
|
495
|
+
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
496
|
+
<span class="pf-v6-c-progress__measure">33%</span>
|
|
497
|
+
<span class="pf-v6-c-progress__status-icon">
|
|
498
|
+
<i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
|
|
499
|
+
</span>
|
|
500
|
+
</div>
|
|
501
|
+
<div
|
|
502
|
+
class="pf-v6-c-progress__bar"
|
|
503
|
+
role="progressbar"
|
|
504
|
+
aria-valuemin="0"
|
|
505
|
+
aria-valuemax="100"
|
|
506
|
+
aria-valuenow="33"
|
|
507
|
+
aria-labelledby="progress-failure-example-description"
|
|
508
|
+
>
|
|
509
|
+
<div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
|
|
510
|
+
</div>
|
|
511
|
+
</div>
|
|
512
|
+
|
|
513
|
+
```
|
|
514
|
+
|
|
515
|
+
### Inside success
|
|
516
|
+
|
|
517
|
+
```html
|
|
518
|
+
<div
|
|
519
|
+
class="pf-v6-c-progress pf-m-lg pf-m-inside pf-m-success"
|
|
520
|
+
id="progress-inside-success-example"
|
|
521
|
+
>
|
|
522
|
+
<div
|
|
523
|
+
class="pf-v6-c-progress__description"
|
|
524
|
+
id="progress-inside-success-example-description"
|
|
525
|
+
>Title</div>
|
|
526
|
+
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
527
|
+
<span class="pf-v6-c-progress__status-icon">
|
|
528
|
+
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
529
|
+
</span>
|
|
530
|
+
</div>
|
|
531
|
+
<div
|
|
532
|
+
class="pf-v6-c-progress__bar"
|
|
533
|
+
role="progressbar"
|
|
534
|
+
aria-valuemin="0"
|
|
535
|
+
aria-valuemax="100"
|
|
536
|
+
aria-valuenow="100"
|
|
537
|
+
aria-labelledby="progress-inside-success-example-description"
|
|
538
|
+
>
|
|
539
|
+
<div class="pf-v6-c-progress__indicator" style="width:100%;">
|
|
540
|
+
<span class="pf-v6-c-progress__measure">100%</span>
|
|
541
|
+
</div>
|
|
542
|
+
</div>
|
|
543
|
+
</div>
|
|
544
|
+
|
|
545
|
+
```
|
|
546
|
+
|
|
547
|
+
### Inside warning
|
|
548
|
+
|
|
549
|
+
```html
|
|
550
|
+
<div
|
|
551
|
+
class="pf-v6-c-progress pf-m-lg pf-m-inside pf-m-warning"
|
|
552
|
+
id="progress-inside-warning-example"
|
|
553
|
+
>
|
|
554
|
+
<div
|
|
555
|
+
class="pf-v6-c-progress__description"
|
|
556
|
+
id="progress-inside-warning-example-description"
|
|
557
|
+
>Title</div>
|
|
558
|
+
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
559
|
+
<span class="pf-v6-c-progress__status-icon">
|
|
560
|
+
<i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
|
|
561
|
+
</span>
|
|
562
|
+
</div>
|
|
563
|
+
<div
|
|
564
|
+
class="pf-v6-c-progress__bar"
|
|
565
|
+
role="progressbar"
|
|
566
|
+
aria-valuemin="0"
|
|
567
|
+
aria-valuemax="100"
|
|
568
|
+
aria-valuenow="100"
|
|
569
|
+
aria-labelledby="progress-inside-warning-example-description"
|
|
570
|
+
>
|
|
571
|
+
<div class="pf-v6-c-progress__indicator" style="width:100%;">
|
|
572
|
+
<span class="pf-v6-c-progress__measure">100%</span>
|
|
573
|
+
</div>
|
|
574
|
+
</div>
|
|
575
|
+
</div>
|
|
576
|
+
|
|
577
|
+
```
|
|
578
|
+
|
|
579
|
+
### Outside failure
|
|
580
|
+
|
|
581
|
+
```html
|
|
582
|
+
<div
|
|
583
|
+
class="pf-v6-c-progress pf-m-outside pf-m-lg pf-m-danger"
|
|
584
|
+
id="progress-outside-failure-example"
|
|
585
|
+
>
|
|
586
|
+
<div
|
|
587
|
+
class="pf-v6-c-progress__description"
|
|
588
|
+
id="progress-outside-failure-example-description"
|
|
589
|
+
>Title</div>
|
|
590
|
+
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
591
|
+
<span class="pf-v6-c-progress__measure">33%</span>
|
|
592
|
+
<span class="pf-v6-c-progress__status-icon">
|
|
593
|
+
<i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
|
|
594
|
+
</span>
|
|
595
|
+
</div>
|
|
596
|
+
<div
|
|
597
|
+
class="pf-v6-c-progress__bar"
|
|
598
|
+
role="progressbar"
|
|
599
|
+
aria-valuemin="0"
|
|
600
|
+
aria-valuemax="100"
|
|
601
|
+
aria-valuenow="33"
|
|
602
|
+
aria-labelledby="progress-outside-failure-example-description"
|
|
603
|
+
>
|
|
604
|
+
<div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
|
|
605
|
+
</div>
|
|
606
|
+
</div>
|
|
607
|
+
|
|
608
|
+
```
|
|
609
|
+
|
|
610
|
+
### Failure without measure
|
|
611
|
+
|
|
612
|
+
```html
|
|
613
|
+
<div
|
|
614
|
+
class="pf-v6-c-progress pf-m-danger"
|
|
615
|
+
id="progress-no-measure-failure-example"
|
|
616
|
+
>
|
|
617
|
+
<div
|
|
618
|
+
class="pf-v6-c-progress__description"
|
|
619
|
+
id="progress-no-measure-failure-example-description"
|
|
620
|
+
>Title</div>
|
|
621
|
+
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
622
|
+
<span class="pf-v6-c-progress__status-icon">
|
|
623
|
+
<i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
|
|
624
|
+
</span>
|
|
625
|
+
</div>
|
|
626
|
+
<div
|
|
627
|
+
class="pf-v6-c-progress__bar"
|
|
628
|
+
role="progressbar"
|
|
629
|
+
aria-valuemin="0"
|
|
630
|
+
aria-valuemax="100"
|
|
631
|
+
aria-valuenow="33"
|
|
632
|
+
aria-labelledby="progress-no-measure-failure-example-description"
|
|
633
|
+
>
|
|
634
|
+
<div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
|
|
635
|
+
</div>
|
|
636
|
+
</div>
|
|
637
|
+
|
|
638
|
+
```
|
|
639
|
+
|
|
628
640
|
## Documentation
|
|
629
641
|
|
|
630
642
|
### Overview
|
|
@@ -364,15 +364,28 @@ cssPrefix: pf-v6-c-progress-stepper
|
|
|
364
364
|
<li
|
|
365
365
|
class="pf-v6-c-progress-stepper__step pf-m-current"
|
|
366
366
|
role="listitem"
|
|
367
|
-
aria-label="current step,
|
|
367
|
+
aria-label="current step,"
|
|
368
368
|
>
|
|
369
369
|
<div class="pf-v6-c-progress-stepper__step-connector">
|
|
370
370
|
<span class="pf-v6-c-progress-stepper__step-icon">
|
|
371
|
-
<
|
|
371
|
+
<svg
|
|
372
|
+
class="pf-v6-c-spinner pf-m-xs"
|
|
373
|
+
role="progressbar"
|
|
374
|
+
viewBox="0 0 100 100"
|
|
375
|
+
aria-label="Loading..."
|
|
376
|
+
>
|
|
377
|
+
<circle
|
|
378
|
+
class="pf-v6-c-spinner__path"
|
|
379
|
+
cx="50"
|
|
380
|
+
cy="50"
|
|
381
|
+
r="45"
|
|
382
|
+
fill="none"
|
|
383
|
+
/>
|
|
384
|
+
</svg>
|
|
372
385
|
</span>
|
|
373
386
|
</div>
|
|
374
387
|
<div class="pf-v6-c-progress-stepper__step-main">
|
|
375
|
-
<div class="pf-v6-c-progress-stepper__step-title">
|
|
388
|
+
<div class="pf-v6-c-progress-stepper__step-title">In process</div>
|
|
376
389
|
<div
|
|
377
390
|
class="pf-v6-c-progress-stepper__step-description"
|
|
378
391
|
>This is the second thing to happen</div>
|
|
@@ -783,7 +796,7 @@ cssPrefix: pf-v6-c-progress-stepper
|
|
|
783
796
|
|
|
784
797
|
```
|
|
785
798
|
|
|
786
|
-
### Basic
|
|
799
|
+
### Basic in process
|
|
787
800
|
|
|
788
801
|
```html
|
|
789
802
|
<ol class="pf-v6-c-progress-stepper" role="list">
|
|
@@ -804,11 +817,24 @@ cssPrefix: pf-v6-c-progress-stepper
|
|
|
804
817
|
<li
|
|
805
818
|
class="pf-v6-c-progress-stepper__step pf-m-current"
|
|
806
819
|
role="listitem"
|
|
807
|
-
aria-label="current step,
|
|
820
|
+
aria-label="current step,"
|
|
808
821
|
>
|
|
809
822
|
<div class="pf-v6-c-progress-stepper__step-connector">
|
|
810
823
|
<span class="pf-v6-c-progress-stepper__step-icon">
|
|
811
|
-
<
|
|
824
|
+
<svg
|
|
825
|
+
class="pf-v6-c-spinner pf-m-xs"
|
|
826
|
+
role="progressbar"
|
|
827
|
+
viewBox="0 0 100 100"
|
|
828
|
+
aria-label="Loading..."
|
|
829
|
+
>
|
|
830
|
+
<circle
|
|
831
|
+
class="pf-v6-c-spinner__path"
|
|
832
|
+
cx="50"
|
|
833
|
+
cy="50"
|
|
834
|
+
r="45"
|
|
835
|
+
fill="none"
|
|
836
|
+
/>
|
|
837
|
+
</svg>
|
|
812
838
|
</span>
|
|
813
839
|
</div>
|
|
814
840
|
<div class="pf-v6-c-progress-stepper__step-main">
|
|
@@ -9,14 +9,18 @@ cssPrefix: pf-v6-c-skeleton
|
|
|
9
9
|
### Default
|
|
10
10
|
|
|
11
11
|
```html
|
|
12
|
-
<div class="pf-v6-c-skeleton"
|
|
12
|
+
<div class="pf-v6-c-skeleton">
|
|
13
|
+
<span class="pf-v6-screen-reader">Loading default content</span>
|
|
14
|
+
</div>
|
|
13
15
|
|
|
14
16
|
```
|
|
15
17
|
|
|
16
18
|
### Percentage width modifiers
|
|
17
19
|
|
|
18
20
|
```html
|
|
19
|
-
<div class="pf-v6-c-skeleton pf-m-width-25"
|
|
21
|
+
<div class="pf-v6-c-skeleton pf-m-width-25">
|
|
22
|
+
<span class="pf-v6-screen-reader">Loading percentage with modifiers content</span>
|
|
23
|
+
</div>
|
|
20
24
|
<br />
|
|
21
25
|
<div class="pf-v6-c-skeleton pf-m-width-33"></div>
|
|
22
26
|
<br />
|
|
@@ -33,7 +37,9 @@ cssPrefix: pf-v6-c-skeleton
|
|
|
33
37
|
### Percentage height modifiers
|
|
34
38
|
|
|
35
39
|
```html
|
|
36
|
-
<div class="pf-v6-c-skeleton pf-m-height-25"
|
|
40
|
+
<div class="pf-v6-c-skeleton pf-m-height-25">
|
|
41
|
+
<span class="pf-v6-screen-reader">Loading percentage height modifiers content</span>
|
|
42
|
+
</div>
|
|
37
43
|
<div class="pf-v6-c-skeleton pf-m-height-33"></div>
|
|
38
44
|
<div class="pf-v6-c-skeleton pf-m-height-50"></div>
|
|
39
45
|
<div class="pf-v6-c-skeleton pf-m-height-66"></div>
|
|
@@ -46,7 +52,9 @@ cssPrefix: pf-v6-c-skeleton
|
|
|
46
52
|
|
|
47
53
|
```html
|
|
48
54
|
--pf-v6-global--FontSize--4xl
|
|
49
|
-
<div class="pf-v6-c-skeleton pf-m-text-4xl"
|
|
55
|
+
<div class="pf-v6-c-skeleton pf-m-text-4xl">
|
|
56
|
+
<span class="pf-v6-screen-reader">Loading text modifiers content</span>
|
|
57
|
+
</div>
|
|
50
58
|
<br />--pf-v6-global--FontSize--3xl
|
|
51
59
|
<div class="pf-v6-c-skeleton pf-m-text-3xl"></div>
|
|
52
60
|
<br />--pf-v6-global--FontSize--2xl
|
|
@@ -66,19 +74,25 @@ cssPrefix: pf-v6-c-skeleton
|
|
|
66
74
|
|
|
67
75
|
```html
|
|
68
76
|
Small circle
|
|
69
|
-
<div class="pf-v6-c-skeleton pf-m-circle pf-m-width-sm"
|
|
77
|
+
<div class="pf-v6-c-skeleton pf-m-circle pf-m-width-sm">
|
|
78
|
+
<span class="pf-v6-screen-reader">Loading circle content</span>
|
|
79
|
+
</div>
|
|
70
80
|
<br />Medium circle
|
|
71
81
|
<div class="pf-v6-c-skeleton pf-m-circle pf-m-width-md"></div>
|
|
72
82
|
<br />Large circle
|
|
73
83
|
<div class="pf-v6-c-skeleton pf-m-circle pf-m-width-lg"></div>
|
|
74
84
|
<br />Small square
|
|
75
|
-
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-sm"
|
|
85
|
+
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-sm">
|
|
86
|
+
<span class="pf-v6-screen-reader">Loading square content</span>
|
|
87
|
+
</div>
|
|
76
88
|
<br />Medium square
|
|
77
89
|
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
|
|
78
90
|
<br />Large square
|
|
79
91
|
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-lg"></div>
|
|
80
92
|
<br />Small rectangle
|
|
81
|
-
<div class="pf-v6-c-skeleton pf-m-height-sm pf-m-width-md"
|
|
93
|
+
<div class="pf-v6-c-skeleton pf-m-height-sm pf-m-width-md">
|
|
94
|
+
<span class="pf-v6-screen-reader">Loading rectangle content</span>
|
|
95
|
+
</div>
|
|
82
96
|
<br />Medium rectangle
|
|
83
97
|
<div class="pf-v6-c-skeleton pf-m-height-md pf-m-width-lg"></div>
|
|
84
98
|
<br />Large rectangle
|
|
@@ -427,7 +427,7 @@ cssPrefix: pf-v6-c-slider
|
|
|
427
427
|
/>
|
|
428
428
|
</span>
|
|
429
429
|
</div>
|
|
430
|
-
<div class="pf-v6-c-input-group__item pf-m-
|
|
430
|
+
<div class="pf-v6-c-input-group__item pf-m-disabled pf-m-box">
|
|
431
431
|
<span class="pf-v6-c-input-group__text">%</span>
|
|
432
432
|
</div>
|
|
433
433
|
</div>
|
|
@@ -632,7 +632,7 @@ cssPrefix: pf-v6-c-slider
|
|
|
632
632
|
/>
|
|
633
633
|
</span>
|
|
634
634
|
</div>
|
|
635
|
-
<div class="pf-v6-c-input-group__item pf-m-
|
|
635
|
+
<div class="pf-v6-c-input-group__item pf-m-disabled pf-m-box">
|
|
636
636
|
<span class="pf-v6-c-input-group__text">%</span>
|
|
637
637
|
</div>
|
|
638
638
|
</div>
|
|
@@ -21,6 +21,15 @@ cssPrefix: pf-v6-c-spinner
|
|
|
21
21
|
### Sizes
|
|
22
22
|
|
|
23
23
|
```html
|
|
24
|
+
<svg
|
|
25
|
+
class="pf-v6-c-spinner pf-m-xs"
|
|
26
|
+
role="progressbar"
|
|
27
|
+
viewBox="0 0 100 100"
|
|
28
|
+
aria-label="Loading..."
|
|
29
|
+
>
|
|
30
|
+
<circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
|
|
31
|
+
</svg>
|
|
32
|
+
|
|
24
33
|
<svg
|
|
25
34
|
class="pf-v6-c-spinner pf-m-sm"
|
|
26
35
|
role="progressbar"
|
|
@@ -117,6 +126,7 @@ Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility
|
|
|
117
126
|
|
|
118
127
|
| Class | Applied to | Outcome |
|
|
119
128
|
| -- | -- | -- |
|
|
129
|
+
| `.pf-m-xs` | `.pf-v6-c-spinner` | Creates a extra-small spinner. |
|
|
120
130
|
| `.pf-m-sm` | `.pf-v6-c-spinner` | Creates a small spinner. |
|
|
121
131
|
| `.pf-m-md` | `.pf-v6-c-spinner` | Creates a medium spinner. |
|
|
122
132
|
| `.pf-m-lg` | `.pf-v6-c-spinner` | Creates a large spinner. |
|