fix(searchbar): looks good when mode is different

references #8855

Author: manucorporat

src/components/searchbar/searchbar.ts

@@ -30,8 +30,8 @@ import { Debouncer } from '../../util/debouncer';
   selector: 'ion-searchbar',
   template:
     '<div class="searchbar-input-container">' +
-      '<button ion-button (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" clear color="dark" class="searchbar-md-cancel" type="button">' +
-        '<ion-icon name="arrow-back"></ion-icon>' +
+      '<button ion-button mode="md" (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" clear color="dark" class="searchbar-md-cancel" type="button">' +
+        '<ion-icon name="md-arrow-back"></ion-icon>' +
       '</button>' +
       '<div #searchbarIcon class="searchbar-search-icon"></div>' +
       '<input #searchbarInput class="searchbar-input" (input)="inputChanged($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" ' +
@@ -40,9 +40,9 @@ import { Debouncer } from '../../util/debouncer';
         '[attr.autocomplete]="_autocomplete" ' +
         '[attr.autocorrect]="_autocorrect" ' +
         '[attr.spellcheck]="_spellcheck">' +
-      '<button ion-button clear class="searchbar-clear-icon" (click)="clearInput($event)" (mousedown)="clearInput($event)" type="button"></button>' +
+      '<button ion-button clear class="searchbar-clear-icon" [mode]="_mode" (click)="clearInput($event)" (mousedown)="clearInput($event)" type="button"></button>' +
     '</div>' +
-    '<button ion-button #cancelButton [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" class="searchbar-ios-cancel" type="button">{{cancelButtonText}}</button>',
+    '<button ion-button #cancelButton mode="ios" [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" class="searchbar-ios-cancel" type="button">{{cancelButtonText}}</button>',
   host: {
     '[class.searchbar-animated]': 'animated',
     '[class.searchbar-has-value]': '_value',

src/components/searchbar/test/basic/main.html

@@ -29,12 +29,15 @@ <h5 padding-left> Search - Custom Cancel Button Danger </h5>
   <h5 padding-left> Search - Value passed </h5>
   <ion-searchbar value="mysearch" showCancelButton (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" color="dark"></ion-searchbar>
 
-  <h5 padding-left> Search - Mode iOS passed </h5>
+  <h5 padding-left> Search - Mode iOS</h5>
   <ion-searchbar mode="ios" animated="true" showCancelButton placeholder="Search"></ion-searchbar>
 
-  <h5 padding-left> Search - Mode MD passed </h5>
+  <h5 padding-left> Search - Mode MD</h5>
   <ion-searchbar mode="md" animated="true" showCancelButton placeholder="Search"></ion-searchbar>
 
+  <h5 padding-left> Search - Mode WP</h5>
+  <ion-searchbar mode="wp" animated="true" showCancelButton placeholder="Search"></ion-searchbar>
+
   <p padding>
     <button ion-button block (click)="changeValue()">Change Value</button>
   </p>