javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(searchbar): add deprecation warnings for showCancelButton (#18938)

Browse Source
This commit is contained in:
Brandy Carney
2019-07-30 10:12:51 -04:00
committed by GitHub
parent 7951289460
commit f08ac68e0b
4 changed files with 57 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/searchbar/searchbar.tsx
View File

@ -170,6 +170,14 @@ export class Searchbar implements ComponentInterface {
} }
componentDidLoad() { 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.positionElements();
this.debounceChanged(); this.debounceChanged();

46
core/src/components/searchbar/test/basic/index.html
View File

@ -22,31 +22,31 @@
<ion-content id="content"> <ion-content id="content">
<h5 class="ion-padding-start ion-padding-top"> Search - Default </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Default </h5>
<ion-searchbar id="basic" value="test" type="tel" show-cancel-button debounce="500"> <ion-searchbar id="basic" value="test" type="tel" show-cancel-button="focus" debounce="500">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - No Cancel Button </h5> <h5 class="ion-padding-start ion-padding-top"> Search - No Cancel Button </h5>
<ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="false"> <ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="never">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Always Show Cancel Button</h5> <h5 class="ion-padding-start ion-padding-top"> Search - Always Show Cancel Button</h5>
<ion-searchbar id="noCancel" value="after view" animated="true" show-cancel-button="always"> <ion-searchbar id="noCancel" value="after view" animated="true" show-cancel-button="always">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Never Show Cancel Button</h5> <h5 class="ion-padding-start ion-padding-top"> Search - Never Show Cancel Button</h5>
<ion-searchbar id="noCancel" value="after view" animated="true" show-cancel-button="never"> <ion-searchbar id="noCancel" value="after view" animated="true" show-cancel-button="never">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Show Cancel Button on Focus</h5> <h5 class="ion-padding-start ion-padding-top"> Search - Show Cancel Button on Focus</h5>
<ion-searchbar id="noCancel" value="after view" animated="true" show-cancel-button="focus"> <ion-searchbar id="noCancel" value="after view" animated="true" show-cancel-button="focus">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Cancel Button set to false</h5> <h5 class="ion-padding-start ion-padding-top"> Search - Cancel Button set to false</h5>
<ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="false"> <ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="never">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Cancel Button set to true</h5> <h5 class="ion-padding-start ion-padding-top"> Search - Cancel Button set to true</h5>
<ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="true"> <ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="focus">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Disabled </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Disabled </h5>
@ -54,45 +54,45 @@
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Danger </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Danger </h5>
<ion-searchbar color="danger" show-cancel-button> <ion-searchbar color="danger" show-cancel-button="focus">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Custom Search Icon </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Custom Search Icon </h5>
<ion-searchbar search-icon="home" show-cancel-button debounce="500"> <ion-searchbar search-icon="home" show-cancel-button="focus" debounce="500">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Animated </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Animated </h5>
<ion-searchbar animated="true" show-cancel-button debounce="500"> <ion-searchbar animated="true" show-cancel-button="focus" debounce="500">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Custom Placeholder </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Custom Placeholder </h5>
<ion-searchbar id="dynamicProp" value="33" autocorrect="on" show-cancel-button="true" autocomplete="on" spellcheck="false" <ion-searchbar id="dynamicProp" value="33" autocorrect="on" show-cancel-button="focus" autocomplete="on" spellcheck="false"
type="number" placeholder="Filter Schedules"> type="number" placeholder="Filter Schedules">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Custom Cancel Button Danger </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Custom Cancel Button Danger </h5>
<ion-searchbar show-cancel-button cancel-button-text="Really Long Cancel" color="danger"> <ion-searchbar show-cancel-button="focus" cancel-button-text="Really Long Cancel" color="danger">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Value passed </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Value passed </h5>
<ion-searchbar value="mysearch" cancel-button-text="Really Long Cancel" color="dark" show-cancel-button> <ion-searchbar value="mysearch" cancel-button-text="Really Long Cancel" color="dark" show-cancel-button="focus">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Mode iOS</h5> <h5 class="ion-padding-start ion-padding-top"> Search - Mode iOS</h5>
<ion-searchbar mode="ios" animated="true" show-cancel-button placeholder="Search"> <ion-searchbar mode="ios" animated="true" show-cancel-button="focus" placeholder="Search">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Mode MD</h5> <h5 class="ion-padding-start ion-padding-top"> Search - Mode MD</h5>
<ion-searchbar mode="md" animated="true" show-cancel-button placeholder="Search"> <ion-searchbar mode="md" animated="true" show-cancel-button="focus" placeholder="Search">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - DebounceTime </h5> <h5 class="ion-padding-start ion-padding-top"> Search - DebounceTime </h5>
<ion-searchbar autocorrect="on" show-cancel-button="true" autocomplete="on" spellcheck="true" type="text" debounce="5000" <ion-searchbar autocorrect="on" show-cancel-button="focus" autocomplete="on" spellcheck="true" type="text" debounce="5000"
placeholder="Check the log"> placeholder="Check the log">
</ion-searchbar> </ion-searchbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Animated and No Cancel</h5> <h5 class="ion-padding-start ion-padding-top"> Search - Animated and No Cancel</h5>
<ion-searchbar id="dynamicAttr" placeholder="Search" animated="true" show-cancel-button="false"> <ion-searchbar id="dynamicAttr" placeholder="Search" animated="true" show-cancel-button="never">
</ion-searchbar> </ion-searchbar>
<p class="ion-padding"> <p class="ion-padding">
@ -117,17 +117,17 @@
// Toggle animated attribute // Toggle animated attribute
const attrIsAnimated = dynamicAttr.getAttribute('animated') === 'true' ? false : true; const attrIsAnimated = dynamicAttr.getAttribute('animated') === 'true' ? false : true;
dynamicAttr.setAttribute('animated', attrIsAnimated); dynamicAttr.setAttribute('animated', attrIsAnimated);
// Toggle show-cancel-button attribute // Toggle show-cancel-button attribute
let attrShowCancel; let attrShowCancel;
const showCancelValue = dynamicAttr.getAttribute('show-cancel-button'); const showCancelValue = dynamicAttr.getAttribute('show-cancel-button');
switch(showCancelValue) { switch(showCancelValue) {
case true: case true:
case "true": case "true":
attrShowCancel = false; attrShowCancel = false;
break; break;
case false: case false:
case "false": case "false":
attrShowCancel = 'always'; attrShowCancel = 'always';
break; break;
@ -142,7 +142,7 @@
attrShowCancel = true; attrShowCancel = true;
break; break;
} }
dynamicAttr.setAttribute('show-cancel-button', attrShowCancel); dynamicAttr.setAttribute('show-cancel-button', attrShowCancel);
// Toggle placeholder attribute // Toggle placeholder attribute

25
core/src/components/searchbar/test/standalone/index.html
View File

@ -15,13 +15,13 @@
<ion-searchbar <ion-searchbar
value="test" value="test"
type="tel" type="tel"
show-cancel-button show-cancel-button="focus"
debounce="500"> debounce="500">
</ion-searchbar> </ion-searchbar>
<ion-searchbar <ion-searchbar
animated="true" animated="true"
show-cancel-button show-cancel-button="focus"
debounce="500"> debounce="500">
</ion-searchbar> </ion-searchbar>
@ -29,7 +29,7 @@
id="dynamicProp" id="dynamicProp"
value="33" value="33"
autocorrect="on" autocorrect="on"
show-cancel-button="true" show-cancel-button="focus"
autocomplete="on" autocomplete="on"
spellcheck="false" spellcheck="false"
type="number" type="number"
@ -42,11 +42,11 @@
autocomplete="off" autocomplete="off"
spellcheck="true" spellcheck="true"
type="text" type="text"
show-cancel-button="false"> show-cancel-button="never">
</ion-searchbar> </ion-searchbar>
<ion-searchbar <ion-searchbar
show-cancel-button show-cancel-button="focus"
cancel-button-text="Really Long Cancel" cancel-button-text="Really Long Cancel"
color="danger"> color="danger">
</ion-searchbar> </ion-searchbar>
@ -55,26 +55,26 @@
value="mysearch" value="mysearch"
cancel-button-text="Really Long Cancel" cancel-button-text="Really Long Cancel"
color="dark" color="dark"
show-cancel-button> show-cancel-button="focus">
</ion-searchbar> </ion-searchbar>
<ion-searchbar <ion-searchbar
mode="ios" mode="ios"
animated="true" animated="true"
show-cancel-button show-cancel-button="focus"
placeholder="Search"> placeholder="Search">
</ion-searchbar> </ion-searchbar>
<ion-searchbar <ion-searchbar
mode="md" mode="md"
animated="true" animated="true"
show-cancel-button show-cancel-button="focus"
placeholder="Search"> placeholder="Search">
</ion-searchbar> </ion-searchbar>
<ion-searchbar <ion-searchbar
autocorrect="on" autocorrect="on"
show-cancel-button="true" show-cancel-button="focus"
autocomplete="on" autocomplete="on"
spellcheck="true" spellcheck="true"
type="text" type="text"
@ -86,10 +86,13 @@
id="dynamicAttr" id="dynamicAttr"
placeholder="Search" placeholder="Search"
animated="true" animated="true"
show-cancel-button="false"> show-cancel-button="never">
</ion-searchbar> </ion-searchbar>
<ion-searchbar class="custom" show-cancel-button="true"></ion-searchbar> <ion-searchbar
class="custom"
show-cancel-button="focus">
</ion-searchbar>
<style> <style>
.custom { .custom {

24
core/src/components/searchbar/test/toolbar/index.html
View File

@ -26,62 +26,62 @@
<ion-content id="content" fullscreen> <ion-content id="content" fullscreen>
<h5 class="ion-padding-start ion-padding-top"> Search - Transparent Toolbar </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Transparent Toolbar </h5>
<ion-toolbar transparent> <ion-toolbar transparent>
<ion-searchbar show-cancel-button></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Default Toolbar </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Default Toolbar </h5>
<ion-toolbar> <ion-toolbar>
<ion-searchbar show-cancel-button></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Primary Toolbar </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Primary Toolbar </h5>
<ion-toolbar color="primary"> <ion-toolbar color="primary">
<ion-searchbar show-cancel-button></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Secondary Toolbar </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Secondary Toolbar </h5>
<ion-toolbar color="secondary"> <ion-toolbar color="secondary">
<ion-searchbar show-cancel-button></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Tertiary Toolbar </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Tertiary Toolbar </h5>
<ion-toolbar color="tertiary"> <ion-toolbar color="tertiary">
<ion-searchbar show-cancel-button></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Success Toolbar </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Success Toolbar </h5>
<ion-toolbar color="success"> <ion-toolbar color="success">
<ion-searchbar show-cancel-button></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Warning Toolbar </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Warning Toolbar </h5>
<ion-toolbar color="warning"> <ion-toolbar color="warning">
<ion-searchbar show-cancel-button></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Danger Toolbar </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Danger Toolbar </h5>
<ion-toolbar color="danger"> <ion-toolbar color="danger">
<ion-searchbar show-cancel-button></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Light Toolbar </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Light Toolbar </h5>
<ion-toolbar color="light"> <ion-toolbar color="light">
<ion-searchbar show-cancel-button></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Medium Toolbar </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Medium Toolbar </h5>
<ion-toolbar color="medium"> <ion-toolbar color="medium">
<ion-searchbar show-cancel-button></ion-searchbar> <ion-searchbar show-cancel-button="focus"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Dark Toolbar </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Dark Toolbar </h5>
<ion-toolbar color="dark"> <ion-toolbar color="dark">
<ion-searchbar show-cancel-button placeholder="Filter Schedules"></ion-searchbar> <ion-searchbar show-cancel-button="focus" placeholder="Filter Schedules"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<h5 class="ion-padding-start ion-padding-top"> Search - Dark Toolbar, Primary Search </h5> <h5 class="ion-padding-start ion-padding-top"> Search - Dark Toolbar, Primary Search </h5>
<ion-toolbar color="dark"> <ion-toolbar color="dark">
<ion-searchbar show-cancel-button color="primary" placeholder="Filter Schedules"></ion-searchbar> <ion-searchbar show-cancel-button="focus" color="primary" placeholder="Filter Schedules"></ion-searchbar>
</ion-toolbar> </ion-toolbar>
<ion-grid> <ion-grid>