@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/demos/JumpLinks/examples/JumpLinks.md CHANGED
@@ -77,20 +77,18 @@ section: components
77
77
  hidden
78
78
  >
79
79
  <div class="pf-v5-c-app-launcher__menu-search">
80
- <div class="pf-v5-c-search-input">
81
- <div class="pf-v5-c-search-input__bar">
82
- <span class="pf-v5-c-search-input__text">
83
- <span class="pf-v5-c-search-input__icon">
84
- <i
85
- class="fas fa-search fa-fw"
86
- aria-hidden="true"
87
- ></i>
80
+ <div class="pf-v5-c-text-input-group">
81
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
82
+ <span class="pf-v5-c-text-input-group__text">
83
+ <span class="pf-v5-c-text-input-group__icon">
84
+ <i class="fas fa-fw fa-search"></i>
88
85
  </span>
89
86
  <input
90
- class="pf-v5-c-search-input__text-input"
87
+ class="pf-v5-c-text-input-group__text-input"
91
88
  type="text"
92
- placeholder="Filter by name"
93
- aria-label="Filter by name"
89
+ placeholder="Filer by name"
90
+ value
91
+ aria-label="Search input"
94
92
  />
95
93
  </span>
96
94
  </div>
@@ -608,22 +606,24 @@ section: components
608
606
  </div>
609
607
  <div class="pf-v5-c-menu__search">
610
608
  <div class="pf-v5-c-menu__search-input">
611
- <div class="pf-v5-c-search-input">
612
- <div class="pf-v5-c-search-input__bar">
613
- <span class="pf-v5-c-search-input__text">
609
+ <div class="pf-v5-c-text-input-group">
610
+ <div
611
+ class="pf-v5-c-text-input-group__main pf-m-icon"
612
+ >
613
+ <span
614
+ class="pf-v5-c-text-input-group__text"
615
+ >
614
616
  <span
615
- class="pf-v5-c-search-input__icon"
617
+ class="pf-v5-c-text-input-group__icon"
616
618
  >
617
- <i
618
- class="fas fa-search fa-fw"
619
- aria-hidden="true"
620
- ></i>
619
+ <i class="fas fa-fw fa-search"></i>
621
620
  </span>
622
621
  <input
623
- class="pf-v5-c-search-input__text-input"
622
+ class="pf-v5-c-text-input-group__text-input"
624
623
  type="text"
625
624
  placeholder="Search"
626
- aria-label="Search"
625
+ value
626
+ aria-label="Search input"
627
627
  />
628
628
  </span>
629
629
  </div>
@@ -1124,20 +1124,18 @@ section: components
1124
1124
  hidden
1125
1125
  >
1126
1126
  <div class="pf-v5-c-app-launcher__menu-search">
1127
- <div class="pf-v5-c-search-input">
1128
- <div class="pf-v5-c-search-input__bar">
1129
- <span class="pf-v5-c-search-input__text">
1130
- <span class="pf-v5-c-search-input__icon">
1131
- <i
1132
- class="fas fa-search fa-fw"
1133
- aria-hidden="true"
1134
- ></i>
1127
+ <div class="pf-v5-c-text-input-group">
1128
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
1129
+ <span class="pf-v5-c-text-input-group__text">
1130
+ <span class="pf-v5-c-text-input-group__icon">
1131
+ <i class="fas fa-fw fa-search"></i>
1135
1132
  </span>
1136
1133
  <input
1137
- class="pf-v5-c-search-input__text-input"
1134
+ class="pf-v5-c-text-input-group__text-input"
1138
1135
  type="text"
1139
- placeholder="Filter by name"
1140
- aria-label="Filter by name"
1136
+ placeholder="Filer by name"
1137
+ value
1138
+ aria-label="Search input"
1141
1139
  />
1142
1140
  </span>
1143
1141
  </div>
@@ -1655,22 +1653,24 @@ section: components
1655
1653
  </div>
1656
1654
  <div class="pf-v5-c-menu__search">
1657
1655
  <div class="pf-v5-c-menu__search-input">
1658
- <div class="pf-v5-c-search-input">
1659
- <div class="pf-v5-c-search-input__bar">
1660
- <span class="pf-v5-c-search-input__text">
1656
+ <div class="pf-v5-c-text-input-group">
1657
+ <div
1658
+ class="pf-v5-c-text-input-group__main pf-m-icon"
1659
+ >
1660
+ <span
1661
+ class="pf-v5-c-text-input-group__text"
1662
+ >
1661
1663
  <span
1662
- class="pf-v5-c-search-input__icon"
1664
+ class="pf-v5-c-text-input-group__icon"
1663
1665
  >
1664
- <i
1665
- class="fas fa-search fa-fw"
1666
- aria-hidden="true"
1667
- ></i>
1666
+ <i class="fas fa-fw fa-search"></i>
1668
1667
  </span>
1669
1668
  <input
1670
- class="pf-v5-c-search-input__text-input"
1669
+ class="pf-v5-c-text-input-group__text-input"
1671
1670
  type="text"
1672
1671
  placeholder="Search"
1673
- aria-label="Search"
1672
+ value
1673
+ aria-label="Search input"
1674
1674
  />
1675
1675
  </span>
1676
1676
  </div>
@@ -2171,20 +2171,18 @@ section: components
2171
2171
  hidden
2172
2172
  >
2173
2173
  <div class="pf-v5-c-app-launcher__menu-search">
2174
- <div class="pf-v5-c-search-input">
2175
- <div class="pf-v5-c-search-input__bar">
2176
- <span class="pf-v5-c-search-input__text">
2177
- <span class="pf-v5-c-search-input__icon">
2178
- <i
2179
- class="fas fa-search fa-fw"
2180
- aria-hidden="true"
2181
- ></i>
2174
+ <div class="pf-v5-c-text-input-group">
2175
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
2176
+ <span class="pf-v5-c-text-input-group__text">
2177
+ <span class="pf-v5-c-text-input-group__icon">
2178
+ <i class="fas fa-fw fa-search"></i>
2182
2179
  </span>
2183
2180
  <input
2184
- class="pf-v5-c-search-input__text-input"
2181
+ class="pf-v5-c-text-input-group__text-input"
2185
2182
  type="text"
2186
- placeholder="Filter by name"
2187
- aria-label="Filter by name"
2183
+ placeholder="Filer by name"
2184
+ value
2185
+ aria-label="Search input"
2188
2186
  />
2189
2187
  </span>
2190
2188
  </div>
@@ -2702,22 +2700,24 @@ section: components
2702
2700
  </div>
2703
2701
  <div class="pf-v5-c-menu__search">
2704
2702
  <div class="pf-v5-c-menu__search-input">
2705
- <div class="pf-v5-c-search-input">
2706
- <div class="pf-v5-c-search-input__bar">
2707
- <span class="pf-v5-c-search-input__text">
2703
+ <div class="pf-v5-c-text-input-group">
2704
+ <div
2705
+ class="pf-v5-c-text-input-group__main pf-m-icon"
2706
+ >
2707
+ <span
2708
+ class="pf-v5-c-text-input-group__text"
2709
+ >
2708
2710
  <span
2709
- class="pf-v5-c-search-input__icon"
2711
+ class="pf-v5-c-text-input-group__icon"
2710
2712
  >
2711
- <i
2712
- class="fas fa-search fa-fw"
2713
- aria-hidden="true"
2714
- ></i>
2713
+ <i class="fas fa-fw fa-search"></i>
2715
2714
  </span>
2716
2715
  <input
2717
- class="pf-v5-c-search-input__text-input"
2716
+ class="pf-v5-c-text-input-group__text-input"
2718
2717
  type="text"
2719
2718
  placeholder="Search"
2720
- aria-label="Search"
2719
+ value
2720
+ aria-label="Search input"
2721
2721
  />
2722
2722
  </span>
2723
2723
  </div>
@@ -3215,20 +3215,18 @@ section: components
3215
3215
  hidden
3216
3216
  >
3217
3217
  <div class="pf-v5-c-app-launcher__menu-search">
3218
- <div class="pf-v5-c-search-input">
3219
- <div class="pf-v5-c-search-input__bar">
3220
- <span class="pf-v5-c-search-input__text">
3221
- <span class="pf-v5-c-search-input__icon">
3222
- <i
3223
- class="fas fa-search fa-fw"
3224
- aria-hidden="true"
3225
- ></i>
3218
+ <div class="pf-v5-c-text-input-group">
3219
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
3220
+ <span class="pf-v5-c-text-input-group__text">
3221
+ <span class="pf-v5-c-text-input-group__icon">
3222
+ <i class="fas fa-fw fa-search"></i>
3226
3223
  </span>
3227
3224
  <input
3228
- class="pf-v5-c-search-input__text-input"
3225
+ class="pf-v5-c-text-input-group__text-input"
3229
3226
  type="text"
3230
- placeholder="Filter by name"
3231
- aria-label="Filter by name"
3227
+ placeholder="Filer by name"
3228
+ value
3229
+ aria-label="Search input"
3232
3230
  />
3233
3231
  </span>
3234
3232
  </div>
@@ -3746,22 +3744,24 @@ section: components
3746
3744
  </div>
3747
3745
  <div class="pf-v5-c-menu__search">
3748
3746
  <div class="pf-v5-c-menu__search-input">
3749
- <div class="pf-v5-c-search-input">
3750
- <div class="pf-v5-c-search-input__bar">
3751
- <span class="pf-v5-c-search-input__text">
3747
+ <div class="pf-v5-c-text-input-group">
3748
+ <div
3749
+ class="pf-v5-c-text-input-group__main pf-m-icon"
3750
+ >
3751
+ <span
3752
+ class="pf-v5-c-text-input-group__text"
3753
+ >
3752
3754
  <span
3753
- class="pf-v5-c-search-input__icon"
3755
+ class="pf-v5-c-text-input-group__icon"
3754
3756
  >
3755
- <i
3756
- class="fas fa-search fa-fw"
3757
- aria-hidden="true"
3758
- ></i>
3757
+ <i class="fas fa-fw fa-search"></i>
3759
3758
  </span>
3760
3759
  <input
3761
- class="pf-v5-c-search-input__text-input"
3760
+ class="pf-v5-c-text-input-group__text-input"
3762
3761
  type="text"
3763
3762
  placeholder="Search"
3764
- aria-label="Search"
3763
+ value
3764
+ aria-label="Search input"
3765
3765
  />
3766
3766
  </span>
3767
3767
  </div>
@@ -4209,20 +4209,18 @@ section: components
4209
4209
  hidden
4210
4210
  >
4211
4211
  <div class="pf-v5-c-app-launcher__menu-search">
4212
- <div class="pf-v5-c-search-input">
4213
- <div class="pf-v5-c-search-input__bar">
4214
- <span class="pf-v5-c-search-input__text">
4215
- <span class="pf-v5-c-search-input__icon">
4216
- <i
4217
- class="fas fa-search fa-fw"
4218
- aria-hidden="true"
4219
- ></i>
4212
+ <div class="pf-v5-c-text-input-group">
4213
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
4214
+ <span class="pf-v5-c-text-input-group__text">
4215
+ <span class="pf-v5-c-text-input-group__icon">
4216
+ <i class="fas fa-fw fa-search"></i>
4220
4217
  </span>
4221
4218
  <input
4222
- class="pf-v5-c-search-input__text-input"
4219
+ class="pf-v5-c-text-input-group__text-input"
4223
4220
  type="text"
4224
- placeholder="Filter by name"
4225
- aria-label="Filter by name"
4221
+ placeholder="Filer by name"
4222
+ value
4223
+ aria-label="Search input"
4226
4224
  />
4227
4225
  </span>
4228
4226
  </div>
@@ -4740,22 +4738,24 @@ section: components
4740
4738
  </div>
4741
4739
  <div class="pf-v5-c-menu__search">
4742
4740
  <div class="pf-v5-c-menu__search-input">
4743
- <div class="pf-v5-c-search-input">
4744
- <div class="pf-v5-c-search-input__bar">
4745
- <span class="pf-v5-c-search-input__text">
4741
+ <div class="pf-v5-c-text-input-group">
4742
+ <div
4743
+ class="pf-v5-c-text-input-group__main pf-m-icon"
4744
+ >
4745
+ <span
4746
+ class="pf-v5-c-text-input-group__text"
4747
+ >
4746
4748
  <span
4747
- class="pf-v5-c-search-input__icon"
4749
+ class="pf-v5-c-text-input-group__icon"
4748
4750
  >
4749
- <i
4750
- class="fas fa-search fa-fw"
4751
- aria-hidden="true"
4752
- ></i>
4751
+ <i class="fas fa-fw fa-search"></i>
4753
4752
  </span>
4754
4753
  <input
4755
- class="pf-v5-c-search-input__text-input"
4754
+ class="pf-v5-c-text-input-group__text-input"
4756
4755
  type="text"
4757
4756
  placeholder="Search"
4758
- aria-label="Search"
4757
+ value
4758
+ aria-label="Search input"
4759
4759
  />
4760
4760
  </span>
4761
4761
  </div>
@@ -5223,20 +5223,18 @@ section: components
5223
5223
  hidden
5224
5224
  >
5225
5225
  <div class="pf-v5-c-app-launcher__menu-search">
5226
- <div class="pf-v5-c-search-input">
5227
- <div class="pf-v5-c-search-input__bar">
5228
- <span class="pf-v5-c-search-input__text">
5229
- <span class="pf-v5-c-search-input__icon">
5230
- <i
5231
- class="fas fa-search fa-fw"
5232
- aria-hidden="true"
5233
- ></i>
5226
+ <div class="pf-v5-c-text-input-group">
5227
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
5228
+ <span class="pf-v5-c-text-input-group__text">
5229
+ <span class="pf-v5-c-text-input-group__icon">
5230
+ <i class="fas fa-fw fa-search"></i>
5234
5231
  </span>
5235
5232
  <input
5236
- class="pf-v5-c-search-input__text-input"
5233
+ class="pf-v5-c-text-input-group__text-input"
5237
5234
  type="text"
5238
- placeholder="Filter by name"
5239
- aria-label="Filter by name"
5235
+ placeholder="Filer by name"
5236
+ value
5237
+ aria-label="Search input"
5240
5238
  />
5241
5239
  </span>
5242
5240
  </div>
@@ -5754,22 +5752,24 @@ section: components
5754
5752
  </div>
5755
5753
  <div class="pf-v5-c-menu__search">
5756
5754
  <div class="pf-v5-c-menu__search-input">
5757
- <div class="pf-v5-c-search-input">
5758
- <div class="pf-v5-c-search-input__bar">
5759
- <span class="pf-v5-c-search-input__text">
5755
+ <div class="pf-v5-c-text-input-group">
5756
+ <div
5757
+ class="pf-v5-c-text-input-group__main pf-m-icon"
5758
+ >
5759
+ <span
5760
+ class="pf-v5-c-text-input-group__text"
5761
+ >
5760
5762
  <span
5761
- class="pf-v5-c-search-input__icon"
5763
+ class="pf-v5-c-text-input-group__icon"
5762
5764
  >
5763
- <i
5764
- class="fas fa-search fa-fw"
5765
- aria-hidden="true"
5766
- ></i>
5765
+ <i class="fas fa-fw fa-search"></i>
5767
5766
  </span>
5768
5767
  <input
5769
- class="pf-v5-c-search-input__text-input"
5768
+ class="pf-v5-c-text-input-group__text-input"
5770
5769
  type="text"
5771
5770
  placeholder="Search"
5772
- aria-label="Search"
5771
+ value
5772
+ aria-label="Search input"
5773
5773
  />
5774
5774
  </span>
5775
5775
  </div>
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -297,17 +297,18 @@ wrapperTag: div
297
297
  </button>
298
298
  <div class="pf-v5-c-context-selector__menu" hidden>
299
299
  <div class="pf-v5-c-context-selector__menu-search">
300
- <div class="pf-v5-c-search-input">
301
- <div class="pf-v5-c-search-input__bar">
302
- <span class="pf-v5-c-search-input__text">
303
- <span class="pf-v5-c-search-input__icon">
304
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
300
+ <div class="pf-v5-c-text-input-group">
301
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
302
+ <span class="pf-v5-c-text-input-group__text">
303
+ <span class="pf-v5-c-text-input-group__icon">
304
+ <i class="fas fa-fw fa-search"></i>
305
305
  </span>
306
306
  <input
307
- class="pf-v5-c-search-input__text-input"
307
+ class="pf-v5-c-text-input-group__text-input"
308
308
  type="text"
309
309
  placeholder="Search"
310
- aria-label="Search"
310
+ value
311
+ aria-label="Search input"
311
312
  />
312
313
  </span>
313
314
  </div>
@@ -782,10 +783,10 @@ wrapperTag: div
782
783
  </span>
783
784
  <input
784
785
  class="pf-v5-c-text-input-group__text-input"
785
- type="search"
786
+ type="text"
786
787
  placeholder="Filter by name"
787
788
  value
788
- aria-label="Type to filter"
789
+ aria-label="Search input"
789
790
  />
790
791
  </span>
791
792
  </div>
@@ -1123,10 +1124,10 @@ wrapperTag: div
1123
1124
  </span>
1124
1125
  <input
1125
1126
  class="pf-v5-c-text-input-group__text-input"
1126
- type="search"
1127
+ type="text"
1127
1128
  placeholder="Filter by name"
1128
1129
  value
1129
- aria-label="Type to filter"
1130
+ aria-label="Search input"
1130
1131
  />
1131
1132
  </span>
1132
1133
  </div>
@@ -1786,20 +1787,18 @@ wrapperTag: div
1786
1787
  hidden
1787
1788
  >
1788
1789
  <div class="pf-v5-c-app-launcher__menu-search">
1789
- <div class="pf-v5-c-search-input">
1790
- <div class="pf-v5-c-search-input__bar">
1791
- <span class="pf-v5-c-search-input__text">
1792
- <span class="pf-v5-c-search-input__icon">
1793
- <i
1794
- class="fas fa-search fa-fw"
1795
- aria-hidden="true"
1796
- ></i>
1790
+ <div class="pf-v5-c-text-input-group">
1791
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
1792
+ <span class="pf-v5-c-text-input-group__text">
1793
+ <span class="pf-v5-c-text-input-group__icon">
1794
+ <i class="fas fa-fw fa-search"></i>
1797
1795
  </span>
1798
1796
  <input
1799
- class="pf-v5-c-search-input__text-input"
1797
+ class="pf-v5-c-text-input-group__text-input"
1800
1798
  type="text"
1801
- placeholder="Filter by name"
1802
- aria-label="Filter by name"
1799
+ placeholder="Filer by name"
1800
+ value
1801
+ aria-label="Search input"
1803
1802
  />
1804
1803
  </span>
1805
1804
  </div>
@@ -2317,22 +2316,24 @@ wrapperTag: div
2317
2316
  </div>
2318
2317
  <div class="pf-v5-c-menu__search">
2319
2318
  <div class="pf-v5-c-menu__search-input">
2320
- <div class="pf-v5-c-search-input">
2321
- <div class="pf-v5-c-search-input__bar">
2322
- <span class="pf-v5-c-search-input__text">
2319
+ <div class="pf-v5-c-text-input-group">
2320
+ <div
2321
+ class="pf-v5-c-text-input-group__main pf-m-icon"
2322
+ >
2323
+ <span
2324
+ class="pf-v5-c-text-input-group__text"
2325
+ >
2323
2326
  <span
2324
- class="pf-v5-c-search-input__icon"
2327
+ class="pf-v5-c-text-input-group__icon"
2325
2328
  >
2326
- <i
2327
- class="fas fa-search fa-fw"
2328
- aria-hidden="true"
2329
- ></i>
2329
+ <i class="fas fa-fw fa-search"></i>
2330
2330
  </span>
2331
2331
  <input
2332
- class="pf-v5-c-search-input__text-input"
2332
+ class="pf-v5-c-text-input-group__text-input"
2333
2333
  type="text"
2334
2334
  placeholder="Search"
2335
- aria-label="Search"
2335
+ value
2336
+ aria-label="Search input"
2336
2337
  />
2337
2338
  </span>
2338
2339
  </div>
@@ -2794,20 +2795,18 @@ wrapperTag: div
2794
2795
  hidden
2795
2796
  >
2796
2797
  <div class="pf-v5-c-app-launcher__menu-search">
2797
- <div class="pf-v5-c-search-input">
2798
- <div class="pf-v5-c-search-input__bar">
2799
- <span class="pf-v5-c-search-input__text">
2800
- <span class="pf-v5-c-search-input__icon">
2801
- <i
2802
- class="fas fa-search fa-fw"
2803
- aria-hidden="true"
2804
- ></i>
2798
+ <div class="pf-v5-c-text-input-group">
2799
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
2800
+ <span class="pf-v5-c-text-input-group__text">
2801
+ <span class="pf-v5-c-text-input-group__icon">
2802
+ <i class="fas fa-fw fa-search"></i>
2805
2803
  </span>
2806
2804
  <input
2807
- class="pf-v5-c-search-input__text-input"
2805
+ class="pf-v5-c-text-input-group__text-input"
2808
2806
  type="text"
2809
- placeholder="Filter by name"
2810
- aria-label="Filter by name"
2807
+ placeholder="Filer by name"
2808
+ value
2809
+ aria-label="Search input"
2811
2810
  />
2812
2811
  </span>
2813
2812
  </div>
@@ -3325,22 +3324,24 @@ wrapperTag: div
3325
3324
  </div>
3326
3325
  <div class="pf-v5-c-menu__search">
3327
3326
  <div class="pf-v5-c-menu__search-input">
3328
- <div class="pf-v5-c-search-input">
3329
- <div class="pf-v5-c-search-input__bar">
3330
- <span class="pf-v5-c-search-input__text">
3327
+ <div class="pf-v5-c-text-input-group">
3328
+ <div
3329
+ class="pf-v5-c-text-input-group__main pf-m-icon"
3330
+ >
3331
+ <span
3332
+ class="pf-v5-c-text-input-group__text"
3333
+ >
3331
3334
  <span
3332
- class="pf-v5-c-search-input__icon"
3335
+ class="pf-v5-c-text-input-group__icon"
3333
3336
  >
3334
- <i
3335
- class="fas fa-search fa-fw"
3336
- aria-hidden="true"
3337
- ></i>
3337
+ <i class="fas fa-fw fa-search"></i>
3338
3338
  </span>
3339
3339
  <input
3340
- class="pf-v5-c-search-input__text-input"
3340
+ class="pf-v5-c-text-input-group__text-input"
3341
3341
  type="text"
3342
3342
  placeholder="Search"
3343
- aria-label="Search"
3343
+ value
3344
+ aria-label="Search input"
3344
3345
  />
3345
3346
  </span>
3346
3347
  </div>
@@ -3873,10 +3874,10 @@ wrapperTag: div
3873
3874
  </span>
3874
3875
  <input
3875
3876
  class="pf-v5-c-text-input-group__text-input"
3876
- type="search"
3877
+ type="text"
3877
3878
  placeholder="Filter by name"
3878
3879
  value
3879
- aria-label="Type to filter"
3880
+ aria-label="Search input"
3880
3881
  />
3881
3882
  </span>
3882
3883
  </div>