feat(buttons): dynamically add button attributes

Closes #5186

Author: adamdbradley

ionic/components/button/button.ts

@@ -2,6 +2,7 @@ import {Component, ElementRef, Renderer, Attribute, Optional, Input} from 'angul
 
 import {Config} from '../../config/config';
 import {Toolbar} from '../toolbar/toolbar';
+import {isTrueProperty} from '../../util/util';
 
 
 /**
@@ -45,20 +46,108 @@ export class Button {
   private _style: string = 'default'; // outline/clear/solid
   private _shape: string = null; // round/fab
   private _display: string = null; // block/full
-  private _lastColor: string = null;
   private _colors: Array<string> = []; // primary/secondary
   private _icon: string = null; // left/right/only
   private _disabled: boolean = false; // disabled
+  private _init: boolean;
 
   /**
    * @private
    */
   isItem: boolean;
 
   /**
-   * @private
+   * @input {string} Large button.
+   */
+  @Input()
+  set large(val: boolean) {
+    this._attr('_size', 'large', val);
+  }
+
+  /**
+   * @input {string} Small button.
+   */
+  @Input()
+  set small(val: boolean) {
+    this._attr('_size', 'small', val);
+  }
+
+  /**
+   * @input {string} Default button.
+   */
+  @Input()
+  set default(val: boolean) {
+    this._attr('_size', 'default', val);
+  }
+
+  /**
+   * @input {string} A transparent button with a border.
+   */
+  @Input()
+  set outline(val: boolean) {
+    this._attr('_style', 'outline', val);
+  }
+
+  /**
+   * @input {string} A transparent button without a border.
+   */
+  @Input()
+  set clear(val: boolean) {
+    this._attr('_style', 'clear', val);
+  }
+
+  /**
+   * @input {string} Force a solid button. Useful for buttons within an item.
+   */
+  @Input()
+  set solid(val: boolean) {
+    this._attr('_style', 'solid', val);
+  }
+
+  /**
+   * @input {string} A button with rounded corners.
    */
-  @Input() color: string;
+  @Input()
+  set round(val: boolean) {
+    this._attr('_shape', 'round', val);
+  }
+
+  /**
+   * @input {string} A button that fills its parent container with a border-radius.
+   */
+  @Input()
+  set block(val: boolean) {
+    this._attr('_display', 'block', val);
+  }
+
+  /**
+   * @input {string} A button that fills its parent container without a border-radius or borders on the left/right.
+   */
+  @Input()
+  set full(val: boolean) {
+    this._attr('_display', 'full', val);
+  }
+
+  _attr(type: string, attrName: string, attrValue: boolean) {
+    this._setClass(this[type], false);
+    if (isTrueProperty(attrValue)) {
+      this[type] = attrName;
+      this._setClass(attrName, true);
+
+    } else {
+      this[type] = null;
+    }
+  }
+
+  /**
+   * @input {string} Dynamically set which color attribute this button should use.
+   */
+  @Input()
+  set color(val: string) {
+    this._assignCss(false);
+    this._colors = [val];
+    this._assignCss(true);
+  }
 
   constructor(
     config: Config,
@@ -92,26 +181,11 @@ export class Button {
    * @private
    */
   ngAfterContentInit() {
-    this._lastColor = this.color;
-    if (this.color) {
-      this._colors = [this.color];
-    }
+    this._init = true;
     this._readIcon(this._elementRef.nativeElement);
     this._assignCss(true);
   }
 
-  /**
-   * @private
-   */
-  ngAfterContentChecked() {
-    if (this._lastColor !== this.color) {
-      this._assignCss(false);
-      this._lastColor = this.color;
-      this._colors = [this.color];
-      this._assignCss(true);
-    }
-  }
-
   /**
    * @private
    */
@@ -225,7 +299,7 @@ export class Button {
    * @private
    */
   private _setClass(type: string, assignCssClass: boolean) {
-    if (type) {
+    if (type && this._init) {
       this._renderer.setElementClass(this._elementRef.nativeElement, this._role + '-' + type, assignCssClass);
     }
   }

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

@@ -4,4 +4,10 @@ import {App} from 'ionic-angular';
 @App({
   templateUrl: 'main.html'
 })
-class E2EApp {}
+class E2EApp {
+  blockButton = true;
+
+  toggleBlock() {
+    this.blockButton = !this.blockButton;
+  }
+}

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

@@ -35,4 +35,8 @@
     <button block round outline>button[block][round][outline]</button>
   </p>
 
+  <p>
+    <button [block]="blockButton" (click)="toggleBlock()">Toggle Block</button>
+  </p>
+
 </ion-content>

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

@@ -179,7 +179,7 @@ export function run() {
 
   });
 
-  function mockButton(attrs, config) {
+  function mockButton(attrs?, config?) {
     config = config || new Config();
     let elementRef = {
       nativeElement: document.createElement('button')
@@ -189,12 +189,14 @@ export function run() {
         elementRef.nativeElement.setAttribute(attrs[i], '');
       }
     }
-    let renderer = {
+    let renderer: any = {
       setElementClass: function(nativeElement, className, shouldAdd) {
         nativeElement.classList[shouldAdd ? 'add' : 'remove'](className);
       }
     };
-    return new Button(config, elementRef, renderer, null);
+    let b = new Button(config, elementRef, renderer, null);
+    b._init = true;
+    return b;
   }
 
   function hasClass(button, className) {

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

@@ -4,4 +4,10 @@ import {App} from 'ionic-angular';
 @App({
   templateUrl: 'main.html'
 })
-class E2EApp {}
+class E2EApp {
+  clearButton = true;
+
+  toggleClear() {
+    this.clearButton = !this.clearButton;
+  }
+}

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

@@ -35,4 +35,8 @@
     <button clear dark class="activated">Dark.activated</button>
   </p>
 
+  <p>
+    <button [clear]="clearButton" (click)="toggleClear()">Toggle Clear</button>
+  </p>
+
 </ion-content>

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

@@ -4,4 +4,10 @@ import {App} from 'ionic-angular';
 @App({
   templateUrl: 'main.html'
 })
-class E2EApp {}
+class E2EApp {
+  outlineButton = true;
+
+  toggleOutline() {
+    this.outlineButton = !this.outlineButton;
+  }
+}

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

@@ -51,4 +51,8 @@
     <button outline block secondary class="activated">[outline][block][secondary].activated</button>
   </p>
 
+  <p>
+    <button [outline]="outlineButton" (click)="toggleOutline()">Toggle Outline</button>
+  </p>
+
 </ion-content>