@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/components/Select/deprecated/Select.md CHANGED
@@ -547,10 +547,12 @@ The single select should be used when the user is selecting an option from a lis
547
547
  aria-labelledby="select-single-typeahead-label select-single-typeahead-toggle"
548
548
  aria-label="Select"
549
549
  >
550
- <i
551
- class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
552
- aria-hidden="true"
553
- ></i>
550
+ <span class="pf-v6-c-button__text">
551
+ <i
552
+ class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
553
+ aria-hidden="true"
554
+ ></i>
555
+ </span>
554
556
  </button>
555
557
  </div>
556
558
 
@@ -622,7 +624,9 @@ The single select should be used when the user is selecting an option from a lis
622
624
  type="button"
623
625
  aria-label="Clear all"
624
626
  >
625
- <i class="fas fa-times-circle" aria-hidden="true"></i>
627
+ <span class="pf-v6-c-button__text">
628
+ <i class="fas fa-times-circle" aria-hidden="true"></i>
629
+ </span>
626
630
  </button>
627
631
  <button
628
632
  class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-button"
@@ -633,10 +637,12 @@ The single select should be used when the user is selecting an option from a lis
633
637
  aria-labelledby="select-single-typeahead-expanded-label select-single-typeahead-expanded-toggle"
634
638
  aria-label="Select"
635
639
  >
636
- <i
637
- class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
638
- aria-hidden="true"
639
- ></i>
640
+ <span class="pf-v6-c-button__text">
641
+ <i
642
+ class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
643
+ aria-hidden="true"
644
+ ></i>
645
+ </span>
640
646
  </button>
641
647
  </div>
642
648
 
@@ -701,7 +707,9 @@ The single select should be used when the user is selecting an option from a lis
701
707
  type="button"
702
708
  aria-label="Clear all"
703
709
  >
704
- <i class="fas fa-times-circle" aria-hidden="true"></i>
710
+ <span class="pf-v6-c-button__text">
711
+ <i class="fas fa-times-circle" aria-hidden="true"></i>
712
+ </span>
705
713
  </button>
706
714
  <button
707
715
  class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-button"
@@ -712,10 +720,12 @@ The single select should be used when the user is selecting an option from a lis
712
720
  aria-labelledby="select-single-typeahead-expanded-selected-label select-single-typeahead-expanded-selected-toggle"
713
721
  aria-label="Select"
714
722
  >
715
- <i
716
- class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
717
- aria-hidden="true"
718
- ></i>
723
+ <span class="pf-v6-c-button__text">
724
+ <i
725
+ class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
726
+ aria-hidden="true"
727
+ ></i>
728
+ </span>
719
729
  </button>
720
730
  </div>
721
731
 
@@ -793,10 +803,12 @@ The single select should be used when the user is selecting an option from a lis
793
803
  aria-label="Select"
794
804
  disabled
795
805
  >
796
- <i
797
- class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
798
- aria-hidden="true"
799
- ></i>
806
+ <span class="pf-v6-c-button__text">
807
+ <i
808
+ class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
809
+ aria-hidden="true"
810
+ ></i>
811
+ </span>
800
812
  </button>
801
813
  </div>
802
814
 
@@ -876,10 +888,12 @@ The single select should be used when the user is selecting an option from a lis
876
888
  aria-labelledby="select-single-typeahead-invalid-label select-single-typeahead-invalid-toggle"
877
889
  aria-label="Select"
878
890
  >
879
- <i
880
- class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
881
- aria-hidden="true"
882
- ></i>
891
+ <span class="pf-v6-c-button__text">
892
+ <i
893
+ class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
894
+ aria-hidden="true"
895
+ ></i>
896
+ </span>
883
897
  </button>
884
898
  </div>
885
899
 
@@ -982,10 +996,12 @@ The single select typeahead should be used when the user is selecting one option
982
996
  aria-labelledby="select-multi-typeahead-label select-multi-typeahead-toggle"
983
997
  aria-label="Select"
984
998
  >
985
- <i
986
- class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
987
- aria-hidden="true"
988
- ></i>
999
+ <span class="pf-v6-c-button__text">
1000
+ <i
1001
+ class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
1002
+ aria-hidden="true"
1003
+ ></i>
1004
+ </span>
989
1005
  </button>
990
1006
  </div>
991
1007
 
@@ -1053,7 +1069,9 @@ The single select typeahead should be used when the user is selecting one option
1053
1069
  aria-label="Remove"
1054
1070
  id="remove_select-multi-typeahead-expanded_label_one"
1055
1071
  >
1056
- <i class="fas fa-times" aria-hidden="true"></i>
1072
+ <span class="pf-v6-c-button__text">
1073
+ <i class="fas fa-times" aria-hidden="true"></i>
1074
+ </span>
1057
1075
  </button>
1058
1076
  </span>
1059
1077
  </span>
@@ -1076,7 +1094,9 @@ The single select typeahead should be used when the user is selecting one option
1076
1094
  aria-label="Remove"
1077
1095
  id="remove_select-multi-typeahead-expanded_label_two"
1078
1096
  >
1079
- <i class="fas fa-times" aria-hidden="true"></i>
1097
+ <span class="pf-v6-c-button__text">
1098
+ <i class="fas fa-times" aria-hidden="true"></i>
1099
+ </span>
1080
1100
  </button>
1081
1101
  </span>
1082
1102
  </span>
@@ -1099,7 +1119,9 @@ The single select typeahead should be used when the user is selecting one option
1099
1119
  aria-label="Remove"
1100
1120
  id="remove_select-multi-typeahead-expanded_label_three"
1101
1121
  >
1102
- <i class="fas fa-times" aria-hidden="true"></i>
1122
+ <span class="pf-v6-c-button__text">
1123
+ <i class="fas fa-times" aria-hidden="true"></i>
1124
+ </span>
1103
1125
  </button>
1104
1126
  </span>
1105
1127
  </span>
@@ -1122,7 +1144,9 @@ The single select typeahead should be used when the user is selecting one option
1122
1144
  aria-label="Remove"
1123
1145
  id="remove_select-multi-typeahead-expanded_label_four"
1124
1146
  >
1125
- <i class="fas fa-times" aria-hidden="true"></i>
1147
+ <span class="pf-v6-c-button__text">
1148
+ <i class="fas fa-times" aria-hidden="true"></i>
1149
+ </span>
1126
1150
  </button>
1127
1151
  </span>
1128
1152
  </span>
@@ -1145,7 +1169,9 @@ The single select typeahead should be used when the user is selecting one option
1145
1169
  aria-label="Remove"
1146
1170
  id="remove_select-multi-typeahead-expanded_label_five"
1147
1171
  >
1148
- <i class="fas fa-times" aria-hidden="true"></i>
1172
+ <span class="pf-v6-c-button__text">
1173
+ <i class="fas fa-times" aria-hidden="true"></i>
1174
+ </span>
1149
1175
  </button>
1150
1176
  </span>
1151
1177
  </span>
@@ -1169,7 +1195,9 @@ The single select typeahead should be used when the user is selecting one option
1169
1195
  type="button"
1170
1196
  aria-label="Clear all"
1171
1197
  >
1172
- <i class="fas fa-times-circle" aria-hidden="true"></i>
1198
+ <span class="pf-v6-c-button__text">
1199
+ <i class="fas fa-times-circle" aria-hidden="true"></i>
1200
+ </span>
1173
1201
  </button>
1174
1202
  <button
1175
1203
  class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-button"
@@ -1180,10 +1208,12 @@ The single select typeahead should be used when the user is selecting one option
1180
1208
  aria-labelledby="select-multi-typeahead-expanded-label select-multi-typeahead-expanded-toggle"
1181
1209
  aria-label="Select"
1182
1210
  >
1183
- <i
1184
- class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
1185
- aria-hidden="true"
1186
- ></i>
1211
+ <span class="pf-v6-c-button__text">
1212
+ <i
1213
+ class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
1214
+ aria-hidden="true"
1215
+ ></i>
1216
+ </span>
1187
1217
  </button>
1188
1218
  </div>
1189
1219
 
@@ -1250,7 +1280,9 @@ The single select typeahead should be used when the user is selecting one option
1250
1280
  aria-label="Remove"
1251
1281
  id="remove_select-multi-typeahead-expanded-selected_label_one"
1252
1282
  >
1253
- <i class="fas fa-times" aria-hidden="true"></i>
1283
+ <span class="pf-v6-c-button__text">
1284
+ <i class="fas fa-times" aria-hidden="true"></i>
1285
+ </span>
1254
1286
  </button>
1255
1287
  </span>
1256
1288
  </span>
@@ -1273,7 +1305,9 @@ The single select typeahead should be used when the user is selecting one option
1273
1305
  aria-label="Remove"
1274
1306
  id="remove_select-multi-typeahead-expanded-selected_label_two"
1275
1307
  >
1276
- <i class="fas fa-times" aria-hidden="true"></i>
1308
+ <span class="pf-v6-c-button__text">
1309
+ <i class="fas fa-times" aria-hidden="true"></i>
1310
+ </span>
1277
1311
  </button>
1278
1312
  </span>
1279
1313
  </span>
@@ -1296,7 +1330,9 @@ The single select typeahead should be used when the user is selecting one option
1296
1330
  aria-label="Remove"
1297
1331
  id="remove_select-multi-typeahead-expanded-selected_label_three"
1298
1332
  >
1299
- <i class="fas fa-times" aria-hidden="true"></i>
1333
+ <span class="pf-v6-c-button__text">
1334
+ <i class="fas fa-times" aria-hidden="true"></i>
1335
+ </span>
1300
1336
  </button>
1301
1337
  </span>
1302
1338
  </span>
@@ -1329,7 +1365,9 @@ The single select typeahead should be used when the user is selecting one option
1329
1365
  type="button"
1330
1366
  aria-label="Clear all"
1331
1367
  >
1332
- <i class="fas fa-times-circle" aria-hidden="true"></i>
1368
+ <span class="pf-v6-c-button__text">
1369
+ <i class="fas fa-times-circle" aria-hidden="true"></i>
1370
+ </span>
1333
1371
  </button>
1334
1372
  <button
1335
1373
  class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-button"
@@ -1340,10 +1378,12 @@ The single select typeahead should be used when the user is selecting one option
1340
1378
  aria-labelledby="select-multi-typeahead-expanded-selected-label select-multi-typeahead-expanded-selected-toggle"
1341
1379
  aria-label="Select"
1342
1380
  >
1343
- <i
1344
- class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
1345
- aria-hidden="true"
1346
- ></i>
1381
+ <span class="pf-v6-c-button__text">
1382
+ <i
1383
+ class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
1384
+ aria-hidden="true"
1385
+ ></i>
1386
+ </span>
1347
1387
  </button>
1348
1388
  </div>
1349
1389
 
@@ -1401,7 +1441,9 @@ The single select typeahead should be used when the user is selecting one option
1401
1441
  aria-label="Remove"
1402
1442
  id="remove_select-multi-typeahead-invalid_label_one"
1403
1443
  >
1404
- <i class="fas fa-times" aria-hidden="true"></i>
1444
+ <span class="pf-v6-c-button__text">
1445
+ <i class="fas fa-times" aria-hidden="true"></i>
1446
+ </span>
1405
1447
  </button>
1406
1448
  </span>
1407
1449
  </span>
@@ -1424,7 +1466,9 @@ The single select typeahead should be used when the user is selecting one option
1424
1466
  aria-label="Remove"
1425
1467
  id="remove_select-multi-typeahead-invalid_label_two"
1426
1468
  >
1427
- <i class="fas fa-times" aria-hidden="true"></i>
1469
+ <span class="pf-v6-c-button__text">
1470
+ <i class="fas fa-times" aria-hidden="true"></i>
1471
+ </span>
1428
1472
  </button>
1429
1473
  </span>
1430
1474
  </span>
@@ -1447,7 +1491,9 @@ The single select typeahead should be used when the user is selecting one option
1447
1491
  aria-label="Remove"
1448
1492
  id="remove_select-multi-typeahead-invalid_label_three"
1449
1493
  >
1450
- <i class="fas fa-times" aria-hidden="true"></i>
1494
+ <span class="pf-v6-c-button__text">
1495
+ <i class="fas fa-times" aria-hidden="true"></i>
1496
+ </span>
1451
1497
  </button>
1452
1498
  </span>
1453
1499
  </span>
@@ -1470,7 +1516,9 @@ The single select typeahead should be used when the user is selecting one option
1470
1516
  aria-label="Remove"
1471
1517
  id="remove_select-multi-typeahead-invalid_label_four"
1472
1518
  >
1473
- <i class="fas fa-times" aria-hidden="true"></i>
1519
+ <span class="pf-v6-c-button__text">
1520
+ <i class="fas fa-times" aria-hidden="true"></i>
1521
+ </span>
1474
1522
  </button>
1475
1523
  </span>
1476
1524
  </span>
@@ -1493,7 +1541,9 @@ The single select typeahead should be used when the user is selecting one option
1493
1541
  aria-label="Remove"
1494
1542
  id="remove_select-multi-typeahead-invalid_label_five"
1495
1543
  >
1496
- <i class="fas fa-times" aria-hidden="true"></i>
1544
+ <span class="pf-v6-c-button__text">
1545
+ <i class="fas fa-times" aria-hidden="true"></i>
1546
+ </span>
1497
1547
  </button>
1498
1548
  </span>
1499
1549
  </span>
@@ -1521,7 +1571,9 @@ The single select typeahead should be used when the user is selecting one option
1521
1571
  type="button"
1522
1572
  aria-label="Clear all"
1523
1573
  >
1524
- <i class="fas fa-times-circle" aria-hidden="true"></i>
1574
+ <span class="pf-v6-c-button__text">
1575
+ <i class="fas fa-times-circle" aria-hidden="true"></i>
1576
+ </span>
1525
1577
  </button>
1526
1578
  <button
1527
1579
  class="pf-v6-c-button pf-m-plain pf-v6-c-select__toggle-button"
@@ -1532,10 +1584,12 @@ The single select typeahead should be used when the user is selecting one option
1532
1584
  aria-labelledby="select-multi-typeahead-invalid-label select-multi-typeahead-invalid-toggle"
1533
1585
  aria-label="Select"
1534
1586
  >
1535
- <i
1536
- class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
1537
- aria-hidden="true"
1538
- ></i>
1587
+ <span class="pf-v6-c-button__text">
1588
+ <i
1589
+ class="fas fa-caret-down pf-v6-c-select__toggle-arrow"
1590
+ aria-hidden="true"
1591
+ ></i>
1592
+ </span>
1539
1593
  </button>
1540
1594
  </div>
1541
1595
 
@@ -3287,7 +3341,9 @@ The plain select variation should be used when you do not want a border applied
3287
3341
  </li>
3288
3342
  </ul>
3289
3343
  <div class="pf-v6-c-select__menu-footer">
3290
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Action</button>
3344
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
3345
+ <span class="pf-v6-c-button__text">Action</span>
3346
+ </button>
3291
3347
  </div>
3292
3348
  </div>
3293
3349
  </div>
package/docs/components/SkipToContent/examples/SkipToContent.md CHANGED
@@ -8,7 +8,9 @@ cssPrefix: pf-v6-c-skip-to-content
8
8
 
9
9
  ```html isFullscreen
10
10
  <div class="pf-v6-c-skip-to-content">
11
- <a class="pf-v6-c-button pf-m-primary" href="#main-content">Skip to content</a>
11
+ <a class="pf-v6-c-button pf-m-primary" href="#main-content">
12
+ <span class="pf-v6-c-button__text">Skip to content</span>
13
+ </a>
12
14
  </div>Press tab to skip to content at the bottom of the page.
13
15
  <div style="height:2000px"></div>
14
16
  <div class="pf-v6-c-content">
package/docs/components/Slider/examples/Slider.md CHANGED
@@ -370,7 +370,9 @@ cssPrefix: pf-v6-c-slider
370
370
  <div class="pf-v6-c-slider" style="--pf-v6-c-slider--value: 50%;">
371
371
  <div class="pf-v6-c-slider__actions">
372
372
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Minus">
373
- <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
373
+ <span class="pf-v6-c-button__text">
374
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
375
+ </span>
374
376
  </button>
375
377
  </div>
376
378
  <div class="pf-v6-c-slider__main">
@@ -389,7 +391,9 @@ cssPrefix: pf-v6-c-slider
389
391
  </div>
390
392
  <div class="pf-v6-c-slider__actions">
391
393
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Plus">
392
- <i class="fas fa-fw fa-plus" aria-hidden="true"></i>
394
+ <span class="pf-v6-c-button__text">
395
+ <i class="fas fa-fw fa-plus" aria-hidden="true"></i>
396
+ </span>
393
397
  </button>
394
398
  </div>
395
399
  </div>
@@ -431,7 +435,9 @@ cssPrefix: pf-v6-c-slider
431
435
  </div>
432
436
  <div class="pf-v6-c-slider__actions">
433
437
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Locked">
434
- <i class="fas fa-fw fa-lock" aria-hidden="true"></i>
438
+ <span class="pf-v6-c-button__text">
439
+ <i class="fas fa-fw fa-lock" aria-hidden="true"></i>
440
+ </span>
435
441
  </button>
436
442
  </div>
437
443
  </div>
@@ -468,7 +474,9 @@ cssPrefix: pf-v6-c-slider
468
474
  </div>
469
475
  <div class="pf-v6-c-slider__actions">
470
476
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Lock">
471
- <i class="fas fa-fw fa-lock-open" aria-hidden="true"></i>
477
+ <span class="pf-v6-c-button__text">
478
+ <i class="fas fa-fw fa-lock-open" aria-hidden="true"></i>
479
+ </span>
472
480
  </button>
473
481
  </div>
474
482
  </div>