From 3cac855e1a2530454111eaca7603fafcb7e970f7 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 30 Sep 2019 11:17:32 -0400 Subject: [PATCH] refactor(searchbar): remove boolean values from showCancelButton (#18953) BREAKING CHANGES The `show-cancel-button` property of the searchbar no longer accepts boolean values. Accepted values are strings: `"focus"`, `"always"`, `"never"`. The following should change: ``` ``` becomes ``` ``` --- core/api.txt | 2 +- core/src/components.d.ts | 4 +- core/src/components/searchbar/readme.md | 2 +- core/src/components/searchbar/searchbar.tsx | 48 +++------------------ 4 files changed, 9 insertions(+), 47 deletions(-) diff --git a/core/api.txt b/core/api.txt index 41f321048a..ca1eb1ea89 100644 --- a/core/api.txt +++ b/core/api.txt @@ -946,7 +946,7 @@ ion-searchbar,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" ion-searchbar,prop,mode,"ios" | "md",undefined,false,false ion-searchbar,prop,placeholder,string,'Search',false,false ion-searchbar,prop,searchIcon,string,'search',false,false -ion-searchbar,prop,showCancelButton,boolean | string,'never',false,false +ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false ion-searchbar,prop,spellcheck,boolean,false,false,false ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false ion-searchbar,prop,value,null | string | undefined,'',false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 83586da3d7..0ea0da2563 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2188,7 +2188,7 @@ export namespace Components { /** * Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. */ - 'showCancelButton': boolean | string; + 'showCancelButton': 'never' | 'focus' | 'always'; /** * If `true`, enable spellcheck on the input. */ @@ -5429,7 +5429,7 @@ declare namespace LocalJSX { /** * Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. */ - 'showCancelButton'?: boolean | string; + 'showCancelButton'?: 'never' | 'focus' | 'always'; /** * If `true`, enable spellcheck on the input. */ diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md index 1347c8edba..ef4f6fd71c 100644 --- a/core/src/components/searchbar/readme.md +++ b/core/src/components/searchbar/readme.md @@ -234,7 +234,7 @@ export const SearchbarExample: React.FC = () => ( | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `placeholder` | `placeholder` | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` | | `searchIcon` | `search-icon` | The icon to use as the search icon. | `string` | `'search'` | -| `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. | `boolean \| string` | `'never'` | +| `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. | `"always" \| "focus" \| "never"` | `'never'` | | `spellcheck` | `spellcheck` | If `true`, enable spellcheck on the input. | `boolean` | `false` | | `type` | `type` | Set the type of the input. | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'search'` | | `value` | `value` | the value of the searchbar. | `null \| string \| undefined` | `''` | diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index e46bafce12..d4e2c0475b 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -111,7 +111,7 @@ export class Searchbar implements ComponentInterface { * Setting to `"always"` shows the cancel button regardless * of focus state. */ - @Prop() showCancelButton: boolean | string = 'never'; + @Prop() showCancelButton: 'never' | 'focus' | 'always' = 'never'; /** * If `true`, enable spellcheck on the input. @@ -187,14 +187,6 @@ export class Searchbar implements ComponentInterface { } componentDidLoad() { - if (this.showCancelButton === 'false' || this.showCancelButton === false) { - console.warn('The boolean values of showCancelButton are deprecated. Please use "never" instead of "false".'); - } - - if (this.showCancelButton === '' || this.showCancelButton === 'true' || this.showCancelButton === true) { - console.warn('The boolean values of showCancelButton are deprecated. Please use "focus" instead of "true".'); - } - this.positionElements(); this.debounceChanged(); @@ -410,10 +402,9 @@ export class Searchbar implements ComponentInterface { * 2. `showCancelButton` is set to `focus`, and the searchbar has been focused. */ private shouldShowCancelButton(): boolean { - if ( - isCancelButtonSetToNever(this.showCancelButton) || - (isCancelButtonSetToFocus(this.showCancelButton) && !this.focused) - ) { return false; } + if ((this.showCancelButton === 'never') || (this.showCancelButton === 'focus' && !this.focused)) { + return false; + } return true; } @@ -424,7 +415,7 @@ export class Searchbar implements ComponentInterface { const clearIcon = this.clearIcon || (mode === 'ios' ? 'ios-close-circle' : 'md-close'); const searchIcon = this.searchIcon; - const cancelButton = !isCancelButtonSetToNever(this.showCancelButton) && ( + const cancelButton = (this.showCancelButton !== 'never') && (