From f08ac68e0bdc5def47d4fe6e6b337e2b6528d50b Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 30 Jul 2019 10:12:51 -0400
Subject: [PATCH] refactor(searchbar): add deprecation warnings for
 showCancelButton (#18938)

---
 core/src/components/searchbar/searchbar.tsx   |  8 ++++
 .../searchbar/test/basic/index.html           | 46 +++++++++----------
 .../searchbar/test/standalone/index.html      | 25 +++++-----
 .../searchbar/test/toolbar/index.html         | 24 +++++-----
 4 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index b4a78e5888..bc11190ce9 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -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();
 
diff --git a/core/src/components/searchbar/test/basic/index.html b/core/src/components/searchbar/test/basic/index.html
index 8649a4dbfb..d53b876220 100644
--- a/core/src/components/searchbar/test/basic/index.html
+++ b/core/src/components/searchbar/test/basic/index.html
@@ -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
diff --git a/core/src/components/searchbar/test/standalone/index.html b/core/src/components/searchbar/test/standalone/index.html
index a9916e9d63..251d7bd308 100644
--- a/core/src/components/searchbar/test/standalone/index.html
+++ b/core/src/components/searchbar/test/standalone/index.html
@@ -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 {
diff --git a/core/src/components/searchbar/test/toolbar/index.html b/core/src/components/searchbar/test/toolbar/index.html
index 1bd4a83401..46d54b66a3 100644
--- a/core/src/components/searchbar/test/toolbar/index.html
+++ b/core/src/components/searchbar/test/toolbar/index.html
@@ -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>