fix(item): add a default size for items in buttons to use the content…

… button sizes fixes #5580
ionic-team · Mar 4, 2016 · 7b14a29 · 7b14a29
1 parent f6af807
commit 7b14a29
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
@@ -41,7 +41,7 @@ import {Toolbar} from '../toolbar/toolbar';
 })
 export class Button {
   private _role: string = 'button'; // bar-button/item-button
-  private _size: string = null; // large/small
+  private _size: string = null; // large/small/default
   private _style: string = 'default'; // outline/clear/solid
   private _shape: string = null; // round/fab
   private _display: string = null; // block/full
@@ -242,7 +242,7 @@ export class Button {
 
 }
 
-const BUTTON_SIZE_ATTRS = ['large', 'small'];
+const BUTTON_SIZE_ATTRS = ['large', 'small', 'default'];
 const BUTTON_STYLE_ATTRS = ['clear', 'outline', 'solid'];
 const BUTTON_SHAPE_ATTRS = ['round', 'fab'];
 const BUTTON_DISPLAY_ATTRS = ['block', 'full'];

diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts
@@ -143,7 +143,9 @@ export class Item {
   @ContentChildren(Button)
   private set _buttons(buttons) {
     buttons.toArray().forEach(button => {
-      if (!button.isItem) {
+      // Don't add the item-button class if the user specifies
+      // a different size button
+      if (!button.isItem && !button._size) {
         button.addClass('item-button');
       }
     });

diff --git a/ionic/components/item/test/buttons/main.html b/ionic/components/item/test/buttons/main.html
@@ -49,29 +49,29 @@
   </ion-item>
 
   <ion-item>
-    <button clear item-left (click)="testClick($event)">
+    <button clear item-left default (click)="testClick($event)">
       <ion-icon name="navigate"></ion-icon>
     </button>
-    icon only buttons
-    <button clear item-right (click)="testClick($event)">
+    icon only buttons default
+    <button clear item-right default (click)="testClick($event)">
       <ion-icon name="navigate"></ion-icon>
     </button>
   </ion-item>
 
   <ion-item>
-    ion-item right icon/text button
-    <button item-right (click)="testClick($event)">
+    ion-item right icon/text button large
+    <button item-right large (click)="testClick($event)">
       <ion-icon name="refresh"></ion-icon>
       Refresh
     </button>
   </ion-item>
 
   <ion-item>
-    <button clear item-left (click)="testClick($event)">
+    <button clear item-left small (click)="testClick($event)">
       <ion-icon name="settings"></ion-icon>
       Settings
     </button>
-    ion-item left clear button
+    ion-item left clear button small
   </ion-item>
 
   <ion-item>