feature(checkbox): Add ripple effect to checkbox

Author: tinayuangao

src/lib/checkbox/_checkbox-theme.scss

@@ -68,17 +68,16 @@
     }
   }
 
-  // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied.
   .md-checkbox-focused {
-    &.md-primary .md-ink-ripple {
+    &.md-primary .md-checkbox-ripple .md-ripple-foreground {
       background-color: md-color($primary, 0.26);
     }
 
-    &.md-accent .md-ink-ripple {
+    &.md-accent .md-checkbox-ripple .md-ripple-foreground {
       background-color: md-color($accent, 0.26);
     }
 
-    &.md-warn .md-ink-ripple {
+    &.md-warn .md-checkbox-ripple .md-ripple-foreground {
       background-color: md-color($warn, 0.26);
     }
   }

src/lib/checkbox/checkbox.html

@@ -14,7 +14,11 @@
            (blur)="_onInputBlur()"
            (change)="_onInteractionEvent($event)"
            (click)="_onInputClick($event)">
-    <div class="md-ink-ripple"></div>
+    <div md-ripple *ngIf="!disableRipple" class="md-checkbox-ripple"
+         [md-ripple-trigger]="getHostElement()"
+         [md-ripple-centered]="true"
+         [md-ripple-speed-factor]="0.3"
+         md-ripple-background-color="rgba(0, 0, 0, 0)"></div>
     <div class="md-checkbox-frame"></div>
     <div class="md-checkbox-background">
       <svg version="1.1"

src/lib/checkbox/checkbox.scss

@@ -19,6 +19,9 @@ $md-checkbox-item-spacing: $md-toggle-padding;
 $_md-checkbox-mark-path-length: 22.910259;
 $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1);
 
+// The ripple size of the checkbox
+$md-checkbox-ripple-size: 15px;
+
 // Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}.
 @keyframes md-checkbox-fade-in-background {
   0% {
@@ -414,4 +417,12 @@ md-checkbox {
   left: 50%;
 }
 
-@include md-temporary-ink-ripple(checkbox);
+.md-checkbox-ripple {
+  position: absolute;
+  left: -$md-checkbox-ripple-size;
+  top: -$md-checkbox-ripple-size;
+  right: -$md-checkbox-ripple-size;
+  bottom: -$md-checkbox-ripple-size;
+  border-radius: 50%;
+  z-index: 1;
+}

src/lib/checkbox/checkbox.spec.ts

@@ -483,6 +483,20 @@ describe('MdCheckbox', () => {
 
       expect(inputElement.tabIndex).toBe(13);
     });
+
+    it('should remove ripple if md-ripple-disabled input is set', async(() => {
+      testComponent.disableRipple = true;
+      fixture.detectChanges();
+
+      expect(checkboxNativeElement.querySelectorAll('[md-ripple]').length)
+        .toBe(0, 'Expect no [md-ripple] in checkbox');
+
+      testComponent.disableRipple = false;
+      fixture.detectChanges();
+
+      expect(checkboxNativeElement.querySelectorAll('[md-ripple]').length)
+        .toBe(1, 'Expect [md-ripple] in checkbox');
+    }));
   });
 
   describe('with multiple checkboxes', () => {
@@ -598,12 +612,16 @@ class MultipleCheckboxes { }
 /** Simple test component with tabIndex */
 @Component({
   template: `
-    <md-checkbox [tabindex]="customTabIndex" [disabled]="isDisabled">
+    <md-checkbox 
+        [tabindex]="customTabIndex" 
+        [disabled]="isDisabled" 
+        [disableRipple]="disableRipple">
     </md-checkbox>`,
 })
 class CheckboxWithTabIndex {
   customTabIndex: number = 7;
   isDisabled: boolean = false;
+  disableRipple: boolean = false;
 }
 
 /** Simple test component with an aria-label set. */

src/lib/checkbox/checkbox.ts

@@ -11,9 +11,10 @@ import {
     NgModule,
     ModuleWithProviders,
 } from '@angular/core';
+import {CommonModule} from '@angular/common';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 import {coerceBooleanProperty} from '../core/coersion/boolean-property';
-
+import {MdRippleModule} from '../core';
 
 /**
  * Monotonically increasing integer used to auto-generate unique ids for checkbox components.
@@ -89,6 +90,13 @@ export class MdCheckbox implements ControlValueAccessor {
   /** A unique id for the checkbox. If one is not supplied, it is auto-generated. */
   @Input() id: string = `md-checkbox-${++nextId}`;
 
+  /** Whether the ripple effect on click should be disabled. */
+  private _disableRipple: boolean;
+
+  @Input()
+  get disableRipple(): boolean { return this._disableRipple; }
+  set disableRipple(value) { this._disableRipple = coerceBooleanProperty(value); }
+
   /** ID to be applied to the `input` element */
   get inputId(): string {
     return `input-${this.id}`;
@@ -338,10 +346,15 @@ export class MdCheckbox implements ControlValueAccessor {
 
     return `md-checkbox-anim-${animSuffix}`;
   }
+
+  getHostElement() {
+    return this._elementRef.nativeElement;
+  }
 }
 
 
 @NgModule({
+  imports: [CommonModule, MdRippleModule],
   exports: [MdCheckbox],
   declarations: [MdCheckbox],
 })