@patternfly/patternfly 6.5.0-prerelease.43 → 6.5.0-prerelease.44

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 (65) hide show
  1. package/components/Button/button.css +75 -2
  2. package/components/Button/button.scss +84 -3
  3. package/components/_index.css +75 -2
  4. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  5. package/docs/components/ActionList/examples/ActionList.md +143 -11
  6. package/docs/components/Alert/examples/Alert.md +182 -14
  7. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  8. package/docs/components/Button/examples/Button.md +2017 -157
  9. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  10. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +208 -16
  11. package/docs/components/CodeBlock/examples/CodeBlock.md +78 -6
  12. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  13. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  14. package/docs/components/DescriptionList/examples/DescriptionList.md +325 -25
  15. package/docs/components/Drawer/examples/Drawer.md +273 -21
  16. package/docs/components/DualListSelector/examples/DualListSelector.md +106 -112
  17. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  18. package/docs/components/InputGroup/examples/InputGroup.md +26 -2
  19. package/docs/components/Label/examples/Label.md +242 -218
  20. package/docs/components/Login/examples/Login.md +26 -2
  21. package/docs/components/Masthead/examples/masthead.md +13 -1
  22. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  23. package/docs/components/ModalBox/examples/ModalBox.md +195 -15
  24. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +117 -9
  25. package/docs/components/Nav/examples/Navigation.md +52 -4
  26. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +26 -2
  27. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  28. package/docs/components/Page/examples/Page.md +13 -1
  29. package/docs/components/Pagination/examples/Pagination.md +624 -48
  30. package/docs/components/Popover/examples/Popover.md +208 -16
  31. package/docs/components/Slider/examples/Slider.md +4 -4
  32. package/docs/components/Table/examples/Table.md +52 -4
  33. package/docs/components/Tabs/examples/Tabs.md +1378 -106
  34. package/docs/components/TextInputGroup/examples/TextInputGroup.md +128 -44
  35. package/docs/components/Toolbar/examples/Toolbar.md +455 -35
  36. package/docs/components/TreeView/examples/TreeView.md +52 -4
  37. package/docs/components/Wizard/examples/Wizard.md +169 -13
  38. package/docs/demos/AboutModal/examples/AboutModal.md +13 -1
  39. package/docs/demos/Alert/examples/Alert.md +39 -3
  40. package/docs/demos/BackToTop/examples/BackToTop.md +13 -1
  41. package/docs/demos/Button/examples/Button.md +13 -1
  42. package/docs/demos/Card/examples/Card.md +65 -5
  43. package/docs/demos/CardView/examples/CardView.md +78 -6
  44. package/docs/demos/Compass/examples/Compass.md +323 -29
  45. package/docs/demos/Dashboard/examples/Dashboard.md +39 -3
  46. package/docs/demos/DataList/examples/DataList.md +312 -24
  47. package/docs/demos/DescriptionList/examples/DescriptionList.md +13 -1
  48. package/docs/demos/Drawer/examples/Drawer.md +39 -3
  49. package/docs/demos/Form/examples/BasicForms.md +106 -10
  50. package/docs/demos/JumpLinks/examples/JumpLinks.md +26 -2
  51. package/docs/demos/Masthead/examples/Masthead.md +40 -4
  52. package/docs/demos/Modal/examples/Modal.md +78 -6
  53. package/docs/demos/Nav/examples/Nav.md +52 -4
  54. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  55. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  56. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +295 -55
  57. package/docs/demos/Table/examples/Table.md +1108 -145
  58. package/docs/demos/Tabs/examples/Tabs.md +53 -8
  59. package/docs/demos/Toolbar/examples/Toolbar.md +414 -36
  60. package/docs/demos/Wizard/examples/Wizard.md +130 -10
  61. package/package.json +2 -2
  62. package/patternfly-no-globals.css +75 -2
  63. package/patternfly.css +75 -2
  64. package/patternfly.min.css +1 -1
  65. package/patternfly.min.css.map +1 -1
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -89,7 +89,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
89
89
  aria-label="Clear utilities and icon with placeholder example"
90
90
  >
91
91
  <span class="pf-v6-c-button__icon">
92
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
92
+ <!-- Icon "times fa-fw" not found -->
93
93
  </span>
94
94
  </button>
95
95
  </div>
@@ -224,7 +224,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
224
224
  aria-labelledby="text-input-group-filters-label-group-label-one-button text-input-group-filters-label-group-label-one-text"
225
225
  >
226
226
  <span class="pf-v6-c-button__icon">
227
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
227
+ <!-- Icon "times fa-fw" not found -->
228
228
  </span>
229
229
  </button>
230
230
  </span>
@@ -247,7 +247,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
247
247
  aria-labelledby="text-input-group-filters-label-group-label-two-button text-input-group-filters-label-group-label-two-text"
248
248
  >
249
249
  <span class="pf-v6-c-button__icon">
250
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
250
+ <!-- Icon "times fa-fw" not found -->
251
251
  </span>
252
252
  </button>
253
253
  </span>
@@ -270,7 +270,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
270
270
  aria-labelledby="text-input-group-filters-label-group-label-three-button text-input-group-filters-label-group-label-three-text"
271
271
  >
272
272
  <span class="pf-v6-c-button__icon">
273
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
273
+ <!-- Icon "times fa-fw" not found -->
274
274
  </span>
275
275
  </button>
276
276
  </span>
@@ -293,7 +293,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
293
293
  aria-labelledby="text-input-group-filters-label-group-label-four-button text-input-group-filters-label-group-label-four-text"
294
294
  >
295
295
  <span class="pf-v6-c-button__icon">
296
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
296
+ <!-- Icon "times fa-fw" not found -->
297
297
  </span>
298
298
  </button>
299
299
  </span>
@@ -316,7 +316,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
316
316
  aria-labelledby="text-input-group-filters-label-group-label-five-button text-input-group-filters-label-group-label-five-text"
317
317
  >
318
318
  <span class="pf-v6-c-button__icon">
319
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
319
+ <!-- Icon "times fa-fw" not found -->
320
320
  </span>
321
321
  </button>
322
322
  </span>
@@ -339,7 +339,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
339
339
  aria-labelledby="text-input-group-filters-label-group-label-six-button text-input-group-filters-label-group-label-six-text"
340
340
  >
341
341
  <span class="pf-v6-c-button__icon">
342
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
342
+ <!-- Icon "times fa-fw" not found -->
343
343
  </span>
344
344
  </button>
345
345
  </span>
@@ -373,7 +373,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
373
373
  aria-label="Clear filter example"
374
374
  >
375
375
  <span class="pf-v6-c-button__icon">
376
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
376
+ <!-- Icon "times fa-fw" not found -->
377
377
  </span>
378
378
  </button>
379
379
  </div>
@@ -410,7 +410,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
410
410
  aria-labelledby="text-input-group-filters-expanded-label-group-label-one-button text-input-group-filters-expanded-label-group-label-one-text"
411
411
  >
412
412
  <span class="pf-v6-c-button__icon">
413
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
413
+ <!-- Icon "times fa-fw" not found -->
414
414
  </span>
415
415
  </button>
416
416
  </span>
@@ -433,7 +433,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
433
433
  aria-labelledby="text-input-group-filters-expanded-label-group-label-two-button text-input-group-filters-expanded-label-group-label-two-text"
434
434
  >
435
435
  <span class="pf-v6-c-button__icon">
436
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
436
+ <!-- Icon "times fa-fw" not found -->
437
437
  </span>
438
438
  </button>
439
439
  </span>
@@ -456,7 +456,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
456
456
  aria-labelledby="text-input-group-filters-expanded-label-group-label-three-button text-input-group-filters-expanded-label-group-label-three-text"
457
457
  >
458
458
  <span class="pf-v6-c-button__icon">
459
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
459
+ <!-- Icon "times fa-fw" not found -->
460
460
  </span>
461
461
  </button>
462
462
  </span>
@@ -479,7 +479,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
479
479
  aria-labelledby="text-input-group-filters-expanded-label-group-label-four-button text-input-group-filters-expanded-label-group-label-four-text"
480
480
  >
481
481
  <span class="pf-v6-c-button__icon">
482
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
482
+ <!-- Icon "times fa-fw" not found -->
483
483
  </span>
484
484
  </button>
485
485
  </span>
@@ -502,7 +502,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
502
502
  aria-labelledby="text-input-group-filters-expanded-label-group-label-five-button text-input-group-filters-expanded-label-group-label-five-text"
503
503
  >
504
504
  <span class="pf-v6-c-button__icon">
505
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
505
+ <!-- Icon "times fa-fw" not found -->
506
506
  </span>
507
507
  </button>
508
508
  </span>
@@ -525,7 +525,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
525
525
  aria-labelledby="text-input-group-filters-expanded-label-group-label-six-button text-input-group-filters-expanded-label-group-label-six-text"
526
526
  >
527
527
  <span class="pf-v6-c-button__icon">
528
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
528
+ <!-- Icon "times fa-fw" not found -->
529
529
  </span>
530
530
  </button>
531
531
  </span>
@@ -548,7 +548,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
548
548
  aria-labelledby="text-input-group-filters-expanded-label-group-label-seven-button text-input-group-filters-expanded-label-group-label-seven-text"
549
549
  >
550
550
  <span class="pf-v6-c-button__icon">
551
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
551
+ <!-- Icon "times fa-fw" not found -->
552
552
  </span>
553
553
  </button>
554
554
  </span>
@@ -571,7 +571,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
571
571
  aria-labelledby="text-input-group-filters-expanded-label-group-label-eight-button text-input-group-filters-expanded-label-group-label-eight-text"
572
572
  >
573
573
  <span class="pf-v6-c-button__icon">
574
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
574
+ <!-- Icon "times fa-fw" not found -->
575
575
  </span>
576
576
  </button>
577
577
  </span>
@@ -594,7 +594,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
594
594
  aria-labelledby="text-input-group-filters-expanded-label-group-label-nine-button text-input-group-filters-expanded-label-group-label-nine-text"
595
595
  >
596
596
  <span class="pf-v6-c-button__icon">
597
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
597
+ <!-- Icon "times fa-fw" not found -->
598
598
  </span>
599
599
  </button>
600
600
  </span>
@@ -617,7 +617,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
617
617
  aria-labelledby="text-input-group-filters-expanded-label-group-label-ten-button text-input-group-filters-expanded-label-group-label-ten-text"
618
618
  >
619
619
  <span class="pf-v6-c-button__icon">
620
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
620
+ <!-- Icon "times fa-fw" not found -->
621
621
  </span>
622
622
  </button>
623
623
  </span>
@@ -640,7 +640,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
640
640
  aria-labelledby="text-input-group-filters-expanded-label-group-label-eleven-button text-input-group-filters-expanded-label-group-label-eleven-text"
641
641
  >
642
642
  <span class="pf-v6-c-button__icon">
643
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
643
+ <!-- Icon "times fa-fw" not found -->
644
644
  </span>
645
645
  </button>
646
646
  </span>
@@ -663,7 +663,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
663
663
  aria-labelledby="text-input-group-filters-expanded-label-group-label-twelve-button text-input-group-filters-expanded-label-group-label-twelve-text"
664
664
  >
665
665
  <span class="pf-v6-c-button__icon">
666
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
666
+ <!-- Icon "times fa-fw" not found -->
667
667
  </span>
668
668
  </button>
669
669
  </span>
@@ -686,7 +686,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
686
686
  aria-labelledby="text-input-group-filters-expanded-label-group-label-thirteen-button text-input-group-filters-expanded-label-group-label-thirteen-text"
687
687
  >
688
688
  <span class="pf-v6-c-button__icon">
689
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
689
+ <!-- Icon "times fa-fw" not found -->
690
690
  </span>
691
691
  </button>
692
692
  </span>
@@ -709,7 +709,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
709
709
  aria-labelledby="text-input-group-filters-expanded-label-group-label-fourteen-button text-input-group-filters-expanded-label-group-label-fourteen-text"
710
710
  >
711
711
  <span class="pf-v6-c-button__icon">
712
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
712
+ <!-- Icon "times fa-fw" not found -->
713
713
  </span>
714
714
  </button>
715
715
  </span>
@@ -734,7 +734,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
734
734
  aria-label="Clear filters expanded example"
735
735
  >
736
736
  <span class="pf-v6-c-button__icon">
737
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
737
+ <!-- Icon "times fa-fw" not found -->
738
738
  </span>
739
739
  </button>
740
740
  </div>
@@ -816,7 +816,7 @@ The React implementation can be found in the [search input](/components/search-i
816
816
  aria-label="Clear search input group no match"
817
817
  >
818
818
  <span class="pf-v6-c-button__icon">
819
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
819
+ <!-- Icon "times fa-fw" not found -->
820
820
  </span>
821
821
  </button>
822
822
  </div>
@@ -853,7 +853,7 @@ The React implementation can be found in the [search input](/components/search-i
853
853
  aria-label="Clear search input group match with result count"
854
854
  >
855
855
  <span class="pf-v6-c-button__icon">
856
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
856
+ <!-- Icon "times fa-fw" not found -->
857
857
  </span>
858
858
  </button>
859
859
  </div>
@@ -892,12 +892,12 @@ The React implementation can be found in the [search input](/components/search-i
892
892
  disabled
893
893
  >
894
894
  <span class="pf-v6-c-button__icon">
895
- <i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
895
+ <!-- Icon "angle-up fa-fw" not found -->
896
896
  </span>
897
897
  </button>
898
898
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Next">
899
899
  <span class="pf-v6-c-button__icon">
900
- <i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
900
+ <!-- Icon "angle-down fa-fw" not found -->
901
901
  </span>
902
902
  </button>
903
903
  </div>
@@ -907,7 +907,7 @@ The React implementation can be found in the [search input](/components/search-i
907
907
  aria-label="Clear search input group match with navigable options"
908
908
  >
909
909
  <span class="pf-v6-c-button__icon">
910
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
910
+ <!-- Icon "times fa-fw" not found -->
911
911
  </span>
912
912
  </button>
913
913
  </div>
@@ -946,7 +946,7 @@ The React implementation can be found in the [search input](/components/search-i
946
946
  aria-label="Open search input group collapsed"
947
947
  >
948
948
  <span class="pf-v6-c-button__icon">
949
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
949
+ <!-- Icon "search fa-fw" not found -->
950
950
  </span>
951
951
  </button>
952
952
  </div>
@@ -957,7 +957,7 @@ The React implementation can be found in the [search input](/components/search-i
957
957
  aria-label="Close search input group expandable"
958
958
  >
959
959
  <span class="pf-v6-c-button__icon">
960
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
960
+ <!-- Icon "times fa-fw" not found -->
961
961
  </span>
962
962
  </button>
963
963
  </div>
@@ -994,7 +994,7 @@ The React implementation can be found in the [search input](/components/search-i
994
994
  aria-label="Open search input group collapsed"
995
995
  >
996
996
  <span class="pf-v6-c-button__icon">
997
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
997
+ <!-- Icon "search fa-fw" not found -->
998
998
  </span>
999
999
  </button>
1000
1000
  </div>
@@ -1005,7 +1005,7 @@ The React implementation can be found in the [search input](/components/search-i
1005
1005
  aria-label="Close search input group expandable"
1006
1006
  >
1007
1007
  <span class="pf-v6-c-button__icon">
1008
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1008
+ <!-- Icon "times fa-fw" not found -->
1009
1009
  </span>
1010
1010
  </button>
1011
1011
  </div>
@@ -1042,7 +1042,19 @@ The React implementation can be found in the [search input](/components/search-i
1042
1042
  aria-label="Submit search input group"
1043
1043
  >
1044
1044
  <span class="pf-v6-c-button__icon">
1045
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
1045
+ <svg
1046
+ class="pf-v6-svg"
1047
+ viewBox="0 0 448 512"
1048
+ fill="currentColor"
1049
+ aria-hidden="true"
1050
+ role="img"
1051
+ width="1em"
1052
+ height="1em"
1053
+ >
1054
+ <path
1055
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
1056
+ />
1057
+ </svg>
1046
1058
  </span>
1047
1059
  </button>
1048
1060
  </div>
@@ -1076,7 +1088,7 @@ The React implementation can be found in the [search input](/components/search-i
1076
1088
  aria-label="Clear advance search input group collapsed"
1077
1089
  >
1078
1090
  <span class="pf-v6-c-button__icon">
1079
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1091
+ <!-- Icon "times fa-fw" not found -->
1080
1092
  </span>
1081
1093
  </button>
1082
1094
  </div>
@@ -1090,7 +1102,19 @@ The React implementation can be found in the [search input](/components/search-i
1090
1102
  aria-label="Advanced search collapsed"
1091
1103
  >
1092
1104
  <span class="pf-v6-c-button__icon">
1093
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1105
+ <svg
1106
+ class="pf-v6-svg"
1107
+ viewBox="0 0 320 512"
1108
+ fill="currentColor"
1109
+ aria-hidden="true"
1110
+ role="img"
1111
+ width="1em"
1112
+ height="1em"
1113
+ >
1114
+ <path
1115
+ d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
1116
+ />
1117
+ </svg>
1094
1118
  </span>
1095
1119
  </button>
1096
1120
  </div>
@@ -1101,7 +1125,19 @@ The React implementation can be found in the [search input](/components/search-i
1101
1125
  aria-label="Search advance search input group collapsed"
1102
1126
  >
1103
1127
  <span class="pf-v6-c-button__icon">
1104
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
1128
+ <svg
1129
+ class="pf-v6-svg"
1130
+ viewBox="0 0 448 512"
1131
+ fill="currentColor"
1132
+ aria-hidden="true"
1133
+ role="img"
1134
+ width="1em"
1135
+ height="1em"
1136
+ >
1137
+ <path
1138
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
1139
+ />
1140
+ </svg>
1105
1141
  </span>
1106
1142
  </button>
1107
1143
  </div>
@@ -1135,7 +1171,7 @@ The React implementation can be found in the [search input](/components/search-i
1135
1171
  aria-label="Clear advance search input group expanded"
1136
1172
  >
1137
1173
  <span class="pf-v6-c-button__icon">
1138
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1174
+ <!-- Icon "times fa-fw" not found -->
1139
1175
  </span>
1140
1176
  </button>
1141
1177
  </div>
@@ -1149,7 +1185,19 @@ The React implementation can be found in the [search input](/components/search-i
1149
1185
  aria-label="Advanced search expanded"
1150
1186
  >
1151
1187
  <span class="pf-v6-c-button__icon">
1152
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1188
+ <svg
1189
+ class="pf-v6-svg"
1190
+ viewBox="0 0 320 512"
1191
+ fill="currentColor"
1192
+ aria-hidden="true"
1193
+ role="img"
1194
+ width="1em"
1195
+ height="1em"
1196
+ >
1197
+ <path
1198
+ d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
1199
+ />
1200
+ </svg>
1153
1201
  </span>
1154
1202
  </button>
1155
1203
  </div>
@@ -1160,7 +1208,19 @@ The React implementation can be found in the [search input](/components/search-i
1160
1208
  aria-label="Search advance search input group expanded"
1161
1209
  >
1162
1210
  <span class="pf-v6-c-button__icon">
1163
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
1211
+ <svg
1212
+ class="pf-v6-svg"
1213
+ viewBox="0 0 448 512"
1214
+ fill="currentColor"
1215
+ aria-hidden="true"
1216
+ role="img"
1217
+ width="1em"
1218
+ height="1em"
1219
+ >
1220
+ <path
1221
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
1222
+ />
1223
+ </svg>
1164
1224
  </span>
1165
1225
  </button>
1166
1226
  </div>
@@ -1291,7 +1351,7 @@ The React implementation can be found in the [search input](/components/search-i
1291
1351
  aria-label="Clear autocomplete search input group"
1292
1352
  >
1293
1353
  <span class="pf-v6-c-button__icon">
1294
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1354
+ <!-- Icon "times fa-fw" not found -->
1295
1355
  </span>
1296
1356
  </button>
1297
1357
  </div>
@@ -1359,7 +1419,7 @@ The React implementation can be found in the [search input](/components/search-i
1359
1419
  aria-label="Clear autocomple search input group last option hint"
1360
1420
  >
1361
1421
  <span class="pf-v6-c-button__icon">
1362
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1422
+ <!-- Icon "times fa-fw" not found -->
1363
1423
  </span>
1364
1424
  </button>
1365
1425
  </div>
@@ -1408,7 +1468,7 @@ The React implementation can be found in the [search input](/components/search-i
1408
1468
  aria-label="Clear advance search input group expanded with autocomplete"
1409
1469
  >
1410
1470
  <span class="pf-v6-c-button__icon">
1411
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1471
+ <!-- Icon "times fa-fw" not found -->
1412
1472
  </span>
1413
1473
  </button>
1414
1474
  </div>
@@ -1422,7 +1482,19 @@ The React implementation can be found in the [search input](/components/search-i
1422
1482
  aria-label="Advanced search expanded with autocomplete"
1423
1483
  >
1424
1484
  <span class="pf-v6-c-button__icon">
1425
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1485
+ <svg
1486
+ class="pf-v6-svg"
1487
+ viewBox="0 0 320 512"
1488
+ fill="currentColor"
1489
+ aria-hidden="true"
1490
+ role="img"
1491
+ width="1em"
1492
+ height="1em"
1493
+ >
1494
+ <path
1495
+ d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
1496
+ />
1497
+ </svg>
1426
1498
  </span>
1427
1499
  </button>
1428
1500
  </div>
@@ -1433,7 +1505,19 @@ The React implementation can be found in the [search input](/components/search-i
1433
1505
  aria-label="Search advanced search input group expanded with autocomplete"
1434
1506
  >
1435
1507
  <span class="pf-v6-c-button__icon">
1436
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
1508
+ <svg
1509
+ class="pf-v6-svg"
1510
+ viewBox="0 0 448 512"
1511
+ fill="currentColor"
1512
+ aria-hidden="true"
1513
+ role="img"
1514
+ width="1em"
1515
+ height="1em"
1516
+ >
1517
+ <path
1518
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
1519
+ />
1520
+ </svg>
1437
1521
  </span>
1438
1522
  </button>
1439
1523
  </div>