fix(chips): Rename all entry chips to input chips (#2619)

BREAKING CHANGE: Entry chips renamed to input chips.

demos/chips.html

@@ -54,16 +54,16 @@
       </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 id="input-chip-icon-clones">
+            <i class="input-leading-icon material-icons mdc-chip__icon mdc-chip__icon--leading">face</i>
+            <i class="input-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
+        <h2>Input Chips</h2>
+        <input id="input-chip-set-input" placeholder="Chip text">
+        <button id="input-chip-set-button" class="mdc-button mdc-button--dense">
+          Add Input Chip
         </button>
-        <div id="entry-chip-set" class="mdc-chip-set mdc-chip-set--entry">
+        <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>
             <div class="mdc-chip__text">Jane Smith</div>
@@ -235,27 +235,27 @@ <h2>Custom theme</h2>
     <script src="/assets/material-components-web.js" async></script>
     <script>
       demoReady(function() {
-        var entryChipSet = document.getElementById('entry-chip-set');
-        var chipSets = document.querySelectorAll('.mdc-chip-set:not(#entry-chip-set)');
-        var entryInput = document.getElementById('entry-chip-set-input');
-        var entryButton = document.getElementById('entry-chip-set-button');
+        var inputChipSet = document.getElementById('input-chip-set');
+        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');
 
         [].forEach.call(chipSets, function(chipSet) {
           mdc.chips.MDCChipSet.attachTo(chipSet);
         });
-        var entryChipSetComponent = mdc.chips.MDCChipSet.attachTo(entryChipSet);
+        var inputChipSetComponent = mdc.chips.MDCChipSet.attachTo(inputChipSet);
 
         function addChip(evt) {
           if ((evt.type === 'click' || evt.key === 'Enter' || evt.keyCode === 13) && 
-              entryInput.value !== '') {
-            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 = '';
+              input.value !== '') {
+            var leadingIcon = document.querySelector('.input-leading-icon').cloneNode(true);
+            var trailingIcon = document.querySelector('.input-trailing-icon').cloneNode(true);
+            inputChipSetComponent.addChip(input.value, leadingIcon, trailingIcon);
+            input.value = '';
           }
         };
-        entryButton.addEventListener('click', addChip);
-        entryInput.addEventListener('keydown', addChip);
+        inputButton.addEventListener('click', addChip);
+        input.addEventListener('keydown', addChip);
       });
     </script>
   </body>

demos/chips.scss

@@ -18,7 +18,7 @@
 @import "../packages/mdc-chips/mdc-chips";
 @import "../packages/mdc-button/mdc-button";
 
-#entry-chip-icon-clones {
+#input-chip-icon-clones {
   display: none;
 }
 

packages/mdc-chips/README.md

@@ -135,7 +135,7 @@ To pre-select filter chips that have a leading icon, also add the class `mdc-chi
 CSS Class | Description
 --- | ---
 `mdc-chip-set` | Mandatory. Indicates the set that the chip belongs to.
-`mdc-chip-set--entry` | Optional. Indicates that the chips in the set are entry chips, which enable user input by converting text into chips.
+`mdc-chip-set--input` | Optional. Indicates that the chips in the set are input chips, which enable user input by converting text into chips.
 `mdc-chip-set--choice` | Optional. Indicates that the chips in the set are choice chips, which allow a single selection from a set of options.
 `mdc-chip-set--filter` | Optional. Indicates that the chips in the set are filter chips, which allow multiple selection from a set of options.
 `mdc-chip` | Mandatory.
@@ -144,7 +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 which removes the chip from the DOM. Only use with entry chips.
+`mdc-chip__icon--trailing` | Optional. Indicates a trailing icon which removes the chip from the DOM. Only use with input 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.
@@ -178,7 +178,7 @@ Mixin | Description
 
 The MDC Chips module is comprised of two JavaScript classes:
 * `MDCChip` defines the behavior of a single chip
-* `MDCChipSet` defines the behavior of chips within a specific set. For example, chips in an entry chip set behave differently from those in a filter chip set.
+* `MDCChipSet` defines the behavior of chips within a specific set. For example, chips in an input chip set behave differently from those in a filter chip set.
 
 To use the `MDCChip` and `MDCChipSet` classes, [import](../../docs/importing-js.md) both classes from `@material/chips`.
 

packages/mdc-chips/chip-set/mdc-chip-set.scss

@@ -37,6 +37,6 @@
   box-sizing: border-box;
 }
 
-.mdc-chip-set--entry .mdc-chip {
+.mdc-chip-set--input .mdc-chip {
   animation: mdc-chip-entry 100ms $mdc-animation-deceleration-curve-timing-function;
 }