refactor(notched-outline): remove text-field notched outline styles and coupling

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 activate 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,6 +83,7 @@ Mixin | Description
 
 Method Signature | Description
 --- | ---
+`notch(activateNotch: boolean)` | Updates outline to activate/deactivate notch in outline path.
 `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.
 
 ### `MDCNotchedOutlineAdapter`
@@ -90,14 +92,14 @@ 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
 --- | ---
+`notch(activateNotch: boolean)` | Adds remove the outline notched selector if activateNotch is true. Updates the component to activate/deactivate notched outline.
 `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)

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,31 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
     super(Object.assign(MDCNotchedOutlineFoundation.defaultAdapter, adapter));
   }
 
+  /**
+   * Adds the outline notched selector and updates the notch width
+   * if activateNotch is true, otherwise it will remove notched
+   * selector.
+   * @param {number} notchWidth
+   * @param {boolean=} isRtl
+   */
+  notch(notchWidth, isRtl = false) {
+    const {OUTLINE_NOTCHED} = MDCNotchedOutlineFoundation.cssClasses;
+    if (notchWidth > 0) {
+      this.adapter_.addClass(OUTLINE_NOTCHED);
+      this.updateSvgPath_(notchWidth, isRtl);
+    } else {
+      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,14 @@ class MDCNotchedOutline extends MDCComponent {
   }
 
   /**
-    * Updates the SVG path of the outline element based on the
-    * notch element width and the RTL context.
-    * @param {number} notchWidth The notch width in the outline.
+    * Updates outline selectors and SVG path to activate/deactivate notch.
+    * @param {number} notchWidth The notch width in the outline. If set to 0,
+    * the component will return to the idle state.
     * @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);
   }
 
   /**
@@ -52,6 +52,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

@@ -65,3 +65,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,7 @@ 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 create a notch for the label element
 
 #### `MDCTextFieldAdapter.getNativeInput()`
 
@@ -274,6 +274,6 @@ Method Signature | Description
 `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
+`notchOutline(activateNotch: boolean) => void` | Activates/deactivates 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,14 @@ class MDCTextFieldAdapter {
 
   /**
    * Only implement if outline element exists.
-   * Updates SVG Path on outline element based on the
-   * label element width and RTL context.
+   * Updates SVG Path and outline element based on the
+   * label element width and RTL context. Will notch the
+   * element if labelWidth is greater than 0, otherwise
+   * will return to idle state.
    * @param {number} labelWidth
-   * @param {boolean} isRtl
+   * @param {boolean=} isRtl
    */
-  updateOutlinePath(labelWidth, isRtl) {}
+  notchOutline(labelWidth, isRtl) {}
 }
 
 export {MDCTextFieldAdapter, NativeInputType, FoundationMapType};

packages/mdc-textfield/foundation.js

@@ -90,7 +90,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
       hasLabel: () => {},
       getLabelWidth: () => {},
       hasOutline: () => {},
-      updateOutlinePath: () => {},
+      notchOutline: () => {},
     });
   }
 
@@ -135,6 +135,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,9 +194,10 @@ class MDCTextFieldFoundation extends MDCFoundation {
   }
 
   /**
-   * Updates the focus outline for outlined text fields.
+   * Activates/deactivates the notched outline.
+   * @param {boolean} activateNotch
    */
-  updateOutline() {
+  notchOutline(activateNotch) {
     if (!this.adapter_.hasOutline() || !this.adapter_.hasLabel()) {
       return;
     }
@@ -204,7 +206,11 @@ class MDCTextFieldFoundation extends MDCFoundation {
     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 (activateNotch) {
+      this.adapter_.notchOutline(labelWidth, isRtl);
+    } else {
+      this.adapter_.notchOutline(0);
+    }
   }
 
   /**
@@ -214,7 +220,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 +266,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 +290,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

@@ -318,7 +318,8 @@ class MDCTextField extends MDCComponent {
    * all dimensions and positions for the ripple element.
    */
   layout() {
-    this.foundation_.updateOutline();
+    const activateNotch = this.foundation_.shouldFloat;
+    this.foundation_.notchOutline(activateNotch);
     if (this.ripple) {
       this.ripple.layout();
     }
@@ -401,14 +402,14 @@ 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),
       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);

test/unit/mdc-notched-outline/foundation.test.js

@@ -21,24 +21,56 @@ import {verifyDefaultAdapter} from '../helpers/foundation';
 import {setupFoundationTest} from '../helpers/setup';
 import MDCNotchedOutlineFoundation from '../../../packages/mdc-notched-outline/foundation';
 
+const {cssClasses, strings} = MDCNotchedOutlineFoundation;
+
 suite('MDCNotchedOutlineFoundation');
 
+
+test('exports cssClasses', () => {
+  assert.deepEqual(MDCNotchedOutlineFoundation.cssClasses, cssClasses);
+});
+
 test('exports strings', () => {
-  assert.isOk('strings' in MDCNotchedOutlineFoundation);
+  assert.deepEqual(MDCNotchedOutlineFoundation.strings, strings);
 });
 
 test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCNotchedOutlineFoundation, [
-    'getWidth', 'getHeight', 'setOutlinePathAttr', 'getIdleOutlineStyleValue',
+    'addClass', 'removeClass', 'getWidth', 'getHeight',
+    'setOutlinePathAttr', 'getIdleOutlineStyleValue',
   ]);
 });
 
 const setupTest = () => setupFoundationTest(MDCNotchedOutlineFoundation);
 
-test('#updateSvgPath sets the path of the outline element', () => {
+test('#notch sets the path of the outline element if notchWidth > 0', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const notchWidth = 30;
+  foundation.notch(notchWidth);
+  td.verify(mockAdapter.addClass(MDCNotchedOutlineFoundation.cssClasses.OUTLINE_NOTCHED));
+  td.verify(mockAdapter.setOutlinePathAttr(td.matchers.anything()));
+});
+
+test('#notch sets the path of the outline element if notchWidth <= 0', () => {
   const {foundation, mockAdapter} = setupTest();
-  const labelWidth = 30;
+  const notchWidth = 0;
+  foundation.notch(notchWidth);
+  td.verify(mockAdapter.removeClass(MDCNotchedOutlineFoundation.cssClasses.OUTLINE_NOTCHED));
+  td.verify(mockAdapter.setOutlinePathAttr(td.matchers.anything()), {times: 0});
+});
+
+test('#updateSvgPath_ sets the path of the outline element', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const notchWidth = 30;
   const isRtl = true;
-  foundation.updateSvgPath(labelWidth, isRtl);
+  foundation.updateSvgPath_(notchWidth, isRtl);
+  td.verify(mockAdapter.setOutlinePathAttr(td.matchers.anything()));
+});
+
+test('#updateSvgPath_ sets the path of the outline element if not isRtl', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const notchWidth = 30;
+  const isRtl = false;
+  foundation.updateSvgPath_(notchWidth, isRtl);
   td.verify(mockAdapter.setOutlinePathAttr(td.matchers.anything()));
 });