@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/DataList/examples/DataList.md CHANGED
@@ -75,20 +75,18 @@ wrapperTag: div
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 @@ wrapperTag: div
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>
@@ -1010,17 +1010,18 @@ wrapperTag: div
1010
1010
  </button>
1011
1011
  <div class="pf-v5-c-context-selector__menu" hidden>
1012
1012
  <div class="pf-v5-c-context-selector__menu-search">
1013
- <div class="pf-v5-c-search-input">
1014
- <div class="pf-v5-c-search-input__bar">
1015
- <span class="pf-v5-c-search-input__text">
1016
- <span class="pf-v5-c-search-input__icon">
1017
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1013
+ <div class="pf-v5-c-text-input-group">
1014
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
1015
+ <span class="pf-v5-c-text-input-group__text">
1016
+ <span class="pf-v5-c-text-input-group__icon">
1017
+ <i class="fas fa-fw fa-search"></i>
1018
1018
  </span>
1019
1019
  <input
1020
- class="pf-v5-c-search-input__text-input"
1020
+ class="pf-v5-c-text-input-group__text-input"
1021
1021
  type="text"
1022
1022
  placeholder="Search"
1023
- aria-label="Search"
1023
+ value
1024
+ aria-label="Search input"
1024
1025
  />
1025
1026
  </span>
1026
1027
  </div>
@@ -1666,20 +1667,18 @@ wrapperTag: div
1666
1667
  hidden
1667
1668
  >
1668
1669
  <div class="pf-v5-c-app-launcher__menu-search">
1669
- <div class="pf-v5-c-search-input">
1670
- <div class="pf-v5-c-search-input__bar">
1671
- <span class="pf-v5-c-search-input__text">
1672
- <span class="pf-v5-c-search-input__icon">
1673
- <i
1674
- class="fas fa-search fa-fw"
1675
- aria-hidden="true"
1676
- ></i>
1670
+ <div class="pf-v5-c-text-input-group">
1671
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
1672
+ <span class="pf-v5-c-text-input-group__text">
1673
+ <span class="pf-v5-c-text-input-group__icon">
1674
+ <i class="fas fa-fw fa-search"></i>
1677
1675
  </span>
1678
1676
  <input
1679
- class="pf-v5-c-search-input__text-input"
1677
+ class="pf-v5-c-text-input-group__text-input"
1680
1678
  type="text"
1681
- placeholder="Filter by name"
1682
- aria-label="Filter by name"
1679
+ placeholder="Filer by name"
1680
+ value
1681
+ aria-label="Search input"
1683
1682
  />
1684
1683
  </span>
1685
1684
  </div>
@@ -2197,22 +2196,24 @@ wrapperTag: div
2197
2196
  </div>
2198
2197
  <div class="pf-v5-c-menu__search">
2199
2198
  <div class="pf-v5-c-menu__search-input">
2200
- <div class="pf-v5-c-search-input">
2201
- <div class="pf-v5-c-search-input__bar">
2202
- <span class="pf-v5-c-search-input__text">
2199
+ <div class="pf-v5-c-text-input-group">
2200
+ <div
2201
+ class="pf-v5-c-text-input-group__main pf-m-icon"
2202
+ >
2203
+ <span
2204
+ class="pf-v5-c-text-input-group__text"
2205
+ >
2203
2206
  <span
2204
- class="pf-v5-c-search-input__icon"
2207
+ class="pf-v5-c-text-input-group__icon"
2205
2208
  >
2206
- <i
2207
- class="fas fa-search fa-fw"
2208
- aria-hidden="true"
2209
- ></i>
2209
+ <i class="fas fa-fw fa-search"></i>
2210
2210
  </span>
2211
2211
  <input
2212
- class="pf-v5-c-search-input__text-input"
2212
+ class="pf-v5-c-text-input-group__text-input"
2213
2213
  type="text"
2214
2214
  placeholder="Search"
2215
- aria-label="Search"
2215
+ value
2216
+ aria-label="Search input"
2216
2217
  />
2217
2218
  </span>
2218
2219
  </div>
@@ -2615,20 +2616,18 @@ wrapperTag: div
2615
2616
  </button>
2616
2617
  <div class="pf-v5-c-context-selector__menu" hidden>
2617
2618
  <div class="pf-v5-c-context-selector__menu-search">
2618
- <div class="pf-v5-c-search-input">
2619
- <div class="pf-v5-c-search-input__bar">
2620
- <span class="pf-v5-c-search-input__text">
2621
- <span class="pf-v5-c-search-input__icon">
2622
- <i
2623
- class="fas fa-search fa-fw"
2624
- aria-hidden="true"
2625
- ></i>
2619
+ <div class="pf-v5-c-text-input-group">
2620
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
2621
+ <span class="pf-v5-c-text-input-group__text">
2622
+ <span class="pf-v5-c-text-input-group__icon">
2623
+ <i class="fas fa-fw fa-search"></i>
2626
2624
  </span>
2627
2625
  <input
2628
- class="pf-v5-c-search-input__text-input"
2626
+ class="pf-v5-c-text-input-group__text-input"
2629
2627
  type="text"
2630
2628
  placeholder="Search"
2631
- aria-label="Search"
2629
+ value
2630
+ aria-label="Search input"
2632
2631
  />
2633
2632
  </span>
2634
2633
  </div>
@@ -3250,20 +3249,18 @@ wrapperTag: div
3250
3249
  hidden
3251
3250
  >
3252
3251
  <div class="pf-v5-c-app-launcher__menu-search">
3253
- <div class="pf-v5-c-search-input">
3254
- <div class="pf-v5-c-search-input__bar">
3255
- <span class="pf-v5-c-search-input__text">
3256
- <span class="pf-v5-c-search-input__icon">
3257
- <i
3258
- class="fas fa-search fa-fw"
3259
- aria-hidden="true"
3260
- ></i>
3252
+ <div class="pf-v5-c-text-input-group">
3253
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
3254
+ <span class="pf-v5-c-text-input-group__text">
3255
+ <span class="pf-v5-c-text-input-group__icon">
3256
+ <i class="fas fa-fw fa-search"></i>
3261
3257
  </span>
3262
3258
  <input
3263
- class="pf-v5-c-search-input__text-input"
3259
+ class="pf-v5-c-text-input-group__text-input"
3264
3260
  type="text"
3265
- placeholder="Filter by name"
3266
- aria-label="Filter by name"
3261
+ placeholder="Filer by name"
3262
+ value
3263
+ aria-label="Search input"
3267
3264
  />
3268
3265
  </span>
3269
3266
  </div>
@@ -3781,22 +3778,24 @@ wrapperTag: div
3781
3778
  </div>
3782
3779
  <div class="pf-v5-c-menu__search">
3783
3780
  <div class="pf-v5-c-menu__search-input">
3784
- <div class="pf-v5-c-search-input">
3785
- <div class="pf-v5-c-search-input__bar">
3786
- <span class="pf-v5-c-search-input__text">
3781
+ <div class="pf-v5-c-text-input-group">
3782
+ <div
3783
+ class="pf-v5-c-text-input-group__main pf-m-icon"
3784
+ >
3785
+ <span
3786
+ class="pf-v5-c-text-input-group__text"
3787
+ >
3787
3788
  <span
3788
- class="pf-v5-c-search-input__icon"
3789
+ class="pf-v5-c-text-input-group__icon"
3789
3790
  >
3790
- <i
3791
- class="fas fa-search fa-fw"
3792
- aria-hidden="true"
3793
- ></i>
3791
+ <i class="fas fa-fw fa-search"></i>
3794
3792
  </span>
3795
3793
  <input
3796
- class="pf-v5-c-search-input__text-input"
3794
+ class="pf-v5-c-text-input-group__text-input"
3797
3795
  type="text"
3798
3796
  placeholder="Search"
3799
- aria-label="Search"
3797
+ value
3798
+ aria-label="Search input"
3800
3799
  />
3801
3800
  </span>
3802
3801
  </div>
@@ -4276,10 +4275,10 @@ wrapperTag: div
4276
4275
  </span>
4277
4276
  <input
4278
4277
  class="pf-v5-c-text-input-group__text-input"
4279
- type="search"
4278
+ type="text"
4280
4279
  placeholder="Filter by name"
4281
4280
  value
4282
- aria-label="Type to filter"
4281
+ aria-label="Search input"
4283
4282
  />
4284
4283
  </span>
4285
4284
  </div>
@@ -5472,20 +5471,18 @@ wrapperTag: div
5472
5471
  hidden
5473
5472
  >
5474
5473
  <div class="pf-v5-c-app-launcher__menu-search">
5475
- <div class="pf-v5-c-search-input">
5476
- <div class="pf-v5-c-search-input__bar">
5477
- <span class="pf-v5-c-search-input__text">
5478
- <span class="pf-v5-c-search-input__icon">
5479
- <i
5480
- class="fas fa-search fa-fw"
5481
- aria-hidden="true"
5482
- ></i>
5474
+ <div class="pf-v5-c-text-input-group">
5475
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
5476
+ <span class="pf-v5-c-text-input-group__text">
5477
+ <span class="pf-v5-c-text-input-group__icon">
5478
+ <i class="fas fa-fw fa-search"></i>
5483
5479
  </span>
5484
5480
  <input
5485
- class="pf-v5-c-search-input__text-input"
5481
+ class="pf-v5-c-text-input-group__text-input"
5486
5482
  type="text"
5487
- placeholder="Filter by name"
5488
- aria-label="Filter by name"
5483
+ placeholder="Filer by name"
5484
+ value
5485
+ aria-label="Search input"
5489
5486
  />
5490
5487
  </span>
5491
5488
  </div>
@@ -6003,22 +6000,24 @@ wrapperTag: div
6003
6000
  </div>
6004
6001
  <div class="pf-v5-c-menu__search">
6005
6002
  <div class="pf-v5-c-menu__search-input">
6006
- <div class="pf-v5-c-search-input">
6007
- <div class="pf-v5-c-search-input__bar">
6008
- <span class="pf-v5-c-search-input__text">
6003
+ <div class="pf-v5-c-text-input-group">
6004
+ <div
6005
+ class="pf-v5-c-text-input-group__main pf-m-icon"
6006
+ >
6007
+ <span
6008
+ class="pf-v5-c-text-input-group__text"
6009
+ >
6009
6010
  <span
6010
- class="pf-v5-c-search-input__icon"
6011
+ class="pf-v5-c-text-input-group__icon"
6011
6012
  >
6012
- <i
6013
- class="fas fa-search fa-fw"
6014
- aria-hidden="true"
6015
- ></i>
6013
+ <i class="fas fa-fw fa-search"></i>
6016
6014
  </span>
6017
6015
  <input
6018
- class="pf-v5-c-search-input__text-input"
6016
+ class="pf-v5-c-text-input-group__text-input"
6019
6017
  type="text"
6020
6018
  placeholder="Search"
6021
- aria-label="Search"
6019
+ value
6020
+ aria-label="Search input"
6022
6021
  />
6023
6022
  </span>
6024
6023
  </div>
@@ -6437,10 +6436,10 @@ wrapperTag: div
6437
6436
  </span>
6438
6437
  <input
6439
6438
  class="pf-v5-c-text-input-group__text-input"
6440
- type="search"
6439
+ type="text"
6441
6440
  placeholder="Filter by name"
6442
6441
  value
6443
- aria-label="Type to filter"
6442
+ aria-label="Search input"
6444
6443
  />
6445
6444
  </span>
6446
6445
  </div>
package/docs/demos/DescriptionList/examples/DescriptionList.md CHANGED
@@ -75,20 +75,18 @@ cssPrefix: pf-d-description-list
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-description-list
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>
@@ -1110,20 +1110,18 @@ cssPrefix: pf-d-description-list
1110
1110
  hidden
1111
1111
  >
1112
1112
  <div class="pf-v5-c-app-launcher__menu-search">
1113
- <div class="pf-v5-c-search-input">
1114
- <div class="pf-v5-c-search-input__bar">
1115
- <span class="pf-v5-c-search-input__text">
1116
- <span class="pf-v5-c-search-input__icon">
1117
- <i
1118
- class="fas fa-search fa-fw"
1119
- aria-hidden="true"
1120
- ></i>
1113
+ <div class="pf-v5-c-text-input-group">
1114
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
1115
+ <span class="pf-v5-c-text-input-group__text">
1116
+ <span class="pf-v5-c-text-input-group__icon">
1117
+ <i class="fas fa-fw fa-search"></i>
1121
1118
  </span>
1122
1119
  <input
1123
- class="pf-v5-c-search-input__text-input"
1120
+ class="pf-v5-c-text-input-group__text-input"
1124
1121
  type="text"
1125
- placeholder="Filter by name"
1126
- aria-label="Filter by name"
1122
+ placeholder="Filer by name"
1123
+ value
1124
+ aria-label="Search input"
1127
1125
  />
1128
1126
  </span>
1129
1127
  </div>
@@ -1641,22 +1639,24 @@ cssPrefix: pf-d-description-list
1641
1639
  </div>
1642
1640
  <div class="pf-v5-c-menu__search">
1643
1641
  <div class="pf-v5-c-menu__search-input">
1644
- <div class="pf-v5-c-search-input">
1645
- <div class="pf-v5-c-search-input__bar">
1646
- <span class="pf-v5-c-search-input__text">
1642
+ <div class="pf-v5-c-text-input-group">
1643
+ <div
1644
+ class="pf-v5-c-text-input-group__main pf-m-icon"
1645
+ >
1646
+ <span
1647
+ class="pf-v5-c-text-input-group__text"
1648
+ >
1647
1649
  <span
1648
- class="pf-v5-c-search-input__icon"
1650
+ class="pf-v5-c-text-input-group__icon"
1649
1651
  >
1650
- <i
1651
- class="fas fa-search fa-fw"
1652
- aria-hidden="true"
1653
- ></i>
1652
+ <i class="fas fa-fw fa-search"></i>
1654
1653
  </span>
1655
1654
  <input
1656
- class="pf-v5-c-search-input__text-input"
1655
+ class="pf-v5-c-text-input-group__text-input"
1657
1656
  type="text"
1658
1657
  placeholder="Search"
1659
- aria-label="Search"
1658
+ value
1659
+ aria-label="Search input"
1660
1660
  />
1661
1661
  </span>
1662
1662
  </div>
@@ -2449,20 +2449,18 @@ cssPrefix: pf-d-description-list
2449
2449
  hidden
2450
2450
  >
2451
2451
  <div class="pf-v5-c-app-launcher__menu-search">
2452
- <div class="pf-v5-c-search-input">
2453
- <div class="pf-v5-c-search-input__bar">
2454
- <span class="pf-v5-c-search-input__text">
2455
- <span class="pf-v5-c-search-input__icon">
2456
- <i
2457
- class="fas fa-search fa-fw"
2458
- aria-hidden="true"
2459
- ></i>
2452
+ <div class="pf-v5-c-text-input-group">
2453
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
2454
+ <span class="pf-v5-c-text-input-group__text">
2455
+ <span class="pf-v5-c-text-input-group__icon">
2456
+ <i class="fas fa-fw fa-search"></i>
2460
2457
  </span>
2461
2458
  <input
2462
- class="pf-v5-c-search-input__text-input"
2459
+ class="pf-v5-c-text-input-group__text-input"
2463
2460
  type="text"
2464
- placeholder="Filter by name"
2465
- aria-label="Filter by name"
2461
+ placeholder="Filer by name"
2462
+ value
2463
+ aria-label="Search input"
2466
2464
  />
2467
2465
  </span>
2468
2466
  </div>
@@ -2980,22 +2978,24 @@ cssPrefix: pf-d-description-list
2980
2978
  </div>
2981
2979
  <div class="pf-v5-c-menu__search">
2982
2980
  <div class="pf-v5-c-menu__search-input">
2983
- <div class="pf-v5-c-search-input">
2984
- <div class="pf-v5-c-search-input__bar">
2985
- <span class="pf-v5-c-search-input__text">
2981
+ <div class="pf-v5-c-text-input-group">
2982
+ <div
2983
+ class="pf-v5-c-text-input-group__main pf-m-icon"
2984
+ >
2985
+ <span
2986
+ class="pf-v5-c-text-input-group__text"
2987
+ >
2986
2988
  <span
2987
- class="pf-v5-c-search-input__icon"
2989
+ class="pf-v5-c-text-input-group__icon"
2988
2990
  >
2989
- <i
2990
- class="fas fa-search fa-fw"
2991
- aria-hidden="true"
2992
- ></i>
2991
+ <i class="fas fa-fw fa-search"></i>
2993
2992
  </span>
2994
2993
  <input
2995
- class="pf-v5-c-search-input__text-input"
2994
+ class="pf-v5-c-text-input-group__text-input"
2996
2995
  type="text"
2997
2996
  placeholder="Search"
2998
- aria-label="Search"
2997
+ value
2998
+ aria-label="Search input"
2999
2999
  />
3000
3000
  </span>
3001
3001
  </div>