@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/Masthead/examples/Masthead.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-masthead-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="masthead-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">
@@ -265,7 +269,9 @@ wrapperTag: div
265
269
  <a
266
270
  class="pf-v6-c-button pf-m-primary"
267
271
  href="#main-content-masthead-context-selecton-drilldown-example"
268
- >Skip to content</a>
272
+ >
273
+ <span class="pf-v6-c-button__text">Skip to content</span>
274
+ </a>
269
275
  </div>
270
276
  <header
271
277
  class="pf-v6-c-masthead"
@@ -277,7 +283,9 @@ wrapperTag: div
277
283
  type="button"
278
284
  aria-label="Global navigation"
279
285
  >
280
- <i class="fas fa-bars" aria-hidden="true"></i>
286
+ <span class="pf-v6-c-button__text">
287
+ <i class="fas fa-bars" aria-hidden="true"></i>
288
+ </span>
281
289
  </button>
282
290
  </span>
283
291
  <div class="pf-v6-c-masthead__main">
@@ -549,7 +557,9 @@ wrapperTag: div
549
557
  <a
550
558
  class="pf-v6-c-button pf-m-primary"
551
559
  href="#main-content-masthead-toolbar-filters-example"
552
- >Skip to content</a>
560
+ >
561
+ <span class="pf-v6-c-button__text">Skip to content</span>
562
+ </a>
553
563
  </div>
554
564
  <header
555
565
  class="pf-v6-c-masthead"
@@ -561,7 +571,9 @@ wrapperTag: div
561
571
  type="button"
562
572
  aria-label="Global navigation"
563
573
  >
564
- <i class="fas fa-bars" aria-hidden="true"></i>
574
+ <span class="pf-v6-c-button__text">
575
+ <i class="fas fa-bars" aria-hidden="true"></i>
576
+ </span>
565
577
  </button>
566
578
  </span>
567
579
  <div class="pf-v6-c-masthead__main">
@@ -869,7 +881,9 @@ wrapperTag: div
869
881
  <a
870
882
  class="pf-v6-c-button pf-m-primary"
871
883
  href="#main-content-masthead-toggle-group-filters-example"
872
- >Skip to content</a>
884
+ >
885
+ <span class="pf-v6-c-button__text">Skip to content</span>
886
+ </a>
873
887
  </div>
874
888
  <header
875
889
  class="pf-v6-c-masthead"
@@ -881,7 +895,9 @@ wrapperTag: div
881
895
  type="button"
882
896
  aria-label="Global navigation"
883
897
  >
884
- <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>
885
901
  </button>
886
902
  </span>
887
903
  <div class="pf-v6-c-masthead__main">
@@ -1189,7 +1205,9 @@ wrapperTag: div
1189
1205
  <a
1190
1206
  class="pf-v6-c-button pf-m-primary"
1191
1207
  href="#main-content-masthead-expandable-search-example"
1192
- >Skip to content</a>
1208
+ >
1209
+ <span class="pf-v6-c-button__text">Skip to content</span>
1210
+ </a>
1193
1211
  </div>
1194
1212
  <header
1195
1213
  class="pf-v6-c-masthead"
@@ -1201,7 +1219,9 @@ wrapperTag: div
1201
1219
  type="button"
1202
1220
  aria-label="Global navigation"
1203
1221
  >
1204
- <i class="fas fa-bars" aria-hidden="true"></i>
1222
+ <span class="pf-v6-c-button__text">
1223
+ <i class="fas fa-bars" aria-hidden="true"></i>
1224
+ </span>
1205
1225
  </button>
1206
1226
  </span>
1207
1227
  <div class="pf-v6-c-masthead__main">
@@ -1294,7 +1314,9 @@ wrapperTag: div
1294
1314
  type="button"
1295
1315
  aria-label="Open search"
1296
1316
  >
1297
- <i class="fas fa-fw fa-search" aria-hidden="true"></i>
1317
+ <span class="pf-v6-c-button__text">
1318
+ <i class="fas fa-fw fa-search" aria-hidden="true"></i>
1319
+ </span>
1298
1320
  </button>
1299
1321
  </div>
1300
1322
  </div>
@@ -1446,7 +1468,9 @@ wrapperTag: div
1446
1468
  <a
1447
1469
  class="pf-v6-c-button pf-m-primary"
1448
1470
  href="#main-content-masthead-expandable-search-expanded-example"
1449
- >Skip to content</a>
1471
+ >
1472
+ <span class="pf-v6-c-button__text">Skip to content</span>
1473
+ </a>
1450
1474
  </div>
1451
1475
  <header
1452
1476
  class="pf-v6-c-masthead"
@@ -1458,7 +1482,9 @@ wrapperTag: div
1458
1482
  type="button"
1459
1483
  aria-label="Global navigation"
1460
1484
  >
1461
- <i class="fas fa-bars" aria-hidden="true"></i>
1485
+ <span class="pf-v6-c-button__text">
1486
+ <i class="fas fa-bars" aria-hidden="true"></i>
1487
+ </span>
1462
1488
  </button>
1463
1489
  </span>
1464
1490
  <div class="pf-v6-c-masthead__main">
@@ -1569,7 +1595,9 @@ wrapperTag: div
1569
1595
  type="button"
1570
1596
  aria-label="Close"
1571
1597
  >
1572
- <i class="fas fa-times" aria-hidden="true"></i>
1598
+ <span class="pf-v6-c-button__text">
1599
+ <i class="fas fa-times" aria-hidden="true"></i>
1600
+ </span>
1573
1601
  </button>
1574
1602
  </div>
1575
1603
  </div>
@@ -1721,7 +1749,9 @@ wrapperTag: div
1721
1749
  <a
1722
1750
  class="pf-v6-c-button pf-m-primary"
1723
1751
  href="#main-content-masthead-advanced-with-menu-example"
1724
- >Skip to content</a>
1752
+ >
1753
+ <span class="pf-v6-c-button__text">Skip to content</span>
1754
+ </a>
1725
1755
  </div>
1726
1756
  <header
1727
1757
  class="pf-v6-c-masthead"
@@ -1733,7 +1763,9 @@ wrapperTag: div
1733
1763
  type="button"
1734
1764
  aria-label="Global navigation"
1735
1765
  >
1736
- <i class="fas fa-bars" aria-hidden="true"></i>
1766
+ <span class="pf-v6-c-button__text">
1767
+ <i class="fas fa-bars" aria-hidden="true"></i>
1768
+ </span>
1737
1769
  </button>
1738
1770
  </span>
1739
1771
  <div class="pf-v6-c-masthead__main">
@@ -2049,7 +2081,9 @@ wrapperTag: div
2049
2081
  <a
2050
2082
  class="pf-v6-c-button pf-m-primary"
2051
2083
  href="#main-content-masthead-horizontal-nav"
2052
- >Skip to content</a>
2084
+ >
2085
+ <span class="pf-v6-c-button__text">Skip to content</span>
2086
+ </a>
2053
2087
  </div>
2054
2088
  <header class="pf-v6-c-masthead" id="masthead-horizontal-nav-masthead">
2055
2089
  <div class="pf-v6-c-masthead__main">
@@ -2178,7 +2212,9 @@ wrapperTag: div
2178
2212
  type="button"
2179
2213
  aria-label="Scroll start"
2180
2214
  >
2181
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2215
+ <span class="pf-v6-c-button__text">
2216
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2217
+ </span>
2182
2218
  </button>
2183
2219
  </div>
2184
2220
  <ul class="pf-v6-c-nav__list" role="list">
@@ -2218,7 +2254,9 @@ wrapperTag: div
2218
2254
  type="button"
2219
2255
  aria-label="Scroll end"
2220
2256
  >
2221
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2257
+ <span class="pf-v6-c-button__text">
2258
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2259
+ </span>
2222
2260
  </button>
2223
2261
  </div>
2224
2262
  </nav>
@@ -2389,7 +2427,9 @@ wrapperTag: div
2389
2427
  <a
2390
2428
  class="pf-v6-c-button pf-m-primary"
2391
2429
  href="#main-content-masthead-toggle-group-filters-expanded-mobile-example"
2392
- >Skip to content</a>
2430
+ >
2431
+ <span class="pf-v6-c-button__text">Skip to content</span>
2432
+ </a>
2393
2433
  </div>
2394
2434
  <header
2395
2435
  class="pf-v6-c-masthead"
@@ -2401,7 +2441,9 @@ wrapperTag: div
2401
2441
  type="button"
2402
2442
  aria-label="Global navigation"
2403
2443
  >
2404
- <i class="fas fa-bars" aria-hidden="true"></i>
2444
+ <span class="pf-v6-c-button__text">
2445
+ <i class="fas fa-bars" aria-hidden="true"></i>
2446
+ </span>
2405
2447
  </button>
2406
2448
  </span>
2407
2449
  <div class="pf-v6-c-masthead__main">
package/docs/demos/Modal/examples/Modal.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-modal-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="modal-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">
@@ -340,7 +344,9 @@ section: components
340
344
  type="button"
341
345
  aria-label="Close"
342
346
  >
343
- <i class="fas fa-times" aria-hidden="true"></i>
347
+ <span class="pf-v6-c-button__text">
348
+ <i class="fas fa-times" aria-hidden="true"></i>
349
+ </span>
344
350
  </button>
345
351
  </div>
346
352
  <header class="pf-v6-c-modal-box__header">
@@ -357,8 +363,12 @@ section: components
357
363
  <p>A file with this name already exists, would you like to overwrite the existing file or save a new copy?</p>
358
364
  </div>
359
365
  <footer class="pf-v6-c-modal-box__footer">
360
- <button class="pf-v6-c-button pf-m-primary" type="button">Overwrite</button>
361
- <button class="pf-v6-c-button pf-m-link" type="button">Save a copy</button>
366
+ <button class="pf-v6-c-button pf-m-primary" type="button">
367
+ <span class="pf-v6-c-button__text">Overwrite</span>
368
+ </button>
369
+ <button class="pf-v6-c-button pf-m-link" type="button">
370
+ <span class="pf-v6-c-button__text">Save a copy</span>
371
+ </button>
362
372
  </footer>
363
373
  </div>
364
374
  </div>
@@ -374,7 +384,9 @@ section: components
374
384
  <a
375
385
  class="pf-v6-c-button pf-m-primary"
376
386
  href="#main-content-modal-scrollable-content-example"
377
- >Skip to content</a>
387
+ >
388
+ <span class="pf-v6-c-button__text">Skip to content</span>
389
+ </a>
378
390
  </div>
379
391
  <header
380
392
  class="pf-v6-c-masthead"
@@ -386,7 +398,9 @@ section: components
386
398
  type="button"
387
399
  aria-label="Global navigation"
388
400
  >
389
- <i class="fas fa-bars" aria-hidden="true"></i>
401
+ <span class="pf-v6-c-button__text">
402
+ <i class="fas fa-bars" aria-hidden="true"></i>
403
+ </span>
390
404
  </button>
391
405
  </span>
392
406
  <div class="pf-v6-c-masthead__main">
@@ -706,7 +720,9 @@ section: components
706
720
  type="button"
707
721
  aria-label="Close"
708
722
  >
709
- <i class="fas fa-times" aria-hidden="true"></i>
723
+ <span class="pf-v6-c-button__text">
724
+ <i class="fas fa-times" aria-hidden="true"></i>
725
+ </span>
710
726
  </button>
711
727
  </div>
712
728
  <header class="pf-v6-c-modal-box__header">
@@ -732,8 +748,12 @@ section: components
732
748
  <p>Etiam sit amet orci eget eros faucibus tincidunt. Aliquam eu nunc. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Nunc nec neque.</p>
733
749
  </div>
734
750
  <footer class="pf-v6-c-modal-box__footer">
735
- <button class="pf-v6-c-button pf-m-primary" type="button">Overwrite</button>
736
- <button class="pf-v6-c-button pf-m-link" type="button">Save a copy</button>
751
+ <button class="pf-v6-c-button pf-m-primary" type="button">
752
+ <span class="pf-v6-c-button__text">Overwrite</span>
753
+ </button>
754
+ <button class="pf-v6-c-button pf-m-link" type="button">
755
+ <span class="pf-v6-c-button__text">Save a copy</span>
756
+ </button>
737
757
  </footer>
738
758
  </div>
739
759
  </div>
@@ -749,7 +769,9 @@ section: components
749
769
  <a
750
770
  class="pf-v6-c-button pf-m-primary"
751
771
  href="#main-content-modal-medium-example"
752
- >Skip to content</a>
772
+ >
773
+ <span class="pf-v6-c-button__text">Skip to content</span>
774
+ </a>
753
775
  </div>
754
776
  <header class="pf-v6-c-masthead" id="modal-medium-example-masthead">
755
777
  <span class="pf-v6-c-masthead__toggle">
@@ -758,7 +780,9 @@ section: components
758
780
  type="button"
759
781
  aria-label="Global navigation"
760
782
  >
761
- <i class="fas fa-bars" aria-hidden="true"></i>
783
+ <span class="pf-v6-c-button__text">
784
+ <i class="fas fa-bars" aria-hidden="true"></i>
785
+ </span>
762
786
  </button>
763
787
  </span>
764
788
  <div class="pf-v6-c-masthead__main">
@@ -1078,7 +1102,9 @@ section: components
1078
1102
  type="button"
1079
1103
  aria-label="Close"
1080
1104
  >
1081
- <i class="fas fa-times" aria-hidden="true"></i>
1105
+ <span class="pf-v6-c-button__text">
1106
+ <i class="fas fa-times" aria-hidden="true"></i>
1107
+ </span>
1082
1108
  </button>
1083
1109
  </div>
1084
1110
  <header class="pf-v6-c-modal-box__header">
@@ -1094,8 +1120,12 @@ section: components
1094
1120
  <p>Form here</p>
1095
1121
  </div>
1096
1122
  <footer class="pf-v6-c-modal-box__footer">
1097
- <button class="pf-v6-c-button pf-m-primary" type="button">Save</button>
1098
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1123
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1124
+ <span class="pf-v6-c-button__text">Save</span>
1125
+ </button>
1126
+ <button class="pf-v6-c-button pf-m-link" type="button">
1127
+ <span class="pf-v6-c-button__text">Cancel</span>
1128
+ </button>
1099
1129
  </footer>
1100
1130
  </div>
1101
1131
  </div>
@@ -1111,7 +1141,9 @@ section: components
1111
1141
  <a
1112
1142
  class="pf-v6-c-button pf-m-primary"
1113
1143
  href="#main-content-modal-large-example"
1114
- >Skip to content</a>
1144
+ >
1145
+ <span class="pf-v6-c-button__text">Skip to content</span>
1146
+ </a>
1115
1147
  </div>
1116
1148
  <header class="pf-v6-c-masthead" id="modal-large-example-masthead">
1117
1149
  <span class="pf-v6-c-masthead__toggle">
@@ -1120,7 +1152,9 @@ section: components
1120
1152
  type="button"
1121
1153
  aria-label="Global navigation"
1122
1154
  >
1123
- <i class="fas fa-bars" aria-hidden="true"></i>
1155
+ <span class="pf-v6-c-button__text">
1156
+ <i class="fas fa-bars" aria-hidden="true"></i>
1157
+ </span>
1124
1158
  </button>
1125
1159
  </span>
1126
1160
  <div class="pf-v6-c-masthead__main">
@@ -1440,7 +1474,9 @@ section: components
1440
1474
  type="button"
1441
1475
  aria-label="Close"
1442
1476
  >
1443
- <i class="fas fa-times" aria-hidden="true"></i>
1477
+ <span class="pf-v6-c-button__text">
1478
+ <i class="fas fa-times" aria-hidden="true"></i>
1479
+ </span>
1444
1480
  </button>
1445
1481
  </div>
1446
1482
  <header class="pf-v6-c-modal-box__header">
@@ -1456,8 +1492,12 @@ section: components
1456
1492
  <p>Form here</p>
1457
1493
  </div>
1458
1494
  <footer class="pf-v6-c-modal-box__footer">
1459
- <button class="pf-v6-c-button pf-m-primary" type="button">Save</button>
1460
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1495
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1496
+ <span class="pf-v6-c-button__text">Save</span>
1497
+ </button>
1498
+ <button class="pf-v6-c-button pf-m-link" type="button">
1499
+ <span class="pf-v6-c-button__text">Cancel</span>
1500
+ </button>
1461
1501
  </footer>
1462
1502
  </div>
1463
1503
  </div>
@@ -1473,7 +1513,9 @@ section: components
1473
1513
  <a
1474
1514
  class="pf-v6-c-button pf-m-primary"
1475
1515
  href="#main-content-modal-large-example"
1476
- >Skip to content</a>
1516
+ >
1517
+ <span class="pf-v6-c-button__text">Skip to content</span>
1518
+ </a>
1477
1519
  </div>
1478
1520
  <header class="pf-v6-c-masthead" id="modal-large-example-masthead">
1479
1521
  <span class="pf-v6-c-masthead__toggle">
@@ -1482,7 +1524,9 @@ section: components
1482
1524
  type="button"
1483
1525
  aria-label="Global navigation"
1484
1526
  >
1485
- <i class="fas fa-bars" aria-hidden="true"></i>
1527
+ <span class="pf-v6-c-button__text">
1528
+ <i class="fas fa-bars" aria-hidden="true"></i>
1529
+ </span>
1486
1530
  </button>
1487
1531
  </span>
1488
1532
  <div class="pf-v6-c-masthead__main">
@@ -1802,7 +1846,9 @@ section: components
1802
1846
  type="button"
1803
1847
  aria-label="Close"
1804
1848
  >
1805
- <i class="fas fa-times" aria-hidden="true"></i>
1849
+ <span class="pf-v6-c-button__text">
1850
+ <i class="fas fa-times" aria-hidden="true"></i>
1851
+ </span>
1806
1852
  </button>
1807
1853
  </div>
1808
1854
  <header class="pf-v6-c-modal-box__header">
@@ -1818,8 +1864,12 @@ section: components
1818
1864
  <p>Form here</p>
1819
1865
  </div>
1820
1866
  <footer class="pf-v6-c-modal-box__footer">
1821
- <button class="pf-v6-c-button pf-m-primary" type="button">Save</button>
1822
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1867
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1868
+ <span class="pf-v6-c-button__text">Save</span>
1869
+ </button>
1870
+ <button class="pf-v6-c-button pf-m-link" type="button">
1871
+ <span class="pf-v6-c-button__text">Cancel</span>
1872
+ </button>
1823
1873
  </footer>
1824
1874
  </div>
1825
1875
  </div>
@@ -1835,7 +1885,9 @@ section: components
1835
1885
  <a
1836
1886
  class="pf-v6-c-button pf-m-primary"
1837
1887
  href="#main-content-modal-with-form-example"
1838
- >Skip to content</a>
1888
+ >
1889
+ <span class="pf-v6-c-button__text">Skip to content</span>
1890
+ </a>
1839
1891
  </div>
1840
1892
  <header class="pf-v6-c-masthead" id="modal-with-form-example-masthead">
1841
1893
  <span class="pf-v6-c-masthead__toggle">
@@ -1844,7 +1896,9 @@ section: components
1844
1896
  type="button"
1845
1897
  aria-label="Global navigation"
1846
1898
  >
1847
- <i class="fas fa-bars" aria-hidden="true"></i>
1899
+ <span class="pf-v6-c-button__text">
1900
+ <i class="fas fa-bars" aria-hidden="true"></i>
1901
+ </span>
1848
1902
  </button>
1849
1903
  </span>
1850
1904
  <div class="pf-v6-c-masthead__main">
@@ -2164,7 +2218,9 @@ section: components
2164
2218
  type="button"
2165
2219
  aria-label="Close"
2166
2220
  >
2167
- <i class="fas fa-times" aria-hidden="true"></i>
2221
+ <span class="pf-v6-c-button__text">
2222
+ <i class="fas fa-times" aria-hidden="true"></i>
2223
+ </span>
2168
2224
  </button>
2169
2225
  </div>
2170
2226
  <header class="pf-v6-c-modal-box__header">
@@ -2189,7 +2245,9 @@ section: components
2189
2245
  aria-label="More information for name field"
2190
2246
  aria-describedby="-form-name"
2191
2247
  >
2192
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2248
+ <span class="pf-v6-c-button__text">
2249
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2250
+ </span>
2193
2251
  </span></span>
2194
2252
  </div>
2195
2253
  <div class="pf-v6-c-form__group-control">
@@ -2212,7 +2270,9 @@ section: components
2212
2270
  aria-label="More information for email field"
2213
2271
  aria-describedby="-form-email"
2214
2272
  >
2215
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2273
+ <span class="pf-v6-c-button__text">
2274
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2275
+ </span>
2216
2276
  </span></span>
2217
2277
  </div>
2218
2278
  <div class="pf-v6-c-form__group-control">
@@ -2235,7 +2295,9 @@ section: components
2235
2295
  aria-label="More information for address field"
2236
2296
  aria-describedby="-form-address"
2237
2297
  >
2238
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2298
+ <span class="pf-v6-c-button__text">
2299
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2300
+ </span>
2239
2301
  </span></span>
2240
2302
  </div>
2241
2303
  <div class="pf-v6-c-form__group-control">
@@ -2252,12 +2314,12 @@ section: components
2252
2314
  </form>
2253
2315
  </div>
2254
2316
  <footer class="pf-v6-c-modal-box__footer">
2255
- <button
2256
- class="pf-v6-c-button pf-m-primary"
2257
- type="button"
2258
- form="-form"
2259
- >Create</button>
2260
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
2317
+ <button class="pf-v6-c-button pf-m-primary" type="button" form="-form">
2318
+ <span class="pf-v6-c-button__text">Create</span>
2319
+ </button>
2320
+ <button class="pf-v6-c-button pf-m-link" type="button">
2321
+ <span class="pf-v6-c-button__text">Cancel</span>
2322
+ </button>
2261
2323
  </footer>
2262
2324
  </div>
2263
2325
  </div>