feat(checkbox): Use new ripple mixins, and remove unnecessary mixin (#…

…1472)

BREAKING CHANGE: The mdc-checkbox-ripple mixin has been removed; use mdc-ripple-color directly.

demos/checkbox.scss

@@ -18,6 +18,7 @@
 @import "../packages/mdc-button/mdc-button";
 @import "../packages/mdc-checkbox/mdc-checkbox";
 @import "../packages/mdc-form-field/mdc-form-field";
+@import "../packages/mdc-ripple/mixins";
 @import "../packages/mdc-theme/color-palette";
 @import "../packages/mdc-theme/mixins";
 @import "../packages/mdc-typography/mdc-typography";
@@ -26,7 +27,7 @@
   $color: $material-color-red-500;
 
   @include mdc-checkbox-focus-indicator-color($color);
-  @include mdc-checkbox-ripple((base-color: $color, opacity: $mdc-checkbox-ripple-opacity));
+  @include mdc-ripple-color($color, $mdc-checkbox-ripple-opacity);
   @include mdc-checkbox-container-colors(
     $unmarked-stroke-color: $color,
     $unmarked-fill-color: rgba($color, .25),

packages/mdc-checkbox/README.md

@@ -266,9 +266,8 @@ Mixin | Description
 `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox
 `mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons
 `mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator
-`mdc-checkbox-ripple($ripple-config)` | Sets the ripple to the given [ripple configuration][ripple-readme]
 
-[ripple-readme]: https://github.com/material-components/material-components-web/blob/master/packages/mdc-ripple/README.md
+The ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.
 
 #### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-fill-color, $generate-keyframes)`
 

packages/mdc-checkbox/_mixins.scss

@@ -15,7 +15,6 @@
 //
 
 @import "@material/animation/functions";
-@import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 @import "./functions";
 @import "./keyframes";
@@ -87,13 +86,6 @@
   }
 }
 
-@mixin mdc-checkbox-ripple($ripple-config) {
-  $ripple-config: map-merge((opacity: $mdc-checkbox-ripple-opacity, radius: 50%), $ripple-config);
-
-  @include mdc-ripple-bg(map-merge((pseudo: "::before"), $ripple-config));
-  @include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config));
-}
-
 //
 // Private
 //

packages/mdc-checkbox/_variables.scss

@@ -29,6 +29,7 @@ $mdc-checkbox-border-width: 2px;
 $mdc-checkbox-transition-duration: 90ms;
 $mdc-checkbox-item-spacing: 4px;
 $mdc-checkbox-ripple-opacity: .14;
+$mdc-checkbox-ripple-radius: 50%;
 $mdc-checkbox-focus-indicator-opacity: .26;
 
 // Manual calculation done on SVG

packages/mdc-checkbox/mdc-checkbox.scss

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+@import "@material/ripple/mixins";
 @import "@material/theme/mixins";
 @import "./mixins";
 @import "./variables";
@@ -22,10 +23,11 @@
 
 .mdc-checkbox {
   @include mdc-checkbox-base_;
-  @include mdc-ripple-base;
   @include mdc-checkbox-ink-color($mdc-checkbox-mark-color);
   @include mdc-checkbox-focus-indicator-color($mdc-checkbox-baseline-theme-color);
-  @include mdc-checkbox-ripple((theme-style: $mdc-checkbox-baseline-theme-color, opacity: $mdc-checkbox-ripple-opacity));
+  @include mdc-ripple-surface;
+  @include mdc-ripple-color($mdc-checkbox-baseline-theme-color, $mdc-checkbox-ripple-opacity);
+  @include mdc-ripple-radius($mdc-checkbox-ripple-radius);
   @include mdc-checkbox-container-colors();
 
   @include mdc-theme-dark {