@patternfly/patternfly 6.0.0-alpha.174 → 6.0.0-alpha.175

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 (91) hide show
  1. package/components/Button/button.css +5 -1
  2. package/components/Button/button.scss +5 -1
  3. package/components/Card/card.css +2 -2
  4. package/components/Card/card.scss +1 -1
  5. package/components/ClipboardCopy/clipboard-copy.css +2 -2
  6. package/components/ClipboardCopy/clipboard-copy.scss +2 -2
  7. package/components/JumpLinks/jump-links.css +0 -7
  8. package/components/JumpLinks/jump-links.scss +0 -9
  9. package/components/Label/label.css +2 -2
  10. package/components/Label/label.scss +2 -2
  11. package/components/NumberInput/number-input.css +0 -1
  12. package/components/NumberInput/number-input.scss +0 -1
  13. package/components/Tabs/tabs.css +1 -18
  14. package/components/Tabs/tabs.scss +1 -18
  15. package/components/_index.css +12 -33
  16. package/docs/components/AboutModalBox/examples/AboutModalBox.md +1 -1
  17. package/docs/components/ActionList/examples/ActionList.md +7 -7
  18. package/docs/components/Alert/examples/Alert.md +44 -46
  19. package/docs/components/BackToTop/examples/BackToTop.md +3 -5
  20. package/docs/components/Banner/examples/Banner.md +1 -1
  21. package/docs/components/Button/examples/Button.md +35 -35
  22. package/docs/components/CalendarMonth/examples/CalendarMonth.md +8 -8
  23. package/docs/components/Card/examples/Card.md +36 -20
  24. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +32 -29
  25. package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
  26. package/docs/components/CodeEditor/examples/CodeEditor.md +18 -21
  27. package/docs/components/DataList/examples/DataList.md +17 -17
  28. package/docs/components/DatePicker/examples/DatePicker.md +6 -6
  29. package/docs/components/DescriptionList/examples/DescriptionList.md +100 -150
  30. package/docs/components/Drawer/examples/Drawer.md +19 -19
  31. package/docs/components/DualListSelector/examples/DualListSelector.md +84 -84
  32. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  33. package/docs/components/Form/examples/Form.md +18 -19
  34. package/docs/components/Hint/examples/Hint.md +2 -2
  35. package/docs/components/InlineEdit/examples/InlineEdit.md +24 -24
  36. package/docs/components/InputGroup/examples/InputGroup.md +2 -2
  37. package/docs/components/JumpLinks/examples/JumpLinks.md +8 -8
  38. package/docs/components/Label/examples/Label.md +217 -217
  39. package/docs/components/LogViewer/examples/LogViewer.md +77 -97
  40. package/docs/components/Login/examples/Login.md +37 -32
  41. package/docs/components/Masthead/examples/masthead.md +6 -6
  42. package/docs/components/Menu/examples/Menu.md +10 -10
  43. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  44. package/docs/components/ModalBox/examples/ModalBox.md +17 -17
  45. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  46. package/docs/components/Nav/examples/Navigation.md +4 -4
  47. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +2 -2
  48. package/docs/components/NumberInput/examples/NumberInput.md +24 -24
  49. package/docs/components/OverflowMenu/examples/overflow-menu.md +6 -6
  50. package/docs/components/Page/examples/Page.md +7 -7
  51. package/docs/components/Pagination/examples/Pagination.md +53 -44
  52. package/docs/components/Popover/examples/Popover.md +30 -15
  53. package/docs/components/Slider/examples/Slider.md +8 -8
  54. package/docs/components/Table/examples/Table.md +433 -203
  55. package/docs/components/Tabs/examples/Tabs.md +364 -358
  56. package/docs/components/TextInputGroup/examples/TextInputGroup.md +364 -404
  57. package/docs/components/Toolbar/examples/Toolbar.md +59 -59
  58. package/docs/components/TreeView/examples/TreeView.md +4 -4
  59. package/docs/components/Wizard/examples/Wizard.md +10 -10
  60. package/docs/demos/AboutModal/examples/AboutModal.md +2 -2
  61. package/docs/demos/Alert/examples/Alert.md +6 -6
  62. package/docs/demos/BackToTop/examples/BackToTop.md +4 -6
  63. package/docs/demos/Banner/examples/Banner.md +2 -2
  64. package/docs/demos/Button/examples/Button.md +1 -1
  65. package/docs/demos/Card/examples/Card.md +54 -79
  66. package/docs/demos/CardView/examples/CardView.md +8 -7
  67. package/docs/demos/Dashboard/examples/Dashboard.md +25 -37
  68. package/docs/demos/DataList/examples/DataList.md +38 -34
  69. package/docs/demos/DescriptionList/examples/DescriptionList.md +4 -4
  70. package/docs/demos/Drawer/examples/Drawer.md +8 -8
  71. package/docs/demos/Form/examples/BasicForms.md +69 -86
  72. package/docs/demos/JumpLinks/examples/JumpLinks.md +14 -20
  73. package/docs/demos/Masthead/examples/Masthead.md +13 -13
  74. package/docs/demos/Modal/examples/Modal.md +15 -15
  75. package/docs/demos/Nav/examples/Nav.md +9 -9
  76. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  77. package/docs/demos/Page/examples/Page.md +9 -9
  78. package/docs/demos/Page/examples/Penta.md +2 -2
  79. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +3 -3
  80. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  81. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +35 -35
  82. package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
  83. package/docs/demos/Table/examples/Table.md +132 -115
  84. package/docs/demos/Tabs/examples/Tabs.md +11 -11
  85. package/docs/demos/Toolbar/examples/Toolbar.md +37 -36
  86. package/docs/demos/Wizard/examples/Wizard.md +22 -23
  87. package/package.json +1 -1
  88. package/patternfly-no-globals.css +12 -33
  89. package/patternfly.css +12 -33
  90. package/patternfly.min.css +1 -1
  91. package/patternfly.min.css.map +1 -1
package/docs/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -23,7 +23,7 @@ cssPrefix: pf-d-back-to-top
23
23
  type="button"
24
24
  aria-label="Global navigation"
25
25
  >
26
- <span class="pf-v6-c-button__text">
26
+ <span class="pf-v6-c-button__icon">
27
27
  <i class="fas fa-bars" aria-hidden="true"></i>
28
28
  </span>
29
29
  </button>
@@ -452,11 +452,9 @@ cssPrefix: pf-d-back-to-top
452
452
  class="pf-v6-c-button pf-m-primary"
453
453
  href="#main-content-back-to-top-basic-example"
454
454
  >
455
- <span class="pf-v6-c-button__text">
456
- Back to top
457
- <span class="pf-v6-c-button__icon pf-m-start pf-m-end">
458
- <i class="fas fa-angle-up" aria-hidden="true"></i>
459
- </span>
455
+ <span class="pf-v6-c-button__text">Back to top</span>
456
+ <span class="pf-v6-c-button__icon pf-m-end">
457
+ <i class="fas fa-angle-up" aria-hidden="true"></i>
460
458
  </span>
461
459
  </a>
462
460
  </div>
package/docs/demos/Banner/examples/Banner.md CHANGED
@@ -24,7 +24,7 @@ wrapperTag: div
24
24
  type="button"
25
25
  aria-label="Global navigation"
26
26
  >
27
- <span class="pf-v6-c-button__text">
27
+ <span class="pf-v6-c-button__icon">
28
28
  <i class="fas fa-bars" aria-hidden="true"></i>
29
29
  </span>
30
30
  </button>
@@ -511,7 +511,7 @@ wrapperTag: div
511
511
  type="button"
512
512
  aria-label="Global navigation"
513
513
  >
514
- <span class="pf-v6-c-button__text">
514
+ <span class="pf-v6-c-button__icon">
515
515
  <i class="fas fa-bars" aria-hidden="true"></i>
516
516
  </span>
517
517
  </button>
package/docs/demos/Button/examples/Button.md CHANGED
@@ -96,7 +96,7 @@ cssPrefix: pf-d-button
96
96
  <div class="pf-v6-c-form__group pf-m-action">
97
97
  <div class="pf-v6-c-form__actions">
98
98
  <button
99
- class="pf-v6-c-button pf-m-primary pf-m-in-progress pf-m-progress"
99
+ class="pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-primary"
100
100
  type="submit"
101
101
  >
102
102
  <span class="pf-v6-c-button__progress">
package/docs/demos/Card/examples/Card.md CHANGED
@@ -14,12 +14,12 @@ wrapperTag: div
14
14
  <div class="pf-v6-c-card__header-toggle">
15
15
  <button
16
16
  class="pf-v6-c-button pf-m-plain"
17
+ id&#x26;#x3D;&#x26;quot;card-demo-horizontal-grid-collapsed-example-toggle&#x26;quot;
17
18
  type="button"
18
- aria-label="Details"
19
- id="card-demo-horizontal-grid-collapsed-example-toggle"
20
19
  aria-labelledby="card-demo-horizontal-grid-collapsed-example-title card-demo-horizontal-grid-collapsed-example-toggle"
20
+ aria-label="Details"
21
21
  >
22
- <span class="pf-v6-c-button__text">
22
+ <span class="pf-v6-c-button__icon pf-m-start">
23
23
  <span class="pf-v6-c-card__header-toggle-icon">
24
24
  <i class="fas fa-angle-right" aria-hidden="true"></i>
25
25
  </span>
@@ -115,12 +115,12 @@ wrapperTag: div
115
115
  <div class="pf-v6-c-card__header-toggle">
116
116
  <button
117
117
  class="pf-v6-c-button pf-m-plain"
118
+ id&#x26;#x3D;&#x26;quot;card-demo-horizontal-grid-expanded-example-toggle&#x26;quot;
118
119
  type="button"
119
- aria-label="Details"
120
- id="card-demo-horizontal-grid-expanded-example-toggle"
121
120
  aria-labelledby="card-demo-horizontal-grid-expanded-example-title card-demo-horizontal-grid-expanded-example-toggle"
121
+ aria-label="Details"
122
122
  >
123
- <span class="pf-v6-c-button__text">
123
+ <span class="pf-v6-c-button__icon pf-m-start">
124
124
  <span class="pf-v6-c-card__header-toggle-icon">
125
125
  <i class="fas fa-angle-right" aria-hidden="true"></i>
126
126
  </span>
@@ -181,18 +181,10 @@ wrapperTag: div
181
181
  </li>
182
182
  </ul>
183
183
  </div>
184
- <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
185
- <span class="pf-v6-c-button__text">
186
- View all set up cluster steps
187
- <span
188
- class="pf-v6-c-button__icon pf-m-start pf-m-end"
189
- >
190
- <span class="pf-v6-c-icon pf-v6-m-mirror-inline-rtl">
191
- <span class="pf-v6-c-icon__content">
192
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
193
- </span>
194
- </span>
195
- </span>
184
+ <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
185
+ <span class="pf-v6-c-button__text">View all set up cluster steps</span>
186
+ <span class="pf-v6-c-button__icon pf-m-end">
187
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
196
188
  </span>
197
189
  </a>
198
190
  </div>
@@ -220,18 +212,10 @@ wrapperTag: div
220
212
  </li>
221
213
  </ul>
222
214
  </div>
223
- <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
224
- <span class="pf-v6-c-button__text">
225
- View all guided tours
226
- <span
227
- class="pf-v6-c-button__icon pf-m-start pf-m-end"
228
- >
229
- <span class="pf-v6-c-icon pf-v6-m-mirror-inline-rtl">
230
- <span class="pf-v6-c-icon__content">
231
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
232
- </span>
233
- </span>
234
- </span>
215
+ <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
216
+ <span class="pf-v6-c-button__text">View all guided tours</span>
217
+ <span class="pf-v6-c-button__icon pf-m-end">
218
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
235
219
  </span>
236
220
  </a>
237
221
  </div>
@@ -262,18 +246,10 @@ wrapperTag: div
262
246
  </li>
263
247
  </ul>
264
248
  </div>
265
- <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
266
- <span class="pf-v6-c-button__text">
267
- View all quick starts
268
- <span
269
- class="pf-v6-c-button__icon pf-m-start pf-m-end"
270
- >
271
- <span class="pf-v6-c-icon pf-v6-m-mirror-inline-rtl">
272
- <span class="pf-v6-c-icon__content">
273
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
274
- </span>
275
- </span>
276
- </span>
249
+ <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
250
+ <span class="pf-v6-c-button__text">View all quick starts</span>
251
+ <span class="pf-v6-c-button__icon pf-m-end">
252
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
277
253
  </span>
278
254
  </a>
279
255
  </div>
@@ -307,18 +283,10 @@ wrapperTag: div
307
283
  </li>
308
284
  </ul>
309
285
  </div>
310
- <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
311
- <span class="pf-v6-c-button__text">
312
- View all learning resources
313
- <span
314
- class="pf-v6-c-button__icon pf-m-start pf-m-end"
315
- >
316
- <span class="pf-v6-c-icon pf-v6-m-mirror-inline-rtl">
317
- <span class="pf-v6-c-icon__content">
318
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
319
- </span>
320
- </span>
321
- </span>
286
+ <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
287
+ <span class="pf-v6-c-button__text">View all learning resources</span>
288
+ <span class="pf-v6-c-button__icon pf-m-end">
289
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
322
290
  </span>
323
291
  </a>
324
292
  </div>
@@ -1362,7 +1330,7 @@ wrapperTag: div
1362
1330
  type="button"
1363
1331
  aria-label="Close"
1364
1332
  >
1365
- <span class="pf-v6-c-button__text">
1333
+ <span class="pf-v6-c-button__icon">
1366
1334
  <i class="fas fa-times" aria-hidden="true"></i>
1367
1335
  </span>
1368
1336
  </button>
@@ -1408,11 +1376,13 @@ wrapperTag: div
1408
1376
  >
1409
1377
  <button
1410
1378
  class="pf-v6-c-button pf-m-expanded pf-m-plain"
1379
+ id&#x26;#x3D;&#x26;quot;status-card-expanded-with-popover-example-popover-table-expandable-toggle-1&#x26;quot;
1411
1380
  type="button"
1412
1381
  aria-expanded="true"
1382
+ aria-labelledby="status-card-expanded-with-popover-example-popover-table-node-1 status-card-expanded-with-popover-example-popover-table-expandable-toggle-1"
1413
1383
  aria-label="Toggle row"
1414
1384
  >
1415
- <span class="pf-v6-c-button__text">
1385
+ <span class="pf-v6-c-button__icon">
1416
1386
  <div class="pf-v6-c-table__toggle-icon">
1417
1387
  <i
1418
1388
  class="fas fa-angle-down"
@@ -1422,11 +1392,10 @@ wrapperTag: div
1422
1392
  </span>
1423
1393
  </button>
1424
1394
  </td>
1425
-
1426
1395
  <td
1427
1396
  class="pf-v6-c-table__td"
1428
1397
  role="cell"
1429
- id="{{table--id}}-node1"
1398
+ id="status-card-expanded-with-popover-example-popover-table-node1"
1430
1399
  data-label="Branches"
1431
1400
  >
1432
1401
  <span class="pf-v6-c-table__text">API Servers</span>
@@ -1486,10 +1455,12 @@ wrapperTag: div
1486
1455
  >
1487
1456
  <button
1488
1457
  class="pf-v6-c-button pf-m-plain"
1458
+ id&#x26;#x3D;&#x26;quot;status-card-expanded-with-popover-example-popover-table-expandable-toggle-2&#x26;quot;
1489
1459
  type="button"
1460
+ aria-labelledby="status-card-expanded-with-popover-example-popover-table-node-2 status-card-expanded-with-popover-example-popover-table-expandable-toggle-2"
1490
1461
  aria-label="Toggle row"
1491
1462
  >
1492
- <span class="pf-v6-c-button__text">
1463
+ <span class="pf-v6-c-button__icon">
1493
1464
  <div class="pf-v6-c-table__toggle-icon">
1494
1465
  <i
1495
1466
  class="fas fa-angle-down"
@@ -1549,10 +1520,12 @@ wrapperTag: div
1549
1520
  >
1550
1521
  <button
1551
1522
  class="pf-v6-c-button pf-m-plain"
1523
+ id&#x26;#x3D;&#x26;quot;status-card-expanded-with-popover-example-popover-table-expandable-toggle-3&#x26;quot;
1552
1524
  type="button"
1525
+ aria-labelledby="status-card-expanded-with-popover-example-popover-table-node-3 status-card-expanded-with-popover-example-popover-table-expandable-toggle-3"
1553
1526
  aria-label="Toggle row"
1554
1527
  >
1555
- <span class="pf-v6-c-button__text">
1528
+ <span class="pf-v6-c-button__icon">
1556
1529
  <div class="pf-v6-c-table__toggle-icon">
1557
1530
  <i
1558
1531
  class="fas fa-angle-down"
@@ -1610,10 +1583,12 @@ wrapperTag: div
1610
1583
  >
1611
1584
  <button
1612
1585
  class="pf-v6-c-button pf-m-plain"
1586
+ id&#x26;#x3D;&#x26;quot;status-card-expanded-with-popover-example-popover-table-expandable-toggle-4&#x26;quot;
1613
1587
  type="button"
1588
+ aria-labelledby="status-card-expanded-with-popover-example-popover-table-node-4 status-card-expanded-with-popover-example-popover-table-expandable-toggle-4"
1614
1589
  aria-label="Toggle row"
1615
1590
  >
1616
- <span class="pf-v6-c-button__text">
1591
+ <span class="pf-v6-c-button__icon">
1617
1592
  <div class="pf-v6-c-table__toggle-icon">
1618
1593
  <i
1619
1594
  class="fas fa-angle-down"
@@ -2010,12 +1985,12 @@ wrapperTag: div
2010
1985
  <div class="pf-v6-c-card__header-toggle">
2011
1986
  <button
2012
1987
  class="pf-v6-c-button pf-m-plain"
1988
+ id&#x26;#x3D;&#x26;quot;nested-cards-toggle-right-example-group-1-toggle&#x26;quot;
2013
1989
  type="button"
2014
- aria-label="Details"
2015
- id="nested-cards-toggle-right-example-group-1-toggle"
2016
1990
  aria-labelledby="nested-cards-toggle-right-example-group-1-title nested-cards-toggle-right-example-group-1-toggle"
1991
+ aria-label="Details"
2017
1992
  >
2018
- <span class="pf-v6-c-button__text">
1993
+ <span class="pf-v6-c-button__icon pf-m-start">
2019
1994
  <span class="pf-v6-c-card__header-toggle-icon">
2020
1995
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2021
1996
  </span>
@@ -2123,12 +2098,12 @@ wrapperTag: div
2123
2098
  <div class="pf-v6-c-card__header-toggle">
2124
2099
  <button
2125
2100
  class="pf-v6-c-button pf-m-plain"
2101
+ id&#x26;#x3D;&#x26;quot;nested-cards-toggle-right-example-group-2-toggle&#x26;quot;
2126
2102
  type="button"
2127
- aria-label="Details"
2128
- id="nested-cards-toggle-right-example-group-2-toggle"
2129
2103
  aria-labelledby="nested-cards-toggle-right-example-group-2-title nested-cards-toggle-right-example-group-2-toggle"
2104
+ aria-label="Details"
2130
2105
  >
2131
- <span class="pf-v6-c-button__text">
2106
+ <span class="pf-v6-c-button__icon pf-m-start">
2132
2107
  <span class="pf-v6-c-card__header-toggle-icon">
2133
2108
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2134
2109
  </span>
@@ -2153,12 +2128,12 @@ wrapperTag: div
2153
2128
  <div class="pf-v6-c-card__header-toggle">
2154
2129
  <button
2155
2130
  class="pf-v6-c-button pf-m-plain"
2131
+ id&#x26;#x3D;&#x26;quot;nested-cards-toggle-right-example-group-3-toggle&#x26;quot;
2156
2132
  type="button"
2157
- aria-label="Details"
2158
- id="nested-cards-toggle-right-example-group-3-toggle"
2159
2133
  aria-labelledby="nested-cards-toggle-right-example-group-3-title nested-cards-toggle-right-example-group-3-toggle"
2134
+ aria-label="Details"
2160
2135
  >
2161
- <span class="pf-v6-c-button__text">
2136
+ <span class="pf-v6-c-button__icon pf-m-start">
2162
2137
  <span class="pf-v6-c-card__header-toggle-icon">
2163
2138
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2164
2139
  </span>
@@ -2198,12 +2173,12 @@ wrapperTag: div
2198
2173
  <div class="pf-v6-c-card__header-toggle">
2199
2174
  <button
2200
2175
  class="pf-v6-c-button pf-m-plain"
2176
+ id&#x26;#x3D;&#x26;quot;nested-cards-example-group-1-toggle&#x26;quot;
2201
2177
  type="button"
2202
- aria-label="Details"
2203
- id="nested-cards-example-group-1-toggle"
2204
2178
  aria-labelledby="nested-cards-example-group-1-title nested-cards-example-group-1-toggle"
2179
+ aria-label="Details"
2205
2180
  >
2206
- <span class="pf-v6-c-button__text">
2181
+ <span class="pf-v6-c-button__icon pf-m-start">
2207
2182
  <span class="pf-v6-c-card__header-toggle-icon">
2208
2183
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2209
2184
  </span>
@@ -2308,12 +2283,12 @@ wrapperTag: div
2308
2283
  <div class="pf-v6-c-card__header-toggle">
2309
2284
  <button
2310
2285
  class="pf-v6-c-button pf-m-plain"
2286
+ id&#x26;#x3D;&#x26;quot;nested-cards-example-group-2-toggle&#x26;quot;
2311
2287
  type="button"
2312
- aria-label="Details"
2313
- id="nested-cards-example-group-2-toggle"
2314
2288
  aria-labelledby="nested-cards-example-group-2-title nested-cards-example-group-2-toggle"
2289
+ aria-label="Details"
2315
2290
  >
2316
- <span class="pf-v6-c-button__text">
2291
+ <span class="pf-v6-c-button__icon pf-m-start">
2317
2292
  <span class="pf-v6-c-card__header-toggle-icon">
2318
2293
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2319
2294
  </span>
@@ -2335,12 +2310,12 @@ wrapperTag: div
2335
2310
  <div class="pf-v6-c-card__header-toggle">
2336
2311
  <button
2337
2312
  class="pf-v6-c-button pf-m-plain"
2313
+ id&#x26;#x3D;&#x26;quot;nested-cards-example-group-3-toggle&#x26;quot;
2338
2314
  type="button"
2339
- aria-label="Details"
2340
- id="nested-cards-example-group-3-toggle"
2341
2315
  aria-labelledby="nested-cards-example-group-3-title nested-cards-example-group-3-toggle"
2316
+ aria-label="Details"
2342
2317
  >
2343
- <span class="pf-v6-c-button__text">
2318
+ <span class="pf-v6-c-button__icon pf-m-start">
2344
2319
  <span class="pf-v6-c-card__header-toggle-icon">
2345
2320
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2346
2321
  </span>
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -22,7 +22,7 @@ section: patterns
22
22
  type="button"
23
23
  aria-label="Global navigation"
24
24
  >
25
- <span class="pf-v6-c-button__text">
25
+ <span class="pf-v6-c-button__icon">
26
26
  <i class="fas fa-bars" aria-hidden="true"></i>
27
27
  </span>
28
28
  </button>
@@ -520,7 +520,7 @@ section: patterns
520
520
  disabled
521
521
  aria-label="Go to previous page"
522
522
  >
523
- <span class="pf-v6-c-button__text">
523
+ <span class="pf-v6-c-button__icon">
524
524
  <i class="fas fa-angle-left" aria-hidden="true"></i>
525
525
  </span>
526
526
  </button>
@@ -531,7 +531,7 @@ section: patterns
531
531
  type="button"
532
532
  aria-label="Go to next page"
533
533
  >
534
- <span class="pf-v6-c-button__text">
534
+ <span class="pf-v6-c-button__icon">
535
535
  <i class="fas fa-angle-right" aria-hidden="true"></i>
536
536
  </span>
537
537
  </button>
@@ -1069,7 +1069,7 @@ section: patterns
1069
1069
  disabled
1070
1070
  aria-label="Go to first page"
1071
1071
  >
1072
- <span class="pf-v6-c-button__text">
1072
+ <span class="pf-v6-c-button__icon">
1073
1073
  <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1074
1074
  </span>
1075
1075
  </button>
@@ -1081,7 +1081,7 @@ section: patterns
1081
1081
  disabled
1082
1082
  aria-label="Go to previous page"
1083
1083
  >
1084
- <span class="pf-v6-c-button__text">
1084
+ <span class="pf-v6-c-button__icon">
1085
1085
  <i class="fas fa-angle-left" aria-hidden="true"></i>
1086
1086
  </span>
1087
1087
  </button>
@@ -1104,7 +1104,7 @@ section: patterns
1104
1104
  type="button"
1105
1105
  aria-label="Go to next page"
1106
1106
  >
1107
- <span class="pf-v6-c-button__text">
1107
+ <span class="pf-v6-c-button__icon">
1108
1108
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1109
1109
  </span>
1110
1110
  </button>
@@ -1113,9 +1113,10 @@ section: patterns
1113
1113
  <button
1114
1114
  class="pf-v6-c-button pf-m-plain"
1115
1115
  type="button"
1116
+ disabled
1116
1117
  aria-label="Go to last page"
1117
1118
  >
1118
- <span class="pf-v6-c-button__text">
1119
+ <span class="pf-v6-c-button__icon">
1119
1120
  <i class="fas fa-angle-double-right" aria-hidden="true"></i>
1120
1121
  </span>
1121
1122
  </button>
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -20,7 +20,7 @@ cssPrefix: pf-d-dashboard
20
20
  type="button"
21
21
  aria-label="Global navigation"
22
22
  >
23
- <span class="pf-v6-c-button__text">
23
+ <span class="pf-v6-c-button__icon">
24
24
  <i class="fas fa-bars" aria-hidden="true"></i>
25
25
  </span>
26
26
  </button>
@@ -296,12 +296,12 @@ cssPrefix: pf-d-dashboard
296
296
  <div class="pf-v6-c-card__header-toggle">
297
297
  <button
298
298
  class="pf-v6-c-button pf-m-plain"
299
+ id&#x26;#x3D;&#x26;quot;dashboard-demo-expandable-status-card-1-toggle&#x26;quot;
299
300
  type="button"
300
- aria-label="Details"
301
- id="dashboard-demo-expandable-status-card-1-toggle"
302
301
  aria-labelledby="dashboard-demo-expandable-status-card-1-title dashboard-demo-expandable-status-card-1-toggle"
302
+ aria-label="Details"
303
303
  >
304
- <span class="pf-v6-c-button__text">
304
+ <span class="pf-v6-c-button__icon pf-m-start">
305
305
  <span class="pf-v6-c-card__header-toggle-icon">
306
306
  <i class="fas fa-angle-right" aria-hidden="true"></i>
307
307
  </span>
@@ -406,16 +406,12 @@ cssPrefix: pf-d-dashboard
406
406
  </div>
407
407
  <div class="pf-v6-c-card__footer">
408
408
  <a
409
- class="pf-v6-c-button pf-m-link pf-m-inline"
409
+ class="pf-v6-c-button pf-m-inline pf-m-link"
410
410
  href="#"
411
411
  >
412
- <span class="pf-v6-c-button__text">
413
- View pathway
414
- <span
415
- class="pf-v6-c-button__icon pf-m-start pf-m-end"
416
- >
417
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
418
- </span>
412
+ <span class="pf-v6-c-button__text">View pathway</span>
413
+ <span class="pf-v6-c-button__icon pf-m-end">
414
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
419
415
  </span>
420
416
  </a>
421
417
  </div>
@@ -500,16 +496,12 @@ cssPrefix: pf-d-dashboard
500
496
  </div>
501
497
  <div class="pf-v6-c-card__footer">
502
498
  <a
503
- class="pf-v6-c-button pf-m-link pf-m-inline"
499
+ class="pf-v6-c-button pf-m-inline pf-m-link"
504
500
  href="#"
505
501
  >
506
- <span class="pf-v6-c-button__text">
507
- View pathway
508
- <span
509
- class="pf-v6-c-button__icon pf-m-start pf-m-end"
510
- >
511
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
512
- </span>
502
+ <span class="pf-v6-c-button__text">View pathway</span>
503
+ <span class="pf-v6-c-button__icon pf-m-end">
504
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
513
505
  </span>
514
506
  </a>
515
507
  </div>
@@ -594,16 +586,12 @@ cssPrefix: pf-d-dashboard
594
586
  </div>
595
587
  <div class="pf-v6-c-card__footer">
596
588
  <a
597
- class="pf-v6-c-button pf-m-link pf-m-inline"
589
+ class="pf-v6-c-button pf-m-inline pf-m-link"
598
590
  href="#"
599
591
  >
600
- <span class="pf-v6-c-button__text">
601
- View pathway
602
- <span
603
- class="pf-v6-c-button__icon pf-m-start pf-m-end"
604
- >
605
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
606
- </span>
592
+ <span class="pf-v6-c-button__text">View pathway</span>
593
+ <span class="pf-v6-c-button__icon pf-m-end">
594
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
607
595
  </span>
608
596
  </a>
609
597
  </div>
@@ -936,12 +924,12 @@ cssPrefix: pf-d-dashboard
936
924
  <div class="pf-v6-c-card__header-toggle">
937
925
  <button
938
926
  class="pf-v6-c-button pf-m-plain"
927
+ id&#x26;#x3D;&#x26;quot;dashboard-demo-line-chart-card-1-group-1-toggle&#x26;quot;
939
928
  type="button"
940
- aria-label="Details"
941
- id="dashboard-demo-line-chart-card-1-group-1-toggle"
942
929
  aria-labelledby="dashboard-demo-line-chart-card-1-group-1-title dashboard-demo-line-chart-card-1-group-1-toggle"
930
+ aria-label="Details"
943
931
  >
944
- <span class="pf-v6-c-button__text">
932
+ <span class="pf-v6-c-button__icon pf-m-start">
945
933
  <span class="pf-v6-c-card__header-toggle-icon">
946
934
  <i class="fas fa-angle-right" aria-hidden="true"></i>
947
935
  </span>
@@ -1047,12 +1035,12 @@ cssPrefix: pf-d-dashboard
1047
1035
  <div class="pf-v6-c-card__header-toggle">
1048
1036
  <button
1049
1037
  class="pf-v6-c-button pf-m-plain"
1038
+ id&#x26;#x3D;&#x26;quot;dashboard-demo-line-chart-card-1-group-2-toggle&#x26;quot;
1050
1039
  type="button"
1051
- aria-label="Details"
1052
- id="dashboard-demo-line-chart-card-1-group-2-toggle"
1053
1040
  aria-labelledby="dashboard-demo-line-chart-card-1-group-2-title dashboard-demo-line-chart-card-1-group-2-toggle"
1041
+ aria-label="Details"
1054
1042
  >
1055
- <span class="pf-v6-c-button__text">
1043
+ <span class="pf-v6-c-button__icon pf-m-start">
1056
1044
  <span class="pf-v6-c-card__header-toggle-icon">
1057
1045
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1058
1046
  </span>
@@ -1075,12 +1063,12 @@ cssPrefix: pf-d-dashboard
1075
1063
  <div class="pf-v6-c-card__header-toggle">
1076
1064
  <button
1077
1065
  class="pf-v6-c-button pf-m-plain"
1066
+ id&#x26;#x3D;&#x26;quot;dashboard-demo-line-chart-card-1-group-3-toggle&#x26;quot;
1078
1067
  type="button"
1079
- aria-label="Details"
1080
- id="dashboard-demo-line-chart-card-1-group-3-toggle"
1081
1068
  aria-labelledby="dashboard-demo-line-chart-card-1-group-3-title dashboard-demo-line-chart-card-1-group-3-toggle"
1069
+ aria-label="Details"
1082
1070
  >
1083
- <span class="pf-v6-c-button__text">
1071
+ <span class="pf-v6-c-button__icon pf-m-start">
1084
1072
  <span class="pf-v6-c-card__header-toggle-icon">
1085
1073
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1086
1074
  </span>