Skip to content
Permalink
Browse files

fix(searchbar): update padding and button alignment (#19532)

fixes #19502
  • Loading branch information...
brandyscarney committed Oct 2, 2019
1 parent cdfd82a commit 77658e61cca42ee49b67d780b3905f8dcd9b5519
Showing with 29 additions and 15 deletions.
  1. +24 −12 core/src/components/searchbar/test/toolbar/index.html
  2. +5 −3 core/src/components/toolbar/toolbar.ios.scss
@@ -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>
@@ -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
// --------------------------------------------------

0 comments on commit 77658e6

Please sign in to comment.
You can’t perform that action at this time.