From 8f0aaeae050c4b7f1ff39d8230208261864d1f71 Mon Sep 17 00:00:00 2001
From: tinayuangao <yuan.gao.tina@gmail.com>
Date: Thu, 20 Oct 2016 15:36:11 -0700
Subject: [PATCH] Revert "feature(radio): Add ripple effect for radio buttons"
 (#1552)

---
 src/lib/radio/README.md         |  1 -
 src/lib/radio/_radio-theme.scss |  3 ++-
 src/lib/radio/radio.html        |  6 +-----
 src/lib/radio/radio.scss        | 11 +----------
 src/lib/radio/radio.spec.ts     | 25 ++++++-------------------
 src/lib/radio/radio.ts          | 18 +-----------------
 6 files changed, 11 insertions(+), 53 deletions(-)

diff --git a/src/lib/radio/README.md b/src/lib/radio/README.md
index 1caf6e182c3..7c30a1f812a 100644
--- a/src/lib/radio/README.md
+++ b/src/lib/radio/README.md
@@ -57,7 +57,6 @@ 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.
 
diff --git a/src/lib/radio/_radio-theme.scss b/src/lib/radio/_radio-theme.scss
index e978c9b58fd..a6e2229a7a2 100644
--- a/src/lib/radio/_radio-theme.scss
+++ b/src/lib/radio/_radio-theme.scss
@@ -29,7 +29,8 @@
     }
   }
 
-  .md-radio-focused .md-radio-ripple .md-ripple-foreground {
+  // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied.
+  .md-radio-focused .md-ink-ripple {
     background-color: md-color($accent, 0.26);
   }
 }
diff --git a/src/lib/radio/radio.html b/src/lib/radio/radio.html
index aca2d17d5a9..aa0c80a4657 100644
--- a/src/lib/radio/radio.html
+++ b/src/lib/radio/radio.html
@@ -1,15 +1,11 @@
 <!-- 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 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 class="md-ink-ripple"></div>
   </div>
 
   <input #input class="md-radio-input md-visually-hidden" type="radio"
diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss
index 6d46997293a..2d92d7cc49b 100644
--- a/src/lib/radio/radio.scss
+++ b/src/lib/radio/radio.scss
@@ -3,7 +3,6 @@
 
 
 $md-radio-size: $md-toggle-size !default;
-$md-radio-ripple-size: $md-radio-size * 0.75;
 
 // Top-level host container.
 md-radio-button {
@@ -90,12 +89,4 @@ md-radio-button {
   cursor: default;
 }
 
-.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;
-}
+@include md-temporary-ink-ripple(radio);
diff --git a/src/lib/radio/radio.spec.ts b/src/lib/radio/radio.spec.ts
index f1cf3e60121..af7303fa193 100644
--- a/src/lib/radio/radio.spec.ts
+++ b/src/lib/radio/radio.spec.ts
@@ -216,21 +216,6 @@ 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', () => {
@@ -441,25 +426,26 @@ describe('MdRadio', () => {
   });
 });
 
+
 @Component({
   template: `
   <md-radio-group [disabled]="isGroupDisabled"
                   [align]="alignment"
                   [value]="groupValue"
                   name="test-name">
-    <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-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-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>
@@ -478,6 +464,7 @@ class RadiosInsideRadioGroup {
 })
 class StandaloneRadioButtons { }
 
+
 @Component({
   template: `
   <md-radio-group [(ngModel)]="modelValue" (change)="lastEvent = $event">
diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts
index 2facef58fd5..125943f9589 100644
--- a/src/lib/radio/radio.ts
+++ b/src/lib/radio/radio.ts
@@ -3,7 +3,6 @@ import {
   Component,
   ContentChildren,
   Directive,
-  ElementRef,
   EventEmitter,
   HostBinding,
   Input,
@@ -11,18 +10,16 @@ import {
   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 {BooleanFieldValue, MdRippleModule, MdUniqueSelectionDispatcher} from '../core';
+import {MdUniqueSelectionDispatcher} from '../core';
 
 
 
@@ -261,9 +258,6 @@ 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;
 
@@ -278,7 +272,6 @@ 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.
@@ -418,19 +411,10 @@ 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],
 })