fix(searchbar): update padding and button alignment

fixes #19502
ionic-team · Oct 2, 2019 · c3cd670 · c3cd670
1 parent 2db9df5
commit c3cd670
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git 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
@@ -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
 // --------------------------------------------------