From 020b0b4576bc7e21d901044cfb7905781db84c0f Mon Sep 17 00:00:00 2001 From: Rachel Friedman Date: Thu, 10 Jan 2019 17:26:16 -0800 Subject: [PATCH 1/4] feat(chips): Move logic for calculating chip bounding rect into a foundation method. --- package-lock.json | 14 +++++-- packages/mdc-chips/chip/adapter.js | 18 +++++++++ packages/mdc-chips/chip/foundation.js | 21 +++++++++++ packages/mdc-chips/chip/index.js | 27 +++++--------- .../mdc-chips/mdc-chip.foundation.test.js | 36 +++++++++++++++++- test/unit/mdc-chips/mdc-chip.test.js | 37 +++++++++++++++++++ 6 files changed, 131 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7b06bca29d1..faf60cdb083 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7486,7 +7486,8 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", @@ -7496,7 +7497,8 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -7613,7 +7615,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -7625,6 +7628,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7750,7 +7754,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -7883,6 +7888,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/packages/mdc-chips/chip/adapter.js b/packages/mdc-chips/chip/adapter.js index 603a35fcd0b..1daa49d5930 100644 --- a/packages/mdc-chips/chip/adapter.js +++ b/packages/mdc-chips/chip/adapter.js @@ -109,6 +109,24 @@ class MDCChipAdapter { * @param {string} value */ setStyleProperty(propertyName, value) {} + + /** + * Returns whether the chip has a leading icon. + * @return {boolean} + */ + hasLeadingIcon() {} + + /** + * Returns the bounding client rect of the root element. + * @return {!ClientRect} + */ + getBoundingClientRect() {} + + /** + * Returns the bounding client rect of the checkmark element or null if it doesn't exist. + * @return {?ClientRect} + */ + getCheckmarkBoundingClientRect() {} } export default MDCChipAdapter; diff --git a/packages/mdc-chips/chip/foundation.js b/packages/mdc-chips/chip/foundation.js index 1090305aa96..c7d14aacd11 100644 --- a/packages/mdc-chips/chip/foundation.js +++ b/packages/mdc-chips/chip/foundation.js @@ -60,6 +60,9 @@ class MDCChipFoundation extends MDCFoundation { notifyRemoval: () => {}, getComputedStyleValue: () => {}, setStyleProperty: () => {}, + hasLeadingIcon: () => {}, + getBoundingClientRect: () => {}, + getCheckmarkBoundingClientRect: () => {}, }); } @@ -109,6 +112,24 @@ class MDCChipFoundation extends MDCFoundation { this.shouldRemoveOnTrailingIconClick_ = shouldRemove; } + /** + * Computes and returns the bounding rect for the chip. + * @return {!ClientRect} + */ + computeBoundingRect() { + // When a chip has a checkmark and not a leading icon, the bounding rect changes in size depending on the current + // size of the checkmark. + if (!this.adapter_.hasLeadingIcon() && this.adapter_.getCheckmarkBoundingClientRect()) { + const height = this.adapter_.getBoundingClientRect().height; + // The checkmark's width is initially set to 0, so use the checkmark's height as a proxy since the checkmark + // should always be square. + const width = this.adapter_.getBoundingClientRect().width + this.adapter_.getCheckmarkBoundingClientRect().height; + return /** @type {!ClientRect} */ ({height, width}); + } else { + return this.adapter_.getBoundingClientRect(); + } + } + /** * Begins the exit animation which leads to removal of the chip. */ diff --git a/packages/mdc-chips/chip/index.js b/packages/mdc-chips/chip/index.js index ea3dba757de..36a2a321657 100644 --- a/packages/mdc-chips/chip/index.js +++ b/packages/mdc-chips/chip/index.js @@ -47,6 +47,8 @@ class MDCChip extends MDCComponent { this.leadingIcon_; /** @private {?Element} */ this.trailingIcon_; + /** @private {?Element} */ + this.checkmark_; /** @private {!MDCRipple} */ this.ripple_; @@ -71,24 +73,12 @@ class MDCChip extends MDCComponent { this.id = this.root_.id; this.leadingIcon_ = this.root_.querySelector(strings.LEADING_ICON_SELECTOR); this.trailingIcon_ = this.root_.querySelector(strings.TRAILING_ICON_SELECTOR); + this.checkmark_ = this.root_.querySelector(strings.CHECKMARK_SELECTOR); - // Adjust ripple size for chips with animated growing width. This applies when filter chips without - // a leading icon are selected, and a leading checkmark will cause the chip width to expand. - const checkmarkEl = this.root_.querySelector(strings.CHECKMARK_SELECTOR); - if (checkmarkEl && !this.leadingIcon_) { - const adapter = Object.assign(MDCRipple.createAdapter(this), { - computeBoundingRect: () => { - const height = this.root_.getBoundingClientRect().height; - // The checkmark's width is initially set to 0, so use the checkmark's height as a proxy since the - // checkmark should always be square. - const width = this.root_.getBoundingClientRect().width + checkmarkEl.getBoundingClientRect().height; - return {height, width}; - }, - }); - this.ripple_ = rippleFactory(this.root_, new MDCRippleFoundation(adapter)); - } else { - this.ripple_ = rippleFactory(this.root_); - } + const adapter = Object.assign(MDCRipple.createAdapter(this), { + computeBoundingRect: () => this.foundation_.computeBoundingRect(), + }); + this.ripple_ = rippleFactory(this.root_, new MDCRippleFoundation(adapter)); } initialSyncWithDOM() { @@ -192,6 +182,9 @@ class MDCChip extends MDCComponent { this.emit(strings.REMOVAL_EVENT, {chipId: this.id, root: this.root_}, true /* shouldBubble */), getComputedStyleValue: (propertyName) => window.getComputedStyle(this.root_).getPropertyValue(propertyName), setStyleProperty: (propertyName, value) => this.root_.style.setProperty(propertyName, value), + hasLeadingIcon: () => !!this.leadingIcon_, + getBoundingClientRect: () => this.root_.getBoundingClientRect(), + getCheckmarkBoundingClientRect: () => this.checkmark_ ? this.checkmark_.getBoundingClientRect() : null, }))); } diff --git a/test/unit/mdc-chips/mdc-chip.foundation.test.js b/test/unit/mdc-chips/mdc-chip.foundation.test.js index 1f18ef616a5..5a605b28989 100644 --- a/test/unit/mdc-chips/mdc-chip.foundation.test.js +++ b/test/unit/mdc-chips/mdc-chip.foundation.test.js @@ -46,7 +46,8 @@ test('defaultAdapter returns a complete adapter implementation', () => { 'addClass', 'removeClass', 'hasClass', 'addClassToLeadingIcon', 'removeClassFromLeadingIcon', 'eventTargetHasClass', 'notifyInteraction', 'notifyTrailingIconInteraction', 'notifyRemoval', 'notifySelection', - 'getComputedStyleValue', 'setStyleProperty', + 'getComputedStyleValue', 'setStyleProperty', 'hasLeadingIcon', + 'getBoundingClientRect', 'getCheckmarkBoundingClientRect', ]); }); @@ -88,6 +89,39 @@ test('#setSelected removes calls adapter.notifySelection when selected is false' td.verify(mockAdapter.notifySelection(false)); }); +test('#computeBoundingRect returns adapter.getBoundingClientRect when there is no checkmark bounding rect', () => { + const {foundation, mockAdapter} = setupTest(); + td.when(mockAdapter.getCheckmarkBoundingClientRect()).thenReturn(null); + const boundingRect = {width: 10, height: 10}; + td.when(mockAdapter.getBoundingClientRect()).thenReturn(boundingRect); + + assert.strictEqual(foundation.computeBoundingRect(), boundingRect); +}); + +test('#computeBoundingRect factors in the checkmark bounding rect when it exists and there is no leading icon', () => { + const {foundation, mockAdapter} = setupTest(); + const boundingRect = {width: 10, height: 10}; + const checkmarkBoundingRect = {width: 5, height: 5}; + td.when(mockAdapter.getCheckmarkBoundingClientRect()).thenReturn(checkmarkBoundingRect); + td.when(mockAdapter.getBoundingClientRect()).thenReturn(boundingRect); + td.when(mockAdapter.hasLeadingIcon()).thenReturn(false); + + const computedBoundingRect = foundation.computeBoundingRect(); + assert.equal(computedBoundingRect.height, boundingRect.height); + assert.equal(computedBoundingRect.width, boundingRect.width + checkmarkBoundingRect.height); +}); + +test('#computeBoundingRect returns adapter.getBoundingClientRect when there is a checkmark and a leading icon', () => { + const {foundation, mockAdapter} = setupTest(); + const checkmarkBoundingRect = {width: 5, height: 5}; + td.when(mockAdapter.getCheckmarkBoundingClientRect()).thenReturn(checkmarkBoundingRect); + const boundingRect = {width: 10, height: 10}; + td.when(mockAdapter.getBoundingClientRect()).thenReturn(boundingRect); + td.when(mockAdapter.hasLeadingIcon()).thenReturn(true); + + assert.strictEqual(foundation.computeBoundingRect(), boundingRect); +}); + test(`#beginExit adds ${cssClasses.CHIP_EXIT} class`, () => { const {foundation, mockAdapter} = setupTest(); foundation.beginExit(); diff --git a/test/unit/mdc-chips/mdc-chip.test.js b/test/unit/mdc-chips/mdc-chip.test.js index 899a4c599b1..91ecd450ca1 100644 --- a/test/unit/mdc-chips/mdc-chip.test.js +++ b/test/unit/mdc-chips/mdc-chip.test.js @@ -29,6 +29,8 @@ import td from 'testdouble'; import {MDCRipple} from '../../../packages/mdc-ripple/index'; import {MDCChip, MDCChipFoundation} from '../../../packages/mdc-chips/chip/index'; +const {CHECKMARK_SELECTOR} = MDCChipFoundation.strings; + const getFixture = () => bel`
Chip content
@@ -266,6 +268,41 @@ test('adapter#setStyleProperty sets a style property on the root element', () => assert.equal(root.style.getPropertyValue('color'), color); }); +test('adapter#hasLeadingIcon returns true if the chip has a leading icon', () => { + const root = getFixtureWithCheckmark(); + addLeadingIcon(root); + const component = new MDCChip(root); + + assert.isTrue(component.getDefaultFoundation().adapter_.hasLeadingIcon()); +}); + +test('adapter#hasLeadingIcon returns false if the chip does not have a leading icon', () => { + const {component} = setupTest(); + assert.isFalse(component.getDefaultFoundation().adapter_.hasLeadingIcon()); +}); + +test('adapter#getBoundingClientRect calls getBoundingClientRect on the root element', () => { + const {root, component} = setupTest(); + root.getBoundingClientRect = td.func(); + component.getDefaultFoundation().adapter_.getBoundingClientRect(); + td.verify(root.getBoundingClientRect(), {times: 1}); +}); + +test('adapter#getCheckmarkBoundingClientRect calls getBoundingClientRect on the checkmark element if it exists', () => { + const root = getFixtureWithCheckmark(); + const component = new MDCChip(root); + const checkmark = root.querySelector(CHECKMARK_SELECTOR); + + checkmark.getBoundingClientRect = td.func(); + component.getDefaultFoundation().adapter_.getCheckmarkBoundingClientRect(); + td.verify(checkmark.getBoundingClientRect(), {times: 1}); +}); + +test('adapter#getCheckmarkBoundingClientRect returns null when there is no checkmark element', () => { + const {component} = setupTest(); + assert.isNull(component.getDefaultFoundation().adapter_.getCheckmarkBoundingClientRect()); +}); + test('#get selected proxies to foundation', () => { const {component, mockFoundation} = setupMockFoundationTest(); assert.equal(component.selected, mockFoundation.isSelected()); From eba9a1d95c7211b2c9c00fe009c2d25d14540e3e Mon Sep 17 00:00:00 2001 From: Rachel Friedman Date: Thu, 10 Jan 2019 17:44:17 -0800 Subject: [PATCH 2/4] WIP: Reset package-lock.json --- package-lock.json | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index faf60cdb083..7b06bca29d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7486,8 +7486,7 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", @@ -7497,8 +7496,7 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -7615,8 +7613,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -7628,7 +7625,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7754,8 +7750,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -7888,7 +7883,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", From 71ffdea1aa795e956a9e869cb5b7a958079fad9e Mon Sep 17 00:00:00 2001 From: Rachel Friedman Date: Fri, 11 Jan 2019 14:34:28 -0800 Subject: [PATCH 3/4] WIP: Updates from code review --- packages/mdc-chips/README.md | 4 ++++ packages/mdc-chips/chip/adapter.js | 2 +- packages/mdc-chips/chip/foundation.js | 18 +++++++------- packages/mdc-chips/chip/index.js | 4 ++-- .../mdc-chips/mdc-chip.foundation.test.js | 24 +++++++++---------- test/unit/mdc-chips/mdc-chip.test.js | 4 ++-- 6 files changed, 29 insertions(+), 27 deletions(-) diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md index a339c2cebea..cd79fc682bc 100644 --- a/packages/mdc-chips/README.md +++ b/packages/mdc-chips/README.md @@ -334,6 +334,9 @@ Method Signature | Description `notifyRemoval() => void` | Notifies the Chip Set that the chip will be removed\*\*\* `getComputedStyleValue(propertyName: string) => string` | Returns the computed property value of the given style property on the root element `setStyleProperty(propertyName: string, value: string) => void` | Sets the property value of the given style property on the root element +`hasLeadingIcon() => boolean` | Returns whether the chip has a leading icon +`getRootBoundingClientRect() => ClientRect` | Returns the bounding client rect of the root element +`getCheckmarkBoundingClientRect() => ClientRect | null` | Returns the bounding client rect of the checkmark element or null if it doesn't exist > \*_NOTE_: `notifyInteraction` and `notifyTrailingIconInteraction` must pass along the target chip's ID, and must be observable by the parent `mdc-chip-set` element (e.g. via DOM event bubbling). @@ -359,6 +362,7 @@ Method Signature | Description `setSelected(selected: boolean) => void` | Sets the chip's selected state `getShouldRemoveOnTrailingIconClick() => boolean` | Returns whether a trailing icon click should trigger exit/removal of the chip `setShouldRemoveOnTrailingIconClick(shouldRemove: boolean) => void` | Sets whether a trailing icon click should trigger exit/removal of the chip +`getDimensions() => ClientRect` | Returns the dimensions of the chip. This is used for applying ripple to the chip. `beginExit() => void` | Begins the exit animation which leads to removal of the chip `handleInteraction(evt: Event) => void` | Handles an interaction event on the root element `handleTransitionEnd(evt: Event) => void` | Handles a transition end event on the root element diff --git a/packages/mdc-chips/chip/adapter.js b/packages/mdc-chips/chip/adapter.js index 1daa49d5930..a27b5520aea 100644 --- a/packages/mdc-chips/chip/adapter.js +++ b/packages/mdc-chips/chip/adapter.js @@ -120,7 +120,7 @@ class MDCChipAdapter { * Returns the bounding client rect of the root element. * @return {!ClientRect} */ - getBoundingClientRect() {} + getRootBoundingClientRect() {} /** * Returns the bounding client rect of the checkmark element or null if it doesn't exist. diff --git a/packages/mdc-chips/chip/foundation.js b/packages/mdc-chips/chip/foundation.js index c7d14aacd11..54b53be4490 100644 --- a/packages/mdc-chips/chip/foundation.js +++ b/packages/mdc-chips/chip/foundation.js @@ -61,7 +61,7 @@ class MDCChipFoundation extends MDCFoundation { getComputedStyleValue: () => {}, setStyleProperty: () => {}, hasLeadingIcon: () => {}, - getBoundingClientRect: () => {}, + getRootBoundingClientRect: () => {}, getCheckmarkBoundingClientRect: () => {}, }); } @@ -112,21 +112,19 @@ class MDCChipFoundation extends MDCFoundation { this.shouldRemoveOnTrailingIconClick_ = shouldRemove; } - /** - * Computes and returns the bounding rect for the chip. - * @return {!ClientRect} - */ - computeBoundingRect() { + /** @return {!ClientRect} */ + getDimensions() { // When a chip has a checkmark and not a leading icon, the bounding rect changes in size depending on the current // size of the checkmark. - if (!this.adapter_.hasLeadingIcon() && this.adapter_.getCheckmarkBoundingClientRect()) { - const height = this.adapter_.getBoundingClientRect().height; + if (!this.adapter_.hasLeadingIcon() && this.adapter_.getCheckmarkBoundingClientRect() !== null) { + const height = this.adapter_.getRootBoundingClientRect().height; // The checkmark's width is initially set to 0, so use the checkmark's height as a proxy since the checkmark // should always be square. - const width = this.adapter_.getBoundingClientRect().width + this.adapter_.getCheckmarkBoundingClientRect().height; + const width = + this.adapter_.getRootBoundingClientRect().width + this.adapter_.getCheckmarkBoundingClientRect().height; return /** @type {!ClientRect} */ ({height, width}); } else { - return this.adapter_.getBoundingClientRect(); + return this.adapter_.getRootBoundingClientRect(); } } diff --git a/packages/mdc-chips/chip/index.js b/packages/mdc-chips/chip/index.js index 36a2a321657..3d29d710aa1 100644 --- a/packages/mdc-chips/chip/index.js +++ b/packages/mdc-chips/chip/index.js @@ -76,7 +76,7 @@ class MDCChip extends MDCComponent { this.checkmark_ = this.root_.querySelector(strings.CHECKMARK_SELECTOR); const adapter = Object.assign(MDCRipple.createAdapter(this), { - computeBoundingRect: () => this.foundation_.computeBoundingRect(), + computeBoundingRect: () => this.foundation_.getDimensions(), }); this.ripple_ = rippleFactory(this.root_, new MDCRippleFoundation(adapter)); } @@ -183,7 +183,7 @@ class MDCChip extends MDCComponent { getComputedStyleValue: (propertyName) => window.getComputedStyle(this.root_).getPropertyValue(propertyName), setStyleProperty: (propertyName, value) => this.root_.style.setProperty(propertyName, value), hasLeadingIcon: () => !!this.leadingIcon_, - getBoundingClientRect: () => this.root_.getBoundingClientRect(), + getRootBoundingClientRect: () => this.root_.getBoundingClientRect(), getCheckmarkBoundingClientRect: () => this.checkmark_ ? this.checkmark_.getBoundingClientRect() : null, }))); } diff --git a/test/unit/mdc-chips/mdc-chip.foundation.test.js b/test/unit/mdc-chips/mdc-chip.foundation.test.js index 5a605b28989..7d221897f53 100644 --- a/test/unit/mdc-chips/mdc-chip.foundation.test.js +++ b/test/unit/mdc-chips/mdc-chip.foundation.test.js @@ -47,7 +47,7 @@ test('defaultAdapter returns a complete adapter implementation', () => { 'removeClassFromLeadingIcon', 'eventTargetHasClass', 'notifyInteraction', 'notifyTrailingIconInteraction', 'notifyRemoval', 'notifySelection', 'getComputedStyleValue', 'setStyleProperty', 'hasLeadingIcon', - 'getBoundingClientRect', 'getCheckmarkBoundingClientRect', + 'getRootBoundingClientRect', 'getCheckmarkBoundingClientRect', ]); }); @@ -89,37 +89,37 @@ test('#setSelected removes calls adapter.notifySelection when selected is false' td.verify(mockAdapter.notifySelection(false)); }); -test('#computeBoundingRect returns adapter.getBoundingClientRect when there is no checkmark bounding rect', () => { +test('#getDimensions returns adapter.getRootBoundingClientRect when there is no checkmark bounding rect', () => { const {foundation, mockAdapter} = setupTest(); td.when(mockAdapter.getCheckmarkBoundingClientRect()).thenReturn(null); const boundingRect = {width: 10, height: 10}; - td.when(mockAdapter.getBoundingClientRect()).thenReturn(boundingRect); + td.when(mockAdapter.getRootBoundingClientRect()).thenReturn(boundingRect); - assert.strictEqual(foundation.computeBoundingRect(), boundingRect); + assert.strictEqual(foundation.getDimensions(), boundingRect); }); -test('#computeBoundingRect factors in the checkmark bounding rect when it exists and there is no leading icon', () => { +test('#getDimensions factors in the checkmark bounding rect when it exists and there is no leading icon', () => { const {foundation, mockAdapter} = setupTest(); const boundingRect = {width: 10, height: 10}; const checkmarkBoundingRect = {width: 5, height: 5}; td.when(mockAdapter.getCheckmarkBoundingClientRect()).thenReturn(checkmarkBoundingRect); - td.when(mockAdapter.getBoundingClientRect()).thenReturn(boundingRect); + td.when(mockAdapter.getRootBoundingClientRect()).thenReturn(boundingRect); td.when(mockAdapter.hasLeadingIcon()).thenReturn(false); - const computedBoundingRect = foundation.computeBoundingRect(); - assert.equal(computedBoundingRect.height, boundingRect.height); - assert.equal(computedBoundingRect.width, boundingRect.width + checkmarkBoundingRect.height); + const dimensions = foundation.getDimensions(); + assert.equal(dimensions.height, boundingRect.height); + assert.equal(dimensions.width, boundingRect.width + checkmarkBoundingRect.height); }); -test('#computeBoundingRect returns adapter.getBoundingClientRect when there is a checkmark and a leading icon', () => { +test('#getDimensions returns adapter.getRootBoundingClientRect when there is a checkmark and a leading icon', () => { const {foundation, mockAdapter} = setupTest(); const checkmarkBoundingRect = {width: 5, height: 5}; td.when(mockAdapter.getCheckmarkBoundingClientRect()).thenReturn(checkmarkBoundingRect); const boundingRect = {width: 10, height: 10}; - td.when(mockAdapter.getBoundingClientRect()).thenReturn(boundingRect); + td.when(mockAdapter.getRootBoundingClientRect()).thenReturn(boundingRect); td.when(mockAdapter.hasLeadingIcon()).thenReturn(true); - assert.strictEqual(foundation.computeBoundingRect(), boundingRect); + assert.strictEqual(foundation.getDimensions(), boundingRect); }); test(`#beginExit adds ${cssClasses.CHIP_EXIT} class`, () => { diff --git a/test/unit/mdc-chips/mdc-chip.test.js b/test/unit/mdc-chips/mdc-chip.test.js index 91ecd450ca1..a88cc5c4611 100644 --- a/test/unit/mdc-chips/mdc-chip.test.js +++ b/test/unit/mdc-chips/mdc-chip.test.js @@ -281,10 +281,10 @@ test('adapter#hasLeadingIcon returns false if the chip does not have a leading i assert.isFalse(component.getDefaultFoundation().adapter_.hasLeadingIcon()); }); -test('adapter#getBoundingClientRect calls getBoundingClientRect on the root element', () => { +test('adapter#getRootBoundingClientRect calls getBoundingClientRect on the root element', () => { const {root, component} = setupTest(); root.getBoundingClientRect = td.func(); - component.getDefaultFoundation().adapter_.getBoundingClientRect(); + component.getDefaultFoundation().adapter_.getRootBoundingClientRect(); td.verify(root.getBoundingClientRect(), {times: 1}); }); From d78159f14956a87b36440989e272cc43409d3f37 Mon Sep 17 00:00:00 2001 From: Rachel Friedman Date: Fri, 11 Jan 2019 16:30:32 -0800 Subject: [PATCH 4/4] WIP: Fix readme formatting --- packages/mdc-chips/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md index cd79fc682bc..2e43038124c 100644 --- a/packages/mdc-chips/README.md +++ b/packages/mdc-chips/README.md @@ -336,7 +336,7 @@ Method Signature | Description `setStyleProperty(propertyName: string, value: string) => void` | Sets the property value of the given style property on the root element `hasLeadingIcon() => boolean` | Returns whether the chip has a leading icon `getRootBoundingClientRect() => ClientRect` | Returns the bounding client rect of the root element -`getCheckmarkBoundingClientRect() => ClientRect | null` | Returns the bounding client rect of the checkmark element or null if it doesn't exist +`getCheckmarkBoundingClientRect() => ?ClientRect` | Returns the bounding client rect of the checkmark element or null if it doesn't exist > \*_NOTE_: `notifyInteraction` and `notifyTrailingIconInteraction` must pass along the target chip's ID, and must be observable by the parent `mdc-chip-set` element (e.g. via DOM event bubbling).