chore: search autocomplete style added

Author: ArathyKumar

elements/pf-search-input/demo/pf-search-input-autocomplete.html

@@ -1,19 +1,21 @@
-<pf-search-input variant="typeahead"
-             placeholder="Search">
+<div class="container">
+  <h1>Search with autocomplete</h1>
+  <pf-search-input placeholder="Search">
     <pf-search-input-option value="Alabama"> Alabama </pf-search-input-option>
     <pf-search-input-option value="New Jersey"> New Jersey </pf-search-input-option>
     <pf-search-input-option value="New York"> New York </pf-search-input-option>
     <pf-search-input-option value="New Mexico"> New Mexico </pf-search-input-option>
     <pf-search-input-option value="North Carolina"> North Carolina </pf-search-input-option>
   </pf-search-input>
+</div>
 
 <script type="module">
   import '@patternfly/elements/pf-search-input/pf-search-input.js';
 </script>
 
 <style>
-pf-search-input {
-  /* insert demo styles */
+.container{
+  padding: 40px;
 }
 </style>
 

elements/pf-search-input/pf-search-input.css

@@ -258,14 +258,15 @@
   text-align: left;
   border-radius: 0;
   flex: 1 0 auto;
-  min-height: 44px;
-  min-width: 44px;
 }
 
 #toggle-input {
   justify-content: space-between;
   padding: var(--pf-global--spacer--xs, 0.25rem) var(--pf-global--spacer--sm, 0.5rem);
 	padding-left: 40px;
+	width: 90%;
+	box-sizing: border-box;
+	max-height: 36px;
 }
 
 .disabled #toggle-input {
@@ -277,8 +278,17 @@
   background-color: transparent;
   justify-content: flex-end;
   padding: var(--pf-global--spacer--sm, 0.5rem);
+	max-height: 36px;
+	max-width: 36px;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	top: 3px;
 }
 
+
 #toggle-button:focus:before {
   border-bottom-color: var(--pf-c-select__toggle--focus--before--BorderBottomColor);
   border-bottom-width: var(--pf-c-select__toggle--focus--before--BorderBottomWidth);
@@ -305,13 +315,6 @@ pf-badge {
   padding: 0;
 }
 
-#toggle svg {
-  width: 1em;
-  height: 1em;
-  flex: 0 0 auto;
-  margin-inline-start: 1em;
-}
-
 #description {
   display: block;
 }
@@ -381,9 +384,9 @@ pf-badge {
 
 div.search-icon{
 	position: absolute;
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-    display: flex;
-    align-items: center;
+  top: 50%;
+  left: 1rem;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
 }