@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/DescriptionList/examples/DescriptionList.md CHANGED
@@ -41,10 +41,12 @@ cssPrefix: pf-v6-c-description-list
41
41
  <dd class="pf-v6-c-description-list__description">
42
42
  <div class="pf-v6-c-description-list__text">
43
43
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
44
- <span class="pf-v6-c-button__icon pf-m-start">
45
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
44
+ <span class="pf-v6-c-button__text">
45
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
46
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
47
+ </span>
48
+ app=MyApp
46
49
  </span>
47
- app=MyApp
48
50
  </button>
49
51
  </div>
50
52
  </dd>
@@ -98,10 +100,12 @@ cssPrefix: pf-v6-c-description-list
98
100
  <dd class="pf-v6-c-description-list__description">
99
101
  <div class="pf-v6-c-description-list__text">
100
102
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
101
- <span class="pf-v6-c-button__icon pf-m-start">
102
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
103
+ <span class="pf-v6-c-button__text">
104
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
105
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
106
+ </span>
107
+ app=MyApp
103
108
  </span>
104
- app=MyApp
105
109
  </button>
106
110
  </div>
107
111
  </dd>
@@ -157,10 +161,12 @@ cssPrefix: pf-v6-c-description-list
157
161
  <dd class="pf-v6-c-description-list__description">
158
162
  <div class="pf-v6-c-description-list__text">
159
163
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
160
- <span class="pf-v6-c-button__icon pf-m-start">
161
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
164
+ <span class="pf-v6-c-button__text">
165
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
166
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
167
+ </span>
168
+ app=MyApp
162
169
  </span>
163
- app=MyApp
164
170
  </button>
165
171
  </div>
166
172
  </dd>
@@ -214,10 +220,12 @@ cssPrefix: pf-v6-c-description-list
214
220
  <dd class="pf-v6-c-description-list__description">
215
221
  <div class="pf-v6-c-description-list__text">
216
222
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
217
- <span class="pf-v6-c-button__icon pf-m-start">
218
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
223
+ <span class="pf-v6-c-button__text">
224
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
225
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
226
+ </span>
227
+ app=MyApp
219
228
  </span>
220
- app=MyApp
221
229
  </button>
222
230
  </div>
223
231
  </dd>
@@ -271,10 +279,12 @@ cssPrefix: pf-v6-c-description-list
271
279
  <dd class="pf-v6-c-description-list__description">
272
280
  <div class="pf-v6-c-description-list__text">
273
281
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
274
- <span class="pf-v6-c-button__icon pf-m-start">
275
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
282
+ <span class="pf-v6-c-button__text">
283
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
284
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
285
+ </span>
286
+ app=MyApp
276
287
  </span>
277
- app=MyApp
278
288
  </button>
279
289
  </div>
280
290
  </dd>
@@ -328,10 +338,12 @@ cssPrefix: pf-v6-c-description-list
328
338
  <dd class="pf-v6-c-description-list__description">
329
339
  <div class="pf-v6-c-description-list__text">
330
340
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
331
- <span class="pf-v6-c-button__icon pf-m-start">
332
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
341
+ <span class="pf-v6-c-button__text">
342
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
343
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
344
+ </span>
345
+ app=MyApp
333
346
  </span>
334
- app=MyApp
335
347
  </button>
336
348
  </div>
337
349
  </dd>
@@ -385,10 +397,12 @@ cssPrefix: pf-v6-c-description-list
385
397
  <dd class="pf-v6-c-description-list__description">
386
398
  <div class="pf-v6-c-description-list__text">
387
399
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
388
- <span class="pf-v6-c-button__icon pf-m-start">
389
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
400
+ <span class="pf-v6-c-button__text">
401
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
402
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
403
+ </span>
404
+ app=MyApp
390
405
  </span>
391
- app=MyApp
392
406
  </button>
393
407
  </div>
394
408
  </dd>
@@ -442,10 +456,12 @@ cssPrefix: pf-v6-c-description-list
442
456
  <dd class="pf-v6-c-description-list__description">
443
457
  <div class="pf-v6-c-description-list__text">
444
458
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
445
- <span class="pf-v6-c-button__icon pf-m-start">
446
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
459
+ <span class="pf-v6-c-button__text">
460
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
461
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
462
+ </span>
463
+ app=MyApp
447
464
  </span>
448
- app=MyApp
449
465
  </button>
450
466
  </div>
451
467
  </dd>
@@ -499,10 +515,12 @@ cssPrefix: pf-v6-c-description-list
499
515
  <dd class="pf-v6-c-description-list__description">
500
516
  <div class="pf-v6-c-description-list__text">
501
517
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
502
- <span class="pf-v6-c-button__icon pf-m-start">
503
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
518
+ <span class="pf-v6-c-button__text">
519
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
520
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
521
+ </span>
522
+ app=MyApp
504
523
  </span>
505
- app=MyApp
506
524
  </button>
507
525
  </div>
508
526
  </dd>
@@ -556,10 +574,12 @@ cssPrefix: pf-v6-c-description-list
556
574
  <dd class="pf-v6-c-description-list__description">
557
575
  <div class="pf-v6-c-description-list__text">
558
576
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
559
- <span class="pf-v6-c-button__icon pf-m-start">
560
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
577
+ <span class="pf-v6-c-button__text">
578
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
579
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
580
+ </span>
581
+ app=MyApp
561
582
  </span>
562
- app=MyApp
563
583
  </button>
564
584
  </div>
565
585
  </dd>
@@ -619,10 +639,12 @@ Column fill will modify the default placement of description list groups to fill
619
639
  <dd class="pf-v6-c-description-list__description">
620
640
  <div class="pf-v6-c-description-list__text">
621
641
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
622
- <span class="pf-v6-c-button__icon pf-m-start">
623
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
642
+ <span class="pf-v6-c-button__text">
643
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
644
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
645
+ </span>
646
+ app=MyApp
624
647
  </span>
625
- app=MyApp
626
648
  </button>
627
649
  </div>
628
650
  </dd>
@@ -678,10 +700,12 @@ Column fill will modify the default placement of description list groups to fill
678
700
  <dd class="pf-v6-c-description-list__description">
679
701
  <div class="pf-v6-c-description-list__text">
680
702
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
681
- <span class="pf-v6-c-button__icon pf-m-start">
682
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
703
+ <span class="pf-v6-c-button__text">
704
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
705
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
706
+ </span>
707
+ app=MyApp
683
708
  </span>
684
- app=MyApp
685
709
  </button>
686
710
  </div>
687
711
  </dd>
@@ -738,10 +762,12 @@ Column fill will modify the default placement of description list groups to fill
738
762
  <dd class="pf-v6-c-description-list__description">
739
763
  <div class="pf-v6-c-description-list__text">
740
764
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
741
- <span class="pf-v6-c-button__icon pf-m-start">
742
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
765
+ <span class="pf-v6-c-button__text">
766
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
767
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
768
+ </span>
769
+ app=MyApp
743
770
  </span>
744
- app=MyApp
745
771
  </button>
746
772
  </div>
747
773
  </dd>
@@ -798,10 +824,12 @@ Column fill will modify the default placement of description list groups to fill
798
824
  <dd class="pf-v6-c-description-list__description">
799
825
  <div class="pf-v6-c-description-list__text">
800
826
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
801
- <span class="pf-v6-c-button__icon pf-m-start">
802
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
827
+ <span class="pf-v6-c-button__text">
828
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
829
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
830
+ </span>
831
+ app=MyApp
803
832
  </span>
804
- app=MyApp
805
833
  </button>
806
834
  </div>
807
835
  </dd>
@@ -857,10 +885,12 @@ Column fill will modify the default placement of description list groups to fill
857
885
  <dd class="pf-v6-c-description-list__description">
858
886
  <div class="pf-v6-c-description-list__text">
859
887
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
860
- <span class="pf-v6-c-button__icon pf-m-start">
861
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
888
+ <span class="pf-v6-c-button__text">
889
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
890
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
891
+ </span>
892
+ app=MyApp
862
893
  </span>
863
- app=MyApp
864
894
  </button>
865
895
  </div>
866
896
  </dd>
@@ -916,10 +946,12 @@ Column fill will modify the default placement of description list groups to fill
916
946
  <dd class="pf-v6-c-description-list__description">
917
947
  <div class="pf-v6-c-description-list__text">
918
948
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
919
- <span class="pf-v6-c-button__icon pf-m-start">
920
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
949
+ <span class="pf-v6-c-button__text">
950
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
951
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
952
+ </span>
953
+ app=MyApp
921
954
  </span>
922
- app=MyApp
923
955
  </button>
924
956
  </div>
925
957
  </dd>
@@ -975,10 +1007,12 @@ Column fill will modify the default placement of description list groups to fill
975
1007
  <dd class="pf-v6-c-description-list__description">
976
1008
  <div class="pf-v6-c-description-list__text">
977
1009
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
978
- <span class="pf-v6-c-button__icon pf-m-start">
979
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1010
+ <span class="pf-v6-c-button__text">
1011
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
1012
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1013
+ </span>
1014
+ app=MyApp
980
1015
  </span>
981
- app=MyApp
982
1016
  </button>
983
1017
  </div>
984
1018
  </dd>
@@ -1034,10 +1068,12 @@ Column fill will modify the default placement of description list groups to fill
1034
1068
  <dd class="pf-v6-c-description-list__description">
1035
1069
  <div class="pf-v6-c-description-list__text">
1036
1070
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
1037
- <span class="pf-v6-c-button__icon pf-m-start">
1038
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1071
+ <span class="pf-v6-c-button__text">
1072
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
1073
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1074
+ </span>
1075
+ app=MyApp
1039
1076
  </span>
1040
- app=MyApp
1041
1077
  </button>
1042
1078
  </div>
1043
1079
  </dd>
@@ -1093,10 +1129,12 @@ Column fill will modify the default placement of description list groups to fill
1093
1129
  <dd class="pf-v6-c-description-list__description">
1094
1130
  <div class="pf-v6-c-description-list__text">
1095
1131
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
1096
- <span class="pf-v6-c-button__icon pf-m-start">
1097
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1132
+ <span class="pf-v6-c-button__text">
1133
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
1134
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1135
+ </span>
1136
+ app=MyApp
1098
1137
  </span>
1099
- app=MyApp
1100
1138
  </button>
1101
1139
  </div>
1102
1140
  </dd>
@@ -1152,10 +1190,12 @@ Column fill will modify the default placement of description list groups to fill
1152
1190
  <dd class="pf-v6-c-description-list__description">
1153
1191
  <div class="pf-v6-c-description-list__text">
1154
1192
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
1155
- <span class="pf-v6-c-button__icon pf-m-start">
1156
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1193
+ <span class="pf-v6-c-button__text">
1194
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
1195
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1196
+ </span>
1197
+ app=MyApp
1157
1198
  </span>
1158
- app=MyApp
1159
1199
  </button>
1160
1200
  </div>
1161
1201
  </dd>
@@ -1209,10 +1249,12 @@ Column fill will modify the default placement of description list groups to fill
1209
1249
  <dd class="pf-v6-c-description-list__description">
1210
1250
  <div class="pf-v6-c-description-list__text">
1211
1251
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
1212
- <span class="pf-v6-c-button__icon pf-m-start">
1213
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1252
+ <span class="pf-v6-c-button__text">
1253
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
1254
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1255
+ </span>
1256
+ app=MyApp
1214
1257
  </span>
1215
- app=MyApp
1216
1258
  </button>
1217
1259
  </div>
1218
1260
  </dd>
@@ -1270,10 +1312,12 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1270
1312
  <dd class="pf-v6-c-description-list__description">
1271
1313
  <div class="pf-v6-c-description-list__text">
1272
1314
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
1273
- <span class="pf-v6-c-button__icon pf-m-start">
1274
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1315
+ <span class="pf-v6-c-button__text">
1316
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
1317
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1318
+ </span>
1319
+ app=MyApp
1275
1320
  </span>
1276
- app=MyApp
1277
1321
  </button>
1278
1322
  </div>
1279
1323
  </dd>
@@ -1327,10 +1371,12 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1327
1371
  <dd class="pf-v6-c-description-list__description">
1328
1372
  <div class="pf-v6-c-description-list__text">
1329
1373
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
1330
- <span class="pf-v6-c-button__icon pf-m-start">
1331
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1374
+ <span class="pf-v6-c-button__text">
1375
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
1376
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1377
+ </span>
1378
+ app=MyApp
1332
1379
  </span>
1333
- app=MyApp
1334
1380
  </button>
1335
1381
  </div>
1336
1382
  </dd>
@@ -1384,10 +1430,12 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1384
1430
  <dd class="pf-v6-c-description-list__description">
1385
1431
  <div class="pf-v6-c-description-list__text">
1386
1432
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
1387
- <span class="pf-v6-c-button__icon pf-m-start">
1388
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1433
+ <span class="pf-v6-c-button__text">
1434
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
1435
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1436
+ </span>
1437
+ app=MyApp
1389
1438
  </span>
1390
- app=MyApp
1391
1439
  </button>
1392
1440
  </div>
1393
1441
  </dd>
@@ -1535,10 +1583,12 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1535
1583
  <dd class="pf-v6-c-description-list__description">
1536
1584
  <div class="pf-v6-c-description-list__text">
1537
1585
  <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
1538
- <span class="pf-v6-c-button__icon pf-m-start">
1539
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1586
+ <span class="pf-v6-c-button__text">
1587
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
1588
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1589
+ </span>
1590
+ app=MyApp
1540
1591
  </span>
1541
- app=MyApp
1542
1592
  </button>
1543
1593
  </div>
1544
1594
  </dd>
package/docs/components/Drawer/examples/Drawer.md CHANGED
@@ -26,7 +26,9 @@ cssPrefix: pf-v6-c-drawer
26
26
  type="button"
27
27
  aria-label="Close drawer panel"
28
28
  >
29
- <i class="fas fa-times" aria-hidden="true"></i>
29
+ <span class="pf-v6-c-button__text">
30
+ <i class="fas fa-times" aria-hidden="true"></i>
31
+ </span>
30
32
  </button>
31
33
  </div>
32
34
  </div>
@@ -61,7 +63,9 @@ cssPrefix: pf-v6-c-drawer
61
63
  type="button"
62
64
  aria-label="Close drawer panel"
63
65
  >
64
- <i class="fas fa-times" aria-hidden="true"></i>
66
+ <span class="pf-v6-c-button__text">
67
+ <i class="fas fa-times" aria-hidden="true"></i>
68
+ </span>
65
69
  </button>
66
70
  </div>
67
71
  </div>
@@ -96,7 +100,9 @@ cssPrefix: pf-v6-c-drawer
96
100
  type="button"
97
101
  aria-label="Close drawer panel"
98
102
  >
99
- <i class="fas fa-times" aria-hidden="true"></i>
103
+ <span class="pf-v6-c-button__text">
104
+ <i class="fas fa-times" aria-hidden="true"></i>
105
+ </span>
100
106
  </button>
101
107
  </div>
102
108
  </div>
@@ -131,7 +137,9 @@ cssPrefix: pf-v6-c-drawer
131
137
  type="button"
132
138
  aria-label="Close drawer panel"
133
139
  >
134
- <i class="fas fa-times" aria-hidden="true"></i>
140
+ <span class="pf-v6-c-button__text">
141
+ <i class="fas fa-times" aria-hidden="true"></i>
142
+ </span>
135
143
  </button>
136
144
  </div>
137
145
  </div>
@@ -168,7 +176,9 @@ cssPrefix: pf-v6-c-drawer
168
176
  type="button"
169
177
  aria-label="Close drawer panel"
170
178
  >
171
- <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>
172
182
  </button>
173
183
  </div>
174
184
  </div>
@@ -206,7 +216,9 @@ cssPrefix: pf-v6-c-drawer
206
216
  type="button"
207
217
  aria-label="Close drawer panel"
208
218
  >
209
- <i class="fas fa-times" aria-hidden="true"></i>
219
+ <span class="pf-v6-c-button__text">
220
+ <i class="fas fa-times" aria-hidden="true"></i>
221
+ </span>
210
222
  </button>
211
223
  </div>
212
224
  </div>
@@ -241,7 +253,9 @@ cssPrefix: pf-v6-c-drawer
241
253
  type="button"
242
254
  aria-label="Close drawer panel"
243
255
  >
244
- <i class="fas fa-times" aria-hidden="true"></i>
256
+ <span class="pf-v6-c-button__text">
257
+ <i class="fas fa-times" aria-hidden="true"></i>
258
+ </span>
245
259
  </button>
246
260
  </div>
247
261
  </div>
@@ -276,7 +290,9 @@ cssPrefix: pf-v6-c-drawer
276
290
  type="button"
277
291
  aria-label="Close drawer panel"
278
292
  >
279
- <i class="fas fa-times" aria-hidden="true"></i>
293
+ <span class="pf-v6-c-button__text">
294
+ <i class="fas fa-times" aria-hidden="true"></i>
295
+ </span>
280
296
  </button>
281
297
  </div>
282
298
  </div>
@@ -311,7 +327,9 @@ cssPrefix: pf-v6-c-drawer
311
327
  type="button"
312
328
  aria-label="Close drawer panel"
313
329
  >
314
- <i class="fas fa-times" aria-hidden="true"></i>
330
+ <span class="pf-v6-c-button__text">
331
+ <i class="fas fa-times" aria-hidden="true"></i>
332
+ </span>
315
333
  </button>
316
334
  </div>
317
335
  </div>
@@ -347,7 +365,9 @@ cssPrefix: pf-v6-c-drawer
347
365
  type="button"
348
366
  aria-label="Close drawer panel"
349
367
  >
350
- <i class="fas fa-times" aria-hidden="true"></i>
368
+ <span class="pf-v6-c-button__text">
369
+ <i class="fas fa-times" aria-hidden="true"></i>
370
+ </span>
351
371
  </button>
352
372
  </div>
353
373
  </div>
@@ -383,7 +403,9 @@ cssPrefix: pf-v6-c-drawer
383
403
  type="button"
384
404
  aria-label="Close drawer panel"
385
405
  >
386
- <i class="fas fa-times" aria-hidden="true"></i>
406
+ <span class="pf-v6-c-button__text">
407
+ <i class="fas fa-times" aria-hidden="true"></i>
408
+ </span>
387
409
  </button>
388
410
  </div>
389
411
  </div>
@@ -418,7 +440,9 @@ cssPrefix: pf-v6-c-drawer
418
440
  type="button"
419
441
  aria-label="Close drawer panel"
420
442
  >
421
- <i class="fas fa-times" aria-hidden="true"></i>
443
+ <span class="pf-v6-c-button__text">
444
+ <i class="fas fa-times" aria-hidden="true"></i>
445
+ </span>
422
446
  </button>
423
447
  </div>
424
448
  </div>
@@ -456,7 +480,9 @@ cssPrefix: pf-v6-c-drawer
456
480
  type="button"
457
481
  aria-label="Close drawer panel"
458
482
  >
459
- <i class="fas fa-times" aria-hidden="true"></i>
483
+ <span class="pf-v6-c-button__text">
484
+ <i class="fas fa-times" aria-hidden="true"></i>
485
+ </span>
460
486
  </button>
461
487
  </div>
462
488
  </div>
@@ -492,7 +518,9 @@ cssPrefix: pf-v6-c-drawer
492
518
  type="button"
493
519
  aria-label="Close drawer panel"
494
520
  >
495
- <i class="fas fa-times" aria-hidden="true"></i>
521
+ <span class="pf-v6-c-button__text">
522
+ <i class="fas fa-times" aria-hidden="true"></i>
523
+ </span>
496
524
  </button>
497
525
  </div>
498
526
  </div>
@@ -536,7 +564,9 @@ cssPrefix: pf-v6-c-drawer
536
564
  type="button"
537
565
  aria-label="Close drawer panel"
538
566
  >
539
- <i class="fas fa-times" aria-hidden="true"></i>
567
+ <span class="pf-v6-c-button__text">
568
+ <i class="fas fa-times" aria-hidden="true"></i>
569
+ </span>
540
570
  </button>
541
571
  </div>
542
572
  </div>
@@ -581,7 +611,9 @@ cssPrefix: pf-v6-c-drawer
581
611
  type="button"
582
612
  aria-label="Close drawer panel"
583
613
  >
584
- <i class="fas fa-times" aria-hidden="true"></i>
614
+ <span class="pf-v6-c-button__text">
615
+ <i class="fas fa-times" aria-hidden="true"></i>
616
+ </span>
585
617
  </button>
586
618
  </div>
587
619
  </div>
@@ -629,7 +661,9 @@ cssPrefix: pf-v6-c-drawer
629
661
  type="button"
630
662
  aria-label="Close drawer panel"
631
663
  >
632
- <i class="fas fa-times" aria-hidden="true"></i>
664
+ <span class="pf-v6-c-button__text">
665
+ <i class="fas fa-times" aria-hidden="true"></i>
666
+ </span>
633
667
  </button>
634
668
  </div>
635
669
  </div>
@@ -674,7 +708,9 @@ cssPrefix: pf-v6-c-drawer
674
708
  type="button"
675
709
  aria-label="Close drawer panel"
676
710
  >
677
- <i class="fas fa-times" aria-hidden="true"></i>
711
+ <span class="pf-v6-c-button__text">
712
+ <i class="fas fa-times" aria-hidden="true"></i>
713
+ </span>
678
714
  </button>
679
715
  </div>
680
716
  </div>
@@ -710,7 +746,9 @@ cssPrefix: pf-v6-c-drawer
710
746
  type="button"
711
747
  aria-label="Close drawer panel"
712
748
  >
713
- <i class="fas fa-times" aria-hidden="true"></i>
749
+ <span class="pf-v6-c-button__text">
750
+ <i class="fas fa-times" aria-hidden="true"></i>
751
+ </span>
714
752
  </button>
715
753
  </div>
716
754
  </div>