fix(checkbox): Replace unique-id with custom color hash function to generate keyframes

packages/mdc-checkbox/_mixins.scss

@@ -26,6 +26,7 @@
 @import "@material/feature-targeting/mixins";
 @import "@material/ripple/mixins";
 @import "@material/touch-target/mixins";
+@import "@material/theme/functions";
 @import "./functions";
 @import "./keyframes";
 @import "./variables";
@@ -297,7 +298,11 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
   }
 
   @if $generate-keyframes {
-    $uid: unique-id();
+    $uid: mdc-theme-color-hash($unmarked-stroke-color) +
+      mdc-theme-color-hash($marked-stroke-color) +
+      mdc-theme-color-hash($unmarked-fill-color) +
+      mdc-theme-color-hash($marked-fill-color);
+
     $anim-selector: if(&, "&.mdc-checkbox--anim", ".mdc-checkbox--anim");
 
     @include mdc-feature-targets($feat-animation, $feat-color) {
@@ -306,7 +311,7 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
         $to-stroke-color: $marked-stroke-color,
         $from-fill-color: $unmarked-fill-color,
         $to-fill-color: $marked-fill-color,
-        $uid: $uid
+        $uid: #{$uid}
       );
     }
 

packages/mdc-theme/_functions.scss

@@ -79,3 +79,16 @@
 
   @return var(#{$var}, $fallback);
 }
+
+///
+/// @param $color Target color in any color format.
+/// @return Returns hash in string format that uniquely represents
+///     any given color format. Useful for generating unique keyframe names.
+///
+@function mdc-theme-color-hash($color) {
+  @if type-of($color) == "string" {
+    @return $color;
+  }
+
+  @return str-slice(ie-hex-str($color), 2);
+}

testing/dom/events.ts

@@ -27,17 +27,17 @@
  * supported.
  */
 export function emitEvent(
-  targetEl: Element, eventName: string, {bubbles, cancelable}: EventInit = {
-    bubbles: false,
-    cancelable: false
-  }) {
-let event;
-if (typeof(Event) === 'function') {
-  event = new Event(eventName, {bubbles, cancelable});
-} else {
-  // IE11 support.
-  event = document.createEvent('Event');
-  event.initEvent(eventName, bubbles, cancelable);
-}
-targetEl.dispatchEvent(event);
+    targetEl: Element, eventName: string, {bubbles, cancelable}: EventInit = {
+      bubbles: false,
+      cancelable: false
+    }) {
+  let event;
+  if (typeof(Event) === 'function') {
+    event = new Event(eventName, {bubbles, cancelable});
+  } else {
+    // IE11 support.
+    event = document.createEvent('Event');
+    event.initEvent(eventName, bubbles, cancelable);
+  }
+  targetEl.dispatchEvent(event);
 }