fix(chips): Extend ripple to fill the chip when animating width (#2423)

packages/mdc-chips/chip/constants.js

@@ -18,6 +18,7 @@
 /** @enum {string} */
 const strings = {
   INTERACTION_EVENT: 'MDCChip:interaction',
+  CHECKMARK_SELECTOR: '.mdc-chip__checkmark',
   LEADING_ICON_SELECTOR: '.mdc-chip__icon--leading',
   TRAILING_ICON_INTERACTION_EVENT: 'MDCChip:trailingIconInteraction',
   TRAILING_ICON_SELECTOR: '.mdc-chip__icon--trailing',

packages/mdc-chips/chip/index.js

@@ -16,7 +16,7 @@
  */
 
 import MDCComponent from '@material/base/component';
-import {MDCRipple} from '@material/ripple/index';
+import {MDCRipple, MDCRippleFoundation} from '@material/ripple/index';
 
 import MDCChipAdapter from './adapter';
 import MDCChipFoundation from './foundation';
@@ -34,9 +34,9 @@ class MDCChip extends MDCComponent {
     super(...args);
 
     /** @private {?Element} */
-    this.leadingIcon_ = this.root_.querySelector(strings.LEADING_ICON_SELECTOR);
+    this.leadingIcon_;
     /** @private {!MDCRipple} */
-    this.ripple_ = new MDCRipple(this.root_);
+    this.ripple_;
   }
 
   /**
@@ -47,6 +47,28 @@ class MDCChip extends MDCComponent {
     return new MDCChip(root);
   }
 
+  initialize() {
+    this.leadingIcon_ = this.root_.querySelector(strings.LEADING_ICON_SELECTOR);
+
+    // Adjust ripple size for chips with animated growing width. This applies when filter chips without
+    // a leading icon are selected, and a leading checkmark will cause the chip width to expand.
+    const checkmarkEl = this.root_.querySelector(strings.CHECKMARK_SELECTOR);
+    if (checkmarkEl && !this.leadingIcon_) {
+      const adapter = Object.assign(MDCRipple.createAdapter(this), {
+        computeBoundingRect: () => {
+          const height = this.root_.getBoundingClientRect().height;
+          // The checkmark's width is initially set to 0, so use the checkmark's height as a proxy since the
+          // checkmark should always be square.
+          const width = this.root_.getBoundingClientRect().width + checkmarkEl.getBoundingClientRect().height;
+          return {height, width};
+        },
+      });
+      this.ripple_ = new MDCRipple(this.root_, new MDCRippleFoundation(adapter));
+    } else {
+      this.ripple_ = new MDCRipple(this.root_);
+    }
+  }
+
   destroy() {
     this.ripple_.destroy();
     super.destroy();