fix(button): add the solid class to bar buttons

updated tests to include toolbar with solid buttons and bar buttons in karma tests. references #6202
ionic-team · Apr 27, 2016 · 658b29b · 658b29b
1 parent cc50814
commit 658b29b
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
@@ -331,7 +331,9 @@ export class Button {
       // Support array to allow removal of many styles at once.
       let styles = (type instanceof Array ? type : [type]);
       styles.forEach(styleName => {
-        let colorStyle = (styleName !== null && styleName !== 'default' && styleName !== 'solid' ? styleName.toLowerCase() + '-' : '');
+        // If the role is not a bar-button, don't apply the solid style
+        styleName = (this._role !== 'bar-button' && styleName === 'solid' ? 'default' : styleName);
+        let colorStyle = (styleName !== null && styleName !== 'default' ? styleName.toLowerCase() + '-' : '');
         this._colors.forEach(colorName => {
           this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary
         });

diff --git a/ionic/components/button/test/button.spec.ts b/ionic/components/button/test/button.spec.ts
@@ -64,6 +64,13 @@ export function run() {
       expect(hasClass(b, 'button-solid')).toEqual(true);
       expect(hasClass(b, 'button-primary')).toEqual(true);
       expect(hasClass(b, 'button-secondary')).toEqual(true);
+
+      b = mockButton(['solid', 'primary', 'secondary']);
+      b.setRole('bar-button');
+      b._assignCss(true);
+      expect(hasClass(b, 'bar-button-solid')).toEqual(true);
+      expect(hasClass(b, 'bar-button-solid-primary')).toEqual(true);
+      expect(hasClass(b, 'bar-button-solid-secondary')).toEqual(true);
     });
 
     it('should auto add the default style', () => {
@@ -99,12 +106,21 @@ export function run() {
       b._assignCss(true);
       expect(hasClass(b, 'button-outline')).toEqual(true);
 
+      b = mockButton(['solid']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-solid')).toEqual(true);      
+
       b = mockButton(['clear', 'outline', 'small', 'full']);
       b._assignCss(true);
       expect(hasClass(b, 'button-clear')).toEqual(false);
       expect(hasClass(b, 'button-outline')).toEqual(true);
       expect(hasClass(b, 'button-small')).toEqual(true);
       expect(hasClass(b, 'button-full')).toEqual(true);
+
+      b = mockButton(['outline']);
+      b.setRole('bar-button');
+      b._assignCss(true);
+      expect(hasClass(b, 'bar-button-outline')).toEqual(true);
     });
 
     it('should read button shape attributes', () => {

diff --git a/ionic/components/button/test/dynamic/index.ts b/ionic/components/button/test/dynamic/index.ts
@@ -8,6 +8,7 @@ class E2EApp {
   isDestructive: boolean;
   isSecondary: boolean;
   isCustom: boolean;
+  isSolid: boolean;
   isOutline: boolean;
   isClear: boolean;
   isClicked: boolean;
@@ -23,6 +24,7 @@ class E2EApp {
 	  this.isDestructive = false;
 	  this.isSecondary = false;
 	  this.isCustom = false;
+	  this.isSolid = false;
 	  this.isOutline = false;
 	  this.isClear = false;
 	  this.isClicked = false;
@@ -35,6 +37,7 @@ class E2EApp {
 	  this.isDestructive = true;
 	  this.isSecondary = true;
 	  this.isCustom = true;
+	  this.isSolid = true;
 	  this.isOutline = true;
 	  this.isClear = true;
 	  this.isClicked = false;

diff --git a/ionic/components/button/test/dynamic/main.html b/ionic/components/button/test/dynamic/main.html
@@ -1,11 +1,16 @@
 
 <ion-toolbar>
+  <ion-buttons start>
+    <button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</button>
+  </ion-buttons>
   <ion-title>Default Buttons</ion-title>
+  <ion-buttons end>
+    <button [color]="isSecondary ? 'secondary' : 'primary'" [solid]="isSolid">Solid</button>
+  </ion-buttons>
 </ion-toolbar>
 
-<ion-content padding text-center>
-  <h1>Button Attributes Test</h1>
-  <button block>Primary</button>
+<ion-content padding>
+  <button block [solid]="isSolid">Solid</button>
   <button block [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Danger (Outline)</button>
   <button block [color]="isSecondary ? 'secondary' : 'primary'"  [clear]="isClear">Secondary (Clear)</button>
   <button block [color]="myColor1" [round]="isCustom">Custom #1</button>