Merge branch 'pr/6203' into 2.0

ionic/components/button/button.ts

@@ -27,7 +27,7 @@ import {isTrueProperty} from '../../util/util';
   * @property [fab-center] - Position a fab button towards the center.
   * @property [fab-top] - Position a fab button towards the top.
   * @property [fab-bottom] - Position a fab button towards the bottom.
-  * @property [color] - Dynamically set which predefined color this button should use (e.g. default, secondary, danger, etc).
+  * @property [color] - Dynamically set which predefined color this button should use (e.g. primary, secondary, danger, etc).
   *
   * @demo /docs/v2/demos/button/
   * @see {@link /docs/v2/components#buttons Button Component Docs}
@@ -140,20 +140,26 @@ export class Button {
     if (isTrueProperty(attrValue)) {
       this[type] = attrName;
       this._setClass(attrName, true);
-
     } else {
-      this[type] = null;
+      // Special handling for '_style' which defaults to 'default'.
+      this[type] = (type === '_style' ? 'default' : null);
+    }
+    if (type === '_style') {
+      this._setColor(attrName, isTrueProperty(attrValue));
     }
   }
 
   /**
-   * @input {string} Dynamically set which predefined color this button should use (e.g. default, secondary, danger, etc).
+   * @input {string} Dynamically set which predefined color this button should use (e.g. primary, secondary, danger, etc).
    */
   @Input()
-  set color(val: string) {
-    this._assignCss(false);
-    this._colors = [val];
-    this._assignCss(true);
+  set color(val: string|string[]) {
+    // Clear the colors for all styles including the default one.
+    this._setColor(BUTTON_STYLE_ATTRS.concat(['default']), false);
+    // Support array input which is also supported via multiple attributes (e.g. primary, secondary, etc).
+    this._colors = (val instanceof Array ? val : [val]);
+    // Set the colors for the currently effective style.
+    this._setColor(this._style, true);
   }
 
   constructor(
@@ -304,11 +310,7 @@ export class Button {
       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 !== 'default' ? this._style + '-' : '');
-      this._colors.forEach(colorName => {
-        this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary
-      });
+      this._setColor(this._style, assignCssClass); // button-secondary, button-clear-secondary
     }
   }
 
@@ -320,6 +322,22 @@ export class Button {
       this._renderer.setElementClass(this._elementRef.nativeElement, this._role + '-' + type.toLowerCase(), assignCssClass);
     }
   }
+  
+  /**
+   * @private
+   */
+  private _setColor(type: string|string[], assignCssClass: boolean) {
+    if (type && this._init) {
+      // 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.toLowerCase() + '-' : '');
+        this._colors.forEach(colorName => {
+          this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary
+        });
+      });
+    }
+  }
 
   /**
    * @private

ionic/components/button/test/dynamic/e2e.ts

@@ -0,0 +1,4 @@
+
+it('should unify buttons', function() {
+  element(by.css('.e2eButtonDynamicUnify')).click();
+});

ionic/components/button/test/dynamic/index.ts

@@ -0,0 +1,49 @@
+import {App, IonicApp} from 'ionic-angular';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  isDestructive: boolean;
+  isSecondary: boolean;
+  isCustom: boolean;
+  isOutline: boolean;
+  isClear: boolean;
+  isClicked: boolean;
+  myColor1: string;
+  myColor2: string;
+  multiColor: Array<string>;
+
+  constructor() {
+		this.reset();
+	}
+
+	unify() {
+	  this.isDestructive = false;
+	  this.isSecondary = false;
+	  this.isCustom = false;
+	  this.isOutline = false;
+	  this.isClear = false;
+	  this.isClicked = false;
+	  this.myColor1 = 'primary';
+	  this.myColor2 = 'primary';
+	  this.multiColor = ['primary'];
+	}
+
+	reset() {
+	  this.isDestructive = true;
+	  this.isSecondary = true;
+	  this.isCustom = true;
+	  this.isOutline = true;
+	  this.isClear = true;
+	  this.isClicked = false;
+	  this.myColor1 = 'custom1';
+	  this.myColor2 = 'custom2';
+	  this.multiColor = ['primary','secondary'];
+	}
+
+	toggle() {
+	  this.isClicked = !this.isClicked;
+	}
+}

ionic/components/button/test/dynamic/main.html

@@ -0,0 +1,19 @@
+
+<ion-toolbar>
+  <ion-title>Default Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content padding text-center>
+  <h1>Button Attributes Test</h1>
+  <button block>Primary</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>
+  <button block [color]="myColor2" [outline]="isOutline" [round]="isCustom">Custom #2 (Outline)</button>
+  <button block primary light [clear]="isClear" [round]="isCustom">Multicolor (Clear)</button>
+  <button block danger dark [outline]="isOutline" [round]="isCustom">Multicolor (Outline)</button>
+  <button block [color]="multiColor" [solid]="!isClicked" [outline]="isClicked" [round]="isCustom" (click)="toggle()">Multicolor (Toggle)</button>
+  <hr/>
+  <button block outline danger (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</button>
+  <button block clear danger (click)="reset()">Reset all buttons</button>
+</ion-content>