refactor(searchbar): hide the cancel button by default, add property …

…to show BREAKING CHANGES: Searchbar - The cancel button (ios and md) is now hidden by default, passing `showCancelButton` will display it.
ionic-team · Jun 14, 2016 · 9927cf9 · 9927cf9
1 parent 614ace4
commit 9927cf9
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 deletions.
diff --git a/src/components/searchbar/searchbar.ios.scss b/src/components/searchbar/searchbar.ios.scss
@@ -128,8 +128,12 @@ ion-searchbar {
   transition: $searchbar-ios-cancel-transition;
   cursor: pointer;
   pointer-events: none;
+  display: none;
 }
 
+.searchbar-show-cancel .searchbar-ios-cancel {
+  display: block;
+}
 
 // Searchbar Left Aligned (iOS only)
 // -----------------------------------------

diff --git a/src/components/searchbar/searchbar.md.scss b/src/components/searchbar/searchbar.md.scss
@@ -130,7 +130,7 @@ ion-searchbar {
 // Searchbar Focused
 // -----------------------------------------
 
-.searchbar-has-focus:not(.searchbar-hide-cancel) {
+.searchbar-has-focus.searchbar-show-cancel {
   .searchbar-search-icon {
     display: none;
   }

diff --git a/src/components/searchbar/searchbar.ts b/src/components/searchbar/searchbar.ts
@@ -15,7 +15,7 @@ import {isPresent} from '../../util/util';
  * ```html
  * <ion-searchbar
  *   [(ngModel)]="myInput"
- *   [hideCancelButton]="shouldHideCancel"
+ *   [showCancelButton]="shouldShowCancel"
  *   (ionInput)="onInput($event)"
  *   (ionCancel)="onCancel($event)">
  * </ion-searchbar>
@@ -29,19 +29,19 @@ import {isPresent} from '../../util/util';
   host: {
     '[class.searchbar-has-value]': '_value',
     '[class.searchbar-active]': '_isActive',
-    '[class.searchbar-hide-cancel]': 'hideCancelButton',
+    '[class.searchbar-show-cancel]': 'showCancelButton',
     '[class.searchbar-left-aligned]': 'shouldAlignLeft()'
   },
   template:
     '<div class="searchbar-input-container">' +
-      '<button (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" [hidden]="hideCancelButton" clear dark class="searchbar-md-cancel">' +
+      '<button (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" clear dark class="searchbar-md-cancel">' +
         '<ion-icon name="arrow-back"></ion-icon>' +
       '</button>' +
       '<div #searchbarIcon class="searchbar-search-icon"></div>' +
       '<input #searchbarInput [(ngModel)]="_value" [attr.placeholder]="placeholder" (input)="inputChanged($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" class="searchbar-input">' +
       '<button clear class="searchbar-clear-icon" (click)="clearInput($event)" (mousedown)="clearInput($event)"></button>' +
     '</div>' +
-    '<button #cancelButton [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
+    '<button #cancelButton [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
   encapsulation: ViewEncapsulation.None
 })
 export class Searchbar {
@@ -59,7 +59,7 @@ export class Searchbar {
   /**
    * @input {boolean} Whether to hide the cancel button or not. Default: `"false"`.
    */
-  @Input() hideCancelButton: any = false;
+  @Input() showCancelButton: any = false;
 
   /**
    * @input {number} How long, in milliseconds, to wait to trigger the `input` event after each keystroke. Default `250`.
@@ -178,9 +178,9 @@ export class Searchbar {
    * On Initialization check for attributes
    */
   ngOnInit() {
-    let hideCancelButton = this.hideCancelButton;
-    if (typeof hideCancelButton === 'string') {
-      this.hideCancelButton = (hideCancelButton === '' || hideCancelButton === 'true');
+    let showCancelButton = this.showCancelButton;
+    if (typeof showCancelButton === 'string') {
+      this.showCancelButton = (showCancelButton === '' || showCancelButton === 'true');
     }
   }
 

diff --git a/src/components/searchbar/test/floating/main.html b/src/components/searchbar/test/floating/main.html
@@ -1,30 +1,30 @@
 <ion-content>
   <h5 padding-left> Search - Default </h5>
-  <ion-searchbar [(ngModel)]="defaultSearch" debounce="500" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="defaultSearch" showCancelButton debounce="500" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
 
   <p padding-left>
     defaultSearch: <b>{{ defaultSearch }}</b>
   </p>
 
   <h5 padding-left> Search - Custom Placeholder </h5>
-  <ion-searchbar [autocorrect]="isAutocorrect" [autocomplete]="isAutocomplete" [spellcheck]="isSpellcheck" type="number" [(ngModel)]="customPlaceholder" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [autocorrect]="isAutocorrect" showCancelButton="true" [autocomplete]="isAutocomplete" [spellcheck]="isSpellcheck" type="number" [(ngModel)]="customPlaceholder" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
 
   <p padding-left>
     customPlaceholder: <b>{{ customPlaceholder }}</b>
   </p>
 
-  <h5 padding-left> Search - Hide Cancel Button </h5>
-  <ion-searchbar autocorrect="off" autocomplete="off" spellcheck="true" type="text" [(ngModel)]="defaultCancel" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" hideCancelButton class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
+  <h5 padding-left> Search - No Cancel Button </h5>
+  <ion-searchbar autocorrect="off" autocomplete="off" spellcheck="true" type="text" [(ngModel)]="defaultCancel" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
 
   <p padding-left>
     defaultCancel: <b>{{ defaultCancel }}</b>
   </p>
 
   <h5 padding-left> Search - Custom Cancel Button Danger </h5>
-  <ion-searchbar (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
+  <ion-searchbar (ionInput)="triggerInput($event)" showCancelButton (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
 
   <h5 padding-left> Search - Value passed </h5>
-  <ion-searchbar value="mysearch" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
+  <ion-searchbar value="mysearch" showCancelButton (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
 
   <p padding>
     <button block (click)="changeValue()">Change Value</button>