feat(radio): add ripple (#1553)

Author: tinayuangao

src/lib/radio/_radio-theme.scss

@@ -29,8 +29,7 @@
     }
   }
 
-  // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied.
-  .md-radio-focused .md-ink-ripple {
+  .md-radio-focused .md-radio-ripple .md-ripple-foreground {
     background-color: md-color($accent, 0.26);
   }
 }

src/lib/radio/radio.html

@@ -5,7 +5,11 @@
   <div class="md-radio-container">
     <div class="md-radio-outer-circle"></div>
     <div class="md-radio-inner-circle"></div>
-    <div class="md-ink-ripple"></div>
+    <div md-ripple *ngIf="!disableRipple" class="md-radio-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>
 
   <input #input class="md-radio-input md-visually-hidden" type="radio"

src/lib/radio/radio.scss

@@ -3,6 +3,7 @@
 
 
 $md-radio-size: $md-toggle-size !default;
+$md-radio-ripple-size: $md-radio-size * 0.75;
 
 // Top-level host container.
 md-radio-button {
@@ -89,4 +90,12 @@ md-radio-button {
   cursor: default;
 }
 
-@include md-temporary-ink-ripple(radio);
+.md-radio-ripple {
+  position: absolute;
+  left: -$md-radio-ripple-size;
+  top: -$md-radio-ripple-size;
+  right: -$md-radio-ripple-size;
+  bottom: -$md-radio-ripple-size;
+  border-radius: 50%;
+  z-index: 1;
+}

src/lib/radio/radio.spec.ts

@@ -216,6 +216,23 @@ describe('MdRadio', () => {
 
       expect(radioInstances.every(radio => !radio.checked)).toBe(true);
     });
+
+    it('should remove ripple if md-ripple-disabled input is set', async(() => {
+      fixture.detectChanges();
+      for (let radioNativeElement of radioNativeElements)
+      {
+        expect(radioNativeElement.querySelectorAll('[md-ripple]').length)
+          .toBe(1, 'Expect [md-ripple] in radio buttons');
+      }
+
+      testComponent.disableRipple = true;
+      fixture.detectChanges();
+      for (let radioNativeElement of radioNativeElements)
+      {
+        expect(radioNativeElement.querySelectorAll('[md-ripple]').length)
+          .toBe(0, 'Expect no [md-ripple] in radio buttons');
+      }
+    }));
   });
 
   describe('group with ngModel', () => {
@@ -437,16 +454,17 @@ describe('MdRadio', () => {
                   [align]="alignment"
                   [value]="groupValue"
                   name="test-name">
-    <md-radio-button value="fire">Charmander</md-radio-button>
-    <md-radio-button value="water">Squirtle</md-radio-button>
-    <md-radio-button value="leaf">Bulbasaur</md-radio-button>
+    <md-radio-button value="fire" [disableRipple]="disableRipple">Charmander</md-radio-button>
+    <md-radio-button value="water" [disableRipple]="disableRipple">Squirtle</md-radio-button>
+    <md-radio-button value="leaf" [disableRipple]="disableRipple">Bulbasaur</md-radio-button>
   </md-radio-group>
   `
 })
 class RadiosInsideRadioGroup {
   alignment: string;
   isGroupDisabled: boolean = false;
   groupValue: string = null;
+  disableRipple: boolean = false;
 }
 
 

src/lib/radio/radio.ts

@@ -3,6 +3,7 @@ import {
   Component,
   ContentChildren,
   Directive,
+  ElementRef,
   EventEmitter,
   HostBinding,
   Input,
@@ -15,11 +16,13 @@ import {
   NgModule,
   ModuleWithProviders,
 } from '@angular/core';
+import {CommonModule} from '@angular/common';
 import {
   NG_VALUE_ACCESSOR,
   ControlValueAccessor
 } from '@angular/forms';
-import {MdUniqueSelectionDispatcher} from '../core';
+import {MdRippleModule, MdUniqueSelectionDispatcher} from '../core';
+import {coerceBooleanProperty} from '../core/coersion/boolean-property';
 
 
 
@@ -263,14 +266,22 @@ export class MdRadioButton implements OnInit {
   /** Value assigned to this radio.*/
   private _value: any = null;
 
+  /** Whether the ripple effect on click should be disabled. */
+  private _disableRipple: boolean;
+
   /** The parent radio group. May or may not be present. */
   radioGroup: MdRadioGroup;
 
+  @Input()
+  get disableRipple(): boolean { return this._disableRipple; }
+  set disableRipple(value) { this._disableRipple = coerceBooleanProperty(value); }
+
   /** Event emitted when the group value changes. */
   @Output()
   change: EventEmitter<MdRadioChange> = new EventEmitter<MdRadioChange>();
 
   constructor(@Optional() radioGroup: MdRadioGroup,
+              private _elementRef: ElementRef,
               public radioDispatcher: MdUniqueSelectionDispatcher) {
     // Assertions. Ideally these should be stripped out by the compiler.
     // TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
@@ -411,10 +422,15 @@ export class MdRadioButton implements OnInit {
       this.radioGroup._touch();
     }
   }
+
+  getHostElement() {
+    return this._elementRef.nativeElement;
+  }
 }
 
 
 @NgModule({
+  imports: [CommonModule, MdRippleModule],
   exports: [MdRadioGroup, MdRadioButton],
   declarations: [MdRadioGroup, MdRadioButton],
 })