Revert "feature(radio): Add ripple effect for radio buttons" (#1552)

Author: tinayuangao

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.
 

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);
   }
 }

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"

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);

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">

src/lib/radio/radio.ts

@@ -3,26 +3,23 @@ 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 {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],
 })