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.

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
 

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',
 };

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);
   }
 
   /**

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);
         },

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.

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;

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};

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;

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);
+        }
+      },
     })));
   }
 }

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 = () => {

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()));
 });

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`<div></div>`;
+  root.appendChild(outlineRoot);
+  root.appendChild(bel`<div class="mdc-text-field__idle-outline"></div>`);
+  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')
+  );
+});

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`<div class="mdc-text-field__idle-outline"></div>`);
-  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`<div dir="rtl"></div>`;