feat(radio): align with 2018 material design spec

src/lib/radio/_radio-theme.scss

@@ -7,13 +7,12 @@
     border-color: mat-color($palette);
   }
 
-  .mat-radio-inner-circle {
+  .mat-radio-inner-circle,
+  .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
+  &.mat-radio-checked .mat-radio-persistent-ripple,
+  &:active .mat-radio-persistent-ripple {
     background-color: mat-color($palette);
   }
-
-  .mat-radio-ripple .mat-ripple-element {
-    background-color: mat-color($palette, 0.26);
-  }
 }
 
 @mixin mat-radio-theme($theme) {
@@ -58,6 +57,12 @@
         color: mat-color($foreground, disabled);
       }
     }
+
+    // Switch this to a solid color since we're using `opacity`
+    // to control how opaque the ripple should be.
+    .mat-ripple-element {
+      background-color: map_get($foreground, base);
+    }
   }
 }
 

src/lib/radio/radio.html

@@ -9,8 +9,10 @@
          [matRippleTrigger]="label"
          [matRippleDisabled]="_isRippleDisabled()"
          [matRippleCentered]="true"
-         [matRippleRadius]="23"
+         [matRippleRadius]="20"
          [matRippleAnimation]="{enterDuration: 150}">
+
+      <div class="mat-ripple-element mat-radio-persistent-ripple"></div>
     </div>
   </div>
 

src/lib/radio/radio.scss

@@ -4,7 +4,7 @@
 
 
 $mat-radio-size: $mat-toggle-size !default;
-$mat-radio-ripple-radius: 25px;
+$mat-radio-ripple-radius: 20px;
 
 // Top-level host container.
 .mat-radio-button {
@@ -111,7 +111,8 @@ $mat-radio-ripple-radius: 25px;
 }
 
 // Basic disabled state.
-.mat-radio-disabled, .mat-radio-disabled .mat-radio-label {
+.mat-radio-disabled,
+.mat-radio-disabled .mat-radio-label {
   cursor: default;
 }
 
@@ -125,4 +126,29 @@ $mat-radio-ripple-radius: 25px;
   width: $mat-radio-ripple-radius * 2;
   z-index: 1;
   pointer-events: none;
+
+  .mat-ripple-element:not(.mat-radio-persistent-ripple) {
+    opacity: 0.16;
+  }
+}
+
+.mat-radio-persistent-ripple {
+  width: 100%;
+  height: 100%;
+  transform: none;
+
+  .mat-radio-container:hover & {
+    opacity: 0.04;
+  }
+
+  .mat-radio-button.cdk-focused & {
+    opacity: 0.12;
+  }
+
+  // We do this here, rather than having a `:not(.mat-radio-disabled)`
+  // above in the `:hover`, because the `:not` will bump the specificity
+  // a lot and will cause it to overide the focus styles.
+  &, .mat-radio-disabled .mat-radio-container:hover & {
+    opacity: 0;
+  }
 }

src/lib/radio/radio.spec.ts

@@ -3,7 +3,6 @@ import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/f
 import {Component, DebugElement, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {dispatchFakeEvent} from '@angular/cdk/testing';
-import {defaultRippleAnimationConfig} from '@angular/material/core';
 import {MatRadioButton, MatRadioChange, MatRadioGroup, MatRadioModule} from './index';
 
 describe('MatRadio', () => {
@@ -197,25 +196,6 @@ describe('MatRadio', () => {
       expect(changeSpy).toHaveBeenCalledTimes(1);
     });
 
-    it('should show a ripple when focusing via the keyboard', fakeAsync(() => {
-      expect(radioNativeElements[0].querySelectorAll('.mat-ripple-element').length)
-          .toBe(0, 'Expected no ripples on init.');
-
-      dispatchFakeEvent(radioInputElements[0], 'keydown');
-      dispatchFakeEvent(radioInputElements[0], 'focus');
-
-      tick(defaultRippleAnimationConfig.enterDuration);
-
-      expect(radioNativeElements[0].querySelectorAll('.mat-ripple-element').length)
-          .toBe(1, 'Expected one ripple after keyboard focus.');
-
-      dispatchFakeEvent(radioInputElements[0], 'blur');
-      tick(defaultRippleAnimationConfig.exitDuration);
-
-      expect(radioNativeElements[0].querySelectorAll('.mat-ripple-element').length)
-          .toBe(0, 'Expected no ripples on blur.');
-    }));
-
     it('should update the group and radios when updating the group value', () => {
       expect(groupInstance.value).toBeFalsy();
 
@@ -253,16 +233,21 @@ describe('MatRadio', () => {
       dispatchFakeEvent(radioLabelElements[0], 'mousedown');
       dispatchFakeEvent(radioLabelElements[0], 'mouseup');
 
-      expect(radioNativeElements[0].querySelectorAll('.mat-ripple-element').length)
-        .toBe(0, 'Expected a disabled radio button to not show ripples');
+      let rippleAmount = radioNativeElements[0]
+          .querySelectorAll('.mat-ripple-element:not(.mat-radio-persistent-ripple)').length;
+
+      expect(rippleAmount).toBe(0, 'Expected a disabled radio button to not show ripples');
 
       testComponent.isFirstDisabled = false;
       fixture.detectChanges();
 
       dispatchFakeEvent(radioLabelElements[0], 'mousedown');
       dispatchFakeEvent(radioLabelElements[0], 'mouseup');
 
-      expect(radioNativeElements[0].querySelectorAll('.mat-ripple-element').length)
+      rippleAmount = radioNativeElements[0]
+          .querySelectorAll('.mat-ripple-element:not(.mat-radio-persistent-ripple)').length;
+
+      expect(rippleAmount)
         .toBe(1, 'Expected an enabled radio button to show ripples');
     });
 
@@ -274,7 +259,10 @@ describe('MatRadio', () => {
         dispatchFakeEvent(radioLabel, 'mousedown');
         dispatchFakeEvent(radioLabel, 'mouseup');
 
-        expect(radioLabel.querySelectorAll('.mat-ripple-element').length).toBe(0);
+        const rippleAmount = radioNativeElements[0]
+            .querySelectorAll('.mat-ripple-element:not(.mat-radio-persistent-ripple)').length;
+
+        expect(rippleAmount).toBe(0);
       }
 
       testComponent.disableRipple = false;
@@ -284,7 +272,10 @@ describe('MatRadio', () => {
         dispatchFakeEvent(radioLabel, 'mousedown');
         dispatchFakeEvent(radioLabel, 'mouseup');
 
-        expect(radioLabel.querySelectorAll('.mat-ripple-element').length).toBe(1);
+        const rippleAmount = radioNativeElements[0]
+            .querySelectorAll('.mat-ripple-element:not(.mat-radio-persistent-ripple)').length;
+
+        expect(rippleAmount).toBe(1);
       }
     });
 

src/lib/radio/radio.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
+import {FocusMonitor} from '@angular/cdk/a11y';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
 import {
@@ -36,12 +36,10 @@ import {
   CanDisable,
   CanDisableRipple,
   HasTabIndex,
-  MatRipple,
   mixinColor,
   mixinDisabled,
   mixinDisableRipple,
   mixinTabIndex,
-  RippleRef,
 } from '@angular/material/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
@@ -459,12 +457,6 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
   /** Value assigned to this radio. */
   private _value: any = null;
 
-  /** The child ripple instance. */
-  @ViewChild(MatRipple) _ripple: MatRipple;
-
-  /** Reference to the current focus ripple. */
-  private _focusRipple: RippleRef | null;
-
   /** Unregister function for _radioDispatcher */
   private _removeUniqueSelectionListener: () => void = () => {};
 
@@ -518,12 +510,16 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
 
   ngAfterViewInit() {
     this._focusMonitor
-      .monitor(this._inputElement)
-      .subscribe(focusOrigin => this._onInputFocusChange(focusOrigin));
+      .monitor(this._elementRef, true)
+      .subscribe(focusOrigin => {
+        if (!focusOrigin && this.radioGroup) {
+          this.radioGroup._touch();
+        }
+      });
   }
 
   ngOnDestroy() {
-    this._focusMonitor.stopMonitoring(this._inputElement);
+    this._focusMonitor.stopMonitoring(this._elementRef);
     this._removeUniqueSelectionListener();
   }
 
@@ -570,21 +566,4 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
     }
   }
 
-  /** Function is called whenever the focus changes for the input element. */
-  private _onInputFocusChange(focusOrigin: FocusOrigin) {
-    // TODO(paul): support `program`. See https://github.com/angular/material2/issues/9889
-    if (!this._focusRipple && focusOrigin === 'keyboard') {
-      this._focusRipple = this._ripple.launch(0, 0, {persistent: true});
-    } else if (!focusOrigin) {
-      if (this.radioGroup) {
-        this.radioGroup._touch();
-      }
-
-      if (this._focusRipple) {
-        this._focusRipple.fadeOut();
-        this._focusRipple = null;
-      }
-    }
-  }
-
 }