@patternfly/patternfly 6.3.0-prerelease.8 → 6.3.0

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 (111) hide show
  1. package/assets/images/icon-outlined-star.hbs +3 -0
  2. package/assets/images/icon-star.hbs +3 -0
  3. package/base/patternfly-common.css +46 -11
  4. package/base/patternfly-common.scss +58 -13
  5. package/components/Accordion/accordion.css +72 -3
  6. package/components/Accordion/accordion.scss +78 -6
  7. package/components/Alert/alert-group.css +52 -31
  8. package/components/Alert/alert-group.scss +77 -46
  9. package/components/Button/button.css +154 -6
  10. package/components/Button/button.scss +160 -8
  11. package/components/DataList/data-list.css +2 -2
  12. package/components/DataList/data-list.scss +2 -2
  13. package/components/DualListSelector/dual-list-selector.css +36 -0
  14. package/components/DualListSelector/dual-list-selector.scss +43 -0
  15. package/components/ExpandableSection/expandable-section.css +63 -1
  16. package/components/ExpandableSection/expandable-section.scss +76 -2
  17. package/components/FileUpload/file-upload.css +3 -3
  18. package/components/FileUpload/file-upload.scss +3 -3
  19. package/components/Form/form.css +40 -1
  20. package/components/Form/form.scss +47 -1
  21. package/components/FormControl/form-control.css +16 -0
  22. package/components/FormControl/form-control.scss +9 -0
  23. package/components/InputGroup/input-group.css +80 -0
  24. package/components/InputGroup/input-group.scss +95 -0
  25. package/components/Menu/menu.css +24 -4
  26. package/components/Menu/menu.scss +20 -5
  27. package/components/MenuToggle/menu-toggle.css +30 -0
  28. package/components/MenuToggle/menu-toggle.scss +33 -0
  29. package/components/Nav/nav.css +22 -8
  30. package/components/Nav/nav.scss +22 -9
  31. package/components/Page/page.css +62 -3
  32. package/components/Page/page.scss +44 -3
  33. package/components/Progress/progress.css +16 -0
  34. package/components/Progress/progress.scss +11 -1
  35. package/components/ProgressStepper/progress-stepper.scss +1 -0
  36. package/components/Skeleton/skeleton.css +22 -2
  37. package/components/Skeleton/skeleton.scss +25 -3
  38. package/components/Spinner/spinner.css +5 -0
  39. package/components/Spinner/spinner.scss +6 -0
  40. package/components/Table/table-grid.css +51 -5
  41. package/components/Table/table-grid.scss +22 -1
  42. package/components/Table/table.css +83 -1
  43. package/components/Table/table.scss +123 -1
  44. package/components/Tabs/tabs.css +25 -15
  45. package/components/Tabs/tabs.scss +26 -13
  46. package/components/TextInputGroup/text-input-group.css +16 -0
  47. package/components/TextInputGroup/text-input-group.scss +8 -0
  48. package/components/Timestamp/timestamp.css +4 -0
  49. package/components/Timestamp/timestamp.scss +7 -0
  50. package/components/TreeView/tree-view.css +39 -0
  51. package/components/TreeView/tree-view.scss +42 -2
  52. package/components/Truncate/truncate.css +1 -0
  53. package/components/Truncate/truncate.scss +3 -0
  54. package/components/_index.css +918 -85
  55. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  56. package/docs/components/Button/examples/Button.md +148 -5
  57. package/docs/components/Card/examples/Card.md +8 -8
  58. package/docs/components/CodeBlock/examples/CodeBlock.md +5 -5
  59. package/docs/components/DataList/examples/DataList.md +23 -23
  60. package/docs/components/DualListSelector/examples/DualListSelector.md +534 -16
  61. package/docs/components/ExpandableSection/examples/ExpandableSection.md +17 -12
  62. package/docs/components/Form/examples/Form.md +1047 -126
  63. package/docs/components/Hint/examples/Hint.md +3 -3
  64. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  65. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  66. package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
  67. package/docs/components/Masthead/examples/masthead.md +90 -12
  68. package/docs/components/Menu/examples/Menu.md +122 -6
  69. package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
  70. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
  71. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  72. package/docs/components/Page/examples/Page.md +147 -14
  73. package/docs/components/Pagination/examples/Pagination.md +12 -12
  74. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  75. package/docs/components/Slider/examples/Slider.md +2 -2
  76. package/docs/components/Spinner/examples/Spinner.md +10 -0
  77. package/docs/components/Table/examples/Table.md +9428 -6173
  78. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  79. package/docs/components/TextInputGroup/examples/TextInputGroup.md +45 -5
  80. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  81. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  82. package/docs/demos/Alert/examples/Alert.md +66 -9
  83. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  84. package/docs/demos/Banner/examples/Banner.md +47 -6
  85. package/docs/demos/Card/examples/Card.md +5 -62
  86. package/docs/demos/CardView/examples/CardView.md +24 -5
  87. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  88. package/docs/demos/DataList/examples/DataList.md +100 -24
  89. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -47
  90. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  91. package/docs/demos/Form/examples/BasicForms.md +12 -12
  92. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  93. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  94. package/docs/demos/Modal/examples/Modal.md +132 -18
  95. package/docs/demos/Nav/examples/Nav.md +111 -16
  96. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  97. package/docs/demos/Page/examples/Page.md +309 -43
  98. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -103
  99. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  100. package/docs/demos/Table/examples/Table.md +449 -155
  101. package/docs/demos/Tabs/examples/Tabs.md +137 -593
  102. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  103. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  104. package/package.json +5 -5
  105. package/patternfly-base-no-globals.css +45 -11
  106. package/patternfly-base.css +45 -11
  107. package/patternfly-no-globals.css +963 -96
  108. package/patternfly.css +963 -96
  109. package/patternfly.min.css +1 -1
  110. package/patternfly.min.css.map +1 -1
  111. package/sass-utilities/mixins.scss +54 -0
package/docs/components/Page/examples/Page.md CHANGED
@@ -15,12 +15,31 @@ wrapperTag: div
15
15
  <div class="pf-v6-c-masthead__main">
16
16
  <span class="pf-v6-c-masthead__toggle">
17
17
  <button
18
- class="pf-v6-c-button pf-m-plain"
18
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
19
19
  type="button"
20
20
  aria-label="Global navigation"
21
21
  >
22
22
  <span class="pf-v6-c-button__icon">
23
- <i class="fas fa-bars" aria-hidden="true"></i>
23
+ <svg
24
+ viewBox="0 0 10 10"
25
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
26
+ width="1em"
27
+ height="1em"
28
+ >
29
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
30
+ <path
31
+ class="pf-v6-c-button--hamburger-icon--middle"
32
+ d="M1,5 L9,5"
33
+ />
34
+ <path
35
+ class="pf-v6-c-button--hamburger-icon--arrow"
36
+ d="M1,5 L1,5 L1,5"
37
+ />
38
+ <path
39
+ class="pf-v6-c-button--hamburger-icon--bottom"
40
+ d="M9,9 L1,9"
41
+ />
42
+ </svg>
24
43
  </span>
25
44
  </button>
26
45
  </span>
@@ -81,12 +100,31 @@ wrapperTag: div
81
100
  <div class="pf-v6-c-masthead__main">
82
101
  <span class="pf-v6-c-masthead__toggle">
83
102
  <button
84
- class="pf-v6-c-button pf-m-plain"
103
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
85
104
  type="button"
86
105
  aria-label="Global navigation"
87
106
  >
88
107
  <span class="pf-v6-c-button__icon">
89
- <i class="fas fa-bars" aria-hidden="true"></i>
108
+ <svg
109
+ viewBox="0 0 10 10"
110
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
111
+ width="1em"
112
+ height="1em"
113
+ >
114
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
115
+ <path
116
+ class="pf-v6-c-button--hamburger-icon--middle"
117
+ d="M1,5 L9,5"
118
+ />
119
+ <path
120
+ class="pf-v6-c-button--hamburger-icon--arrow"
121
+ d="M1,5 L1,5 L1,5"
122
+ />
123
+ <path
124
+ class="pf-v6-c-button--hamburger-icon--bottom"
125
+ d="M9,9 L1,9"
126
+ />
127
+ </svg>
90
128
  </span>
91
129
  </button>
92
130
  </span>
@@ -133,12 +171,31 @@ wrapperTag: div
133
171
  <div class="pf-v6-c-masthead__main">
134
172
  <span class="pf-v6-c-masthead__toggle">
135
173
  <button
136
- class="pf-v6-c-button pf-m-plain"
174
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
137
175
  type="button"
138
176
  aria-label="Global navigation"
139
177
  >
140
178
  <span class="pf-v6-c-button__icon">
141
- <i class="fas fa-bars" aria-hidden="true"></i>
179
+ <svg
180
+ viewBox="0 0 10 10"
181
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
182
+ width="1em"
183
+ height="1em"
184
+ >
185
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
186
+ <path
187
+ class="pf-v6-c-button--hamburger-icon--middle"
188
+ d="M1,5 L9,5"
189
+ />
190
+ <path
191
+ class="pf-v6-c-button--hamburger-icon--arrow"
192
+ d="M1,5 L1,5 L1,5"
193
+ />
194
+ <path
195
+ class="pf-v6-c-button--hamburger-icon--bottom"
196
+ d="M9,9 L1,9"
197
+ />
198
+ </svg>
142
199
  </span>
143
200
  </button>
144
201
  </span>
@@ -177,12 +234,31 @@ wrapperTag: div
177
234
  <div class="pf-v6-c-masthead__main">
178
235
  <span class="pf-v6-c-masthead__toggle">
179
236
  <button
180
- class="pf-v6-c-button pf-m-plain"
237
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
181
238
  type="button"
182
239
  aria-label="Global navigation"
183
240
  >
184
241
  <span class="pf-v6-c-button__icon">
185
- <i class="fas fa-bars" aria-hidden="true"></i>
242
+ <svg
243
+ viewBox="0 0 10 10"
244
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
245
+ width="1em"
246
+ height="1em"
247
+ >
248
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
249
+ <path
250
+ class="pf-v6-c-button--hamburger-icon--middle"
251
+ d="M1,5 L9,5"
252
+ />
253
+ <path
254
+ class="pf-v6-c-button--hamburger-icon--arrow"
255
+ d="M1,5 L1,5 L1,5"
256
+ />
257
+ <path
258
+ class="pf-v6-c-button--hamburger-icon--bottom"
259
+ d="M9,9 L1,9"
260
+ />
261
+ </svg>
186
262
  </span>
187
263
  </button>
188
264
  </span>
@@ -227,12 +303,31 @@ wrapperTag: div
227
303
  <div class="pf-v6-c-masthead__main">
228
304
  <span class="pf-v6-c-masthead__toggle">
229
305
  <button
230
- class="pf-v6-c-button pf-m-plain"
306
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
231
307
  type="button"
232
308
  aria-label="Global navigation"
233
309
  >
234
310
  <span class="pf-v6-c-button__icon">
235
- <i class="fas fa-bars" aria-hidden="true"></i>
311
+ <svg
312
+ viewBox="0 0 10 10"
313
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
314
+ width="1em"
315
+ height="1em"
316
+ >
317
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
318
+ <path
319
+ class="pf-v6-c-button--hamburger-icon--middle"
320
+ d="M1,5 L9,5"
321
+ />
322
+ <path
323
+ class="pf-v6-c-button--hamburger-icon--arrow"
324
+ d="M1,5 L1,5 L1,5"
325
+ />
326
+ <path
327
+ class="pf-v6-c-button--hamburger-icon--bottom"
328
+ d="M9,9 L1,9"
329
+ />
330
+ </svg>
236
331
  </span>
237
332
  </button>
238
333
  </span>
@@ -286,12 +381,31 @@ wrapperTag: div
286
381
  <div class="pf-v6-c-masthead__main">
287
382
  <span class="pf-v6-c-masthead__toggle">
288
383
  <button
289
- class="pf-v6-c-button pf-m-plain"
384
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
290
385
  type="button"
291
386
  aria-label="Global navigation"
292
387
  >
293
388
  <span class="pf-v6-c-button__icon">
294
- <i class="fas fa-bars" aria-hidden="true"></i>
389
+ <svg
390
+ viewBox="0 0 10 10"
391
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
392
+ width="1em"
393
+ height="1em"
394
+ >
395
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
396
+ <path
397
+ class="pf-v6-c-button--hamburger-icon--middle"
398
+ d="M1,5 L9,5"
399
+ />
400
+ <path
401
+ class="pf-v6-c-button--hamburger-icon--arrow"
402
+ d="M1,5 L1,5 L1,5"
403
+ />
404
+ <path
405
+ class="pf-v6-c-button--hamburger-icon--bottom"
406
+ d="M9,9 L1,9"
407
+ />
408
+ </svg>
295
409
  </span>
296
410
  </button>
297
411
  </span>
@@ -342,12 +456,31 @@ wrapperTag: div
342
456
  <div class="pf-v6-c-masthead__main">
343
457
  <span class="pf-v6-c-masthead__toggle">
344
458
  <button
345
- class="pf-v6-c-button pf-m-plain"
459
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
346
460
  type="button"
347
461
  aria-label="Global navigation"
348
462
  >
349
463
  <span class="pf-v6-c-button__icon">
350
- <i class="fas fa-bars" aria-hidden="true"></i>
464
+ <svg
465
+ viewBox="0 0 10 10"
466
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
467
+ width="1em"
468
+ height="1em"
469
+ >
470
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
471
+ <path
472
+ class="pf-v6-c-button--hamburger-icon--middle"
473
+ d="M1,5 L9,5"
474
+ />
475
+ <path
476
+ class="pf-v6-c-button--hamburger-icon--arrow"
477
+ d="M1,5 L1,5 L1,5"
478
+ />
479
+ <path
480
+ class="pf-v6-c-button--hamburger-icon--bottom"
481
+ d="M9,9 L1,9"
482
+ />
483
+ </svg>
351
484
  </span>
352
485
  </button>
353
486
  </span>
package/docs/components/Pagination/examples/Pagination.md CHANGED
@@ -14,7 +14,7 @@ cssPrefix: pf-v6-c-pagination
14
14
  </div>
15
15
  <div class="pf-v6-c-pagination__page-menu">
16
16
  <button
17
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
17
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
18
18
  type="button"
19
19
  aria-expanded="false"
20
20
  aria-label="Menu toggle"
@@ -109,7 +109,7 @@ cssPrefix: pf-v6-c-pagination
109
109
  </div>
110
110
  <div class="pf-v6-c-pagination__page-menu">
111
111
  <button
112
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
112
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
113
113
  type="button"
114
114
  aria-expanded="false"
115
115
  aria-label="Menu toggle"
@@ -214,7 +214,7 @@ cssPrefix: pf-v6-c-pagination
214
214
  </div>
215
215
  <div class="pf-v6-c-pagination__page-menu">
216
216
  <button
217
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
217
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
218
218
  type="button"
219
219
  aria-expanded="false"
220
220
  aria-label="Menu toggle"
@@ -304,7 +304,7 @@ cssPrefix: pf-v6-c-pagination
304
304
  <div class="pf-v6-c-pagination pf-m-bottom">
305
305
  <div class="pf-v6-c-pagination__page-menu">
306
306
  <button
307
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
307
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
308
308
  type="button"
309
309
  aria-expanded="false"
310
310
  aria-label="Menu toggle"
@@ -405,7 +405,7 @@ cssPrefix: pf-v6-c-pagination
405
405
  <div class="pf-v6-c-pagination pf-m-bottom pf-m-sticky">
406
406
  <div class="pf-v6-c-pagination__page-menu">
407
407
  <button
408
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
408
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
409
409
  type="button"
410
410
  aria-expanded="false"
411
411
  aria-label="Menu toggle"
@@ -500,7 +500,7 @@ cssPrefix: pf-v6-c-pagination
500
500
  </div>
501
501
  <div class="pf-v6-c-pagination__page-menu">
502
502
  <button
503
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-disabled"
503
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain pf-m-disabled"
504
504
  type="button"
505
505
  aria-expanded="false"
506
506
  disabled
@@ -598,7 +598,7 @@ cssPrefix: pf-v6-c-pagination
598
598
  </div>
599
599
  <div class="pf-v6-c-pagination__page-menu">
600
600
  <button
601
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
601
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
602
602
  type="button"
603
603
  aria-expanded="false"
604
604
  aria-label="Menu toggle"
@@ -657,7 +657,7 @@ cssPrefix: pf-v6-c-pagination
657
657
  </div>
658
658
  <div class="pf-v6-c-pagination__page-menu">
659
659
  <button
660
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
660
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
661
661
  type="button"
662
662
  aria-expanded="false"
663
663
  aria-label="Menu toggle"
@@ -752,7 +752,7 @@ cssPrefix: pf-v6-c-pagination
752
752
  </div>
753
753
  <div class="pf-v6-c-pagination__page-menu">
754
754
  <button
755
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
755
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
756
756
  type="button"
757
757
  aria-expanded="false"
758
758
  aria-label="Menu toggle"
@@ -849,7 +849,7 @@ cssPrefix: pf-v6-c-pagination
849
849
  </div>
850
850
  <div class="pf-v6-c-pagination__page-menu">
851
851
  <button
852
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
852
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
853
853
  type="button"
854
854
  aria-expanded="false"
855
855
  aria-label="Menu toggle"
@@ -944,7 +944,7 @@ cssPrefix: pf-v6-c-pagination
944
944
  </div>
945
945
  <div class="pf-v6-c-pagination__page-menu">
946
946
  <button
947
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
947
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
948
948
  type="button"
949
949
  aria-expanded="false"
950
950
  aria-label="Menu toggle"
@@ -1005,7 +1005,7 @@ cssPrefix: pf-v6-c-pagination
1005
1005
  </div>
1006
1006
  <div class="pf-v6-c-pagination__page-menu">
1007
1007
  <button
1008
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1008
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1009
1009
  type="button"
1010
1010
  aria-expanded="false"
1011
1011
  aria-label="Menu toggle"
package/docs/components/ProgressStepper/examples/ProgressStepper.md CHANGED
@@ -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,in process 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
- <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
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">Second step</div>
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 with Patternfly icons
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,in process 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
- <i class="pf-v6-pficon pf-v6-pficon-in-progress" aria-hidden="true"></i>
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">
package/docs/components/Slider/examples/Slider.md CHANGED
@@ -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-box pf-m-disabled">
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-box pf-m-disabled">
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>
package/docs/components/Spinner/examples/Spinner.md CHANGED
@@ -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. |