Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from Oct 2, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
36 changes: 24 additions & 12 deletions core/src/components/searchbar/test/toolbar/index.html
View file
Open in desktop
Expand Up @@ -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>
Expand Down
8 changes: 5 additions & 3 deletions core/src/components/toolbar/toolbar.ios.scss
View file
Open in desktop
Expand Up @@ -38,7 +38,7 @@
// --------------------------------------------------

:host(.toolbar-searchbar) .toolbar-container {
@include padding(0);
@include padding(0, null);
}

// TODO - important is needed because searchbar is scoped
Expand All @@ -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
// --------------------------------------------------

Expand Down