refactor: replace color getters and setters with mixin

* Replaces the color getters and setters with a Mixin function (similar as for the disabled property)
* This should reduce payload and also should make it way easier to maintain the color functionality.

Author: devversion

src/lib/button/button.spec.ts

@@ -38,6 +38,12 @@ describe('MdButton', () => {
     fixture.detectChanges();
     expect(buttonDebugElement.nativeElement.classList.contains('mat-accent')).toBe(true);
     expect(aDebugElement.nativeElement.classList.contains('mat-accent')).toBe(true);
+
+    testComponent.buttonColor = null;
+    fixture.detectChanges();
+
+    expect(buttonDebugElement.nativeElement.classList).not.toContain('mat-accent');
+    expect(aDebugElement.nativeElement.classList).not.toContain('mat-accent');
   });
 
   it('should should not clear previous defined classes', () => {
@@ -59,7 +65,6 @@ describe('MdButton', () => {
     expect(buttonDebugElement.nativeElement.classList.contains('mat-primary')).toBe(false);
     expect(buttonDebugElement.nativeElement.classList.contains('mat-accent')).toBe(true);
     expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
-
   });
 
   // Regular button tests

src/lib/button/button.ts

@@ -11,6 +11,7 @@ import {
 } from '@angular/core';
 import {coerceBooleanProperty, FocusOriginMonitor, Platform} from '../core';
 import {mixinDisabled, CanDisable} from '../core/common-behaviors/disabled';
+import {IsColorable, mixinColor} from '../core/common-behaviors/color';
 
 
 // TODO(kara): Convert attribute selectors to classes when attr maps become available
@@ -71,8 +72,10 @@ export class MdMiniFabCssMatStyler {}
 
 
 // Boilerplate for applying mixins to MdButton.
-export class MdButtonBase { }
-export const _MdButtonMixinBase = mixinDisabled(MdButtonBase);
+export class MdButtonBase {
+  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+}
+export const _MdButtonMixinBase = mixinColor(mixinDisabled(MdButtonBase), true);
 
 
 /**
@@ -89,13 +92,11 @@ export const _MdButtonMixinBase = mixinDisabled(MdButtonBase);
   },
   templateUrl: 'button.html',
   styleUrls: ['button.css'],
-  inputs: ['disabled'],
+  inputs: ['disabled', 'color'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisable {
-  private _color: string;
-
+export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisable, IsColorable {
   /** Whether the button is round. */
   _isRoundButton: boolean = this._hasAttributeWithPrefix('fab', 'mini-fab');
 
@@ -110,40 +111,18 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
   get disableRipple() { return this._disableRipple; }
   set disableRipple(v) { this._disableRipple = coerceBooleanProperty(v); }
 
-  constructor(
-      private _elementRef: ElementRef,
-      private _renderer: Renderer2,
-      private _platform: Platform,
-      private _focusOriginMonitor: FocusOriginMonitor) {
-    super();
+  constructor(private _platform: Platform,
+              private _focusOriginMonitor: FocusOriginMonitor,
+              renderer: Renderer2,
+              elementRef: ElementRef) {
+    super(renderer, elementRef);
     this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
   }
 
   ngOnDestroy() {
     this._focusOriginMonitor.stopMonitoring(this._elementRef.nativeElement);
   }
 
-  /** The color of the button. Can be `primary`, `accent`, or `warn`. */
-  @Input()
-  get color(): string { return this._color; }
-  set color(value: string) { this._updateColor(value); }
-
-  _updateColor(newColor: string) {
-    this._setElementColor(this._color, false);
-    this._setElementColor(newColor, true);
-    this._color = newColor;
-  }
-
-  _setElementColor(color: string, isAdd: boolean) {
-    if (color != null && color != '') {
-      if (isAdd) {
-        this._renderer.addClass(this._getHostElement(), `mat-${color}`);
-      } else {
-        this._renderer.removeClass(this._getHostElement(), `mat-${color}`);
-      }
-    }
-  }
-
   /** Focuses the button. */
   focus(): void {
     this._getHostElement().focus();
@@ -189,18 +168,18 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
     '[attr.aria-disabled]': '_isAriaDisabled',
     '(click)': '_haltDisabledEvents($event)',
   },
-  inputs: ['disabled'],
+  inputs: ['disabled', 'color'],
   templateUrl: 'button.html',
   styleUrls: ['button.css'],
   encapsulation: ViewEncapsulation.None
 })
 export class MdAnchor extends MdButton {
   constructor(
-      elementRef: ElementRef,
-      renderer: Renderer2,
       platform: Platform,
-      focusOriginMonitor: FocusOriginMonitor) {
-    super(elementRef, renderer, platform, focusOriginMonitor);
+      focusOriginMonitor: FocusOriginMonitor,
+      elementRef: ElementRef,
+      renderer: Renderer2) {
+    super(platform, focusOriginMonitor, renderer, elementRef);
   }
 
   /** @docs-private */

src/lib/checkbox/checkbox.ts

@@ -17,6 +17,7 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {coerceBooleanProperty} from '../core/coercion/boolean-property';
 import {FocusOrigin, FocusOriginMonitor, MdRipple, RippleRef} from '../core';
 import {mixinDisabled, CanDisable} from '../core/common-behaviors/disabled';
+import {IsColorable, mixinColor} from '../core/common-behaviors/color';
 
 
 /** Monotonically increasing integer used to auto-generate unique ids for checkbox components. */
@@ -57,8 +58,10 @@ export class MdCheckboxChange {
 }
 
 // Boilerplate for applying mixins to MdCheckbox.
-export class MdCheckboxBase { }
-export const _MdCheckboxMixinBase = mixinDisabled(MdCheckboxBase);
+export class MdCheckboxBase {
+  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+}
+export const _MdCheckboxMixinBase = mixinColor(mixinDisabled(MdCheckboxBase));
 
 
 /**
@@ -82,12 +85,12 @@ export const _MdCheckboxMixinBase = mixinDisabled(MdCheckboxBase);
     '[class.mat-checkbox-label-before]': 'labelPosition == "before"',
   },
   providers: [MD_CHECKBOX_CONTROL_VALUE_ACCESSOR],
-  inputs: ['disabled'],
+  inputs: ['disabled', 'color'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MdCheckbox extends _MdCheckboxMixinBase
-    implements ControlValueAccessor, AfterViewInit, OnDestroy, CanDisable {
+    implements ControlValueAccessor, AfterViewInit, OnDestroy, IsColorable, CanDisable {
   /**
    * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
    * take precedence so this may be omitted.
@@ -183,18 +186,18 @@ export class MdCheckbox extends _MdCheckboxMixinBase
 
   private _indeterminate: boolean = false;
 
-  private _color: string;
-
   private _controlValueAccessorChangeFn: (value: any) => void = (value) => {};
 
   /** Reference to the focused state ripple. */
   private _focusRipple: RippleRef;
 
-  constructor(private _renderer: Renderer2,
-              private _elementRef: ElementRef,
-              private _changeDetectorRef: ChangeDetectorRef,
-              private _focusOriginMonitor: FocusOriginMonitor) {
-    super();
+  constructor(private _changeDetectorRef: ChangeDetectorRef,
+              private _focusOriginMonitor: FocusOriginMonitor,
+              _renderer: Renderer2,
+              _elementRef: ElementRef) {
+    super(_renderer, _elementRef);
+
+    // By default the checkbox uses the accent color for styling.
     this.color = 'accent';
   }
 
@@ -247,27 +250,6 @@ export class MdCheckbox extends _MdCheckboxMixinBase
     }
   }
 
-  /** The color of the button. Can be `primary`, `accent`, or `warn`. */
-  @Input()
-  get color(): string { return this._color; }
-  set color(value: string) { this._updateColor(value); }
-
-  _updateColor(newColor: string) {
-    this._setElementColor(this._color, false);
-    this._setElementColor(newColor, true);
-    this._color = newColor;
-  }
-
-  _setElementColor(color: string, isAdd: boolean) {
-    if (color != null && color != '') {
-      if (isAdd) {
-        this._renderer.addClass(this._elementRef.nativeElement, `mat-${color}`);
-      } else {
-        this._renderer.removeClass(this._elementRef.nativeElement, `mat-${color}`);
-      }
-    }
-  }
-
   _isRippleDisabled() {
     return this.disableRipple || this.disabled;
   }

src/lib/chips/chip.ts

@@ -11,18 +11,27 @@ import {
 
 import {Focusable} from '../core/a11y/focus-key-manager';
 import {coerceBooleanProperty} from '../core/coercion/boolean-property';
+import {IsColorable, mixinColor} from '../core/common-behaviors/color';
 
 export interface MdChipEvent {
   chip: MdChip;
 }
 
+// Boilerplate for applying mixins to MdChip.
+export class MdChipBase {
+  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
+}
+export const _MdChipMixinBase = mixinColor(MdChipBase);
+
+
 /**
  * Material design styled Chip component. Used inside the MdChipList component.
  */
 @Component({
   selector: `md-basic-chip, [md-basic-chip], md-chip, [md-chip],
              mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]`,
   template: `<ng-content></ng-content>`,
+  inputs: ['color'],
   host: {
     '[class.mat-chip]': 'true',
     'tabindex': '-1',
@@ -35,17 +44,14 @@ export interface MdChipEvent {
     '(click)': '_handleClick($event)'
   }
 })
-export class MdChip implements Focusable, OnInit, OnDestroy {
+export class MdChip extends _MdChipMixinBase implements Focusable, OnInit, OnDestroy, IsColorable {
 
   /** Whether or not the chip is disabled. Disabled chips cannot be focused. */
   protected _disabled: boolean = null;
 
   /** Whether or not the chip is selected. */
   protected _selected: boolean = false;
 
-  /** The palette color of selected chips. */
-  protected _color: string = 'primary';
-
   /** Emitted when the chip is focused. */
   onFocus = new EventEmitter<MdChipEvent>();
 
@@ -58,11 +64,15 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
   /** Emitted when the chip is destroyed. */
   @Output() destroy = new EventEmitter<MdChipEvent>();
 
-  constructor(protected _renderer: Renderer2, protected _elementRef: ElementRef) { }
+  constructor(renderer: Renderer2, elementRef: ElementRef) {
+    super(renderer, elementRef);
+
+    // By default the chip component uses the primary color palette.
+    this.color = 'primary';
+  }
 
   ngOnInit(): void {
     this._addDefaultCSSClass();
-    this._updateColor(this._color);
   }
 
   ngOnDestroy(): void {
@@ -108,15 +118,6 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
     return this.selected;
   }
 
-  /** The color of the chip. Can be `primary`, `accent`, or `warn`. */
-  @Input() get color(): string {
-    return this._color;
-  }
-
-  set color(value: string) {
-    this._updateColor(value);
-  }
-
   /** Allows for programmatic focusing of the chip. */
   focus(): void {
     this._elementRef.nativeElement.focus();
@@ -147,22 +148,4 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
       this._renderer.addClass(el, 'mat-basic-chip');
     }
   }
-
-  /** Updates the private _color variable and the native element. */
-  private _updateColor(newColor: string) {
-    this._setElementColor(this._color, false);
-    this._setElementColor(newColor, true);
-    this._color = newColor;
-  }
-
-  /** Sets the mat-color on the native element. */
-  private _setElementColor(color: string, isAdd: boolean) {
-    if (color != null && color != '') {
-      if (isAdd) {
-        this._renderer.addClass(this._elementRef.nativeElement, `mat-${color}`);
-      } else {
-        this._renderer.removeClass(this._elementRef.nativeElement, `mat-${color}`);
-      }
-    }
-  }
 }

src/lib/core/common-behaviors/color.spec.ts

@@ -0,0 +1,70 @@
+import {mixinColor} from './color';
+import {ElementRef, Renderer2} from '@angular/core';
+
+describe('MixinColor', () => {
+
+  it('should augment an existing class with a color property', () => {
+    const classWithColor = mixinColor(TestClass);
+    const instance = new classWithColor();
+
+    expect(instance.color)
+        .toBeFalsy('Expected the mixed-into class to have a color property');
+
+    instance.color = 'accent';
+
+    expect(instance.color)
+        .toBe('accent', 'Expected the mixed-into class to have an updated color property');
+  });
+
+  it('should remove old color classes if new color is set', () => {
+    const classWithColor = mixinColor(TestClass);
+    const instance = new classWithColor();
+
+    expect(instance.testElement.classList.length)
+      .toBe(0, 'Expected the element to not have any classes at initialization');
+
+    instance.color = 'primary';
+
+    expect(instance.testElement.classList)
+      .toContain('mat-primary', 'Expected the element to have the "mat-primary" class set');
+
+    instance.color = 'accent';
+
+    expect(instance.testElement.classList)
+      .not.toContain('mat-primary', 'Expected the element to no longer have "mat-primary" set.');
+    expect(instance.testElement.classList)
+      .toContain('mat-accent', 'Expected the element to have the "mat-accent" class set');
+  });
+
+  it('should allow updating the color to an empty value', () => {
+    const classWithColor = mixinColor(TestClass, true);
+    const instance = new classWithColor();
+
+    expect(instance.testElement.classList.length)
+      .toBe(0, 'Expected the element to not have any classes at initialization');
+
+    instance.color = 'primary';
+
+    expect(instance.testElement.classList)
+      .toContain('mat-primary', 'Expected the element to have the "mat-primary" class set');
+
+    instance.color = null;
+
+    expect(instance.testElement.classList.length)
+      .toBe(0, 'Expected the element to not have any classes after the color has been set to null');
+  });
+
+});
+
+class TestClass {
+  testElement: HTMLElement = document.createElement('div');
+
+  /** Mock of a RendererV2 for the color mixin. */
+  _renderer: Renderer2 = {
+    addClass: (element: HTMLElement, className: string) => element.classList.add(className),
+    removeClass: (element: HTMLElement, className: string) => element.classList.remove(className)
+  } as any;
+
+  /** Fake instance of an ElementRef. */
+  _elementRef = new ElementRef(this.testElement);
+}