feat(chips): Expose method to begin chip exit animation (#2845)

Author: bonniezhou

demos/chips.html

@@ -63,6 +63,9 @@ <h2>Input Chips</h2>
         <button id="input-chip-set-button" class="mdc-button mdc-button--dense">
           Add Input Chip
         </button>
+        <button id="input-chip-set-delete-button" class="mdc-button mdc-button--dense">
+          Delete Last Chip
+        </button>
         <div id="input-chip-set" class="mdc-chip-set mdc-chip-set--input">
           <div class="demo-chip mdc-chip" tabindex="0">
             <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">face</i>
@@ -239,6 +242,7 @@ <h2>Custom theme</h2>
         var chipSets = document.querySelectorAll('.mdc-chip-set:not(#input-chip-set)');
         var input = document.getElementById('input-chip-set-input');
         var inputButton = document.getElementById('input-chip-set-button');
+        var deleteButton = document.getElementById('input-chip-set-delete-button');
 
         [].forEach.call(chipSets, function(chipSet) {
           mdc.chips.MDCChipSet.attachTo(chipSet);
@@ -281,8 +285,15 @@ <h2>Custom theme</h2>
           root && inputChipSetEl.removeChild(root);
         }
 
+        function deleteLastChip() {
+          const lastChipIndex = inputChipSetComponent.chips.length - 1;
+          const lastChip = inputChipSetComponent.chips[lastChipIndex];
+          lastChip.beginExit();
+        };
+
         inputButton.addEventListener('click', addInputChip);
         input.addEventListener('keydown', addInputChip);
+        deleteButton.addEventListener('click', deleteLastChip);
         inputChipSetEl.addEventListener('MDCChip:removal', removeChip);
       });
     </script>

packages/mdc-chips/README.md

@@ -213,6 +213,7 @@ Method Signature | Description
 --- | ---
 `get foundation() => MDCChipFoundation` | Returns the foundation
 `isSelected() => boolean` | Proxies to the foundation's `isSelected` method
+`beginExit() => void` | Begins the exit animation which leads to removal of the chip
 
 Property | Value Type | Description
 --- | --- | ---

packages/mdc-chips/chip/index.js

@@ -20,7 +20,7 @@ import {MDCRipple, MDCRippleFoundation} from '@material/ripple/index';
 
 import MDCChipAdapter from './adapter';
 import MDCChipFoundation from './foundation';
-import {strings} from './constants';
+import {strings, cssClasses} from './constants';
 
 /**
  * @extends {MDCComponent<!MDCChipFoundation>}
@@ -82,6 +82,13 @@ class MDCChip extends MDCComponent {
     return this.foundation_.isSelected();
   }
 
+  /**
+   * Begins the exit animation which leads to removal of the chip.
+   */
+  beginExit() {
+    this.root_.classList.add(cssClasses.CHIP_EXIT);
+  }
+
   /**
    * @return {!MDCChipFoundation}
    */

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

@@ -202,3 +202,9 @@ test('#isSelected proxies to foundation', () => {
   component.isSelected();
   td.verify(mockFoundation.isSelected());
 });
+
+test(`#beginExit adds ${MDCChipFoundation.cssClasses.CHIP_EXIT} class`, () => {
+  const {component, root} = setupMockFoundationTest();
+  component.beginExit();
+  assert.isTrue(root.classList.contains(MDCChipFoundation.cssClasses.CHIP_EXIT));
+});