@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/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -78,20 +78,18 @@ wrapperTag: div
78
78
  hidden
79
79
  >
80
80
  <div class="pf-v5-c-app-launcher__menu-search">
81
- <div class="pf-v5-c-search-input">
82
- <div class="pf-v5-c-search-input__bar">
83
- <span class="pf-v5-c-search-input__text">
84
- <span class="pf-v5-c-search-input__icon">
85
- <i
86
- class="fas fa-search fa-fw"
87
- aria-hidden="true"
88
- ></i>
81
+ <div class="pf-v5-c-text-input-group">
82
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
83
+ <span class="pf-v5-c-text-input-group__text">
84
+ <span class="pf-v5-c-text-input-group__icon">
85
+ <i class="fas fa-fw fa-search"></i>
89
86
  </span>
90
87
  <input
91
- class="pf-v5-c-search-input__text-input"
88
+ class="pf-v5-c-text-input-group__text-input"
92
89
  type="text"
93
- placeholder="Filter by name"
94
- aria-label="Filter by name"
90
+ placeholder="Filer by name"
91
+ value
92
+ aria-label="Search input"
95
93
  />
96
94
  </span>
97
95
  </div>
@@ -609,22 +607,24 @@ wrapperTag: div
609
607
  </div>
610
608
  <div class="pf-v5-c-menu__search">
611
609
  <div class="pf-v5-c-menu__search-input">
612
- <div class="pf-v5-c-search-input">
613
- <div class="pf-v5-c-search-input__bar">
614
- <span class="pf-v5-c-search-input__text">
610
+ <div class="pf-v5-c-text-input-group">
611
+ <div
612
+ class="pf-v5-c-text-input-group__main pf-m-icon"
613
+ >
614
+ <span
615
+ class="pf-v5-c-text-input-group__text"
616
+ >
615
617
  <span
616
- class="pf-v5-c-search-input__icon"
618
+ class="pf-v5-c-text-input-group__icon"
617
619
  >
618
- <i
619
- class="fas fa-search fa-fw"
620
- aria-hidden="true"
621
- ></i>
620
+ <i class="fas fa-fw fa-search"></i>
622
621
  </span>
623
622
  <input
624
- class="pf-v5-c-search-input__text-input"
623
+ class="pf-v5-c-text-input-group__text-input"
625
624
  type="text"
626
625
  placeholder="Search"
627
- aria-label="Search"
626
+ value
627
+ aria-label="Search input"
628
628
  />
629
629
  </span>
630
630
  </div>
@@ -1066,10 +1066,10 @@ wrapperTag: div
1066
1066
  </span>
1067
1067
  <input
1068
1068
  class="pf-v5-c-text-input-group__text-input"
1069
- type="search"
1069
+ type="text"
1070
1070
  placeholder="Filter by name"
1071
1071
  value
1072
- aria-label="Type to filter"
1072
+ aria-label="Search input"
1073
1073
  />
1074
1074
  </span>
1075
1075
  </div>
@@ -2067,20 +2067,18 @@ wrapperTag: div
2067
2067
  hidden
2068
2068
  >
2069
2069
  <div class="pf-v5-c-app-launcher__menu-search">
2070
- <div class="pf-v5-c-search-input">
2071
- <div class="pf-v5-c-search-input__bar">
2072
- <span class="pf-v5-c-search-input__text">
2073
- <span class="pf-v5-c-search-input__icon">
2074
- <i
2075
- class="fas fa-search fa-fw"
2076
- aria-hidden="true"
2077
- ></i>
2070
+ <div class="pf-v5-c-text-input-group">
2071
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
2072
+ <span class="pf-v5-c-text-input-group__text">
2073
+ <span class="pf-v5-c-text-input-group__icon">
2074
+ <i class="fas fa-fw fa-search"></i>
2078
2075
  </span>
2079
2076
  <input
2080
- class="pf-v5-c-search-input__text-input"
2077
+ class="pf-v5-c-text-input-group__text-input"
2081
2078
  type="text"
2082
- placeholder="Filter by name"
2083
- aria-label="Filter by name"
2079
+ placeholder="Filer by name"
2080
+ value
2081
+ aria-label="Search input"
2084
2082
  />
2085
2083
  </span>
2086
2084
  </div>
@@ -2598,22 +2596,24 @@ wrapperTag: div
2598
2596
  </div>
2599
2597
  <div class="pf-v5-c-menu__search">
2600
2598
  <div class="pf-v5-c-menu__search-input">
2601
- <div class="pf-v5-c-search-input">
2602
- <div class="pf-v5-c-search-input__bar">
2603
- <span class="pf-v5-c-search-input__text">
2599
+ <div class="pf-v5-c-text-input-group">
2600
+ <div
2601
+ class="pf-v5-c-text-input-group__main pf-m-icon"
2602
+ >
2603
+ <span
2604
+ class="pf-v5-c-text-input-group__text"
2605
+ >
2604
2606
  <span
2605
- class="pf-v5-c-search-input__icon"
2607
+ class="pf-v5-c-text-input-group__icon"
2606
2608
  >
2607
- <i
2608
- class="fas fa-search fa-fw"
2609
- aria-hidden="true"
2610
- ></i>
2609
+ <i class="fas fa-fw fa-search"></i>
2611
2610
  </span>
2612
2611
  <input
2613
- class="pf-v5-c-search-input__text-input"
2612
+ class="pf-v5-c-text-input-group__text-input"
2614
2613
  type="text"
2615
2614
  placeholder="Search"
2616
- aria-label="Search"
2615
+ value
2616
+ aria-label="Search input"
2617
2617
  />
2618
2618
  </span>
2619
2619
  </div>
@@ -3055,10 +3055,10 @@ wrapperTag: div
3055
3055
  </span>
3056
3056
  <input
3057
3057
  class="pf-v5-c-text-input-group__text-input"
3058
- type="search"
3058
+ type="text"
3059
3059
  placeholder="Filter by name"
3060
3060
  value
3061
- aria-label="Type to filter"
3061
+ aria-label="Search input"
3062
3062
  />
3063
3063
  </span>
3064
3064
  </div>
@@ -3983,20 +3983,18 @@ wrapperTag: div
3983
3983
  hidden
3984
3984
  >
3985
3985
  <div class="pf-v5-c-app-launcher__menu-search">
3986
- <div class="pf-v5-c-search-input">
3987
- <div class="pf-v5-c-search-input__bar">
3988
- <span class="pf-v5-c-search-input__text">
3989
- <span class="pf-v5-c-search-input__icon">
3990
- <i
3991
- class="fas fa-search fa-fw"
3992
- aria-hidden="true"
3993
- ></i>
3986
+ <div class="pf-v5-c-text-input-group">
3987
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
3988
+ <span class="pf-v5-c-text-input-group__text">
3989
+ <span class="pf-v5-c-text-input-group__icon">
3990
+ <i class="fas fa-fw fa-search"></i>
3994
3991
  </span>
3995
3992
  <input
3996
- class="pf-v5-c-search-input__text-input"
3993
+ class="pf-v5-c-text-input-group__text-input"
3997
3994
  type="text"
3998
- placeholder="Filter by name"
3999
- aria-label="Filter by name"
3995
+ placeholder="Filer by name"
3996
+ value
3997
+ aria-label="Search input"
4000
3998
  />
4001
3999
  </span>
4002
4000
  </div>
@@ -4514,22 +4512,24 @@ wrapperTag: div
4514
4512
  </div>
4515
4513
  <div class="pf-v5-c-menu__search">
4516
4514
  <div class="pf-v5-c-menu__search-input">
4517
- <div class="pf-v5-c-search-input">
4518
- <div class="pf-v5-c-search-input__bar">
4519
- <span class="pf-v5-c-search-input__text">
4515
+ <div class="pf-v5-c-text-input-group">
4516
+ <div
4517
+ class="pf-v5-c-text-input-group__main pf-m-icon"
4518
+ >
4519
+ <span
4520
+ class="pf-v5-c-text-input-group__text"
4521
+ >
4520
4522
  <span
4521
- class="pf-v5-c-search-input__icon"
4523
+ class="pf-v5-c-text-input-group__icon"
4522
4524
  >
4523
- <i
4524
- class="fas fa-search fa-fw"
4525
- aria-hidden="true"
4526
- ></i>
4525
+ <i class="fas fa-fw fa-search"></i>
4527
4526
  </span>
4528
4527
  <input
4529
- class="pf-v5-c-search-input__text-input"
4528
+ class="pf-v5-c-text-input-group__text-input"
4530
4529
  type="text"
4531
4530
  placeholder="Search"
4532
- aria-label="Search"
4531
+ value
4532
+ aria-label="Search input"
4533
4533
  />
4534
4534
  </span>
4535
4535
  </div>
@@ -5788,20 +5788,18 @@ wrapperTag: div
5788
5788
  hidden
5789
5789
  >
5790
5790
  <div class="pf-v5-c-app-launcher__menu-search">
5791
- <div class="pf-v5-c-search-input">
5792
- <div class="pf-v5-c-search-input__bar">
5793
- <span class="pf-v5-c-search-input__text">
5794
- <span class="pf-v5-c-search-input__icon">
5795
- <i
5796
- class="fas fa-search fa-fw"
5797
- aria-hidden="true"
5798
- ></i>
5791
+ <div class="pf-v5-c-text-input-group">
5792
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
5793
+ <span class="pf-v5-c-text-input-group__text">
5794
+ <span class="pf-v5-c-text-input-group__icon">
5795
+ <i class="fas fa-fw fa-search"></i>
5799
5796
  </span>
5800
5797
  <input
5801
- class="pf-v5-c-search-input__text-input"
5798
+ class="pf-v5-c-text-input-group__text-input"
5802
5799
  type="text"
5803
- placeholder="Filter by name"
5804
- aria-label="Filter by name"
5800
+ placeholder="Filer by name"
5801
+ value
5802
+ aria-label="Search input"
5805
5803
  />
5806
5804
  </span>
5807
5805
  </div>
@@ -6319,22 +6317,24 @@ wrapperTag: div
6319
6317
  </div>
6320
6318
  <div class="pf-v5-c-menu__search">
6321
6319
  <div class="pf-v5-c-menu__search-input">
6322
- <div class="pf-v5-c-search-input">
6323
- <div class="pf-v5-c-search-input__bar">
6324
- <span class="pf-v5-c-search-input__text">
6320
+ <div class="pf-v5-c-text-input-group">
6321
+ <div
6322
+ class="pf-v5-c-text-input-group__main pf-m-icon"
6323
+ >
6324
+ <span
6325
+ class="pf-v5-c-text-input-group__text"
6326
+ >
6325
6327
  <span
6326
- class="pf-v5-c-search-input__icon"
6328
+ class="pf-v5-c-text-input-group__icon"
6327
6329
  >
6328
- <i
6329
- class="fas fa-search fa-fw"
6330
- aria-hidden="true"
6331
- ></i>
6330
+ <i class="fas fa-fw fa-search"></i>
6332
6331
  </span>
6333
6332
  <input
6334
- class="pf-v5-c-search-input__text-input"
6333
+ class="pf-v5-c-text-input-group__text-input"
6335
6334
  type="text"
6336
6335
  placeholder="Search"
6337
- aria-label="Search"
6336
+ value
6337
+ aria-label="Search input"
6338
6338
  />
6339
6339
  </span>
6340
6340
  </div>
@@ -6811,10 +6811,10 @@ wrapperTag: div
6811
6811
  </span>
6812
6812
  <input
6813
6813
  class="pf-v5-c-text-input-group__text-input"
6814
- type="search"
6814
+ type="text"
6815
6815
  placeholder="Filter by name"
6816
6816
  value
6817
- aria-label="Type to filter"
6817
+ aria-label="Search input"
6818
6818
  />
6819
6819
  </span>
6820
6820
  </div>
@@ -8001,20 +8001,18 @@ wrapperTag: div
8001
8001
  hidden
8002
8002
  >
8003
8003
  <div class="pf-v5-c-app-launcher__menu-search">
8004
- <div class="pf-v5-c-search-input">
8005
- <div class="pf-v5-c-search-input__bar">
8006
- <span class="pf-v5-c-search-input__text">
8007
- <span class="pf-v5-c-search-input__icon">
8008
- <i
8009
- class="fas fa-search fa-fw"
8010
- aria-hidden="true"
8011
- ></i>
8004
+ <div class="pf-v5-c-text-input-group">
8005
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
8006
+ <span class="pf-v5-c-text-input-group__text">
8007
+ <span class="pf-v5-c-text-input-group__icon">
8008
+ <i class="fas fa-fw fa-search"></i>
8012
8009
  </span>
8013
8010
  <input
8014
- class="pf-v5-c-search-input__text-input"
8011
+ class="pf-v5-c-text-input-group__text-input"
8015
8012
  type="text"
8016
- placeholder="Filter by name"
8017
- aria-label="Filter by name"
8013
+ placeholder="Filer by name"
8014
+ value
8015
+ aria-label="Search input"
8018
8016
  />
8019
8017
  </span>
8020
8018
  </div>
@@ -8532,22 +8530,24 @@ wrapperTag: div
8532
8530
  </div>
8533
8531
  <div class="pf-v5-c-menu__search">
8534
8532
  <div class="pf-v5-c-menu__search-input">
8535
- <div class="pf-v5-c-search-input">
8536
- <div class="pf-v5-c-search-input__bar">
8537
- <span class="pf-v5-c-search-input__text">
8533
+ <div class="pf-v5-c-text-input-group">
8534
+ <div
8535
+ class="pf-v5-c-text-input-group__main pf-m-icon"
8536
+ >
8537
+ <span
8538
+ class="pf-v5-c-text-input-group__text"
8539
+ >
8538
8540
  <span
8539
- class="pf-v5-c-search-input__icon"
8541
+ class="pf-v5-c-text-input-group__icon"
8540
8542
  >
8541
- <i
8542
- class="fas fa-search fa-fw"
8543
- aria-hidden="true"
8544
- ></i>
8543
+ <i class="fas fa-fw fa-search"></i>
8545
8544
  </span>
8546
8545
  <input
8547
- class="pf-v5-c-search-input__text-input"
8546
+ class="pf-v5-c-text-input-group__text-input"
8548
8547
  type="text"
8549
8548
  placeholder="Search"
8550
- aria-label="Search"
8549
+ value
8550
+ aria-label="Search input"
8551
8551
  />
8552
8552
  </span>
8553
8553
  </div>
@@ -9121,20 +9121,18 @@ wrapperTag: div
9121
9121
  hidden
9122
9122
  >
9123
9123
  <div class="pf-v5-c-app-launcher__menu-search">
9124
- <div class="pf-v5-c-search-input">
9125
- <div class="pf-v5-c-search-input__bar">
9126
- <span class="pf-v5-c-search-input__text">
9127
- <span class="pf-v5-c-search-input__icon">
9128
- <i
9129
- class="fas fa-search fa-fw"
9130
- aria-hidden="true"
9131
- ></i>
9124
+ <div class="pf-v5-c-text-input-group">
9125
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
9126
+ <span class="pf-v5-c-text-input-group__text">
9127
+ <span class="pf-v5-c-text-input-group__icon">
9128
+ <i class="fas fa-fw fa-search"></i>
9132
9129
  </span>
9133
9130
  <input
9134
- class="pf-v5-c-search-input__text-input"
9131
+ class="pf-v5-c-text-input-group__text-input"
9135
9132
  type="text"
9136
- placeholder="Filter by name"
9137
- aria-label="Filter by name"
9133
+ placeholder="Filer by name"
9134
+ value
9135
+ aria-label="Search input"
9138
9136
  />
9139
9137
  </span>
9140
9138
  </div>
@@ -9652,22 +9650,24 @@ wrapperTag: div
9652
9650
  </div>
9653
9651
  <div class="pf-v5-c-menu__search">
9654
9652
  <div class="pf-v5-c-menu__search-input">
9655
- <div class="pf-v5-c-search-input">
9656
- <div class="pf-v5-c-search-input__bar">
9657
- <span class="pf-v5-c-search-input__text">
9653
+ <div class="pf-v5-c-text-input-group">
9654
+ <div
9655
+ class="pf-v5-c-text-input-group__main pf-m-icon"
9656
+ >
9657
+ <span
9658
+ class="pf-v5-c-text-input-group__text"
9659
+ >
9658
9660
  <span
9659
- class="pf-v5-c-search-input__icon"
9661
+ class="pf-v5-c-text-input-group__icon"
9660
9662
  >
9661
- <i
9662
- class="fas fa-search fa-fw"
9663
- aria-hidden="true"
9664
- ></i>
9663
+ <i class="fas fa-fw fa-search"></i>
9665
9664
  </span>
9666
9665
  <input
9667
- class="pf-v5-c-search-input__text-input"
9666
+ class="pf-v5-c-text-input-group__text-input"
9668
9667
  type="text"
9669
9668
  placeholder="Search"
9670
- aria-label="Search"
9669
+ value
9670
+ aria-label="Search input"
9671
9671
  />
9672
9672
  </span>
9673
9673
  </div>
@@ -10475,20 +10475,18 @@ wrapperTag: div
10475
10475
  hidden
10476
10476
  >
10477
10477
  <div class="pf-v5-c-app-launcher__menu-search">
10478
- <div class="pf-v5-c-search-input">
10479
- <div class="pf-v5-c-search-input__bar">
10480
- <span class="pf-v5-c-search-input__text">
10481
- <span class="pf-v5-c-search-input__icon">
10482
- <i
10483
- class="fas fa-search fa-fw"
10484
- aria-hidden="true"
10485
- ></i>
10478
+ <div class="pf-v5-c-text-input-group">
10479
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
10480
+ <span class="pf-v5-c-text-input-group__text">
10481
+ <span class="pf-v5-c-text-input-group__icon">
10482
+ <i class="fas fa-fw fa-search"></i>
10486
10483
  </span>
10487
10484
  <input
10488
- class="pf-v5-c-search-input__text-input"
10485
+ class="pf-v5-c-text-input-group__text-input"
10489
10486
  type="text"
10490
- placeholder="Filter by name"
10491
- aria-label="Filter by name"
10487
+ placeholder="Filer by name"
10488
+ value
10489
+ aria-label="Search input"
10492
10490
  />
10493
10491
  </span>
10494
10492
  </div>
@@ -11006,22 +11004,24 @@ wrapperTag: div
11006
11004
  </div>
11007
11005
  <div class="pf-v5-c-menu__search">
11008
11006
  <div class="pf-v5-c-menu__search-input">
11009
- <div class="pf-v5-c-search-input">
11010
- <div class="pf-v5-c-search-input__bar">
11011
- <span class="pf-v5-c-search-input__text">
11007
+ <div class="pf-v5-c-text-input-group">
11008
+ <div
11009
+ class="pf-v5-c-text-input-group__main pf-m-icon"
11010
+ >
11011
+ <span
11012
+ class="pf-v5-c-text-input-group__text"
11013
+ >
11012
11014
  <span
11013
- class="pf-v5-c-search-input__icon"
11015
+ class="pf-v5-c-text-input-group__icon"
11014
11016
  >
11015
- <i
11016
- class="fas fa-search fa-fw"
11017
- aria-hidden="true"
11018
- ></i>
11017
+ <i class="fas fa-fw fa-search"></i>
11019
11018
  </span>
11020
11019
  <input
11021
- class="pf-v5-c-search-input__text-input"
11020
+ class="pf-v5-c-text-input-group__text-input"
11022
11021
  type="text"
11023
11022
  placeholder="Search"
11024
- aria-label="Search"
11023
+ value
11024
+ aria-label="Search input"
11025
11025
  />
11026
11026
  </span>
11027
11027
  </div>
package/docs/demos/Skeleton/examples/Skeleton.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>