feat(checkbox): add color attribute. (#1463)

Author: mathebox

src/demo-app/checkbox/checkbox-demo.html

@@ -2,6 +2,7 @@ <h1>md-checkbox: Basic Example</h1>
 <form>
 <md-checkbox [(ngModel)]="isChecked"
               name="cb"
+             [color]="checkboxColor()"
              (change)="isIndeterminate = false"
              [indeterminate]="isIndeterminate"
              [disabled]="isDisabled"
@@ -18,6 +19,8 @@ <h1>md-checkbox: Basic Example</h1>
 <label for="indeterminate-toggle">Toggle Indeterminate</label>
 <input id="disabled-toggle" type="checkbox" [(ngModel)]="isDisabled">
 <label for="disabled-toggle">Toggle Disabled</label>
+<input id="color-toggle" type="checkbox" [(ngModel)]="useAlternativeColor">
+<label for="color-toggle">Toggle Color</label>
 </div>
 <div>
   <p>Alignment:</p>
@@ -41,4 +44,4 @@ <h1>md-checkbox: Basic Example</h1>
 </div>
 
 <h1>Nested Checklist</h1>
-<md-checkbox-demo-nested-checklist></md-checkbox-demo-nested-checklist>
+<md-checkbox-demo-nested-checklist></md-checkbox-demo-nested-checklist>

src/demo-app/checkbox/checkbox-demo.ts

@@ -67,11 +67,16 @@ export class CheckboxDemo {
   isChecked: boolean = false;
   isDisabled: boolean = false;
   alignment: string = 'start';
+  useAlternativeColor: boolean = false;
 
   printResult() {
     if (this.isIndeterminate) {
       return 'Maybe!';
     }
     return this.isChecked ? 'Yes!' : 'No!';
   }
+
+  checkboxColor() {
+    return this.useAlternativeColor ? 'primary' : 'accent';
+  }
 }

src/lib/checkbox/README.md

@@ -77,3 +77,17 @@ checkbox if you do not wish to have any label text.
 ```html
 <md-checkbox [checked]="false" aria-label="My standalone checkbox"></md-checkbox>
 ```
+
+### Theming
+
+The color of a `md-checkbox` can be changed by using the `color` attribute.
+The value `accent` is default and will correspond to your theme accent color.
+Alternatively, you can specify `primary` or `warn`.
+
+Example:
+
+ ```html
+<md-checkbox [checked]="true" color="primary">
+  I come after my label.
+</md-checkbox>
+ ```

src/lib/checkbox/_checkbox-theme.scss

@@ -5,6 +5,7 @@
   $is-dark-theme: map-get($theme, is-dark);
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
   $background: map-get($theme, background);
 
 
@@ -14,9 +15,6 @@
   // The color of the checkbox's checkmark / mixedmark.
   $checkbox-mark-color: md-color($background, background);
 
-  // The color that is used as the checkbox background when it is checked.
-  $checkbox-background-color: md-color($accent, 500);
-
   // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
   // this does not work well with elements layered on top of one another. To get around this we
   // blend the colors together based on the base color and the theme background.
@@ -43,8 +41,16 @@
   }
 
   .md-checkbox-indeterminate, .md-checkbox-checked {
-    .md-checkbox-background {
-      background-color: $checkbox-background-color;
+    &.md-primary .md-checkbox-background {
+      background-color: md-color($primary, 500);
+    }
+
+    &.md-accent .md-checkbox-background {
+      background-color: md-color($accent, 500);
+    }
+
+    &.md-warn .md-checkbox-background {
+      background-color: md-color($warn, 500);
     }
   }
 
@@ -63,7 +69,17 @@
   }
 
   // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied.
-  .md-checkbox-focused .md-ink-ripple {
-    background-color: md-color($accent, 0.26);
+  .md-checkbox-focused {
+    &.md-primary .md-ink-ripple {
+      background-color: md-color($primary, 0.26);
+    }
+
+    &.md-accent .md-ink-ripple {
+      background-color: md-color($accent, 0.26);
+    }
+
+    &.md-warn .md-ink-ripple {
+      background-color: md-color($warn, 0.26);
+    }
   }
 }

src/lib/checkbox/checkbox.scss

@@ -1,4 +1,5 @@
 @import '../core/theming/theming';
+@import '../core/style/elevation';
 @import '../core/style/variables';
 @import '../core/ripple/ripple';
 
@@ -189,6 +190,10 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
 
 md-checkbox {
   cursor: pointer;
+
+  // Animation
+  transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
+              md-elevation-transition-property-value();
 }
 
 .md-checkbox-layout {

src/lib/checkbox/checkbox.spec.ts

@@ -267,6 +267,36 @@ describe('MdCheckbox', () => {
       expect(inputElement.required).toBe(false);
     });
 
+    describe('color behaviour', () => {
+      it('should apply class based on color attribute', () => {
+        testComponent.checkboxColor = 'primary';
+        fixture.detectChanges();
+        expect(checkboxDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
+
+        testComponent.checkboxColor = 'accent';
+        fixture.detectChanges();
+        expect(checkboxDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
+      });
+
+      it('should should not clear previous defined classes', () => {
+        checkboxDebugElement.nativeElement.classList.add('custom-class');
+
+        testComponent.checkboxColor = 'primary';
+        fixture.detectChanges();
+
+        expect(checkboxDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
+        expect(checkboxDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
+
+        testComponent.checkboxColor = 'accent';
+        fixture.detectChanges();
+
+        expect(checkboxDebugElement.nativeElement.classList.contains('md-primary')).toBe(false);
+        expect(checkboxDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
+        expect(checkboxDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
+
+      });
+    });
+
     describe('state transition css classes', () => {
       it('should transition unchecked -> checked -> unchecked', () => {
         testComponent.isChecked = true;
@@ -519,6 +549,7 @@ describe('MdCheckbox', () => {
         [checked]="isChecked" 
         [indeterminate]="isIndeterminate" 
         [disabled]="isDisabled"
+        [color]="checkboxColor"
         (change)="changeCount = changeCount + 1"
         (click)="onCheckboxClick($event)"
         (change)="onCheckboxChange($event)">
@@ -536,6 +567,7 @@ class SingleCheckbox {
   parentElementKeyedUp: boolean = false;
   lastKeydownEvent: Event = null;
   changeCount: number = 0;
+  checkboxColor: string = 'primary';
 
   onCheckboxClick(event: Event) {}
   onCheckboxChange(event: MdCheckboxChange) {}

src/lib/checkbox/checkbox.ts

@@ -128,11 +128,15 @@ export class MdCheckbox implements ControlValueAccessor {
 
   private _indeterminate: boolean = false;
 
+  private _color: string;
+
   private _controlValueAccessorChangeFn: (value: any) => void = (value) => {};
 
   hasFocus: boolean = false;
 
-  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
+  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {
+    this.color = 'accent';
+  }
 
   /**
    * Whether the checkbox is checked. Note that setting `checked` will immediately set
@@ -174,6 +178,28 @@ export class MdCheckbox implements ControlValueAccessor {
     }
   }
 
+  /** Sets the color of the checkbox */
+  @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 != '') {
+      this._renderer.setElementClass(this._elementRef.nativeElement, `md-${color}`, isAdd);
+    }
+  }
+
   /**
    * Implemented as part of ControlValueAccessor.
    * TODO: internal