@patternfly/patternfly 6.0.0-alpha.164 → 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 (89) hide show
  1. package/components/Button/button.css +33 -14
  2. package/components/Button/button.scss +36 -14
  3. package/components/Panel/panel.css +17 -14
  4. package/components/Panel/panel.scss +17 -14
  5. package/components/_index.css +50 -28
  6. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  7. package/docs/components/ActionList/examples/ActionList.md +60 -20
  8. package/docs/components/Alert/examples/Alert.md +106 -62
  9. package/docs/components/BackToTop/examples/BackToTop.md +5 -3
  10. package/docs/components/Banner/examples/Banner.md +9 -3
  11. package/docs/components/Button/examples/Button.md +536 -367
  12. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  13. package/docs/components/Card/examples/Card.md +43 -29
  14. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +75 -33
  15. package/docs/components/CodeBlock/examples/CodeBlock.md +18 -6
  16. package/docs/components/CodeEditor/examples/CodeEditor.md +44 -22
  17. package/docs/components/ContextSelector/deprecated/context-selector.md +6 -8
  18. package/docs/components/DataList/examples/DataList.md +121 -63
  19. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  20. package/docs/components/DescriptionList/examples/DescriptionList.md +125 -75
  21. package/docs/components/Drawer/examples/Drawer.md +57 -19
  22. package/docs/components/DualListSelector/examples/DualListSelector.md +204 -100
  23. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  24. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  25. package/docs/components/Form/examples/Form.md +53 -19
  26. package/docs/components/Hint/examples/Hint.md +9 -9
  27. package/docs/components/InlineEdit/examples/InlineEdit.md +78 -26
  28. package/docs/components/InputGroup/examples/InputGroup.md +27 -9
  29. package/docs/components/JumpLinks/examples/JumpLinks.md +188 -68
  30. package/docs/components/Label/examples/Label.md +651 -217
  31. package/docs/components/LogViewer/examples/LogViewer.md +218 -86
  32. package/docs/components/Login/examples/Login.md +346 -282
  33. package/docs/components/Masthead/examples/masthead.md +27 -9
  34. package/docs/components/Menu/examples/Menu.md +35 -25
  35. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -1
  36. package/docs/components/ModalBox/examples/ModalBox.md +48 -16
  37. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +48 -16
  38. package/docs/components/Nav/examples/Navigation.md +12 -4
  39. package/docs/components/NotificationBadge/examples/NotificationBadge.md +78 -42
  40. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +6 -2
  41. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  42. package/docs/components/OverflowMenu/examples/overflow-menu.md +48 -16
  43. package/docs/components/Page/examples/Page.md +21 -7
  44. package/docs/components/Pagination/examples/Pagination.md +132 -44
  45. package/docs/components/Panel/examples/Panel.md +1 -0
  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/Panel/Panel.md +88 -0
  77. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  78. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +12 -4
  79. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +306 -133
  80. package/docs/demos/Skeleton/examples/Skeleton.md +6 -2
  81. package/docs/demos/Table/examples/Table.md +474 -210
  82. package/docs/demos/Tabs/examples/Tabs.md +60 -22
  83. package/docs/demos/Toolbar/examples/Toolbar.md +123 -72
  84. package/docs/demos/Wizard/examples/Wizard.md +179 -110
  85. package/package.json +1 -1
  86. package/patternfly-no-globals.css +50 -28
  87. package/patternfly.css +50 -28
  88. package/patternfly.min.css +1 -1
  89. package/patternfly.min.css.map +1 -1
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -88,7 +88,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
88
88
  type="button"
89
89
  aria-label="Clear input"
90
90
  >
91
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
91
+ <span class="pf-v6-c-button__text">
92
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
93
+ </span>
92
94
  </button>
93
95
  </div>
94
96
  </div>
@@ -124,7 +126,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
124
126
  aria-label="Remove"
125
127
  id="text-input-group-filters-label-group-remove_label_one_select_collapsed"
126
128
  >
127
- <i class="fas fa-times" aria-hidden="true"></i>
129
+ <span class="pf-v6-c-button__text">
130
+ <i class="fas fa-times" aria-hidden="true"></i>
131
+ </span>
128
132
  </button>
129
133
  </span>
130
134
  </span>
@@ -147,7 +151,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
147
151
  aria-label="Remove"
148
152
  id="text-input-group-filters-label-group-remove_label_two_select_collapsed"
149
153
  >
150
- <i class="fas fa-times" aria-hidden="true"></i>
154
+ <span class="pf-v6-c-button__text">
155
+ <i class="fas fa-times" aria-hidden="true"></i>
156
+ </span>
151
157
  </button>
152
158
  </span>
153
159
  </span>
@@ -170,7 +176,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
170
176
  aria-label="Remove"
171
177
  id="text-input-group-filters-label-group-remove_label_three_select_collapsed"
172
178
  >
173
- <i class="fas fa-times" aria-hidden="true"></i>
179
+ <span class="pf-v6-c-button__text">
180
+ <i class="fas fa-times" aria-hidden="true"></i>
181
+ </span>
174
182
  </button>
175
183
  </span>
176
184
  </span>
@@ -193,7 +201,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
193
201
  aria-label="Remove"
194
202
  id="text-input-group-filters-label-group-remove_label_four_select_collapsed"
195
203
  >
196
- <i class="fas fa-times" aria-hidden="true"></i>
204
+ <span class="pf-v6-c-button__text">
205
+ <i class="fas fa-times" aria-hidden="true"></i>
206
+ </span>
197
207
  </button>
198
208
  </span>
199
209
  </span>
@@ -216,7 +226,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
216
226
  aria-label="Remove"
217
227
  id="text-input-group-filters-label-group-remove_label_five_select_collapsed"
218
228
  >
219
- <i class="fas fa-times" aria-hidden="true"></i>
229
+ <span class="pf-v6-c-button__text">
230
+ <i class="fas fa-times" aria-hidden="true"></i>
231
+ </span>
220
232
  </button>
221
233
  </span>
222
234
  </span>
@@ -239,7 +251,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
239
251
  aria-label="Remove"
240
252
  id="text-input-group-filters-label-group-remove_label_six_select_collapsed"
241
253
  >
242
- <i class="fas fa-times" aria-hidden="true"></i>
254
+ <span class="pf-v6-c-button__text">
255
+ <i class="fas fa-times" aria-hidden="true"></i>
256
+ </span>
243
257
  </button>
244
258
  </span>
245
259
  </span>
@@ -272,7 +286,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
272
286
  type="button"
273
287
  aria-label="Clear input"
274
288
  >
275
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
289
+ <span class="pf-v6-c-button__text">
290
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
291
+ </span>
276
292
  </button>
277
293
  </div>
278
294
  </div>
@@ -308,7 +324,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
308
324
  aria-label="Remove"
309
325
  id="text-input-group-filters-expanded-label-group-remove_label_one_select_collapsed"
310
326
  >
311
- <i class="fas fa-times" aria-hidden="true"></i>
327
+ <span class="pf-v6-c-button__text">
328
+ <i class="fas fa-times" aria-hidden="true"></i>
329
+ </span>
312
330
  </button>
313
331
  </span>
314
332
  </span>
@@ -331,7 +349,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
331
349
  aria-label="Remove"
332
350
  id="text-input-group-filters-expanded-label-group-remove_label_two_select_collapsed"
333
351
  >
334
- <i class="fas fa-times" aria-hidden="true"></i>
352
+ <span class="pf-v6-c-button__text">
353
+ <i class="fas fa-times" aria-hidden="true"></i>
354
+ </span>
335
355
  </button>
336
356
  </span>
337
357
  </span>
@@ -354,7 +374,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
354
374
  aria-label="Remove"
355
375
  id="text-input-group-filters-expanded-label-group-remove_label_three_select_collapsed"
356
376
  >
357
- <i class="fas fa-times" aria-hidden="true"></i>
377
+ <span class="pf-v6-c-button__text">
378
+ <i class="fas fa-times" aria-hidden="true"></i>
379
+ </span>
358
380
  </button>
359
381
  </span>
360
382
  </span>
@@ -377,7 +399,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
377
399
  aria-label="Remove"
378
400
  id="text-input-group-filters-expanded-label-group-remove_label_four_select_collapsed"
379
401
  >
380
- <i class="fas fa-times" aria-hidden="true"></i>
402
+ <span class="pf-v6-c-button__text">
403
+ <i class="fas fa-times" aria-hidden="true"></i>
404
+ </span>
381
405
  </button>
382
406
  </span>
383
407
  </span>
@@ -400,7 +424,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
400
424
  aria-label="Remove"
401
425
  id="text-input-group-filters-expanded-label-group-remove_label_five_select_collapsed"
402
426
  >
403
- <i class="fas fa-times" aria-hidden="true"></i>
427
+ <span class="pf-v6-c-button__text">
428
+ <i class="fas fa-times" aria-hidden="true"></i>
429
+ </span>
404
430
  </button>
405
431
  </span>
406
432
  </span>
@@ -423,7 +449,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
423
449
  aria-label="Remove"
424
450
  id="text-input-group-filters-expanded-label-group-remove_label_six_select_collapsed"
425
451
  >
426
- <i class="fas fa-times" aria-hidden="true"></i>
452
+ <span class="pf-v6-c-button__text">
453
+ <i class="fas fa-times" aria-hidden="true"></i>
454
+ </span>
427
455
  </button>
428
456
  </span>
429
457
  </span>
@@ -446,7 +474,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
446
474
  aria-label="Remove"
447
475
  id="text-input-group-filters-expanded-label-group-remove_label_seven_select_collapsed"
448
476
  >
449
- <i class="fas fa-times" aria-hidden="true"></i>
477
+ <span class="pf-v6-c-button__text">
478
+ <i class="fas fa-times" aria-hidden="true"></i>
479
+ </span>
450
480
  </button>
451
481
  </span>
452
482
  </span>
@@ -469,7 +499,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
469
499
  aria-label="Remove"
470
500
  id="text-input-group-filters-expanded-label-group-remove_label_eight_select_collapsed"
471
501
  >
472
- <i class="fas fa-times" aria-hidden="true"></i>
502
+ <span class="pf-v6-c-button__text">
503
+ <i class="fas fa-times" aria-hidden="true"></i>
504
+ </span>
473
505
  </button>
474
506
  </span>
475
507
  </span>
@@ -492,7 +524,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
492
524
  aria-label="Remove"
493
525
  id="text-input-group-filters-expanded-label-group-remove_label_nine_select_collapsed"
494
526
  >
495
- <i class="fas fa-times" aria-hidden="true"></i>
527
+ <span class="pf-v6-c-button__text">
528
+ <i class="fas fa-times" aria-hidden="true"></i>
529
+ </span>
496
530
  </button>
497
531
  </span>
498
532
  </span>
@@ -515,7 +549,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
515
549
  aria-label="Remove"
516
550
  id="text-input-group-filters-expanded-label-group-remove_label_ten_select_collapsed"
517
551
  >
518
- <i class="fas fa-times" aria-hidden="true"></i>
552
+ <span class="pf-v6-c-button__text">
553
+ <i class="fas fa-times" aria-hidden="true"></i>
554
+ </span>
519
555
  </button>
520
556
  </span>
521
557
  </span>
@@ -538,7 +574,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
538
574
  aria-label="Remove"
539
575
  id="text-input-group-filters-expanded-label-group-remove_label_eleven_select_collapsed"
540
576
  >
541
- <i class="fas fa-times" aria-hidden="true"></i>
577
+ <span class="pf-v6-c-button__text">
578
+ <i class="fas fa-times" aria-hidden="true"></i>
579
+ </span>
542
580
  </button>
543
581
  </span>
544
582
  </span>
@@ -561,7 +599,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
561
599
  aria-label="Remove"
562
600
  id="text-input-group-filters-expanded-label-group-remove_label_twelve_select_collapsed"
563
601
  >
564
- <i class="fas fa-times" aria-hidden="true"></i>
602
+ <span class="pf-v6-c-button__text">
603
+ <i class="fas fa-times" aria-hidden="true"></i>
604
+ </span>
565
605
  </button>
566
606
  </span>
567
607
  </span>
@@ -584,7 +624,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
584
624
  aria-label="Remove"
585
625
  id="text-input-group-filters-expanded-label-group-remove_label_thirteen_select_collapsed"
586
626
  >
587
- <i class="fas fa-times" aria-hidden="true"></i>
627
+ <span class="pf-v6-c-button__text">
628
+ <i class="fas fa-times" aria-hidden="true"></i>
629
+ </span>
588
630
  </button>
589
631
  </span>
590
632
  </span>
@@ -607,7 +649,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
607
649
  aria-label="Remove"
608
650
  id="text-input-group-filters-expanded-label-group-remove_label_fourteen_select_collapsed"
609
651
  >
610
- <i class="fas fa-times" aria-hidden="true"></i>
652
+ <span class="pf-v6-c-button__text">
653
+ <i class="fas fa-times" aria-hidden="true"></i>
654
+ </span>
611
655
  </button>
612
656
  </span>
613
657
  </span>
@@ -631,7 +675,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
631
675
  type="button"
632
676
  aria-label="Clear input"
633
677
  >
634
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
678
+ <span class="pf-v6-c-button__text">
679
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
680
+ </span>
635
681
  </button>
636
682
  </div>
637
683
  </div>
@@ -709,7 +755,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
709
755
  type="button"
710
756
  aria-label="Clear input"
711
757
  >
712
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
758
+ <span class="pf-v6-c-button__text">
759
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
760
+ </span>
713
761
  </button>
714
762
  </div>
715
763
  </div>
@@ -741,7 +789,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
741
789
  type="button"
742
790
  aria-label="Clear input"
743
791
  >
744
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
792
+ <span class="pf-v6-c-button__text">
793
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
794
+ </span>
745
795
  </button>
746
796
  </div>
747
797
  </div>
@@ -773,7 +823,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
773
823
  type="button"
774
824
  aria-label="Clear input"
775
825
  >
776
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
826
+ <span class="pf-v6-c-button__text">
827
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
828
+ </span>
777
829
  </button>
778
830
  </div>
779
831
  </div>
@@ -792,7 +844,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
792
844
  type="button"
793
845
  aria-label="Open search"
794
846
  >
795
- <i class="fas fa-fw fa-search" aria-hidden="true"></i>
847
+ <span class="pf-v6-c-button__text">
848
+ <i class="fas fa-fw fa-search" aria-hidden="true"></i>
849
+ </span>
796
850
  </button>
797
851
  </div>
798
852
  </div>
@@ -821,7 +875,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
821
875
  </div>
822
876
  <div class="pf-v6-c-input-group__item pf-m-plain">
823
877
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
824
- <i class="fas fa-times" aria-hidden="true"></i>
878
+ <span class="pf-v6-c-button__text">
879
+ <i class="fas fa-times" aria-hidden="true"></i>
880
+ </span>
825
881
  </button>
826
882
  </div>
827
883
  </div>
@@ -856,7 +912,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
856
912
  type="submit"
857
913
  aria-label="Search"
858
914
  >
859
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
915
+ <span class="pf-v6-c-button__text">
916
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
917
+ </span>
860
918
  </button>
861
919
  </div>
862
920
  </div>
@@ -888,7 +946,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
888
946
  type="button"
889
947
  aria-label="Clear input"
890
948
  >
891
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
949
+ <span class="pf-v6-c-button__text">
950
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
951
+ </span>
892
952
  </button>
893
953
  </div>
894
954
  </div>
@@ -900,7 +960,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
900
960
  aria-expanded="false"
901
961
  aria-label="Advanced search"
902
962
  >
903
- <i class="fas fa-caret-down" aria-hidden="true"></i>
963
+ <span class="pf-v6-c-button__text">
964
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
965
+ </span>
904
966
  </button>
905
967
  </div>
906
968
  <div class="pf-v6-c-input-group__item">
@@ -909,7 +971,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
909
971
  type="submit"
910
972
  aria-label="Search"
911
973
  >
912
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
974
+ <span class="pf-v6-c-button__text">
975
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
976
+ </span>
913
977
  </button>
914
978
  </div>
915
979
  </div>
@@ -941,7 +1005,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
941
1005
  type="button"
942
1006
  aria-label="Clear input"
943
1007
  >
944
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1008
+ <span class="pf-v6-c-button__text">
1009
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1010
+ </span>
945
1011
  </button>
946
1012
  </div>
947
1013
  </div>
@@ -953,7 +1019,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
953
1019
  aria-expanded="true"
954
1020
  aria-label="Advanced search"
955
1021
  >
956
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1022
+ <span class="pf-v6-c-button__text">
1023
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1024
+ </span>
957
1025
  </button>
958
1026
  </div>
959
1027
  <div class="pf-v6-c-input-group__item">
@@ -962,7 +1030,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
962
1030
  type="submit"
963
1031
  aria-label="Search"
964
1032
  >
965
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
1033
+ <span class="pf-v6-c-button__text">
1034
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
1035
+ </span>
966
1036
  </button>
967
1037
  </div>
968
1038
  </div>
@@ -1043,8 +1113,12 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
1043
1113
  </div>
1044
1114
  <div class="pf-v6-c-form__group pf-m-action">
1045
1115
  <div class="pf-v6-c-form__actions">
1046
- <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
1047
- <button class="pf-v6-c-button pf-m-link" type="reset">Reset</button>
1116
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
1117
+ <span class="pf-v6-c-button__text">Submit</span>
1118
+ </button>
1119
+ <button class="pf-v6-c-button pf-m-link" type="reset">
1120
+ <span class="pf-v6-c-button__text">Reset</span>
1121
+ </button>
1048
1122
  </div>
1049
1123
  </div>
1050
1124
  </form>
@@ -1077,7 +1151,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
1077
1151
  type="button"
1078
1152
  aria-label="Clear input"
1079
1153
  >
1080
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1154
+ <span class="pf-v6-c-button__text">
1155
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1156
+ </span>
1081
1157
  </button>
1082
1158
  </div>
1083
1159
  </div>
@@ -1143,7 +1219,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
1143
1219
  type="button"
1144
1220
  aria-label="Clear input"
1145
1221
  >
1146
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1222
+ <span class="pf-v6-c-button__text">
1223
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1224
+ </span>
1147
1225
  </button>
1148
1226
  </div>
1149
1227
  </div>
@@ -1190,7 +1268,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
1190
1268
  type="button"
1191
1269
  aria-label="Clear input"
1192
1270
  >
1193
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1271
+ <span class="pf-v6-c-button__text">
1272
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1273
+ </span>
1194
1274
  </button>
1195
1275
  </div>
1196
1276
  </div>
@@ -1202,7 +1282,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
1202
1282
  aria-expanded="true"
1203
1283
  aria-label="Advanced search"
1204
1284
  >
1205
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1285
+ <span class="pf-v6-c-button__text">
1286
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1287
+ </span>
1206
1288
  </button>
1207
1289
  </div>
1208
1290
  <div class="pf-v6-c-input-group__item">
@@ -1211,7 +1293,9 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
1211
1293
  type="submit"
1212
1294
  aria-label="Search"
1213
1295
  >
1214
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
1296
+ <span class="pf-v6-c-button__text">
1297
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
1298
+ </span>
1215
1299
  </button>
1216
1300
  </div>
1217
1301
  </div>
@@ -1292,8 +1376,12 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
1292
1376
  </div>
1293
1377
  <div class="pf-v6-c-form__group pf-m-action">
1294
1378
  <div class="pf-v6-c-form__actions">
1295
- <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
1296
- <button class="pf-v6-c-button pf-m-link" type="reset">Reset</button>
1379
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
1380
+ <span class="pf-v6-c-button__text">Submit</span>
1381
+ </button>
1382
+ <button class="pf-v6-c-button pf-m-link" type="reset">
1383
+ <span class="pf-v6-c-button__text">Reset</span>
1384
+ </button>
1297
1385
  </div>
1298
1386
  </div>
1299
1387
  </form>