From 0b78a00afb49ba40c1fc12ced80cfff01b0492ce Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Tue, 11 Jun 2019 11:28:15 -0400
Subject: [PATCH] update usage docs

---
 core/src/components/searchbar/readme.md       | 44 +++++++++++++++++--
 .../src/components/searchbar/usage/angular.md | 11 ++++-
 .../components/searchbar/usage/javascript.md  | 11 ++++-
 core/src/components/searchbar/usage/react.md  | 11 ++++-
 core/src/components/searchbar/usage/vue.md    | 11 ++++-
 5 files changed, 80 insertions(+), 8 deletions(-)

diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md
index 49c9e69fc8..5edb1ff281 100644
--- a/core/src/components/searchbar/readme.md
+++ b/core/src/components/searchbar/readme.md
@@ -17,6 +17,15 @@ A Searchbar should be used instead of an input to search lists. A clear button i
 <!-- Default Searchbar -->
 <ion-searchbar></ion-searchbar>
 
+<!-- Searchbar with cancel button always shown -->
+<ion-searchbar showCancelButton="always"></ion-searchbar>
+
+<!-- Searchbar with cancel button never shown -->
+<ion-searchbar showCancelButton="never"></ion-searchbar>
+
+<!-- Searchbar with cancel button shown on focus -->
+<ion-searchbar showCancelButton="focus"></ion-searchbar>
+
 <!-- Searchbar with danger color -->
 <ion-searchbar color="danger"></ion-searchbar>
 
@@ -30,7 +39,7 @@ A Searchbar should be used instead of an input to search lists. A clear button i
 <ion-searchbar disabled="true"></ion-searchbar>
 
 <!-- Searchbar with a cancel button and custom cancel button text -->
-<ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>
+<ion-searchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></ion-searchbar>
 
 <!-- Searchbar with a custom debounce -->
 <ion-searchbar debounce="500"></ion-searchbar>
@@ -54,6 +63,15 @@ A Searchbar should be used instead of an input to search lists. A clear button i
 <!-- Default Searchbar -->
 <ion-searchbar></ion-searchbar>
 
+<!-- Searchbar with cancel button always shown -->
+<ion-searchbar show-cancel-button="always"></ion-searchbar>
+
+<!-- Searchbar with cancel button never shown -->
+<ion-searchbar show-cancel-button="never"></ion-searchbar>
+
+<!-- Searchbar with cancel button shown on focus -->
+<ion-searchbar show-cancel-button="focus"></ion-searchbar>
+
 <!-- Searchbar with danger color -->
 <ion-searchbar color="danger"></ion-searchbar>
 
@@ -67,7 +85,7 @@ A Searchbar should be used instead of an input to search lists. A clear button i
 <ion-searchbar disabled="true"></ion-searchbar>
 
 <!-- Searchbar with a cancel button and custom cancel button text -->
-<ion-searchbar show-cancel-button cancel-button-text="Custom Cancel"></ion-searchbar>
+<ion-searchbar show-cancel-button="focus" cancel-button-text="Custom Cancel"></ion-searchbar>
 
 <!-- Searchbar with a custom debounce -->
 <ion-searchbar debounce="500"></ion-searchbar>
@@ -96,6 +114,15 @@ const Example: React.SFC<{}> = () => (
   <>
     {/*-- Default Searchbar --*/}
     <IonSearchbar></IonSearchbar>
+    
+    {/*-- Searchbar with cancel button always shown --*/}
+    <IonSearchbar showCancelButton="always"></IonSearchbar>
+    
+    {/*-- Searchbar with cancel button never shown --*/}
+    <IonSearchbar showCancelButton="never"></IonSearchbar>
+    
+    {/*-- Searchbar with cancel button shown on focus --*/}
+    <IonSearchbar showCancelButton="focus"></IonSearchbar>
 
     {/*-- Searchbar with danger color --*/}
     <IonSearchbar color="danger"></IonSearchbar>
@@ -110,7 +137,7 @@ const Example: React.SFC<{}> = () => (
     <IonSearchbar disabled="true"></IonSearchbar>
 
     {/*-- Searchbar with a cancel button and custom cancel button text --*/}
-    <IonSearchbar showCancelButton cancelButtonText="Custom Cancel"></IonSearchbar>
+    <IonSearchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></IonSearchbar>
 
     {/*-- Searchbar with a custom debounce --*/}
     <IonSearchbar debounce={500}></IonSearchbar>
@@ -138,6 +165,15 @@ export default Example;
 <template>
   <!-- Default Searchbar -->
   <ion-searchbar></ion-searchbar>
+  
+  <!-- Searchbar with cancel button always shown -->
+  <ion-searchbar showCancelButton="always"></ion-searchbar>
+  
+  <!-- Searchbar with cancel button never shown -->
+  <ion-searchbar showCancelButton="never"></ion-searchbar>
+  
+  <!-- Searchbar with cancel button shown on focus -->
+  <ion-searchbar showCancelButton="focus"></ion-searchbar>
 
   <!-- Searchbar with danger color -->
   <ion-searchbar color="danger"></ion-searchbar>
@@ -152,7 +188,7 @@ export default Example;
   <ion-searchbar disabled="true"></ion-searchbar>
 
   <!-- Searchbar with a cancel button and custom cancel button text -->
-  <ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>
+  <ion-searchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></ion-searchbar>
 
   <!-- Searchbar with a custom debounce -->
   <ion-searchbar debounce="500"></ion-searchbar>
diff --git a/core/src/components/searchbar/usage/angular.md b/core/src/components/searchbar/usage/angular.md
index 36a5a7e2dd..affa8ea62f 100644
--- a/core/src/components/searchbar/usage/angular.md
+++ b/core/src/components/searchbar/usage/angular.md
@@ -2,6 +2,15 @@
 <!-- Default Searchbar -->
 <ion-searchbar></ion-searchbar>
 
+<!-- Searchbar with cancel button always shown -->
+<ion-searchbar showCancelButton="always"></ion-searchbar>
+
+<!-- Searchbar with cancel button never shown -->
+<ion-searchbar showCancelButton="never"></ion-searchbar>
+
+<!-- Searchbar with cancel button shown on focus -->
+<ion-searchbar showCancelButton="focus"></ion-searchbar>
+
 <!-- Searchbar with danger color -->
 <ion-searchbar color="danger"></ion-searchbar>
 
@@ -15,7 +24,7 @@
 <ion-searchbar disabled="true"></ion-searchbar>
 
 <!-- Searchbar with a cancel button and custom cancel button text -->
-<ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>
+<ion-searchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></ion-searchbar>
 
 <!-- Searchbar with a custom debounce -->
 <ion-searchbar debounce="500"></ion-searchbar>
diff --git a/core/src/components/searchbar/usage/javascript.md b/core/src/components/searchbar/usage/javascript.md
index 4f82d4a72b..55bb95036a 100644
--- a/core/src/components/searchbar/usage/javascript.md
+++ b/core/src/components/searchbar/usage/javascript.md
@@ -2,6 +2,15 @@
 <!-- Default Searchbar -->
 <ion-searchbar></ion-searchbar>
 
+<!-- Searchbar with cancel button always shown -->
+<ion-searchbar show-cancel-button="always"></ion-searchbar>
+
+<!-- Searchbar with cancel button never shown -->
+<ion-searchbar show-cancel-button="never"></ion-searchbar>
+
+<!-- Searchbar with cancel button shown on focus -->
+<ion-searchbar show-cancel-button="focus"></ion-searchbar>
+
 <!-- Searchbar with danger color -->
 <ion-searchbar color="danger"></ion-searchbar>
 
@@ -15,7 +24,7 @@
 <ion-searchbar disabled="true"></ion-searchbar>
 
 <!-- Searchbar with a cancel button and custom cancel button text -->
-<ion-searchbar show-cancel-button cancel-button-text="Custom Cancel"></ion-searchbar>
+<ion-searchbar show-cancel-button="focus" cancel-button-text="Custom Cancel"></ion-searchbar>
 
 <!-- Searchbar with a custom debounce -->
 <ion-searchbar debounce="500"></ion-searchbar>
diff --git a/core/src/components/searchbar/usage/react.md b/core/src/components/searchbar/usage/react.md
index 8a64fbe116..f343ea5076 100644
--- a/core/src/components/searchbar/usage/react.md
+++ b/core/src/components/searchbar/usage/react.md
@@ -7,6 +7,15 @@ const Example: React.SFC<{}> = () => (
   <>
     {/*-- Default Searchbar --*/}
     <IonSearchbar></IonSearchbar>
+    
+    {/*-- Searchbar with cancel button always shown --*/}
+    <IonSearchbar showCancelButton="always"></IonSearchbar>
+    
+    {/*-- Searchbar with cancel button never shown --*/}
+    <IonSearchbar showCancelButton="never"></IonSearchbar>
+    
+    {/*-- Searchbar with cancel button shown on focus --*/}
+    <IonSearchbar showCancelButton="focus"></IonSearchbar>
 
     {/*-- Searchbar with danger color --*/}
     <IonSearchbar color="danger"></IonSearchbar>
@@ -21,7 +30,7 @@ const Example: React.SFC<{}> = () => (
     <IonSearchbar disabled="true"></IonSearchbar>
 
     {/*-- Searchbar with a cancel button and custom cancel button text --*/}
-    <IonSearchbar showCancelButton cancelButtonText="Custom Cancel"></IonSearchbar>
+    <IonSearchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></IonSearchbar>
 
     {/*-- Searchbar with a custom debounce --*/}
     <IonSearchbar debounce={500}></IonSearchbar>
diff --git a/core/src/components/searchbar/usage/vue.md b/core/src/components/searchbar/usage/vue.md
index a41631476f..d74e5f9728 100644
--- a/core/src/components/searchbar/usage/vue.md
+++ b/core/src/components/searchbar/usage/vue.md
@@ -2,6 +2,15 @@
 <template>
   <!-- Default Searchbar -->
   <ion-searchbar></ion-searchbar>
+  
+  <!-- Searchbar with cancel button always shown -->
+  <ion-searchbar showCancelButton="always"></ion-searchbar>
+  
+  <!-- Searchbar with cancel button never shown -->
+  <ion-searchbar showCancelButton="never"></ion-searchbar>
+  
+  <!-- Searchbar with cancel button shown on focus -->
+  <ion-searchbar showCancelButton="focus"></ion-searchbar>
 
   <!-- Searchbar with danger color -->
   <ion-searchbar color="danger"></ion-searchbar>
@@ -16,7 +25,7 @@
   <ion-searchbar disabled="true"></ion-searchbar>
 
   <!-- Searchbar with a cancel button and custom cancel button text -->
-  <ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>
+  <ion-searchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></ion-searchbar>
 
   <!-- Searchbar with a custom debounce -->
   <ion-searchbar debounce="500"></ion-searchbar>