Skip to content

Commit f08ac68

Browse files
brandyscarneybrandyscarney
authored
refactor(searchbar): add deprecation warnings for showCancelButton (ionic-team#18938)
1 parent 7951289 commit f08ac68

File tree

4 files changed

+57
-46
lines changed

4 files changed

+57
-46
lines changed

‎core/src/components/searchbar/searchbar.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,14 @@ export class Searchbar implements ComponentInterface {
170170
}
171171

172172
componentDidLoad() {
173+
if (this.showCancelButton === 'false' || this.showCancelButton === false) {
174+
console.warn('The boolean values of showCancelButton are deprecated. Please use "never" instead of "false".');
175+
}
176+
177+
if (this.showCancelButton === '' || this.showCancelButton === 'true' || this.showCancelButton === true) {
178+
console.warn('The boolean values of showCancelButton are deprecated. Please use "focus" instead of "true".');
179+
}
180+
173181
this.positionElements();
174182
this.debounceChanged();
175183

‎core/src/components/searchbar/test/basic/index.html

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -22,77 +22,77 @@
2222

2323
<ion-content id="content">
2424
<h5 class="ion-padding-start ion-padding-top"> Search - Default </h5>
25-
<ion-searchbar id="basic" value="test" type="tel" show-cancel-button debounce="500">
25+
<ion-searchbar id="basic" value="test" type="tel" show-cancel-button="focus" debounce="500">
2626
</ion-searchbar>
2727

2828
<h5 class="ion-padding-start ion-padding-top"> Search - No Cancel Button </h5>
29-
<ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="false">
29+
<ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="never">
3030
</ion-searchbar>
31-
31+
3232
<h5 class="ion-padding-start ion-padding-top"> Search - Always Show Cancel Button</h5>
3333
<ion-searchbar id="noCancel" value="after view" animated="true" show-cancel-button="always">
3434
</ion-searchbar>
35-
35+
3636
<h5 class="ion-padding-start ion-padding-top"> Search - Never Show Cancel Button</h5>
3737
<ion-searchbar id="noCancel" value="after view" animated="true" show-cancel-button="never">
3838
</ion-searchbar>
39-
39+
4040
<h5 class="ion-padding-start ion-padding-top"> Search - Show Cancel Button on Focus</h5>
4141
<ion-searchbar id="noCancel" value="after view" animated="true" show-cancel-button="focus">
4242
</ion-searchbar>
4343

4444
<h5 class="ion-padding-start ion-padding-top"> Search - Cancel Button set to false</h5>
45-
<ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="false">
45+
<ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="never">
4646
</ion-searchbar>
47-
47+
4848
<h5 class="ion-padding-start ion-padding-top"> Search - Cancel Button set to true</h5>
49-
<ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="true">
49+
<ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="focus">
5050
</ion-searchbar>
5151

5252
<h5 class="ion-padding-start ion-padding-top"> Search - Disabled </h5>
5353
<ion-searchbar id="disabled" value="disabled" type="text" disabled="true">
5454
</ion-searchbar>
5555

5656
<h5 class="ion-padding-start ion-padding-top"> Search - Danger </h5>
57-
<ion-searchbar color="danger" show-cancel-button>
57+
<ion-searchbar color="danger" show-cancel-button="focus">
5858
</ion-searchbar>
5959

6060
<h5 class="ion-padding-start ion-padding-top"> Search - Custom Search Icon </h5>
61-
<ion-searchbar search-icon="home" show-cancel-button debounce="500">
61+
<ion-searchbar search-icon="home" show-cancel-button="focus" debounce="500">
6262
</ion-searchbar>
6363

6464
<h5 class="ion-padding-start ion-padding-top"> Search - Animated </h5>
65-
<ion-searchbar animated="true" show-cancel-button debounce="500">
65+
<ion-searchbar animated="true" show-cancel-button="focus" debounce="500">
6666
</ion-searchbar>
6767

6868
<h5 class="ion-padding-start ion-padding-top"> Search - Custom Placeholder </h5>
69-
<ion-searchbar id="dynamicProp" value="33" autocorrect="on" show-cancel-button="true" autocomplete="on" spellcheck="false"
69+
<ion-searchbar id="dynamicProp" value="33" autocorrect="on" show-cancel-button="focus" autocomplete="on" spellcheck="false"
7070
type="number" placeholder="Filter Schedules">
7171
</ion-searchbar>
7272

7373
<h5 class="ion-padding-start ion-padding-top"> Search - Custom Cancel Button Danger </h5>
74-
<ion-searchbar show-cancel-button cancel-button-text="Really Long Cancel" color="danger">
74+
<ion-searchbar show-cancel-button="focus" cancel-button-text="Really Long Cancel" color="danger">
7575
</ion-searchbar>
7676

7777
<h5 class="ion-padding-start ion-padding-top"> Search - Value passed </h5>
78-
<ion-searchbar value="mysearch" cancel-button-text="Really Long Cancel" color="dark" show-cancel-button>
78+
<ion-searchbar value="mysearch" cancel-button-text="Really Long Cancel" color="dark" show-cancel-button="focus">
7979
</ion-searchbar>
8080

8181
<h5 class="ion-padding-start ion-padding-top"> Search - Mode iOS</h5>
82-
<ion-searchbar mode="ios" animated="true" show-cancel-button placeholder="Search">
82+
<ion-searchbar mode="ios" animated="true" show-cancel-button="focus" placeholder="Search">
8383
</ion-searchbar>
8484

8585
<h5 class="ion-padding-start ion-padding-top"> Search - Mode MD</h5>
86-
<ion-searchbar mode="md" animated="true" show-cancel-button placeholder="Search">
86+
<ion-searchbar mode="md" animated="true" show-cancel-button="focus" placeholder="Search">
8787
</ion-searchbar>
8888

8989
<h5 class="ion-padding-start ion-padding-top"> Search - DebounceTime </h5>
90-
<ion-searchbar autocorrect="on" show-cancel-button="true" autocomplete="on" spellcheck="true" type="text" debounce="5000"
90+
<ion-searchbar autocorrect="on" show-cancel-button="focus" autocomplete="on" spellcheck="true" type="text" debounce="5000"
9191
placeholder="Check the log">
9292
</ion-searchbar>
9393

9494
<h5 class="ion-padding-start ion-padding-top"> Search - Animated and No Cancel</h5>
95-
<ion-searchbar id="dynamicAttr" placeholder="Search" animated="true" show-cancel-button="false">
95+
<ion-searchbar id="dynamicAttr" placeholder="Search" animated="true" show-cancel-button="never">
9696
</ion-searchbar>
9797

9898
<p class="ion-padding">
@@ -117,17 +117,17 @@ <h5 class="ion-padding-start ion-padding-top"> Search - Animated and No Cancel</
117117
// Toggle animated attribute
118118
const attrIsAnimated = dynamicAttr.getAttribute('animated') === 'true' ? false : true;
119119
dynamicAttr.setAttribute('animated', attrIsAnimated);
120-
120+
121121
// Toggle show-cancel-button attribute
122122
let attrShowCancel;
123123
const showCancelValue = dynamicAttr.getAttribute('show-cancel-button');
124-
124+
125125
switch(showCancelValue) {
126-
case true:
126+
case true:
127127
case "true":
128128
attrShowCancel = false;
129129
break;
130-
case false:
130+
case false:
131131
case "false":
132132
attrShowCancel = 'always';
133133
break;
@@ -142,7 +142,7 @@ <h5 class="ion-padding-start ion-padding-top"> Search - Animated and No Cancel</
142142
attrShowCancel = true;
143143
break;
144144
}
145-
145+
146146
dynamicAttr.setAttribute('show-cancel-button', attrShowCancel);
147147

148148
// Toggle placeholder attribute

‎core/src/components/searchbar/test/standalone/index.html

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,21 @@
1515
<ion-searchbar
1616
value="test"
1717
type="tel"
18-
show-cancel-button
18+
show-cancel-button="focus"
1919
debounce="500">
2020
</ion-searchbar>
2121

2222
<ion-searchbar
2323
animated="true"
24-
show-cancel-button
24+
show-cancel-button="focus"
2525
debounce="500">
2626
</ion-searchbar>
2727

2828
<ion-searchbar
2929
id="dynamicProp"
3030
value="33"
3131
autocorrect="on"
32-
show-cancel-button="true"
32+
show-cancel-button="focus"
3333
autocomplete="on"
3434
spellcheck="false"
3535
type="number"
@@ -42,11 +42,11 @@
4242
autocomplete="off"
4343
spellcheck="true"
4444
type="text"
45-
show-cancel-button="false">
45+
show-cancel-button="never">
4646
</ion-searchbar>
4747

4848
<ion-searchbar
49-
show-cancel-button
49+
show-cancel-button="focus"
5050
cancel-button-text="Really Long Cancel"
5151
color="danger">
5252
</ion-searchbar>
@@ -55,26 +55,26 @@
5555
value="mysearch"
5656
cancel-button-text="Really Long Cancel"
5757
color="dark"
58-
show-cancel-button>
58+
show-cancel-button="focus">
5959
</ion-searchbar>
6060

6161
<ion-searchbar
6262
mode="ios"
6363
animated="true"
64-
show-cancel-button
64+
show-cancel-button="focus"
6565
placeholder="Search">
6666
</ion-searchbar>
6767

6868
<ion-searchbar
6969
mode="md"
7070
animated="true"
71-
show-cancel-button
71+
show-cancel-button="focus"
7272
placeholder="Search">
7373
</ion-searchbar>
7474

7575
<ion-searchbar
7676
autocorrect="on"
77-
show-cancel-button="true"
77+
show-cancel-button="focus"
7878
autocomplete="on"
7979
spellcheck="true"
8080
type="text"
@@ -86,10 +86,13 @@
8686
id="dynamicAttr"
8787
placeholder="Search"
8888
animated="true"
89-
show-cancel-button="false">
89+
show-cancel-button="never">
9090
</ion-searchbar>
9191

92-
<ion-searchbar class="custom" show-cancel-button="true"></ion-searchbar>
92+
<ion-searchbar
93+
class="custom"
94+
show-cancel-button="focus">
95+
</ion-searchbar>
9396

9497
<style>
9598
.custom {

‎core/src/components/searchbar/test/toolbar/index.html

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,62 +26,62 @@
2626
<ion-content id="content" fullscreen>
2727
<h5 class="ion-padding-start ion-padding-top"> Search - Transparent Toolbar </h5>
2828
<ion-toolbar transparent>
29-
<ion-searchbar show-cancel-button></ion-searchbar>
29+
<ion-searchbar show-cancel-button="focus"></ion-searchbar>
3030
</ion-toolbar>
3131

3232
<h5 class="ion-padding-start ion-padding-top"> Search - Default Toolbar </h5>
3333
<ion-toolbar>
34-
<ion-searchbar show-cancel-button></ion-searchbar>
34+
<ion-searchbar show-cancel-button="focus"></ion-searchbar>
3535
</ion-toolbar>
3636

3737
<h5 class="ion-padding-start ion-padding-top"> Search - Primary Toolbar </h5>
3838
<ion-toolbar color="primary">
39-
<ion-searchbar show-cancel-button></ion-searchbar>
39+
<ion-searchbar show-cancel-button="focus"></ion-searchbar>
4040
</ion-toolbar>
4141

4242
<h5 class="ion-padding-start ion-padding-top"> Search - Secondary Toolbar </h5>
4343
<ion-toolbar color="secondary">
44-
<ion-searchbar show-cancel-button></ion-searchbar>
44+
<ion-searchbar show-cancel-button="focus"></ion-searchbar>
4545
</ion-toolbar>
4646

4747
<h5 class="ion-padding-start ion-padding-top"> Search - Tertiary Toolbar </h5>
4848
<ion-toolbar color="tertiary">
49-
<ion-searchbar show-cancel-button></ion-searchbar>
49+
<ion-searchbar show-cancel-button="focus"></ion-searchbar>
5050
</ion-toolbar>
5151

5252
<h5 class="ion-padding-start ion-padding-top"> Search - Success Toolbar </h5>
5353
<ion-toolbar color="success">
54-
<ion-searchbar show-cancel-button></ion-searchbar>
54+
<ion-searchbar show-cancel-button="focus"></ion-searchbar>
5555
</ion-toolbar>
5656

5757
<h5 class="ion-padding-start ion-padding-top"> Search - Warning Toolbar </h5>
5858
<ion-toolbar color="warning">
59-
<ion-searchbar show-cancel-button></ion-searchbar>
59+
<ion-searchbar show-cancel-button="focus"></ion-searchbar>
6060
</ion-toolbar>
6161

6262
<h5 class="ion-padding-start ion-padding-top"> Search - Danger Toolbar </h5>
6363
<ion-toolbar color="danger">
64-
<ion-searchbar show-cancel-button></ion-searchbar>
64+
<ion-searchbar show-cancel-button="focus"></ion-searchbar>
6565
</ion-toolbar>
6666

6767
<h5 class="ion-padding-start ion-padding-top"> Search - Light Toolbar </h5>
6868
<ion-toolbar color="light">
69-
<ion-searchbar show-cancel-button></ion-searchbar>
69+
<ion-searchbar show-cancel-button="focus"></ion-searchbar>
7070
</ion-toolbar>
7171

7272
<h5 class="ion-padding-start ion-padding-top"> Search - Medium Toolbar </h5>
7373
<ion-toolbar color="medium">
74-
<ion-searchbar show-cancel-button></ion-searchbar>
74+
<ion-searchbar show-cancel-button="focus"></ion-searchbar>
7575
</ion-toolbar>
7676

7777
<h5 class="ion-padding-start ion-padding-top"> Search - Dark Toolbar </h5>
7878
<ion-toolbar color="dark">
79-
<ion-searchbar show-cancel-button placeholder="Filter Schedules"></ion-searchbar>
79+
<ion-searchbar show-cancel-button="focus" placeholder="Filter Schedules"></ion-searchbar>
8080
</ion-toolbar>
8181

8282
<h5 class="ion-padding-start ion-padding-top"> Search - Dark Toolbar, Primary Search </h5>
8383
<ion-toolbar color="dark">
84-
<ion-searchbar show-cancel-button color="primary" placeholder="Filter Schedules"></ion-searchbar>
84+
<ion-searchbar show-cancel-button="focus" color="primary" placeholder="Filter Schedules"></ion-searchbar>
8585
</ion-toolbar>
8686

8787
<ion-grid>

0 commit comments

Comments
 (0)