From 9e35b1eef95b340169b92593b07bb4037fe6aef9 Mon Sep 17 00:00:00 2001
From: Esteban Gonzalez <esgonzalez@google.com>
Date: Tue, 29 May 2018 10:20:20 -0700
Subject: [PATCH] fix(chips): Add delay to filter chip checkmark (#2804)

---
 packages/mdc-chips/_variables.scss    | 2 ++
 packages/mdc-chips/chip/mdc-chip.scss | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/packages/mdc-chips/_variables.scss b/packages/mdc-chips/_variables.scss
index 1ba26479cb0..614e910bd9d 100644
--- 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
index ab2067e0567..09a77e01d31 100644
--- 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 {