set button colors with style types

ionic/components/button/button.ts

@@ -37,7 +37,8 @@ export class Button {
   ) {
     this._role = 'button'; // bar-button/item-button
     this._size = null; // large/small
-    this._style = null; // outline/clear
+    this._style = null; // outline/clear/solid
+    this._shape = null; // round/fab
     this._display = null; // block/full
     this._colors = []; // primary/secondary
     this._icon = null; // left/right/only
@@ -118,6 +119,9 @@ export class Button {
       } else if (BUTTON_DISPLAY_ATTRS.indexOf(attrName) > -1) {
         this._display = attrName;
 
+      } else if (BUTTON_SHAPE_ATTRS.indexOf(attrName) > -1) {
+        this._shape = attrName;
+
       } else if (BUTTON_SIZE_ATTRS.indexOf(attrName) > -1) {
         this._size = attrName;
 
@@ -131,12 +135,17 @@ export class Button {
     let role = this._role;
     if (role) {
       this.renderer.setElementClass(this.elementRef, role, assignCssClass); // button
+
       this._setClass(this._style, assignCssClass); // button-clear
+      this._setClass(this._style, assignCssClass); // button-clear
+      this._setClass(this._shape, assignCssClass); // button-round
       this._setClass(this._display, assignCssClass); // button-full
       this._setClass(this._size, assignCssClass); // button-small
       this._setClass(this._icon, assignCssClass); // button-icon-left
+
+      let colorStyle = (this._style && this._style !== 'solid' ? this._style + '-' : '');
       this._colors.forEach(color => {
-        this._setClass(color, assignCssClass); // button-secondary
+        this._setClass(colorStyle + color, assignCssClass); // button-secondary
       });
     }
   }
@@ -157,7 +166,8 @@ export class Button {
 }
 
 const BUTTON_SIZE_ATTRS = ['large', 'small'];
-const BUTTON_STYLE_ATTRS = ['round', 'clear', 'outline', 'fab', 'solid'];
+const BUTTON_STYLE_ATTRS = ['clear', 'outline', 'solid'];
+const BUTTON_SHAPE_ATTRS = ['round', 'fab'];
 const BUTTON_DISPLAY_ATTRS = ['block', 'full'];
 const IGNORE_ATTRS = /_ng/;
 

ionic/components/button/test/button.spec.ts

@@ -31,7 +31,7 @@ export function run() {
     expect(hasClass(b, 'bar-button-outline')).toEqual(true);
     expect(hasClass(b, 'bar-button-small')).toEqual(true);
     expect(hasClass(b, 'bar-button-full')).toEqual(true);
-    expect(hasClass(b, 'bar-button-primary')).toEqual(true);
+    expect(hasClass(b, 'bar-button-outline-primary')).toEqual(true);
 
     expect(hasClass(b, 'button-outline')).toEqual(false);
     expect(hasClass(b, 'button-small')).toEqual(false);
@@ -45,13 +45,37 @@ export function run() {
     expect(hasClass(b, 'button-outline')).toEqual(true);
     expect(hasClass(b, 'button-small')).toEqual(true);
     expect(hasClass(b, 'button-full')).toEqual(true);
-    expect(hasClass(b, 'button-primary')).toEqual(true);
+    expect(hasClass(b, 'button-outline-primary')).toEqual(true);
 
     b._assignCss(false);
     expect(hasClass(b, 'button-outline')).toEqual(false);
     expect(hasClass(b, 'button-small')).toEqual(false);
     expect(hasClass(b, 'button-full')).toEqual(false);
-    expect(hasClass(b, 'button-primary')).toEqual(false);
+    expect(hasClass(b, 'button-outline-primary')).toEqual(false);
+  });
+
+  it('should read button color attributes with styles', () => {
+    let b = mockButton(['outline', 'small', 'full', 'primary']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-outline')).toEqual(true);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+    expect(hasClass(b, 'button-outline-primary')).toEqual(true);
+
+    b = mockButton(['clear', 'primary', 'secondary']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-clear')).toEqual(true);
+    expect(hasClass(b, 'button-clear-primary')).toEqual(true);
+    expect(hasClass(b, 'button-clear-secondary')).toEqual(true);
+
+    b = mockButton(['solid', 'primary', 'secondary']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-solid')).toEqual(true);
+    expect(hasClass(b, 'button-primary')).toEqual(true);
+    expect(hasClass(b, 'button-secondary')).toEqual(true);
   });
 
   it('should read button color attributes', () => {
@@ -63,21 +87,10 @@ export function run() {
     b._assignCss(true);
     expect(hasClass(b, 'button-primary')).toEqual(true);
     expect(hasClass(b, 'button-secondary')).toEqual(true);
-
-    b = mockButton(['outline', 'small', 'full', 'primary']);
-    b._assignCss(true);
-    expect(hasClass(b, 'button-outline')).toEqual(true);
-    expect(hasClass(b, 'button-small')).toEqual(true);
-    expect(hasClass(b, 'button-full')).toEqual(true);
-    expect(hasClass(b, 'button-primary')).toEqual(true);
   });
 
   it('should read button style attributes', () => {
-    let b = mockButton(['round']);
+    let b = mockButton(['clear']);
-    b._assignCss(true);
-    expect(hasClass(b, 'button-round')).toEqual(true);
-
-    b = mockButton(['clear']);
     b._assignCss(true);
     expect(hasClass(b, 'button-clear')).toEqual(true);
 
@@ -85,10 +98,6 @@ export function run() {
     b._assignCss(true);
     expect(hasClass(b, 'button-outline')).toEqual(true);
 
-    b = mockButton(['fab']);
-    b._assignCss(true);
-    expect(hasClass(b, 'button-fab')).toEqual(true);
-
     b = mockButton(['clear', 'outline', 'small', 'full']);
     b._assignCss(true);
     expect(hasClass(b, 'button-clear')).toEqual(false);
@@ -97,6 +106,16 @@ export function run() {
     expect(hasClass(b, 'button-full')).toEqual(true);
   });
 
+  it('should read button shape attributes', () => {
+    let b = mockButton(['round']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-round')).toEqual(true);
+
+    b = mockButton(['fab']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-fab')).toEqual(true);
+  });
+
   it('should read button display attributes', () => {
     let b = mockButton(['block']);
     b._assignCss(true);