@patternfly/patternfly 6.0.0-alpha.165 → 6.0.0-alpha.166

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 (85) hide show
  1. package/components/Button/button.css +33 -14
  2. package/components/Button/button.scss +36 -14
  3. package/components/_index.css +33 -14
  4. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  5. package/docs/components/ActionList/examples/ActionList.md +60 -20
  6. package/docs/components/Alert/examples/Alert.md +106 -62
  7. package/docs/components/BackToTop/examples/BackToTop.md +5 -3
  8. package/docs/components/Banner/examples/Banner.md +9 -3
  9. package/docs/components/Button/examples/Button.md +536 -367
  10. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  11. package/docs/components/Card/examples/Card.md +43 -29
  12. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +75 -33
  13. package/docs/components/CodeBlock/examples/CodeBlock.md +18 -6
  14. package/docs/components/CodeEditor/examples/CodeEditor.md +44 -22
  15. package/docs/components/ContextSelector/deprecated/context-selector.md +6 -8
  16. package/docs/components/DataList/examples/DataList.md +121 -63
  17. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  18. package/docs/components/DescriptionList/examples/DescriptionList.md +125 -75
  19. package/docs/components/Drawer/examples/Drawer.md +57 -19
  20. package/docs/components/DualListSelector/examples/DualListSelector.md +204 -100
  21. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  22. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  23. package/docs/components/Form/examples/Form.md +53 -19
  24. package/docs/components/Hint/examples/Hint.md +9 -9
  25. package/docs/components/InlineEdit/examples/InlineEdit.md +78 -26
  26. package/docs/components/InputGroup/examples/InputGroup.md +27 -9
  27. package/docs/components/JumpLinks/examples/JumpLinks.md +188 -68
  28. package/docs/components/Label/examples/Label.md +651 -217
  29. package/docs/components/LogViewer/examples/LogViewer.md +218 -86
  30. package/docs/components/Login/examples/Login.md +346 -282
  31. package/docs/components/Masthead/examples/masthead.md +27 -9
  32. package/docs/components/Menu/examples/Menu.md +35 -25
  33. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -1
  34. package/docs/components/ModalBox/examples/ModalBox.md +48 -16
  35. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +48 -16
  36. package/docs/components/Nav/examples/Navigation.md +12 -4
  37. package/docs/components/NotificationBadge/examples/NotificationBadge.md +78 -42
  38. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +6 -2
  39. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  40. package/docs/components/OverflowMenu/examples/overflow-menu.md +48 -16
  41. package/docs/components/Page/examples/Page.md +21 -7
  42. package/docs/components/Pagination/examples/Pagination.md +132 -44
  43. package/docs/components/Popover/examples/Popover.md +45 -15
  44. package/docs/components/Select/deprecated/Select.md +111 -55
  45. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  46. package/docs/components/Slider/examples/Slider.md +12 -4
  47. package/docs/components/Table/examples/Table.md +363 -208
  48. package/docs/components/Tabs/examples/Tabs.md +1230 -574
  49. package/docs/components/TextInputGroup/examples/TextInputGroup.md +132 -44
  50. package/docs/components/Toolbar/examples/Toolbar.md +120 -64
  51. package/docs/components/TreeView/examples/TreeView.md +12 -4
  52. package/docs/components/Wizard/examples/Wizard.md +105 -38
  53. package/docs/demos/AboutModal/examples/AboutModal.md +9 -3
  54. package/docs/demos/Alert/examples/Alert.md +39 -25
  55. package/docs/demos/BackToTop/examples/BackToTop.md +11 -5
  56. package/docs/demos/Banner/examples/Banner.md +12 -4
  57. package/docs/demos/Button/examples/Button.md +7 -7
  58. package/docs/demos/Card/examples/Card.md +106 -57
  59. package/docs/demos/CardView/examples/CardView.md +30 -13
  60. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -8
  61. package/docs/demos/Dashboard/examples/Dashboard.md +43 -28
  62. package/docs/demos/DataList/examples/DataList.md +255 -149
  63. package/docs/demos/DescriptionList/examples/DescriptionList.md +21 -7
  64. package/docs/demos/Drawer/examples/Drawer.md +89 -43
  65. package/docs/demos/Form/examples/BasicForms.md +141 -59
  66. package/docs/demos/JumpLinks/examples/JumpLinks.md +222 -109
  67. package/docs/demos/Masthead/examples/Masthead.md +63 -21
  68. package/docs/demos/Modal/examples/Modal.md +99 -37
  69. package/docs/demos/Nav/examples/Nav.md +45 -15
  70. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +58 -43
  71. package/docs/demos/Page/examples/Page.md +54 -21
  72. package/docs/demos/Page/examples/Penta.md +9 -6
  73. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  74. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +12 -4
  75. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +306 -133
  76. package/docs/demos/Skeleton/examples/Skeleton.md +6 -2
  77. package/docs/demos/Table/examples/Table.md +474 -210
  78. package/docs/demos/Tabs/examples/Tabs.md +60 -22
  79. package/docs/demos/Toolbar/examples/Toolbar.md +123 -72
  80. package/docs/demos/Wizard/examples/Wizard.md +179 -110
  81. package/package.json +1 -1
  82. package/patternfly-no-globals.css +33 -14
  83. package/patternfly.css +33 -14
  84. package/patternfly.min.css +1 -1
  85. package/patternfly.min.css.map +1 -1
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -18,7 +18,9 @@ wrapperTag: div
18
18
  type="button"
19
19
  aria-label="Close"
20
20
  >
21
- <i class="fas fa-times" aria-hidden="true"></i>
21
+ <span class="pf-v6-c-button__text">
22
+ <i class="fas fa-times" aria-hidden="true"></i>
23
+ </span>
22
24
  </button>
23
25
  </div>
24
26
  <div class="pf-v6-c-wizard__title">
@@ -267,15 +269,21 @@ wrapperTag: div
267
269
  <div class="pf-v6-c-action-list">
268
270
  <div class="pf-v6-c-action-list__group">
269
271
  <div class="pf-v6-c-action-list__item">
270
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
272
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
273
+ <span class="pf-v6-c-button__text">Back</span>
274
+ </button>
271
275
  </div>
272
276
  <div class="pf-v6-c-action-list__item">
273
- <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
277
+ <button class="pf-v6-c-button pf-m-primary" type="button">
278
+ <span class="pf-v6-c-button__text">Next</span>
279
+ </button>
274
280
  </div>
275
281
  </div>
276
282
  <div class="pf-v6-c-action-list__group">
277
283
  <div class="pf-v6-c-action-list__item">
278
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
284
+ <button class="pf-v6-c-button pf-m-link" type="button">
285
+ <span class="pf-v6-c-button__text">Cancel</span>
286
+ </button>
279
287
  </div>
280
288
  </div>
281
289
  </div>
@@ -296,7 +304,9 @@ wrapperTag: div
296
304
  type="button"
297
305
  aria-label="Close"
298
306
  >
299
- <i class="fas fa-times" aria-hidden="true"></i>
307
+ <span class="pf-v6-c-button__text">
308
+ <i class="fas fa-times" aria-hidden="true"></i>
309
+ </span>
300
310
  </button>
301
311
  </div>
302
312
  <div class="pf-v6-c-wizard__title">
@@ -545,15 +555,21 @@ wrapperTag: div
545
555
  <div class="pf-v6-c-action-list">
546
556
  <div class="pf-v6-c-action-list__group">
547
557
  <div class="pf-v6-c-action-list__item">
548
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
558
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
559
+ <span class="pf-v6-c-button__text">Back</span>
560
+ </button>
549
561
  </div>
550
562
  <div class="pf-v6-c-action-list__item">
551
- <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
563
+ <button class="pf-v6-c-button pf-m-primary" type="button">
564
+ <span class="pf-v6-c-button__text">Next</span>
565
+ </button>
552
566
  </div>
553
567
  </div>
554
568
  <div class="pf-v6-c-action-list__group">
555
569
  <div class="pf-v6-c-action-list__item">
556
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
570
+ <button class="pf-v6-c-button pf-m-link" type="button">
571
+ <span class="pf-v6-c-button__text">Cancel</span>
572
+ </button>
557
573
  </div>
558
574
  </div>
559
575
  </div>
@@ -574,7 +590,9 @@ wrapperTag: div
574
590
  type="button"
575
591
  aria-label="Close"
576
592
  >
577
- <i class="fas fa-times" aria-hidden="true"></i>
593
+ <span class="pf-v6-c-button__text">
594
+ <i class="fas fa-times" aria-hidden="true"></i>
595
+ </span>
578
596
  </button>
579
597
  </div>
580
598
  <div class="pf-v6-c-wizard__title">
@@ -680,7 +698,9 @@ wrapperTag: div
680
698
  <button
681
699
  class="pf-v6-c-button pf-v6-u-hidden pf-m-link pf-m-inline pf-v6-u-float-right pf-v6-u-ml-md"
682
700
  type="button"
683
- >Open drawer</button>
701
+ >
702
+ <span class="pf-v6-c-button__text">Open drawer</span>
703
+ </button>
684
704
  <form class="pf-v6-c-form pf-m-limit-width" novalidate>
685
705
  <div class="pf-v6-c-form__group">
686
706
  <div class="pf-v6-c-form__group-label"><label
@@ -835,7 +855,9 @@ wrapperTag: div
835
855
  type="button"
836
856
  aria-label="Close drawer panel"
837
857
  >
838
- <i class="fas fa-times" aria-hidden="true"></i>
858
+ <span class="pf-v6-c-button__text">
859
+ <i class="fas fa-times" aria-hidden="true"></i>
860
+ </span>
839
861
  </button>
840
862
  </div>
841
863
  </div>drawer-panel
@@ -847,18 +869,21 @@ wrapperTag: div
847
869
  <div class="pf-v6-c-action-list">
848
870
  <div class="pf-v6-c-action-list__group">
849
871
  <div class="pf-v6-c-action-list__item">
850
- <button
851
- class="pf-v6-c-button pf-m-secondary"
852
- type="button"
853
- >Back</button>
872
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
873
+ <span class="pf-v6-c-button__text">Back</span>
874
+ </button>
854
875
  </div>
855
876
  <div class="pf-v6-c-action-list__item">
856
- <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
877
+ <button class="pf-v6-c-button pf-m-primary" type="button">
878
+ <span class="pf-v6-c-button__text">Next</span>
879
+ </button>
857
880
  </div>
858
881
  </div>
859
882
  <div class="pf-v6-c-action-list__group">
860
883
  <div class="pf-v6-c-action-list__item">
861
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
884
+ <button class="pf-v6-c-button pf-m-link" type="button">
885
+ <span class="pf-v6-c-button__text">Cancel</span>
886
+ </button>
862
887
  </div>
863
888
  </div>
864
889
  </div>
@@ -882,7 +907,9 @@ wrapperTag: div
882
907
  type="button"
883
908
  aria-label="Close"
884
909
  >
885
- <i class="fas fa-times" aria-hidden="true"></i>
910
+ <span class="pf-v6-c-button__text">
911
+ <i class="fas fa-times" aria-hidden="true"></i>
912
+ </span>
886
913
  </button>
887
914
  </div>
888
915
  <div class="pf-v6-c-wizard__title">
@@ -1131,15 +1158,21 @@ wrapperTag: div
1131
1158
  <div class="pf-v6-c-action-list">
1132
1159
  <div class="pf-v6-c-action-list__group">
1133
1160
  <div class="pf-v6-c-action-list__item">
1134
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
1161
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1162
+ <span class="pf-v6-c-button__text">Back</span>
1163
+ </button>
1135
1164
  </div>
1136
1165
  <div class="pf-v6-c-action-list__item">
1137
- <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
1166
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1167
+ <span class="pf-v6-c-button__text">Next</span>
1168
+ </button>
1138
1169
  </div>
1139
1170
  </div>
1140
1171
  <div class="pf-v6-c-action-list__group">
1141
1172
  <div class="pf-v6-c-action-list__item">
1142
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1173
+ <button class="pf-v6-c-button pf-m-link" type="button">
1174
+ <span class="pf-v6-c-button__text">Cancel</span>
1175
+ </button>
1143
1176
  </div>
1144
1177
  </div>
1145
1178
  </div>
@@ -1160,7 +1193,9 @@ wrapperTag: div
1160
1193
  type="button"
1161
1194
  aria-label="Close"
1162
1195
  >
1163
- <i class="fas fa-times" aria-hidden="true"></i>
1196
+ <span class="pf-v6-c-button__text">
1197
+ <i class="fas fa-times" aria-hidden="true"></i>
1198
+ </span>
1164
1199
  </button>
1165
1200
  </div>
1166
1201
  <div class="pf-v6-c-wizard__title">
@@ -1409,15 +1444,21 @@ wrapperTag: div
1409
1444
  <div class="pf-v6-c-action-list">
1410
1445
  <div class="pf-v6-c-action-list__group">
1411
1446
  <div class="pf-v6-c-action-list__item">
1412
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
1447
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1448
+ <span class="pf-v6-c-button__text">Back</span>
1449
+ </button>
1413
1450
  </div>
1414
1451
  <div class="pf-v6-c-action-list__item">
1415
- <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
1452
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1453
+ <span class="pf-v6-c-button__text">Next</span>
1454
+ </button>
1416
1455
  </div>
1417
1456
  </div>
1418
1457
  <div class="pf-v6-c-action-list__group">
1419
1458
  <div class="pf-v6-c-action-list__item">
1420
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1459
+ <button class="pf-v6-c-button pf-m-link" type="button">
1460
+ <span class="pf-v6-c-button__text">Cancel</span>
1461
+ </button>
1421
1462
  </div>
1422
1463
  </div>
1423
1464
  </div>
@@ -1438,7 +1479,9 @@ wrapperTag: div
1438
1479
  type="button"
1439
1480
  aria-label="Close"
1440
1481
  >
1441
- <i class="fas fa-times" aria-hidden="true"></i>
1482
+ <span class="pf-v6-c-button__text">
1483
+ <i class="fas fa-times" aria-hidden="true"></i>
1484
+ </span>
1442
1485
  </button>
1443
1486
  </div>
1444
1487
  <div class="pf-v6-c-wizard__title">
@@ -1567,7 +1610,9 @@ wrapperTag: div
1567
1610
  <div
1568
1611
  class="pf-v6-c-empty-state__body"
1569
1612
  >Description can be used to further elaborate on the validation step, or give the user a better idea of how long the process will take.</div>
1570
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1613
+ <button class="pf-v6-c-button pf-m-link" type="button">
1614
+ <span class="pf-v6-c-button__text">Cancel</span>
1615
+ </button>
1571
1616
  </div>
1572
1617
  </div>
1573
1618
  </div>
@@ -1578,15 +1623,21 @@ wrapperTag: div
1578
1623
  <div class="pf-v6-c-action-list">
1579
1624
  <div class="pf-v6-c-action-list__group">
1580
1625
  <div class="pf-v6-c-action-list__item">
1581
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
1626
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1627
+ <span class="pf-v6-c-button__text">Back</span>
1628
+ </button>
1582
1629
  </div>
1583
1630
  <div class="pf-v6-c-action-list__item">
1584
- <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
1631
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1632
+ <span class="pf-v6-c-button__text">Next</span>
1633
+ </button>
1585
1634
  </div>
1586
1635
  </div>
1587
1636
  <div class="pf-v6-c-action-list__group">
1588
1637
  <div class="pf-v6-c-action-list__item">
1589
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1638
+ <button class="pf-v6-c-button pf-m-link" type="button">
1639
+ <span class="pf-v6-c-button__text">Cancel</span>
1640
+ </button>
1590
1641
  </div>
1591
1642
  </div>
1592
1643
  </div>
@@ -1607,7 +1658,9 @@ wrapperTag: div
1607
1658
  type="button"
1608
1659
  aria-label="Close"
1609
1660
  >
1610
- <i class="fas fa-times" aria-hidden="true"></i>
1661
+ <span class="pf-v6-c-button__text">
1662
+ <i class="fas fa-times" aria-hidden="true"></i>
1663
+ </span>
1611
1664
  </button>
1612
1665
  </div>
1613
1666
  <div class="pf-v6-c-wizard__title">
@@ -1861,15 +1914,21 @@ wrapperTag: div
1861
1914
  <div class="pf-v6-c-action-list">
1862
1915
  <div class="pf-v6-c-action-list__group">
1863
1916
  <div class="pf-v6-c-action-list__item">
1864
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
1917
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1918
+ <span class="pf-v6-c-button__text">Back</span>
1919
+ </button>
1865
1920
  </div>
1866
1921
  <div class="pf-v6-c-action-list__item">
1867
- <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
1922
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1923
+ <span class="pf-v6-c-button__text">Next</span>
1924
+ </button>
1868
1925
  </div>
1869
1926
  </div>
1870
1927
  <div class="pf-v6-c-action-list__group">
1871
1928
  <div class="pf-v6-c-action-list__item">
1872
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1929
+ <button class="pf-v6-c-button pf-m-link" type="button">
1930
+ <span class="pf-v6-c-button__text">Cancel</span>
1931
+ </button>
1873
1932
  </div>
1874
1933
  </div>
1875
1934
  </div>
@@ -1890,7 +1949,9 @@ wrapperTag: div
1890
1949
  type="button"
1891
1950
  aria-label="Close"
1892
1951
  >
1893
- <i class="fas fa-times" aria-hidden="true"></i>
1952
+ <span class="pf-v6-c-button__text">
1953
+ <i class="fas fa-times" aria-hidden="true"></i>
1954
+ </span>
1894
1955
  </button>
1895
1956
  </div>
1896
1957
  <div class="pf-v6-c-wizard__title">
@@ -2144,15 +2205,21 @@ wrapperTag: div
2144
2205
  <div class="pf-v6-c-action-list">
2145
2206
  <div class="pf-v6-c-action-list__group">
2146
2207
  <div class="pf-v6-c-action-list__item">
2147
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
2208
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
2209
+ <span class="pf-v6-c-button__text">Back</span>
2210
+ </button>
2148
2211
  </div>
2149
2212
  <div class="pf-v6-c-action-list__item">
2150
- <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
2213
+ <button class="pf-v6-c-button pf-m-primary" type="button">
2214
+ <span class="pf-v6-c-button__text">Next</span>
2215
+ </button>
2151
2216
  </div>
2152
2217
  </div>
2153
2218
  <div class="pf-v6-c-action-list__group">
2154
2219
  <div class="pf-v6-c-action-list__item">
2155
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
2220
+ <button class="pf-v6-c-button pf-m-link" type="button">
2221
+ <span class="pf-v6-c-button__text">Cancel</span>
2222
+ </button>
2156
2223
  </div>
2157
2224
  </div>
2158
2225
  </div>
package/docs/demos/AboutModal/examples/AboutModal.md CHANGED
@@ -13,7 +13,9 @@ This demo implements the about modal, including the backdrop.
13
13
  <a
14
14
  class="pf-v6-c-button pf-m-primary"
15
15
  href="#main-content-modal-basic-example"
16
- >Skip to content</a>
16
+ >
17
+ <span class="pf-v6-c-button__text">Skip to content</span>
18
+ </a>
17
19
  </div>
18
20
  <header class="pf-v6-c-masthead" id="modal-basic-example-masthead">
19
21
  <span class="pf-v6-c-masthead__toggle">
@@ -22,7 +24,9 @@ This demo implements the about modal, including the backdrop.
22
24
  type="button"
23
25
  aria-label="Global navigation"
24
26
  >
25
- <i class="fas fa-bars" aria-hidden="true"></i>
27
+ <span class="pf-v6-c-button__text">
28
+ <i class="fas fa-bars" aria-hidden="true"></i>
29
+ </span>
26
30
  </button>
27
31
  </span>
28
32
  <div class="pf-v6-c-masthead__main">
@@ -352,7 +356,9 @@ This demo implements the about modal, including the backdrop.
352
356
  type="button"
353
357
  aria-label="Close dialog"
354
358
  >
355
- <i class="fas fa-times" aria-hidden="true"></i>
359
+ <span class="pf-v6-c-button__text">
360
+ <i class="fas fa-times" aria-hidden="true"></i>
361
+ </span>
356
362
  </button>
357
363
  </div>
358
364
  <div class="pf-v6-c-about-modal-box__header">
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -11,7 +11,9 @@ section: components
11
11
  <a
12
12
  class="pf-v6-c-button pf-m-primary"
13
13
  href="#main-content-alert-basic-example"
14
- >Skip to content</a>
14
+ >
15
+ <span class="pf-v6-c-button__text">Skip to content</span>
16
+ </a>
15
17
  </div>
16
18
  <header class="pf-v6-c-masthead" id="alert-basic-example-masthead">
17
19
  <span class="pf-v6-c-masthead__toggle">
@@ -20,7 +22,9 @@ section: components
20
22
  type="button"
21
23
  aria-label="Global navigation"
22
24
  >
23
- <i class="fas fa-bars" aria-hidden="true"></i>
25
+ <span class="pf-v6-c-button__text">
26
+ <i class="fas fa-bars" aria-hidden="true"></i>
27
+ </span>
24
28
  </button>
25
29
  </span>
26
30
  <div class="pf-v6-c-masthead__main">
@@ -341,7 +345,9 @@ section: components
341
345
  type="button"
342
346
  aria-label="Close success alert: Newest notification"
343
347
  >
344
- <i class="fas fa-times" aria-hidden="true"></i>
348
+ <span class="pf-v6-c-button__text">
349
+ <i class="fas fa-times" aria-hidden="true"></i>
350
+ </span>
345
351
  </button>
346
352
  </div>
347
353
  <div class="pf-v6-c-alert__description">
@@ -364,7 +370,9 @@ section: components
364
370
  type="button"
365
371
  aria-label="Close warning alert: second newest notification"
366
372
  >
367
- <i class="fas fa-times" aria-hidden="true"></i>
373
+ <span class="pf-v6-c-button__text">
374
+ <i class="fas fa-times" aria-hidden="true"></i>
375
+ </span>
368
376
  </button>
369
377
  </div>
370
378
  <div class="pf-v6-c-alert__description">
@@ -387,7 +395,9 @@ section: components
387
395
  type="button"
388
396
  aria-label="Close danger alert: Last notification"
389
397
  >
390
- <i class="fas fa-times" aria-hidden="true"></i>
398
+ <span class="pf-v6-c-button__text">
399
+ <i class="fas fa-times" aria-hidden="true"></i>
400
+ </span>
391
401
  </button>
392
402
  </div>
393
403
  <div class="pf-v6-c-alert__description">
@@ -407,7 +417,9 @@ section: components
407
417
  <a
408
418
  class="pf-v6-c-button pf-m-primary"
409
419
  href="#main-content-alert-horizontal-example"
410
- >Skip to content</a>
420
+ >
421
+ <span class="pf-v6-c-button__text">Skip to content</span>
422
+ </a>
411
423
  </div>
412
424
  <header class="pf-v6-c-masthead" id="alert-horizontal-example-masthead">
413
425
  <span class="pf-v6-c-masthead__toggle">
@@ -416,7 +428,9 @@ section: components
416
428
  type="button"
417
429
  aria-label="Global navigation"
418
430
  >
419
- <i class="fas fa-bars" aria-hidden="true"></i>
431
+ <span class="pf-v6-c-button__text">
432
+ <i class="fas fa-bars" aria-hidden="true"></i>
433
+ </span>
420
434
  </button>
421
435
  </span>
422
436
  <div class="pf-v6-c-masthead__main">
@@ -883,14 +897,12 @@ section: components
883
897
  <div class="pf-v6-c-form__group pf-m-action">
884
898
  <div class="pf-v6-c-form__group-control">
885
899
  <div class="pf-v6-c-form__actions">
886
- <button
887
- class="pf-v6-c-button pf-m-primary"
888
- type="submit"
889
- >Submit</button>
890
- <button
891
- class="pf-v6-c-button pf-m-secondary"
892
- type="reset"
893
- >Cancel</button>
900
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
901
+ <span class="pf-v6-c-button__text">Submit</span>
902
+ </button>
903
+ <button class="pf-v6-c-button pf-m-secondary" type="reset">
904
+ <span class="pf-v6-c-button__text">Cancel</span>
905
+ </button>
894
906
  </div>
895
907
  </div>
896
908
  </div>
@@ -911,7 +923,9 @@ section: components
911
923
  <a
912
924
  class="pf-v6-c-button pf-m-primary"
913
925
  href="#main-content-alert-stacked-example"
914
- >Skip to content</a>
926
+ >
927
+ <span class="pf-v6-c-button__text">Skip to content</span>
928
+ </a>
915
929
  </div>
916
930
  <header class="pf-v6-c-masthead" id="alert-stacked-example-masthead">
917
931
  <span class="pf-v6-c-masthead__toggle">
@@ -920,7 +934,9 @@ section: components
920
934
  type="button"
921
935
  aria-label="Global navigation"
922
936
  >
923
- <i class="fas fa-bars" aria-hidden="true"></i>
937
+ <span class="pf-v6-c-button__text">
938
+ <i class="fas fa-bars" aria-hidden="true"></i>
939
+ </span>
924
940
  </button>
925
941
  </span>
926
942
  <div class="pf-v6-c-masthead__main">
@@ -1424,14 +1440,12 @@ section: components
1424
1440
  <div class="pf-v6-c-form__group pf-m-action">
1425
1441
  <div class="pf-v6-c-form__group-control">
1426
1442
  <div class="pf-v6-c-form__actions">
1427
- <button
1428
- class="pf-v6-c-button pf-m-primary"
1429
- type="submit"
1430
- >Submit</button>
1431
- <button
1432
- class="pf-v6-c-button pf-m-secondary"
1433
- type="reset"
1434
- >Cancel</button>
1443
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
1444
+ <span class="pf-v6-c-button__text">Submit</span>
1445
+ </button>
1446
+ <button class="pf-v6-c-button pf-m-secondary" type="reset">
1447
+ <span class="pf-v6-c-button__text">Cancel</span>
1448
+ </button>
1435
1449
  </div>
1436
1450
  </div>
1437
1451
  </div>
package/docs/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -12,7 +12,9 @@ cssPrefix: pf-d-back-to-top
12
12
  <a
13
13
  class="pf-v6-c-button pf-m-primary"
14
14
  href="#main-content-back-to-top-basic-example"
15
- >Skip to content</a>
15
+ >
16
+ <span class="pf-v6-c-button__text">Skip to content</span>
17
+ </a>
16
18
  </div>
17
19
  <header class="pf-v6-c-masthead" id="back-to-top-basic-example-masthead">
18
20
  <span class="pf-v6-c-masthead__toggle">
@@ -21,7 +23,9 @@ cssPrefix: pf-d-back-to-top
21
23
  type="button"
22
24
  aria-label="Global navigation"
23
25
  >
24
- <i class="fas fa-bars" aria-hidden="true"></i>
26
+ <span class="pf-v6-c-button__text">
27
+ <i class="fas fa-bars" aria-hidden="true"></i>
28
+ </span>
25
29
  </button>
26
30
  </span>
27
31
  <div class="pf-v6-c-masthead__main">
@@ -448,9 +452,11 @@ cssPrefix: pf-d-back-to-top
448
452
  class="pf-v6-c-button pf-m-primary"
449
453
  href="#main-content-back-to-top-basic-example"
450
454
  >
451
- Back to top
452
- <span class="pf-v6-c-button__icon pf-m-end">
453
- <i class="fas fa-angle-up" aria-hidden="true"></i>
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>
454
460
  </span>
455
461
  </a>
456
462
  </div>
package/docs/demos/Banner/examples/Banner.md CHANGED
@@ -13,7 +13,9 @@ wrapperTag: div
13
13
  <a
14
14
  class="pf-v6-c-button pf-m-primary"
15
15
  href="#main-content-banner-basic-example"
16
- >Skip to content</a>
16
+ >
17
+ <span class="pf-v6-c-button__text">Skip to content</span>
18
+ </a>
17
19
  </div>
18
20
  <header class="pf-v6-c-masthead" id="banner-basic-example-masthead">
19
21
  <span class="pf-v6-c-masthead__toggle">
@@ -22,7 +24,9 @@ wrapperTag: div
22
24
  type="button"
23
25
  aria-label="Global navigation"
24
26
  >
25
- <i class="fas fa-bars" aria-hidden="true"></i>
27
+ <span class="pf-v6-c-button__text">
28
+ <i class="fas fa-bars" aria-hidden="true"></i>
29
+ </span>
26
30
  </button>
27
31
  </span>
28
32
  <div class="pf-v6-c-masthead__main">
@@ -496,7 +500,9 @@ wrapperTag: div
496
500
  <a
497
501
  class="pf-v6-c-button pf-m-primary"
498
502
  href="#main-content-banner-top-bottom-example"
499
- >Skip to content</a>
503
+ >
504
+ <span class="pf-v6-c-button__text">Skip to content</span>
505
+ </a>
500
506
  </div>
501
507
  <header class="pf-v6-c-masthead" id="banner-top-bottom-example-masthead">
502
508
  <span class="pf-v6-c-masthead__toggle">
@@ -505,7 +511,9 @@ wrapperTag: div
505
511
  type="button"
506
512
  aria-label="Global navigation"
507
513
  >
508
- <i class="fas fa-bars" aria-hidden="true"></i>
514
+ <span class="pf-v6-c-button__text">
515
+ <i class="fas fa-bars" aria-hidden="true"></i>
516
+ </span>
509
517
  </button>
510
518
  </span>
511
519
  <div class="pf-v6-c-masthead__main">
package/docs/demos/Button/examples/Button.md CHANGED
@@ -42,10 +42,9 @@ cssPrefix: pf-d-button
42
42
  </div>
43
43
  <div class="pf-v6-c-form__group pf-m-action">
44
44
  <div class="pf-v6-c-form__actions">
45
- <button
46
- class="pf-v6-c-button pf-m-primary"
47
- type="submit"
48
- >Link account and log in</button>
45
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
46
+ <span class="pf-v6-c-button__text">Link account and log in</span>
47
+ </button>
49
48
  </div>
50
49
  </div>
51
50
  </form>
@@ -116,7 +115,8 @@ cssPrefix: pf-d-button
116
115
  />
117
116
  </svg>
118
117
  </span>
119
- Linking account
118
+
119
+ <span class="pf-v6-c-button__text">Linking account</span>
120
120
  </button>
121
121
  </div>
122
122
  </div>
@@ -168,11 +168,11 @@ cssPrefix: pf-d-button
168
168
  </div>
169
169
  <div class="pf-v6-c-form__group pf-m-action">
170
170
  <div class="pf-v6-c-form__actions">
171
- <button class="pf-v6-c-button pf-m-primary pf-m-start" type="submit">
171
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
172
172
  <span class="pf-v6-c-button__icon pf-m-start">
173
173
  <i class="fas fa-check-circle" aria-hidden="true"></i>
174
174
  </span>
175
- Logged in
175
+ <span class="pf-v6-c-button__text">Logged in</span>
176
176
  </button>
177
177
  </div>
178
178
  </div>