@patternfly/patternfly 5.0.0-alpha.49 → 5.0.0-alpha.50

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 (72) hide show
  1. package/base/patternfly-variables.css +1 -1
  2. package/components/Breadcrumb/breadcrumb.css +1 -5
  3. package/components/Breadcrumb/breadcrumb.scss +1 -8
  4. package/components/Divider/divider.css +12 -12
  5. package/components/List/list.css +1 -1
  6. package/components/List/list.scss +1 -1
  7. package/components/LogViewer/log-viewer.css +0 -3
  8. package/components/LogViewer/log-viewer.scss +0 -4
  9. package/components/Masthead/masthead.css +12 -12
  10. package/components/MultipleFileUpload/multiple-file-upload.css +3 -3
  11. package/components/MultipleFileUpload/multiple-file-upload.scss +3 -3
  12. package/components/Pagination/pagination.css +12 -12
  13. package/components/Tabs/tabs.css +24 -24
  14. package/components/TextInputGroup/text-input-group.css +1 -5
  15. package/components/TextInputGroup/text-input-group.scss +1 -7
  16. package/components/Toolbar/toolbar.css +54 -54
  17. package/components/_all.scss +1 -2
  18. package/docs/components/AppLauncher/examples/application-launcher.md +8 -7
  19. package/docs/components/Chip/examples/Chip.md +713 -4
  20. package/docs/components/ContextSelector/examples/context-selector.md +12 -12
  21. package/docs/components/DualListSelector/examples/DualListSelector.md +32 -32
  22. package/docs/components/LogViewer/examples/LogViewer.md +40 -40
  23. package/docs/components/Menu/examples/Menu.md +20 -18
  24. package/docs/components/Select/examples/Select.md +16 -14
  25. package/docs/components/TextInputGroup/examples/TextInputGroup.css +0 -13
  26. package/docs/components/TextInputGroup/examples/TextInputGroup.md +21 -21
  27. package/docs/components/Toolbar/examples/Toolbar.md +10 -10
  28. package/docs/components/TreeView/examples/TreeView.md +8 -7
  29. package/docs/demos/AboutModal/examples/AboutModal.md +21 -21
  30. package/docs/demos/Alert/examples/Alert.md +63 -63
  31. package/docs/demos/BackToTop/examples/BackToTop.md +21 -21
  32. package/docs/demos/Banner/examples/Banner.md +42 -42
  33. package/docs/demos/CardView/examples/CardView.md +21 -21
  34. package/docs/demos/ContextSelector/examples/ContextSelector.md +95 -91
  35. package/docs/demos/Dashboard/examples/Dashboard.md +21 -21
  36. package/docs/demos/DataList/examples/DataList.md +104 -105
  37. package/docs/demos/DescriptionList/examples/DescriptionList.md +63 -63
  38. package/docs/demos/Drawer/examples/Drawer.md +105 -105
  39. package/docs/demos/JumpLinks/examples/JumpLinks.md +126 -126
  40. package/docs/demos/Masthead/examples/Masthead.md +56 -55
  41. package/docs/demos/Modal/examples/Modal.md +126 -126
  42. package/docs/demos/Nav/examples/Nav.md +168 -168
  43. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +105 -105
  44. package/docs/demos/Page/examples/Page.md +189 -189
  45. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +153 -153
  46. package/docs/demos/Skeleton/examples/Skeleton.md +21 -21
  47. package/docs/demos/Table/examples/Table.md +339 -339
  48. package/docs/demos/Tabs/examples/Tabs.md +126 -126
  49. package/docs/demos/Toolbar/examples/Toolbar.md +50 -50
  50. package/docs/demos/Wizard/examples/Wizard.md +189 -189
  51. package/docs/layouts/Flex/examples/Flex.md +319 -215
  52. package/layouts/Flex/flex.css +738 -31
  53. package/layouts/Flex/flex.scss +101 -17
  54. package/package.json +1 -1
  55. package/patternfly-base-no-globals.css +1 -1
  56. package/patternfly-base.css +1 -1
  57. package/patternfly-no-globals.css +859 -389
  58. package/patternfly.css +859 -389
  59. package/patternfly.min.css +1 -1
  60. package/patternfly.min.css.map +1 -1
  61. package/sass-utilities/component-namespaces.scss +0 -3
  62. package/sass-utilities/functions.scss +9 -5
  63. package/sass-utilities/themes/dark/scss-variables.scss +1 -4
  64. package/components/Breadcrumb/themes/dark/breadcrumb.scss +0 -7
  65. package/components/SearchInput/search-input.css +0 -199
  66. package/components/SearchInput/search-input.scss +0 -231
  67. package/components/SearchInput/themes/dark/search-input.scss +0 -16
  68. package/docs/components/ChipGroup/examples/ChipGroup.md +0 -716
  69. package/docs/components/SearchInput/examples/SearchInput.css +0 -12
  70. package/docs/components/SearchInput/examples/SearchInput.md +0 -681
  71. /package/components/{ChipGroup → Chip}/chip-group.css +0 -0
  72. /package/components/{ChipGroup → Chip}/chip-group.scss +0 -0
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -611,10 +611,10 @@ cssPrefix: pf-v5-c-text-input-group
611
611
  </span>
612
612
  <input
613
613
  class="pf-v5-c-text-input-group__text-input"
614
- type="search"
614
+ type="text"
615
615
  placeholder="Find by name"
616
616
  value
617
- aria-label="Type to filter"
617
+ aria-label="Search input"
618
618
  />
619
619
  </span>
620
620
  </div>
@@ -633,10 +633,10 @@ cssPrefix: pf-v5-c-text-input-group
633
633
  </span>
634
634
  <input
635
635
  class="pf-v5-c-text-input-group__text-input"
636
- type="search"
636
+ type="text"
637
637
  placeholder="Find by name"
638
638
  value="Joh"
639
- aria-label="Type to filter"
639
+ aria-label="Search input"
640
640
  />
641
641
  </span>
642
642
  </div>
@@ -664,10 +664,10 @@ cssPrefix: pf-v5-c-text-input-group
664
664
  </span>
665
665
  <input
666
666
  class="pf-v5-c-text-input-group__text-input"
667
- type="search"
667
+ type="text"
668
668
  placeholder="Find by name"
669
669
  value="John Doe"
670
- aria-label="Type to filter"
670
+ aria-label="Search input"
671
671
  />
672
672
  </span>
673
673
  </div>
@@ -696,10 +696,10 @@ cssPrefix: pf-v5-c-text-input-group
696
696
  </span>
697
697
  <input
698
698
  class="pf-v5-c-text-input-group__text-input"
699
- type="search"
699
+ type="text"
700
700
  placeholder="Find by name"
701
701
  value="John Doe"
702
- aria-label="Type to filter"
702
+ aria-label="Search input"
703
703
  />
704
704
  </span>
705
705
  </div>
@@ -747,10 +747,10 @@ cssPrefix: pf-v5-c-text-input-group
747
747
  </span>
748
748
  <input
749
749
  class="pf-v5-c-text-input-group__text-input"
750
- type="search"
750
+ type="text"
751
751
  placeholder="Search"
752
752
  value
753
- aria-label="Type to filter"
753
+ aria-label="Search input"
754
754
  />
755
755
  </span>
756
756
  </div>
@@ -778,10 +778,10 @@ cssPrefix: pf-v5-c-text-input-group
778
778
  </span>
779
779
  <input
780
780
  class="pf-v5-c-text-input-group__text-input"
781
- type="search"
781
+ type="text"
782
782
  placeholder="Find by name"
783
783
  value
784
- aria-label="Type to filter"
784
+ aria-label="Search input"
785
785
  />
786
786
  </span>
787
787
  </div>
@@ -813,9 +813,9 @@ cssPrefix: pf-v5-c-text-input-group
813
813
  </span>
814
814
  <input
815
815
  class="pf-v5-c-text-input-group__text-input"
816
- type="search"
816
+ type="text"
817
817
  value="username:root firstname:ned"
818
- aria-label="Type to filter"
818
+ aria-label="Search input"
819
819
  />
820
820
  </span>
821
821
  </div>
@@ -866,9 +866,9 @@ cssPrefix: pf-v5-c-text-input-group
866
866
  </span>
867
867
  <input
868
868
  class="pf-v5-c-text-input-group__text-input"
869
- type="search"
869
+ type="text"
870
870
  value="username:root firstname:ned"
871
- aria-label="Type to filter"
871
+ aria-label="Search input"
872
872
  />
873
873
  </span>
874
874
  </div>
@@ -998,9 +998,9 @@ cssPrefix: pf-v5-c-text-input-group
998
998
  </span>
999
999
  <input
1000
1000
  class="pf-v5-c-text-input-group__text-input"
1001
- type="search"
1001
+ type="text"
1002
1002
  value="app"
1003
- aria-label="Type to filter"
1003
+ aria-label="Search input"
1004
1004
  />
1005
1005
  </span>
1006
1006
  </div>
@@ -1063,7 +1063,7 @@ cssPrefix: pf-v5-c-text-input-group
1063
1063
  </span>
1064
1064
  <input
1065
1065
  class="pf-v5-c-text-input-group__text-input pf-m-hint"
1066
- type="search"
1066
+ type="text"
1067
1067
  value="appleseed"
1068
1068
  disabled
1069
1069
  aria-hidden="true"
@@ -1111,9 +1111,9 @@ cssPrefix: pf-v5-c-text-input-group
1111
1111
  </span>
1112
1112
  <input
1113
1113
  class="pf-v5-c-text-input-group__text-input"
1114
- type="search"
1114
+ type="text"
1115
1115
  value="username:root firstname:n"
1116
- aria-label="Type to filter"
1116
+ aria-label="Search input"
1117
1117
  />
1118
1118
  </span>
1119
1119
  </div>
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -544,10 +544,10 @@ In some instances, it may be necessary to adjust spacing explicitly where items
544
544
  </span>
545
545
  <input
546
546
  class="pf-v5-c-text-input-group__text-input"
547
- type="search"
547
+ type="text"
548
548
  placeholder="Filter by name"
549
549
  value
550
- aria-label="Type to filter"
550
+ aria-label="Search input"
551
551
  />
552
552
  </span>
553
553
  </div>
@@ -882,10 +882,10 @@ In some instances, it may be necessary to adjust spacing explicitly where items
882
882
  </span>
883
883
  <input
884
884
  class="pf-v5-c-text-input-group__text-input"
885
- type="search"
885
+ type="text"
886
886
  placeholder="Filter by name"
887
887
  value
888
- aria-label="Type to filter"
888
+ aria-label="Search input"
889
889
  />
890
890
  </span>
891
891
  </div>
@@ -1286,10 +1286,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1286
1286
  </span>
1287
1287
  <input
1288
1288
  class="pf-v5-c-text-input-group__text-input"
1289
- type="search"
1289
+ type="text"
1290
1290
  placeholder="Filter by name"
1291
1291
  value
1292
- aria-label="Type to filter"
1292
+ aria-label="Search input"
1293
1293
  />
1294
1294
  </span>
1295
1295
  </div>
@@ -1918,10 +1918,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1918
1918
  </span>
1919
1919
  <input
1920
1920
  class="pf-v5-c-text-input-group__text-input"
1921
- type="search"
1921
+ type="text"
1922
1922
  placeholder="Filter by name"
1923
1923
  value
1924
- aria-label="Type to filter"
1924
+ aria-label="Search input"
1925
1925
  />
1926
1926
  </span>
1927
1927
  </div>
@@ -4099,10 +4099,10 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
4099
4099
  </span>
4100
4100
  <input
4101
4101
  class="pf-v5-c-text-input-group__text-input"
4102
- type="search"
4102
+ type="text"
4103
4103
  placeholder="Filter by name"
4104
4104
  value
4105
- aria-label="Type to filter"
4105
+ aria-label="Search input"
4106
4106
  />
4107
4107
  </span>
4108
4108
  </div>
package/docs/components/TreeView/examples/TreeView.md CHANGED
@@ -284,17 +284,18 @@ cssPrefix: pf-v5-c-tree-view
284
284
  ```html
285
285
  <div class="pf-v5-c-tree-view">
286
286
  <div class="pf-v5-c-tree-view__search">
287
- <div class="pf-v5-c-search-input">
288
- <div class="pf-v5-c-search-input__bar">
289
- <span class="pf-v5-c-search-input__text">
290
- <span class="pf-v5-c-search-input__icon">
291
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
287
+ <div class="pf-v5-c-text-input-group">
288
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
289
+ <span class="pf-v5-c-text-input-group__text">
290
+ <span class="pf-v5-c-text-input-group__icon">
291
+ <i class="fas fa-fw fa-search"></i>
292
292
  </span>
293
293
  <input
294
- class="pf-v5-c-search-input__text-input"
294
+ class="pf-v5-c-text-input-group__text-input"
295
295
  type="text"
296
296
  placeholder="Search"
297
- aria-label="Search"
297
+ value
298
+ aria-label="Search input"
298
299
  />
299
300
  </span>
300
301
  </div>
package/docs/demos/AboutModal/examples/AboutModal.md CHANGED
@@ -76,20 +76,18 @@ This demo implements the about modal, including the backdrop.
76
76
  hidden
77
77
  >
78
78
  <div class="pf-v5-c-app-launcher__menu-search">
79
- <div class="pf-v5-c-search-input">
80
- <div class="pf-v5-c-search-input__bar">
81
- <span class="pf-v5-c-search-input__text">
82
- <span class="pf-v5-c-search-input__icon">
83
- <i
84
- class="fas fa-search fa-fw"
85
- aria-hidden="true"
86
- ></i>
79
+ <div class="pf-v5-c-text-input-group">
80
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
81
+ <span class="pf-v5-c-text-input-group__text">
82
+ <span class="pf-v5-c-text-input-group__icon">
83
+ <i class="fas fa-fw fa-search"></i>
87
84
  </span>
88
85
  <input
89
- class="pf-v5-c-search-input__text-input"
86
+ class="pf-v5-c-text-input-group__text-input"
90
87
  type="text"
91
- placeholder="Filter by name"
92
- aria-label="Filter by name"
88
+ placeholder="Filer by name"
89
+ value
90
+ aria-label="Search input"
93
91
  />
94
92
  </span>
95
93
  </div>
@@ -607,22 +605,24 @@ This demo implements the about modal, including the backdrop.
607
605
  </div>
608
606
  <div class="pf-v5-c-menu__search">
609
607
  <div class="pf-v5-c-menu__search-input">
610
- <div class="pf-v5-c-search-input">
611
- <div class="pf-v5-c-search-input__bar">
612
- <span class="pf-v5-c-search-input__text">
608
+ <div class="pf-v5-c-text-input-group">
609
+ <div
610
+ class="pf-v5-c-text-input-group__main pf-m-icon"
611
+ >
612
+ <span
613
+ class="pf-v5-c-text-input-group__text"
614
+ >
613
615
  <span
614
- class="pf-v5-c-search-input__icon"
616
+ class="pf-v5-c-text-input-group__icon"
615
617
  >
616
- <i
617
- class="fas fa-search fa-fw"
618
- aria-hidden="true"
619
- ></i>
618
+ <i class="fas fa-fw fa-search"></i>
620
619
  </span>
621
620
  <input
622
- class="pf-v5-c-search-input__text-input"
621
+ class="pf-v5-c-text-input-group__text-input"
623
622
  type="text"
624
623
  placeholder="Search"
625
- aria-label="Search"
624
+ value
625
+ aria-label="Search input"
626
626
  />
627
627
  </span>
628
628
  </div>
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -74,20 +74,18 @@ section: components
74
74
  hidden
75
75
  >
76
76
  <div class="pf-v5-c-app-launcher__menu-search">
77
- <div class="pf-v5-c-search-input">
78
- <div class="pf-v5-c-search-input__bar">
79
- <span class="pf-v5-c-search-input__text">
80
- <span class="pf-v5-c-search-input__icon">
81
- <i
82
- class="fas fa-search fa-fw"
83
- aria-hidden="true"
84
- ></i>
77
+ <div class="pf-v5-c-text-input-group">
78
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
79
+ <span class="pf-v5-c-text-input-group__text">
80
+ <span class="pf-v5-c-text-input-group__icon">
81
+ <i class="fas fa-fw fa-search"></i>
85
82
  </span>
86
83
  <input
87
- class="pf-v5-c-search-input__text-input"
84
+ class="pf-v5-c-text-input-group__text-input"
88
85
  type="text"
89
- placeholder="Filter by name"
90
- aria-label="Filter by name"
86
+ placeholder="Filer by name"
87
+ value
88
+ aria-label="Search input"
91
89
  />
92
90
  </span>
93
91
  </div>
@@ -605,22 +603,24 @@ section: components
605
603
  </div>
606
604
  <div class="pf-v5-c-menu__search">
607
605
  <div class="pf-v5-c-menu__search-input">
608
- <div class="pf-v5-c-search-input">
609
- <div class="pf-v5-c-search-input__bar">
610
- <span class="pf-v5-c-search-input__text">
606
+ <div class="pf-v5-c-text-input-group">
607
+ <div
608
+ class="pf-v5-c-text-input-group__main pf-m-icon"
609
+ >
610
+ <span
611
+ class="pf-v5-c-text-input-group__text"
612
+ >
611
613
  <span
612
- class="pf-v5-c-search-input__icon"
614
+ class="pf-v5-c-text-input-group__icon"
613
615
  >
614
- <i
615
- class="fas fa-search fa-fw"
616
- aria-hidden="true"
617
- ></i>
616
+ <i class="fas fa-fw fa-search"></i>
618
617
  </span>
619
618
  <input
620
- class="pf-v5-c-search-input__text-input"
619
+ class="pf-v5-c-text-input-group__text-input"
621
620
  type="text"
622
621
  placeholder="Search"
623
- aria-label="Search"
622
+ value
623
+ aria-label="Search input"
624
624
  />
625
625
  </span>
626
626
  </div>
@@ -1117,20 +1117,18 @@ section: components
1117
1117
  hidden
1118
1118
  >
1119
1119
  <div class="pf-v5-c-app-launcher__menu-search">
1120
- <div class="pf-v5-c-search-input">
1121
- <div class="pf-v5-c-search-input__bar">
1122
- <span class="pf-v5-c-search-input__text">
1123
- <span class="pf-v5-c-search-input__icon">
1124
- <i
1125
- class="fas fa-search fa-fw"
1126
- aria-hidden="true"
1127
- ></i>
1120
+ <div class="pf-v5-c-text-input-group">
1121
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
1122
+ <span class="pf-v5-c-text-input-group__text">
1123
+ <span class="pf-v5-c-text-input-group__icon">
1124
+ <i class="fas fa-fw fa-search"></i>
1128
1125
  </span>
1129
1126
  <input
1130
- class="pf-v5-c-search-input__text-input"
1127
+ class="pf-v5-c-text-input-group__text-input"
1131
1128
  type="text"
1132
- placeholder="Filter by name"
1133
- aria-label="Filter by name"
1129
+ placeholder="Filer by name"
1130
+ value
1131
+ aria-label="Search input"
1134
1132
  />
1135
1133
  </span>
1136
1134
  </div>
@@ -1648,22 +1646,24 @@ section: components
1648
1646
  </div>
1649
1647
  <div class="pf-v5-c-menu__search">
1650
1648
  <div class="pf-v5-c-menu__search-input">
1651
- <div class="pf-v5-c-search-input">
1652
- <div class="pf-v5-c-search-input__bar">
1653
- <span class="pf-v5-c-search-input__text">
1649
+ <div class="pf-v5-c-text-input-group">
1650
+ <div
1651
+ class="pf-v5-c-text-input-group__main pf-m-icon"
1652
+ >
1653
+ <span
1654
+ class="pf-v5-c-text-input-group__text"
1655
+ >
1654
1656
  <span
1655
- class="pf-v5-c-search-input__icon"
1657
+ class="pf-v5-c-text-input-group__icon"
1656
1658
  >
1657
- <i
1658
- class="fas fa-search fa-fw"
1659
- aria-hidden="true"
1660
- ></i>
1659
+ <i class="fas fa-fw fa-search"></i>
1661
1660
  </span>
1662
1661
  <input
1663
- class="pf-v5-c-search-input__text-input"
1662
+ class="pf-v5-c-text-input-group__text-input"
1664
1663
  type="text"
1665
1664
  placeholder="Search"
1666
- aria-label="Search"
1665
+ value
1666
+ aria-label="Search input"
1667
1667
  />
1668
1668
  </span>
1669
1669
  </div>
@@ -2228,20 +2228,18 @@ section: components
2228
2228
  hidden
2229
2229
  >
2230
2230
  <div class="pf-v5-c-app-launcher__menu-search">
2231
- <div class="pf-v5-c-search-input">
2232
- <div class="pf-v5-c-search-input__bar">
2233
- <span class="pf-v5-c-search-input__text">
2234
- <span class="pf-v5-c-search-input__icon">
2235
- <i
2236
- class="fas fa-search fa-fw"
2237
- aria-hidden="true"
2238
- ></i>
2231
+ <div class="pf-v5-c-text-input-group">
2232
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
2233
+ <span class="pf-v5-c-text-input-group__text">
2234
+ <span class="pf-v5-c-text-input-group__icon">
2235
+ <i class="fas fa-fw fa-search"></i>
2239
2236
  </span>
2240
2237
  <input
2241
- class="pf-v5-c-search-input__text-input"
2238
+ class="pf-v5-c-text-input-group__text-input"
2242
2239
  type="text"
2243
- placeholder="Filter by name"
2244
- aria-label="Filter by name"
2240
+ placeholder="Filer by name"
2241
+ value
2242
+ aria-label="Search input"
2245
2243
  />
2246
2244
  </span>
2247
2245
  </div>
@@ -2759,22 +2757,24 @@ section: components
2759
2757
  </div>
2760
2758
  <div class="pf-v5-c-menu__search">
2761
2759
  <div class="pf-v5-c-menu__search-input">
2762
- <div class="pf-v5-c-search-input">
2763
- <div class="pf-v5-c-search-input__bar">
2764
- <span class="pf-v5-c-search-input__text">
2760
+ <div class="pf-v5-c-text-input-group">
2761
+ <div
2762
+ class="pf-v5-c-text-input-group__main pf-m-icon"
2763
+ >
2764
+ <span
2765
+ class="pf-v5-c-text-input-group__text"
2766
+ >
2765
2767
  <span
2766
- class="pf-v5-c-search-input__icon"
2768
+ class="pf-v5-c-text-input-group__icon"
2767
2769
  >
2768
- <i
2769
- class="fas fa-search fa-fw"
2770
- aria-hidden="true"
2771
- ></i>
2770
+ <i class="fas fa-fw fa-search"></i>
2772
2771
  </span>
2773
2772
  <input
2774
- class="pf-v5-c-search-input__text-input"
2773
+ class="pf-v5-c-text-input-group__text-input"
2775
2774
  type="text"
2776
2775
  placeholder="Search"
2777
- aria-label="Search"
2776
+ value
2777
+ aria-label="Search input"
2778
2778
  />
2779
2779
  </span>
2780
2780
  </div>
package/docs/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -75,20 +75,18 @@ cssPrefix: pf-d-back-to-top
75
75
  hidden
76
76
  >
77
77
  <div class="pf-v5-c-app-launcher__menu-search">
78
- <div class="pf-v5-c-search-input">
79
- <div class="pf-v5-c-search-input__bar">
80
- <span class="pf-v5-c-search-input__text">
81
- <span class="pf-v5-c-search-input__icon">
82
- <i
83
- class="fas fa-search fa-fw"
84
- aria-hidden="true"
85
- ></i>
78
+ <div class="pf-v5-c-text-input-group">
79
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
80
+ <span class="pf-v5-c-text-input-group__text">
81
+ <span class="pf-v5-c-text-input-group__icon">
82
+ <i class="fas fa-fw fa-search"></i>
86
83
  </span>
87
84
  <input
88
- class="pf-v5-c-search-input__text-input"
85
+ class="pf-v5-c-text-input-group__text-input"
89
86
  type="text"
90
- placeholder="Filter by name"
91
- aria-label="Filter by name"
87
+ placeholder="Filer by name"
88
+ value
89
+ aria-label="Search input"
92
90
  />
93
91
  </span>
94
92
  </div>
@@ -606,22 +604,24 @@ cssPrefix: pf-d-back-to-top
606
604
  </div>
607
605
  <div class="pf-v5-c-menu__search">
608
606
  <div class="pf-v5-c-menu__search-input">
609
- <div class="pf-v5-c-search-input">
610
- <div class="pf-v5-c-search-input__bar">
611
- <span class="pf-v5-c-search-input__text">
607
+ <div class="pf-v5-c-text-input-group">
608
+ <div
609
+ class="pf-v5-c-text-input-group__main pf-m-icon"
610
+ >
611
+ <span
612
+ class="pf-v5-c-text-input-group__text"
613
+ >
612
614
  <span
613
- class="pf-v5-c-search-input__icon"
615
+ class="pf-v5-c-text-input-group__icon"
614
616
  >
615
- <i
616
- class="fas fa-search fa-fw"
617
- aria-hidden="true"
618
- ></i>
617
+ <i class="fas fa-fw fa-search"></i>
619
618
  </span>
620
619
  <input
621
- class="pf-v5-c-search-input__text-input"
620
+ class="pf-v5-c-text-input-group__text-input"
622
621
  type="text"
623
622
  placeholder="Search"
624
- aria-label="Search"
623
+ value
624
+ aria-label="Search input"
625
625
  />
626
626
  </span>
627
627
  </div>