feature(radio): Add ripple effect for radio buttons (#1551)

Author: tinayuangao

src/lib/radio/README.md

@@ -57,6 +57,7 @@ The `md-radio-group` component has no button initially selected.
 | `aria-label` | `string` | Used to set the `aria-label` attribute of the underlying input element. |
 | `aria-labelledby` | `string` | Used to set the `aria-labelledby` attribute of the underlying input element.
                                  If provided, this attribute takes precedence as the element's text alternative. |
+| `disableRipple` | boolean | Whether the ripple effect when the radio button is clicked should be disabled
 
 When checked, an event is emitted from the `change` EventEmitter property.
 

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

@@ -1,11 +1,15 @@
 <!-- TODO(jelbourn): render the radio on either side of the content -->
 <!-- TODO(mtlin): Evaluate trade-offs of using native radio vs. cost of additional bindings. -->
 <label [attr.for]="inputId" class="md-radio-label">
+
   <!-- The actual 'radio' part of the control. -->
   <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="isRippleEnabled()" class="md-radio-ripple"
+         [md-ripple-trigger]="getHostElement()"
+         [md-ripple-centered]="true"
+         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,21 @@ 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);
+      }
+
+      testComponent.disableRipple = true;
+      fixture.detectChanges();
+      for (let radioNativeElement of radioNativeElements)
+      {
+        expect(radioNativeElement.querySelectorAll('[md-ripple]').length).toBe(0);
+      }
+    }));
   });
 
   describe('group with ngModel', () => {
@@ -426,26 +441,25 @@ describe('MdRadio', () => {
   });
 });
 
-
 @Component({
   template: `
   <md-radio-group [disabled]="isGroupDisabled"
                   [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 {
+  disableRipple: boolean = false;
   alignment: string;
   isGroupDisabled: boolean = false;
   groupValue: string = null;
 }
 
-
 @Component({
   template: `
     <md-radio-button name="season" value="spring">Spring</md-radio-button>
@@ -464,7 +478,6 @@ class RadiosInsideRadioGroup {
 })
 class StandaloneRadioButtons { }
 
-
 @Component({
   template: `
   <md-radio-group [(ngModel)]="modelValue" (change)="lastEvent = $event">

src/lib/radio/radio.ts

@@ -3,23 +3,26 @@ import {
   Component,
   ContentChildren,
   Directive,
+  ElementRef,
   EventEmitter,
   HostBinding,
   Input,
   OnInit,
   Optional,
   Output,
   QueryList,
+  ViewChild,
   ViewEncapsulation,
   forwardRef,
   NgModule,
   ModuleWithProviders,
 } from '@angular/core';
+import {CommonModule} from '@angular/common';
 import {
   NG_VALUE_ACCESSOR,
   ControlValueAccessor
 } from '@angular/forms';
-import {MdUniqueSelectionDispatcher} from '../core';
+import {BooleanFieldValue, MdRippleModule, MdUniqueSelectionDispatcher} from '../core';
 
 
 
@@ -258,6 +261,9 @@ export class MdRadioButton implements OnInit {
   /** The 'aria-labelledby' attribute takes precedence as the element's text alternative. */
   @Input('aria-labelledby') ariaLabelledby: string;
 
+  /** Whether the ripple effect on click should be disabled. */
+  @Input() @BooleanFieldValue() disableRipple: boolean = false;
+
   /** Whether this radio is disabled. */
   private _disabled: boolean;
 
@@ -272,6 +278,7 @@ export class MdRadioButton implements OnInit {
   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 +418,19 @@ export class MdRadioButton implements OnInit {
       this.radioGroup._touch();
     }
   }
+
+  getHostElement() {
+    return this._elementRef.nativeElement;
+  }
+
+  isRippleEnabled() {
+    return !this.disableRipple;
+  }
 }
 
 
 @NgModule({
+  imports: [CommonModule, MdRippleModule],
   exports: [MdRadioGroup, MdRadioButton],
   declarations: [MdRadioGroup, MdRadioButton],
 })