fix(chips): Manage chip selection for classes added manually (#2391)

BREAKING CHANGE: isSelected method added to MDCChip, and related methods added to MDCChipFoundation and MDCChipSetFoundation.
material-components · Apr 6, 2018 · 66f2464 · 66f2464
1 parent 2e7f904
commit 66f2464
Show file tree

Hide file tree

Showing 14 changed files with 196 additions and 70 deletions.
diff --git a/demos/chips.html b/demos/chips.html
@@ -78,7 +78,7 @@ <h2>Choice Chips</h2>
           <div class="demo-chip mdc-chip" tabindex="0">
             <div class="mdc-chip__text">Small</div>
           </div>
-          <div class="demo-chip mdc-chip" tabindex="0">
+          <div class="demo-chip mdc-chip mdc-chip--selected" tabindex="0">
             <div class="mdc-chip__text">Medium</div>
           </div>
           <div class="demo-chip mdc-chip" tabindex="0">
@@ -94,7 +94,7 @@ <h2>Choice Chips</h2>
         <h2>Filter Chips</h2>
         <h4>No leading icon</h4>
         <div class="mdc-chip-set mdc-chip-set--filter">
-          <div class="demo-chip mdc-chip" tabindex="0">
+          <div class="demo-chip mdc-chip mdc-chip--selected" tabindex="0">
             <div class="mdc-chip__checkmark" >
               <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
                 <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -103,7 +103,7 @@ <h4>No leading icon</h4>
             <div class="mdc-chip__text">Tops</div>
             <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">
+          <div class="demo-chip mdc-chip mdc-chip--selected" tabindex="0">
             <div class="mdc-chip__checkmark" >
               <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
                 <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -134,8 +134,8 @@ <h4>No leading icon</h4>
         <br>
         <h4>With leading icon</h4>
         <div class="mdc-chip-set mdc-chip-set--filter">
-          <div class="demo-chip mdc-chip" tabindex="0">
-            <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">face</i>
+          <div class="demo-chip mdc-chip mdc-chip--selected" tabindex="0">
+            <i class="material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading-hidden">face</i>
             <div class="mdc-chip__checkmark" >
               <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
                 <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>

diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md
@@ -90,7 +90,7 @@ Filter chips are a variant of chips which allow multiple selection from a set of
 </div>
 ```
 
-> _NOTE_: To use a leading icon in a filter chip, put the `mdc-chip__icon--leading` element _before_ the `mdc-chip__checkmark` element:
+To use a leading icon in a filter chip, put the `mdc-chip__icon--leading` element _before_ the `mdc-chip__checkmark` element:
 
 ```html
 <div class="mdc-chip">
@@ -105,6 +105,31 @@ Filter chips are a variant of chips which allow multiple selection from a set of
 </div>
 ```
 
+#### Pre-selected
+
+To display a pre-selected chip, add the class `mdc-chip--selected` to the root chip element.
+
+```html
+<div class="mdc-chip mdc-chip--selected">
+  <div class="mdc-chip__text">Add to calendar</div>
+</div>
+```
+
+To pre-select filter chips that have a leading icon, also add the class `mdc-chip__icon--leading-hidden` to the `mdc-chip__icon--leading` element. This will ensure that the checkmark displaces the leading icon.
+
+```html
+<div class="mdc-chip mdc-chip--selected">
+  <i class="material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading-hidden">face</i>
+  <div class="mdc-chip__checkmark">
+    <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
+      <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
+            d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+    </svg>
+  </div>
+  <div class="mdc-chip__text">Filterable content</div>
+</div>
+```
+
 ### CSS Classes
 
 CSS Class | Description
@@ -113,9 +138,11 @@ CSS Class | Description
 `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.
+`mdc-chip--selected` | Optional. Indicates that the chip is selected.
 `mdc-chip__text` | Mandatory. Indicates the text content of the chip.
 `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__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.
@@ -155,7 +182,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
+`isSelected() => boolean` | Proxies to the foundation's `isSelected` method
 
 Property | Value Type | Description
 --- | --- | ---
@@ -202,7 +229,12 @@ Method Signature | Description
 
 Method Signature | Description
 --- | ---
-`toggleSelected() => void` | Toggles the selected class on the chip element
+`isSelected() => boolean` | Returns true if the chip is selected
+`setSelected(selected: boolean) => void` | Sets the chip's selected state
 
 #### `MDCChipSetFoundation`
-None yet, coming soon.
+
+Method Signature | Description
+--- | ---
+`select(chipFoundation: MDCChipFoundation) => void` | Selects the given chip
+`deselect(chipFoundation: MDCChipFoundation) => void` | Deselects the given chip
diff --git a/packages/mdc-chips/_mixins.scss b/packages/mdc-chips/_mixins.scss
@@ -86,10 +86,7 @@
   $horizontal-padding-value: max($mdc-chip-horizontal-padding - $width, 0);
   $vertical-padding-value: max($mdc-chip-vertical-padding - $width, 0);
 
-  padding-top: $vertical-padding-value;
-  padding-right: $horizontal-padding-value;
-  padding-bottom: $vertical-padding-value;
-  padding-left: $horizontal-padding-value;
+  padding: $vertical-padding-value $horizontal-padding-value;
   border-width: $width;
 }
 

diff --git a/packages/mdc-chips/chip-set/foundation.js b/packages/mdc-chips/chip-set/foundation.js
@@ -74,31 +74,51 @@ class MDCChipSetFoundation extends MDCFoundation {
       MDCChipFoundation.strings.INTERACTION_EVENT, this.chipInteractionHandler_);
   }
 
+  /**
+   * Selects the given chip. Deselects all other chips if the chip set is of the choice variant.
+   * @param {!MDCChipFoundation} chipFoundation
+   */
+  select(chipFoundation) {
+    if (this.adapter_.hasClass(cssClasses.CHOICE)) {
+      this.deselectAll_();
+    }
+    chipFoundation.setSelected(true);
+    this.selectedChips_.push(chipFoundation);
+  }
+
+  /**
+   * Deselects the given chip.
+   * @param {!MDCChipFoundation} chipFoundation
+   */
+  deselect(chipFoundation) {
+    const index = this.selectedChips_.indexOf(chipFoundation);
+    if (index >= 0) {
+      this.selectedChips_.splice(index, 1);
+    }
+    chipFoundation.setSelected(false);
+  }
+
+  /** Deselects all selected chips. */
+  deselectAll_() {
+    this.selectedChips_.forEach((chipFoundation) => {
+      chipFoundation.setSelected(false);
+    });
+    this.selectedChips_.length = 0;
+  }
+
   /**
    * Handles a chip interaction event
-   * @param {!Object} evt
+   * @param {!Event} evt
    * @private
    */
   handleChipInteraction_(evt) {
     const chipFoundation = evt.detail.chip.foundation;
-    if (this.adapter_.hasClass(cssClasses.CHOICE)) {
-      if (this.selectedChips_.length === 0) {
-        this.selectedChips_[0] = chipFoundation;
-      } else if (this.selectedChips_[0] !== chipFoundation) {
-        this.selectedChips_[0].toggleSelected();
-        this.selectedChips_[0] = chipFoundation;
-      } else {
-        this.selectedChips_ = [];
-      }
-      chipFoundation.toggleSelected();
-    } else if (this.adapter_.hasClass(cssClasses.FILTER)) {
-      const index = this.selectedChips_.indexOf(chipFoundation);
-      if (index >= 0) {
-        this.selectedChips_.splice(index, 1);
+    if (this.adapter_.hasClass(cssClasses.CHOICE) || this.adapter_.hasClass(cssClasses.FILTER)) {
+      if (chipFoundation.isSelected()) {
+        this.deselect(chipFoundation);
       } else {
-        this.selectedChips_.push(chipFoundation);
+        this.select(chipFoundation);
       }
-      chipFoundation.toggleSelected();
     }
   }
 }

diff --git a/packages/mdc-chips/chip-set/index.js b/packages/mdc-chips/chip-set/index.js
@@ -58,6 +58,14 @@ class MDCChipSet extends MDCComponent {
     });
   }
 
+  initialSyncWithDOM() {
+    this.chips.forEach((chip) => {
+      if (chip.isSelected()) {
+        this.foundation_.select(chip.foundation);
+      }
+    });
+  }
+
   /**
    * @return {!MDCChipSetFoundation}
    */

diff --git a/packages/mdc-chips/chip/constants.js b/packages/mdc-chips/chip/constants.js
@@ -27,7 +27,7 @@ const strings = {
 /** @enum {string} */
 const cssClasses = {
   CHECKMARK: 'mdc-chip__checkmark',
-  HIDDEN_LEADING_ICON: 'mdc-chip__icon--hidden-leading',
+  HIDDEN_LEADING_ICON: 'mdc-chip__icon--leading-hidden',
   LEADING_ICON: 'mdc-chip__icon--leading',
   SELECTED: 'mdc-chip--selected',
 };

diff --git a/packages/mdc-chips/chip/foundation.js b/packages/mdc-chips/chip/foundation.js
@@ -92,13 +92,20 @@ class MDCChipFoundation extends MDCFoundation {
   }
 
   /**
-   * Toggles the selected class on the chip element.
+   * @return {boolean}
    */
-  toggleSelected() {
-    if (this.adapter_.hasClass(cssClasses.SELECTED)) {
-      this.adapter_.removeClass(cssClasses.SELECTED);
-    } else {
+  isSelected() {
+    return this.adapter_.hasClass(cssClasses.SELECTED);
+  }
+
+  /**
+   * @param {boolean} selected
+   */
+  setSelected(selected) {
+    if (selected) {
       this.adapter_.addClass(cssClasses.SELECTED);
+    } else {
+      this.adapter_.removeClass(cssClasses.SELECTED);
     }
   }
 

diff --git a/packages/mdc-chips/chip/index.js b/packages/mdc-chips/chip/index.js
@@ -75,10 +75,11 @@ class MDCChip extends MDCComponent {
   }
 
   /**
-   * Toggles selected state of the chip.
+   * Returns true if the chip is selected.
+   * @return {boolean}
    */
-  toggleSelected() {
-    this.foundation_.toggleSelected();
+  isSelected() {
+    return this.foundation_.isSelected();
   }
 
   /**

diff --git a/packages/mdc-chips/chip/mdc-chip.scss b/packages/mdc-chips/chip/mdc-chip.scss
@@ -141,7 +141,7 @@
   }
 }
 
-.mdc-chip__icon--hidden-leading.mdc-chip__icon--leading {
+.mdc-chip__icon--leading-hidden.mdc-chip__icon--leading {
   width: 0;
 
   // This ensures that the leading icon doesn't fade in while the checkmark is fading out.

diff --git a/packages/mdc-toolbar/mdc-toolbar.scss b/packages/mdc-toolbar/mdc-toolbar.scss
@@ -67,7 +67,7 @@
 
     @media (max-width: $mdc-toolbar-mobile-landscape-width-breakpoint)
       and (orientation: landscape) {
-      padding: 0 0;
+      padding: 0;
     }
 
     @media (max-width: $mdc-toolbar-mobile-breakpoint) {