fix(chips): Fix choice-chips leading icon being hidden (#2796)

Add a boolean to not remove the leading icon when selected chip does not contain a checkmark. Change the color of the leading icon when selected. Change the tests to ensure it is checking the right chips. Add test for selected chip with leading icon and no checkmark, to not remove the leading icon. Fixes #2728
material-components · May 30, 2018 · 7d406fa · 7d406fa
1 parent d7eca82
commit 7d406fa
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 29 deletions.
diff --git a/packages/mdc-chips/_mixins.scss b/packages/mdc-chips/_mixins.scss
@@ -60,6 +60,7 @@
 
   &.mdc-chip--selected {
     @include mdc-theme-prop(color, $color);
+    @include mdc-chip-leading-icon-color($color);
 
     &:hover {
       @include mdc-theme-prop(color, $color);

diff --git a/packages/mdc-chips/chip/mdc-chip.scss b/packages/mdc-chips/chip/mdc-chip.scss
@@ -115,41 +115,43 @@
 
 // Add leading checkmark to filter chips with a leading icon
 
-.mdc-chip__icon--leading {
-  transition: opacity $mdc-chip-opacity-animation-duration linear;
-  transition-delay: $mdc-chip-leading-icon-delay;
-  opacity: 1;
-
-  + .mdc-chip__checkmark {
+.mdc-chip-set--filter {
+  .mdc-chip__icon--leading {
     transition: opacity $mdc-chip-opacity-animation-duration linear;
+    transition-delay: $mdc-chip-leading-icon-delay;
+    opacity: 1;
 
-    // Delay the checkmark transition.
-    transition-delay: $mdc-chip-checkmark-with-leading-icon-delay;
-    opacity: 0;
+    + .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 {
-      transition: width 0ms;
+      .mdc-chip__checkmark-svg {
+        transition: width 0ms;
+      }
     }
   }
-}
 
-.mdc-chip--selected .mdc-chip__icon--leading {
-  opacity: 0;
+  .mdc-chip--selected .mdc-chip__icon--leading {
+    opacity: 0;
 
-  + .mdc-chip__checkmark {
-    // This ensures that the checkmark has zero width while the leading icon is still animating.
-    width: 0;
-    opacity: 1;
+    + .mdc-chip__checkmark {
+      // This ensures that the checkmark has zero width while the leading icon is still animating.
+      width: 0;
+      opacity: 1;
+    }
   }
-}
 
-.mdc-chip__icon--leading-hidden.mdc-chip__icon--leading {
-  width: 0;
+  .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading {
+    width: 0;
 
-  // This ensures that the leading icon doesn't fade in while the checkmark is fading out.
-  opacity: 0;
+    // This ensures that the leading icon doesn't fade in while the checkmark is fading out.
+    opacity: 0;
 
-  + .mdc-chip__checkmark {
-    width: $mdc-chip-leading-icon-size;
+    + .mdc-chip__checkmark {
+      width: $mdc-chip-leading-icon-size;
+    }
   }
 }
diff --git a/test/unit/mdc-chips/mdc-chip.foundation.test.js b/test/unit/mdc-chips/mdc-chip.foundation.test.js
@@ -36,10 +36,11 @@ test('exports cssClasses', () => {
 
 test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCChipFoundation, [
-    'addClass', 'removeClass', 'hasClass', 'addClassToLeadingIcon', 'removeClassFromLeadingIcon',
-    'eventTargetHasClass', 'registerEventHandler', 'deregisterEventHandler',
-    'registerTrailingIconInteractionHandler', 'deregisterTrailingIconInteractionHandler',
-    'notifyInteraction', 'notifyTrailingIconInteraction', 'notifyRemoval',
+    'addClass', 'removeClass', 'hasClass', 'addClassToLeadingIcon',
+    'removeClassFromLeadingIcon', 'eventTargetHasClass', 'registerEventHandler',
+    'deregisterEventHandler', 'registerTrailingIconInteractionHandler',
+    'deregisterTrailingIconInteractionHandler', 'notifyInteraction',
+    'notifyTrailingIconInteraction', 'notifyRemoval',
     'getComputedStyleValue', 'setStyleProperty',
   ]);
 });