javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(searchbar): update to match style guide and use native buttons

Browse Source 
this updates the cancel button so it is only added to the dom when
shouldCancel is enabled and it gets added to different places based on
the mode
This commit is contained in:
Brandy Carney
2018-02-06 10:17:05 -05:00
parent 1c9cf53f09
commit efbd82f654
6 changed files with 229 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
packages/core/src/components/searchbar/searchbar.ios.scss
View File

@ -26,7 +26,7 @@
// Searchbar Search Icon // Searchbar Search Icon
// ----------------------------------------- // -----------------------------------------
.searchbar-ios .searchbar-search-icon { .searchbar-search-icon-ios {
@include background-position(center); @include background-position(center);
@include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $searchbar-ios-input-search-icon-color); @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $searchbar-ios-input-search-icon-color);
@include margin-horizontal(calc(50% - 60px), null); @include margin-horizontal(calc(50% - 60px), null);
@ -63,7 +63,7 @@
// Searchbar Clear Input Icon // Searchbar Clear Input Icon
// ----------------------------------------- // -----------------------------------------
.searchbar-ios ion-button.searchbar-clear-icon { .searchbar-ios .searchbar-clear-icon {
@include position(0, 0, null, null); @include position(0, 0, null, null);
@include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $searchbar-ios-input-clear-icon-color); @include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $searchbar-ios-input-clear-icon-color);
@include background-position(center); @include background-position(center);
@ -73,36 +73,35 @@
width: 30px; width: 30px;
height: 100%; height: 100%;
background-color: transparent;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: $searchbar-ios-input-clear-icon-size; background-size: $searchbar-ios-input-clear-icon-size;
} }
// Searchbar Cancel (iOS only) // Searchbar Cancel
// ----------------------------------------- // -----------------------------------------
.searchbar-ios .searchbar-ios-cancel { .searchbar-cancel-button-ios {
@include margin-horizontal(0, null); @include padding(0, 0, 0, 8px);
font-size: $searchbar-ios-cancel-button-font-size;
display: none; display: none;
flex-shrink: 0; flex-shrink: 0;
height: 30px; color: $searchbar-ios-cancel-button-color;
background-color: $searchbar-ios-cancel-button-background-color;
cursor: pointer; cursor: pointer;
} }
.searchbar-ios button.searchbar-ios-cancel {
@include padding(0, 0, 0, 8px);
@include margin(0);
}
// Searchbar Left Aligned (iOS Only)
// Searchbar Left Aligned (iOS only)
// ----------------------------------------- // -----------------------------------------
.searchbar-ios.searchbar-left-aligned .searchbar-search-icon { .searchbar-left-aligned .searchbar-search-icon-ios {
@include margin-horizontal(0, null); @include margin-horizontal(0, null);
} }
@ -111,31 +110,33 @@
} }
// Searchbar Has Focus // Searchbar Has Focus & Animated
// ----------------------------------------- // -----------------------------------------
.searchbar-ios.searchbar-show-cancel.searchbar-has-focus .searchbar-ios-cancel { .searchbar-show-cancel.searchbar-has-focus .searchbar-cancel-button-ios,
.searchbar-show-cancel.searchbar-animated .searchbar-cancel-button-ios {
display: block; display: block;
} }
.searchbar-animated .searchbar-search-icon-ios,
// Searchbar in Toolbar .searchbar-ios.searchbar-animated .searchbar-input {
// ----------------------------------------- transition: $searchbar-ios-input-transition;
.toolbar .searchbar-ios .searchbar-ios-cancel {
@include padding(0);
} }
.toolbar .searchbar-ios.searchbar-has-focus .searchbar-ios-cancel { .searchbar-animated.searchbar-has-focus .searchbar-cancel-button-ios {
@include padding-horizontal(8px, null); opacity: 1;
pointer-events: auto;
} }
.searchbar-animated .searchbar-cancel-button-ios {
@include margin-horizontal(null, -100%);
@include transform(translate3d(0, 0, 0));
// Searchbar Cancel (MD only) opacity: 0;
// ----------------------------------------- transition: $searchbar-ios-cancel-transition;
.searchbar-ios .searchbar-md-cancel { pointer-events: none;
display: none;
} }
@ -148,15 +149,15 @@
$color-shade: ion-color($colors-ios, $color-name, shade, ios); $color-shade: ion-color($colors-ios, $color-name, shade, ios);
$color-tint: ion-color($colors-ios, $color-name, tint, ios); $color-tint: ion-color($colors-ios, $color-name, tint, ios);
.searchbar-ios-#{$color-name} .searchbar-ios-cancel { .searchbar-ios-#{$color-name} .searchbar-cancel-button-ios {
color: $color-base; color: $color-base;
} }
.enable-hover .searchbar-ios-#{$color-name} .searchbar-ios-cancel:hover { .enable-hover .searchbar-ios-#{$color-name} .searchbar-cancel-button-ios:hover {
color: $color-tint; color: $color-tint;
} }
.toolbar-ios-#{$color-name} .searchbar-ios .searchbar-search-icon { .toolbar-ios-#{$color-name} .searchbar-search-icon-ios {
@include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $color-contrast); @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $color-contrast);
opacity: .5; opacity: .5;
} }
@ -172,35 +173,7 @@
opacity: .5; opacity: .5;
} }
.toolbar-ios-#{$color-name} .searchbar-ios .searchbar-ios-cancel { .toolbar-ios-#{$color-name} .searchbar-ios .searchbar-cancel-button-ios {
color: $color-contrast; color: $color-contrast;
} }
} }
// Searchbar animation
// -----------------------------------------
.searchbar-ios.searchbar-animated.searchbar-show-cancel .searchbar-ios-cancel {
display: block;
}
.searchbar-ios.searchbar-animated .searchbar-search-icon,
.searchbar-ios.searchbar-animated .searchbar-input {
transition: $searchbar-ios-input-transition;
}
.searchbar-animated.searchbar-has-focus .searchbar-ios-cancel {
opacity: 1;
pointer-events: auto;
}
.searchbar-animated .searchbar-ios-cancel {
@include margin-horizontal(null, -100%);
@include transform(translate3d(0, 0, 0));
opacity: 0;
transition: $searchbar-ios-cancel-transition;
pointer-events: none;
}

50
packages/core/src/components/searchbar/searchbar.ios.vars.scss
View File

@ -1,61 +1,73 @@
@import "../../themes/ionic.globals.ios"; @import "../../themes/ionic.globals.ios";
@import "../button/button.vars";
@import "../button/button.ios.vars";
// iOS Searchbar // iOS Searchbar
// -------------------------------------------------- // --------------------------------------------------
/// @prop - Padding top of the searchbar /// @prop - Padding top of the searchbar
$searchbar-ios-padding-top: 12px !default; $searchbar-ios-padding-top: 12px !default;
/// @prop - Padding end of the searchbar /// @prop - Padding end of the searchbar
$searchbar-ios-padding-end: $searchbar-ios-padding-top !default; $searchbar-ios-padding-end: $searchbar-ios-padding-top !default;
/// @prop - Padding bottom of the searchbar /// @prop - Padding bottom of the searchbar
$searchbar-ios-padding-bottom: $searchbar-ios-padding-top !default; $searchbar-ios-padding-bottom: $searchbar-ios-padding-top !default;
/// @prop - Padding start of the searchbar /// @prop - Padding start of the searchbar
$searchbar-ios-padding-start: $searchbar-ios-padding-end !default; $searchbar-ios-padding-start: $searchbar-ios-padding-end !default;
/// @prop - Font family of the searchbar /// @prop - Font family of the searchbar
$searchbar-ios-font-family: $font-family-ios-base !default; $searchbar-ios-font-family: $font-family-ios-base !default;
/// @prop - Minimum height of the searchbar /// @prop - Minimum height of the searchbar
$searchbar-ios-min-height: 44px !default; $searchbar-ios-min-height: 44px !default;
/// @prop - Font size of the searchbar cancel button
$searchbar-ios-cancel-button-font-size: 16px !default;
/// @prop - Color of the searchbar cancel button
$searchbar-ios-cancel-button-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Background color of the searchbar cancel button
$searchbar-ios-cancel-button-background-color: transparent !default;
/// @prop - Color of the searchbar input search icon /// @prop - Color of the searchbar input search icon
$searchbar-ios-input-search-icon-color: $text-ios-color-step-200 !default; $searchbar-ios-input-search-icon-color: $text-ios-color-step-200 !default;
/// @prop - Svg for the searchbar input search icon /// @prop - Svg for the searchbar input search icon
$searchbar-ios-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='fg-color' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='fg-color' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default; $searchbar-ios-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='fg-color' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='fg-color' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
/// @prop - Size of the searchbar input search icon /// @prop - Size of the searchbar input search icon
$searchbar-ios-input-search-icon-size: 13px !default; $searchbar-ios-input-search-icon-size: 13px !default;
/// @prop - Height of the searchbar input /// @prop - Height of the searchbar input
$searchbar-ios-input-height: 36px !default; $searchbar-ios-input-height: 36px !default;
/// @prop - Border radius of the searchbar input /// @prop - Border radius of the searchbar input
$searchbar-ios-input-border-radius: 10px !default; $searchbar-ios-input-border-radius: 10px !default;
/// @prop - Color of the searchbar input placeholder /// @prop - Color of the searchbar input placeholder
$searchbar-ios-input-placeholder-color: $text-ios-color-step-200 !default; $searchbar-ios-input-placeholder-color: $text-ios-color-step-200 !default;
/// @prop - Color of the searchbar input text /// @prop - Color of the searchbar input text
$searchbar-ios-input-text-color: $text-ios-color !default; $searchbar-ios-input-text-color: $text-ios-color !default;
/// @prop - Background of the searchbar input /// @prop - Background of the searchbar input
$searchbar-ios-input-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default; $searchbar-ios-input-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
/// @prop - Transition of the searchbar input /// @prop - Transition of the searchbar input
$searchbar-ios-input-transition: all 300ms ease !default; $searchbar-ios-input-transition: all 300ms ease !default;
/// @prop - Transition of the searchbar input cancel button /// @prop - Transition of the searchbar input cancel button
$searchbar-ios-cancel-transition: all 300ms ease !default; $searchbar-ios-cancel-transition: all 300ms ease !default;
/// @prop - Color of the searchbar input clear icon /// @prop - Color of the searchbar input clear icon
$searchbar-ios-input-clear-icon-color: $text-ios-color-step-200 !default; $searchbar-ios-input-clear-icon-color: $text-ios-color-step-200 !default;
/// @prop - Svg for the searchbar input clear icon /// @prop - Svg for the searchbar input clear icon
$searchbar-ios-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='fg-color' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default; $searchbar-ios-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='fg-color' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
/// @prop - Size of the searchbar input clear icon /// @prop - Size of the searchbar input clear icon
$searchbar-ios-input-clear-icon-size: 18px !default; $searchbar-ios-input-clear-icon-size: 18px !default;

41
packages/core/src/components/searchbar/searchbar.md.scss
View File

@ -16,7 +16,7 @@
// Searchbar Search Icon // Searchbar Search Icon
// ----------------------------------------- // -----------------------------------------
.searchbar-md .searchbar-search-icon { .searchbar-search-icon-md {
@include position(11px, null, null, 16px); @include position(11px, null, null, 16px);
@include svg-background-image($searchbar-md-input-search-icon-svg, true); @include svg-background-image($searchbar-md-input-search-icon-svg, true);
@ -25,32 +25,36 @@
} }
// Searchbar Cancel Icon (MD only) // Searchbar Cancel Icon
// ----------------------------------------- // -----------------------------------------
.searchbar-md .searchbar-md-cancel { .searchbar-cancel-button-md {
@include position(0, null, null, 10px); @include position(0, null, null, 10px);
@include margin(0); @include margin(0);
display: none; display: none;
width: $searchbar-md-input-search-icon-size + 1; background-color: $searchbar-md-cancel-button-background-color;
color: $searchbar-md-cancel-button-color;
font-size: $searchbar-md-cancel-button-font-size;
height: 100%; height: 100%;
} }
// Searchbar Search & Cancel Icon // Searchbar Search & Cancel Icon
// ----------------------------------------- // -----------------------------------------
.searchbar-md .searchbar-search-icon, .searchbar-search-icon-md,
.searchbar-md .searchbar-md-cancel { .searchbar-cancel-button-md {
position: absolute; position: absolute;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: $searchbar-md-input-search-icon-size; background-size: $searchbar-md-input-search-icon-size;
} }
.searchbar-md .searchbar-search-icon.activated, .searchbar-search-icon-md.activated,
.searchbar-md .searchbar-md-cancel.activated { .searchbar-cancel-button-md.activated {
background-color: transparent; background-color: transparent;
} }
@ -80,7 +84,7 @@
// Searchbar Clear Input Icon // Searchbar Clear Input Icon
// ----------------------------------------- // -----------------------------------------
.searchbar-md ion-button.searchbar-clear-icon { .searchbar-md .searchbar-clear-icon {
@include position(0, 13px, null, null); @include position(0, 13px, null, null);
@include svg-background-image($searchbar-md-input-clear-icon-svg); @include svg-background-image($searchbar-md-input-clear-icon-svg);
@include padding(0); @include padding(0);
@ -91,11 +95,12 @@
width: $searchbar-md-input-clear-icon-size; width: $searchbar-md-input-clear-icon-size;
height: 100%; height: 100%;
background-color: transparent;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: $searchbar-md-input-clear-icon-size; background-size: $searchbar-md-input-clear-icon-size;
} }
.searchbar-md ion-button.searchbar-clear-icon.activated { .searchbar-md .searchbar-clear-icon.activated {
background-color: transparent; background-color: transparent;
} }
@ -103,11 +108,11 @@
// Searchbar Focused // Searchbar Focused
// ----------------------------------------- // -----------------------------------------
.searchbar-md.searchbar-has-focus.searchbar-show-cancel .searchbar-search-icon { .searchbar-has-focus.searchbar-show-cancel .searchbar-search-icon-md {
display: none; display: none;
} }
.searchbar-md.searchbar-has-focus.searchbar-show-cancel .searchbar-md-cancel { .searchbar-has-focus.searchbar-show-cancel .searchbar-cancel-button-md {
display: inline-flex; display: inline-flex;
} }
@ -118,15 +123,3 @@
.toolbar .searchbar-md { .toolbar .searchbar-md {
@include padding(3px); @include padding(3px);
} }
.toolbar .searchbar-md .searchbar-md-cancel {
@include position-horizontal(14px, null);
}
// Searchbar Cancel Icon (iOS only)
// -----------------------------------------
.searchbar-md .searchbar-ios-cancel {
display: none;
}

47
packages/core/src/components/searchbar/searchbar.md.vars.scss
View File

@ -4,58 +4,67 @@
// -------------------------------------------------- // --------------------------------------------------
/// @prop - Padding top of the searchbar /// @prop - Padding top of the searchbar
$searchbar-md-padding-top: 8px !default; $searchbar-md-padding-top: 8px !default;
/// @prop - Padding end of the searchbar /// @prop - Padding end of the searchbar
$searchbar-md-padding-end: $searchbar-md-padding-top !default; $searchbar-md-padding-end: $searchbar-md-padding-top !default;
/// @prop - Padding bottom of the searchbar /// @prop - Padding bottom of the searchbar
$searchbar-md-padding-bottom: $searchbar-md-padding-top !default; $searchbar-md-padding-bottom: $searchbar-md-padding-top !default;
/// @prop - Padding start of the searchbar /// @prop - Padding start of the searchbar
$searchbar-md-padding-start: $searchbar-md-padding-end !default; $searchbar-md-padding-start: $searchbar-md-padding-end !default;
/// @prop - Font family of the searchbar /// @prop - Font family of the searchbar
$searchbar-md-font-family: $font-family-md-base !default; $searchbar-md-font-family: $font-family-md-base !default;
/// @prop - Background of the searchbar /// @prop - Background of the searchbar
$searchbar-md-background: inherit !default; $searchbar-md-background: inherit !default;
/// @prop - Color of the searchbar cancel button
$searchbar-md-cancel-button-color: $text-color-step-100 !default;
/// @prop - Background color of the searchbar cancel button
$searchbar-md-cancel-button-background-color: transparent !default;
/// @prop - Font size of the searchbar cancel button
$searchbar-md-cancel-button-font-size: 1.8em !default;
/// @prop - Color of the searchbar input search icon /// @prop - Color of the searchbar input search icon
$searchbar-md-input-search-icon-color: $text-color-step-200 !default; $searchbar-md-input-search-icon-color: $text-color-step-200 !default;
/// @prop - Svg for the searchbar input search icon /// @prop - Svg for the searchbar input search icon
$searchbar-md-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-md-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>" !default; $searchbar-md-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-md-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>" !default;
/// @prop - Size of the searchbar input search icon /// @prop - Size of the searchbar input search icon
$searchbar-md-input-search-icon-size: 20px !default; $searchbar-md-input-search-icon-size: 20px !default;
/// @prop - Height of the searchbar input /// @prop - Height of the searchbar input
$searchbar-md-input-height: auto !default; $searchbar-md-input-height: auto !default;
/// @prop - Line height of the searchbar input /// @prop - Line height of the searchbar input
$searchbar-md-input-line-height: 30px !default; $searchbar-md-input-line-height: 30px !default;
/// @prop - Box shadow of the searchbar input /// @prop - Box shadow of the searchbar input
$searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default; $searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
/// @prop - Color of the searchbar input placeholder /// @prop - Color of the searchbar input placeholder
$searchbar-md-input-placeholder-color: $placeholder-text-md-color !default; $searchbar-md-input-placeholder-color: $placeholder-text-md-color !default;
/// @prop - Color of the searchbar input text /// @prop - Color of the searchbar input text
$searchbar-md-input-text-color: $text-md-color-step-100 !default; $searchbar-md-input-text-color: $text-md-color-step-100 !default;
/// @prop - Background of the searchbar input /// @prop - Background of the searchbar input
$searchbar-md-input-background-color: $background-md-color !default; $searchbar-md-input-background-color: $background-md-color !default;
/// @prop - Border radius of the searchbar input /// @prop - Border radius of the searchbar input
$searchbar-md-input-border-radius: 2px !default; $searchbar-md-input-border-radius: 2px !default;
/// @prop - Color of the searchbar input clear icon /// @prop - Color of the searchbar input clear icon
$searchbar-md-input-clear-icon-color: $text-md-color-step-200 !default; $searchbar-md-input-clear-icon-color: $text-md-color-step-200 !default;
/// @prop - Svg for the searchbar input clear icon /// @prop - Svg for the searchbar input clear icon
$searchbar-md-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default; $searchbar-md-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
/// @prop - Size of the searchbar input clear icon /// @prop - Size of the searchbar input clear icon
$searchbar-md-input-clear-icon-size: 22px !default; $searchbar-md-input-clear-icon-size: 22px !default;

2
packages/core/src/components/searchbar/searchbar.scss
View File

@ -37,6 +37,8 @@ ion-searchbar {
border: 0; border: 0;
font-family: inherit; font-family: inherit;
box-sizing: border-box;
&:active, &:active,
&:focus { &:focus {
outline: none; outline: none;

234
packages/core/src/components/searchbar/searchbar.tsx
View File

@ -1,4 +1,6 @@
import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
import { createThemedClasses } from '../../utils/theme';
import { debounce } from '../../utils/helpers'; import { debounce } from '../../utils/helpers';
@ -13,9 +15,9 @@ import { debounce } from '../../utils/helpers';
} }
}) })
export class Searchbar { export class Searchbar {
private _isCancelVisible = false; private isCancelVisible = false;
private _shouldBlur = true; private shouldBlur = true;
private _shouldAlignLeft = true; private shouldAlignLeft = true;
@Element() private el: HTMLElement; @Element() private el: HTMLElement;
@ -23,6 +25,77 @@ export class Searchbar {
@State() focused = false; @State() focused = false;
/**
* The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color: string;
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@Prop() mode: 'ios' | 'md';
/**
* If true, enable searchbar animation. Default `false`.
*/
@Prop() animated = false;
/**
* Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`.
*/
@Prop() autocomplete = 'off';
/**
* Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`.
*/
@Prop() autocorrect = 'off';
/**
* Set the the cancel button text. Default: `"Cancel"`.
*/
@Prop() cancelButtonText = 'Cancel';
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`.
*/
@Prop() debounce = 250;
@Watch('debounce')
private debounceInput() {
this.ionInput.emit = debounce(
this.ionInput.emit.bind(this.ionInput),
this.debounce
);
}
/**
* Set the input's placeholder. Default `"Search"`.
*/
@Prop() placeholder = 'Search';
/**
* If true, show the cancel button. Default `false`.
*/
@Prop() showCancelButton = false;
/**
* If true, enable spellcheck on the input. Default `false`.
*/
@Prop() spellcheck = false;
/**
* Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`.
*/
@Prop() type = 'search';
/**
* the value of the searchbar.
*/
@Prop({ mutable: true }) value: string;
/** /**
* Emitted when the Searchbar input has changed, including when it's cleared. * Emitted when the Searchbar input has changed, including when it's cleared.
@ -49,79 +122,6 @@ export class Searchbar {
*/ */
@Event() ionFocus: EventEmitter; @Event() ionFocus: EventEmitter;
/**
* The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color: string;
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@Prop() mode: 'ios' | 'md';
/**
* If true, enable searchbar animation. Default `false`.
*/
@Prop({ mutable: true }) animated = false;
/**
* Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`.
*/
@Prop({ mutable: true }) autocomplete = 'off';
/**
* Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`.
*/
@Prop({ mutable: true }) autocorrect = 'off';
/**
* Set the the cancel button text. Default: `"Cancel"`.
*/
@Prop({ mutable: true }) cancelButtonText = 'Cancel';
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. Default `250`.
*/
@Prop({ mutable: true }) debounce = 250;
@Watch('debounce')
private debounceInput() {
this.ionInput.emit = debounce(
this.ionInput.emit.bind(this.ionInput),
this.debounce
);
}
/**
* Set the input's placeholder. Default `"Search"`.
*/
@Prop({ mutable: true }) placeholder = 'Search';
/**
* If true, show the cancel button. Default `false`.
*/
@Prop({ mutable: true }) showCancelButton = false;
/**
* If true, enable spellcheck on the input. Default `false`.
*/
@Prop({ mutable: true }) spellcheck = false;
/**
* Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`.
*/
@Prop({ mutable: true }) type = 'search';
/**
* the value of the searchbar.
*/
@Prop({ mutable: true }) value: string;
componentDidLoad() { componentDidLoad() {
this.positionElements(); this.positionElements();
this.debounceInput(); this.debounceInput();
@ -142,7 +142,7 @@ export class Searchbar {
this.ionInput.emit({event: ev}); this.ionInput.emit({event: ev});
} }
}, 16 * 4); }, 16 * 4);
this._shouldBlur = false; this.shouldBlur = false;
} }
/** /**
@ -154,15 +154,15 @@ export class Searchbar {
this.ionCancel.emit({event: ev}); this.ionCancel.emit({event: ev});
this.clearInput(ev); this.clearInput(ev);
this._shouldBlur = true; this.shouldBlur = true;
this.activated = false; this.activated = false;
} }
/** /**
* Update the Searchbar input value when the input changes * Update the Searchbar input value when the input changes
*/ */
inputChanged(ev: any) { inputChanged(ev: Event) {
this.value = ev.target.value; this.value = ev.target && (ev.target as HTMLInputElement).value;
this.ionInput.emit(ev); this.ionInput.emit(ev);
} }
@ -186,11 +186,11 @@ export class Searchbar {
inputBlurred() { inputBlurred() {
const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElement; const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElement;
// _shouldBlur determines if it should blur // shouldBlur determines if it should blur
// if we are clearing the input we still want to stay focused in the input // if we are clearing the input we still want to stay focused in the input
if (this._shouldBlur === false) { if (this.shouldBlur === false) {
inputEl.focus(); inputEl.focus();
this._shouldBlur = true; this.shouldBlur = true;
this.ionBlur.emit({this: this}); this.ionBlur.emit({this: this});
this.inputUpdated(); this.inputUpdated();
return; return;
@ -218,15 +218,15 @@ export class Searchbar {
* based on the input value and if it is focused. (ios only) * based on the input value and if it is focused. (ios only)
*/ */
positionElements() { positionElements() {
const prevAlignLeft = this._shouldAlignLeft; const prevAlignLeft = this.shouldAlignLeft;
const _shouldAlignLeft = (!this.animated || (this.value && this.value.toString().trim() !== '') || this.focused === true); const shouldAlignLeft = (!this.animated || (this.value && this.value.toString().trim() !== '') || this.focused === true);
this._shouldAlignLeft = _shouldAlignLeft; this.shouldAlignLeft = shouldAlignLeft;
if (this.mode !== 'ios') { if (this.mode !== 'ios') {
return; return;
} }
if (prevAlignLeft !== _shouldAlignLeft) { if (prevAlignLeft !== shouldAlignLeft) {
this.positionPlaceholder(); this.positionPlaceholder();
} }
@ -243,7 +243,7 @@ export class Searchbar {
const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElement; const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElement;
const iconEl = this.el.querySelector('.searchbar-search-icon') as HTMLElement; const iconEl = this.el.querySelector('.searchbar-search-icon') as HTMLElement;
if (this._shouldAlignLeft) { if (this.shouldAlignLeft) {
inputEl.removeAttribute('style'); inputEl.removeAttribute('style');
iconEl.removeAttribute('style'); iconEl.removeAttribute('style');
@ -279,12 +279,12 @@ export class Searchbar {
*/ */
positionCancelButton() { positionCancelButton() {
const isRTL = document.dir === 'rtl'; const isRTL = document.dir === 'rtl';
const cancelButton = this.el.querySelector('.searchbar-ios-cancel') as HTMLElement; const cancelButton = this.el.querySelector('.searchbar-cancel-button-ios') as HTMLElement;
const shouldShowCancel = this.focused; const shouldShowCancel = this.focused;
if (shouldShowCancel !== this._isCancelVisible) { if (shouldShowCancel !== this.isCancelVisible) {
const cancelStyle = cancelButton.style; const cancelStyle = cancelButton.style;
this._isCancelVisible = shouldShowCancel; this.isCancelVisible = shouldShowCancel;
if (shouldShowCancel) { if (shouldShowCancel) {
if (isRTL) { if (isRTL) {
cancelStyle.marginLeft = '0'; cancelStyle.marginLeft = '0';
@ -311,26 +311,33 @@ export class Searchbar {
'searchbar-animated': this.animated, 'searchbar-animated': this.animated,
'searchbar-has-value': (this.value !== undefined && this.value !== ''), 'searchbar-has-value': (this.value !== undefined && this.value !== ''),
'searchbar-show-cancel': this.showCancelButton, 'searchbar-show-cancel': this.showCancelButton,
'searchbar-left-aligned': this._shouldAlignLeft, 'searchbar-left-aligned': this.shouldAlignLeft,
'searchbar-has-focus': this.focused 'searchbar-has-focus': this.focused
} }
}; };
} }
// TODO remove the ion-buttons and replace with native buttons to remove
// the button dependency
render() { render() {
return [ const cancelButtonClasses = createThemedClasses(this.mode, this.color, 'searchbar-cancel-button');
<div class='searchbar-input-container'> const searchIconClasses = createThemedClasses(this.mode, this.color, 'searchbar-search-icon');
<ion-button
const cancelButton =
this.showCancelButton
? <button
tabindex={this.mode === 'ios' && !this.activated ? -1 : null}
onClick={this.cancelSearchbar.bind(this)} onClick={this.cancelSearchbar.bind(this)}
onMouseDown={this.cancelSearchbar.bind(this)} onMouseDown={this.cancelSearchbar.bind(this)}
fill='clear' class={cancelButtonClasses}>
color='dark' { this.mode === 'md'
class='searchbar-md-cancel'> ? <ion-icon name='md-arrow-back'></ion-icon>
<ion-icon name='md-arrow-back'></ion-icon> : this.cancelButtonText }
</ion-button> </button>
<div class='searchbar-search-icon'></div> : null;
const searchbar: JSX.Element[] = [
<div class='searchbar-input-container'>
{ this.mode === 'md' ? cancelButton : null }
<div class={searchIconClasses}></div>
<input <input
class='searchbar-input' class='searchbar-input'
onInput={this.inputChanged.bind(this)} onInput={this.inputChanged.bind(this)}
@ -342,21 +349,18 @@ export class Searchbar {
autoComplete={this.autocomplete} autoComplete={this.autocomplete}
autoCorrect={this.autocorrect} autoCorrect={this.autocorrect}
spellCheck={this.spellcheck}/> spellCheck={this.spellcheck}/>
<ion-button <button
fill='clear'
class='searchbar-clear-icon' class='searchbar-clear-icon'
onClick={this.clearInput.bind(this)} onClick={this.clearInput.bind(this)}
onMouseDown={this.clearInput.bind(this)}> onMouseDown={this.clearInput.bind(this)}>
</ion-button> </button>
</div>, </div>
<ion-button
tabindex={this.activated ? 1 : -1}
fill='clear'
onClick={this.cancelSearchbar.bind(this)}
onMouseDown={this.cancelSearchbar.bind(this)}
class='searchbar-ios-cancel'>
{this.cancelButtonText}
</ion-button>
]; ];
if (this.mode === 'ios') {
searchbar.push(cancelButton);
}
return searchbar;
} }
} }