feat(chips): Add mdc-chip-set--choice variant (#2215)

Add choice chips, which allow single selection from a set of chip options.

Author: bonniezhou

demos/chips.html

@@ -71,7 +71,7 @@ <h2>Entry Chips</h2>
 
       <section class="example">
         <h2>Choice Chips</h2>
-        <div class="mdc-chip-set">
+        <div class="mdc-chip-set mdc-chip-set--choice">
           <div class="demo-chip mdc-chip" tabindex="0">
             <div class="mdc-chip__text">Extra Small</div>
           </div>

packages/mdc-chips/README.md

@@ -79,6 +79,7 @@ You can optionally add a leading icon (i.e. thumbnail) and/or a trailing icon to
 CSS Class | Description
 --- | ---
 `mdc-chip-set` | Mandatory. Indicates the set that the chip belongs to
+`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` | Mandatory.
 `mdc-chip__text` | Mandatory. Indicates the text content of the chip
 `mdc-chip__icon` | Optional. Indicates an icon in the chip
@@ -97,11 +98,14 @@ Mixin | Description
 `mdc-chip-fill-color-accessible($color)` | Customizes the background fill color for a chip, and updates the chip's ink and ripple color to meet accessibility standards
 `mdc-chip-fill-color($color)` | Customizes the background fill color for a chip
 `mdc-chip-ink-color($color)` | Customizes the text ink color for a chip, and updates the chip's ripple color to match
+`mdc-chip-activated-ink-color($color)` | Customizes text ink color and updates the ripple opacity of a chip in the _activated_ state
 `mdc-chip-stroke($width, $style, $color)` | Customizes the border stroke properties for a chip
 `mdc-chip-stroke-width($width)` | Customizes the border stroke width for a chip
 `mdc-chip-stroke-style($style)` | Customizes the border stroke style for a chip
 `mdc-chip-stroke-color($color)` | Customizes the border stroke color for a chip
 
+> _NOTE_: `mdc-chip-ink-color` also updates the chip's text ink color for _hover_ and _activated_ states, and updates the ripple opacity of the chip in the _activated_ state.
+
 ### `MDCChip` and `MDCChipSet`
 
 The MDC Chips module is comprised of two JavaScript classes: 
@@ -112,6 +116,10 @@ To use the `MDCChip` and `MDCChipSet` classes, [import](../../docs/importing-js.
 
 #### `MDCChip`
 
+Method Signature | Description
+--- | ---
+`toggleActive() => void` | Proxies to the foundation's `toggleActive` method
+
 Property | Value Type | Description
 --- | --- | ---
 `ripple` | `MDCRipple` | The `MDCRipple` instance for the root element that `MDCChip` initializes
@@ -128,6 +136,9 @@ Property | Value Type | Description
 
 Method Signature | Description
 --- | ---
+`addClass(className: string) => void` | Adds a class to the root element
+`removeClass(className: string) => void` | Removes a class from the root element
+`hasClass(className: string) => boolean` | Returns true if the root element contains the given class
 `registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element
 `deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root 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
@@ -137,11 +148,16 @@ Method Signature | Description
 Method Signature | Description
 --- | ---
 `hasClass(className: string) => boolean` | Returns whether the chip set element has the given class
+`registerInteractionHandler(evtType, handler) => void` | Registers an event handler on the root element for a given event
+`deregisterInteractionHandler(evtType, handler) => void` | Deregisters an event handler on the root element for a given event
 
 ### Foundations: `MDCChipFoundation` and `MDCChipSetFoundation`
 
 #### `MDCChipFoundation`
-None yet, coming soon.
+
+Method Signature | Description
+--- | ---
+`toggleActive() => void` | Toggles the activated class on the chip element
 
 #### `MDCChipSetFoundation`
 None yet, coming soon.

packages/mdc-chips/_mixins.scss

@@ -29,8 +29,10 @@
 
   @if ($fill-tone == "dark") {
     @include mdc-chip-ink-color(text-primary-on-dark);
+    @include mdc-chip-activated-ink-color(white);
   } @else {
     @include mdc-chip-ink-color(text-primary-on-light);
+    @include mdc-chip-activated-ink-color(black);
   }
 }
 
@@ -40,7 +42,24 @@
 
 @mixin mdc-chip-ink-color($color) {
   @include mdc-states($color);
+  @include mdc-chip-activated-ink-color($color);
   @include mdc-theme-prop(color, $color);
+
+  &:hover {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-chip-activated-ink-color($activated-ink-color) {
+  &.mdc-chip {
+    // This changes the opacity of the ripple based on whether $activated-ink-color is light or dark.
+    // It does not change the color of the ripple.
+    @include mdc-states-activated($activated-ink-color);
+  }
+
+  &.mdc-chip--activated {
+    @include mdc-theme-prop(color, $activated-ink-color);
+  }
 }
 
 @mixin mdc-chip-stroke($width: 1, $style: solid, $color: black) {

packages/mdc-chips/_variables.scss

@@ -16,6 +16,7 @@
 
 $mdc-chip-border-radius-default: 16px;
 $mdc-chip-fill-color-default: rgba(black, .08);
+$mdc-chip-ink-color-default: rgba(black, .6);
 $mdc-chip-horizontal-padding: 12px;
 $mdc-chip-vertical-padding: 7px;
 

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

@@ -31,8 +31,23 @@ class MDCChipSetAdapter {
   /**
    * Returns true if the root element contains the given class name.
    * @param {string} className
+   * @return {boolean}
    */
   hasClass(className) {}
+
+  /**
+   * Registers an event handler on the root element for a given event.
+   * @param {string} evtType
+   * @param {function(!Event): undefined} handler
+   */
+  registerInteractionHandler(evtType, handler) {}
+
+  /**
+   * Deregisters an event handler on the root element for a given event.
+   * @param {string} evtType
+   * @param {function(!Event): undefined} handler
+   */
+  deregisterInteractionHandler(evtType, handler) {}
 }
 
 export default MDCChipSetAdapter;

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

@@ -20,4 +20,9 @@ const strings = {
   CHIP_SELECTOR: '.mdc-chip',
 };
 
-export {strings};
+/** @enum {string} */
+const cssClasses = {
+  CHOICE: 'mdc-chip-set--choice',
+};
+
+export {strings, cssClasses};

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

@@ -17,7 +17,9 @@
 
 import MDCFoundation from '@material/base/foundation';
 import MDCChipSetAdapter from './adapter';
-import {strings} from './constants';
+// eslint-disable-next-line no-unused-vars
+import {MDCChip, MDCChipFoundation} from '../chip/index';
+import {strings, cssClasses} from './constants';
 
 /**
  * @extends {MDCFoundation<!MDCChipSetAdapter>}
@@ -29,6 +31,11 @@ class MDCChipSetFoundation extends MDCFoundation {
     return strings;
   }
 
+  /** @return enum {string} */
+  static get cssClasses() {
+    return cssClasses;
+  }
+
   /**
    * {@see MDCChipSetAdapter} for typing information on parameters and return
    * types.
@@ -37,6 +44,8 @@ class MDCChipSetFoundation extends MDCFoundation {
   static get defaultAdapter() {
     return /** @type {!MDCChipSetAdapter} */ ({
       hasClass: () => {},
+      registerInteractionHandler: () => {},
+      deregisterInteractionHandler: () => {},
     });
   }
 
@@ -45,6 +54,46 @@ class MDCChipSetFoundation extends MDCFoundation {
    */
   constructor(adapter) {
     super(Object.assign(MDCChipSetFoundation.defaultAdapter, adapter));
+
+    /**
+     * The active chips in the set. Only used for choice chip set or filter chip set.
+     * @private {!Array<!MDCChip>}
+     */
+    this.activeChips_ = [];
+
+    /** @private {function(!Event): undefined} */
+    this.chipInteractionHandler_ = (evt) => this.handleChipInteraction_(evt);
+  }
+
+  init() {
+    this.adapter_.registerInteractionHandler(
+      MDCChipFoundation.strings.INTERACTION_EVENT, this.chipInteractionHandler_);
+  }
+
+  destroy() {
+    this.adapter_.deregisterInteractionHandler(
+      MDCChipFoundation.strings.INTERACTION_EVENT, this.chipInteractionHandler_);
+  }
+
+  /**
+   * Handles a chip interaction event
+   * @param {!Object} evt
+   * @private
+   */
+  handleChipInteraction_(evt) {
+    if (!this.adapter_.hasClass(cssClasses.CHOICE)) {
+      return;
+    }
+    const {chip} = evt.detail;
+    if (this.activeChips_.length === 0) {
+      this.activeChips_[0] = chip;
+    } else if (this.activeChips_[0] !== chip) {
+      this.activeChips_[0].toggleActive();
+      this.activeChips_[0] = chip;
+    } else {
+      this.activeChips_ = [];
+    }
+    chip.toggleActive();
   }
 }
 

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

@@ -32,7 +32,7 @@ class MDCChipSet extends MDCComponent {
   constructor(...args) {
     super(...args);
 
-    /** @private {!Array<!MDCChip>} */
+    /** @type {!Array<!MDCChip>} */
     this.chips;
   }
 
@@ -64,6 +64,8 @@ class MDCChipSet extends MDCComponent {
   getDefaultFoundation() {
     return new MDCChipSetFoundation(/** @type {!MDCChipSetAdapter} */ (Object.assign({
       hasClass: (className) => this.root_.classList.contains(className),
+      registerInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
+      deregisterInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
     })));
   }
 

packages/mdc-chips/chip/adapter.js

@@ -28,6 +28,25 @@
  * @record
  */
 class MDCChipAdapter {
+  /**
+   * Adds a class to the root element.
+   * @param {string} className
+   */
+  addClass(className) {}
+
+  /**
+   * Removes a class from the root element.
+   * @param {string} className
+   */
+  removeClass(className) {}
+
+  /**
+   * Returns true if the root element contains the given class.
+   * @param {string} className
+   * @return {boolean}
+   */
+  hasClass(className) {}
+
   /**
    * Registers an event listener on the root element for a given event.
    * @param {string} evtType

packages/mdc-chips/chip/constants.js

@@ -20,4 +20,9 @@ const strings = {
   INTERACTION_EVENT: 'MDCChip:interaction',
 };
 
-export {strings};
+/** @enum {string} */
+const cssClasses = {
+  ACTIVATED: 'mdc-chip--activated',
+};
+
+export {strings, cssClasses};