diff --git a/packages/core/src/components/searchbar/searchbar.ios.scss b/packages/core/src/components/searchbar/searchbar.ios.scss index 25f04ad40f..556c3eda03 100644 --- a/packages/core/src/components/searchbar/searchbar.ios.scss +++ b/packages/core/src/components/searchbar/searchbar.ios.scss @@ -26,7 +26,7 @@ // Searchbar Search Icon // ----------------------------------------- -.searchbar-ios .searchbar-search-icon { +.searchbar-search-icon-ios { @include background-position(center); @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $searchbar-ios-input-search-icon-color); @include margin-horizontal(calc(50% - 60px), null); @@ -63,7 +63,7 @@ // Searchbar Clear Input Icon // ----------------------------------------- -.searchbar-ios ion-button.searchbar-clear-icon { +.searchbar-ios .searchbar-clear-icon { @include position(0, 0, null, null); @include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $searchbar-ios-input-clear-icon-color); @include background-position(center); @@ -73,36 +73,35 @@ width: 30px; height: 100%; + background-color: transparent; background-repeat: no-repeat; background-size: $searchbar-ios-input-clear-icon-size; } -// Searchbar Cancel (iOS only) +// Searchbar Cancel // ----------------------------------------- -.searchbar-ios .searchbar-ios-cancel { - @include margin-horizontal(0, null); +.searchbar-cancel-button-ios { + @include padding(0, 0, 0, 8px); + + font-size: $searchbar-ios-cancel-button-font-size; display: none; flex-shrink: 0; - height: 30px; + color: $searchbar-ios-cancel-button-color; + background-color: $searchbar-ios-cancel-button-background-color; 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); } @@ -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; } - -// Searchbar in Toolbar -// ----------------------------------------- - -.toolbar .searchbar-ios .searchbar-ios-cancel { - @include padding(0); +.searchbar-animated .searchbar-search-icon-ios, +.searchbar-ios.searchbar-animated .searchbar-input { + transition: $searchbar-ios-input-transition; } -.toolbar .searchbar-ios.searchbar-has-focus .searchbar-ios-cancel { - @include padding-horizontal(8px, null); +.searchbar-animated.searchbar-has-focus .searchbar-cancel-button-ios { + 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 { - display: none; + pointer-events: none; } @@ -148,15 +149,15 @@ $color-shade: ion-color($colors-ios, $color-name, shade, 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; } - .enable-hover .searchbar-ios-#{$color-name} .searchbar-ios-cancel:hover { + .enable-hover .searchbar-ios-#{$color-name} .searchbar-cancel-button-ios:hover { 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); opacity: .5; } @@ -172,35 +173,7 @@ opacity: .5; } - .toolbar-ios-#{$color-name} .searchbar-ios .searchbar-ios-cancel { + .toolbar-ios-#{$color-name} .searchbar-ios .searchbar-cancel-button-ios { 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; -} diff --git a/packages/core/src/components/searchbar/searchbar.ios.vars.scss b/packages/core/src/components/searchbar/searchbar.ios.vars.scss index 3bbf85e27d..4c21129a92 100644 --- a/packages/core/src/components/searchbar/searchbar.ios.vars.scss +++ b/packages/core/src/components/searchbar/searchbar.ios.vars.scss @@ -1,61 +1,73 @@ @import "../../themes/ionic.globals.ios"; +@import "../button/button.vars"; +@import "../button/button.ios.vars"; + // iOS 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 -$searchbar-ios-padding-end: $searchbar-ios-padding-top !default; +$searchbar-ios-padding-end: $searchbar-ios-padding-top !default; /// @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 -$searchbar-ios-padding-start: $searchbar-ios-padding-end !default; +$searchbar-ios-padding-start: $searchbar-ios-padding-end !default; /// @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 -$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 -$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 -$searchbar-ios-input-search-icon-svg: "" !default; +$searchbar-ios-input-search-icon-svg: "" !default; /// @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 -$searchbar-ios-input-height: 36px !default; +$searchbar-ios-input-height: 36px !default; /// @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 -$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 -$searchbar-ios-input-text-color: $text-ios-color !default; +$searchbar-ios-input-text-color: $text-ios-color !default; /// @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 -$searchbar-ios-input-transition: all 300ms ease !default; +$searchbar-ios-input-transition: all 300ms ease !default; /// @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 -$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 -$searchbar-ios-input-clear-icon-svg: "" !default; +$searchbar-ios-input-clear-icon-svg: "" !default; /// @prop - Size of the searchbar input clear icon -$searchbar-ios-input-clear-icon-size: 18px !default; +$searchbar-ios-input-clear-icon-size: 18px !default; diff --git a/packages/core/src/components/searchbar/searchbar.md.scss b/packages/core/src/components/searchbar/searchbar.md.scss index 50678b224c..dbb76669be 100644 --- a/packages/core/src/components/searchbar/searchbar.md.scss +++ b/packages/core/src/components/searchbar/searchbar.md.scss @@ -16,7 +16,7 @@ // Searchbar Search Icon // ----------------------------------------- -.searchbar-md .searchbar-search-icon { +.searchbar-search-icon-md { @include position(11px, null, null, 16px); @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 margin(0); 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%; } // Searchbar Search & Cancel Icon // ----------------------------------------- -.searchbar-md .searchbar-search-icon, -.searchbar-md .searchbar-md-cancel { +.searchbar-search-icon-md, +.searchbar-cancel-button-md { position: absolute; background-repeat: no-repeat; background-size: $searchbar-md-input-search-icon-size; } -.searchbar-md .searchbar-search-icon.activated, -.searchbar-md .searchbar-md-cancel.activated { +.searchbar-search-icon-md.activated, +.searchbar-cancel-button-md.activated { background-color: transparent; } @@ -80,7 +84,7 @@ // Searchbar Clear Input Icon // ----------------------------------------- -.searchbar-md ion-button.searchbar-clear-icon { +.searchbar-md .searchbar-clear-icon { @include position(0, 13px, null, null); @include svg-background-image($searchbar-md-input-clear-icon-svg); @include padding(0); @@ -91,11 +95,12 @@ width: $searchbar-md-input-clear-icon-size; height: 100%; + background-color: transparent; background-repeat: no-repeat; 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; } @@ -103,11 +108,11 @@ // 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; } -.searchbar-md.searchbar-has-focus.searchbar-show-cancel .searchbar-md-cancel { +.searchbar-has-focus.searchbar-show-cancel .searchbar-cancel-button-md { display: inline-flex; } @@ -118,15 +123,3 @@ .toolbar .searchbar-md { @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; -} diff --git a/packages/core/src/components/searchbar/searchbar.md.vars.scss b/packages/core/src/components/searchbar/searchbar.md.vars.scss index 5834f3152f..93d594cc65 100644 --- a/packages/core/src/components/searchbar/searchbar.md.vars.scss +++ b/packages/core/src/components/searchbar/searchbar.md.vars.scss @@ -4,58 +4,67 @@ // -------------------------------------------------- /// @prop - Padding top of the searchbar -$searchbar-md-padding-top: 8px !default; +$searchbar-md-padding-top: 8px !default; /// @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 -$searchbar-md-padding-bottom: $searchbar-md-padding-top !default; +$searchbar-md-padding-bottom: $searchbar-md-padding-top !default; /// @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 -$searchbar-md-font-family: $font-family-md-base !default; +$searchbar-md-font-family: $font-family-md-base !default; /// @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 -$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 -$searchbar-md-input-search-icon-svg: "" !default; +$searchbar-md-input-search-icon-svg: "" !default; /// @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 -$searchbar-md-input-height: auto !default; +$searchbar-md-input-height: auto !default; /// @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 -$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 -$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 -$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 -$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 -$searchbar-md-input-border-radius: 2px !default; +$searchbar-md-input-border-radius: 2px !default; /// @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 -$searchbar-md-input-clear-icon-svg: "" !default; +$searchbar-md-input-clear-icon-svg: "" !default; /// @prop - Size of the searchbar input clear icon -$searchbar-md-input-clear-icon-size: 22px !default; +$searchbar-md-input-clear-icon-size: 22px !default; diff --git a/packages/core/src/components/searchbar/searchbar.scss b/packages/core/src/components/searchbar/searchbar.scss index 58b6ee5752..92fb5b4e7a 100644 --- a/packages/core/src/components/searchbar/searchbar.scss +++ b/packages/core/src/components/searchbar/searchbar.scss @@ -37,6 +37,8 @@ ion-searchbar { border: 0; font-family: inherit; + box-sizing: border-box; + &:active, &:focus { outline: none; diff --git a/packages/core/src/components/searchbar/searchbar.tsx b/packages/core/src/components/searchbar/searchbar.tsx index eda41ad90a..dd8f741f6e 100644 --- a/packages/core/src/components/searchbar/searchbar.tsx +++ b/packages/core/src/components/searchbar/searchbar.tsx @@ -1,4 +1,6 @@ import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; + +import { createThemedClasses } from '../../utils/theme'; import { debounce } from '../../utils/helpers'; @@ -13,9 +15,9 @@ import { debounce } from '../../utils/helpers'; } }) export class Searchbar { - private _isCancelVisible = false; - private _shouldBlur = true; - private _shouldAlignLeft = true; + private isCancelVisible = false; + private shouldBlur = true; + private shouldAlignLeft = true; @Element() private el: HTMLElement; @@ -23,6 +25,77 @@ export class Searchbar { @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. @@ -49,79 +122,6 @@ export class Searchbar { */ @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() { this.positionElements(); this.debounceInput(); @@ -142,7 +142,7 @@ export class Searchbar { this.ionInput.emit({event: ev}); } }, 16 * 4); - this._shouldBlur = false; + this.shouldBlur = false; } /** @@ -154,15 +154,15 @@ export class Searchbar { this.ionCancel.emit({event: ev}); this.clearInput(ev); - this._shouldBlur = true; + this.shouldBlur = true; this.activated = false; } /** * Update the Searchbar input value when the input changes */ - inputChanged(ev: any) { - this.value = ev.target.value; + inputChanged(ev: Event) { + this.value = ev.target && (ev.target as HTMLInputElement).value; this.ionInput.emit(ev); } @@ -186,11 +186,11 @@ export class Searchbar { inputBlurred() { 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 (this._shouldBlur === false) { + if (this.shouldBlur === false) { inputEl.focus(); - this._shouldBlur = true; + this.shouldBlur = true; this.ionBlur.emit({this: this}); this.inputUpdated(); return; @@ -218,15 +218,15 @@ export class Searchbar { * based on the input value and if it is focused. (ios only) */ positionElements() { - const prevAlignLeft = this._shouldAlignLeft; - const _shouldAlignLeft = (!this.animated || (this.value && this.value.toString().trim() !== '') || this.focused === true); - this._shouldAlignLeft = _shouldAlignLeft; + const prevAlignLeft = this.shouldAlignLeft; + const shouldAlignLeft = (!this.animated || (this.value && this.value.toString().trim() !== '') || this.focused === true); + this.shouldAlignLeft = shouldAlignLeft; if (this.mode !== 'ios') { return; } - if (prevAlignLeft !== _shouldAlignLeft) { + if (prevAlignLeft !== shouldAlignLeft) { this.positionPlaceholder(); } @@ -243,7 +243,7 @@ export class Searchbar { const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElement; const iconEl = this.el.querySelector('.searchbar-search-icon') as HTMLElement; - if (this._shouldAlignLeft) { + if (this.shouldAlignLeft) { inputEl.removeAttribute('style'); iconEl.removeAttribute('style'); @@ -279,12 +279,12 @@ export class Searchbar { */ positionCancelButton() { 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; - if (shouldShowCancel !== this._isCancelVisible) { + if (shouldShowCancel !== this.isCancelVisible) { const cancelStyle = cancelButton.style; - this._isCancelVisible = shouldShowCancel; + this.isCancelVisible = shouldShowCancel; if (shouldShowCancel) { if (isRTL) { cancelStyle.marginLeft = '0'; @@ -311,26 +311,33 @@ export class Searchbar { 'searchbar-animated': this.animated, 'searchbar-has-value': (this.value !== undefined && this.value !== ''), 'searchbar-show-cancel': this.showCancelButton, - 'searchbar-left-aligned': this._shouldAlignLeft, + 'searchbar-left-aligned': this.shouldAlignLeft, 'searchbar-has-focus': this.focused } }; } - // TODO remove the ion-buttons and replace with native buttons to remove - // the button dependency render() { - return [ -
- - - -
+ class={cancelButtonClasses}> + { this.mode === 'md' + ? + : this.cancelButtonText } + + : null; + + const searchbar: JSX.Element[] = [ +
+ { this.mode === 'md' ? cancelButton : null } +
- - -
, - - {this.cancelButtonText} - + +
]; + + if (this.mode === 'ios') { + searchbar.push(cancelButton); + } + + return searchbar; } }