9.2. Address CI failures and reviewer feedback

Fixes unit tests in Edge and approves the new API goldens for checkbox.

Author: mmalerba

src/lib/checkbox/checkbox-module.ts

@@ -13,6 +13,7 @@ import {MatCommonModule, MatRippleModule} from '@angular/material/core';
 import {MatCheckbox} from './checkbox';
 import {MatCheckboxRequiredValidator} from './checkbox-required-validator';
 
+/** This module is used by both original and MDC-based checkbox implementations. */
 @NgModule({
   exports: [MatCheckboxRequiredValidator],
   declarations: [MatCheckboxRequiredValidator],

src/material-experimental/mdc-checkbox/README.md

@@ -14,7 +14,7 @@ component by following these steps:
    ```
 
 2. In your `angular.json`, make sure `node_modules/` is listed as a Sass include path. This is
-  needed for the Sass compiler to be able to find the MDC Web Sass files.
+   needed for the Sass compiler to be able to find the MDC Web Sass files.
 
    ```json
    ...
@@ -74,7 +74,7 @@ differences:
 * The experimental `MatCheckbox` does not have a public `ripple` property.
 
 ## Replacing the standard checkbox in an existing app
-Because the experimental API mirrors the API for the standard checkbox, it cn easily be swapped in
+Because the experimental API mirrors the API for the standard checkbox, it can easily be swapped in
 by just changing the import paths. There is currently no schematic for this, but you can run the
 following string replace across your TypeScript files:
 

src/material-experimental/mdc-checkbox/_mdc-checkbox.scss

@@ -10,7 +10,8 @@
   $accent: mat-color(map-get($theme, accent));
   $warn: mat-color(map-get($theme, warn));
 
-  // Save original values of MDC global variables.
+  // Save original values of MDC global variables. We need to save these so we can restore the
+  // variables to their original values and prevent unintended side effects from using this mixin.
   $orig-mdc-checkbox-mark-color: $mdc-checkbox-mark-color;
   $orig-mdc-checkbox-baseline-theme-color: $mdc-checkbox-baseline-theme-color;
   $orig-mdc-checkbox-border-color: $mdc-checkbox-border-color;
@@ -25,6 +26,9 @@
     @include mdc-checkbox-without-ripple($query: $mat-theme-styles-query);
     @include mdc-form-field-core-styles($query: $mat-theme-styles-query);
 
+    // MDC's checkbox doesn't support a `color` property. We add support for it by adding a CSS
+    // class for accent and warn style, and applying the appropriate overrides below. Since we don't
+    // use MDC's ripple, we also need to set the color for our replacement ripple.
     .mat-mdc-checkbox {
       .mat-ripple-element {
         background: $primary;

src/material-experimental/mdc-checkbox/checkbox.html

@@ -18,7 +18,8 @@
            [required]="required"
            [tabIndex]="tabIndex"
            (blur)="_onBlur()"
-           (change)="_onChange($event)"/>
+           (click)="_onClick()"
+           (change)="$event.stopPropagation()"/>
     <div class="mdc-checkbox__background">
       <svg class="mdc-checkbox__checkmark"
            focusable="false"

src/material-experimental/mdc-checkbox/checkbox.scss

@@ -8,25 +8,31 @@
 @include mdc-form-field-core-styles($query: $mat-base-styles-query);
 
 .mat-mdc-checkbox {
-  // stylelint-disable selector-class-pattern
-
+  // The MDC checkbox styles related to the hover state are intertwined with the MDC ripple styles.
+  // We currently don't use the MDC ripple due to size concerns, therefore we need to add some
+  // additional styles to restore the hover state.
   .mdc-checkbox:hover
       .mdc-checkbox__native-control:not([disabled]) ~ .mdc-checkbox__background::before {
     opacity: map-get($mdc-ripple-dark-ink-opacities, hover);
     transform: scale(2.75, 2.75);
-    transition: mdc-checkbox-transition-enter(opacity, 0ms, 80ms),
-                mdc-checkbox-transition-enter(transform, 0ms, 80ms);
+    transition: mdc-checkbox-transition-enter(opacity, 0, 80ms),
+                mdc-checkbox-transition-enter(transform, 0, 80ms);
   }
 
   .mdc-checkbox:hover .mdc-checkbox__native-control:focus ~ .mdc-checkbox__background::before {
     opacity: map-get($mdc-ripple-dark-ink-opacities, hover) +
                  map-get($mdc-ripple-dark-ink-opacities, focus);
   }
 
+  // We use an Angular Material ripple rather than an MDC ripple due to size concerns, so we need to
+  // style it appropriately.
   .mat-ripple-element {
     opacity: map-get($mdc-ripple-dark-ink-opacities, press);
   }
 
+  // Angular Material supports disabling all animations when NoopAnimationsModule is imported.
+  // TODO(mmalerba): Look into using MDC's Sass queries to separate the animation styles and
+  //  conditionally add them. Consider the size cost when deciding whether to switch.
   &._mat-animation-noopable {
     *,
     *::before {
@@ -35,8 +41,9 @@
     }
   }
 
+  // The MDC styles result in extra padding if the label is present but empty. To fix this we hide
+  // the label when it is empty.
   label:empty {
     display: none;
   }
-  // stylelint-enable selector-class-pattern
 }