refactor(searchbar): add class to searchbar when hideCancel is passed

only hide the search icon when hideCancel isn’t passed
ionic-team · Feb 25, 2016 · a0f0004 · a0f0004
1 parent 21d4cef
commit a0f0004
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/ionic/components/searchbar/searchbar.md.scss b/ionic/components/searchbar/searchbar.md.scss
@@ -119,7 +119,7 @@ ion-searchbar {
 // Searchbar Focused
 // -----------------------------------------
 
-.searchbar-focused {
+.searchbar-focused:not(.searchbar-hide-cancel) {
   .searchbar-search-icon {
     display: none;
   }

diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts
@@ -39,14 +39,22 @@ export class SearchbarInput {
  *
  * @usage
  * ```html
- * <ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" (clear)="onClearSearchbar($event)" [hideCancelButton]="false"></ion-searchbar>
+ * <ion-searchbar
+ *   [(ngModel)]="myInput"
+ *   [hideCancelButton]="shouldHideCancel"
+ *   (input)="onInput($event)"
+ *   (cancel)="onCancel($event)">
+ * </ion-searchbar>
  * ```
  *
  * @demo /docs/v2/demos/searchbar/
  * @see {@link /docs/v2/components#searchbar Searchbar Component Docs}
  */
 @Component({
   selector: 'ion-searchbar',
+  host: {
+    '[class.searchbar-hide-cancel]': 'hideCancelButton'
+  },
   template:
     '<div class="searchbar-input-container">' +
       '<button (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" [hidden]="hideCancelButton" clear dark class="searchbar-md-cancel">' +