fix(searchbar): update alignment of chips and other elements in toolbar (#19596)

fixes #19495 fixes #19502

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

@@ -155,6 +155,15 @@
   }
 }
 
+// Searchbar in Toolbar
+// -----------------------------------------
+
+:host-context(ion-toolbar) {
+  @include padding(1px, null, 15px, null);
+
+  height: 52px;
+}
+
 // Searchbar in Toolbar Color
 // -----------------------------------------
 

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

@@ -33,6 +33,11 @@
             <ion-button>Clear</ion-button>
           </ion-buttons>
         </ion-toolbar>
+        <ion-toolbar>
+          <ion-back-button default-href="#" slot="start"></ion-back-button>
+          <ion-searchbar translucent></ion-searchbar>
+          <ion-chip slot="end" outline>Chip</ion-chip>
+        </ion-toolbar>
       </ion-header>
 
       <ion-content id="content" fullscreen>

core/src/components/toolbar/toolbar.ios.scss

@@ -41,20 +41,19 @@
   @include padding(0, null);
 }
 
-// TODO - important is needed because searchbar is scoped
-:host(.toolbar-searchbar) ::slotted(ion-searchbar) {
-  /* stylelint-disable */
-  height: 52px !important;
-
-  padding-top: 1px !important;
-  padding-bottom: 15px !important;
-  /* stylelint-enable */
-}
-
-:host(.toolbar-searchbar) ::slotted(ion-buttons) {
+:host(.toolbar-searchbar) ::slotted(*) {
   align-self: start;
 }
 
+:host(.toolbar-searchbar) ::slotted(ion-chip) {
+  @include margin(3px, null, null, null);
+}
+
+:host(.toolbar-searchbar) ::slotted(ion-back-button) {
+  height: 38px;
+}
+
+
 // iOS Toolbar Slot Placement
 // --------------------------------------------------