@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/Banner/examples/Banner.md CHANGED
@@ -76,20 +76,18 @@ wrapperTag: div
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 @@ wrapperTag: div
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>
@@ -1204,20 +1204,20 @@ wrapperTag: div
1204
1204
  hidden
1205
1205
  >
1206
1206
  <div class="pf-v5-c-app-launcher__menu-search">
1207
- <div class="pf-v5-c-search-input">
1208
- <div class="pf-v5-c-search-input__bar">
1209
- <span class="pf-v5-c-search-input__text">
1210
- <span class="pf-v5-c-search-input__icon">
1211
- <i
1212
- class="fas fa-search fa-fw"
1213
- aria-hidden="true"
1214
- ></i>
1207
+ <div class="pf-v5-c-text-input-group">
1208
+ <div
1209
+ class="pf-v5-c-text-input-group__main pf-m-icon"
1210
+ >
1211
+ <span class="pf-v5-c-text-input-group__text">
1212
+ <span class="pf-v5-c-text-input-group__icon">
1213
+ <i class="fas fa-fw fa-search"></i>
1215
1214
  </span>
1216
1215
  <input
1217
- class="pf-v5-c-search-input__text-input"
1216
+ class="pf-v5-c-text-input-group__text-input"
1218
1217
  type="text"
1219
- placeholder="Filter by name"
1220
- aria-label="Filter by name"
1218
+ placeholder="Filer by name"
1219
+ value
1220
+ aria-label="Search input"
1221
1221
  />
1222
1222
  </span>
1223
1223
  </div>
@@ -1766,24 +1766,24 @@ wrapperTag: div
1766
1766
  </div>
1767
1767
  <div class="pf-v5-c-menu__search">
1768
1768
  <div class="pf-v5-c-menu__search-input">
1769
- <div class="pf-v5-c-search-input">
1770
- <div class="pf-v5-c-search-input__bar">
1769
+ <div class="pf-v5-c-text-input-group">
1770
+ <div
1771
+ class="pf-v5-c-text-input-group__main pf-m-icon"
1772
+ >
1771
1773
  <span
1772
- class="pf-v5-c-search-input__text"
1774
+ class="pf-v5-c-text-input-group__text"
1773
1775
  >
1774
1776
  <span
1775
- class="pf-v5-c-search-input__icon"
1777
+ class="pf-v5-c-text-input-group__icon"
1776
1778
  >
1777
- <i
1778
- class="fas fa-search fa-fw"
1779
- aria-hidden="true"
1780
- ></i>
1779
+ <i class="fas fa-fw fa-search"></i>
1781
1780
  </span>
1782
1781
  <input
1783
- class="pf-v5-c-search-input__text-input"
1782
+ class="pf-v5-c-text-input-group__text-input"
1784
1783
  type="text"
1785
1784
  placeholder="Search"
1786
- aria-label="Search"
1785
+ value
1786
+ aria-label="Search input"
1787
1787
  />
1788
1788
  </span>
1789
1789
  </div>
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -74,20 +74,18 @@ section: patterns
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: patterns
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>
package/docs/demos/ContextSelector/examples/ContextSelector.md CHANGED
@@ -70,17 +70,18 @@ subsection: menus
70
70
  </button>
71
71
  <div class="pf-v5-c-context-selector__menu" hidden>
72
72
  <div class="pf-v5-c-context-selector__menu-search">
73
- <div class="pf-v5-c-search-input">
74
- <div class="pf-v5-c-search-input__bar">
75
- <span class="pf-v5-c-search-input__text">
76
- <span class="pf-v5-c-search-input__icon">
77
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
73
+ <div class="pf-v5-c-text-input-group">
74
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
75
+ <span class="pf-v5-c-text-input-group__text">
76
+ <span class="pf-v5-c-text-input-group__icon">
77
+ <i class="fas fa-fw fa-search"></i>
78
78
  </span>
79
79
  <input
80
- class="pf-v5-c-search-input__text-input"
80
+ class="pf-v5-c-text-input-group__text-input"
81
81
  type="text"
82
82
  placeholder="Search"
83
- aria-label="Search"
83
+ value
84
+ aria-label="Search input"
84
85
  />
85
86
  </span>
86
87
  </div>
@@ -378,20 +379,18 @@ subsection: menus
378
379
  hidden
379
380
  >
380
381
  <div class="pf-v5-c-app-launcher__menu-search">
381
- <div class="pf-v5-c-search-input">
382
- <div class="pf-v5-c-search-input__bar">
383
- <span class="pf-v5-c-search-input__text">
384
- <span class="pf-v5-c-search-input__icon">
385
- <i
386
- class="fas fa-search fa-fw"
387
- aria-hidden="true"
388
- ></i>
382
+ <div class="pf-v5-c-text-input-group">
383
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
384
+ <span class="pf-v5-c-text-input-group__text">
385
+ <span class="pf-v5-c-text-input-group__icon">
386
+ <i class="fas fa-fw fa-search"></i>
389
387
  </span>
390
388
  <input
391
- class="pf-v5-c-search-input__text-input"
389
+ class="pf-v5-c-text-input-group__text-input"
392
390
  type="text"
393
- placeholder="Filter by name"
394
- aria-label="Filter by name"
391
+ placeholder="Filer by name"
392
+ value
393
+ aria-label="Search input"
395
394
  />
396
395
  </span>
397
396
  </div>
@@ -909,22 +908,24 @@ subsection: menus
909
908
  </div>
910
909
  <div class="pf-v5-c-menu__search">
911
910
  <div class="pf-v5-c-menu__search-input">
912
- <div class="pf-v5-c-search-input">
913
- <div class="pf-v5-c-search-input__bar">
914
- <span class="pf-v5-c-search-input__text">
911
+ <div class="pf-v5-c-text-input-group">
912
+ <div
913
+ class="pf-v5-c-text-input-group__main pf-m-icon"
914
+ >
915
+ <span
916
+ class="pf-v5-c-text-input-group__text"
917
+ >
915
918
  <span
916
- class="pf-v5-c-search-input__icon"
919
+ class="pf-v5-c-text-input-group__icon"
917
920
  >
918
- <i
919
- class="fas fa-search fa-fw"
920
- aria-hidden="true"
921
- ></i>
921
+ <i class="fas fa-fw fa-search"></i>
922
922
  </span>
923
923
  <input
924
- class="pf-v5-c-search-input__text-input"
924
+ class="pf-v5-c-text-input-group__text-input"
925
925
  type="text"
926
926
  placeholder="Search"
927
- aria-label="Search"
927
+ value
928
+ aria-label="Search input"
928
929
  />
929
930
  </span>
930
931
  </div>
@@ -1178,17 +1179,18 @@ subsection: menus
1178
1179
  </button>
1179
1180
  <div class="pf-v5-c-context-selector__menu" hidden>
1180
1181
  <div class="pf-v5-c-context-selector__menu-search">
1181
- <div class="pf-v5-c-search-input">
1182
- <div class="pf-v5-c-search-input__bar">
1183
- <span class="pf-v5-c-search-input__text">
1184
- <span class="pf-v5-c-search-input__icon">
1185
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1182
+ <div class="pf-v5-c-text-input-group">
1183
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
1184
+ <span class="pf-v5-c-text-input-group__text">
1185
+ <span class="pf-v5-c-text-input-group__icon">
1186
+ <i class="fas fa-fw fa-search"></i>
1186
1187
  </span>
1187
1188
  <input
1188
- class="pf-v5-c-search-input__text-input"
1189
+ class="pf-v5-c-text-input-group__text-input"
1189
1190
  type="text"
1190
1191
  placeholder="Search"
1191
- aria-label="Search"
1192
+ value
1193
+ aria-label="Search input"
1192
1194
  />
1193
1195
  </span>
1194
1196
  </div>
@@ -1477,20 +1479,18 @@ subsection: menus
1477
1479
  hidden
1478
1480
  >
1479
1481
  <div class="pf-v5-c-app-launcher__menu-search">
1480
- <div class="pf-v5-c-search-input">
1481
- <div class="pf-v5-c-search-input__bar">
1482
- <span class="pf-v5-c-search-input__text">
1483
- <span class="pf-v5-c-search-input__icon">
1484
- <i
1485
- class="fas fa-search fa-fw"
1486
- aria-hidden="true"
1487
- ></i>
1482
+ <div class="pf-v5-c-text-input-group">
1483
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
1484
+ <span class="pf-v5-c-text-input-group__text">
1485
+ <span class="pf-v5-c-text-input-group__icon">
1486
+ <i class="fas fa-fw fa-search"></i>
1488
1487
  </span>
1489
1488
  <input
1490
- class="pf-v5-c-search-input__text-input"
1489
+ class="pf-v5-c-text-input-group__text-input"
1491
1490
  type="text"
1492
- placeholder="Filter by name"
1493
- aria-label="Filter by name"
1491
+ placeholder="Filer by name"
1492
+ value
1493
+ aria-label="Search input"
1494
1494
  />
1495
1495
  </span>
1496
1496
  </div>
@@ -2008,22 +2008,24 @@ subsection: menus
2008
2008
  </div>
2009
2009
  <div class="pf-v5-c-menu__search">
2010
2010
  <div class="pf-v5-c-menu__search-input">
2011
- <div class="pf-v5-c-search-input">
2012
- <div class="pf-v5-c-search-input__bar">
2013
- <span class="pf-v5-c-search-input__text">
2011
+ <div class="pf-v5-c-text-input-group">
2012
+ <div
2013
+ class="pf-v5-c-text-input-group__main pf-m-icon"
2014
+ >
2015
+ <span
2016
+ class="pf-v5-c-text-input-group__text"
2017
+ >
2014
2018
  <span
2015
- class="pf-v5-c-search-input__icon"
2019
+ class="pf-v5-c-text-input-group__icon"
2016
2020
  >
2017
- <i
2018
- class="fas fa-search fa-fw"
2019
- aria-hidden="true"
2020
- ></i>
2021
+ <i class="fas fa-fw fa-search"></i>
2021
2022
  </span>
2022
2023
  <input
2023
- class="pf-v5-c-search-input__text-input"
2024
+ class="pf-v5-c-text-input-group__text-input"
2024
2025
  type="text"
2025
2026
  placeholder="Search"
2026
- aria-label="Search"
2027
+ value
2028
+ aria-label="Search input"
2027
2029
  />
2028
2030
  </span>
2029
2031
  </div>
@@ -2279,17 +2281,18 @@ subsection: menus
2279
2281
  </button>
2280
2282
  <div class="pf-v5-c-context-selector__menu">
2281
2283
  <div class="pf-v5-c-context-selector__menu-search">
2282
- <div class="pf-v5-c-search-input">
2283
- <div class="pf-v5-c-search-input__bar">
2284
- <span class="pf-v5-c-search-input__text">
2285
- <span class="pf-v5-c-search-input__icon">
2286
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2284
+ <div class="pf-v5-c-text-input-group">
2285
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
2286
+ <span class="pf-v5-c-text-input-group__text">
2287
+ <span class="pf-v5-c-text-input-group__icon">
2288
+ <i class="fas fa-fw fa-search"></i>
2287
2289
  </span>
2288
2290
  <input
2289
- class="pf-v5-c-search-input__text-input"
2291
+ class="pf-v5-c-text-input-group__text-input"
2290
2292
  type="text"
2291
2293
  placeholder="Search"
2292
- aria-label="Search"
2294
+ value
2295
+ aria-label="Search input"
2293
2296
  />
2294
2297
  </span>
2295
2298
  </div>
@@ -2578,20 +2581,18 @@ subsection: menus
2578
2581
  hidden
2579
2582
  >
2580
2583
  <div class="pf-v5-c-app-launcher__menu-search">
2581
- <div class="pf-v5-c-search-input">
2582
- <div class="pf-v5-c-search-input__bar">
2583
- <span class="pf-v5-c-search-input__text">
2584
- <span class="pf-v5-c-search-input__icon">
2585
- <i
2586
- class="fas fa-search fa-fw"
2587
- aria-hidden="true"
2588
- ></i>
2584
+ <div class="pf-v5-c-text-input-group">
2585
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
2586
+ <span class="pf-v5-c-text-input-group__text">
2587
+ <span class="pf-v5-c-text-input-group__icon">
2588
+ <i class="fas fa-fw fa-search"></i>
2589
2589
  </span>
2590
2590
  <input
2591
- class="pf-v5-c-search-input__text-input"
2591
+ class="pf-v5-c-text-input-group__text-input"
2592
2592
  type="text"
2593
- placeholder="Filter by name"
2594
- aria-label="Filter by name"
2593
+ placeholder="Filer by name"
2594
+ value
2595
+ aria-label="Search input"
2595
2596
  />
2596
2597
  </span>
2597
2598
  </div>
@@ -3109,22 +3110,24 @@ subsection: menus
3109
3110
  </div>
3110
3111
  <div class="pf-v5-c-menu__search">
3111
3112
  <div class="pf-v5-c-menu__search-input">
3112
- <div class="pf-v5-c-search-input">
3113
- <div class="pf-v5-c-search-input__bar">
3114
- <span class="pf-v5-c-search-input__text">
3113
+ <div class="pf-v5-c-text-input-group">
3114
+ <div
3115
+ class="pf-v5-c-text-input-group__main pf-m-icon"
3116
+ >
3117
+ <span
3118
+ class="pf-v5-c-text-input-group__text"
3119
+ >
3115
3120
  <span
3116
- class="pf-v5-c-search-input__icon"
3121
+ class="pf-v5-c-text-input-group__icon"
3117
3122
  >
3118
- <i
3119
- class="fas fa-search fa-fw"
3120
- aria-hidden="true"
3121
- ></i>
3123
+ <i class="fas fa-fw fa-search"></i>
3122
3124
  </span>
3123
3125
  <input
3124
- class="pf-v5-c-search-input__text-input"
3126
+ class="pf-v5-c-text-input-group__text-input"
3125
3127
  type="text"
3126
3128
  placeholder="Search"
3127
- aria-label="Search"
3129
+ value
3130
+ aria-label="Search input"
3128
3131
  />
3129
3132
  </span>
3130
3133
  </div>
@@ -3428,17 +3431,18 @@ subsection: menus
3428
3431
  </button>
3429
3432
  <div class="pf-v5-c-context-selector__menu" hidden>
3430
3433
  <div class="pf-v5-c-context-selector__menu-search">
3431
- <div class="pf-v5-c-search-input">
3432
- <div class="pf-v5-c-search-input__bar">
3433
- <span class="pf-v5-c-search-input__text">
3434
- <span class="pf-v5-c-search-input__icon">
3435
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3434
+ <div class="pf-v5-c-text-input-group">
3435
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
3436
+ <span class="pf-v5-c-text-input-group__text">
3437
+ <span class="pf-v5-c-text-input-group__icon">
3438
+ <i class="fas fa-fw fa-search"></i>
3436
3439
  </span>
3437
3440
  <input
3438
- class="pf-v5-c-search-input__text-input"
3441
+ class="pf-v5-c-text-input-group__text-input"
3439
3442
  type="text"
3440
3443
  placeholder="Search"
3441
- aria-label="Search"
3444
+ value
3445
+ aria-label="Search input"
3442
3446
  />
3443
3447
  </span>
3444
3448
  </div>
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -76,20 +76,18 @@ cssPrefix: pf-d-dashboard
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 @@ cssPrefix: pf-d-dashboard
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>