refactor(chips): Manage chip foundations instead of chips in the chip set foundation (#2397)

BREAKING CHANGE: Expose a foundation getter in MDCChips

Author: bonniezhou

packages/mdc-chips/README.md

@@ -154,6 +154,7 @@ To use the `MDCChip` and `MDCChipSet` classes, [import](../../docs/importing-js.
 
 Method Signature | Description
 --- | ---
+`get foundation() => MDCChipFoundation` | Returns the foundation
 `toggleSelected() => void` | Proxies to the foundation's `toggleSelected` method
 
 Property | Value Type | Description
@@ -182,8 +183,10 @@ Method Signature | Description
 `deregisterEventHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root element
 `registerTrailingIconInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the trailing icon element
 `deregisterTrailingIconInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the trailing icon element
-`notifyInteraction() => void` | Emits a custom event `MDCChip:interaction` denoting the chip has been interacted with, which bubbles to the parent `mdc-chip-set` element
-`notifyTrailingIconInteraction() => void` | Emits a custom event `MDCChip:trailingIconInteraction` denoting the chip's trailing icon has been interacted with, which bubbles to the parent `mdc-chip-set` element
+`notifyInteraction() => void` | Emits a custom event `MDCChip:interaction` denoting the chip has been interacted with
+`notifyTrailingIconInteraction() => void` | Emits a custom event `MDCChip:trailingIconInteraction` denoting the chip's trailing icon has been interacted with
+
+> _NOTE_: The custom events emitted by `notifyInteraction` and `notifyTrailingIconInteraction` must pass along the target chip in its event `detail`, as well as bubble to the parent `mdc-chip-set` element.
 
 #### `MDCChipSetAdapter`
 

packages/mdc-chips/chip-set/foundation.js

@@ -17,8 +17,7 @@
 
 import MDCFoundation from '@material/base/foundation';
 import MDCChipSetAdapter from './adapter';
-// eslint-disable-next-line no-unused-vars
-import {MDCChip, MDCChipFoundation} from '../chip/index';
+import MDCChipFoundation from '../chip/foundation';
 import {strings, cssClasses} from './constants';
 
 /**
@@ -57,7 +56,7 @@ class MDCChipSetFoundation extends MDCFoundation {
 
     /**
      * The selected chips in the set. Only used for choice chip set or filter chip set.
-     * @private {!Array<!MDCChip>}
+     * @private {!Array<!MDCChipFoundation>}
      */
     this.selectedChips_ = [];
 
@@ -81,25 +80,25 @@ class MDCChipSetFoundation extends MDCFoundation {
    * @private
    */
   handleChipInteraction_(evt) {
-    const {chip} = evt.detail;
+    const chipFoundation = evt.detail.chip.foundation;
     if (this.adapter_.hasClass(cssClasses.CHOICE)) {
       if (this.selectedChips_.length === 0) {
-        this.selectedChips_[0] = chip;
-      } else if (this.selectedChips_[0] !== chip) {
+        this.selectedChips_[0] = chipFoundation;
+      } else if (this.selectedChips_[0] !== chipFoundation) {
         this.selectedChips_[0].toggleSelected();
-        this.selectedChips_[0] = chip;
+        this.selectedChips_[0] = chipFoundation;
       } else {
         this.selectedChips_ = [];
       }
-      chip.toggleSelected();
+      chipFoundation.toggleSelected();
     } else if (this.adapter_.hasClass(cssClasses.FILTER)) {
-      const index = this.selectedChips_.indexOf(chip);
+      const index = this.selectedChips_.indexOf(chipFoundation);
       if (index >= 0) {
         this.selectedChips_.splice(index, 1);
       } else {
-        this.selectedChips_.push(chip);
+        this.selectedChips_.push(chipFoundation);
       }
-      chip.toggleSelected();
+      chipFoundation.toggleSelected();
     }
   }
 }

packages/mdc-chips/chip/index.js

@@ -59,6 +59,13 @@ class MDCChip extends MDCComponent {
     this.foundation_.toggleSelected();
   }
 
+  /**
+   * @return {!MDCChipFoundation}
+   */
+  get foundation() {
+    return this.foundation_;
+  }
+
   /**
    * @return {!MDCChipFoundation}
    */

test/unit/mdc-chips/mdc-chip-set.foundation.test.js

@@ -42,10 +42,14 @@ const setupTest = () => {
   const mockAdapter = td.object(MDCChipSetFoundation.defaultAdapter);
   const foundation = new MDCChipSetFoundation(mockAdapter);
   const chipA = td.object({
-    toggleSelected: () => {},
+    foundation: {
+      toggleSelected: () => {},
+    },
   });
   const chipB = td.object({
-    toggleSelected: () => {},
+    foundation: {
+      toggleSelected: () => {},
+    },
   });
   return {foundation, mockAdapter, chipA, chipB};
 };
@@ -81,24 +85,24 @@ test('on custom MDCChip:interaction event toggles selected state with single sel
       chip: chipA,
     },
   });
-  td.verify(chipA.toggleSelected());
+  td.verify(chipA.foundation.toggleSelected());
   assert.equal(foundation.selectedChips_.length, 1);
 
   chipInteractionHandler({
     detail: {
       chip: chipB,
     },
   });
-  td.verify(chipA.toggleSelected());
-  td.verify(chipB.toggleSelected());
+  td.verify(chipA.foundation.toggleSelected());
+  td.verify(chipB.foundation.toggleSelected());
   assert.equal(foundation.selectedChips_.length, 1);
 
   chipInteractionHandler({
     detail: {
       chip: chipB,
     },
   });
-  td.verify(chipB.toggleSelected());
+  td.verify(chipB.foundation.toggleSelected());
   assert.equal(foundation.selectedChips_.length, 0);
 });
 
@@ -119,30 +123,30 @@ test('on custom MDCChip:interaction event toggles selected state with multi-sele
       chip: chipA,
     },
   });
-  td.verify(chipA.toggleSelected());
+  td.verify(chipA.foundation.toggleSelected());
   assert.equal(foundation.selectedChips_.length, 1);
 
   chipInteractionHandler({
     detail: {
       chip: chipB,
     },
   });
-  td.verify(chipB.toggleSelected());
+  td.verify(chipB.foundation.toggleSelected());
   assert.equal(foundation.selectedChips_.length, 2);
 
   chipInteractionHandler({
     detail: {
       chip: chipB,
     },
   });
-  td.verify(chipB.toggleSelected());
+  td.verify(chipB.foundation.toggleSelected());
   assert.equal(foundation.selectedChips_.length, 1);
 
   chipInteractionHandler({
     detail: {
       chip: chipA,
     },
   });
-  td.verify(chipA.toggleSelected());
+  td.verify(chipA.foundation.toggleSelected());
   assert.equal(foundation.selectedChips_.length, 0);
 });