fix(chips): Add delay to filter chip checkmark (#2804)

material-components · May 29, 2018 · 9e35b1e · 9e35b1e
1 parent 2f13286
commit 9e35b1e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/packages/mdc-chips/_variables.scss b/packages/mdc-chips/_variables.scss
@@ -28,6 +28,8 @@ $mdc-chip-trailing-icon-hover-opacity: .62;
 $mdc-chip-trailing-icon-focus-opacity: .87;
 $mdc-chip-leading-icon-size: 20px;
 $mdc-chip-trailing-icon-size: 18px;
+$mdc-chip-leading-icon-delay: -50ms; // Speed up delay to bridge gap between leading icon and checkmark transition.
+$mdc-chip-checkmark-with-leading-icon-delay: 80ms;
 
 $mdc-chip-checkmark-animation-delay: 50ms;
 $mdc-chip-checkmark-animation-duration: 150ms;

diff --git a/packages/mdc-chips/chip/mdc-chip.scss b/packages/mdc-chips/chip/mdc-chip.scss
@@ -117,10 +117,14 @@
 
 .mdc-chip__icon--leading {
   transition: opacity $mdc-chip-opacity-animation-duration linear;
+  transition-delay: $mdc-chip-leading-icon-delay;
   opacity: 1;
 
   + .mdc-chip__checkmark {
     transition: opacity $mdc-chip-opacity-animation-duration linear;
+
+    // Delay the checkmark transition.
+    transition-delay: $mdc-chip-checkmark-with-leading-icon-delay;
     opacity: 0;
 
     .mdc-chip__checkmark-svg {