feat(material-experimental/mdc-checkbox): support density scaling

Author: devversion

src/material-experimental/mdc-checkbox/BUILD.bazel

@@ -52,6 +52,7 @@ sass_binary(
     deps = [
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:core_scss_lib",
     ],
 )
 

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

@@ -77,7 +77,11 @@
   }
 }
 
-@mixin mat-mdc-checkbox-density($density-scale) {}
+@mixin mat-mdc-checkbox-density($density-scale) {
+  .mat-mdc-checkbox .mdc-checkbox {
+    @include mdc-checkbox-density($density-scale);
+  }
+}
 
 @mixin mat-mdc-checkbox-theme($theme) {
   $color: mat-get-color-config($theme);

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

@@ -31,7 +31,6 @@
       [matRippleTrigger]="checkbox"
       [matRippleDisabled]="disableRipple || disabled"
       [matRippleCentered]="true"
-      [matRippleRadius]="20"
       [matRippleAnimation]="_rippleAnimation"></div>
   </div>
   <label #label

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

@@ -3,6 +3,7 @@
 @import '@material/form-field/mixins.import';
 @import '@material/ripple/variables.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/style/_layout-common.scss';
 
 @include mdc-checkbox-without-ripple($query: $mat-base-styles-query);
 @include mdc-form-field-core-styles($query: $mat-base-styles-query);
@@ -51,13 +52,18 @@
   }
 }
 
-.mat-mdc-checkbox-ripple, .mat-mdc-checkbox .mdc-checkbox__background::before {
-  $ripple-size: 40px;
-  position: absolute;
-  width: $ripple-size;
-  height: $ripple-size;
-  top: 50%;
-  left: 50%;
-  margin: (-$ripple-size / 2) 0 0 (-$ripple-size / 2);
+.mat-mdc-checkbox-ripple {
+  @include mat-fill();
+
+  // Usually the ripple radius would be specified through the MatRipple input, but
+  // since we dynamically adjust the size of the ripple container, we cannot use a
+  // fixed ripple radius.
+  border-radius: 50%;
   pointer-events: none;
+
+  // Fixes the ripples not clipping to the border radius on Safari. Uses `:not(:empty)`
+  // in order to avoid creating extra layers when there aren't any ripples.
+  &:not(:empty) {
+    transform: translateZ(0);
+  }
 }