From 4d57ccf2ef72c885f8dbba6c7c1a95fc6c85e83c Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 2 Oct 2019 11:42:17 -0400
Subject: [PATCH] fix(searchbar): update padding and button alignment

fixes #19502
---
 .../searchbar/test/toolbar/index.html         | 36 ++++++++++++-------
 core/src/components/toolbar/toolbar.ios.scss  |  8 +++--
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/core/src/components/searchbar/test/toolbar/index.html b/core/src/components/searchbar/test/toolbar/index.html
index 46d54b66a31..cebf95934a4 100644
--- a/core/src/components/searchbar/test/toolbar/index.html
+++ b/core/src/components/searchbar/test/toolbar/index.html
@@ -16,70 +16,82 @@
 
       <ion-header no-border translucent>
         <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button>Undo</ion-button>
+          </ion-buttons>
           <ion-title>Searchbar - Toolbar</ion-title>
+          <ion-buttons slot="end">
+            <ion-button>Clear</ion-button>
+          </ion-buttons>
         </ion-toolbar>
         <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button>Undo</ion-button>
+          </ion-buttons>
           <ion-searchbar translucent></ion-searchbar>
+          <ion-buttons slot="end">
+            <ion-button>Clear</ion-button>
+          </ion-buttons>
         </ion-toolbar>
       </ion-header>
 
       <ion-content id="content" fullscreen>
-        <h5 class="ion-padding-start ion-padding-top"> Search - Transparent Toolbar </h5>
+        <h5 class="ion-padding-start"> Search - Transparent Toolbar </h5>
         <ion-toolbar transparent>
           <ion-searchbar show-cancel-button="focus"></ion-searchbar>
         </ion-toolbar>
 
-        <h5 class="ion-padding-start ion-padding-top"> Search - Default Toolbar </h5>
+        <h5 class="ion-padding-start"> Search - Default Toolbar </h5>
         <ion-toolbar>
           <ion-searchbar show-cancel-button="focus"></ion-searchbar>
         </ion-toolbar>
 
-        <h5 class="ion-padding-start ion-padding-top"> Search - Primary Toolbar </h5>
+        <h5 class="ion-padding-start"> Search - Primary Toolbar </h5>
         <ion-toolbar color="primary">
           <ion-searchbar show-cancel-button="focus"></ion-searchbar>
         </ion-toolbar>
 
-        <h5 class="ion-padding-start ion-padding-top"> Search - Secondary Toolbar </h5>
+        <h5 class="ion-padding-start"> Search - Secondary Toolbar </h5>
         <ion-toolbar color="secondary">
           <ion-searchbar show-cancel-button="focus"></ion-searchbar>
         </ion-toolbar>
 
-        <h5 class="ion-padding-start ion-padding-top"> Search - Tertiary Toolbar </h5>
+        <h5 class="ion-padding-start"> Search - Tertiary Toolbar </h5>
         <ion-toolbar color="tertiary">
           <ion-searchbar show-cancel-button="focus"></ion-searchbar>
         </ion-toolbar>
 
-        <h5 class="ion-padding-start ion-padding-top"> Search - Success Toolbar </h5>
+        <h5 class="ion-padding-start"> Search - Success Toolbar </h5>
         <ion-toolbar color="success">
           <ion-searchbar show-cancel-button="focus"></ion-searchbar>
         </ion-toolbar>
 
-        <h5 class="ion-padding-start ion-padding-top"> Search - Warning Toolbar </h5>
+        <h5 class="ion-padding-start"> Search - Warning Toolbar </h5>
         <ion-toolbar color="warning">
           <ion-searchbar show-cancel-button="focus"></ion-searchbar>
         </ion-toolbar>
 
-        <h5 class="ion-padding-start ion-padding-top"> Search - Danger Toolbar </h5>
+        <h5 class="ion-padding-start"> Search - Danger Toolbar </h5>
         <ion-toolbar color="danger">
           <ion-searchbar show-cancel-button="focus"></ion-searchbar>
         </ion-toolbar>
 
-        <h5 class="ion-padding-start ion-padding-top"> Search - Light Toolbar </h5>
+        <h5 class="ion-padding-start"> Search - Light Toolbar </h5>
         <ion-toolbar color="light">
           <ion-searchbar show-cancel-button="focus"></ion-searchbar>
         </ion-toolbar>
 
-        <h5 class="ion-padding-start ion-padding-top"> Search - Medium Toolbar </h5>
+        <h5 class="ion-padding-start"> Search - Medium Toolbar </h5>
         <ion-toolbar color="medium">
           <ion-searchbar show-cancel-button="focus"></ion-searchbar>
         </ion-toolbar>
 
-        <h5 class="ion-padding-start ion-padding-top"> Search - Dark Toolbar </h5>
+        <h5 class="ion-padding-start"> Search - Dark Toolbar </h5>
         <ion-toolbar color="dark">
           <ion-searchbar show-cancel-button="focus" placeholder="Filter Schedules"></ion-searchbar>
         </ion-toolbar>
 
-        <h5 class="ion-padding-start ion-padding-top"> Search - Dark Toolbar, Primary Search </h5>
+        <h5 class="ion-padding-start"> Search - Dark Toolbar, Primary Search </h5>
         <ion-toolbar color="dark">
           <ion-searchbar show-cancel-button="focus" color="primary" placeholder="Filter Schedules"></ion-searchbar>
         </ion-toolbar>
diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss
index 02f5649e33e..642fe16f646 100644
--- a/core/src/components/toolbar/toolbar.ios.scss
+++ b/core/src/components/toolbar/toolbar.ios.scss
@@ -38,7 +38,7 @@
 // --------------------------------------------------
 
 :host(.toolbar-searchbar) .toolbar-container {
-  @include padding(0);
+  @include padding(0, null);
 }
 
 // TODO - important is needed because searchbar is scoped
@@ -47,12 +47,14 @@
   height: 52px !important;
 
   padding-top: 1px !important;
-  padding-right: 16px !important;
   padding-bottom: 15px !important;
-  padding-left: 16px !important;
   /* stylelint-enable */
 }
 
+:host(.toolbar-searchbar) ::slotted(ion-buttons) {
+  align-self: start;
+}
+
 // iOS Toolbar Slot Placement
 // --------------------------------------------------