javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +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() {
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();

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

@ -22,31 +22,31 @@
<ion-content id="content">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<h5 class="ion-padding-start ion-padding-top"> Search - Disabled </h5>
@ -54,45 +54,45 @@
</ion-searchbar>
<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>
<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>
<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>
<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">
</ion-searchbar>
<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>
<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>
<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>
<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>
<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">
</ion-searchbar>
<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>
<p class="ion-padding">
@ -117,17 +117,17 @@
// Toggle animated attribute
const attrIsAnimated = dynamicAttr.getAttribute('animated') === 'true' ? false : true;
dynamicAttr.setAttribute('animated', attrIsAnimated);
// Toggle show-cancel-button attribute
let attrShowCancel;
const showCancelValue = dynamicAttr.getAttribute('show-cancel-button');
switch(showCancelValue) {
case true:
case true:
case "true":
attrShowCancel = false;
break;
case false:
case false:
case "false":
attrShowCancel = 'always';
break;
@ -142,7 +142,7 @@
attrShowCancel = true;
break;
}
dynamicAttr.setAttribute('show-cancel-button', attrShowCancel);
// Toggle placeholder attribute

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

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

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

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