@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/Tabs/examples/Tabs.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>
@@ -1299,20 +1299,18 @@ section: components
1299
1299
  hidden
1300
1300
  >
1301
1301
  <div class="pf-v5-c-app-launcher__menu-search">
1302
- <div class="pf-v5-c-search-input">
1303
- <div class="pf-v5-c-search-input__bar">
1304
- <span class="pf-v5-c-search-input__text">
1305
- <span class="pf-v5-c-search-input__icon">
1306
- <i
1307
- class="fas fa-search fa-fw"
1308
- aria-hidden="true"
1309
- ></i>
1302
+ <div class="pf-v5-c-text-input-group">
1303
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
1304
+ <span class="pf-v5-c-text-input-group__text">
1305
+ <span class="pf-v5-c-text-input-group__icon">
1306
+ <i class="fas fa-fw fa-search"></i>
1310
1307
  </span>
1311
1308
  <input
1312
- class="pf-v5-c-search-input__text-input"
1309
+ class="pf-v5-c-text-input-group__text-input"
1313
1310
  type="text"
1314
- placeholder="Filter by name"
1315
- aria-label="Filter by name"
1311
+ placeholder="Filer by name"
1312
+ value
1313
+ aria-label="Search input"
1316
1314
  />
1317
1315
  </span>
1318
1316
  </div>
@@ -1830,22 +1828,24 @@ section: components
1830
1828
  </div>
1831
1829
  <div class="pf-v5-c-menu__search">
1832
1830
  <div class="pf-v5-c-menu__search-input">
1833
- <div class="pf-v5-c-search-input">
1834
- <div class="pf-v5-c-search-input__bar">
1835
- <span class="pf-v5-c-search-input__text">
1831
+ <div class="pf-v5-c-text-input-group">
1832
+ <div
1833
+ class="pf-v5-c-text-input-group__main pf-m-icon"
1834
+ >
1835
+ <span
1836
+ class="pf-v5-c-text-input-group__text"
1837
+ >
1836
1838
  <span
1837
- class="pf-v5-c-search-input__icon"
1839
+ class="pf-v5-c-text-input-group__icon"
1838
1840
  >
1839
- <i
1840
- class="fas fa-search fa-fw"
1841
- aria-hidden="true"
1842
- ></i>
1841
+ <i class="fas fa-fw fa-search"></i>
1843
1842
  </span>
1844
1843
  <input
1845
- class="pf-v5-c-search-input__text-input"
1844
+ class="pf-v5-c-text-input-group__text-input"
1846
1845
  type="text"
1847
1846
  placeholder="Search"
1848
- aria-label="Search"
1847
+ value
1848
+ aria-label="Search input"
1849
1849
  />
1850
1850
  </span>
1851
1851
  </div>
@@ -2526,20 +2526,18 @@ section: components
2526
2526
  hidden
2527
2527
  >
2528
2528
  <div class="pf-v5-c-app-launcher__menu-search">
2529
- <div class="pf-v5-c-search-input">
2530
- <div class="pf-v5-c-search-input__bar">
2531
- <span class="pf-v5-c-search-input__text">
2532
- <span class="pf-v5-c-search-input__icon">
2533
- <i
2534
- class="fas fa-search fa-fw"
2535
- aria-hidden="true"
2536
- ></i>
2529
+ <div class="pf-v5-c-text-input-group">
2530
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
2531
+ <span class="pf-v5-c-text-input-group__text">
2532
+ <span class="pf-v5-c-text-input-group__icon">
2533
+ <i class="fas fa-fw fa-search"></i>
2537
2534
  </span>
2538
2535
  <input
2539
- class="pf-v5-c-search-input__text-input"
2536
+ class="pf-v5-c-text-input-group__text-input"
2540
2537
  type="text"
2541
- placeholder="Filter by name"
2542
- aria-label="Filter by name"
2538
+ placeholder="Filer by name"
2539
+ value
2540
+ aria-label="Search input"
2543
2541
  />
2544
2542
  </span>
2545
2543
  </div>
@@ -3057,22 +3055,24 @@ section: components
3057
3055
  </div>
3058
3056
  <div class="pf-v5-c-menu__search">
3059
3057
  <div class="pf-v5-c-menu__search-input">
3060
- <div class="pf-v5-c-search-input">
3061
- <div class="pf-v5-c-search-input__bar">
3062
- <span class="pf-v5-c-search-input__text">
3058
+ <div class="pf-v5-c-text-input-group">
3059
+ <div
3060
+ class="pf-v5-c-text-input-group__main pf-m-icon"
3061
+ >
3062
+ <span
3063
+ class="pf-v5-c-text-input-group__text"
3064
+ >
3063
3065
  <span
3064
- class="pf-v5-c-search-input__icon"
3066
+ class="pf-v5-c-text-input-group__icon"
3065
3067
  >
3066
- <i
3067
- class="fas fa-search fa-fw"
3068
- aria-hidden="true"
3069
- ></i>
3068
+ <i class="fas fa-fw fa-search"></i>
3070
3069
  </span>
3071
3070
  <input
3072
- class="pf-v5-c-search-input__text-input"
3071
+ class="pf-v5-c-text-input-group__text-input"
3073
3072
  type="text"
3074
3073
  placeholder="Search"
3075
- aria-label="Search"
3074
+ value
3075
+ aria-label="Search input"
3076
3076
  />
3077
3077
  </span>
3078
3078
  </div>
@@ -3656,20 +3656,18 @@ section: components
3656
3656
  hidden
3657
3657
  >
3658
3658
  <div class="pf-v5-c-app-launcher__menu-search">
3659
- <div class="pf-v5-c-search-input">
3660
- <div class="pf-v5-c-search-input__bar">
3661
- <span class="pf-v5-c-search-input__text">
3662
- <span class="pf-v5-c-search-input__icon">
3663
- <i
3664
- class="fas fa-search fa-fw"
3665
- aria-hidden="true"
3666
- ></i>
3659
+ <div class="pf-v5-c-text-input-group">
3660
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
3661
+ <span class="pf-v5-c-text-input-group__text">
3662
+ <span class="pf-v5-c-text-input-group__icon">
3663
+ <i class="fas fa-fw fa-search"></i>
3667
3664
  </span>
3668
3665
  <input
3669
- class="pf-v5-c-search-input__text-input"
3666
+ class="pf-v5-c-text-input-group__text-input"
3670
3667
  type="text"
3671
- placeholder="Filter by name"
3672
- aria-label="Filter by name"
3668
+ placeholder="Filer by name"
3669
+ value
3670
+ aria-label="Search input"
3673
3671
  />
3674
3672
  </span>
3675
3673
  </div>
@@ -4187,22 +4185,24 @@ section: components
4187
4185
  </div>
4188
4186
  <div class="pf-v5-c-menu__search">
4189
4187
  <div class="pf-v5-c-menu__search-input">
4190
- <div class="pf-v5-c-search-input">
4191
- <div class="pf-v5-c-search-input__bar">
4192
- <span class="pf-v5-c-search-input__text">
4188
+ <div class="pf-v5-c-text-input-group">
4189
+ <div
4190
+ class="pf-v5-c-text-input-group__main pf-m-icon"
4191
+ >
4192
+ <span
4193
+ class="pf-v5-c-text-input-group__text"
4194
+ >
4193
4195
  <span
4194
- class="pf-v5-c-search-input__icon"
4196
+ class="pf-v5-c-text-input-group__icon"
4195
4197
  >
4196
- <i
4197
- class="fas fa-search fa-fw"
4198
- aria-hidden="true"
4199
- ></i>
4198
+ <i class="fas fa-fw fa-search"></i>
4200
4199
  </span>
4201
4200
  <input
4202
- class="pf-v5-c-search-input__text-input"
4201
+ class="pf-v5-c-text-input-group__text-input"
4203
4202
  type="text"
4204
4203
  placeholder="Search"
4205
- aria-label="Search"
4204
+ value
4205
+ aria-label="Search input"
4206
4206
  />
4207
4207
  </span>
4208
4208
  </div>
@@ -5502,20 +5502,18 @@ section: components
5502
5502
  hidden
5503
5503
  >
5504
5504
  <div class="pf-v5-c-app-launcher__menu-search">
5505
- <div class="pf-v5-c-search-input">
5506
- <div class="pf-v5-c-search-input__bar">
5507
- <span class="pf-v5-c-search-input__text">
5508
- <span class="pf-v5-c-search-input__icon">
5509
- <i
5510
- class="fas fa-search fa-fw"
5511
- aria-hidden="true"
5512
- ></i>
5505
+ <div class="pf-v5-c-text-input-group">
5506
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
5507
+ <span class="pf-v5-c-text-input-group__text">
5508
+ <span class="pf-v5-c-text-input-group__icon">
5509
+ <i class="fas fa-fw fa-search"></i>
5513
5510
  </span>
5514
5511
  <input
5515
- class="pf-v5-c-search-input__text-input"
5512
+ class="pf-v5-c-text-input-group__text-input"
5516
5513
  type="text"
5517
- placeholder="Filter by name"
5518
- aria-label="Filter by name"
5514
+ placeholder="Filer by name"
5515
+ value
5516
+ aria-label="Search input"
5519
5517
  />
5520
5518
  </span>
5521
5519
  </div>
@@ -6033,22 +6031,24 @@ section: components
6033
6031
  </div>
6034
6032
  <div class="pf-v5-c-menu__search">
6035
6033
  <div class="pf-v5-c-menu__search-input">
6036
- <div class="pf-v5-c-search-input">
6037
- <div class="pf-v5-c-search-input__bar">
6038
- <span class="pf-v5-c-search-input__text">
6034
+ <div class="pf-v5-c-text-input-group">
6035
+ <div
6036
+ class="pf-v5-c-text-input-group__main pf-m-icon"
6037
+ >
6038
+ <span
6039
+ class="pf-v5-c-text-input-group__text"
6040
+ >
6039
6041
  <span
6040
- class="pf-v5-c-search-input__icon"
6042
+ class="pf-v5-c-text-input-group__icon"
6041
6043
  >
6042
- <i
6043
- class="fas fa-search fa-fw"
6044
- aria-hidden="true"
6045
- ></i>
6044
+ <i class="fas fa-fw fa-search"></i>
6046
6045
  </span>
6047
6046
  <input
6048
- class="pf-v5-c-search-input__text-input"
6047
+ class="pf-v5-c-text-input-group__text-input"
6049
6048
  type="text"
6050
6049
  placeholder="Search"
6051
- aria-label="Search"
6050
+ value
6051
+ aria-label="Search input"
6052
6052
  />
6053
6053
  </span>
6054
6054
  </div>
@@ -6475,20 +6475,18 @@ section: components
6475
6475
  hidden
6476
6476
  >
6477
6477
  <div class="pf-v5-c-app-launcher__menu-search">
6478
- <div class="pf-v5-c-search-input">
6479
- <div class="pf-v5-c-search-input__bar">
6480
- <span class="pf-v5-c-search-input__text">
6481
- <span class="pf-v5-c-search-input__icon">
6482
- <i
6483
- class="fas fa-search fa-fw"
6484
- aria-hidden="true"
6485
- ></i>
6478
+ <div class="pf-v5-c-text-input-group">
6479
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
6480
+ <span class="pf-v5-c-text-input-group__text">
6481
+ <span class="pf-v5-c-text-input-group__icon">
6482
+ <i class="fas fa-fw fa-search"></i>
6486
6483
  </span>
6487
6484
  <input
6488
- class="pf-v5-c-search-input__text-input"
6485
+ class="pf-v5-c-text-input-group__text-input"
6489
6486
  type="text"
6490
- placeholder="Filter by name"
6491
- aria-label="Filter by name"
6487
+ placeholder="Filer by name"
6488
+ value
6489
+ aria-label="Search input"
6492
6490
  />
6493
6491
  </span>
6494
6492
  </div>
@@ -7006,22 +7004,24 @@ section: components
7006
7004
  </div>
7007
7005
  <div class="pf-v5-c-menu__search">
7008
7006
  <div class="pf-v5-c-menu__search-input">
7009
- <div class="pf-v5-c-search-input">
7010
- <div class="pf-v5-c-search-input__bar">
7011
- <span class="pf-v5-c-search-input__text">
7007
+ <div class="pf-v5-c-text-input-group">
7008
+ <div
7009
+ class="pf-v5-c-text-input-group__main pf-m-icon"
7010
+ >
7011
+ <span
7012
+ class="pf-v5-c-text-input-group__text"
7013
+ >
7012
7014
  <span
7013
- class="pf-v5-c-search-input__icon"
7015
+ class="pf-v5-c-text-input-group__icon"
7014
7016
  >
7015
- <i
7016
- class="fas fa-search fa-fw"
7017
- aria-hidden="true"
7018
- ></i>
7017
+ <i class="fas fa-fw fa-search"></i>
7019
7018
  </span>
7020
7019
  <input
7021
- class="pf-v5-c-search-input__text-input"
7020
+ class="pf-v5-c-text-input-group__text-input"
7022
7021
  type="text"
7023
7022
  placeholder="Search"
7024
- aria-label="Search"
7023
+ value
7024
+ aria-label="Search input"
7025
7025
  />
7026
7026
  </span>
7027
7027
  </div>
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -109,10 +109,10 @@ section: components
109
109
  </span>
110
110
  <input
111
111
  class="pf-v5-c-text-input-group__text-input"
112
- type="search"
112
+ type="text"
113
113
  placeholder="Filter by name"
114
114
  value
115
- aria-label="Type to filter"
115
+ aria-label="Search input"
116
116
  />
117
117
  </span>
118
118
  </div>
@@ -326,20 +326,18 @@ section: components
326
326
  hidden
327
327
  >
328
328
  <div class="pf-v5-c-app-launcher__menu-search">
329
- <div class="pf-v5-c-search-input">
330
- <div class="pf-v5-c-search-input__bar">
331
- <span class="pf-v5-c-search-input__text">
332
- <span class="pf-v5-c-search-input__icon">
333
- <i
334
- class="fas fa-search fa-fw"
335
- aria-hidden="true"
336
- ></i>
329
+ <div class="pf-v5-c-text-input-group">
330
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
331
+ <span class="pf-v5-c-text-input-group__text">
332
+ <span class="pf-v5-c-text-input-group__icon">
333
+ <i class="fas fa-fw fa-search"></i>
337
334
  </span>
338
335
  <input
339
- class="pf-v5-c-search-input__text-input"
336
+ class="pf-v5-c-text-input-group__text-input"
340
337
  type="text"
341
- placeholder="Filter by name"
342
- aria-label="Filter by name"
338
+ placeholder="Filer by name"
339
+ value
340
+ aria-label="Search input"
343
341
  />
344
342
  </span>
345
343
  </div>
@@ -857,22 +855,24 @@ section: components
857
855
  </div>
858
856
  <div class="pf-v5-c-menu__search">
859
857
  <div class="pf-v5-c-menu__search-input">
860
- <div class="pf-v5-c-search-input">
861
- <div class="pf-v5-c-search-input__bar">
862
- <span class="pf-v5-c-search-input__text">
858
+ <div class="pf-v5-c-text-input-group">
859
+ <div
860
+ class="pf-v5-c-text-input-group__main pf-m-icon"
861
+ >
862
+ <span
863
+ class="pf-v5-c-text-input-group__text"
864
+ >
863
865
  <span
864
- class="pf-v5-c-search-input__icon"
866
+ class="pf-v5-c-text-input-group__icon"
865
867
  >
866
- <i
867
- class="fas fa-search fa-fw"
868
- aria-hidden="true"
869
- ></i>
868
+ <i class="fas fa-fw fa-search"></i>
870
869
  </span>
871
870
  <input
872
- class="pf-v5-c-search-input__text-input"
871
+ class="pf-v5-c-text-input-group__text-input"
873
872
  type="text"
874
873
  placeholder="Search"
875
- aria-label="Search"
874
+ value
875
+ aria-label="Search input"
876
876
  />
877
877
  </span>
878
878
  </div>
@@ -1439,10 +1439,10 @@ section: components
1439
1439
  </span>
1440
1440
  <input
1441
1441
  class="pf-v5-c-text-input-group__text-input"
1442
- type="search"
1442
+ type="text"
1443
1443
  placeholder="Filter by Description"
1444
1444
  value
1445
- aria-label="Type to filter"
1445
+ aria-label="Search input"
1446
1446
  />
1447
1447
  </span>
1448
1448
  </div>
@@ -2148,10 +2148,10 @@ section: components
2148
2148
  </span>
2149
2149
  <input
2150
2150
  class="pf-v5-c-text-input-group__text-input"
2151
- type="search"
2151
+ type="text"
2152
2152
  placeholder="Filter by name"
2153
2153
  value
2154
- aria-label="Type to filter"
2154
+ aria-label="Search input"
2155
2155
  />
2156
2156
  </span>
2157
2157
  </div>
@@ -3596,20 +3596,18 @@ section: components
3596
3596
  hidden
3597
3597
  >
3598
3598
  <div class="pf-v5-c-app-launcher__menu-search">
3599
- <div class="pf-v5-c-search-input">
3600
- <div class="pf-v5-c-search-input__bar">
3601
- <span class="pf-v5-c-search-input__text">
3602
- <span class="pf-v5-c-search-input__icon">
3603
- <i
3604
- class="fas fa-search fa-fw"
3605
- aria-hidden="true"
3606
- ></i>
3599
+ <div class="pf-v5-c-text-input-group">
3600
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
3601
+ <span class="pf-v5-c-text-input-group__text">
3602
+ <span class="pf-v5-c-text-input-group__icon">
3603
+ <i class="fas fa-fw fa-search"></i>
3607
3604
  </span>
3608
3605
  <input
3609
- class="pf-v5-c-search-input__text-input"
3606
+ class="pf-v5-c-text-input-group__text-input"
3610
3607
  type="text"
3611
- placeholder="Filter by name"
3612
- aria-label="Filter by name"
3608
+ placeholder="Filer by name"
3609
+ value
3610
+ aria-label="Search input"
3613
3611
  />
3614
3612
  </span>
3615
3613
  </div>
@@ -4127,22 +4125,24 @@ section: components
4127
4125
  </div>
4128
4126
  <div class="pf-v5-c-menu__search">
4129
4127
  <div class="pf-v5-c-menu__search-input">
4130
- <div class="pf-v5-c-search-input">
4131
- <div class="pf-v5-c-search-input__bar">
4132
- <span class="pf-v5-c-search-input__text">
4128
+ <div class="pf-v5-c-text-input-group">
4129
+ <div
4130
+ class="pf-v5-c-text-input-group__main pf-m-icon"
4131
+ >
4132
+ <span
4133
+ class="pf-v5-c-text-input-group__text"
4134
+ >
4133
4135
  <span
4134
- class="pf-v5-c-search-input__icon"
4136
+ class="pf-v5-c-text-input-group__icon"
4135
4137
  >
4136
- <i
4137
- class="fas fa-search fa-fw"
4138
- aria-hidden="true"
4139
- ></i>
4138
+ <i class="fas fa-fw fa-search"></i>
4140
4139
  </span>
4141
4140
  <input
4142
- class="pf-v5-c-search-input__text-input"
4141
+ class="pf-v5-c-text-input-group__text-input"
4143
4142
  type="text"
4144
4143
  placeholder="Search"
4145
- aria-label="Search"
4144
+ value
4145
+ aria-label="Search input"
4146
4146
  />
4147
4147
  </span>
4148
4148
  </div>
@@ -4561,10 +4561,10 @@ section: components
4561
4561
  </span>
4562
4562
  <input
4563
4563
  class="pf-v5-c-text-input-group__text-input"
4564
- type="search"
4564
+ type="text"
4565
4565
  placeholder="Filter by name"
4566
4566
  value
4567
- aria-label="Type to filter"
4567
+ aria-label="Search input"
4568
4568
  />
4569
4569
  </span>
4570
4570
  </div>