Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 5d3b350

Browse files
patrickrodeepatrickrodee
authored
chore(text-field): Move idle outline style method (#1911)
Remove `getIdleOutlineStyleValue` method from textfield adapter. Add `getIdleOutlineStyleValue` method to textfield outline adapter. Update tests to check new functionality. BREAKING CHANGE: Text field outline adapter now must implement the `getIdleOutlineStyleValue` method previously implemented in the text field adapter. The functionality is exactly the same and requires only small changes to accessing the outline node.
1 parent 302349e commit 5d3b350

File tree

13 files changed

+45
-39
lines changed

13 files changed

+45
-39
lines changed

‎packages/mdc-textfield/README.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,6 @@ Method Signature | Description
247247
`registerBottomLineEventHandler(evtType: string, handler: EventListener)` => void | Registers an event listener on the bottom line element for a given event
248248
`deregisterBottomLineEventHandler(evtType: string, handler: EventListener)` => void | Deregisters an event listener on the bottom line element for a given event
249249
`getNativeInput() => {value: string, disabled: boolean, badInput: boolean, checkValidity: () => boolean}?` | Returns an object representing the native text input element, with a similar API shape
250-
`getIdleOutlineStyleValue(propertyName: string) => string` | Returns the idle outline element's computed style value of the given css property `propertyName`
251250
`isFocused() => boolean` | Returns whether the input is focused
252251
`isRtl() => boolean` | Returns whether the direction of the root element is set to RTL
253252

‎packages/mdc-textfield/constants.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ const strings = {
2121
INPUT_SELECTOR: '.mdc-text-field__input',
2222
LABEL_SELECTOR: '.mdc-text-field__label',
2323
ICON_SELECTOR: '.mdc-text-field__icon',
24-
IDLE_OUTLINE_SELECTOR: '.mdc-text-field__idle-outline',
2524
OUTLINE_SELECTOR: '.mdc-text-field__outline',
2625
BOTTOM_LINE_SELECTOR: '.mdc-text-field__bottom-line',
2726
};

‎packages/mdc-textfield/foundation.js

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ class MDCTextFieldFoundation extends MDCFoundation {
6464
registerBottomLineEventHandler: () => {},
6565
deregisterBottomLineEventHandler: () => {},
6666
getNativeInput: () => {},
67-
getIdleOutlineStyleValue: () => {},
6867
isFocused: () => {},
6968
isRtl: () => {},
7069
});
@@ -172,12 +171,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
172171
const isDense = this.adapter_.hasClass(cssClasses.DENSE);
173172
const labelScale = isDense ? numbers.DENSE_LABEL_SCALE : numbers.LABEL_SCALE;
174173
const labelWidth = this.label_.getWidth() * labelScale;
175-
// Fall back to reading a specific corner's style because Firefox doesn't report the style on border-radius.
176-
const radiusStyleValue = this.adapter_.getIdleOutlineStyleValue('border-radius') ||
177-
this.adapter_.getIdleOutlineStyleValue('border-top-left-radius');
178-
const radius = parseFloat(radiusStyleValue);
179174
const isRtl = this.adapter_.isRtl();
180-
this.outline_.updateSvgPath(labelWidth, radius, isRtl);
175+
this.outline_.updateSvgPath(labelWidth, isRtl);
181176
}
182177

183178
/**

‎packages/mdc-textfield/index.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -258,12 +258,6 @@ class MDCTextField extends MDCComponent {
258258
this.bottomLine_.unlisten(evtType, handler);
259259
}
260260
},
261-
getIdleOutlineStyleValue: (propertyName) => {
262-
const idleOutlineElement = this.root_.querySelector(strings.IDLE_OUTLINE_SELECTOR);
263-
if (idleOutlineElement) {
264-
return window.getComputedStyle(idleOutlineElement).getPropertyValue(propertyName);
265-
}
266-
},
267261
isFocused: () => {
268262
return document.activeElement === this.root_.querySelector(strings.INPUT_SELECTOR);
269263
},

‎packages/mdc-textfield/outline/README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,10 @@ Method Signature | Description
6868
`getWidth() => number` | Returns the width of the outline element
6969
`getHeight() => number` | Returns the height of the outline element
7070
`setOutlinePathAttr(value: string) => void` | Sets the "d" attribute of the outline element's SVG path
71+
`getIdleOutlineStyleValue(propertyName: string) => string` | Returns the idle outline element's computed style value of the given css property `propertyName`
7172

7273
### `MDCTextFieldOutlineFoundation`
7374

7475
Method Signature | Description
7576
--- | ---
76-
`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.
77+
`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.

‎packages/mdc-textfield/outline/adapter.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,14 @@ class MDCTextFieldOutlineAdapter {
4545
* @param {string} value
4646
*/
4747
setOutlinePathAttr(value) {}
48+
49+
/**
50+
* Returns the idle outline element's computed style value of the given css property `propertyName`.
51+
* We achieve this via `getComputedStyle(...).getPropertyValue(propertyName)`.
52+
* @param {string} propertyName
53+
* @return {string}
54+
*/
55+
getIdleOutlineStyleValue(propertyName) {}
4856
}
4957

5058
export default MDCTextFieldOutlineAdapter;

‎packages/mdc-textfield/outline/constants.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
/** @enum {string} */
1919
const strings = {
2020
PATH_SELECTOR: '.mdc-text-field__outline-path',
21+
IDLE_OUTLINE_SELECTOR: '.mdc-text-field__idle-outline',
2122
};
2223

2324
export {strings};

‎packages/mdc-textfield/outline/foundation.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ class MDCTextFieldOutlineFoundation extends MDCFoundation {
3939
getWidth: () => {},
4040
getHeight: () => {},
4141
setOutlinePathAttr: () => {},
42+
getIdleOutlineStyleValue: () => {},
4243
});
4344
}
4445

@@ -51,12 +52,15 @@ class MDCTextFieldOutlineFoundation extends MDCFoundation {
5152

5253
/**
5354
* Updates the SVG path of the focus outline element based on the given width of the
54-
* label element, the corner radius, and the RTL context.
55+
* label element and the RTL context.
5556
* @param {number} labelWidth
56-
* @param {number} radius
5757
* @param {boolean=} isRtl
5858
*/
59-
updateSvgPath(labelWidth, radius, isRtl = false) {
59+
updateSvgPath(labelWidth, isRtl = false) {
60+
// Fall back to reading a specific corner's style because Firefox doesn't report the style on border-radius.
61+
const radiusStyleValue = this.adapter_.getIdleOutlineStyleValue('border-radius') ||
62+
this.adapter_.getIdleOutlineStyleValue('border-top-left-radius');
63+
const radius = parseFloat(radiusStyleValue);
6064
const width = this.adapter_.getWidth();
6165
const height = this.adapter_.getHeight();
6266
const cornerWidth = radius + 1.2;

‎packages/mdc-textfield/outline/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,12 @@ class MDCTextFieldOutline extends MDCComponent {
5252
const path = this.root_.querySelector(strings.PATH_SELECTOR);
5353
path.setAttribute('d', value);
5454
},
55+
getIdleOutlineStyleValue: (propertyName) => {
56+
const idleOutlineElement = this.root_.parentNode.querySelector(strings.IDLE_OUTLINE_SELECTOR);
57+
if (idleOutlineElement) {
58+
return window.getComputedStyle(idleOutlineElement).getPropertyValue(propertyName);
59+
}
60+
},
5561
})));
5662
}
5763
}

‎test/unit/mdc-textfield/foundation.test.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ test('defaultAdapter returns a complete adapter implementation', () => {
4343
'registerTextFieldInteractionHandler', 'deregisterTextFieldInteractionHandler',
4444
'registerInputInteractionHandler', 'deregisterInputInteractionHandler',
4545
'registerBottomLineEventHandler', 'deregisterBottomLineEventHandler',
46-
'getNativeInput', 'getIdleOutlineStyleValue', 'isFocused', 'isRtl',
46+
'getNativeInput', 'isFocused', 'isRtl',
4747
]);
4848
});
4949

@@ -383,22 +383,20 @@ test('#updateOutline updates the SVG path of the outline element', () => {
383383
const {foundation, mockAdapter, label, outline} = setupTest();
384384
td.when(label.getWidth()).thenReturn(30);
385385
td.when(mockAdapter.hasClass(cssClasses.DENSE)).thenReturn(false);
386-
td.when(mockAdapter.getIdleOutlineStyleValue('border-radius')).thenReturn('8px');
387386
td.when(mockAdapter.isRtl()).thenReturn(false);
388387

389388
foundation.updateOutline();
390-
td.verify(outline.updateSvgPath(30 * numbers.LABEL_SCALE, 8, false));
389+
td.verify(outline.updateSvgPath(30 * numbers.LABEL_SCALE, false));
391390
});
392391

393392
test('#updateOutline updates the SVG path of the outline element when dense', () => {
394393
const {foundation, mockAdapter, label, outline} = setupTest();
395394
td.when(label.getWidth()).thenReturn(30);
396395
td.when(mockAdapter.hasClass(cssClasses.DENSE)).thenReturn(true);
397-
td.when(mockAdapter.getIdleOutlineStyleValue('border-radius')).thenReturn('8px');
398396
td.when(mockAdapter.isRtl()).thenReturn(false);
399397

400398
foundation.updateOutline();
401-
td.verify(outline.updateSvgPath(30 * numbers.DENSE_LABEL_SCALE, 8, false));
399+
td.verify(outline.updateSvgPath(30 * numbers.DENSE_LABEL_SCALE, false));
402400
});
403401

404402
const setupBareBonesTest = () => {

0 commit comments

Comments
 (0)