@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/Page/examples/Page.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>
@@ -1050,20 +1050,18 @@ wrapperTag: div
1050
1050
  hidden
1051
1051
  >
1052
1052
  <div class="pf-v5-c-app-launcher__menu-search">
1053
- <div class="pf-v5-c-search-input">
1054
- <div class="pf-v5-c-search-input__bar">
1055
- <span class="pf-v5-c-search-input__text">
1056
- <span class="pf-v5-c-search-input__icon">
1057
- <i
1058
- class="fas fa-search fa-fw"
1059
- aria-hidden="true"
1060
- ></i>
1053
+ <div class="pf-v5-c-text-input-group">
1054
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
1055
+ <span class="pf-v5-c-text-input-group__text">
1056
+ <span class="pf-v5-c-text-input-group__icon">
1057
+ <i class="fas fa-fw fa-search"></i>
1061
1058
  </span>
1062
1059
  <input
1063
- class="pf-v5-c-search-input__text-input"
1060
+ class="pf-v5-c-text-input-group__text-input"
1064
1061
  type="text"
1065
- placeholder="Filter by name"
1066
- aria-label="Filter by name"
1062
+ placeholder="Filer by name"
1063
+ value
1064
+ aria-label="Search input"
1067
1065
  />
1068
1066
  </span>
1069
1067
  </div>
@@ -1581,22 +1579,24 @@ wrapperTag: div
1581
1579
  </div>
1582
1580
  <div class="pf-v5-c-menu__search">
1583
1581
  <div class="pf-v5-c-menu__search-input">
1584
- <div class="pf-v5-c-search-input">
1585
- <div class="pf-v5-c-search-input__bar">
1586
- <span class="pf-v5-c-search-input__text">
1582
+ <div class="pf-v5-c-text-input-group">
1583
+ <div
1584
+ class="pf-v5-c-text-input-group__main pf-m-icon"
1585
+ >
1586
+ <span
1587
+ class="pf-v5-c-text-input-group__text"
1588
+ >
1587
1589
  <span
1588
- class="pf-v5-c-search-input__icon"
1590
+ class="pf-v5-c-text-input-group__icon"
1589
1591
  >
1590
- <i
1591
- class="fas fa-search fa-fw"
1592
- aria-hidden="true"
1593
- ></i>
1592
+ <i class="fas fa-fw fa-search"></i>
1594
1593
  </span>
1595
1594
  <input
1596
- class="pf-v5-c-search-input__text-input"
1595
+ class="pf-v5-c-text-input-group__text-input"
1597
1596
  type="text"
1598
1597
  placeholder="Search"
1599
- aria-label="Search"
1598
+ value
1599
+ aria-label="Search input"
1600
1600
  />
1601
1601
  </span>
1602
1602
  </div>
@@ -2040,20 +2040,18 @@ wrapperTag: div
2040
2040
  hidden
2041
2041
  >
2042
2042
  <div class="pf-v5-c-app-launcher__menu-search">
2043
- <div class="pf-v5-c-search-input">
2044
- <div class="pf-v5-c-search-input__bar">
2045
- <span class="pf-v5-c-search-input__text">
2046
- <span class="pf-v5-c-search-input__icon">
2047
- <i
2048
- class="fas fa-search fa-fw"
2049
- aria-hidden="true"
2050
- ></i>
2043
+ <div class="pf-v5-c-text-input-group">
2044
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
2045
+ <span class="pf-v5-c-text-input-group__text">
2046
+ <span class="pf-v5-c-text-input-group__icon">
2047
+ <i class="fas fa-fw fa-search"></i>
2051
2048
  </span>
2052
2049
  <input
2053
- class="pf-v5-c-search-input__text-input"
2050
+ class="pf-v5-c-text-input-group__text-input"
2054
2051
  type="text"
2055
- placeholder="Filter by name"
2056
- aria-label="Filter by name"
2052
+ placeholder="Filer by name"
2053
+ value
2054
+ aria-label="Search input"
2057
2055
  />
2058
2056
  </span>
2059
2057
  </div>
@@ -2571,22 +2569,24 @@ wrapperTag: div
2571
2569
  </div>
2572
2570
  <div class="pf-v5-c-menu__search">
2573
2571
  <div class="pf-v5-c-menu__search-input">
2574
- <div class="pf-v5-c-search-input">
2575
- <div class="pf-v5-c-search-input__bar">
2576
- <span class="pf-v5-c-search-input__text">
2572
+ <div class="pf-v5-c-text-input-group">
2573
+ <div
2574
+ class="pf-v5-c-text-input-group__main pf-m-icon"
2575
+ >
2576
+ <span
2577
+ class="pf-v5-c-text-input-group__text"
2578
+ >
2577
2579
  <span
2578
- class="pf-v5-c-search-input__icon"
2580
+ class="pf-v5-c-text-input-group__icon"
2579
2581
  >
2580
- <i
2581
- class="fas fa-search fa-fw"
2582
- aria-hidden="true"
2583
- ></i>
2582
+ <i class="fas fa-fw fa-search"></i>
2584
2583
  </span>
2585
2584
  <input
2586
- class="pf-v5-c-search-input__text-input"
2585
+ class="pf-v5-c-text-input-group__text-input"
2587
2586
  type="text"
2588
2587
  placeholder="Search"
2589
- aria-label="Search"
2588
+ value
2589
+ aria-label="Search input"
2590
2590
  />
2591
2591
  </span>
2592
2592
  </div>
@@ -3175,20 +3175,18 @@ wrapperTag: div
3175
3175
  hidden
3176
3176
  >
3177
3177
  <div class="pf-v5-c-app-launcher__menu-search">
3178
- <div class="pf-v5-c-search-input">
3179
- <div class="pf-v5-c-search-input__bar">
3180
- <span class="pf-v5-c-search-input__text">
3181
- <span class="pf-v5-c-search-input__icon">
3182
- <i
3183
- class="fas fa-search fa-fw"
3184
- aria-hidden="true"
3185
- ></i>
3178
+ <div class="pf-v5-c-text-input-group">
3179
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
3180
+ <span class="pf-v5-c-text-input-group__text">
3181
+ <span class="pf-v5-c-text-input-group__icon">
3182
+ <i class="fas fa-fw fa-search"></i>
3186
3183
  </span>
3187
3184
  <input
3188
- class="pf-v5-c-search-input__text-input"
3185
+ class="pf-v5-c-text-input-group__text-input"
3189
3186
  type="text"
3190
- placeholder="Filter by name"
3191
- aria-label="Filter by name"
3187
+ placeholder="Filer by name"
3188
+ value
3189
+ aria-label="Search input"
3192
3190
  />
3193
3191
  </span>
3194
3192
  </div>
@@ -3706,22 +3704,24 @@ wrapperTag: div
3706
3704
  </div>
3707
3705
  <div class="pf-v5-c-menu__search">
3708
3706
  <div class="pf-v5-c-menu__search-input">
3709
- <div class="pf-v5-c-search-input">
3710
- <div class="pf-v5-c-search-input__bar">
3711
- <span class="pf-v5-c-search-input__text">
3707
+ <div class="pf-v5-c-text-input-group">
3708
+ <div
3709
+ class="pf-v5-c-text-input-group__main pf-m-icon"
3710
+ >
3711
+ <span
3712
+ class="pf-v5-c-text-input-group__text"
3713
+ >
3712
3714
  <span
3713
- class="pf-v5-c-search-input__icon"
3715
+ class="pf-v5-c-text-input-group__icon"
3714
3716
  >
3715
- <i
3716
- class="fas fa-search fa-fw"
3717
- aria-hidden="true"
3718
- ></i>
3717
+ <i class="fas fa-fw fa-search"></i>
3719
3718
  </span>
3720
3719
  <input
3721
- class="pf-v5-c-search-input__text-input"
3720
+ class="pf-v5-c-text-input-group__text-input"
3722
3721
  type="text"
3723
3722
  placeholder="Search"
3724
- aria-label="Search"
3723
+ value
3724
+ aria-label="Search input"
3725
3725
  />
3726
3726
  </span>
3727
3727
  </div>
@@ -4272,20 +4272,18 @@ wrapperTag: div
4272
4272
  hidden
4273
4273
  >
4274
4274
  <div class="pf-v5-c-app-launcher__menu-search">
4275
- <div class="pf-v5-c-search-input">
4276
- <div class="pf-v5-c-search-input__bar">
4277
- <span class="pf-v5-c-search-input__text">
4278
- <span class="pf-v5-c-search-input__icon">
4279
- <i
4280
- class="fas fa-search fa-fw"
4281
- aria-hidden="true"
4282
- ></i>
4275
+ <div class="pf-v5-c-text-input-group">
4276
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
4277
+ <span class="pf-v5-c-text-input-group__text">
4278
+ <span class="pf-v5-c-text-input-group__icon">
4279
+ <i class="fas fa-fw fa-search"></i>
4283
4280
  </span>
4284
4281
  <input
4285
- class="pf-v5-c-search-input__text-input"
4282
+ class="pf-v5-c-text-input-group__text-input"
4286
4283
  type="text"
4287
- placeholder="Filter by name"
4288
- aria-label="Filter by name"
4284
+ placeholder="Filer by name"
4285
+ value
4286
+ aria-label="Search input"
4289
4287
  />
4290
4288
  </span>
4291
4289
  </div>
@@ -4803,22 +4801,24 @@ wrapperTag: div
4803
4801
  </div>
4804
4802
  <div class="pf-v5-c-menu__search">
4805
4803
  <div class="pf-v5-c-menu__search-input">
4806
- <div class="pf-v5-c-search-input">
4807
- <div class="pf-v5-c-search-input__bar">
4808
- <span class="pf-v5-c-search-input__text">
4804
+ <div class="pf-v5-c-text-input-group">
4805
+ <div
4806
+ class="pf-v5-c-text-input-group__main pf-m-icon"
4807
+ >
4808
+ <span
4809
+ class="pf-v5-c-text-input-group__text"
4810
+ >
4809
4811
  <span
4810
- class="pf-v5-c-search-input__icon"
4812
+ class="pf-v5-c-text-input-group__icon"
4811
4813
  >
4812
- <i
4813
- class="fas fa-search fa-fw"
4814
- aria-hidden="true"
4815
- ></i>
4814
+ <i class="fas fa-fw fa-search"></i>
4816
4815
  </span>
4817
4816
  <input
4818
- class="pf-v5-c-search-input__text-input"
4817
+ class="pf-v5-c-text-input-group__text-input"
4819
4818
  type="text"
4820
4819
  placeholder="Search"
4821
- aria-label="Search"
4820
+ value
4821
+ aria-label="Search input"
4822
4822
  />
4823
4823
  </span>
4824
4824
  </div>
@@ -5369,20 +5369,18 @@ wrapperTag: div
5369
5369
  hidden
5370
5370
  >
5371
5371
  <div class="pf-v5-c-app-launcher__menu-search">
5372
- <div class="pf-v5-c-search-input">
5373
- <div class="pf-v5-c-search-input__bar">
5374
- <span class="pf-v5-c-search-input__text">
5375
- <span class="pf-v5-c-search-input__icon">
5376
- <i
5377
- class="fas fa-search fa-fw"
5378
- aria-hidden="true"
5379
- ></i>
5372
+ <div class="pf-v5-c-text-input-group">
5373
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
5374
+ <span class="pf-v5-c-text-input-group__text">
5375
+ <span class="pf-v5-c-text-input-group__icon">
5376
+ <i class="fas fa-fw fa-search"></i>
5380
5377
  </span>
5381
5378
  <input
5382
- class="pf-v5-c-search-input__text-input"
5379
+ class="pf-v5-c-text-input-group__text-input"
5383
5380
  type="text"
5384
- placeholder="Filter by name"
5385
- aria-label="Filter by name"
5381
+ placeholder="Filer by name"
5382
+ value
5383
+ aria-label="Search input"
5386
5384
  />
5387
5385
  </span>
5388
5386
  </div>
@@ -5900,22 +5898,24 @@ wrapperTag: div
5900
5898
  </div>
5901
5899
  <div class="pf-v5-c-menu__search">
5902
5900
  <div class="pf-v5-c-menu__search-input">
5903
- <div class="pf-v5-c-search-input">
5904
- <div class="pf-v5-c-search-input__bar">
5905
- <span class="pf-v5-c-search-input__text">
5901
+ <div class="pf-v5-c-text-input-group">
5902
+ <div
5903
+ class="pf-v5-c-text-input-group__main pf-m-icon"
5904
+ >
5905
+ <span
5906
+ class="pf-v5-c-text-input-group__text"
5907
+ >
5906
5908
  <span
5907
- class="pf-v5-c-search-input__icon"
5909
+ class="pf-v5-c-text-input-group__icon"
5908
5910
  >
5909
- <i
5910
- class="fas fa-search fa-fw"
5911
- aria-hidden="true"
5912
- ></i>
5911
+ <i class="fas fa-fw fa-search"></i>
5913
5912
  </span>
5914
5913
  <input
5915
- class="pf-v5-c-search-input__text-input"
5914
+ class="pf-v5-c-text-input-group__text-input"
5916
5915
  type="text"
5917
5916
  placeholder="Search"
5918
- aria-label="Search"
5917
+ value
5918
+ aria-label="Search input"
5919
5919
  />
5920
5920
  </span>
5921
5921
  </div>
@@ -6466,20 +6466,18 @@ wrapperTag: div
6466
6466
  hidden
6467
6467
  >
6468
6468
  <div class="pf-v5-c-app-launcher__menu-search">
6469
- <div class="pf-v5-c-search-input">
6470
- <div class="pf-v5-c-search-input__bar">
6471
- <span class="pf-v5-c-search-input__text">
6472
- <span class="pf-v5-c-search-input__icon">
6473
- <i
6474
- class="fas fa-search fa-fw"
6475
- aria-hidden="true"
6476
- ></i>
6469
+ <div class="pf-v5-c-text-input-group">
6470
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
6471
+ <span class="pf-v5-c-text-input-group__text">
6472
+ <span class="pf-v5-c-text-input-group__icon">
6473
+ <i class="fas fa-fw fa-search"></i>
6477
6474
  </span>
6478
6475
  <input
6479
- class="pf-v5-c-search-input__text-input"
6476
+ class="pf-v5-c-text-input-group__text-input"
6480
6477
  type="text"
6481
- placeholder="Filter by name"
6482
- aria-label="Filter by name"
6478
+ placeholder="Filer by name"
6479
+ value
6480
+ aria-label="Search input"
6483
6481
  />
6484
6482
  </span>
6485
6483
  </div>
@@ -6997,22 +6995,24 @@ wrapperTag: div
6997
6995
  </div>
6998
6996
  <div class="pf-v5-c-menu__search">
6999
6997
  <div class="pf-v5-c-menu__search-input">
7000
- <div class="pf-v5-c-search-input">
7001
- <div class="pf-v5-c-search-input__bar">
7002
- <span class="pf-v5-c-search-input__text">
6998
+ <div class="pf-v5-c-text-input-group">
6999
+ <div
7000
+ class="pf-v5-c-text-input-group__main pf-m-icon"
7001
+ >
7002
+ <span
7003
+ class="pf-v5-c-text-input-group__text"
7004
+ >
7003
7005
  <span
7004
- class="pf-v5-c-search-input__icon"
7006
+ class="pf-v5-c-text-input-group__icon"
7005
7007
  >
7006
- <i
7007
- class="fas fa-search fa-fw"
7008
- aria-hidden="true"
7009
- ></i>
7008
+ <i class="fas fa-fw fa-search"></i>
7010
7009
  </span>
7011
7010
  <input
7012
- class="pf-v5-c-search-input__text-input"
7011
+ class="pf-v5-c-text-input-group__text-input"
7013
7012
  type="text"
7014
7013
  placeholder="Search"
7015
- aria-label="Search"
7014
+ value
7015
+ aria-label="Search input"
7016
7016
  />
7017
7017
  </span>
7018
7018
  </div>
@@ -7565,20 +7565,18 @@ wrapperTag: div
7565
7565
  hidden
7566
7566
  >
7567
7567
  <div class="pf-v5-c-app-launcher__menu-search">
7568
- <div class="pf-v5-c-search-input">
7569
- <div class="pf-v5-c-search-input__bar">
7570
- <span class="pf-v5-c-search-input__text">
7571
- <span class="pf-v5-c-search-input__icon">
7572
- <i
7573
- class="fas fa-search fa-fw"
7574
- aria-hidden="true"
7575
- ></i>
7568
+ <div class="pf-v5-c-text-input-group">
7569
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
7570
+ <span class="pf-v5-c-text-input-group__text">
7571
+ <span class="pf-v5-c-text-input-group__icon">
7572
+ <i class="fas fa-fw fa-search"></i>
7576
7573
  </span>
7577
7574
  <input
7578
- class="pf-v5-c-search-input__text-input"
7575
+ class="pf-v5-c-text-input-group__text-input"
7579
7576
  type="text"
7580
- placeholder="Filter by name"
7581
- aria-label="Filter by name"
7577
+ placeholder="Filer by name"
7578
+ value
7579
+ aria-label="Search input"
7582
7580
  />
7583
7581
  </span>
7584
7582
  </div>
@@ -8096,22 +8094,24 @@ wrapperTag: div
8096
8094
  </div>
8097
8095
  <div class="pf-v5-c-menu__search">
8098
8096
  <div class="pf-v5-c-menu__search-input">
8099
- <div class="pf-v5-c-search-input">
8100
- <div class="pf-v5-c-search-input__bar">
8101
- <span class="pf-v5-c-search-input__text">
8097
+ <div class="pf-v5-c-text-input-group">
8098
+ <div
8099
+ class="pf-v5-c-text-input-group__main pf-m-icon"
8100
+ >
8101
+ <span
8102
+ class="pf-v5-c-text-input-group__text"
8103
+ >
8102
8104
  <span
8103
- class="pf-v5-c-search-input__icon"
8105
+ class="pf-v5-c-text-input-group__icon"
8104
8106
  >
8105
- <i
8106
- class="fas fa-search fa-fw"
8107
- aria-hidden="true"
8108
- ></i>
8107
+ <i class="fas fa-fw fa-search"></i>
8109
8108
  </span>
8110
8109
  <input
8111
- class="pf-v5-c-search-input__text-input"
8110
+ class="pf-v5-c-text-input-group__text-input"
8112
8111
  type="text"
8113
8112
  placeholder="Search"
8114
- aria-label="Search"
8113
+ value
8114
+ aria-label="Search input"
8115
8115
  />
8116
8116
  </span>
8117
8117
  </div>
@@ -8669,20 +8669,18 @@ wrapperTag: div
8669
8669
  hidden
8670
8670
  >
8671
8671
  <div class="pf-v5-c-app-launcher__menu-search">
8672
- <div class="pf-v5-c-search-input">
8673
- <div class="pf-v5-c-search-input__bar">
8674
- <span class="pf-v5-c-search-input__text">
8675
- <span class="pf-v5-c-search-input__icon">
8676
- <i
8677
- class="fas fa-search fa-fw"
8678
- aria-hidden="true"
8679
- ></i>
8672
+ <div class="pf-v5-c-text-input-group">
8673
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
8674
+ <span class="pf-v5-c-text-input-group__text">
8675
+ <span class="pf-v5-c-text-input-group__icon">
8676
+ <i class="fas fa-fw fa-search"></i>
8680
8677
  </span>
8681
8678
  <input
8682
- class="pf-v5-c-search-input__text-input"
8679
+ class="pf-v5-c-text-input-group__text-input"
8683
8680
  type="text"
8684
- placeholder="Filter by name"
8685
- aria-label="Filter by name"
8681
+ placeholder="Filer by name"
8682
+ value
8683
+ aria-label="Search input"
8686
8684
  />
8687
8685
  </span>
8688
8686
  </div>
@@ -9200,22 +9198,24 @@ wrapperTag: div
9200
9198
  </div>
9201
9199
  <div class="pf-v5-c-menu__search">
9202
9200
  <div class="pf-v5-c-menu__search-input">
9203
- <div class="pf-v5-c-search-input">
9204
- <div class="pf-v5-c-search-input__bar">
9205
- <span class="pf-v5-c-search-input__text">
9201
+ <div class="pf-v5-c-text-input-group">
9202
+ <div
9203
+ class="pf-v5-c-text-input-group__main pf-m-icon"
9204
+ >
9205
+ <span
9206
+ class="pf-v5-c-text-input-group__text"
9207
+ >
9206
9208
  <span
9207
- class="pf-v5-c-search-input__icon"
9209
+ class="pf-v5-c-text-input-group__icon"
9208
9210
  >
9209
- <i
9210
- class="fas fa-search fa-fw"
9211
- aria-hidden="true"
9212
- ></i>
9211
+ <i class="fas fa-fw fa-search"></i>
9213
9212
  </span>
9214
9213
  <input
9215
- class="pf-v5-c-search-input__text-input"
9214
+ class="pf-v5-c-text-input-group__text-input"
9216
9215
  type="text"
9217
9216
  placeholder="Search"
9218
- aria-label="Search"
9217
+ value
9218
+ aria-label="Search input"
9219
9219
  />
9220
9220
  </span>
9221
9221
  </div>