@patternfly/patternfly 6.3.1 → 6.4.0-prerelease.1

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 (140) hide show
  1. package/README.md +23 -15
  2. package/base/normalize.scss +4 -0
  3. package/base/patternfly-variables.css +1172 -1
  4. package/base/patternfly-variables.scss +10 -0
  5. package/base/tokens/tokens-charts-dark.scss +1 -1
  6. package/base/tokens/tokens-charts.scss +1 -1
  7. package/base/tokens/tokens-dark.scss +13 -1
  8. package/base/tokens/tokens-default.scss +60 -2
  9. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  10. package/base/tokens/tokens-highcontrast.scss +703 -0
  11. package/base/tokens/tokens-local.scss +1 -0
  12. package/base/tokens/tokens-palette.scss +9 -1
  13. package/components/Accordion/accordion.css +42 -15
  14. package/components/Accordion/accordion.scss +48 -18
  15. package/components/Alert/alert-group.css +17 -15
  16. package/components/Alert/alert-group.scss +22 -18
  17. package/components/Badge/badge.css +2 -0
  18. package/components/Badge/badge.scss +2 -0
  19. package/components/Banner/banner.css +4 -0
  20. package/components/Banner/banner.scss +4 -0
  21. package/components/Button/button.css +34 -4
  22. package/components/Button/button.scss +36 -6
  23. package/components/CalendarMonth/calendar-month.css +35 -4
  24. package/components/CalendarMonth/calendar-month.scss +38 -4
  25. package/components/Card/card.css +7 -4
  26. package/components/Card/card.scss +7 -4
  27. package/components/CodeBlock/code-block.css +3 -0
  28. package/components/CodeBlock/code-block.scss +3 -0
  29. package/components/CodeEditor/code-editor.css +23 -3
  30. package/components/CodeEditor/code-editor.scss +28 -5
  31. package/components/DatePicker/date-picker.css +3 -0
  32. package/components/DatePicker/date-picker.scss +4 -0
  33. package/components/Divider/divider.css +2 -0
  34. package/components/Divider/divider.scss +2 -0
  35. package/components/Drawer/drawer.css +46 -41
  36. package/components/Drawer/drawer.scss +45 -36
  37. package/components/DualListSelector/dual-list-selector.css +21 -4
  38. package/components/DualListSelector/dual-list-selector.scss +23 -4
  39. package/components/ExpandableSection/expandable-section.css +6 -2
  40. package/components/ExpandableSection/expandable-section.scss +7 -3
  41. package/components/FormControl/form-control.css +6 -7
  42. package/components/FormControl/form-control.scss +8 -10
  43. package/components/Label/label.css +20 -11
  44. package/components/Label/label.scss +21 -11
  45. package/components/Login/login.css +3 -0
  46. package/components/Login/login.scss +3 -0
  47. package/components/Menu/menu.css +18 -0
  48. package/components/Menu/menu.scss +19 -1
  49. package/components/MenuToggle/menu-toggle.css +13 -6
  50. package/components/MenuToggle/menu-toggle.scss +13 -6
  51. package/components/ModalBox/modal-box.css +3 -0
  52. package/components/ModalBox/modal-box.scss +3 -0
  53. package/components/Nav/nav.css +17 -0
  54. package/components/Nav/nav.scss +20 -0
  55. package/components/Page/page.css +73 -25
  56. package/components/Page/page.scss +60 -19
  57. package/components/Pagination/pagination.css +15 -2
  58. package/components/Pagination/pagination.scss +15 -2
  59. package/components/Panel/panel.css +14 -1
  60. package/components/Panel/panel.scss +14 -1
  61. package/components/Popover/popover.css +4 -0
  62. package/components/Popover/popover.scss +4 -0
  63. package/components/Progress/progress.css +19 -0
  64. package/components/Progress/progress.scss +22 -0
  65. package/components/Sidebar/sidebar.css +7 -0
  66. package/components/Sidebar/sidebar.scss +7 -0
  67. package/components/SimpleList/simple-list.css +15 -0
  68. package/components/SimpleList/simple-list.scss +17 -1
  69. package/components/Slider/slider.css +9 -0
  70. package/components/Slider/slider.scss +9 -0
  71. package/components/Switch/switch.css +7 -1
  72. package/components/Switch/switch.scss +7 -1
  73. package/components/Table/table.css +29 -0
  74. package/components/Table/table.scss +33 -0
  75. package/components/Tabs/tabs.css +18 -7
  76. package/components/Tabs/tabs.scss +19 -11
  77. package/components/TextInputGroup/text-input-group.css +3 -0
  78. package/components/TextInputGroup/text-input-group.scss +4 -1
  79. package/components/ToggleGroup/toggle-group.css +18 -9
  80. package/components/ToggleGroup/toggle-group.scss +24 -17
  81. package/components/Toolbar/toolbar.css +7 -0
  82. package/components/Toolbar/toolbar.scss +7 -0
  83. package/components/TreeView/tree-view.css +15 -0
  84. package/components/TreeView/tree-view.scss +17 -0
  85. package/components/Wizard/wizard.css +37 -6
  86. package/components/Wizard/wizard.scss +44 -10
  87. package/components/_index.css +615 -167
  88. package/docs/components/Alert/examples/Alert.md +3 -4
  89. package/docs/components/Button/examples/Button.md +1 -3
  90. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +25 -33
  91. package/docs/components/CodeBlock/examples/CodeBlock.md +13 -7
  92. package/docs/components/CodeEditor/examples/CodeEditor.md +20 -6
  93. package/docs/components/DataList/examples/DataList.md +66 -184
  94. package/docs/components/DatePicker/examples/DatePicker.md +4 -1
  95. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  96. package/docs/components/DualListSelector/examples/DualListSelector.md +0 -195
  97. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  98. package/docs/components/ExpandableSection/examples/ExpandableSection.md +92 -18
  99. package/docs/components/FileUpload/examples/FileUpload.md +4 -3
  100. package/docs/components/Form/examples/Form.md +19 -18
  101. package/docs/components/HelperText/examples/HelperText.md +65 -75
  102. package/docs/components/Hint/examples/Hint.md +3 -3
  103. package/docs/components/Icon/examples/Icon.md +0 -10
  104. package/docs/components/InlineEdit/examples/InlineEdit.md +0 -4
  105. package/docs/components/JumpLinks/examples/JumpLinks.md +164 -77
  106. package/docs/components/Label/examples/Label.md +2 -2
  107. package/docs/components/Login/examples/Login.md +42 -37
  108. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +32 -6
  109. package/docs/components/Pagination/examples/Pagination.md +111 -0
  110. package/docs/components/Popover/examples/Popover.md +0 -4
  111. package/docs/components/Progress/examples/Progress.md +223 -210
  112. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  113. package/docs/components/Table/examples/Table.md +947 -1423
  114. package/docs/components/TextInputGroup/examples/TextInputGroup.md +126 -47
  115. package/docs/components/Title/examples/Title.md +8 -8
  116. package/docs/components/Truncate/examples/Truncate.md +8 -6
  117. package/docs/components/Wizard/examples/Wizard.md +583 -0
  118. package/docs/demos/Alert/examples/Alert.md +28 -19
  119. package/docs/demos/Card/examples/Card.md +8 -5
  120. package/docs/demos/CardView/examples/CardView.md +81 -85
  121. package/docs/demos/Dashboard/examples/Dashboard.md +10 -22
  122. package/docs/demos/DataList/examples/DataList.md +528 -168
  123. package/docs/demos/DescriptionList/examples/DescriptionList.md +13 -3
  124. package/docs/demos/Drawer/examples/Drawer.md +0 -2
  125. package/docs/demos/Form/examples/BasicForms.md +93 -62
  126. package/docs/demos/HelperText/examples/HelperText.md +31 -23
  127. package/docs/demos/JumpLinks/examples/JumpLinks.md +0 -5
  128. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4 -4
  129. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +56 -38
  130. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +726 -312
  131. package/docs/demos/Skeleton/examples/Skeleton.md +3 -1
  132. package/docs/demos/Table/examples/Table.md +5 -20
  133. package/docs/demos/Tabs/examples/Tabs.md +2 -1
  134. package/package.json +12 -7
  135. package/patternfly-base-no-globals.css +1172 -1
  136. package/patternfly-base.css +1176 -1
  137. package/patternfly-no-globals.css +1787 -168
  138. package/patternfly.css +1822 -199
  139. package/patternfly.min.css +1 -1
  140. package/patternfly.min.css.map +1 -1
package/docs/components/Progress/examples/Progress.md CHANGED
@@ -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
@@ -545,6 +336,7 @@ cssPrefix: pf-v6-c-progress
545
336
  <div
546
337
  class="pf-v6-c-progress__description pf-m-truncate"
547
338
  id="progress-truncate-description-example-description"
339
+ tabindex="0"
548
340
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis ultricies lectus, eu lobortis mauris. Morbi pretium arcu id rhoncus mollis. Donec accumsan tincidunt enim nec varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse potenti.</div>
549
341
  <div class="pf-v6-c-progress__status" aria-hidden="true">
550
342
  <span class="pf-v6-c-progress__measure">33%</span>
@@ -580,12 +372,16 @@ cssPrefix: pf-v6-c-progress
580
372
  aria-valuemin="0"
581
373
  aria-valuemax="100"
582
374
  aria-valuenow="33"
375
+ aria-describedby="progress-helper-text-example-help-text"
583
376
  aria-labelledby="progress-helper-text-example-description"
584
377
  >
585
378
  <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
586
379
  </div>
587
380
  <div class="pf-v6-c-progress__helper-text">
588
- <div class="pf-v6-c-helper-text">
381
+ <div
382
+ class="pf-v6-c-helper-text"
383
+ id="progress-helper-text-example-help-text"
384
+ >
589
385
  <div class="pf-v6-c-helper-text__item">
590
386
  <span class="pf-v6-c-helper-text__item-text">Progress helper text</span>
591
387
  </div>
@@ -625,6 +421,223 @@ If the status that displays with the bar is not a percentage, then the ARIA tag
625
421
 
626
422
  ```
627
423
 
424
+ ## Status examples
425
+
426
+ When conveying status, you should ensure:
427
+
428
+ * There is visible helper text that explains the status.
429
+ * The helper text includes the status icon, as seen in our HTML [helper text component](/components/helper-text).
430
+ * 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).
431
+
432
+ ### Success
433
+
434
+ ```html
435
+ <div class="pf-v6-c-progress pf-m-success" id="progress-success-example">
436
+ <div
437
+ class="pf-v6-c-progress__description"
438
+ id="progress-success-example-description"
439
+ >Title</div>
440
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
441
+ <span class="pf-v6-c-progress__measure">100%</span>
442
+ <span class="pf-v6-c-progress__status-icon">
443
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
444
+ </span>
445
+ </div>
446
+ <div
447
+ class="pf-v6-c-progress__bar"
448
+ role="progressbar"
449
+ aria-valuemin="0"
450
+ aria-valuemax="100"
451
+ aria-valuenow="100"
452
+ aria-labelledby="progress-success-example-description"
453
+ >
454
+ <div class="pf-v6-c-progress__indicator" style="width:100%;"></div>
455
+ </div>
456
+ </div>
457
+
458
+ ```
459
+
460
+ ### Warning
461
+
462
+ ```html
463
+ <div class="pf-v6-c-progress pf-m-warning" id="progress-warning-example">
464
+ <div
465
+ class="pf-v6-c-progress__description"
466
+ id="progress-warning-example-description"
467
+ >Title</div>
468
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
469
+ <span class="pf-v6-c-progress__measure">100%</span>
470
+ <span class="pf-v6-c-progress__status-icon">
471
+ <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
472
+ </span>
473
+ </div>
474
+ <div
475
+ class="pf-v6-c-progress__bar"
476
+ role="progressbar"
477
+ aria-valuemin="0"
478
+ aria-valuemax="100"
479
+ aria-valuenow="100"
480
+ aria-labelledby="progress-warning-example-description"
481
+ >
482
+ <div class="pf-v6-c-progress__indicator" style="width:100%;"></div>
483
+ </div>
484
+ </div>
485
+
486
+ ```
487
+
488
+ ### Failure
489
+
490
+ ```html
491
+ <div class="pf-v6-c-progress pf-m-danger" id="progress-failure-example">
492
+ <div
493
+ class="pf-v6-c-progress__description"
494
+ id="progress-failure-example-description"
495
+ >Title</div>
496
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
497
+ <span class="pf-v6-c-progress__measure">33%</span>
498
+ <span class="pf-v6-c-progress__status-icon">
499
+ <i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
500
+ </span>
501
+ </div>
502
+ <div
503
+ class="pf-v6-c-progress__bar"
504
+ role="progressbar"
505
+ aria-valuemin="0"
506
+ aria-valuemax="100"
507
+ aria-valuenow="33"
508
+ aria-labelledby="progress-failure-example-description"
509
+ >
510
+ <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
511
+ </div>
512
+ </div>
513
+
514
+ ```
515
+
516
+ ### Inside success
517
+
518
+ ```html
519
+ <div
520
+ class="pf-v6-c-progress pf-m-lg pf-m-inside pf-m-success"
521
+ id="progress-inside-success-example"
522
+ >
523
+ <div
524
+ class="pf-v6-c-progress__description"
525
+ id="progress-inside-success-example-description"
526
+ >Title</div>
527
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
528
+ <span class="pf-v6-c-progress__status-icon">
529
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
530
+ </span>
531
+ </div>
532
+ <div
533
+ class="pf-v6-c-progress__bar"
534
+ role="progressbar"
535
+ aria-valuemin="0"
536
+ aria-valuemax="100"
537
+ aria-valuenow="100"
538
+ aria-labelledby="progress-inside-success-example-description"
539
+ >
540
+ <div class="pf-v6-c-progress__indicator" style="width:100%;">
541
+ <span class="pf-v6-c-progress__measure">100%</span>
542
+ </div>
543
+ </div>
544
+ </div>
545
+
546
+ ```
547
+
548
+ ### Inside warning
549
+
550
+ ```html
551
+ <div
552
+ class="pf-v6-c-progress pf-m-lg pf-m-inside pf-m-warning"
553
+ id="progress-inside-warning-example"
554
+ >
555
+ <div
556
+ class="pf-v6-c-progress__description"
557
+ id="progress-inside-warning-example-description"
558
+ >Title</div>
559
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
560
+ <span class="pf-v6-c-progress__status-icon">
561
+ <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
562
+ </span>
563
+ </div>
564
+ <div
565
+ class="pf-v6-c-progress__bar"
566
+ role="progressbar"
567
+ aria-valuemin="0"
568
+ aria-valuemax="100"
569
+ aria-valuenow="100"
570
+ aria-labelledby="progress-inside-warning-example-description"
571
+ >
572
+ <div class="pf-v6-c-progress__indicator" style="width:100%;">
573
+ <span class="pf-v6-c-progress__measure">100%</span>
574
+ </div>
575
+ </div>
576
+ </div>
577
+
578
+ ```
579
+
580
+ ### Outside failure
581
+
582
+ ```html
583
+ <div
584
+ class="pf-v6-c-progress pf-m-outside pf-m-lg pf-m-danger"
585
+ id="progress-outside-failure-example"
586
+ >
587
+ <div
588
+ class="pf-v6-c-progress__description"
589
+ id="progress-outside-failure-example-description"
590
+ >Title</div>
591
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
592
+ <span class="pf-v6-c-progress__measure">33%</span>
593
+ <span class="pf-v6-c-progress__status-icon">
594
+ <i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
595
+ </span>
596
+ </div>
597
+ <div
598
+ class="pf-v6-c-progress__bar"
599
+ role="progressbar"
600
+ aria-valuemin="0"
601
+ aria-valuemax="100"
602
+ aria-valuenow="33"
603
+ aria-labelledby="progress-outside-failure-example-description"
604
+ >
605
+ <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
606
+ </div>
607
+ </div>
608
+
609
+ ```
610
+
611
+ ### Failure without measure
612
+
613
+ ```html
614
+ <div
615
+ class="pf-v6-c-progress pf-m-danger"
616
+ id="progress-no-measure-failure-example"
617
+ >
618
+ <div
619
+ class="pf-v6-c-progress__description"
620
+ id="progress-no-measure-failure-example-description"
621
+ >Title</div>
622
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
623
+ <span class="pf-v6-c-progress__status-icon">
624
+ <i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
625
+ </span>
626
+ </div>
627
+ <div
628
+ class="pf-v6-c-progress__bar"
629
+ role="progressbar"
630
+ aria-valuemin="0"
631
+ aria-valuemax="100"
632
+ aria-valuenow="33"
633
+ aria-labelledby="progress-no-measure-failure-example-description"
634
+ >
635
+ <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
636
+ </div>
637
+ </div>
638
+
639
+ ```
640
+
628
641
  ## Documentation
629
642
 
630
643
  ### Overview
package/docs/components/Skeleton/examples/Skeleton.md CHANGED
@@ -9,14 +9,18 @@ cssPrefix: pf-v6-c-skeleton
9
9
  ### Default
10
10
 
11
11
  ```html
12
- <div class="pf-v6-c-skeleton"></div>
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"></div>
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"></div>
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"></div>
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"></div>
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"></div>
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"></div>
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