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

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 (88) hide show
  1. package/components/Alert/alert-group.css +54 -3
  2. package/components/Alert/alert-group.scss +85 -0
  3. package/components/Alert/alert.scss +1 -1
  4. package/components/Button/button.css +33 -14
  5. package/components/Button/button.scss +36 -14
  6. package/components/_index.css +87 -17
  7. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  8. package/docs/components/ActionList/examples/ActionList.md +60 -20
  9. package/docs/components/Alert/examples/Alert.md +106 -62
  10. package/docs/components/BackToTop/examples/BackToTop.md +5 -3
  11. package/docs/components/Banner/examples/Banner.md +9 -3
  12. package/docs/components/Button/examples/Button.md +536 -367
  13. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  14. package/docs/components/Card/examples/Card.md +43 -29
  15. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +75 -33
  16. package/docs/components/CodeBlock/examples/CodeBlock.md +18 -6
  17. package/docs/components/CodeEditor/examples/CodeEditor.md +44 -22
  18. package/docs/components/ContextSelector/deprecated/context-selector.md +6 -8
  19. package/docs/components/DataList/examples/DataList.md +121 -63
  20. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  21. package/docs/components/DescriptionList/examples/DescriptionList.md +125 -75
  22. package/docs/components/Drawer/examples/Drawer.md +57 -19
  23. package/docs/components/DualListSelector/examples/DualListSelector.md +204 -100
  24. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  25. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  26. package/docs/components/Form/examples/Form.md +53 -19
  27. package/docs/components/Hint/examples/Hint.md +9 -9
  28. package/docs/components/InlineEdit/examples/InlineEdit.md +78 -26
  29. package/docs/components/InputGroup/examples/InputGroup.md +27 -9
  30. package/docs/components/JumpLinks/examples/JumpLinks.md +188 -68
  31. package/docs/components/Label/examples/Label.md +651 -217
  32. package/docs/components/LogViewer/examples/LogViewer.md +218 -86
  33. package/docs/components/Login/examples/Login.md +346 -282
  34. package/docs/components/Masthead/examples/masthead.md +27 -9
  35. package/docs/components/Menu/examples/Menu.md +35 -25
  36. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -1
  37. package/docs/components/ModalBox/examples/ModalBox.md +48 -16
  38. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +48 -16
  39. package/docs/components/Nav/examples/Navigation.md +12 -4
  40. package/docs/components/NotificationBadge/examples/NotificationBadge.md +78 -42
  41. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +6 -2
  42. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  43. package/docs/components/OverflowMenu/examples/overflow-menu.md +48 -16
  44. package/docs/components/Page/examples/Page.md +21 -7
  45. package/docs/components/Pagination/examples/Pagination.md +132 -44
  46. package/docs/components/Popover/examples/Popover.md +45 -15
  47. package/docs/components/Select/deprecated/Select.md +111 -55
  48. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  49. package/docs/components/Slider/examples/Slider.md +12 -4
  50. package/docs/components/Table/examples/Table.md +363 -208
  51. package/docs/components/Tabs/examples/Tabs.md +1230 -574
  52. package/docs/components/TextInputGroup/examples/TextInputGroup.md +132 -44
  53. package/docs/components/Toolbar/examples/Toolbar.md +120 -64
  54. package/docs/components/TreeView/examples/TreeView.md +12 -4
  55. package/docs/components/Wizard/examples/Wizard.md +105 -38
  56. package/docs/demos/AboutModal/examples/AboutModal.md +9 -3
  57. package/docs/demos/Alert/examples/Alert.md +39 -25
  58. package/docs/demos/BackToTop/examples/BackToTop.md +11 -5
  59. package/docs/demos/Banner/examples/Banner.md +12 -4
  60. package/docs/demos/Button/examples/Button.md +7 -7
  61. package/docs/demos/Card/examples/Card.md +106 -57
  62. package/docs/demos/CardView/examples/CardView.md +30 -13
  63. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -8
  64. package/docs/demos/Dashboard/examples/Dashboard.md +43 -28
  65. package/docs/demos/DataList/examples/DataList.md +255 -149
  66. package/docs/demos/DescriptionList/examples/DescriptionList.md +21 -7
  67. package/docs/demos/Drawer/examples/Drawer.md +89 -43
  68. package/docs/demos/Form/examples/BasicForms.md +141 -59
  69. package/docs/demos/JumpLinks/examples/JumpLinks.md +222 -109
  70. package/docs/demos/Masthead/examples/Masthead.md +63 -21
  71. package/docs/demos/Modal/examples/Modal.md +99 -37
  72. package/docs/demos/Nav/examples/Nav.md +45 -15
  73. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +58 -43
  74. package/docs/demos/Page/examples/Page.md +54 -21
  75. package/docs/demos/Page/examples/Penta.md +9 -6
  76. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  77. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +12 -4
  78. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +306 -133
  79. package/docs/demos/Skeleton/examples/Skeleton.md +6 -2
  80. package/docs/demos/Table/examples/Table.md +474 -210
  81. package/docs/demos/Tabs/examples/Tabs.md +60 -22
  82. package/docs/demos/Toolbar/examples/Toolbar.md +123 -72
  83. package/docs/demos/Wizard/examples/Wizard.md +179 -110
  84. package/package.json +1 -1
  85. package/patternfly-no-globals.css +87 -17
  86. package/patternfly.css +87 -17
  87. package/patternfly.min.css +1 -1
  88. package/patternfly.min.css.map +1 -1
package/docs/demos/Nav/examples/Nav.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-nav-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="nav-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">
@@ -336,7 +340,9 @@ section: components
336
340
  <a
337
341
  class="pf-v6-c-button pf-m-primary"
338
342
  href="#main-content-nav-grouped-nav-example"
339
- >Skip to content</a>
343
+ >
344
+ <span class="pf-v6-c-button__text">Skip to content</span>
345
+ </a>
340
346
  </div>
341
347
  <header class="pf-v6-c-masthead" id="nav-grouped-nav-example-masthead">
342
348
  <span class="pf-v6-c-masthead__toggle">
@@ -345,7 +351,9 @@ section: components
345
351
  type="button"
346
352
  aria-label="Global navigation"
347
353
  >
348
- <i class="fas fa-bars" aria-hidden="true"></i>
354
+ <span class="pf-v6-c-button__text">
355
+ <i class="fas fa-bars" aria-hidden="true"></i>
356
+ </span>
349
357
  </button>
350
358
  </span>
351
359
  <div class="pf-v6-c-masthead__main">
@@ -693,7 +701,9 @@ section: components
693
701
  <a
694
702
  class="pf-v6-c-button pf-m-primary"
695
703
  href="#main-content-nav-expandable-example"
696
- >Skip to content</a>
704
+ >
705
+ <span class="pf-v6-c-button__text">Skip to content</span>
706
+ </a>
697
707
  </div>
698
708
  <header class="pf-v6-c-masthead" id="nav-expandable-example-masthead">
699
709
  <span class="pf-v6-c-masthead__toggle">
@@ -702,7 +712,9 @@ section: components
702
712
  type="button"
703
713
  aria-label="Global navigation"
704
714
  >
705
- <i class="fas fa-bars" aria-hidden="true"></i>
715
+ <span class="pf-v6-c-button__text">
716
+ <i class="fas fa-bars" aria-hidden="true"></i>
717
+ </span>
706
718
  </button>
707
719
  </span>
708
720
  <div class="pf-v6-c-masthead__main">
@@ -1108,7 +1120,9 @@ section: components
1108
1120
  <a
1109
1121
  class="pf-v6-c-button pf-m-primary"
1110
1122
  href="#main-content-nav-horizontal-example"
1111
- >Skip to content</a>
1123
+ >
1124
+ <span class="pf-v6-c-button__text">Skip to content</span>
1125
+ </a>
1112
1126
  </div>
1113
1127
  <header class="pf-v6-c-masthead" id="nav-horizontal-example-masthead">
1114
1128
  <div class="pf-v6-c-masthead__main">
@@ -1237,7 +1251,9 @@ section: components
1237
1251
  type="button"
1238
1252
  aria-label="Scroll start"
1239
1253
  >
1240
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1254
+ <span class="pf-v6-c-button__text">
1255
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1256
+ </span>
1241
1257
  </button>
1242
1258
  </div>
1243
1259
  <ul class="pf-v6-c-nav__list" role="list">
@@ -1277,7 +1293,9 @@ section: components
1277
1293
  type="button"
1278
1294
  aria-label="Scroll end"
1279
1295
  >
1280
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1296
+ <span class="pf-v6-c-button__text">
1297
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1298
+ </span>
1281
1299
  </button>
1282
1300
  </div>
1283
1301
  </nav>
@@ -1443,7 +1461,9 @@ section: components
1443
1461
  <a
1444
1462
  class="pf-v6-c-button pf-m-primary"
1445
1463
  href="#main-content-nav-horizontal-subnav-example"
1446
- >Skip to content</a>
1464
+ >
1465
+ <span class="pf-v6-c-button__text">Skip to content</span>
1466
+ </a>
1447
1467
  </div>
1448
1468
  <header class="pf-v6-c-masthead" id="nav-horizontal-subnav-example-masthead">
1449
1469
  <span class="pf-v6-c-masthead__toggle">
@@ -1452,7 +1472,9 @@ section: components
1452
1472
  type="button"
1453
1473
  aria-label="Global navigation"
1454
1474
  >
1455
- <i class="fas fa-bars" aria-hidden="true"></i>
1475
+ <span class="pf-v6-c-button__text">
1476
+ <i class="fas fa-bars" aria-hidden="true"></i>
1477
+ </span>
1456
1478
  </button>
1457
1479
  </span>
1458
1480
  <div class="pf-v6-c-masthead__main">
@@ -1793,7 +1815,9 @@ section: components
1793
1815
  <a
1794
1816
  class="pf-v6-c-button pf-m-primary"
1795
1817
  href="#main-content-nav-horizontal-example"
1796
- >Skip to content</a>
1818
+ >
1819
+ <span class="pf-v6-c-button__text">Skip to content</span>
1820
+ </a>
1797
1821
  </div>
1798
1822
  <header
1799
1823
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
@@ -1805,7 +1829,9 @@ section: components
1805
1829
  type="button"
1806
1830
  aria-label="Global navigation"
1807
1831
  >
1808
- <i class="fas fa-bars" aria-hidden="true"></i>
1832
+ <span class="pf-v6-c-button__text">
1833
+ <i class="fas fa-bars" aria-hidden="true"></i>
1834
+ </span>
1809
1835
  </button>
1810
1836
  </span>
1811
1837
  <div class="pf-v6-c-masthead__main">
@@ -1934,7 +1960,9 @@ section: components
1934
1960
  type="button"
1935
1961
  aria-label="Scroll start"
1936
1962
  >
1937
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1963
+ <span class="pf-v6-c-button__text">
1964
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1965
+ </span>
1938
1966
  </button>
1939
1967
  </div>
1940
1968
  <ul class="pf-v6-c-nav__list" role="list">
@@ -1974,7 +2002,9 @@ section: components
1974
2002
  type="button"
1975
2003
  aria-label="Scroll end"
1976
2004
  >
1977
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2005
+ <span class="pf-v6-c-button__text">
2006
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2007
+ </span>
1978
2008
  </button>
1979
2009
  </div>
1980
2010
  </nav>
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -8,10 +8,9 @@ section: components
8
8
  ```html isFullscreen
9
9
  <div class="pf-v6-c-page" id="-page">
10
10
  <div class="pf-v6-c-skip-to-content">
11
- <a
12
- class="pf-v6-c-button pf-m-primary"
13
- href="#main-content--page"
14
- >Skip to content</a>
11
+ <a class="pf-v6-c-button pf-m-primary" href="#main-content--page">
12
+ <span class="pf-v6-c-button__text">Skip to content</span>
13
+ </a>
15
14
  </div>
16
15
  <header class="pf-v6-c-masthead" id="-page-masthead">
17
16
  <span class="pf-v6-c-masthead__toggle">
@@ -20,7 +19,9 @@ section: components
20
19
  type="button"
21
20
  aria-label="Global navigation"
22
21
  >
23
- <i class="fas fa-bars" aria-hidden="true"></i>
22
+ <span class="pf-v6-c-button__text">
23
+ <i class="fas fa-bars" aria-hidden="true"></i>
24
+ </span>
24
25
  </button>
25
26
  </span>
26
27
  <div class="pf-v6-c-masthead__main">
@@ -140,8 +141,10 @@ section: components
140
141
  type="button"
141
142
  aria-label="Notifications"
142
143
  >
143
- <span class="pf-v6-c-notification-badge pf-m-read">
144
- <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
144
+ <span class="pf-v6-c-button__text">
145
+ <span class="pf-v6-c-notification-badge pf-m-read">
146
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
147
+ </span>
145
148
  </span>
146
149
  </button>
147
150
  </div>
@@ -646,10 +649,9 @@ section: components
646
649
  ```html isFullscreen
647
650
  <div class="pf-v6-c-page" id="-page">
648
651
  <div class="pf-v6-c-skip-to-content">
649
- <a
650
- class="pf-v6-c-button pf-m-primary"
651
- href="#main-content--page"
652
- >Skip to content</a>
652
+ <a class="pf-v6-c-button pf-m-primary" href="#main-content--page">
653
+ <span class="pf-v6-c-button__text">Skip to content</span>
654
+ </a>
653
655
  </div>
654
656
  <header class="pf-v6-c-masthead" id="-page-masthead">
655
657
  <span class="pf-v6-c-masthead__toggle">
@@ -658,7 +660,9 @@ section: components
658
660
  type="button"
659
661
  aria-label="Global navigation"
660
662
  >
661
- <i class="fas fa-bars" aria-hidden="true"></i>
663
+ <span class="pf-v6-c-button__text">
664
+ <i class="fas fa-bars" aria-hidden="true"></i>
665
+ </span>
662
666
  </button>
663
667
  </span>
664
668
  <div class="pf-v6-c-masthead__main">
@@ -779,10 +783,12 @@ section: components
779
783
  aria-expanded="true"
780
784
  aria-label="Notifications"
781
785
  >
782
- <span
783
- class="pf-v6-c-notification-badge pf-m-read pf-m-expanded"
784
- >
785
- <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
786
+ <span class="pf-v6-c-button__text">
787
+ <span
788
+ class="pf-v6-c-notification-badge pf-m-read pf-m-expanded"
789
+ >
790
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
791
+ </span>
786
792
  </span>
787
793
  </button>
788
794
  </div>
@@ -1287,10 +1293,9 @@ section: components
1287
1293
  ```html isFullscreen
1288
1294
  <div class="pf-v6-c-page" id="-page">
1289
1295
  <div class="pf-v6-c-skip-to-content">
1290
- <a
1291
- class="pf-v6-c-button pf-m-primary"
1292
- href="#main-content--page"
1293
- >Skip to content</a>
1296
+ <a class="pf-v6-c-button pf-m-primary" href="#main-content--page">
1297
+ <span class="pf-v6-c-button__text">Skip to content</span>
1298
+ </a>
1294
1299
  </div>
1295
1300
  <header class="pf-v6-c-masthead" id="-page-masthead">
1296
1301
  <span class="pf-v6-c-masthead__toggle">
@@ -1299,7 +1304,9 @@ section: components
1299
1304
  type="button"
1300
1305
  aria-label="Global navigation"
1301
1306
  >
1302
- <i class="fas fa-bars" aria-hidden="true"></i>
1307
+ <span class="pf-v6-c-button__text">
1308
+ <i class="fas fa-bars" aria-hidden="true"></i>
1309
+ </span>
1303
1310
  </button>
1304
1311
  </span>
1305
1312
  <div class="pf-v6-c-masthead__main">
@@ -1420,10 +1427,12 @@ section: components
1420
1427
  aria-expanded="true"
1421
1428
  aria-label="Unread notifications"
1422
1429
  >
1423
- <span
1424
- class="pf-v6-c-notification-badge pf-m-unread pf-m-expanded"
1425
- >
1426
- <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
1430
+ <span class="pf-v6-c-button__text">
1431
+ <span
1432
+ class="pf-v6-c-notification-badge pf-m-unread pf-m-expanded"
1433
+ >
1434
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
1435
+ </span>
1427
1436
  </span>
1428
1437
  </button>
1429
1438
  </div>
@@ -1931,10 +1940,9 @@ section: components
1931
1940
  ```html isFullscreen
1932
1941
  <div class="pf-v6-c-page" id="-page">
1933
1942
  <div class="pf-v6-c-skip-to-content">
1934
- <a
1935
- class="pf-v6-c-button pf-m-primary"
1936
- href="#main-content--page"
1937
- >Skip to content</a>
1943
+ <a class="pf-v6-c-button pf-m-primary" href="#main-content--page">
1944
+ <span class="pf-v6-c-button__text">Skip to content</span>
1945
+ </a>
1938
1946
  </div>
1939
1947
  <header class="pf-v6-c-masthead" id="-page-masthead">
1940
1948
  <span class="pf-v6-c-masthead__toggle">
@@ -1943,7 +1951,9 @@ section: components
1943
1951
  type="button"
1944
1952
  aria-label="Global navigation"
1945
1953
  >
1946
- <i class="fas fa-bars" aria-hidden="true"></i>
1954
+ <span class="pf-v6-c-button__text">
1955
+ <i class="fas fa-bars" aria-hidden="true"></i>
1956
+ </span>
1947
1957
  </button>
1948
1958
  </span>
1949
1959
  <div class="pf-v6-c-masthead__main">
@@ -2064,10 +2074,12 @@ section: components
2064
2074
  aria-expanded="true"
2065
2075
  aria-label="Attention notifications"
2066
2076
  >
2067
- <span
2068
- class="pf-v6-c-notification-badge pf-m-attention pf-m-expanded"
2069
- >
2070
- <i class="pf-v6-pficon-attention-bell" aria-hidden="true"></i>
2077
+ <span class="pf-v6-c-button__text">
2078
+ <span
2079
+ class="pf-v6-c-notification-badge pf-m-attention pf-m-expanded"
2080
+ >
2081
+ <i class="pf-v6-pficon-attention-bell" aria-hidden="true"></i>
2082
+ </span>
2071
2083
  </span>
2072
2084
  </button>
2073
2085
  </div>
@@ -2570,10 +2582,9 @@ section: components
2570
2582
  ```html isFullscreen
2571
2583
  <div class="pf-v6-c-page" id="-page">
2572
2584
  <div class="pf-v6-c-skip-to-content">
2573
- <a
2574
- class="pf-v6-c-button pf-m-primary"
2575
- href="#main-content--page"
2576
- >Skip to content</a>
2585
+ <a class="pf-v6-c-button pf-m-primary" href="#main-content--page">
2586
+ <span class="pf-v6-c-button__text">Skip to content</span>
2587
+ </a>
2577
2588
  </div>
2578
2589
  <header class="pf-v6-c-masthead" id="-page-masthead">
2579
2590
  <span class="pf-v6-c-masthead__toggle">
@@ -2582,7 +2593,9 @@ section: components
2582
2593
  type="button"
2583
2594
  aria-label="Global navigation"
2584
2595
  >
2585
- <i class="fas fa-bars" aria-hidden="true"></i>
2596
+ <span class="pf-v6-c-button__text">
2597
+ <i class="fas fa-bars" aria-hidden="true"></i>
2598
+ </span>
2586
2599
  </button>
2587
2600
  </span>
2588
2601
  <div class="pf-v6-c-masthead__main">
@@ -2703,10 +2716,12 @@ section: components
2703
2716
  aria-expanded="true"
2704
2717
  aria-label="Unread notifications"
2705
2718
  >
2706
- <span
2707
- class="pf-v6-c-notification-badge pf-m-unread pf-m-expanded"
2708
- >
2709
- <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
2719
+ <span class="pf-v6-c-button__text">
2720
+ <span
2721
+ class="pf-v6-c-notification-badge pf-m-unread pf-m-expanded"
2722
+ >
2723
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
2724
+ </span>
2710
2725
  </span>
2711
2726
  </button>
2712
2727
  </div>
package/docs/demos/Page/examples/Page.md CHANGED
@@ -9,10 +9,9 @@ wrapperTag: div
9
9
  ```html isFullscreen
10
10
  <div class="pf-v6-c-page" id="page-demo-basic">
11
11
  <div class="pf-v6-c-skip-to-content">
12
- <a
13
- class="pf-v6-c-button pf-m-primary"
14
- href="#main-content-page-demo-basic"
15
- >Skip to content</a>
12
+ <a class="pf-v6-c-button pf-m-primary" href="#main-content-page-demo-basic">
13
+ <span class="pf-v6-c-button__text">Skip to content</span>
14
+ </a>
16
15
  </div>
17
16
  <header class="pf-v6-c-masthead" id="page-demo-basic-masthead">
18
17
  <span class="pf-v6-c-masthead__toggle">
@@ -21,7 +20,9 @@ wrapperTag: div
21
20
  type="button"
22
21
  aria-label="Global navigation"
23
22
  >
24
- <i class="fas fa-bars" aria-hidden="true"></i>
23
+ <span class="pf-v6-c-button__text">
24
+ <i class="fas fa-bars" aria-hidden="true"></i>
25
+ </span>
25
26
  </button>
26
27
  </span>
27
28
  <div class="pf-v6-c-masthead__main">
@@ -337,7 +338,9 @@ wrapperTag: div
337
338
  <a
338
339
  class="pf-v6-c-button pf-m-primary"
339
340
  href="#main-content-multiple-sidebar-body-elements-demo"
340
- >Skip to content</a>
341
+ >
342
+ <span class="pf-v6-c-button__text">Skip to content</span>
343
+ </a>
341
344
  </div>
342
345
  <header
343
346
  class="pf-v6-c-masthead"
@@ -349,7 +352,9 @@ wrapperTag: div
349
352
  type="button"
350
353
  aria-label="Global navigation"
351
354
  >
352
- <i class="fas fa-bars" aria-hidden="true"></i>
355
+ <span class="pf-v6-c-button__text">
356
+ <i class="fas fa-bars" aria-hidden="true"></i>
357
+ </span>
353
358
  </button>
354
359
  </span>
355
360
  <div class="pf-v6-c-masthead__main">
@@ -680,7 +685,9 @@ wrapperTag: div
680
685
  <a
681
686
  class="pf-v6-c-button pf-m-primary"
682
687
  href="#main-content-page-demo-sticky-top-horizontal-subnav"
683
- >Skip to content</a>
688
+ >
689
+ <span class="pf-v6-c-button__text">Skip to content</span>
690
+ </a>
684
691
  </div>
685
692
  <header
686
693
  class="pf-v6-c-masthead"
@@ -692,7 +699,9 @@ wrapperTag: div
692
699
  type="button"
693
700
  aria-label="Global navigation"
694
701
  >
695
- <i class="fas fa-bars" aria-hidden="true"></i>
702
+ <span class="pf-v6-c-button__text">
703
+ <i class="fas fa-bars" aria-hidden="true"></i>
704
+ </span>
696
705
  </button>
697
706
  </span>
698
707
  <div class="pf-v6-c-masthead__main">
@@ -1155,7 +1164,9 @@ wrapperTag: div
1155
1164
  <a
1156
1165
  class="pf-v6-c-button pf-m-primary"
1157
1166
  href="#main-content-page-demo-sticky-top-breadcrumb"
1158
- >Skip to content</a>
1167
+ >
1168
+ <span class="pf-v6-c-button__text">Skip to content</span>
1169
+ </a>
1159
1170
  </div>
1160
1171
  <header
1161
1172
  class="pf-v6-c-masthead"
@@ -1167,7 +1178,9 @@ wrapperTag: div
1167
1178
  type="button"
1168
1179
  aria-label="Global navigation"
1169
1180
  >
1170
- <i class="fas fa-bars" aria-hidden="true"></i>
1181
+ <span class="pf-v6-c-button__text">
1182
+ <i class="fas fa-bars" aria-hidden="true"></i>
1183
+ </span>
1171
1184
  </button>
1172
1185
  </span>
1173
1186
  <div class="pf-v6-c-masthead__main">
@@ -1605,7 +1618,9 @@ wrapperTag: div
1605
1618
  <a
1606
1619
  class="pf-v6-c-button pf-m-primary"
1607
1620
  href="#main-content-page-demo-sticky-top-breadcrumb"
1608
- >Skip to content</a>
1621
+ >
1622
+ <span class="pf-v6-c-button__text">Skip to content</span>
1623
+ </a>
1609
1624
  </div>
1610
1625
  <header
1611
1626
  class="pf-v6-c-masthead"
@@ -1617,7 +1632,9 @@ wrapperTag: div
1617
1632
  type="button"
1618
1633
  aria-label="Global navigation"
1619
1634
  >
1620
- <i class="fas fa-bars" aria-hidden="true"></i>
1635
+ <span class="pf-v6-c-button__text">
1636
+ <i class="fas fa-bars" aria-hidden="true"></i>
1637
+ </span>
1621
1638
  </button>
1622
1639
  </span>
1623
1640
  <div class="pf-v6-c-masthead__main">
@@ -2055,7 +2072,9 @@ wrapperTag: div
2055
2072
  <a
2056
2073
  class="pf-v6-c-button pf-m-primary"
2057
2074
  href="#main-content-page-demo-sticky-top-section-group"
2058
- >Skip to content</a>
2075
+ >
2076
+ <span class="pf-v6-c-button__text">Skip to content</span>
2077
+ </a>
2059
2078
  </div>
2060
2079
  <header
2061
2080
  class="pf-v6-c-masthead"
@@ -2067,7 +2086,9 @@ wrapperTag: div
2067
2086
  type="button"
2068
2087
  aria-label="Global navigation"
2069
2088
  >
2070
- <i class="fas fa-bars" aria-hidden="true"></i>
2089
+ <span class="pf-v6-c-button__text">
2090
+ <i class="fas fa-bars" aria-hidden="true"></i>
2091
+ </span>
2071
2092
  </button>
2072
2093
  </span>
2073
2094
  <div class="pf-v6-c-masthead__main">
@@ -2505,7 +2526,9 @@ wrapperTag: div
2505
2526
  <a
2506
2527
  class="pf-v6-c-button pf-m-primary"
2507
2528
  href="#main-content-page-demo-sticky-section-bottom"
2508
- >Skip to content</a>
2529
+ >
2530
+ <span class="pf-v6-c-button__text">Skip to content</span>
2531
+ </a>
2509
2532
  </div>
2510
2533
  <header
2511
2534
  class="pf-v6-c-masthead"
@@ -2517,7 +2540,9 @@ wrapperTag: div
2517
2540
  type="button"
2518
2541
  aria-label="Global navigation"
2519
2542
  >
2520
- <i class="fas fa-bars" aria-hidden="true"></i>
2543
+ <span class="pf-v6-c-button__text">
2544
+ <i class="fas fa-bars" aria-hidden="true"></i>
2545
+ </span>
2521
2546
  </button>
2522
2547
  </span>
2523
2548
  <div class="pf-v6-c-masthead__main">
@@ -2960,7 +2985,9 @@ wrapperTag: div
2960
2985
  <a
2961
2986
  class="pf-v6-c-button pf-m-primary"
2962
2987
  href="#main-content-page-demo-overflow-scroll"
2963
- >Skip to content</a>
2988
+ >
2989
+ <span class="pf-v6-c-button__text">Skip to content</span>
2990
+ </a>
2964
2991
  </div>
2965
2992
  <header class="pf-v6-c-masthead" id="page-demo-overflow-scroll-masthead">
2966
2993
  <span class="pf-v6-c-masthead__toggle">
@@ -2969,7 +2996,9 @@ wrapperTag: div
2969
2996
  type="button"
2970
2997
  aria-label="Global navigation"
2971
2998
  >
2972
- <i class="fas fa-bars" aria-hidden="true"></i>
2999
+ <span class="pf-v6-c-button__text">
3000
+ <i class="fas fa-bars" aria-hidden="true"></i>
3001
+ </span>
2973
3002
  </button>
2974
3003
  </span>
2975
3004
  <div class="pf-v6-c-masthead__main">
@@ -3417,7 +3446,9 @@ wrapperTag: div
3417
3446
  <a
3418
3447
  class="pf-v6-c-button pf-m-primary"
3419
3448
  href="#main-content-page-demo-centered-section"
3420
- >Skip to content</a>
3449
+ >
3450
+ <span class="pf-v6-c-button__text">Skip to content</span>
3451
+ </a>
3421
3452
  </div>
3422
3453
  <header class="pf-v6-c-masthead" id="page-demo-centered-section-masthead">
3423
3454
  <span class="pf-v6-c-masthead__toggle">
@@ -3426,7 +3457,9 @@ wrapperTag: div
3426
3457
  type="button"
3427
3458
  aria-label="Global navigation"
3428
3459
  >
3429
- <i class="fas fa-bars" aria-hidden="true"></i>
3460
+ <span class="pf-v6-c-button__text">
3461
+ <i class="fas fa-bars" aria-hidden="true"></i>
3462
+ </span>
3430
3463
  </button>
3431
3464
  </span>
3432
3465
  <div class="pf-v6-c-masthead__main">
package/docs/demos/Page/examples/Penta.md CHANGED
@@ -305,7 +305,9 @@ wrapperTag: div
305
305
  type="button"
306
306
  aria-label="Remove"
307
307
  >
308
- <i class="fas fa-columns" aria-hidden="true"></i>
308
+ <span class="pf-v6-c-button__text">
309
+ <i class="fas fa-columns" aria-hidden="true"></i>
310
+ </span>
309
311
  </button>
310
312
  </div>
311
313
  <div class="pf-v6-c-toolbar__item">
@@ -314,15 +316,16 @@ wrapperTag: div
314
316
  type="button"
315
317
  aria-label="Remove"
316
318
  >
317
- <i class="fas fa-cog" aria-hidden="true"></i>
319
+ <span class="pf-v6-c-button__text">
320
+ <i class="fas fa-cog" aria-hidden="true"></i>
321
+ </span>
318
322
  </button>
319
323
  </div>
320
324
  </div>
321
325
  <div class="pf-v6-c-toolbar__item">
322
- <button
323
- class="pf-v6-c-button pf-m-primary"
324
- type="button"
325
- >Primary</button>
326
+ <button class="pf-v6-c-button pf-m-primary" type="button">
327
+ <span class="pf-v6-c-button__text">Primary</span>
328
+ </button>
326
329
  </div>
327
330
  </div>
328
331
  </div>
package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md CHANGED
@@ -22,7 +22,9 @@ section: components
22
22
  aria-label="More information for password field"
23
23
  aria-describedby="password-generator-demo--initial-password"
24
24
  >
25
- <i class="fas fa-question-circle" aria-hidden="true"></i>
25
+ <span class="pf-v6-c-button__text">
26
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
27
+ </span>
26
28
  </span></span>
27
29
  </div>
28
30
  <div class="pf-v6-c-form__group-label-info"></div>
@@ -48,7 +50,9 @@ section: components
48
50
  type="button"
49
51
  aria-label="Show password"
50
52
  >
51
- <i class="fas fa-eye" aria-hidden="true"></i>
53
+ <span class="pf-v6-c-button__text">
54
+ <i class="fas fa-eye" aria-hidden="true"></i>
55
+ </span>
52
56
  </button>
53
57
  </div>
54
58
  </div>
@@ -70,7 +74,9 @@ section: components
70
74
  role="menuitem"
71
75
  aria-label="Generate a new suggested password"
72
76
  >
73
- <i class="fas fa-fw fa-redo" aria-hidden="true"></i>
77
+ <span class="pf-v6-c-button__text">
78
+ <i class="fas fa-fw fa-redo" aria-hidden="true"></i>
79
+ </span>
74
80
  </button>
75
81
  </div>
76
82
  </li>