feat(searchbar): add --box-shadow variable to style searchbar input (#19838)

* Updates searchbar.md.scss to expose box-shadow

We would like to style the box-shadow property in searchbar and give the parent the ability to control it.

* fix(searchbar): add box shadow to main input for both modes

Author: antoinecfmws

core/api.txt

@@ -965,6 +965,7 @@ ion-searchbar,event,ionClear,void,true
 ion-searchbar,event,ionFocus,void,true
 ion-searchbar,event,ionInput,KeyboardEvent,true
 ion-searchbar,css-prop,--background
+ion-searchbar,css-prop,--box-shadow
 ion-searchbar,css-prop,--cancel-button-color
 ion-searchbar,css-prop,--clear-button-color
 ion-searchbar,css-prop,--color

core/src/components/searchbar/readme.md

@@ -280,7 +280,8 @@ Type: `Promise<void>`
 
 | Name                        | Description                              |
 | --------------------------- | ---------------------------------------- |
-| `--background`              | Background of the searchbar              |
+| `--background`              | Background of the searchbar input        |
+| `--box-shadow`              | Box shadow of the searchbar input        |
 | `--cancel-button-color`     | Color of the searchbar cancel button     |
 | `--clear-button-color`      | Color of the searchbar clear button      |
 | `--color`                   | Color of the searchbar text              |

core/src/components/searchbar/searchbar.ios.scss

@@ -5,11 +5,12 @@
 // --------------------------------------------------
 
 :host {
-  --clear-button-color: #{$searchbar-ios-input-clear-icon-color};
+  --background: #{$searchbar-ios-input-background-color};
+  --box-shadow: none;
   --cancel-button-color: #{$searchbar-ios-cancel-button-color};
+  --clear-button-color: #{$searchbar-ios-input-clear-icon-color};
   --color: #{$searchbar-ios-input-text-color};
   --icon-color: #{$searchbar-ios-input-search-icon-color};
-  --background: #{$searchbar-ios-input-background-color};
 
   @include padding($searchbar-ios-padding-top, $searchbar-ios-padding-end, $searchbar-ios-padding-bottom, $searchbar-ios-padding-start);
 
@@ -20,8 +21,6 @@
 
 .searchbar-input-container {
   height: $searchbar-ios-input-height;
-
-  contain: strict;
 }
 
 

core/src/components/searchbar/searchbar.md.scss

@@ -5,11 +5,12 @@
 // --------------------------------------------------
 
 :host {
-  --clear-button-color: initial;
+  --background: #{$searchbar-md-input-background-color};
+  --box-shadow: #{$searchbar-md-input-box-shadow};
   --cancel-button-color: #{$searchbar-md-cancel-button-color};
+  --clear-button-color: initial;
   --color: #{$searchbar-md-input-text-color};
   --icon-color: #{$searchbar-md-input-search-icon-color};
-  --background: #{$searchbar-md-input-background-color};
 
   @include padding($searchbar-md-padding-top, $searchbar-md-padding-end, $searchbar-md-padding-bottom, $searchbar-md-padding-start);
 
@@ -67,8 +68,6 @@
   font-weight: 400;
 
   line-height: $searchbar-md-input-line-height;
-
-  box-shadow: $searchbar-md-input-box-shadow;
 }
 
 

core/src/components/searchbar/searchbar.scss

@@ -5,7 +5,8 @@
 
 :host {
   /**
-   * @prop --background: Background of the searchbar
+   * @prop --background: Background of the searchbar input
+   * @prop --box-shadow: Box shadow of the searchbar input
    * @prop --cancel-button-color: Color of the searchbar cancel button
    * @prop --clear-button-color: Color of the searchbar clear button
    * @prop --color: Color of the searchbar text
@@ -68,8 +69,6 @@
 .searchbar-input {
   @include text-inherit();
 
-  box-sizing: border-box;
-
   display: block;
 
   width: 100%;
@@ -81,6 +80,10 @@
   background: var(--background);
 
   font-family: inherit;
+
+  box-shadow: var(--box-shadow);
+
+  box-sizing: border-box;
   appearance: none;
 
   &::placeholder {

core/src/components/searchbar/test/basic/index.html

@@ -26,7 +26,7 @@ <h5 class="ion-padding-start ion-padding-top"> Search - Default </h5>
       </ion-searchbar>
 
       <h5 class="ion-padding-start ion-padding-top"> Search - No Cancel Button </h5>
-      <ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="never">
+      <ion-searchbar class="red-box" id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="never">
       </ion-searchbar>
 
       <h5 class="ion-padding-start ion-padding-top"> Search - Always Show Cancel Button</h5>
@@ -118,6 +118,12 @@ <h5 class="ion-padding-start ion-padding-top"> Search - Animated and No Cancel</
         <ion-button expand="block" color="secondary" onClick="toggleDisabled()">Toggle disabled</ion-button>
       </div>
 
+      <style>
+        .red-box {
+          --box-shadow: 0 2px 2px 0 rgba(255, 0, 0, 0.14), 0 3px 1px -2px rgba(255, 0, 0, 0.2), 0 1px 5px 0 rgba(255, 0, 0, 0.12);
+        }
+      </style>
+
       <script>
         function toggleAttr() {
           var dynamicAttr = document.getElementById('dynamicAttr');