feat(checkbox): align with 2018 material design spec (#12493)

Aligns the checkbox component with the latest Material design spec.

Author: crisbeto

e2e/components/checkbox-e2e.spec.ts

@@ -14,16 +14,10 @@ describe('checkbox', () => {
       expect(inputEl.getAttribute('checked'))
           .toBeTruthy('Expect checkbox "checked" property to be true');
 
-      await browser.wait(ExpectedConditions.not(
-        ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
-
       checkboxEl.click();
 
       expect(inputEl.getAttribute('checked'))
           .toBeFalsy('Expect checkbox "checked" property to be false');
-
-      await browser.wait(ExpectedConditions.not(
-        ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
     });
 
     it('should toggle the checkbox when pressing space', () => {

src/lib/checkbox/_checkbox-theme.scss

@@ -60,7 +60,7 @@
   }
 
   .mat-checkbox-disabled {
-    &.mat-checkbox-checked, &.mat-checkbox-indeterminate {
+    &.mat-checkbox-checked:not(.mat-checkbox-indeterminate) {
       .mat-checkbox-background {
         background-color: $disabled-color;
       }
@@ -92,15 +92,15 @@
 
   .mat-checkbox:not(.mat-checkbox-disabled) {
     &.mat-primary .mat-checkbox-ripple .mat-ripple-element {
-      background-color: mat-color($primary, 0.26);
+      background-color: mat-color($primary);
     }
 
     &.mat-accent .mat-checkbox-ripple .mat-ripple-element {
-      background-color: mat-color($accent, 0.26);
+      background-color: mat-color($accent);
     }
 
     &.mat-warn .mat-checkbox-ripple .mat-ripple-element {
-      background-color: mat-color($warn, 0.26);
+      background-color: mat-color($warn);
     }
   }
 }

src/lib/checkbox/checkbox.html

@@ -19,9 +19,10 @@
     <div matRipple class="mat-checkbox-ripple"
          [matRippleTrigger]="label"
          [matRippleDisabled]="_isRippleDisabled()"
-         [matRippleRadius]="25"
+         [matRippleRadius]="20"
          [matRippleCentered]="true"
          [matRippleAnimation]="{enterDuration: 150}">
+      <div class="mat-ripple-element mat-checkbox-persistent-ripple"></div>
     </div>
     <div class="mat-checkbox-frame"></div>
     <div class="mat-checkbox-background">

src/lib/checkbox/checkbox.scss

@@ -11,7 +11,7 @@ $_mat-checkbox-mark-path-length: 22.910259;
 $_mat-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1);
 
 // The ripple size of the checkbox
-$_mat-checkbox-ripple-radius: 25px;
+$_mat-checkbox-ripple-radius: 20px;
 
 // The amount of spacing between the checkbox and its label.
 $_mat-checkbox-item-spacing: $mat-toggle-padding;
@@ -164,13 +164,6 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   }
 }
 
-// Applied to elements that are considered "marks" within the checkbox, e.g. the checkmark and
-// the mixedmark.
-%mat-checkbox-mark {
-  $width-padding-inset: 2 * $mat-checkbox-border-width;
-  width: calc(100% - #{$width-padding-inset});
-}
-
 // Applied to elements that appear to make up the outer box of the checkmark, such as the frame
 // that contains the border and the actual background element that contains the marks.
 %mat-checkbox-outer-box {
@@ -189,6 +182,10 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
+
+  .mat-ripple-element:not(.mat-checkbox-persistent-ripple) {
+    opacity: 0.16;
+  }
 }
 
 .mat-checkbox-layout {
@@ -260,10 +257,29 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   }
 }
 
+.mat-checkbox-persistent-ripple {
+  width: 100%;
+  height: 100%;
+  transform: none;
+
+  .mat-checkbox-inner-container:hover & {
+    opacity: 0.04;
+  }
+
+  .mat-checkbox.cdk-focused & {
+    opacity: 0.12;
+  }
+
+  // We do this here, rather than having a `:not(.mat-checkbox-disabled)`
+  // above in the `:hover`, because the `:not` will bump the specificity
+  // a lot and will cause it to overide the focus styles.
+  &, .mat-checkbox.mat-disabled .mat-checkbox-inner-container:hover & {
+    opacity: 0;
+  }
+}
+
 .mat-checkbox-checkmark {
   @include mat-fill;
-  @extend %mat-checkbox-mark;
-
   width: 100%;
 }
 
@@ -278,10 +294,11 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 .mat-checkbox-mixedmark {
   $height: floor($_mat-checkbox-mark-stroke-size);
 
-  @extend %mat-checkbox-mark;
+  width: calc(100% - 6px);
   height: $height;
   opacity: 0;
   transform: scaleX(0) rotate(0deg);
+  border-radius: 2px;
 
   @include cdk-high-contrast {
     height: 0;
@@ -335,6 +352,12 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
     opacity: 1;
     transform: scaleX(1) rotate(0deg);
   }
+
+  &.mat-checkbox-disabled {
+    .mat-checkbox-inner-container {
+      opacity: 0.5;
+    }
+  }
 }
 
 

src/lib/checkbox/checkbox.spec.ts

@@ -2,7 +2,6 @@ import {
   ComponentFixture,
   fakeAsync,
   TestBed,
-  tick,
   flush,
   flushMicrotasks,
 } from '@angular/core/testing';
@@ -11,7 +10,6 @@ import {Component, DebugElement, ViewChild, Type} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {dispatchFakeEvent} from '@angular/cdk/testing';
 import {MatCheckbox, MatCheckboxChange, MatCheckboxModule} from './index';
-import {defaultRippleAnimationConfig} from '@angular/material/core';
 import {MAT_CHECKBOX_CLICK_ACTION} from './checkbox-config';
 import {MutationObserverFactory} from '@angular/cdk/observers';
 
@@ -379,74 +377,59 @@ describe('MatCheckbox', () => {
       expect(inputElement.value).toBe('basic_checkbox');
     });
 
-    it('should show a ripple when focused by a keyboard action', fakeAsync(() => {
-      expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
-          .toBe(0, 'Expected no ripples on load.');
-
-      dispatchFakeEvent(inputElement, 'keydown');
-      dispatchFakeEvent(inputElement, 'focus');
-
-      tick(defaultRippleAnimationConfig.enterDuration);
-
-      expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
-          .toBe(1, 'Expected ripple after element is focused.');
-
-      dispatchFakeEvent(checkboxInstance._inputElement.nativeElement, 'blur');
-      tick(defaultRippleAnimationConfig.exitDuration);
-
-      expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
-          .toBe(0, 'Expected no ripple after element is blurred.');
-    }));
-
     it('should remove the SVG checkmark from the tab order', () => {
       expect(checkboxNativeElement.querySelector('svg')!.getAttribute('focusable')).toBe('false');
     });
 
     describe('ripple elements', () => {
 
       it('should show ripples on label mousedown', () => {
-        expect(checkboxNativeElement.querySelector('.mat-ripple-element')).toBeFalsy();
+        const rippleSelector = '.mat-ripple-element:not(.mat-checkbox-persistent-ripple)';
+
+        expect(checkboxNativeElement.querySelector(rippleSelector)).toBeFalsy();
 
         dispatchFakeEvent(labelElement, 'mousedown');
         dispatchFakeEvent(labelElement, 'mouseup');
 
-        expect(checkboxNativeElement.querySelectorAll('.mat-ripple-element').length).toBe(1);
+        expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(1);
       });
 
       it('should not show ripples when disabled', () => {
+        const rippleSelector = '.mat-ripple-element:not(.mat-checkbox-persistent-ripple)';
         testComponent.isDisabled = true;
         fixture.detectChanges();
 
         dispatchFakeEvent(labelElement, 'mousedown');
         dispatchFakeEvent(labelElement, 'mouseup');
 
-        expect(checkboxNativeElement.querySelectorAll('.mat-ripple-element').length).toBe(0);
+        expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(0);
 
         testComponent.isDisabled = false;
         fixture.detectChanges();
 
         dispatchFakeEvent(labelElement, 'mousedown');
         dispatchFakeEvent(labelElement, 'mouseup');
 
-        expect(checkboxNativeElement.querySelectorAll('.mat-ripple-element').length).toBe(1);
+        expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(1);
       });
 
       it('should remove ripple if matRippleDisabled input is set', () => {
+        const rippleSelector = '.mat-ripple-element:not(.mat-checkbox-persistent-ripple)';
         testComponent.disableRipple = true;
         fixture.detectChanges();
 
         dispatchFakeEvent(labelElement, 'mousedown');
         dispatchFakeEvent(labelElement, 'mouseup');
 
-        expect(checkboxNativeElement.querySelectorAll('.mat-ripple-element').length).toBe(0);
+        expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(0);
 
         testComponent.disableRipple = false;
         fixture.detectChanges();
 
         dispatchFakeEvent(labelElement, 'mousedown');
         dispatchFakeEvent(labelElement, 'mouseup');
 
-        expect(checkboxNativeElement.querySelectorAll('.mat-ripple-element').length).toBe(1);
+        expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(1);
       });
     });
 
@@ -842,19 +825,20 @@ describe('MatCheckbox', () => {
     });
 
     it('should toggle checkbox ripple disabledness correctly', () => {
+      const rippleSelector = '.mat-ripple-element:not(.mat-checkbox-persistent-ripple)';
       const labelElement = checkboxNativeElement.querySelector('label') as HTMLLabelElement;
 
       testComponent.isDisabled = true;
       fixture.detectChanges();
       dispatchFakeEvent(labelElement, 'mousedown');
       dispatchFakeEvent(labelElement, 'mouseup');
-      expect(checkboxNativeElement.querySelectorAll('.mat-ripple-element').length).toBe(0);
+      expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(0);
 
       testComponent.isDisabled = false;
       fixture.detectChanges();
       dispatchFakeEvent(labelElement, 'mousedown');
       dispatchFakeEvent(labelElement, 'mouseup');
-      expect(checkboxNativeElement.querySelectorAll('.mat-ripple-element').length).toBe(1);
+      expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(1);
     });
   });
 

src/lib/checkbox/checkbox.ts

@@ -6,11 +6,9 @@
  * 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 {
-  AfterViewChecked,
-  AfterViewInit,
   Attribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -26,6 +24,7 @@ import {
   Output,
   ViewChild,
   ViewEncapsulation,
+  AfterViewChecked,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
@@ -42,7 +41,6 @@ import {
   mixinDisabled,
   mixinDisableRipple,
   mixinTabIndex,
-  RippleRef,
 } from '@angular/material/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {MAT_CHECKBOX_CLICK_ACTION, MatCheckboxClickAction} from './checkbox-config';
@@ -133,8 +131,7 @@ export const _MatCheckboxMixinBase:
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor,
-    AfterViewChecked, AfterViewInit, OnDestroy, CanColor, CanDisable, HasTabIndex,
-    CanDisableRipple {
+    AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple {
 
   /**
    * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
@@ -195,9 +192,6 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
 
   private _controlValueAccessorChangeFn: (value: any) => void = () => {};
 
-  /** Reference to the focused state ripple. */
-  private _focusRipple: RippleRef | null;
-
   constructor(elementRef: ElementRef<HTMLElement>,
               private _changeDetectorRef: ChangeDetectorRef,
               private _focusMonitor: FocusMonitor,
@@ -209,20 +203,25 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
     super(elementRef);
 
     this.tabIndex = parseInt(tabIndex) || 0;
-  }
 
-  ngAfterViewInit() {
-    this._focusMonitor
-      .monitor(this._inputElement)
-      .subscribe(focusOrigin => this._onInputFocusChange(focusOrigin));
+    this._focusMonitor.monitor(elementRef, true).subscribe(focusOrigin => {
+      if (!focusOrigin) {
+        // When a focused element becomes disabled, the browser *immediately* fires a blur event.
+        // Angular does not expect events to be raised during change detection, so any state change
+        // (such as a form control's 'ng-touched') will cause a changed-after-checked error.
+        // See https://github.com/angular/angular/issues/17793. To work around this, we defer
+        // telling the form control it has been touched until the next tick.
+        Promise.resolve().then(() => this._onTouched());
+      }
+    });
   }
 
   ngAfterViewChecked() {
     this._calculateRippleRadius();
   }
 
   ngOnDestroy() {
-    this._focusMonitor.stopMonitoring(this._inputElement);
+    this._focusMonitor.stopMonitoring(this._elementRef);
   }
 
   /**
@@ -344,34 +343,14 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
   }
 
   private _emitChangeEvent() {
-    let event = new MatCheckboxChange();
+    const event = new MatCheckboxChange();
     event.source = this;
     event.checked = this.checked;
 
     this._controlValueAccessorChangeFn(this.checked);
     this.change.emit(event);
   }
 
-  /** 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._focusRipple) {
-        this._focusRipple.fadeOut();
-        this._focusRipple = null;
-      }
-
-      // When a focused element becomes disabled, the browser *immediately* fires a blur event.
-      // Angular does not expect events to be raised during change detection, so any state change
-      // (such as a form control's 'ng-touched') will cause a changed-after-checked error.
-      // See https://github.com/angular/angular/issues/17793. To work around this, we defer telling
-      // the form control it has been touched until the next tick.
-      Promise.resolve().then(() => this._onTouched());
-    }
-  }
-
   /** Toggles the `checked` state of the checkbox. */
   toggle(): void {
     this.checked = !this.checked;

src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -43,8 +43,7 @@
     background: mat-color(map-get($theme, warn));
   }
 
-  .mat-pseudo-checkbox-checked,
-  .mat-pseudo-checkbox-indeterminate {
+  .mat-pseudo-checkbox-checked {
     &.mat-pseudo-checkbox-disabled {
       background: $disabled-color;
     }