@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/demos/DataList/examples/DataList.md CHANGED
@@ -12,7 +12,9 @@ wrapperTag: div
12
12
  <a
13
13
  class="pf-v6-c-button pf-m-primary"
14
14
  href="#main-content-data-list-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="data-list-basic-example-masthead">
18
20
  <span class="pf-v6-c-masthead__toggle">
@@ -21,7 +23,9 @@ wrapperTag: div
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">
@@ -343,7 +347,9 @@ wrapperTag: div
343
347
  <button
344
348
  class="pf-v6-c-button pf-m-primary"
345
349
  type="button"
346
- >Create instance</button>
350
+ >
351
+ <span class="pf-v6-c-button__text">Create instance</span>
352
+ </button>
347
353
  </div>
348
354
  </div>
349
355
  </div>
@@ -394,7 +400,9 @@ wrapperTag: div
394
400
  disabled
395
401
  aria-label="Go to previous page"
396
402
  >
397
- <i class="fas fa-angle-left" aria-hidden="true"></i>
403
+ <span class="pf-v6-c-button__text">
404
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
405
+ </span>
398
406
  </button>
399
407
  </div>
400
408
  <div class="pf-v6-c-pagination__nav-control pf-m-next">
@@ -403,7 +411,9 @@ wrapperTag: div
403
411
  type="button"
404
412
  aria-label="Go to next page"
405
413
  >
406
- <i class="fas fa-angle-right" aria-hidden="true"></i>
414
+ <span class="pf-v6-c-button__text">
415
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
416
+ </span>
407
417
  </button>
408
418
  </div>
409
419
  </nav>
@@ -482,11 +492,12 @@ wrapperTag: div
482
492
  <button
483
493
  class="pf-v6-c-button pf-m-secondary"
484
494
  type="button"
485
- >Action</button>
486
- <button
487
- class="pf-v6-c-button pf-m-link"
488
- type="button"
489
- >Link</button>
495
+ >
496
+ <span class="pf-v6-c-button__text">Action</span>
497
+ </button>
498
+ <button class="pf-v6-c-button pf-m-link" type="button">
499
+ <span class="pf-v6-c-button__text">Link</span>
500
+ </button>
490
501
  </div>
491
502
  </div>
492
503
  </div>
@@ -574,11 +585,12 @@ wrapperTag: div
574
585
  <button
575
586
  class="pf-v6-c-button pf-m-secondary"
576
587
  type="button"
577
- >Action</button>
578
- <button
579
- class="pf-v6-c-button pf-m-link"
580
- type="button"
581
- >Link</button>
588
+ >
589
+ <span class="pf-v6-c-button__text">Action</span>
590
+ </button>
591
+ <button class="pf-v6-c-button pf-m-link" type="button">
592
+ <span class="pf-v6-c-button__text">Link</span>
593
+ </button>
582
594
  </div>
583
595
  </div>
584
596
  </div>
@@ -601,11 +613,12 @@ wrapperTag: div
601
613
  <button
602
614
  class="pf-v6-c-button pf-m-secondary"
603
615
  type="button"
604
- >Action</button>
605
- <button
606
- class="pf-v6-c-button pf-m-link"
607
- type="button"
608
- >Link</button>
616
+ >
617
+ <span class="pf-v6-c-button__text">Action</span>
618
+ </button>
619
+ <button class="pf-v6-c-button pf-m-link" type="button">
620
+ <span class="pf-v6-c-button__text">Link</span>
621
+ </button>
609
622
  </div>
610
623
  </div>
611
624
  </div>
@@ -669,11 +682,12 @@ wrapperTag: div
669
682
  <button
670
683
  class="pf-v6-c-button pf-m-secondary"
671
684
  type="button"
672
- >Action</button>
673
- <button
674
- class="pf-v6-c-button pf-m-link"
675
- type="button"
676
- >Link</button>
685
+ >
686
+ <span class="pf-v6-c-button__text">Action</span>
687
+ </button>
688
+ <button class="pf-v6-c-button pf-m-link" type="button">
689
+ <span class="pf-v6-c-button__text">Link</span>
690
+ </button>
677
691
  </div>
678
692
  </div>
679
693
  </div>
@@ -761,11 +775,12 @@ wrapperTag: div
761
775
  <button
762
776
  class="pf-v6-c-button pf-m-secondary"
763
777
  type="button"
764
- >Action</button>
765
- <button
766
- class="pf-v6-c-button pf-m-link"
767
- type="button"
768
- >Link</button>
778
+ >
779
+ <span class="pf-v6-c-button__text">Action</span>
780
+ </button>
781
+ <button class="pf-v6-c-button pf-m-link" type="button">
782
+ <span class="pf-v6-c-button__text">Link</span>
783
+ </button>
769
784
  </div>
770
785
  </div>
771
786
  </div>
@@ -799,7 +814,9 @@ wrapperTag: div
799
814
  disabled
800
815
  aria-label="Go to first page"
801
816
  >
802
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
817
+ <span class="pf-v6-c-button__text">
818
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
819
+ </span>
803
820
  </button>
804
821
  </div>
805
822
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
@@ -809,7 +826,9 @@ wrapperTag: div
809
826
  disabled
810
827
  aria-label="Go to previous page"
811
828
  >
812
- <i class="fas fa-angle-left" aria-hidden="true"></i>
829
+ <span class="pf-v6-c-button__text">
830
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
831
+ </span>
813
832
  </button>
814
833
  </div>
815
834
  <div class="pf-v6-c-pagination__nav-page-select">
@@ -830,7 +849,9 @@ wrapperTag: div
830
849
  type="button"
831
850
  aria-label="Go to next page"
832
851
  >
833
- <i class="fas fa-angle-right" aria-hidden="true"></i>
852
+ <span class="pf-v6-c-button__text">
853
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
854
+ </span>
834
855
  </button>
835
856
  </div>
836
857
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
@@ -839,7 +860,9 @@ wrapperTag: div
839
860
  type="button"
840
861
  aria-label="Go to last page"
841
862
  >
842
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
863
+ <span class="pf-v6-c-button__text">
864
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
865
+ </span>
843
866
  </button>
844
867
  </div>
845
868
  </nav>
@@ -861,7 +884,9 @@ wrapperTag: div
861
884
  <a
862
885
  class="pf-v6-c-button pf-m-primary"
863
886
  href="#main-content-data-list-actionable-example"
864
- >Skip to content</a>
887
+ >
888
+ <span class="pf-v6-c-button__text">Skip to content</span>
889
+ </a>
865
890
  </div>
866
891
  <header class="pf-v6-c-masthead" id="data-list-actionable-example-masthead">
867
892
  <span class="pf-v6-c-masthead__toggle">
@@ -870,7 +895,9 @@ wrapperTag: div
870
895
  type="button"
871
896
  aria-label="Global navigation"
872
897
  >
873
- <i class="fas fa-bars" aria-hidden="true"></i>
898
+ <span class="pf-v6-c-button__text">
899
+ <i class="fas fa-bars" aria-hidden="true"></i>
900
+ </span>
874
901
  </button>
875
902
  </span>
876
903
  <div class="pf-v6-c-masthead__main">
@@ -1212,14 +1239,18 @@ wrapperTag: div
1212
1239
  <button
1213
1240
  class="pf-v6-c-button pf-m-primary"
1214
1241
  type="button"
1215
- >Create instance</button>
1242
+ >
1243
+ <span class="pf-v6-c-button__text">Create instance</span>
1244
+ </button>
1216
1245
  </div>
1217
1246
 
1218
1247
  <div class="pf-v6-c-overflow-menu__item">
1219
1248
  <button
1220
1249
  class="pf-v6-c-button pf-m-secondary"
1221
1250
  type="button"
1222
- >Action</button>
1251
+ >
1252
+ <span class="pf-v6-c-button__text">Action</span>
1253
+ </button>
1223
1254
  </div>
1224
1255
  </div>
1225
1256
  </div>
@@ -1270,7 +1301,9 @@ wrapperTag: div
1270
1301
  disabled
1271
1302
  aria-label="Go to previous page"
1272
1303
  >
1273
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1304
+ <span class="pf-v6-c-button__text">
1305
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1306
+ </span>
1274
1307
  </button>
1275
1308
  </div>
1276
1309
  <div class="pf-v6-c-pagination__nav-control pf-m-next">
@@ -1279,7 +1312,9 @@ wrapperTag: div
1279
1312
  type="button"
1280
1313
  aria-label="Go to next page"
1281
1314
  >
1282
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1315
+ <span class="pf-v6-c-button__text">
1316
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1317
+ </span>
1283
1318
  </button>
1284
1319
  </div>
1285
1320
  </nav>
@@ -1375,11 +1410,12 @@ wrapperTag: div
1375
1410
  <button
1376
1411
  class="pf-v6-c-button pf-m-secondary"
1377
1412
  type="button"
1378
- >Action</button>
1379
- <button
1380
- class="pf-v6-c-button pf-m-link"
1381
- type="button"
1382
- >Link</button>
1413
+ >
1414
+ <span class="pf-v6-c-button__text">Action</span>
1415
+ </button>
1416
+ <button class="pf-v6-c-button pf-m-link" type="button">
1417
+ <span class="pf-v6-c-button__text">Link</span>
1418
+ </button>
1383
1419
  </div>
1384
1420
  </div>
1385
1421
  </div>
@@ -1484,11 +1520,12 @@ wrapperTag: div
1484
1520
  <button
1485
1521
  class="pf-v6-c-button pf-m-secondary"
1486
1522
  type="button"
1487
- >Action</button>
1488
- <button
1489
- class="pf-v6-c-button pf-m-link"
1490
- type="button"
1491
- >Link</button>
1523
+ >
1524
+ <span class="pf-v6-c-button__text">Action</span>
1525
+ </button>
1526
+ <button class="pf-v6-c-button pf-m-link" type="button">
1527
+ <span class="pf-v6-c-button__text">Link</span>
1528
+ </button>
1492
1529
  </div>
1493
1530
  </div>
1494
1531
  </div>
@@ -1530,11 +1567,12 @@ wrapperTag: div
1530
1567
  <button
1531
1568
  class="pf-v6-c-button pf-m-secondary"
1532
1569
  type="button"
1533
- >Action</button>
1534
- <button
1535
- class="pf-v6-c-button pf-m-link"
1536
- type="button"
1537
- >Link</button>
1570
+ >
1571
+ <span class="pf-v6-c-button__text">Action</span>
1572
+ </button>
1573
+ <button class="pf-v6-c-button pf-m-link" type="button">
1574
+ <span class="pf-v6-c-button__text">Link</span>
1575
+ </button>
1538
1576
  </div>
1539
1577
  </div>
1540
1578
  </div>
@@ -1617,11 +1655,12 @@ wrapperTag: div
1617
1655
  <button
1618
1656
  class="pf-v6-c-button pf-m-secondary"
1619
1657
  type="button"
1620
- >Action</button>
1621
- <button
1622
- class="pf-v6-c-button pf-m-link"
1623
- type="button"
1624
- >Link</button>
1658
+ >
1659
+ <span class="pf-v6-c-button__text">Action</span>
1660
+ </button>
1661
+ <button class="pf-v6-c-button pf-m-link" type="button">
1662
+ <span class="pf-v6-c-button__text">Link</span>
1663
+ </button>
1625
1664
  </div>
1626
1665
  </div>
1627
1666
  </div>
@@ -1655,7 +1694,9 @@ wrapperTag: div
1655
1694
  disabled
1656
1695
  aria-label="Go to first page"
1657
1696
  >
1658
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1697
+ <span class="pf-v6-c-button__text">
1698
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1699
+ </span>
1659
1700
  </button>
1660
1701
  </div>
1661
1702
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
@@ -1665,7 +1706,9 @@ wrapperTag: div
1665
1706
  disabled
1666
1707
  aria-label="Go to previous page"
1667
1708
  >
1668
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1709
+ <span class="pf-v6-c-button__text">
1710
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1711
+ </span>
1669
1712
  </button>
1670
1713
  </div>
1671
1714
  <div class="pf-v6-c-pagination__nav-page-select">
@@ -1686,7 +1729,9 @@ wrapperTag: div
1686
1729
  type="button"
1687
1730
  aria-label="Go to next page"
1688
1731
  >
1689
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1732
+ <span class="pf-v6-c-button__text">
1733
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1734
+ </span>
1690
1735
  </button>
1691
1736
  </div>
1692
1737
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
@@ -1695,7 +1740,9 @@ wrapperTag: div
1695
1740
  type="button"
1696
1741
  aria-label="Go to last page"
1697
1742
  >
1698
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
1743
+ <span class="pf-v6-c-button__text">
1744
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
1745
+ </span>
1699
1746
  </button>
1700
1747
  </div>
1701
1748
  </nav>
@@ -1717,7 +1764,9 @@ wrapperTag: div
1717
1764
  <a
1718
1765
  class="pf-v6-c-button pf-m-primary"
1719
1766
  href="#main-content-data-list-expandable-example"
1720
- >Skip to content</a>
1767
+ >
1768
+ <span class="pf-v6-c-button__text">Skip to content</span>
1769
+ </a>
1721
1770
  </div>
1722
1771
  <header class="pf-v6-c-masthead" id="data-list-expandable-example-masthead">
1723
1772
  <span class="pf-v6-c-masthead__toggle">
@@ -1726,7 +1775,9 @@ wrapperTag: div
1726
1775
  type="button"
1727
1776
  aria-label="Global navigation"
1728
1777
  >
1729
- <i class="fas fa-bars" aria-hidden="true"></i>
1778
+ <span class="pf-v6-c-button__text">
1779
+ <i class="fas fa-bars" aria-hidden="true"></i>
1780
+ </span>
1730
1781
  </button>
1731
1782
  </span>
1732
1783
  <div class="pf-v6-c-masthead__main">
@@ -2009,12 +2060,14 @@ wrapperTag: div
2009
2060
  type="button"
2010
2061
  aria-label="Expand all rows"
2011
2062
  >
2012
- <span class="pf-v6-c-icon">
2013
- <span
2014
- class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
2015
- >
2016
- <span class="pf-v6-c-toolbar__expand-all-icon">
2017
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2063
+ <span class="pf-v6-c-button__text">
2064
+ <span class="pf-v6-c-icon">
2065
+ <span
2066
+ class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
2067
+ >
2068
+ <span class="pf-v6-c-toolbar__expand-all-icon">
2069
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2070
+ </span>
2018
2071
  </span>
2019
2072
  </span>
2020
2073
  </span>
@@ -2133,7 +2186,9 @@ wrapperTag: div
2133
2186
  <button
2134
2187
  class="pf-v6-c-button pf-m-primary"
2135
2188
  type="button"
2136
- >Create instance</button>
2189
+ >
2190
+ <span class="pf-v6-c-button__text">Create instance</span>
2191
+ </button>
2137
2192
  </div>
2138
2193
  </div>
2139
2194
  </div>
@@ -2184,7 +2239,9 @@ wrapperTag: div
2184
2239
  disabled
2185
2240
  aria-label="Go to previous page"
2186
2241
  >
2187
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2242
+ <span class="pf-v6-c-button__text">
2243
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2244
+ </span>
2188
2245
  </button>
2189
2246
  </div>
2190
2247
  <div class="pf-v6-c-pagination__nav-control pf-m-next">
@@ -2193,7 +2250,9 @@ wrapperTag: div
2193
2250
  type="button"
2194
2251
  aria-label="Go to next page"
2195
2252
  >
2196
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2253
+ <span class="pf-v6-c-button__text">
2254
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2255
+ </span>
2197
2256
  </button>
2198
2257
  </div>
2199
2258
  </nav>
@@ -2230,9 +2289,11 @@ wrapperTag: div
2230
2289
  aria-expanded="false"
2231
2290
  aria-controls="content-1"
2232
2291
  >
2233
- <div class="pf-v6-c-data-list__toggle-icon">
2234
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2235
- </div>
2292
+ <span class="pf-v6-c-button__text">
2293
+ <div class="pf-v6-c-data-list__toggle-icon">
2294
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2295
+ </div>
2296
+ </span>
2236
2297
  </button>
2237
2298
  </div>
2238
2299
 
@@ -2305,11 +2366,12 @@ wrapperTag: div
2305
2366
  <button
2306
2367
  class="pf-v6-c-button pf-m-secondary"
2307
2368
  type="button"
2308
- >Action</button>
2309
- <button
2310
- class="pf-v6-c-button pf-m-link"
2311
- type="button"
2312
- >Link</button>
2369
+ >
2370
+ <span class="pf-v6-c-button__text">Action</span>
2371
+ </button>
2372
+ <button class="pf-v6-c-button pf-m-link" type="button">
2373
+ <span class="pf-v6-c-button__text">Link</span>
2374
+ </button>
2313
2375
  </div>
2314
2376
  </div>
2315
2377
  </div>
@@ -2733,9 +2795,11 @@ wrapperTag: div
2733
2795
  aria-expanded="false"
2734
2796
  aria-controls="content-2"
2735
2797
  >
2736
- <div class="pf-v6-c-data-list__toggle-icon">
2737
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2738
- </div>
2798
+ <span class="pf-v6-c-button__text">
2799
+ <div class="pf-v6-c-data-list__toggle-icon">
2800
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2801
+ </div>
2802
+ </span>
2739
2803
  </button>
2740
2804
  </div>
2741
2805
 
@@ -2832,11 +2896,12 @@ wrapperTag: div
2832
2896
  <button
2833
2897
  class="pf-v6-c-button pf-m-secondary"
2834
2898
  type="button"
2835
- >Action</button>
2836
- <button
2837
- class="pf-v6-c-button pf-m-link"
2838
- type="button"
2839
- >Link</button>
2899
+ >
2900
+ <span class="pf-v6-c-button__text">Action</span>
2901
+ </button>
2902
+ <button class="pf-v6-c-button pf-m-link" type="button">
2903
+ <span class="pf-v6-c-button__text">Link</span>
2904
+ </button>
2840
2905
  </div>
2841
2906
  </div>
2842
2907
  </div>
@@ -2868,9 +2933,11 @@ wrapperTag: div
2868
2933
  aria-expanded="false"
2869
2934
  aria-controls="content-3"
2870
2935
  >
2871
- <div class="pf-v6-c-data-list__toggle-icon">
2872
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2873
- </div>
2936
+ <span class="pf-v6-c-button__text">
2937
+ <div class="pf-v6-c-data-list__toggle-icon">
2938
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2939
+ </div>
2940
+ </span>
2874
2941
  </button>
2875
2942
  </div>
2876
2943
 
@@ -2926,9 +2993,11 @@ wrapperTag: div
2926
2993
  aria-expanded="false"
2927
2994
  aria-controls="content-4"
2928
2995
  >
2929
- <div class="pf-v6-c-data-list__toggle-icon">
2930
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2931
- </div>
2996
+ <span class="pf-v6-c-button__text">
2997
+ <div class="pf-v6-c-data-list__toggle-icon">
2998
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2999
+ </div>
3000
+ </span>
2932
3001
  </button>
2933
3002
  </div>
2934
3003
 
@@ -3001,11 +3070,12 @@ wrapperTag: div
3001
3070
  <button
3002
3071
  class="pf-v6-c-button pf-m-secondary"
3003
3072
  type="button"
3004
- >Action</button>
3005
- <button
3006
- class="pf-v6-c-button pf-m-link"
3007
- type="button"
3008
- >Link</button>
3073
+ >
3074
+ <span class="pf-v6-c-button__text">Action</span>
3075
+ </button>
3076
+ <button class="pf-v6-c-button pf-m-link" type="button">
3077
+ <span class="pf-v6-c-button__text">Link</span>
3078
+ </button>
3009
3079
  </div>
3010
3080
  </div>
3011
3081
  </div>
@@ -3037,9 +3107,11 @@ wrapperTag: div
3037
3107
  aria-expanded="false"
3038
3108
  aria-controls="content-5"
3039
3109
  >
3040
- <div class="pf-v6-c-data-list__toggle-icon">
3041
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3042
- </div>
3110
+ <span class="pf-v6-c-button__text">
3111
+ <div class="pf-v6-c-data-list__toggle-icon">
3112
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3113
+ </div>
3114
+ </span>
3043
3115
  </button>
3044
3116
  </div>
3045
3117
 
@@ -3136,11 +3208,12 @@ wrapperTag: div
3136
3208
  <button
3137
3209
  class="pf-v6-c-button pf-m-secondary"
3138
3210
  type="button"
3139
- >Action</button>
3140
- <button
3141
- class="pf-v6-c-button pf-m-link"
3142
- type="button"
3143
- >Link</button>
3211
+ >
3212
+ <span class="pf-v6-c-button__text">Action</span>
3213
+ </button>
3214
+ <button class="pf-v6-c-button pf-m-link" type="button">
3215
+ <span class="pf-v6-c-button__text">Link</span>
3216
+ </button>
3144
3217
  </div>
3145
3218
  </div>
3146
3219
  </div>
@@ -3184,7 +3257,9 @@ wrapperTag: div
3184
3257
  disabled
3185
3258
  aria-label="Go to first page"
3186
3259
  >
3187
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
3260
+ <span class="pf-v6-c-button__text">
3261
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
3262
+ </span>
3188
3263
  </button>
3189
3264
  </div>
3190
3265
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
@@ -3194,7 +3269,9 @@ wrapperTag: div
3194
3269
  disabled
3195
3270
  aria-label="Go to previous page"
3196
3271
  >
3197
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3272
+ <span class="pf-v6-c-button__text">
3273
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3274
+ </span>
3198
3275
  </button>
3199
3276
  </div>
3200
3277
  <div class="pf-v6-c-pagination__nav-page-select">
@@ -3215,7 +3292,9 @@ wrapperTag: div
3215
3292
  type="button"
3216
3293
  aria-label="Go to next page"
3217
3294
  >
3218
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3295
+ <span class="pf-v6-c-button__text">
3296
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3297
+ </span>
3219
3298
  </button>
3220
3299
  </div>
3221
3300
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
@@ -3224,7 +3303,9 @@ wrapperTag: div
3224
3303
  type="button"
3225
3304
  aria-label="Go to last page"
3226
3305
  >
3227
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
3306
+ <span class="pf-v6-c-button__text">
3307
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
3308
+ </span>
3228
3309
  </button>
3229
3310
  </div>
3230
3311
  </nav>
@@ -3246,7 +3327,9 @@ wrapperTag: div
3246
3327
  <a
3247
3328
  class="pf-v6-c-button pf-m-primary"
3248
3329
  href="#main-content-data-list-static-bottom-example"
3249
- >Skip to content</a>
3330
+ >
3331
+ <span class="pf-v6-c-button__text">Skip to content</span>
3332
+ </a>
3250
3333
  </div>
3251
3334
  <header
3252
3335
  class="pf-v6-c-masthead"
@@ -3258,7 +3341,9 @@ wrapperTag: div
3258
3341
  type="button"
3259
3342
  aria-label="Global navigation"
3260
3343
  >
3261
- <i class="fas fa-bars" aria-hidden="true"></i>
3344
+ <span class="pf-v6-c-button__text">
3345
+ <i class="fas fa-bars" aria-hidden="true"></i>
3346
+ </span>
3262
3347
  </button>
3263
3348
  </span>
3264
3349
  <div class="pf-v6-c-masthead__main">
@@ -3614,14 +3699,18 @@ wrapperTag: div
3614
3699
  <button
3615
3700
  class="pf-v6-c-button pf-m-primary"
3616
3701
  type="button"
3617
- >Create instance</button>
3702
+ >
3703
+ <span class="pf-v6-c-button__text">Create instance</span>
3704
+ </button>
3618
3705
  </div>
3619
3706
 
3620
3707
  <div class="pf-v6-c-overflow-menu__item">
3621
3708
  <button
3622
3709
  class="pf-v6-c-button pf-m-secondary"
3623
3710
  type="button"
3624
- >Action</button>
3711
+ >
3712
+ <span class="pf-v6-c-button__text">Action</span>
3713
+ </button>
3625
3714
  </div>
3626
3715
  </div>
3627
3716
  </div>
@@ -3672,7 +3761,9 @@ wrapperTag: div
3672
3761
  disabled
3673
3762
  aria-label="Go to previous page"
3674
3763
  >
3675
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3764
+ <span class="pf-v6-c-button__text">
3765
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3766
+ </span>
3676
3767
  </button>
3677
3768
  </div>
3678
3769
  <div class="pf-v6-c-pagination__nav-control pf-m-next">
@@ -3681,7 +3772,9 @@ wrapperTag: div
3681
3772
  type="button"
3682
3773
  aria-label="Go to next page"
3683
3774
  >
3684
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3775
+ <span class="pf-v6-c-button__text">
3776
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3777
+ </span>
3685
3778
  </button>
3686
3779
  </div>
3687
3780
  </nav>
@@ -3760,11 +3853,12 @@ wrapperTag: div
3760
3853
  <button
3761
3854
  class="pf-v6-c-button pf-m-secondary"
3762
3855
  type="button"
3763
- >Action</button>
3764
- <button
3765
- class="pf-v6-c-button pf-m-link"
3766
- type="button"
3767
- >Link</button>
3856
+ >
3857
+ <span class="pf-v6-c-button__text">Action</span>
3858
+ </button>
3859
+ <button class="pf-v6-c-button pf-m-link" type="button">
3860
+ <span class="pf-v6-c-button__text">Link</span>
3861
+ </button>
3768
3862
  </div>
3769
3863
  </div>
3770
3864
  </div>
@@ -3852,11 +3946,12 @@ wrapperTag: div
3852
3946
  <button
3853
3947
  class="pf-v6-c-button pf-m-secondary"
3854
3948
  type="button"
3855
- >Action</button>
3856
- <button
3857
- class="pf-v6-c-button pf-m-link"
3858
- type="button"
3859
- >Link</button>
3949
+ >
3950
+ <span class="pf-v6-c-button__text">Action</span>
3951
+ </button>
3952
+ <button class="pf-v6-c-button pf-m-link" type="button">
3953
+ <span class="pf-v6-c-button__text">Link</span>
3954
+ </button>
3860
3955
  </div>
3861
3956
  </div>
3862
3957
  </div>
@@ -3879,11 +3974,12 @@ wrapperTag: div
3879
3974
  <button
3880
3975
  class="pf-v6-c-button pf-m-secondary"
3881
3976
  type="button"
3882
- >Action</button>
3883
- <button
3884
- class="pf-v6-c-button pf-m-link"
3885
- type="button"
3886
- >Link</button>
3977
+ >
3978
+ <span class="pf-v6-c-button__text">Action</span>
3979
+ </button>
3980
+ <button class="pf-v6-c-button pf-m-link" type="button">
3981
+ <span class="pf-v6-c-button__text">Link</span>
3982
+ </button>
3887
3983
  </div>
3888
3984
  </div>
3889
3985
  </div>
@@ -3947,11 +4043,12 @@ wrapperTag: div
3947
4043
  <button
3948
4044
  class="pf-v6-c-button pf-m-secondary"
3949
4045
  type="button"
3950
- >Action</button>
3951
- <button
3952
- class="pf-v6-c-button pf-m-link"
3953
- type="button"
3954
- >Link</button>
4046
+ >
4047
+ <span class="pf-v6-c-button__text">Action</span>
4048
+ </button>
4049
+ <button class="pf-v6-c-button pf-m-link" type="button">
4050
+ <span class="pf-v6-c-button__text">Link</span>
4051
+ </button>
3955
4052
  </div>
3956
4053
  </div>
3957
4054
  </div>
@@ -4039,11 +4136,12 @@ wrapperTag: div
4039
4136
  <button
4040
4137
  class="pf-v6-c-button pf-m-secondary"
4041
4138
  type="button"
4042
- >Action</button>
4043
- <button
4044
- class="pf-v6-c-button pf-m-link"
4045
- type="button"
4046
- >Link</button>
4139
+ >
4140
+ <span class="pf-v6-c-button__text">Action</span>
4141
+ </button>
4142
+ <button class="pf-v6-c-button pf-m-link" type="button">
4143
+ <span class="pf-v6-c-button__text">Link</span>
4144
+ </button>
4047
4145
  </div>
4048
4146
  </div>
4049
4147
  </div>
@@ -4077,7 +4175,9 @@ wrapperTag: div
4077
4175
  disabled
4078
4176
  aria-label="Go to first page"
4079
4177
  >
4080
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
4178
+ <span class="pf-v6-c-button__text">
4179
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
4180
+ </span>
4081
4181
  </button>
4082
4182
  </div>
4083
4183
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
@@ -4087,7 +4187,9 @@ wrapperTag: div
4087
4187
  disabled
4088
4188
  aria-label="Go to previous page"
4089
4189
  >
4090
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4190
+ <span class="pf-v6-c-button__text">
4191
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
4192
+ </span>
4091
4193
  </button>
4092
4194
  </div>
4093
4195
  <div class="pf-v6-c-pagination__nav-page-select">
@@ -4108,7 +4210,9 @@ wrapperTag: div
4108
4210
  type="button"
4109
4211
  aria-label="Go to next page"
4110
4212
  >
4111
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4213
+ <span class="pf-v6-c-button__text">
4214
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4215
+ </span>
4112
4216
  </button>
4113
4217
  </div>
4114
4218
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
@@ -4117,7 +4221,9 @@ wrapperTag: div
4117
4221
  type="button"
4118
4222
  aria-label="Go to last page"
4119
4223
  >
4120
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
4224
+ <span class="pf-v6-c-button__text">
4225
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
4226
+ </span>
4121
4227
  </button>
4122
4228
  </div>
4123
4229
  </nav>