diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index 731e3fb9106..ddb8a815c2a 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -247,7 +247,6 @@ Method Signature | Description
`registerBottomLineEventHandler(evtType: string, handler: EventListener)` => void | Registers an event listener on the bottom line element for a given event
`deregisterBottomLineEventHandler(evtType: string, handler: EventListener)` => void | Deregisters an event listener on the bottom line element for a given event
`getNativeInput() => {value: string, disabled: boolean, badInput: boolean, checkValidity: () => boolean}?` | Returns an object representing the native text input element, with a similar API shape
-`getIdleOutlineStyleValue(propertyName: string) => string` | Returns the idle outline element's computed style value of the given css property `propertyName`
`isFocused() => boolean` | Returns whether the input is focused
`isRtl() => boolean` | Returns whether the direction of the root element is set to RTL
diff --git a/packages/mdc-textfield/constants.js b/packages/mdc-textfield/constants.js
index b6ff828f874..503db4a4cea 100644
--- a/packages/mdc-textfield/constants.js
+++ b/packages/mdc-textfield/constants.js
@@ -21,7 +21,6 @@ const strings = {
INPUT_SELECTOR: '.mdc-text-field__input',
LABEL_SELECTOR: '.mdc-text-field__label',
ICON_SELECTOR: '.mdc-text-field__icon',
- IDLE_OUTLINE_SELECTOR: '.mdc-text-field__idle-outline',
OUTLINE_SELECTOR: '.mdc-text-field__outline',
BOTTOM_LINE_SELECTOR: '.mdc-text-field__bottom-line',
};
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 89aa596d061..991a629661c 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -64,7 +64,6 @@ class MDCTextFieldFoundation extends MDCFoundation {
registerBottomLineEventHandler: () => {},
deregisterBottomLineEventHandler: () => {},
getNativeInput: () => {},
- getIdleOutlineStyleValue: () => {},
isFocused: () => {},
isRtl: () => {},
});
@@ -172,12 +171,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
const isDense = this.adapter_.hasClass(cssClasses.DENSE);
const labelScale = isDense ? numbers.DENSE_LABEL_SCALE : numbers.LABEL_SCALE;
const labelWidth = this.label_.getWidth() * labelScale;
- // Fall back to reading a specific corner's style because Firefox doesn't report the style on border-radius.
- const radiusStyleValue = this.adapter_.getIdleOutlineStyleValue('border-radius') ||
- this.adapter_.getIdleOutlineStyleValue('border-top-left-radius');
- const radius = parseFloat(radiusStyleValue);
const isRtl = this.adapter_.isRtl();
- this.outline_.updateSvgPath(labelWidth, radius, isRtl);
+ this.outline_.updateSvgPath(labelWidth, isRtl);
}
/**
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 26fa6b9ae40..265d70fb1e4 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -258,12 +258,6 @@ class MDCTextField extends MDCComponent {
this.bottomLine_.unlisten(evtType, handler);
}
},
- getIdleOutlineStyleValue: (propertyName) => {
- const idleOutlineElement = this.root_.querySelector(strings.IDLE_OUTLINE_SELECTOR);
- if (idleOutlineElement) {
- return window.getComputedStyle(idleOutlineElement).getPropertyValue(propertyName);
- }
- },
isFocused: () => {
return document.activeElement === this.root_.querySelector(strings.INPUT_SELECTOR);
},
diff --git a/packages/mdc-textfield/outline/README.md b/packages/mdc-textfield/outline/README.md
index 1882f2c0e60..4f8e3e03879 100644
--- a/packages/mdc-textfield/outline/README.md
+++ b/packages/mdc-textfield/outline/README.md
@@ -68,9 +68,10 @@ Method Signature | Description
`getWidth() => number` | Returns the width of the outline element
`getHeight() => number` | Returns the height of the outline element
`setOutlinePathAttr(value: string) => void` | Sets the "d" attribute of the outline element's SVG path
+`getIdleOutlineStyleValue(propertyName: string) => string` | Returns the idle outline element's computed style value of the given css property `propertyName`
### `MDCTextFieldOutlineFoundation`
Method Signature | Description
--- | ---
-`updateSvgPath(labelWidth: number, radius: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element based on the given the width of the label element, the corner radius, and the RTL context.
+`updateSvgPath(labelWidth: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element based on the given the width of the label element and the RTL context.
diff --git a/packages/mdc-textfield/outline/adapter.js b/packages/mdc-textfield/outline/adapter.js
index b4a7e37a652..ce63594288c 100644
--- a/packages/mdc-textfield/outline/adapter.js
+++ b/packages/mdc-textfield/outline/adapter.js
@@ -45,6 +45,14 @@ class MDCTextFieldOutlineAdapter {
* @param {string} value
*/
setOutlinePathAttr(value) {}
+
+ /**
+ * Returns the idle outline element's computed style value of the given css property `propertyName`.
+ * We achieve this via `getComputedStyle(...).getPropertyValue(propertyName)`.
+ * @param {string} propertyName
+ * @return {string}
+ */
+ getIdleOutlineStyleValue(propertyName) {}
}
export default MDCTextFieldOutlineAdapter;
diff --git a/packages/mdc-textfield/outline/constants.js b/packages/mdc-textfield/outline/constants.js
index fc5ceda157d..4a5d91d837e 100644
--- a/packages/mdc-textfield/outline/constants.js
+++ b/packages/mdc-textfield/outline/constants.js
@@ -18,6 +18,7 @@
/** @enum {string} */
const strings = {
PATH_SELECTOR: '.mdc-text-field__outline-path',
+ IDLE_OUTLINE_SELECTOR: '.mdc-text-field__idle-outline',
};
export {strings};
diff --git a/packages/mdc-textfield/outline/foundation.js b/packages/mdc-textfield/outline/foundation.js
index 2bc4a2005f3..6268977a27d 100644
--- a/packages/mdc-textfield/outline/foundation.js
+++ b/packages/mdc-textfield/outline/foundation.js
@@ -39,6 +39,7 @@ class MDCTextFieldOutlineFoundation extends MDCFoundation {
getWidth: () => {},
getHeight: () => {},
setOutlinePathAttr: () => {},
+ getIdleOutlineStyleValue: () => {},
});
}
@@ -51,12 +52,15 @@ class MDCTextFieldOutlineFoundation extends MDCFoundation {
/**
* Updates the SVG path of the focus outline element based on the given width of the
- * label element, the corner radius, and the RTL context.
+ * label element and the RTL context.
* @param {number} labelWidth
- * @param {number} radius
* @param {boolean=} isRtl
*/
- updateSvgPath(labelWidth, radius, isRtl = false) {
+ updateSvgPath(labelWidth, isRtl = false) {
+ // Fall back to reading a specific corner's style because Firefox doesn't report the style on border-radius.
+ const radiusStyleValue = this.adapter_.getIdleOutlineStyleValue('border-radius') ||
+ this.adapter_.getIdleOutlineStyleValue('border-top-left-radius');
+ const radius = parseFloat(radiusStyleValue);
const width = this.adapter_.getWidth();
const height = this.adapter_.getHeight();
const cornerWidth = radius + 1.2;
diff --git a/packages/mdc-textfield/outline/index.js b/packages/mdc-textfield/outline/index.js
index 0a02bce7129..98020a8acf8 100644
--- a/packages/mdc-textfield/outline/index.js
+++ b/packages/mdc-textfield/outline/index.js
@@ -52,6 +52,12 @@ class MDCTextFieldOutline extends MDCComponent {
const path = this.root_.querySelector(strings.PATH_SELECTOR);
path.setAttribute('d', value);
},
+ getIdleOutlineStyleValue: (propertyName) => {
+ const idleOutlineElement = this.root_.parentNode.querySelector(strings.IDLE_OUTLINE_SELECTOR);
+ if (idleOutlineElement) {
+ return window.getComputedStyle(idleOutlineElement).getPropertyValue(propertyName);
+ }
+ },
})));
}
}
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 4c25522570d..3d624e7dafe 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -43,7 +43,7 @@ test('defaultAdapter returns a complete adapter implementation', () => {
'registerTextFieldInteractionHandler', 'deregisterTextFieldInteractionHandler',
'registerInputInteractionHandler', 'deregisterInputInteractionHandler',
'registerBottomLineEventHandler', 'deregisterBottomLineEventHandler',
- 'getNativeInput', 'getIdleOutlineStyleValue', 'isFocused', 'isRtl',
+ 'getNativeInput', 'isFocused', 'isRtl',
]);
});
@@ -383,22 +383,20 @@ test('#updateOutline updates the SVG path of the outline element', () => {
const {foundation, mockAdapter, label, outline} = setupTest();
td.when(label.getWidth()).thenReturn(30);
td.when(mockAdapter.hasClass(cssClasses.DENSE)).thenReturn(false);
- td.when(mockAdapter.getIdleOutlineStyleValue('border-radius')).thenReturn('8px');
td.when(mockAdapter.isRtl()).thenReturn(false);
foundation.updateOutline();
- td.verify(outline.updateSvgPath(30 * numbers.LABEL_SCALE, 8, false));
+ td.verify(outline.updateSvgPath(30 * numbers.LABEL_SCALE, false));
});
test('#updateOutline updates the SVG path of the outline element when dense', () => {
const {foundation, mockAdapter, label, outline} = setupTest();
td.when(label.getWidth()).thenReturn(30);
td.when(mockAdapter.hasClass(cssClasses.DENSE)).thenReturn(true);
- td.when(mockAdapter.getIdleOutlineStyleValue('border-radius')).thenReturn('8px');
td.when(mockAdapter.isRtl()).thenReturn(false);
foundation.updateOutline();
- td.verify(outline.updateSvgPath(30 * numbers.DENSE_LABEL_SCALE, 8, false));
+ td.verify(outline.updateSvgPath(30 * numbers.DENSE_LABEL_SCALE, false));
});
const setupBareBonesTest = () => {
diff --git a/test/unit/mdc-textfield/mdc-text-field-outline.foundation.test.js b/test/unit/mdc-textfield/mdc-text-field-outline.foundation.test.js
index fbc78b9faf3..0b9cbbda5c6 100644
--- a/test/unit/mdc-textfield/mdc-text-field-outline.foundation.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field-outline.foundation.test.js
@@ -29,7 +29,7 @@ test('exports strings', () => {
test('defaultAdapter returns a complete adapter implementation', () => {
verifyDefaultAdapter(MDCTextFieldOutlineFoundation, [
- 'getWidth', 'getHeight', 'setOutlinePathAttr',
+ 'getWidth', 'getHeight', 'setOutlinePathAttr', 'getIdleOutlineStyleValue',
]);
});
@@ -38,8 +38,7 @@ const setupTest = () => setupFoundationTest(MDCTextFieldOutlineFoundation);
test('#updateSvgPath sets the path of the outline element', () => {
const {foundation, mockAdapter} = setupTest();
const labelWidth = 30;
- const radius = 8;
const isRtl = true;
- foundation.updateSvgPath(labelWidth, radius, isRtl);
+ foundation.updateSvgPath(labelWidth, isRtl);
td.verify(mockAdapter.setOutlinePathAttr(td.matchers.anything()));
});
diff --git a/test/unit/mdc-textfield/mdc-text-field-outline.test.js b/test/unit/mdc-textfield/mdc-text-field-outline.test.js
index c2bc18ce905..356b7b28d0b 100644
--- a/test/unit/mdc-textfield/mdc-text-field-outline.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field-outline.test.js
@@ -57,3 +57,18 @@ test('#adapter.setOutlinePathAttr sets the SVG path of the element', () => {
const path = root.querySelector('.mdc-text-field__outline-path');
assert.equal(path.getAttribute('d'), 'M 0 1');
});
+
+test('#adapter.getIdleOutlineStyleValue returns the value of the given property on the idle outline element', () => {
+ const outlineRoot = getFixture();
+ const root = bel``;
+ root.appendChild(outlineRoot);
+ root.appendChild(bel``);
+ const idleOutline = root.querySelector('.mdc-text-field__idle-outline');
+ idleOutline.style.width = '500px';
+
+ const component = new MDCTextFieldOutline(outlineRoot);
+ assert.equal(
+ component.getDefaultFoundation().adapter_.getIdleOutlineStyleValue('width'),
+ getComputedStyle(idleOutline).getPropertyValue('width')
+ );
+});
diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index cedde2acd29..1b101790cd6 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -370,19 +370,6 @@ test('#adapter.getNativeInput returns the component input element', () => {
);
});
-test('#adapter.getIdleOutlineStyleValue returns the value of the given property on the idle outline element', () => {
- const root = getFixture();
- root.appendChild(bel``);
- const idleOutline = root.querySelector('.mdc-text-field__idle-outline');
- idleOutline.style.width = '500px';
-
- const component = new MDCTextField(root);
- assert.equal(
- component.getDefaultFoundation().adapter_.getIdleOutlineStyleValue('width'),
- getComputedStyle(idleOutline).getPropertyValue('width')
- );
-});
-
test('#adapter.isRtl returns true when the root element is in an RTL context' +
'and false otherwise', () => {
const wrapper = bel``;