@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/PrimaryDetail/examples/PrimaryDetail.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-primary-detail-expanded-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
18
20
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
@@ -24,7 +26,9 @@ wrapperTag: div
24
26
  type="button"
25
27
  aria-label="Global navigation"
26
28
  >
27
- <i class="fas fa-bars" aria-hidden="true"></i>
29
+ <span class="pf-v6-c-button__text">
30
+ <i class="fas fa-bars" aria-hidden="true"></i>
31
+ </span>
28
32
  </button>
29
33
  </span>
30
34
  <div class="pf-v6-c-masthead__main">
@@ -620,10 +624,12 @@ wrapperTag: div
620
624
  type="button"
621
625
  aria-label="Sort"
622
626
  >
623
- <i
624
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
625
- aria-hidden="true"
626
- ></i>
627
+ <span class="pf-v6-c-button__text">
628
+ <i
629
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
630
+ aria-hidden="true"
631
+ ></i>
632
+ </span>
627
633
  </button>
628
634
  </div>
629
635
 
@@ -641,7 +647,11 @@ wrapperTag: div
641
647
  <button
642
648
  class="pf-v6-c-button pf-m-primary"
643
649
  type="button"
644
- >Create instance</button>
650
+ >
651
+ <span
652
+ class="pf-v6-c-button__text"
653
+ >Create instance</span>
654
+ </button>
645
655
  </div>
646
656
  </div>
647
657
  </div>
@@ -699,10 +709,12 @@ wrapperTag: div
699
709
  disabled
700
710
  aria-label="Go to previous page"
701
711
  >
702
- <i
703
- class="fas fa-angle-left"
704
- aria-hidden="true"
705
- ></i>
712
+ <span class="pf-v6-c-button__text">
713
+ <i
714
+ class="fas fa-angle-left"
715
+ aria-hidden="true"
716
+ ></i>
717
+ </span>
706
718
  </button>
707
719
  </div>
708
720
  <div
@@ -713,10 +725,12 @@ wrapperTag: div
713
725
  type="button"
714
726
  aria-label="Go to next page"
715
727
  >
716
- <i
717
- class="fas fa-angle-right"
718
- aria-hidden="true"
719
- ></i>
728
+ <span class="pf-v6-c-button__text">
729
+ <i
730
+ class="fas fa-angle-right"
731
+ aria-hidden="true"
732
+ ></i>
733
+ </span>
720
734
  </button>
721
735
  </div>
722
736
  </nav>
@@ -802,11 +816,15 @@ wrapperTag: div
802
816
  <button
803
817
  class="pf-v6-c-button pf-m-secondary"
804
818
  type="button"
805
- >Action</button>
819
+ >
820
+ <span class="pf-v6-c-button__text">Action</span>
821
+ </button>
806
822
  <button
807
823
  class="pf-v6-c-button pf-m-link"
808
824
  type="button"
809
- >Link</button>
825
+ >
826
+ <span class="pf-v6-c-button__text">Link</span>
827
+ </button>
810
828
  </div>
811
829
  </div>
812
830
  </div>
@@ -907,11 +925,15 @@ wrapperTag: div
907
925
  <button
908
926
  class="pf-v6-c-button pf-m-secondary"
909
927
  type="button"
910
- >Action</button>
928
+ >
929
+ <span class="pf-v6-c-button__text">Action</span>
930
+ </button>
911
931
  <button
912
932
  class="pf-v6-c-button pf-m-link"
913
933
  type="button"
914
- >Link</button>
934
+ >
935
+ <span class="pf-v6-c-button__text">Link</span>
936
+ </button>
915
937
  </div>
916
938
  </div>
917
939
  </div>
@@ -934,11 +956,15 @@ wrapperTag: div
934
956
  <button
935
957
  class="pf-v6-c-button pf-m-secondary"
936
958
  type="button"
937
- >Action</button>
959
+ >
960
+ <span class="pf-v6-c-button__text">Action</span>
961
+ </button>
938
962
  <button
939
963
  class="pf-v6-c-button pf-m-link"
940
964
  type="button"
941
- >Link</button>
965
+ >
966
+ <span class="pf-v6-c-button__text">Link</span>
967
+ </button>
942
968
  </div>
943
969
  </div>
944
970
  </div>
@@ -1009,11 +1035,15 @@ wrapperTag: div
1009
1035
  <button
1010
1036
  class="pf-v6-c-button pf-m-secondary"
1011
1037
  type="button"
1012
- >Action</button>
1038
+ >
1039
+ <span class="pf-v6-c-button__text">Action</span>
1040
+ </button>
1013
1041
  <button
1014
1042
  class="pf-v6-c-button pf-m-link"
1015
1043
  type="button"
1016
- >Link</button>
1044
+ >
1045
+ <span class="pf-v6-c-button__text">Link</span>
1046
+ </button>
1017
1047
  </div>
1018
1048
  </div>
1019
1049
  </div>
@@ -1114,11 +1144,15 @@ wrapperTag: div
1114
1144
  <button
1115
1145
  class="pf-v6-c-button pf-m-secondary"
1116
1146
  type="button"
1117
- >Action</button>
1147
+ >
1148
+ <span class="pf-v6-c-button__text">Action</span>
1149
+ </button>
1118
1150
  <button
1119
1151
  class="pf-v6-c-button pf-m-link"
1120
1152
  type="button"
1121
- >Link</button>
1153
+ >
1154
+ <span class="pf-v6-c-button__text">Link</span>
1155
+ </button>
1122
1156
  </div>
1123
1157
  </div>
1124
1158
  </div>
@@ -1141,7 +1175,9 @@ wrapperTag: div
1141
1175
  type="button"
1142
1176
  aria-label="Close drawer panel"
1143
1177
  >
1144
- <i class="fas fa-times" aria-hidden="true"></i>
1178
+ <span class="pf-v6-c-button__text">
1179
+ <i class="fas fa-times" aria-hidden="true"></i>
1180
+ </span>
1145
1181
  </button>
1146
1182
  </div>
1147
1183
  </div>
@@ -1170,7 +1206,9 @@ wrapperTag: div
1170
1206
  type="button"
1171
1207
  aria-label="Scroll left"
1172
1208
  >
1173
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1209
+ <span class="pf-v6-c-button__text">
1210
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1211
+ </span>
1174
1212
  </button>
1175
1213
  </div>
1176
1214
  <ul class="pf-v6-c-tabs__list" role="tablist">
@@ -1206,7 +1244,9 @@ wrapperTag: div
1206
1244
  type="button"
1207
1245
  aria-label="Scroll right"
1208
1246
  >
1209
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1247
+ <span class="pf-v6-c-button__text">
1248
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1249
+ </span>
1210
1250
  </button>
1211
1251
  </div>
1212
1252
  </div>
@@ -1321,7 +1361,9 @@ wrapperTag: div
1321
1361
  <a
1322
1362
  class="pf-v6-c-button pf-m-primary"
1323
1363
  href="#main-content-primary-detail-collapsed-example"
1324
- >Skip to content</a>
1364
+ >
1365
+ <span class="pf-v6-c-button__text">Skip to content</span>
1366
+ </a>
1325
1367
  </div>
1326
1368
  <header
1327
1369
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
@@ -1333,7 +1375,9 @@ wrapperTag: div
1333
1375
  type="button"
1334
1376
  aria-label="Global navigation"
1335
1377
  >
1336
- <i class="fas fa-bars" aria-hidden="true"></i>
1378
+ <span class="pf-v6-c-button__text">
1379
+ <i class="fas fa-bars" aria-hidden="true"></i>
1380
+ </span>
1337
1381
  </button>
1338
1382
  </span>
1339
1383
  <div class="pf-v6-c-masthead__main">
@@ -1929,10 +1973,12 @@ wrapperTag: div
1929
1973
  type="button"
1930
1974
  aria-label="Sort"
1931
1975
  >
1932
- <i
1933
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
1934
- aria-hidden="true"
1935
- ></i>
1976
+ <span class="pf-v6-c-button__text">
1977
+ <i
1978
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
1979
+ aria-hidden="true"
1980
+ ></i>
1981
+ </span>
1936
1982
  </button>
1937
1983
  </div>
1938
1984
 
@@ -1950,7 +1996,11 @@ wrapperTag: div
1950
1996
  <button
1951
1997
  class="pf-v6-c-button pf-m-primary"
1952
1998
  type="button"
1953
- >Create instance</button>
1999
+ >
2000
+ <span
2001
+ class="pf-v6-c-button__text"
2002
+ >Create instance</span>
2003
+ </button>
1954
2004
  </div>
1955
2005
  </div>
1956
2006
  </div>
@@ -2008,10 +2058,12 @@ wrapperTag: div
2008
2058
  disabled
2009
2059
  aria-label="Go to previous page"
2010
2060
  >
2011
- <i
2012
- class="fas fa-angle-left"
2013
- aria-hidden="true"
2014
- ></i>
2061
+ <span class="pf-v6-c-button__text">
2062
+ <i
2063
+ class="fas fa-angle-left"
2064
+ aria-hidden="true"
2065
+ ></i>
2066
+ </span>
2015
2067
  </button>
2016
2068
  </div>
2017
2069
  <div
@@ -2022,10 +2074,12 @@ wrapperTag: div
2022
2074
  type="button"
2023
2075
  aria-label="Go to next page"
2024
2076
  >
2025
- <i
2026
- class="fas fa-angle-right"
2027
- aria-hidden="true"
2028
- ></i>
2077
+ <span class="pf-v6-c-button__text">
2078
+ <i
2079
+ class="fas fa-angle-right"
2080
+ aria-hidden="true"
2081
+ ></i>
2082
+ </span>
2029
2083
  </button>
2030
2084
  </div>
2031
2085
  </nav>
@@ -2111,11 +2165,15 @@ wrapperTag: div
2111
2165
  <button
2112
2166
  class="pf-v6-c-button pf-m-secondary"
2113
2167
  type="button"
2114
- >Action</button>
2168
+ >
2169
+ <span class="pf-v6-c-button__text">Action</span>
2170
+ </button>
2115
2171
  <button
2116
2172
  class="pf-v6-c-button pf-m-link"
2117
2173
  type="button"
2118
- >Link</button>
2174
+ >
2175
+ <span class="pf-v6-c-button__text">Link</span>
2176
+ </button>
2119
2177
  </div>
2120
2178
  </div>
2121
2179
  </div>
@@ -2216,11 +2274,15 @@ wrapperTag: div
2216
2274
  <button
2217
2275
  class="pf-v6-c-button pf-m-secondary"
2218
2276
  type="button"
2219
- >Action</button>
2277
+ >
2278
+ <span class="pf-v6-c-button__text">Action</span>
2279
+ </button>
2220
2280
  <button
2221
2281
  class="pf-v6-c-button pf-m-link"
2222
2282
  type="button"
2223
- >Link</button>
2283
+ >
2284
+ <span class="pf-v6-c-button__text">Link</span>
2285
+ </button>
2224
2286
  </div>
2225
2287
  </div>
2226
2288
  </div>
@@ -2243,11 +2305,15 @@ wrapperTag: div
2243
2305
  <button
2244
2306
  class="pf-v6-c-button pf-m-secondary"
2245
2307
  type="button"
2246
- >Action</button>
2308
+ >
2309
+ <span class="pf-v6-c-button__text">Action</span>
2310
+ </button>
2247
2311
  <button
2248
2312
  class="pf-v6-c-button pf-m-link"
2249
2313
  type="button"
2250
- >Link</button>
2314
+ >
2315
+ <span class="pf-v6-c-button__text">Link</span>
2316
+ </button>
2251
2317
  </div>
2252
2318
  </div>
2253
2319
  </div>
@@ -2318,11 +2384,15 @@ wrapperTag: div
2318
2384
  <button
2319
2385
  class="pf-v6-c-button pf-m-secondary"
2320
2386
  type="button"
2321
- >Action</button>
2387
+ >
2388
+ <span class="pf-v6-c-button__text">Action</span>
2389
+ </button>
2322
2390
  <button
2323
2391
  class="pf-v6-c-button pf-m-link"
2324
2392
  type="button"
2325
- >Link</button>
2393
+ >
2394
+ <span class="pf-v6-c-button__text">Link</span>
2395
+ </button>
2326
2396
  </div>
2327
2397
  </div>
2328
2398
  </div>
@@ -2423,11 +2493,15 @@ wrapperTag: div
2423
2493
  <button
2424
2494
  class="pf-v6-c-button pf-m-secondary"
2425
2495
  type="button"
2426
- >Action</button>
2496
+ >
2497
+ <span class="pf-v6-c-button__text">Action</span>
2498
+ </button>
2427
2499
  <button
2428
2500
  class="pf-v6-c-button pf-m-link"
2429
2501
  type="button"
2430
- >Link</button>
2502
+ >
2503
+ <span class="pf-v6-c-button__text">Link</span>
2504
+ </button>
2431
2505
  </div>
2432
2506
  </div>
2433
2507
  </div>
@@ -2450,7 +2524,9 @@ wrapperTag: div
2450
2524
  type="button"
2451
2525
  aria-label="Close drawer panel"
2452
2526
  >
2453
- <i class="fas fa-times" aria-hidden="true"></i>
2527
+ <span class="pf-v6-c-button__text">
2528
+ <i class="fas fa-times" aria-hidden="true"></i>
2529
+ </span>
2454
2530
  </button>
2455
2531
  </div>
2456
2532
  </div>
@@ -2553,7 +2629,9 @@ wrapperTag: div
2553
2629
  <a
2554
2630
  class="pf-v6-c-button pf-m-primary"
2555
2631
  href="#main-content-primary-detail-content-body-padding-example"
2556
- >Skip to content</a>
2632
+ >
2633
+ <span class="pf-v6-c-button__text">Skip to content</span>
2634
+ </a>
2557
2635
  </div>
2558
2636
  <header
2559
2637
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
@@ -2565,7 +2643,9 @@ wrapperTag: div
2565
2643
  type="button"
2566
2644
  aria-label="Global navigation"
2567
2645
  >
2568
- <i class="fas fa-bars" aria-hidden="true"></i>
2646
+ <span class="pf-v6-c-button__text">
2647
+ <i class="fas fa-bars" aria-hidden="true"></i>
2648
+ </span>
2569
2649
  </button>
2570
2650
  </span>
2571
2651
  <div class="pf-v6-c-masthead__main">
@@ -3105,10 +3185,12 @@ wrapperTag: div
3105
3185
  type="button"
3106
3186
  aria-label="Sort"
3107
3187
  >
3108
- <i
3109
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
3110
- aria-hidden="true"
3111
- ></i>
3188
+ <span class="pf-v6-c-button__text">
3189
+ <i
3190
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
3191
+ aria-hidden="true"
3192
+ ></i>
3193
+ </span>
3112
3194
  </button>
3113
3195
  </div>
3114
3196
 
@@ -3126,7 +3208,11 @@ wrapperTag: div
3126
3208
  <button
3127
3209
  class="pf-v6-c-button pf-m-primary"
3128
3210
  type="button"
3129
- >Create instance</button>
3211
+ >
3212
+ <span
3213
+ class="pf-v6-c-button__text"
3214
+ >Create instance</span>
3215
+ </button>
3130
3216
  </div>
3131
3217
  </div>
3132
3218
  </div>
@@ -3184,10 +3270,12 @@ wrapperTag: div
3184
3270
  disabled
3185
3271
  aria-label="Go to previous page"
3186
3272
  >
3187
- <i
3188
- class="fas fa-angle-left"
3189
- aria-hidden="true"
3190
- ></i>
3273
+ <span class="pf-v6-c-button__text">
3274
+ <i
3275
+ class="fas fa-angle-left"
3276
+ aria-hidden="true"
3277
+ ></i>
3278
+ </span>
3191
3279
  </button>
3192
3280
  </div>
3193
3281
  <div
@@ -3198,10 +3286,12 @@ wrapperTag: div
3198
3286
  type="button"
3199
3287
  aria-label="Go to next page"
3200
3288
  >
3201
- <i
3202
- class="fas fa-angle-right"
3203
- aria-hidden="true"
3204
- ></i>
3289
+ <span class="pf-v6-c-button__text">
3290
+ <i
3291
+ class="fas fa-angle-right"
3292
+ aria-hidden="true"
3293
+ ></i>
3294
+ </span>
3205
3295
  </button>
3206
3296
  </div>
3207
3297
  </nav>
@@ -3287,11 +3377,15 @@ wrapperTag: div
3287
3377
  <button
3288
3378
  class="pf-v6-c-button pf-m-secondary"
3289
3379
  type="button"
3290
- >Action</button>
3380
+ >
3381
+ <span class="pf-v6-c-button__text">Action</span>
3382
+ </button>
3291
3383
  <button
3292
3384
  class="pf-v6-c-button pf-m-link"
3293
3385
  type="button"
3294
- >Link</button>
3386
+ >
3387
+ <span class="pf-v6-c-button__text">Link</span>
3388
+ </button>
3295
3389
  </div>
3296
3390
  </div>
3297
3391
  </div>
@@ -3392,11 +3486,15 @@ wrapperTag: div
3392
3486
  <button
3393
3487
  class="pf-v6-c-button pf-m-secondary"
3394
3488
  type="button"
3395
- >Action</button>
3489
+ >
3490
+ <span class="pf-v6-c-button__text">Action</span>
3491
+ </button>
3396
3492
  <button
3397
3493
  class="pf-v6-c-button pf-m-link"
3398
3494
  type="button"
3399
- >Link</button>
3495
+ >
3496
+ <span class="pf-v6-c-button__text">Link</span>
3497
+ </button>
3400
3498
  </div>
3401
3499
  </div>
3402
3500
  </div>
@@ -3419,11 +3517,15 @@ wrapperTag: div
3419
3517
  <button
3420
3518
  class="pf-v6-c-button pf-m-secondary"
3421
3519
  type="button"
3422
- >Action</button>
3520
+ >
3521
+ <span class="pf-v6-c-button__text">Action</span>
3522
+ </button>
3423
3523
  <button
3424
3524
  class="pf-v6-c-button pf-m-link"
3425
3525
  type="button"
3426
- >Link</button>
3526
+ >
3527
+ <span class="pf-v6-c-button__text">Link</span>
3528
+ </button>
3427
3529
  </div>
3428
3530
  </div>
3429
3531
  </div>
@@ -3494,11 +3596,15 @@ wrapperTag: div
3494
3596
  <button
3495
3597
  class="pf-v6-c-button pf-m-secondary"
3496
3598
  type="button"
3497
- >Action</button>
3599
+ >
3600
+ <span class="pf-v6-c-button__text">Action</span>
3601
+ </button>
3498
3602
  <button
3499
3603
  class="pf-v6-c-button pf-m-link"
3500
3604
  type="button"
3501
- >Link</button>
3605
+ >
3606
+ <span class="pf-v6-c-button__text">Link</span>
3607
+ </button>
3502
3608
  </div>
3503
3609
  </div>
3504
3610
  </div>
@@ -3599,11 +3705,15 @@ wrapperTag: div
3599
3705
  <button
3600
3706
  class="pf-v6-c-button pf-m-secondary"
3601
3707
  type="button"
3602
- >Action</button>
3708
+ >
3709
+ <span class="pf-v6-c-button__text">Action</span>
3710
+ </button>
3603
3711
  <button
3604
3712
  class="pf-v6-c-button pf-m-link"
3605
3713
  type="button"
3606
- >Link</button>
3714
+ >
3715
+ <span class="pf-v6-c-button__text">Link</span>
3716
+ </button>
3607
3717
  </div>
3608
3718
  </div>
3609
3719
  </div>
@@ -3626,7 +3736,9 @@ wrapperTag: div
3626
3736
  type="button"
3627
3737
  aria-label="Close drawer panel"
3628
3738
  >
3629
- <i class="fas fa-times" aria-hidden="true"></i>
3739
+ <span class="pf-v6-c-button__text">
3740
+ <i class="fas fa-times" aria-hidden="true"></i>
3741
+ </span>
3630
3742
  </button>
3631
3743
  </div>
3632
3744
  </div>
@@ -3729,7 +3841,9 @@ wrapperTag: div
3729
3841
  <a
3730
3842
  class="pf-v6-c-button pf-m-primary"
3731
3843
  href="#main-content-primary-detail-card-view-expanded-example"
3732
- >Skip to content</a>
3844
+ >
3845
+ <span class="pf-v6-c-button__text">Skip to content</span>
3846
+ </a>
3733
3847
  </div>
3734
3848
  <header
3735
3849
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
@@ -3741,7 +3855,9 @@ wrapperTag: div
3741
3855
  type="button"
3742
3856
  aria-label="Global navigation"
3743
3857
  >
3744
- <i class="fas fa-bars" aria-hidden="true"></i>
3858
+ <span class="pf-v6-c-button__text">
3859
+ <i class="fas fa-bars" aria-hidden="true"></i>
3860
+ </span>
3745
3861
  </button>
3746
3862
  </span>
3747
3863
  <div class="pf-v6-c-masthead__main">
@@ -4125,10 +4241,12 @@ wrapperTag: div
4125
4241
  type="button"
4126
4242
  aria-label="Sort"
4127
4243
  >
4128
- <i
4129
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
4130
- aria-hidden="true"
4131
- ></i>
4244
+ <span class="pf-v6-c-button__text">
4245
+ <i
4246
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
4247
+ aria-hidden="true"
4248
+ ></i>
4249
+ </span>
4132
4250
  </button>
4133
4251
  </div>
4134
4252
 
@@ -4146,14 +4264,18 @@ wrapperTag: div
4146
4264
  <button
4147
4265
  class="pf-v6-c-button pf-m-primary"
4148
4266
  type="button"
4149
- >Create instance</button>
4267
+ >
4268
+ <span class="pf-v6-c-button__text">Create instance</span>
4269
+ </button>
4150
4270
  </div>
4151
4271
 
4152
4272
  <div class="pf-v6-c-overflow-menu__item">
4153
4273
  <button
4154
4274
  class="pf-v6-c-button pf-m-secondary"
4155
4275
  type="button"
4156
- >Action</button>
4276
+ >
4277
+ <span class="pf-v6-c-button__text">Action</span>
4278
+ </button>
4157
4279
  </div>
4158
4280
  </div>
4159
4281
  </div>
@@ -4181,7 +4303,9 @@ wrapperTag: div
4181
4303
  type="button"
4182
4304
  aria-label="Grid view"
4183
4305
  >
4184
- <i class="fas fa-th" aria-hidden="true"></i>
4306
+ <span class="pf-v6-c-button__text">
4307
+ <i class="fas fa-th" aria-hidden="true"></i>
4308
+ </span>
4185
4309
  </button>
4186
4310
  </div>
4187
4311
  <div class="pf-v6-c-toolbar__item">
@@ -4190,7 +4314,9 @@ wrapperTag: div
4190
4314
  type="button"
4191
4315
  aria-label="List view"
4192
4316
  >
4193
- <i class="fas fa-list-ul" aria-hidden="true"></i>
4317
+ <span class="pf-v6-c-button__text">
4318
+ <i class="fas fa-list-ul" aria-hidden="true"></i>
4319
+ </span>
4194
4320
  </button>
4195
4321
  </div>
4196
4322
  </div>
@@ -4229,7 +4355,9 @@ wrapperTag: div
4229
4355
  disabled
4230
4356
  aria-label="Go to previous page"
4231
4357
  >
4232
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4358
+ <span class="pf-v6-c-button__text">
4359
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
4360
+ </span>
4233
4361
  </button>
4234
4362
  </div>
4235
4363
  <div
@@ -4240,7 +4368,12 @@ wrapperTag: div
4240
4368
  type="button"
4241
4369
  aria-label="Go to next page"
4242
4370
  >
4243
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4371
+ <span class="pf-v6-c-button__text">
4372
+ <i
4373
+ class="fas fa-angle-right"
4374
+ aria-hidden="true"
4375
+ ></i>
4376
+ </span>
4244
4377
  </button>
4245
4378
  </div>
4246
4379
  </nav>
@@ -4736,7 +4869,9 @@ wrapperTag: div
4736
4869
  type="button"
4737
4870
  aria-label="Close drawer panel"
4738
4871
  >
4739
- <i class="fas fa-times" aria-hidden="true"></i>
4872
+ <span class="pf-v6-c-button__text">
4873
+ <i class="fas fa-times" aria-hidden="true"></i>
4874
+ </span>
4740
4875
  </button>
4741
4876
  </div>
4742
4877
  </div>
@@ -4841,7 +4976,9 @@ wrapperTag: div
4841
4976
  <a
4842
4977
  class="pf-v6-c-button pf-m-primary"
4843
4978
  href="#main-content-primary-detail-card-simple-list-on-mobile-example"
4844
- >Skip to content</a>
4979
+ >
4980
+ <span class="pf-v6-c-button__text">Skip to content</span>
4981
+ </a>
4845
4982
  </div>
4846
4983
  <header
4847
4984
  class="pf-v6-c-masthead"
@@ -4853,7 +4990,9 @@ wrapperTag: div
4853
4990
  type="button"
4854
4991
  aria-label="Global navigation"
4855
4992
  >
4856
- <i class="fas fa-bars" aria-hidden="true"></i>
4993
+ <span class="pf-v6-c-button__text">
4994
+ <i class="fas fa-bars" aria-hidden="true"></i>
4995
+ </span>
4857
4996
  </button>
4858
4997
  </span>
4859
4998
  <div class="pf-v6-c-masthead__main">
@@ -5220,7 +5359,9 @@ wrapperTag: div
5220
5359
  type="button"
5221
5360
  aria-label="Close drawer panel"
5222
5361
  >
5223
- <i class="fas fa-times" aria-hidden="true"></i>
5362
+ <span class="pf-v6-c-button__text">
5363
+ <i class="fas fa-times" aria-hidden="true"></i>
5364
+ </span>
5224
5365
  </button>
5225
5366
  </div>
5226
5367
  </div>
@@ -5322,7 +5463,9 @@ wrapperTag: div
5322
5463
  <a
5323
5464
  class="pf-v6-c-button pf-m-primary"
5324
5465
  href="#main-content-primary-detail-card-data-list-example"
5325
- >Skip to content</a>
5466
+ >
5467
+ <span class="pf-v6-c-button__text">Skip to content</span>
5468
+ </a>
5326
5469
  </div>
5327
5470
  <header
5328
5471
  class="pf-v6-c-masthead"
@@ -5334,7 +5477,9 @@ wrapperTag: div
5334
5477
  type="button"
5335
5478
  aria-label="Global navigation"
5336
5479
  >
5337
- <i class="fas fa-bars" aria-hidden="true"></i>
5480
+ <span class="pf-v6-c-button__text">
5481
+ <i class="fas fa-bars" aria-hidden="true"></i>
5482
+ </span>
5338
5483
  </button>
5339
5484
  </span>
5340
5485
  <div class="pf-v6-c-masthead__main">
@@ -5922,7 +6067,9 @@ wrapperTag: div
5922
6067
  type="button"
5923
6068
  aria-label="Close drawer panel"
5924
6069
  >
5925
- <i class="fas fa-times" aria-hidden="true"></i>
6070
+ <span class="pf-v6-c-button__text">
6071
+ <i class="fas fa-times" aria-hidden="true"></i>
6072
+ </span>
5926
6073
  </button>
5927
6074
  </div>
5928
6075
  </div>
@@ -6023,7 +6170,9 @@ wrapperTag: div
6023
6170
  <a
6024
6171
  class="pf-v6-c-button pf-m-primary"
6025
6172
  href="#main-content-primary-detail-inline-modifier-example"
6026
- >Skip to content</a>
6173
+ >
6174
+ <span class="pf-v6-c-button__text">Skip to content</span>
6175
+ </a>
6027
6176
  </div>
6028
6177
  <header
6029
6178
  class="pf-v6-c-masthead"
@@ -6035,7 +6184,9 @@ wrapperTag: div
6035
6184
  type="button"
6036
6185
  aria-label="Global navigation"
6037
6186
  >
6038
- <i class="fas fa-bars" aria-hidden="true"></i>
6187
+ <span class="pf-v6-c-button__text">
6188
+ <i class="fas fa-bars" aria-hidden="true"></i>
6189
+ </span>
6039
6190
  </button>
6040
6191
  </span>
6041
6192
  <div class="pf-v6-c-masthead__main">
@@ -6400,14 +6551,18 @@ wrapperTag: div
6400
6551
  <button
6401
6552
  class="pf-v6-c-button pf-m-primary"
6402
6553
  type="button"
6403
- >Create instance</button>
6554
+ >
6555
+ <span class="pf-v6-c-button__text">Create instance</span>
6556
+ </button>
6404
6557
  </div>
6405
6558
 
6406
6559
  <div class="pf-v6-c-overflow-menu__item">
6407
6560
  <button
6408
6561
  class="pf-v6-c-button pf-m-secondary"
6409
6562
  type="button"
6410
- >Action</button>
6563
+ >
6564
+ <span class="pf-v6-c-button__text">Action</span>
6565
+ </button>
6411
6566
  </div>
6412
6567
  </div>
6413
6568
  </div>
@@ -6460,7 +6615,9 @@ wrapperTag: div
6460
6615
  disabled
6461
6616
  aria-label="Go to previous page"
6462
6617
  >
6463
- <i class="fas fa-angle-left" aria-hidden="true"></i>
6618
+ <span class="pf-v6-c-button__text">
6619
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
6620
+ </span>
6464
6621
  </button>
6465
6622
  </div>
6466
6623
  <div
@@ -6471,7 +6628,12 @@ wrapperTag: div
6471
6628
  type="button"
6472
6629
  aria-label="Go to next page"
6473
6630
  >
6474
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6631
+ <span class="pf-v6-c-button__text">
6632
+ <i
6633
+ class="fas fa-angle-right"
6634
+ aria-hidden="true"
6635
+ ></i>
6636
+ </span>
6475
6637
  </button>
6476
6638
  </div>
6477
6639
  </nav>
@@ -6555,11 +6717,12 @@ wrapperTag: div
6555
6717
  <button
6556
6718
  class="pf-v6-c-button pf-m-secondary"
6557
6719
  type="button"
6558
- >Action</button>
6559
- <button
6560
- class="pf-v6-c-button pf-m-link"
6561
- type="button"
6562
- >Link</button>
6720
+ >
6721
+ <span class="pf-v6-c-button__text">Action</span>
6722
+ </button>
6723
+ <button class="pf-v6-c-button pf-m-link" type="button">
6724
+ <span class="pf-v6-c-button__text">Link</span>
6725
+ </button>
6563
6726
  </div>
6564
6727
  </div>
6565
6728
  </div>
@@ -6658,11 +6821,12 @@ wrapperTag: div
6658
6821
  <button
6659
6822
  class="pf-v6-c-button pf-m-secondary"
6660
6823
  type="button"
6661
- >Action</button>
6662
- <button
6663
- class="pf-v6-c-button pf-m-link"
6664
- type="button"
6665
- >Link</button>
6824
+ >
6825
+ <span class="pf-v6-c-button__text">Action</span>
6826
+ </button>
6827
+ <button class="pf-v6-c-button pf-m-link" type="button">
6828
+ <span class="pf-v6-c-button__text">Link</span>
6829
+ </button>
6666
6830
  </div>
6667
6831
  </div>
6668
6832
  </div>
@@ -6685,11 +6849,12 @@ wrapperTag: div
6685
6849
  <button
6686
6850
  class="pf-v6-c-button pf-m-secondary"
6687
6851
  type="button"
6688
- >Action</button>
6689
- <button
6690
- class="pf-v6-c-button pf-m-link"
6691
- type="button"
6692
- >Link</button>
6852
+ >
6853
+ <span class="pf-v6-c-button__text">Action</span>
6854
+ </button>
6855
+ <button class="pf-v6-c-button pf-m-link" type="button">
6856
+ <span class="pf-v6-c-button__text">Link</span>
6857
+ </button>
6693
6858
  </div>
6694
6859
  </div>
6695
6860
  </div>
@@ -6758,11 +6923,12 @@ wrapperTag: div
6758
6923
  <button
6759
6924
  class="pf-v6-c-button pf-m-secondary"
6760
6925
  type="button"
6761
- >Action</button>
6762
- <button
6763
- class="pf-v6-c-button pf-m-link"
6764
- type="button"
6765
- >Link</button>
6926
+ >
6927
+ <span class="pf-v6-c-button__text">Action</span>
6928
+ </button>
6929
+ <button class="pf-v6-c-button pf-m-link" type="button">
6930
+ <span class="pf-v6-c-button__text">Link</span>
6931
+ </button>
6766
6932
  </div>
6767
6933
  </div>
6768
6934
  </div>
@@ -6861,11 +7027,12 @@ wrapperTag: div
6861
7027
  <button
6862
7028
  class="pf-v6-c-button pf-m-secondary"
6863
7029
  type="button"
6864
- >Action</button>
6865
- <button
6866
- class="pf-v6-c-button pf-m-link"
6867
- type="button"
6868
- >Link</button>
7030
+ >
7031
+ <span class="pf-v6-c-button__text">Action</span>
7032
+ </button>
7033
+ <button class="pf-v6-c-button pf-m-link" type="button">
7034
+ <span class="pf-v6-c-button__text">Link</span>
7035
+ </button>
6869
7036
  </div>
6870
7037
  </div>
6871
7038
  </div>
@@ -6888,7 +7055,9 @@ wrapperTag: div
6888
7055
  type="button"
6889
7056
  aria-label="Close drawer panel"
6890
7057
  >
6891
- <i class="fas fa-times" aria-hidden="true"></i>
7058
+ <span class="pf-v6-c-button__text">
7059
+ <i class="fas fa-times" aria-hidden="true"></i>
7060
+ </span>
6892
7061
  </button>
6893
7062
  </div>
6894
7063
  </div>
@@ -6917,7 +7086,9 @@ wrapperTag: div
6917
7086
  type="button"
6918
7087
  aria-label="Scroll left"
6919
7088
  >
6920
- <i class="fas fa-angle-left" aria-hidden="true"></i>
7089
+ <span class="pf-v6-c-button__text">
7090
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
7091
+ </span>
6921
7092
  </button>
6922
7093
  </div>
6923
7094
  <ul class="pf-v6-c-tabs__list" role="tablist">
@@ -6953,7 +7124,9 @@ wrapperTag: div
6953
7124
  type="button"
6954
7125
  aria-label="Scroll right"
6955
7126
  >
6956
- <i class="fas fa-angle-right" aria-hidden="true"></i>
7127
+ <span class="pf-v6-c-button__text">
7128
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
7129
+ </span>
6957
7130
  </button>
6958
7131
  </div>
6959
7132
  </div>