fix(button): apply color classes correctly.

Fixes angular#75. Closes angular#89

Author: devversion

src/components/button/button.spec.ts

@@ -43,6 +43,30 @@ export function main() {
       });
     });
 
+    it('should should not clear previous defined classes', (done: () => void) => {
+      return builder.createAsync(TestApp).then((fixture) => {
+        let testComponent = fixture.debugElement.componentInstance;
+        let buttonDebugElement = fixture.debugElement.query(By.css('button'));
+
+        buttonDebugElement.nativeElement.classList.add('custom-class');
+
+        testComponent.buttonColor = 'primary';
+        fixture.detectChanges();
+
+        expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
+        expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
+
+        testComponent.buttonColor = 'accent';
+        fixture.detectChanges();
+
+        expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(false);
+        expect(buttonDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
+        expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
+
+        done();
+      });
+    });
+
     // Regular button tests
     describe('button[md-button]', () => {
       it('should handle a click on the button', (done: () => void) => {

src/components/button/button.ts

@@ -5,6 +5,8 @@ import {
   HostBinding,
   HostListener,
   ChangeDetectionStrategy,
+  ElementRef,
+  Renderer,
 } from 'angular2/core';
 import {TimerWrapper} from 'angular2/src/facade/async';
 
@@ -18,7 +20,6 @@ import {TimerWrapper} from 'angular2/src/facade/async';
   inputs: ['color'],
   host: {
     '[class.md-button-focus]': 'isKeyboardFocused',
-    '[class]': 'setClassList()',
     '(mousedown)': 'setMousedown()',
     '(focus)': 'setKeyboardFocus()',
     '(blur)': 'removeKeyboardFocus()'
@@ -29,15 +30,23 @@ import {TimerWrapper} from 'angular2/src/facade/async';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdButton {
-  color: string;
+  private _color: string;
 
   /** Whether the button has focus from the keyboard (not the mouse). Used for class binding. */
   isKeyboardFocused: boolean = false;
 
   /** Whether a mousedown has occurred on this element in the last 100ms. */
   isMouseDown: boolean = false;
 
-  setClassList() { return `md-${this.color}`; }
+  constructor(private elementRef: ElementRef, private renderer: Renderer) { }
+
+  get color(): string {
+    return this._color;
+  }
+
+  set color(value: string) {
+    this._updateColor(value);
+  }
 
   setMousedown() {
     // We only *show* the focus style when focus has come to the button via the keyboard.
@@ -48,6 +57,18 @@ export class MdButton {
     TimerWrapper.setTimeout(() => { this.isMouseDown = false; }, 100);
   }
 
+  _updateColor(newColor: string) {
+    if (this._color != null && this._color != '') {
+      this.renderer.setElementClass(this.elementRef.nativeElement, `md-${this._color}`, false);
+    }
+
+    if (newColor != null && newColor != '') {
+      this.renderer.setElementClass(this.elementRef.nativeElement, `md-${newColor}`, true);
+    }
+
+    this._color = newColor;
+  }
+
   setKeyboardFocus($event: any) {
     this.isKeyboardFocused = !this.isMouseDown;
   }
@@ -62,7 +83,6 @@ export class MdButton {
   inputs: ['color'],
   host: {
     '[class.md-button-focus]': 'isKeyboardFocused',
-    '[class]': 'setClassList()',
     '(mousedown)': 'setMousedown()',
     '(focus)': 'setKeyboardFocus()',
     '(blur)': 'removeKeyboardFocus()'
@@ -74,6 +94,10 @@ export class MdButton {
 export class MdAnchor extends MdButton {
   _disabled: boolean = null;
 
+  constructor(elementRef: ElementRef, renderer: Renderer) {
+    super(elementRef, renderer);
+  }
+
   @HostBinding('tabIndex')
   get tabIndex(): number {
     return this.disabled ? -1 : 0;

src/components/toolbar/toolbar.spec.ts

@@ -36,11 +36,13 @@ export function main() {
         testComponent.toolbarColor = 'accent';
         fixture.detectChanges();
 
+        expect(toolbarDebugElement.nativeElement.classList.contains('md-primary')).toBe(false);
         expect(toolbarDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
 
         testComponent.toolbarColor = 'warn';
         fixture.detectChanges();
 
+        expect(toolbarDebugElement.nativeElement.classList.contains('md-accent')).toBe(false);
         expect(toolbarDebugElement.nativeElement.classList.contains('md-warn')).toBe(true);
 
         done();

src/components/toolbar/toolbar.ts

@@ -29,7 +29,7 @@ export class MdToolbar {
 
   _updateColor(newColor: string) {
     if (this._color != null && this._color != '') {
-      this.renderer.setElementClass(this.elementRef.nativeElement, `md-${newColor}`, false);
+      this.renderer.setElementClass(this.elementRef.nativeElement, `md-${this._color}`, false);
     }
 
     if (newColor != null && newColor != '') {