fix(chips): Trailing icon and remove icon are the same thing (#2616)

BREAKING CHANGE: Get rid of mdc-chip__icon--remove API.
material-components · Apr 20, 2018 · 9e64c32 · 9e64c32
1 parent 02a3def
commit 9e64c32
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 16 deletions.
diff --git a/demos/chips.html b/demos/chips.html
@@ -54,21 +54,25 @@
       </section>
 
       <section class="example">
+        <div id="entry-chip-icon-clones">
+            <i class="entry-leading-icon material-icons mdc-chip__icon mdc-chip__icon--leading">face</i>
+            <i class="entry-trailing-icon material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="0" role="button">cancel</i>
+        </div>
         <h2>Entry Chips</h2>
         <input id="entry-chip-set-input" placeholder="Chip text">
         <button id="entry-chip-set-button" class="mdc-button mdc-button--dense">
           Add Entry Chip
         </button>
         <div id="entry-chip-set" class="mdc-chip-set mdc-chip-set--entry">
           <div class="demo-chip mdc-chip" tabindex="0">
-            <i id="entry-leading-icon" class="material-icons mdc-chip__icon mdc-chip__icon--leading">face</i>
+            <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">face</i>
             <div class="mdc-chip__text">Jane Smith</div>
-            <i  id="entry-trailing-icon" class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="0" role="button" title="More options">more_vert</i>
+            <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="0" role="button">cancel</i>
           </div>
           <div class="demo-chip mdc-chip" tabindex="0">
             <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">face</i>
             <div class="mdc-chip__text">John Doe</div>
-            <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="0" role="button" title="More options">more_vert</i>
+            <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="0" role="button">cancel</i>
           </div>
         </div>
       </section>
@@ -105,7 +109,6 @@ <h4>No leading icon</h4>
               </svg>
             </div>
             <div class="mdc-chip__text">Tops</div>
-            <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing mdc-chip__icon--remove" tabindex="0" role="button">cancel</i>
           </div>
           <div class="demo-chip mdc-chip mdc-chip--selected" tabindex="0">
             <div class="mdc-chip__checkmark" >
@@ -114,7 +117,6 @@ <h4>No leading icon</h4>
               </svg>
             </div>
             <div class="mdc-chip__text">Bottoms</div>
-            <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing mdc-chip__icon--remove" tabindex="0" role="button">cancel</i>
           </div>
           <div class="demo-chip mdc-chip" tabindex="0">
             <div class="mdc-chip__checkmark" >
@@ -123,7 +125,6 @@ <h4>No leading icon</h4>
               </svg>
             </div>
             <div class="mdc-chip__text">Shoes</div>
-            <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing mdc-chip__icon--remove" tabindex="0" role="button">cancel</i>
           </div>
           <div class="demo-chip mdc-chip" tabindex="0">
             <div class="mdc-chip__checkmark" >
@@ -132,7 +133,6 @@ <h4>No leading icon</h4>
               </svg>
             </div>
             <div class="mdc-chip__text">Accessories</div>
-            <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing mdc-chip__icon--remove" tabindex="0" role="button">cancel</i>
           </div>
         </div>
         <br>
@@ -248,8 +248,8 @@ <h2>Custom theme</h2>
         function addChip(evt) {
           if ((evt.type === 'click' || evt.key === 'Enter' || evt.keyCode === 13) && 
               entryInput.value !== '') {
-            var leadingIcon = document.getElementById('entry-leading-icon').cloneNode(true);
-            var trailingIcon = document.getElementById('entry-trailing-icon').cloneNode(true);
+            var leadingIcon = document.querySelector('.entry-leading-icon').cloneNode(true);
+            var trailingIcon = document.querySelector('.entry-trailing-icon').cloneNode(true);
             entryChipSetComponent.addChip(entryInput.value, leadingIcon, trailingIcon);
             entryInput.value = '';
           }

diff --git a/demos/chips.scss b/demos/chips.scss
@@ -18,6 +18,10 @@
 @import "../packages/mdc-chips/mdc-chips";
 @import "../packages/mdc-button/mdc-button";
 
+#entry-chip-icon-clones {
+  display: none;
+}
+
 .custom-chip-primary {
   @include mdc-chip-fill-color-accessible($mdc-theme-primary);
 }

diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md
@@ -144,8 +144,7 @@ CSS Class | Description
 `mdc-chip__icon` | Optional. Indicates an icon in the chip.
 `mdc-chip__icon--leading` | Optional. Indicates a leading icon in the chip.
 `mdc-chip__icon--leading-hidden` | Optional. Hides the leading icon in a filter chip when the chip is selected.
-`mdc-chip__icon--trailing` | Optional. Indicates a trailing icon in the chip.
-`mdc-chip__icon--remove` | Optional. Indicates a trailing icon that removes the chip from the DOM. Only use with entry chips or filter chips.
+`mdc-chip__icon--trailing` | Optional. Indicates a trailing icon which removes the chip from the DOM. Only use with entry chips.
 `mdc-chip__checkmark` | Optional. Indicates the checkmark in a filter chip.
 `mdc-chip__checkmark-svg` | Mandatory with the use of `mdc-chip__checkmark`. Indicates the checkmark SVG element in a filter chip.
 `mdc-chip__checkmark-path` | Mandatory with the use of `mdc-chip__checkmark`. Indicates the checkmark SVG path in a filter chip.

diff --git a/packages/mdc-chips/chip/constants.js b/packages/mdc-chips/chip/constants.js
@@ -33,7 +33,7 @@ const cssClasses = {
   CHIP_EXIT: 'mdc-chip--exit',
   HIDDEN_LEADING_ICON: 'mdc-chip__icon--leading-hidden',
   LEADING_ICON: 'mdc-chip__icon--leading',
-  REMOVE_ICON: 'mdc-chip__icon--remove',
+  TRAILING_ICON: 'mdc-chip__icon--trailing',
   SELECTED: 'mdc-chip--selected',
   TEXT: 'mdc-chip__text',
 };

diff --git a/packages/mdc-chips/chip/foundation.js b/packages/mdc-chips/chip/foundation.js
@@ -175,10 +175,7 @@ class MDCChipFoundation extends MDCFoundation {
     evt.stopPropagation();
     if (evt.type === 'click' || evt.key === 'Enter' || evt.keyCode === 13) {
       this.adapter_.notifyTrailingIconInteraction();
-
-      if (this.adapter_.eventTargetHasClass(/** @type {!EventTarget} */ (evt.target), cssClasses.REMOVE_ICON)) {
-        this.adapter_.addClass(cssClasses.CHIP_EXIT);
-      }
+      this.adapter_.addClass(cssClasses.CHIP_EXIT);
     }
   }
 }

diff --git a/test/unit/mdc-chips/mdc-chip.foundation.test.js b/test/unit/mdc-chips/mdc-chip.foundation.test.js
@@ -233,5 +233,6 @@ test('on click in trailing icon, emit custom event', () => {
   handlers.click(mockEvt);
 
   td.verify(mockAdapter.notifyTrailingIconInteraction());
+  td.verify(mockAdapter.addClass(cssClasses.CHIP_EXIT));
   td.verify(mockEvt.stopPropagation());
 });