@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/components/CalendarMonth/examples/CalendarMonth.md CHANGED
@@ -16,7 +16,9 @@ cssPrefix: pf-v6-c-calendar-month
16
16
  type="button"
17
17
  aria-label="Previous month"
18
18
  >
19
- <i class="fas fa-angle-left" aria-hidden="true"></i>
19
+ <span class="pf-v6-c-button__text">
20
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
21
+ </span>
20
22
  </button>
21
23
  </div>
22
24
  <div class="pf-v6-c-input-group">
@@ -56,7 +58,9 @@ cssPrefix: pf-v6-c-calendar-month
56
58
  type="button"
57
59
  aria-label="Next month"
58
60
  >
59
- <i class="fas fa-angle-right" aria-hidden="true"></i>
61
+ <span class="pf-v6-c-button__text">
62
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
63
+ </span>
60
64
  </button>
61
65
  </div>
62
66
  </div>
@@ -366,7 +370,9 @@ cssPrefix: pf-v6-c-calendar-month
366
370
  type="button"
367
371
  aria-label="Previous month"
368
372
  >
369
- <i class="fas fa-angle-left" aria-hidden="true"></i>
373
+ <span class="pf-v6-c-button__text">
374
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
375
+ </span>
370
376
  </button>
371
377
  </div>
372
378
  <div class="pf-v6-c-input-group">
@@ -406,7 +412,9 @@ cssPrefix: pf-v6-c-calendar-month
406
412
  type="button"
407
413
  aria-label="Next month"
408
414
  >
409
- <i class="fas fa-angle-right" aria-hidden="true"></i>
415
+ <span class="pf-v6-c-button__text">
416
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
417
+ </span>
410
418
  </button>
411
419
  </div>
412
420
  </div>
@@ -741,7 +749,9 @@ cssPrefix: pf-v6-c-calendar-month
741
749
  type="button"
742
750
  aria-label="Previous month"
743
751
  >
744
- <i class="fas fa-angle-left" aria-hidden="true"></i>
752
+ <span class="pf-v6-c-button__text">
753
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
754
+ </span>
745
755
  </button>
746
756
  </div>
747
757
  <div class="pf-v6-c-input-group">
@@ -781,7 +791,9 @@ cssPrefix: pf-v6-c-calendar-month
781
791
  type="button"
782
792
  aria-label="Next month"
783
793
  >
784
- <i class="fas fa-angle-right" aria-hidden="true"></i>
794
+ <span class="pf-v6-c-button__text">
795
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
796
+ </span>
785
797
  </button>
786
798
  </div>
787
799
  </div>
@@ -1116,7 +1128,9 @@ cssPrefix: pf-v6-c-calendar-month
1116
1128
  type="button"
1117
1129
  aria-label="Previous month"
1118
1130
  >
1119
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1131
+ <span class="pf-v6-c-button__text">
1132
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1133
+ </span>
1120
1134
  </button>
1121
1135
  </div>
1122
1136
  <div class="pf-v6-c-input-group">
@@ -1156,7 +1170,9 @@ cssPrefix: pf-v6-c-calendar-month
1156
1170
  type="button"
1157
1171
  aria-label="Next month"
1158
1172
  >
1159
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1173
+ <span class="pf-v6-c-button__text">
1174
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1175
+ </span>
1160
1176
  </button>
1161
1177
  </div>
1162
1178
  </div>
package/docs/components/Card/examples/Card.md CHANGED
@@ -203,7 +203,9 @@ cssPrefix: pf-v6-c-card
203
203
  <div class="pf-v6-c-card" id="card-action-no-offset">
204
204
  <div class="pf-v6-c-card__header">
205
205
  <div class="pf-v6-c-card__actions pf-m-no-offset">
206
- <button class="pf-v6-c-button pf-m-primary" type="button">Action</button>
206
+ <button class="pf-v6-c-button pf-m-primary" type="button">
207
+ <span class="pf-v6-c-button__text">Action</span>
208
+ </button>
207
209
  </div>
208
210
  <div class="pf-v6-c-card__header-main">
209
211
  <h1
@@ -1002,7 +1004,9 @@ cssPrefix: pf-v6-c-card
1002
1004
  id="card-clickable-selectable-example-title"
1003
1005
  >
1004
1006
  <h2 class="pf-v6-c-card__title-text">
1005
- <button class="pf-v6-c-button pf-m-inline pf-m-link">Title</button>
1007
+ <button class="pf-v6-c-button pf-m-inline pf-m-link">
1008
+ <span class="pf-v6-c-button__text">Title</span>
1009
+ </button>
1006
1010
  </h2>
1007
1011
  </div>
1008
1012
  </div>
@@ -1041,9 +1045,9 @@ cssPrefix: pf-v6-c-card
1041
1045
  id="card-clickable-selectable-current-example-title"
1042
1046
  >
1043
1047
  <h2 class="pf-v6-c-card__title-text">
1044
- <button
1045
- class="pf-v6-c-button pf-m-inline pf-m-link"
1046
- >Current card (clicked)</button>
1048
+ <button class="pf-v6-c-button pf-m-inline pf-m-link">
1049
+ <span class="pf-v6-c-button__text">Current card (clicked)</span>
1050
+ </button>
1047
1051
  </h2>
1048
1052
  </div>
1049
1053
  </div>
@@ -1083,9 +1087,9 @@ cssPrefix: pf-v6-c-card
1083
1087
  id="card-clickable-selectable-example-disabled-title"
1084
1088
  >
1085
1089
  <h2 class="pf-v6-c-card__title-text">
1086
- <button
1087
- class="pf-v6-c-button pf-m-inline pf-m-link pf-m-disabled"
1088
- >Disabled card</button>
1090
+ <button class="pf-v6-c-button pf-m-inline pf-m-link pf-m-disabled">
1091
+ <span class="pf-v6-c-button__text">Disabled card</span>
1092
+ </button>
1089
1093
  </h2>
1090
1094
  </div>
1091
1095
  </div>
@@ -1126,9 +1130,9 @@ cssPrefix: pf-v6-c-card
1126
1130
  id="card-clickable-selectable-example-selected-disabled-title"
1127
1131
  >
1128
1132
  <h2 class="pf-v6-c-card__title-text">
1129
- <button
1130
- class="pf-v6-c-button pf-m-inline pf-m-link pf-m-disabled"
1131
- >Selected but disabled card</button>
1133
+ <button class="pf-v6-c-button pf-m-inline pf-m-link pf-m-disabled">
1134
+ <span class="pf-v6-c-button__text">Selected but disabled card</span>
1135
+ </button>
1132
1136
  </h2>
1133
1137
  </div>
1134
1138
  </div>
@@ -1174,7 +1178,9 @@ cssPrefix: pf-v6-c-card
1174
1178
  id="card-clickable-selectable-secondary-example-title"
1175
1179
  >
1176
1180
  <h2 class="pf-v6-c-card__title-text">
1177
- <button class="pf-v6-c-button pf-m-inline pf-m-link">Title</button>
1181
+ <button class="pf-v6-c-button pf-m-inline pf-m-link">
1182
+ <span class="pf-v6-c-button__text">Title</span>
1183
+ </button>
1178
1184
  </h2>
1179
1185
  </div>
1180
1186
  </div>
@@ -1213,9 +1219,9 @@ cssPrefix: pf-v6-c-card
1213
1219
  id="card-clickable-selectable-secondary-current-example-title"
1214
1220
  >
1215
1221
  <h2 class="pf-v6-c-card__title-text">
1216
- <button
1217
- class="pf-v6-c-button pf-m-inline pf-m-link"
1218
- >Current card (clicked)</button>
1222
+ <button class="pf-v6-c-button pf-m-inline pf-m-link">
1223
+ <span class="pf-v6-c-button__text">Current card (clicked)</span>
1224
+ </button>
1219
1225
  </h2>
1220
1226
  </div>
1221
1227
  </div>
@@ -1255,9 +1261,9 @@ cssPrefix: pf-v6-c-card
1255
1261
  id="card-clickable-selectable-secondary-example-disabled-title"
1256
1262
  >
1257
1263
  <h2 class="pf-v6-c-card__title-text">
1258
- <button
1259
- class="pf-v6-c-button pf-m-inline pf-m-link pf-m-disabled"
1260
- >Disabled card</button>
1264
+ <button class="pf-v6-c-button pf-m-inline pf-m-link pf-m-disabled">
1265
+ <span class="pf-v6-c-button__text">Disabled card</span>
1266
+ </button>
1261
1267
  </h2>
1262
1268
  </div>
1263
1269
  </div>
@@ -1298,9 +1304,9 @@ cssPrefix: pf-v6-c-card
1298
1304
  id="card-clickable-selectable-secondary-example-selected-disabled-title"
1299
1305
  >
1300
1306
  <h2 class="pf-v6-c-card__title-text">
1301
- <button
1302
- class="pf-v6-c-button pf-m-inline pf-m-link pf-m-disabled"
1303
- >Selected but disabled card</button>
1307
+ <button class="pf-v6-c-button pf-m-inline pf-m-link pf-m-disabled">
1308
+ <span class="pf-v6-c-button__text">Selected but disabled card</span>
1309
+ </button>
1304
1310
  </h2>
1305
1311
  </div>
1306
1312
  </div>
@@ -1351,8 +1357,10 @@ cssPrefix: pf-v6-c-card
1351
1357
  id="card-expandable-example-toggle"
1352
1358
  aria-labelledby="card-expandable-example-title card-expandable-example-toggle"
1353
1359
  >
1354
- <span class="pf-v6-c-card__header-toggle-icon">
1355
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1360
+ <span class="pf-v6-c-button__text">
1361
+ <span class="pf-v6-c-card__header-toggle-icon">
1362
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1363
+ </span>
1356
1364
  </span>
1357
1365
  </button>
1358
1366
  </div>
@@ -1405,8 +1413,10 @@ cssPrefix: pf-v6-c-card
1405
1413
  id="card-expandable-image-example-toggle"
1406
1414
  aria-labelledby="card-expandable-image-example-title card-expandable-image-example-toggle"
1407
1415
  >
1408
- <span class="pf-v6-c-card__header-toggle-icon">
1409
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1416
+ <span class="pf-v6-c-button__text">
1417
+ <span class="pf-v6-c-card__header-toggle-icon">
1418
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1419
+ </span>
1410
1420
  </span>
1411
1421
  </button>
1412
1422
  </div>
@@ -1458,8 +1468,10 @@ cssPrefix: pf-v6-c-card
1458
1468
  id="card-expanded-example-toggle"
1459
1469
  aria-labelledby="card-expanded-example-title card-expanded-example-toggle"
1460
1470
  >
1461
- <span class="pf-v6-c-card__header-toggle-icon">
1462
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1471
+ <span class="pf-v6-c-button__text">
1472
+ <span class="pf-v6-c-card__header-toggle-icon">
1473
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1474
+ </span>
1463
1475
  </span>
1464
1476
  </button>
1465
1477
  </div>
@@ -1588,8 +1600,10 @@ cssPrefix: pf-v6-c-card
1588
1600
  id="card-toggle-on-right-example-toggle"
1589
1601
  aria-labelledby="card-toggle-on-right-example-title card-toggle-on-right-example-toggle"
1590
1602
  >
1591
- <span class="pf-v6-c-card__header-toggle-icon">
1592
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1603
+ <span class="pf-v6-c-button__text">
1604
+ <span class="pf-v6-c-card__header-toggle-icon">
1605
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1606
+ </span>
1593
1607
  </span>
1594
1608
  </button>
1595
1609
  </div>
package/docs/components/ClipboardCopy/examples/ClipboardCopy.md CHANGED
@@ -24,7 +24,9 @@ cssPrefix: pf-v6-c-clipboard-copy
24
24
  id="basic-editable-copy-button"
25
25
  aria-labelledby="basic-editable-copy-button basic-editable-text-input"
26
26
  >
27
- <i class="fas fa-copy" aria-hidden="true"></i>
27
+ <span class="pf-v6-c-button__text">
28
+ <i class="fas fa-copy" aria-hidden="true"></i>
29
+ </span>
28
30
  </button>
29
31
  </div>
30
32
  </div>
@@ -47,7 +49,9 @@ cssPrefix: pf-v6-c-clipboard-copy
47
49
  id="basic-readonly-copy-button"
48
50
  aria-labelledby="basic-readonly-copy-button basic-readonly-text-input"
49
51
  >
50
- <i class="fas fa-copy" aria-hidden="true"></i>
52
+ <span class="pf-v6-c-button__text">
53
+ <i class="fas fa-copy" aria-hidden="true"></i>
54
+ </span>
51
55
  </button>
52
56
  </div>
53
57
  </div>
@@ -67,9 +71,11 @@ cssPrefix: pf-v6-c-clipboard-copy
67
71
  aria-labelledby="expandable-not-expanded-editable-toggle expandable-not-expanded-editable-text-input"
68
72
  aria-controls="expandable-not-expanded-editable-content"
69
73
  >
70
- <div class="pf-v6-c-clipboard-copy__toggle-icon">
71
- <i class="fas fa-angle-right" aria-hidden="true"></i>
72
- </div>
74
+ <span class="pf-v6-c-button__text">
75
+ <div class="pf-v6-c-clipboard-copy__toggle-icon">
76
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
77
+ </div>
78
+ </span>
73
79
  </button>
74
80
  <span class="pf-v6-c-form-control">
75
81
  <input
@@ -86,7 +92,9 @@ cssPrefix: pf-v6-c-clipboard-copy
86
92
  id="expandable-not-expanded-editable-copy-button"
87
93
  aria-labelledby="expandable-not-expanded-editable-copy-button expandable-not-expanded-editable-text-input"
88
94
  >
89
- <i class="fas fa-copy" aria-hidden="true"></i>
95
+ <span class="pf-v6-c-button__text">
96
+ <i class="fas fa-copy" aria-hidden="true"></i>
97
+ </span>
90
98
  </button>
91
99
  </div>
92
100
  <div
@@ -105,9 +113,11 @@ cssPrefix: pf-v6-c-clipboard-copy
105
113
  aria-labelledby="expandable-expanded-editable-toggle expandable-expanded-editable-text-input"
106
114
  aria-controls="expandable-expanded-editable-content"
107
115
  >
108
- <div class="pf-v6-c-clipboard-copy__toggle-icon">
109
- <i class="fas fa-angle-right" aria-hidden="true"></i>
110
- </div>
116
+ <span class="pf-v6-c-button__text">
117
+ <div class="pf-v6-c-clipboard-copy__toggle-icon">
118
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
119
+ </div>
120
+ </span>
111
121
  </button>
112
122
  <span class="pf-v6-c-form-control pf-m-readonly">
113
123
  <input
@@ -125,7 +135,9 @@ cssPrefix: pf-v6-c-clipboard-copy
125
135
  id="expandable-expanded-editable-copy-button"
126
136
  aria-labelledby="expandable-expanded-editable-copy-button expandable-expanded-editable-text-input"
127
137
  >
128
- <i class="fas fa-copy" aria-hidden="true"></i>
138
+ <span class="pf-v6-c-button__text">
139
+ <i class="fas fa-copy" aria-hidden="true"></i>
140
+ </span>
129
141
  </button>
130
142
  </div>
131
143
  <div
@@ -145,9 +157,11 @@ cssPrefix: pf-v6-c-clipboard-copy
145
157
  aria-labelledby="expandable-not-expanded-readonly-toggle expandable-not-expanded-readonly-text-input"
146
158
  aria-controls="expandable-not-expanded-readonly-content"
147
159
  >
148
- <div class="pf-v6-c-clipboard-copy__toggle-icon">
149
- <i class="fas fa-angle-right" aria-hidden="true"></i>
150
- </div>
160
+ <span class="pf-v6-c-button__text">
161
+ <div class="pf-v6-c-clipboard-copy__toggle-icon">
162
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
163
+ </div>
164
+ </span>
151
165
  </button>
152
166
  <span class="pf-v6-c-form-control pf-m-readonly">
153
167
  <input
@@ -165,7 +179,9 @@ cssPrefix: pf-v6-c-clipboard-copy
165
179
  id="expandable-not-expanded-readonly-copy-button"
166
180
  aria-labelledby="expandable-not-expanded-readonly-copy-button expandable-not-expanded-readonly-text-input"
167
181
  >
168
- <i class="fas fa-copy" aria-hidden="true"></i>
182
+ <span class="pf-v6-c-button__text">
183
+ <i class="fas fa-copy" aria-hidden="true"></i>
184
+ </span>
169
185
  </button>
170
186
  </div>
171
187
  <div
@@ -184,9 +200,11 @@ cssPrefix: pf-v6-c-clipboard-copy
184
200
  aria-labelledby="expandable-expanded-readonly-toggle expandable-expanded-readonly-text-input"
185
201
  aria-controls="expandable-expanded-readonly-content"
186
202
  >
187
- <div class="pf-v6-c-clipboard-copy__toggle-icon">
188
- <i class="fas fa-angle-right" aria-hidden="true"></i>
189
- </div>
203
+ <span class="pf-v6-c-button__text">
204
+ <div class="pf-v6-c-clipboard-copy__toggle-icon">
205
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
206
+ </div>
207
+ </span>
190
208
  </button>
191
209
  <span class="pf-v6-c-form-control pf-m-readonly">
192
210
  <input
@@ -204,7 +222,9 @@ cssPrefix: pf-v6-c-clipboard-copy
204
222
  id="expandable-expanded-readonly-copy-button"
205
223
  aria-labelledby="expandable-expanded-readonly-copy-button expandable-expanded-readonly-text-input"
206
224
  >
207
- <i class="fas fa-copy" aria-hidden="true"></i>
225
+ <span class="pf-v6-c-button__text">
226
+ <i class="fas fa-copy" aria-hidden="true"></i>
227
+ </span>
208
228
  </button>
209
229
  </div>
210
230
  <div
@@ -223,9 +243,11 @@ cssPrefix: pf-v6-c-clipboard-copy
223
243
  aria-labelledby="expandable-not-expanded-code-toggle expandable-not-expanded-code-text-input"
224
244
  aria-controls="expandable-not-expanded-code-content"
225
245
  >
226
- <div class="pf-v6-c-clipboard-copy__toggle-icon">
227
- <i class="fas fa-angle-right" aria-hidden="true"></i>
228
- </div>
246
+ <span class="pf-v6-c-button__text">
247
+ <div class="pf-v6-c-clipboard-copy__toggle-icon">
248
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
249
+ </div>
250
+ </span>
229
251
  </button>
230
252
  <span class="pf-v6-c-form-control">
231
253
  <input
@@ -243,7 +265,9 @@ cssPrefix: pf-v6-c-clipboard-copy
243
265
  id="expandable-not-expanded-code-copy-button"
244
266
  aria-labelledby="expandable-not-expanded-code-copy-button expandable-not-expanded-code-text-input"
245
267
  >
246
- <i class="fas fa-copy" aria-hidden="true"></i>
268
+ <span class="pf-v6-c-button__text">
269
+ <i class="fas fa-copy" aria-hidden="true"></i>
270
+ </span>
247
271
  </button>
248
272
  </div>
249
273
  <div
@@ -275,9 +299,11 @@ cssPrefix: pf-v6-c-clipboard-copy
275
299
  aria-labelledby="expandable-expanded-code-toggle expandable-expanded-code-text-input"
276
300
  aria-controls="expandable-expanded-code-content"
277
301
  >
278
- <div class="pf-v6-c-clipboard-copy__toggle-icon">
279
- <i class="fas fa-angle-right" aria-hidden="true"></i>
280
- </div>
302
+ <span class="pf-v6-c-button__text">
303
+ <div class="pf-v6-c-clipboard-copy__toggle-icon">
304
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
305
+ </div>
306
+ </span>
281
307
  </button>
282
308
  <span class="pf-v6-c-form-control pf-m-readonly">
283
309
  <input
@@ -296,7 +322,9 @@ cssPrefix: pf-v6-c-clipboard-copy
296
322
  id="expandable-expanded-code-copy-button"
297
323
  aria-labelledby="expandable-expanded-code-copy-button expandable-expanded-code-text-input"
298
324
  >
299
- <i class="fas fa-copy" aria-hidden="true"></i>
325
+ <span class="pf-v6-c-button__text">
326
+ <i class="fas fa-copy" aria-hidden="true"></i>
327
+ </span>
300
328
  </button>
301
329
  </div>
302
330
  <div
@@ -333,7 +361,9 @@ cssPrefix: pf-v6-c-clipboard-copy
333
361
  type="button"
334
362
  aria-label="Copy to clipboard"
335
363
  >
336
- <i class="fas fa-copy" aria-hidden="true"></i>
364
+ <span class="pf-v6-c-button__text">
365
+ <i class="fas fa-copy" aria-hidden="true"></i>
366
+ </span>
337
367
  </button>
338
368
  </span>
339
369
  </span>
@@ -353,7 +383,9 @@ cssPrefix: pf-v6-c-clipboard-copy
353
383
  type="button"
354
384
  aria-label="Copy to clipboard"
355
385
  >
356
- <i class="fas fa-copy" aria-hidden="true"></i>
386
+ <span class="pf-v6-c-button__text">
387
+ <i class="fas fa-copy" aria-hidden="true"></i>
388
+ </span>
357
389
  </button>
358
390
  </span>
359
391
  </span>
@@ -373,7 +405,9 @@ cssPrefix: pf-v6-c-clipboard-copy
373
405
  type="button"
374
406
  aria-label="Copy to clipboard"
375
407
  >
376
- <i class="fas fa-copy" aria-hidden="true"></i>
408
+ <span class="pf-v6-c-button__text">
409
+ <i class="fas fa-copy" aria-hidden="true"></i>
410
+ </span>
377
411
  </button>
378
412
  </span>
379
413
  <span class="pf-v6-c-clipboard-copy__actions-item">
@@ -382,7 +416,9 @@ cssPrefix: pf-v6-c-clipboard-copy
382
416
  type="button"
383
417
  aria-label="Run in web terminal"
384
418
  >
385
- <i class="fas fa-play" aria-hidden="true"></i>
419
+ <span class="pf-v6-c-button__text">
420
+ <i class="fas fa-play" aria-hidden="true"></i>
421
+ </span>
386
422
  </button>
387
423
  </span>
388
424
  </span>
@@ -405,7 +441,9 @@ cssPrefix: pf-v6-c-clipboard-copy
405
441
  type="button"
406
442
  aria-label="Copy to clipboard"
407
443
  >
408
- <i class="fas fa-copy" aria-hidden="true"></i>
444
+ <span class="pf-v6-c-button__text">
445
+ <i class="fas fa-copy" aria-hidden="true"></i>
446
+ </span>
409
447
  </button>
410
448
  </span>
411
449
  </span>
@@ -428,7 +466,9 @@ cssPrefix: pf-v6-c-clipboard-copy
428
466
  type="button"
429
467
  aria-label="Copy to clipboard"
430
468
  >
431
- <i class="fas fa-copy" aria-hidden="true"></i>
469
+ <span class="pf-v6-c-button__text">
470
+ <i class="fas fa-copy" aria-hidden="true"></i>
471
+ </span>
432
472
  </button>
433
473
  </span>
434
474
  </span>
@@ -450,7 +490,9 @@ cssPrefix: pf-v6-c-clipboard-copy
450
490
  type="button"
451
491
  aria-label="Copy to clipboard"
452
492
  >
453
- <i class="fas fa-copy" aria-hidden="true"></i>
493
+ <span class="pf-v6-c-button__text">
494
+ <i class="fas fa-copy" aria-hidden="true"></i>
495
+ </span>
454
496
  </button>
455
497
  </span>
456
498
  </span>
package/docs/components/CodeBlock/examples/CodeBlock.md CHANGED
@@ -16,7 +16,9 @@ cssPrefix: pf-v6-c-code-block
16
16
  type="button"
17
17
  aria-label="Copy to clipboard"
18
18
  >
19
- <i class="fas fa-copy" aria-hidden="true"></i>
19
+ <span class="pf-v6-c-button__text">
20
+ <i class="fas fa-copy" aria-hidden="true"></i>
21
+ </span>
20
22
  </button>
21
23
  </div>
22
24
  <div class="pf-v6-c-code-block__actions-item">
@@ -25,7 +27,9 @@ cssPrefix: pf-v6-c-code-block
25
27
  type="button"
26
28
  aria-label="Run in Web Terminal"
27
29
  >
28
- <i class="fas fa-play" aria-hidden="true"></i>
30
+ <span class="pf-v6-c-button__text">
31
+ <i class="fas fa-play" aria-hidden="true"></i>
32
+ </span>
29
33
  </button>
30
34
  </div>
31
35
  </div>
@@ -56,7 +60,9 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
56
60
  type="button"
57
61
  aria-label="Copy to clipboard"
58
62
  >
59
- <i class="fas fa-copy" aria-hidden="true"></i>
63
+ <span class="pf-v6-c-button__text">
64
+ <i class="fas fa-copy" aria-hidden="true"></i>
65
+ </span>
60
66
  </button>
61
67
  </div>
62
68
  <div class="pf-v6-c-code-block__actions-item">
@@ -65,7 +71,9 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
65
71
  type="button"
66
72
  aria-label="Run in Web Terminal"
67
73
  >
68
- <i class="fas fa-play" aria-hidden="true"></i>
74
+ <span class="pf-v6-c-button__text">
75
+ <i class="fas fa-play" aria-hidden="true"></i>
76
+ </span>
69
77
  </button>
70
78
  </div>
71
79
  </div>
@@ -117,7 +125,9 @@ name: azure-sample-repo<div
117
125
  type="button"
118
126
  aria-label="Copy to clipboard"
119
127
  >
120
- <i class="fas fa-copy" aria-hidden="true"></i>
128
+ <span class="pf-v6-c-button__text">
129
+ <i class="fas fa-copy" aria-hidden="true"></i>
130
+ </span>
121
131
  </button>
122
132
  </div>
123
133
  <div class="pf-v6-c-code-block__actions-item">
@@ -126,7 +136,9 @@ name: azure-sample-repo<div
126
136
  type="button"
127
137
  aria-label="Run in Web Terminal"
128
138
  >
129
- <i class="fas fa-play" aria-hidden="true"></i>
139
+ <span class="pf-v6-c-button__text">
140
+ <i class="fas fa-play" aria-hidden="true"></i>
141
+ </span>
130
142
  </button>
131
143
  </div>
132
144
  </div>