refactor(notched-outline): remove text-field notched outline styles a…

…nd coupling (#2401)

BREAKING CHANGE: Renamed `mdc-text-field-outlined-corner-radius` to `mdc-text-field-outline-corner-radius`. Made `updateSvgPath_()` private in notched-outline foundation and replaced it
with `notch()`. Renamed `updateOutline()` in text-field foundation to `notchOutline()`.

packages/mdc-notched-outline/README.md

@@ -39,6 +39,7 @@ The outline is a border around all sides of either a text field or select compon
 CSS Class | Description
 --- | ---
 `mdc-notched-outline` | Mandatory. Container for the SVG of the notched outline path.
+`mdc-notched-outline--notched` | Class to open notch outline.
 `mdc-notched-outline__path` | Mandatory. The path of the SVG of the notched outline.
 `mdc-notched-outline__idle` | Mandatory. The full outline when the notch is hidden.
 
@@ -82,22 +83,24 @@ Mixin | Description
 
 Method Signature | Description
 --- | ---
-`updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG of the outline element with a notch calculated based off of the notchWidth. The notch will appear left justified, unless isRtl is true.
+`notch(notchWidth: number, isRtl: boolean) => void` | Updates outline to open notch in outline path.
+`closeNotch() => void` | Updates the outline to close notch in outline path.
 
 ### `MDCNotchedOutlineAdapter`
 
 Method Signature | Description
 --- | ---
 `getWidth() => number` | Returns the width of the outline element.
 `getHeight() => number` | Returns the height of the outline element.
+`addClass(className: string) => void` | Adds a class to the notched outline element.
+`removeClass(className: string) => void` | Removes a class from the notched 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 a given css `propertyName`.
 
 ### `MDCNotchedOutlineFoundation`
 
 Method Signature | Description
 --- | ---
-`updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element based on the given notchWidth and the RTL context.
-
-
-[//]: <> (TODO(mattgoo): add how to hide/show notch in outline)
+`notch(notchWidth: number, isRtl: boolean) => void` | Adds the outline notched selector and updates the notched outline path based off notchWidth and isRtl.
+`closeNotch() => void` | Removes the outline notched selector.
+`updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element calculated based off of the notchWidth. The notch will appear left justified, unless isRtl is true.

packages/mdc-notched-outline/adapter.js

@@ -40,6 +40,18 @@ class MDCNotchedOutlineAdapter {
    */
   getHeight() {}
 
+  /**
+   * Adds a class to the root element.
+   * @param {string} className
+   */
+  addClass(className) {}
+
+  /**
+   * Removes a class from the root element.
+   * @param {string} className
+   */
+  removeClass(className) {}
+
   /**
    * Sets the "d" attribute of the outline element's SVG path.
    * @param {string} value

packages/mdc-notched-outline/constants.js

@@ -21,4 +21,9 @@ const strings = {
   IDLE_OUTLINE_SELECTOR: '.mdc-notched-outline__idle',
 };
 
-export {strings};
+/** @enum {string} */
+const cssClasses = {
+  OUTLINE_NOTCHED: 'mdc-notched-outline--notched',
+};
+
+export {cssClasses, strings};

packages/mdc-notched-outline/foundation.js

@@ -17,7 +17,7 @@
 
 import MDCFoundation from '@material/base/foundation';
 import MDCNotchedOutlineAdapter from './adapter';
-import {strings} from './constants';
+import {cssClasses, strings} from './constants';
 
 /**
  * @extends {MDCFoundation<!MDCNotchedOutlineAdapter>}
@@ -29,6 +29,11 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
     return strings;
   }
 
+  /** @return enum {string} */
+  static get cssClasses() {
+    return cssClasses;
+  }
+
   /**
    * {@see MDCNotchedOutlineAdapter} for typing information on parameters and return
    * types.
@@ -38,6 +43,8 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
     return /** @type {!MDCNotchedOutlineAdapter} */ ({
       getWidth: () => {},
       getHeight: () => {},
+      addClass: () => {},
+      removeClass: () => {},
       setOutlinePathAttr: () => {},
       getIdleOutlineStyleValue: () => {},
     });
@@ -50,13 +57,34 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
     super(Object.assign(MDCNotchedOutlineFoundation.defaultAdapter, adapter));
   }
 
+  /**
+   * Adds the outline notched selector and updates the notch width
+   * calculated based off of notchWidth and isRtl.
+   * @param {number} notchWidth
+   * @param {boolean=} isRtl
+   */
+  notch(notchWidth, isRtl = false) {
+    const {OUTLINE_NOTCHED} = MDCNotchedOutlineFoundation.cssClasses;
+    this.adapter_.addClass(OUTLINE_NOTCHED);
+    this.updateSvgPath_(notchWidth, isRtl);
+  }
+
+  /**
+   * Removes notched outline selector to close the notch in the outline.
+   */
+  closeNotch() {
+    const {OUTLINE_NOTCHED} = MDCNotchedOutlineFoundation.cssClasses;
+    this.adapter_.removeClass(OUTLINE_NOTCHED);
+  }
+
   /**
    * Updates the SVG path of the focus outline element based on the notchWidth
    * and the RTL context.
    * @param {number} notchWidth
    * @param {boolean=} isRtl
+   * @private
    */
-  updateSvgPath(notchWidth, isRtl = false) {
+  updateSvgPath_(notchWidth, isRtl) {
     // 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');

packages/mdc-notched-outline/index.js

@@ -35,14 +35,20 @@ class MDCNotchedOutline extends MDCComponent {
   }
 
   /**
-    * Updates the SVG path of the outline element based on the
-    * notch element width and the RTL context.
+    * Updates outline selectors and SVG path to open notch.
     * @param {number} notchWidth The notch width in the outline.
     * @param {boolean=} isRtl Determines if outline is rtl. If rtl is true, notch
     * will be right justified in outline path, otherwise left justified.
     */
-  updateSvgPath(notchWidth, isRtl) {
-    this.foundation_.updateSvgPath(notchWidth, isRtl);
+  notch(notchWidth, isRtl) {
+    this.foundation_.notch(notchWidth, isRtl);
+  }
+
+  /**
+   * Updates the outline selectors to close notch and return it to idle state.
+   */
+  closeNotch() {
+    this.foundation_.closeNotch();
   }
 
   /**
@@ -52,6 +58,8 @@ class MDCNotchedOutline extends MDCComponent {
     return new MDCNotchedOutlineFoundation({
       getWidth: () => this.root_.offsetWidth,
       getHeight: () => this.root_.offsetHeight,
+      addClass: (className) => this.root_.classList.add(className),
+      removeClass: (className) => this.root_.classList.remove(className),
       setOutlinePathAttr: (value) => {
         const path = this.root_.querySelector(strings.PATH_SELECTOR);
         path.setAttribute('d', value);

packages/mdc-notched-outline/mdc-notched-outline.scss

@@ -60,3 +60,11 @@
     mdc-text-field-transition(opacity);
   fill: transparent;
 }
+
+.mdc-notched-outline--notched {
+  opacity: 1;
+}
+
+.mdc-notched-outline--notched ~ .mdc-notched-outline__idle {
+  opacity: 0;
+}

packages/mdc-textfield/README.md

@@ -248,7 +248,8 @@ Method Signature | Description
 `isFocused() => boolean` | Returns whether the input is focused
 `isRtl() => boolean` | Returns whether the direction of the root element is set to RTL
 `hasOutline() => boolean` | Returns whether there is an outline element
-`updateOutlinePath(labelWidth: number, isRtl: boolean) => void` | Updates the outline path to create a notch for the label element
+`notchOutline(labelWidth: number, isRtl: boolean) => void` | Updates the outline path to open the notch and update the notch width for the label element
+`closeOutline() => void` | Closes the notch in the outline element
 
 #### `MDCTextFieldAdapter.getNativeInput()`
 
@@ -273,7 +274,7 @@ Method Signature | Description
 `handleTextFieldInteraction(evt: Event) => void` | Handles click and keydown events originating from inside the Text Field component
 `activateFocus() => void` | Activates the focus state of the Text Field. Normally called in response to the input focus event.
 `deactivateFocus() => void` | Deactivates the focus state of the Text Field. Normally called in response to the input blur event.
-`setHelperTextContent(content: string) => void` | Sets the content of the helper text
-`updateOutline() => void` | Updates the focus outline for outlined text fields
+`setHelperTextContent(content: string) => void` | Sets the content of the helper text.
+`notchOutline(openNotch: boolean) => void` | Opens/closes the notched outline.
 
 `MDCTextFieldFoundation` supports multiple optional sub-elements: helper text and icon. The foundations of these sub-elements must be passed in as constructor arguments to `MDCTextFieldFoundation`.

packages/mdc-textfield/adapter.js

@@ -189,12 +189,18 @@ class MDCTextFieldAdapter {
 
   /**
    * Only implement if outline element exists.
-   * Updates SVG Path on outline element based on the
+   * Updates SVG Path and outline element based on the
    * label element width and RTL context.
    * @param {number} labelWidth
-   * @param {boolean} isRtl
+   * @param {boolean=} isRtl
    */
-  updateOutlinePath(labelWidth, isRtl) {}
+  notchOutline(labelWidth, isRtl) {}
+
+  /**
+   * Only implement if outline element exists.
+   * Closes notch in outline element.
+   */
+  closeOutline() {}
 }
 
 export {MDCTextFieldAdapter, NativeInputType, FoundationMapType};

packages/mdc-textfield/foundation.js

@@ -90,7 +90,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
       hasLabel: () => {},
       getLabelWidth: () => {},
       hasOutline: () => {},
-      updateOutlinePath: () => {},
+      notchOutline: () => {},
+      closeOutline: () => {},
     });
   }
 
@@ -135,6 +136,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     // Ensure label does not collide with any pre-filled value.
     if (this.adapter_.hasLabel() && this.getValue()) {
       this.adapter_.floatLabel(this.shouldFloat);
+      this.notchOutline(this.shouldFloat);
     }
 
     if (this.adapter_.isFocused()) {
@@ -193,18 +195,23 @@ class MDCTextFieldFoundation extends MDCFoundation {
   }
 
   /**
-   * Updates the focus outline for outlined text fields.
+   * Opens/closes the notched outline.
+   * @param {boolean} openNotch
    */
-  updateOutline() {
+  notchOutline(openNotch) {
     if (!this.adapter_.hasOutline() || !this.adapter_.hasLabel()) {
       return;
     }
 
-    const isDense = this.adapter_.hasClass(cssClasses.DENSE);
-    const labelScale = isDense ? numbers.DENSE_LABEL_SCALE : numbers.LABEL_SCALE;
-    const labelWidth = this.adapter_.getLabelWidth() * labelScale;
-    const isRtl = this.adapter_.isRtl();
-    this.adapter_.updateOutlinePath(labelWidth, isRtl);
+    if (openNotch) {
+      const isDense = this.adapter_.hasClass(cssClasses.DENSE);
+      const labelScale = isDense ? numbers.DENSE_LABEL_SCALE : numbers.LABEL_SCALE;
+      const labelWidth = this.adapter_.getLabelWidth() * labelScale;
+      const isRtl = this.adapter_.isRtl();
+      this.adapter_.notchOutline(labelWidth, isRtl);
+    } else {
+      this.adapter_.closeOutline();
+    }
   }
 
   /**
@@ -214,7 +221,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.isFocused_ = true;
     this.styleFocused_(this.isFocused_);
     this.adapter_.activateLineRipple();
-    this.updateOutline();
+    this.notchOutline(this.shouldFloat);
     if (this.adapter_.hasLabel()) {
       this.adapter_.shakeLabel(this.shouldShake);
       this.adapter_.floatLabel(this.shouldFloat);
@@ -260,6 +267,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     if (this.adapter_.hasLabel()) {
       this.adapter_.shakeLabel(this.shouldShake);
       this.adapter_.floatLabel(this.shouldFloat);
+      this.notchOutline(this.shouldFloat);
     }
     if (shouldRemoveLabelFloat) {
       this.receivedUserInput_ = false;
@@ -283,6 +291,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     if (this.adapter_.hasLabel()) {
       this.adapter_.shakeLabel(this.shouldShake);
       this.adapter_.floatLabel(this.shouldFloat);
+      this.notchOutline(this.shouldFloat);
     }
   }
 

packages/mdc-textfield/index.js

@@ -314,7 +314,8 @@ class MDCTextField extends MDCComponent {
    * all dimensions and positions for the ripple element.
    */
   layout() {
-    this.foundation_.updateOutline();
+    const openNotch = this.foundation_.shouldFloat;
+    this.foundation_.notchOutline(openNotch);
     if (this.ripple) {
       this.ripple.layout();
     }
@@ -397,14 +398,15 @@ class MDCTextField extends MDCComponent {
 
   /**
    * @return {!{
+   *   notchOutline: function(number, boolean): undefined,
    *   hasOutline: function(): boolean,
-   *   updateOutlinePath: function(number, boolean): undefined,
    * }}
    */
   getOutlineAdapterMethods_() {
     return {
+      notchOutline: (labelWidth, isRtl) => this.outline_.notch(labelWidth, isRtl),
+      closeOutline: () => this.outline_.closeNotch(),
       hasOutline: () => !!this.outline_,
-      updateOutlinePath: (labelWidth, isRtl) => this.outline_.updateSvgPath(labelWidth, isRtl),
     };
   }
 

packages/mdc-textfield/mdc-text-field.scss

@@ -240,18 +240,6 @@
   @include mdc-text-field-textarea-disabled_;
 }
 
-// Never show the idle outline when the label is floating, otherwise the label
-// will collide with the idle outline.
-.mdc-floating-label--float-above ~ .mdc-notched-outline__idle {
-  opacity: 0;
-}
-
-// Show the outline when the label is floating, since the outline has a
-// notch for the label to fit into.
-.mdc-floating-label--float-above ~ .mdc-notched-outline {
-  opacity: 1;
-}
-
 @include mdc-floating-label-shake-keyframes(text-field-box, $mdc-text-field-box-label-position-y);
 @include mdc-floating-label-shake-keyframes(text-field-box-dense, $mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
 @include mdc-floating-label-shake-keyframes(text-field-outlined, $mdc-text-field-outlined-label-position-y);