From afe5367e1b0c5b2f2a053d66dc2c36eaf13febd4 Mon Sep 17 00:00:00 2001 From: Bonnie Zhou Date: Fri, 6 Apr 2018 14:20:21 -0700 Subject: [PATCH] feat(chips): Add entry chips (#2414) BREAKING CHANGE: Added a new chip variant (entry chips). Added new methods to MDCChipSet, MDCChipSetFoundation, and MDCChipSetAdapter. --- demos/chips.html | 30 ++++++++++++++++--- demos/chips.scss | 1 + packages/mdc-chips/README.md | 11 +++++-- packages/mdc-chips/chip-set/adapter.js | 15 ++++++++++ packages/mdc-chips/chip-set/foundation.js | 14 +++++++++ packages/mdc-chips/chip-set/index.js | 35 +++++++++++++++++++++-- packages/mdc-chips/chip/constants.js | 2 ++ test/unit/mdc-chips/mdc-chip-set.test.js | 15 ++++++++++ 8 files changed, 115 insertions(+), 8 deletions(-) diff --git a/demos/chips.html b/demos/chips.html index 154b9dea3b7..55b577c99fa 100644 --- a/demos/chips.html +++ b/demos/chips.html @@ -55,11 +55,15 @@

Entry Chips

-
+ + +
- face + face
Jane Smith
- more_vert + more_vert
face @@ -231,10 +235,28 @@

Custom theme

diff --git a/demos/chips.scss b/demos/chips.scss index d9f059c153c..757cdd0f455 100644 --- a/demos/chips.scss +++ b/demos/chips.scss @@ -16,6 +16,7 @@ @import "./common"; @import "../packages/mdc-chips/mdc-chips"; +@import "../packages/mdc-button/mdc-button"; .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 index d63335d644c..3f1ca1df544 100644 --- a/packages/mdc-chips/README.md +++ b/packages/mdc-chips/README.md @@ -190,6 +190,10 @@ Property | Value Type | Description #### `MDCChipSet` +Method Signature | Description +--- | --- +`addChip(text: string, leadingIcon: Element, trailingIcon: Element) => void` | Creates a new chip in the chip set with the given text, leading icon, and trailing icon + Property | Value Type | Description --- | --- | --- `chips` | Array<`MDCChip`> | An array of the `MDCChip` objects that represent chips in the set @@ -220,8 +224,10 @@ 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 +`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event handler on the root element for a given event +`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event handler on the root element for a given event +`createChipElement(text: string, leadingIcon: Element, trailingIcon: Element) => Element` | Returns a chip element with the given text, leading icon, and trailing icon +`appendChild(el: Element) => void` | Appends the given element as a child of the root element ### Foundations: `MDCChipFoundation` and `MDCChipSetFoundation` @@ -236,5 +242,6 @@ Method Signature | Description Method Signature | Description --- | --- +`addChip(text: string, leadingIcon: Element, trailingIcon: Element) => Element` | Returns a new chip element with the given text, leading icon, and trailing icon, added to the root chip set element `select(chipFoundation: MDCChipFoundation) => void` | Selects the given chip `deselect(chipFoundation: MDCChipFoundation) => void` | Deselects the given chip diff --git a/packages/mdc-chips/chip-set/adapter.js b/packages/mdc-chips/chip-set/adapter.js index d731384a3cc..1ab3f09d452 100644 --- a/packages/mdc-chips/chip-set/adapter.js +++ b/packages/mdc-chips/chip-set/adapter.js @@ -48,6 +48,21 @@ class MDCChipSetAdapter { * @param {function(!Event): undefined} handler */ deregisterInteractionHandler(evtType, handler) {} + + /** + * Returns a chip element with the given text, leading icon, and trailing icon. + * @param {string} text + * @param {?Element} leadingIcon + * @param {?Element} trailingIcon + * @return {!Element} + */ + createChipElement(text, leadingIcon, trailingIcon) {} + + /** + * Appends the given element as a child of the root element. + * @param {?Element} el + */ + appendChild(el) {} } export default MDCChipSetAdapter; diff --git a/packages/mdc-chips/chip-set/foundation.js b/packages/mdc-chips/chip-set/foundation.js index 4e5e9b0983b..8c792b6ee7b 100644 --- a/packages/mdc-chips/chip-set/foundation.js +++ b/packages/mdc-chips/chip-set/foundation.js @@ -74,6 +74,20 @@ class MDCChipSetFoundation extends MDCFoundation { MDCChipFoundation.strings.INTERACTION_EVENT, this.chipInteractionHandler_); } + /** + * Returns a new chip element with the given text, leading icon, and trailing icon, + * added to the root chip set element. + * @param {string} text + * @param {?Element} leadingIcon + * @param {?Element} trailingIcon + * @return {!Element} + */ + addChip(text, leadingIcon, trailingIcon) { + const chipEl = this.adapter_.createChipElement(text, leadingIcon, trailingIcon); + this.adapter_.appendChild(chipEl); + return chipEl; + } + /** * Selects the given chip. Deselects all other chips if the chip set is of the choice variant. * @param {!MDCChipFoundation} chipFoundation diff --git a/packages/mdc-chips/chip-set/index.js b/packages/mdc-chips/chip-set/index.js index 98e9d0f7b3e..192036b7fbd 100644 --- a/packages/mdc-chips/chip-set/index.js +++ b/packages/mdc-chips/chip-set/index.js @@ -19,7 +19,7 @@ import MDCComponent from '@material/base/component'; import MDCChipSetAdapter from './adapter'; import MDCChipSetFoundation from './foundation'; -import {MDCChip} from '../chip/index'; +import {MDCChip, MDCChipFoundation} from '../chip/index'; /** * @extends {MDCComponent} @@ -34,6 +34,8 @@ class MDCChipSet extends MDCComponent { /** @type {!Array} */ this.chips; + /** @type {(function(!Element): !MDCChip)} */ + this.chipFactory_; } /** @@ -49,7 +51,8 @@ class MDCChipSet extends MDCComponent { * creates a new MDCChip. */ initialize(chipFactory = (el) => new MDCChip(el)) { - this.chips = this.instantiateChips_(chipFactory); + this.chipFactory_ = chipFactory; + this.chips = this.instantiateChips_(this.chipFactory_); } destroy() { @@ -66,6 +69,17 @@ class MDCChipSet extends MDCComponent { }); } + /** + * Creates a new chip in the chip set with the given text, leading icon, and trailing icon. + * @param {string} text + * @param {?Element} leadingIcon + * @param {?Element} trailingIcon + */ + addChip(text, leadingIcon, trailingIcon) { + const chipEl = this.foundation_.addChip(text, leadingIcon, trailingIcon); + this.chips.push(this.chipFactory_(chipEl)); + } + /** * @return {!MDCChipSetFoundation} */ @@ -74,6 +88,23 @@ class MDCChipSet extends MDCComponent { hasClass: (className) => this.root_.classList.contains(className), registerInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler), deregisterInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler), + createChipElement: (text, leadingIcon, trailingIcon) => { + const chipTextEl = document.createElement('div'); + chipTextEl.classList.add(MDCChipFoundation.cssClasses.TEXT); + chipTextEl.appendChild(document.createTextNode(text)); + + const chipEl = document.createElement('div'); + chipEl.classList.add(MDCChipFoundation.cssClasses.CHIP); + if (leadingIcon) { + chipEl.appendChild(leadingIcon); + } + chipEl.appendChild(chipTextEl); + if (trailingIcon) { + chipEl.appendChild(trailingIcon); + } + return chipEl; + }, + appendChild: (el) => this.root_.appendChild(el), }))); } diff --git a/packages/mdc-chips/chip/constants.js b/packages/mdc-chips/chip/constants.js index 2751ebad979..059abaa5850 100644 --- a/packages/mdc-chips/chip/constants.js +++ b/packages/mdc-chips/chip/constants.js @@ -27,9 +27,11 @@ const strings = { /** @enum {string} */ const cssClasses = { CHECKMARK: 'mdc-chip__checkmark', + CHIP: 'mdc-chip', HIDDEN_LEADING_ICON: 'mdc-chip__icon--leading-hidden', LEADING_ICON: 'mdc-chip__icon--leading', SELECTED: 'mdc-chip--selected', + TEXT: 'mdc-chip__text', }; export {strings, cssClasses}; diff --git a/test/unit/mdc-chips/mdc-chip-set.test.js b/test/unit/mdc-chips/mdc-chip-set.test.js index f125cdbd209..9c5c14bc082 100644 --- a/test/unit/mdc-chips/mdc-chip-set.test.js +++ b/test/unit/mdc-chips/mdc-chip-set.test.js @@ -114,3 +114,18 @@ test('#adapter.deregisterInteractionHandler removes a handler from the root elem domEvents.emit(root, 'click'); td.verify(handler(td.matchers.anything()), {times: 0}); }); + +test('#adapter.createChipElement returns a new chip element', () => { + const {component} = setupTest(); + const chipEl = component.getDefaultFoundation().adapter_.createChipElement('hello world'); + assert.isTrue(chipEl.classList.contains('mdc-chip')); + assert.isTrue(chipEl.childNodes[0].classList.contains('mdc-chip__text')); + assert.equal(chipEl.childNodes[0].textContent, 'hello world'); +}); + +test('#adapter.appendChild adds a child to the chip set element', () => { + const {root, component} = setupTest(); + const chipEl = bel`
hello world
`; + component.getDefaultFoundation().adapter_.appendChild(chipEl); + assert.equal(root.childNodes[3], chipEl); +});