chore(text-field): Pass subelement foundations through MDCTextField super constructor

packages/mdc-textfield/README.md

@@ -336,8 +336,8 @@ complicated.
 | 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. The object returned should include the `value`, `disabled` and `badInput` properties, as well as the `checkValidity()` function. We _never_ alter the value within our code, however we _do_ update the disabled property, so if you choose to duck-type the return value for this method in your implementation it's important to keep this in mind. Also note that this method can return null, which the foundation will handle gracefully. |
-| getBottomLineFoundation() => MDCTextFieldBottomLineFoundation | Returns the instance of the bottom line element's foundation |
-| getHelperTextFoundation() => MDCTextFieldHelperTextFoundation | Returns the instance of the helper text element's foundation |
+
+MDC TextField has multiple optional sub-elements: bottom line and helper text. The foundations of these sub-elements must be passed in as constructor arguments for the MDC TextField foundation. Since the MDCTextField component takes care of creating its foundation, we need to pass sub-element foundations through the MDCTextField component. This is typically done in the component's implementation of `getDefaultFoundation()`.
 
 #### The full foundation API
 

packages/mdc-textfield/adapter.js

@@ -15,10 +15,6 @@
  * limitations under the License.
  */
 
-/* eslint-disable no-unused-vars */
-import MDCTextFieldBottomLineFoundation from './bottom-line/foundation';
-import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
-
 /* eslint no-unused-vars: [2, {"args": "none"}] */
 
 /**
@@ -142,20 +138,6 @@ class MDCTextFieldAdapter {
    * @return {?Element|?NativeInputType}
    */
   getNativeInput() {}
-
-  /**
-   * Returns the foundation for the bottom line element. Returns undefined if
-   * there is no bottom line element.
-   * @return {?MDCTextFieldBottomLineFoundation}
-   */
-  getBottomLineFoundation() {}
-
-  /**
-   * Returns the foundation for the helper text element. Returns undefined if
-   * there is no helper text element.
-   * @return {?MDCTextFieldHelperTextFoundation}
-   */
-  getHelperTextFoundation() {}
 }
 
 export {MDCTextFieldAdapter, NativeInputType};

packages/mdc-textfield/bottom-line/index.js

@@ -34,7 +34,7 @@ class MDCTextFieldBottomLine extends MDCComponent {
   }
 
   /**
-   * @return {MDCTextFieldBottomLineFoundation}
+   * @return {!MDCTextFieldBottomLineFoundation}
    */
   get foundation() {
     return this.foundation_;

packages/mdc-textfield/foundation.js

@@ -15,9 +15,11 @@
  * limitations under the License.
  */
 
+/* eslint-disable no-unused-vars */
 import MDCFoundation from '@material/base/foundation';
 import {MDCTextFieldAdapter, NativeInputType} from './adapter';
 import MDCTextFieldBottomLineFoundation from './bottom-line/foundation';
+import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
 import {cssClasses, strings} from './constants';
 
 
@@ -57,17 +59,23 @@ class MDCTextFieldFoundation extends MDCFoundation {
       registerBottomLineEventHandler: () => {},
       deregisterBottomLineEventHandler: () => {},
       getNativeInput: () => {},
-      getBottomLineFoundation: () => {},
-      getHelperTextFoundation: () => {},
     });
   }
 
   /**
    * @param {!MDCTextFieldAdapter=} adapter
+   * @param {!MDCTextFieldBottomLineFoundation=} bottomLineFoundation
+   * @param {!MDCTextFieldHelperTextFoundation=} helperTextFoundation
    */
-  constructor(adapter = /** @type {!MDCTextFieldAdapter} */ ({})) {
+  constructor(adapter = /** @type {!MDCTextFieldAdapter} */ ({}),
+    bottomLineFoundation, helperTextFoundation) {
     super(Object.assign(MDCTextFieldFoundation.defaultAdapter, adapter));
 
+    /** @type {!MDCTextFieldBottomLineFoundation|undefined} */
+    this.bottomLine_ = bottomLineFoundation;
+    /** @type {!MDCTextFieldHelperTextFoundation|undefined} */
+    this.helperText_ = helperTextFoundation;
+
     /** @private {boolean} */
     this.isFocused_ = false;
     /** @private {boolean} */
@@ -150,15 +158,13 @@ class MDCTextFieldFoundation extends MDCFoundation {
   activateFocus() {
     const {FOCUSED, LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextFieldFoundation.cssClasses;
     this.adapter_.addClass(FOCUSED);
-    const bottomLine = this.adapter_.getBottomLineFoundation();
-    if (bottomLine) {
-      bottomLine.activate();
+    if (this.bottomLine_) {
+      this.bottomLine_.activate();
     }
     this.adapter_.addClassToLabel(LABEL_FLOAT_ABOVE);
     this.adapter_.removeClassFromLabel(LABEL_SHAKE);
-    const helperText = this.adapter_.getHelperTextFoundation();
-    if (helperText) {
-      helperText.showToScreenReader();
+    if (this.helperText_) {
+      this.helperText_.showToScreenReader();
     }
     this.isFocused_ = true;
   }
@@ -169,9 +175,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
    * @param {!Event} evt
    */
   setBottomLineTransformOrigin(evt) {
-    const bottomLine = this.adapter_.getBottomLineFoundation();
-    if (bottomLine) {
-      bottomLine.setTransformOrigin(evt);
+    if (this.bottomLine_) {
+      this.bottomLine_.setTransformOrigin(evt);
     }
   }
 
@@ -190,12 +195,11 @@ class MDCTextFieldFoundation extends MDCFoundation {
    * for animations to finish.
    */
   handleBottomLineAnimationEnd() {
-    const bottomLine = this.adapter_.getBottomLineFoundation();
     // We need to wait for the bottom line to be entirely transparent
     // before removing the class. If we do not, we see the line start to
     // scale down before disappearing
-    if (!this.isFocused_ && bottomLine) {
-      bottomLine.deactivate();
+    if (!this.isFocused_ && this.bottomLine_) {
+      this.bottomLine_.deactivate();
     }
   }
 
@@ -233,9 +237,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
       this.adapter_.addClassToLabel(LABEL_SHAKE);
       this.adapter_.addClass(INVALID);
     }
-    const helperText = this.adapter_.getHelperTextFoundation();
-    if (helperText) {
-      helperText.setValidity(isValid);
+    if (this.helperText_) {
+      this.helperText_.setValidity(isValid);
     }
   }
 
@@ -275,9 +278,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
    * @param {string} content Sets the content of the helper text.
    */
   setHelperTextContent(content) {
-    const helperText = this.adapter_.getHelperTextFoundation();
-    if (helperText) {
-      helperText.setContent(content);
+    if (this.helperText_) {
+      this.helperText_.setContent(content);
     }
   }
 

packages/mdc-textfield/helper-text/index.js

@@ -34,7 +34,7 @@ class MDCTextFieldHelperText extends MDCComponent {
   }
 
   /**
-   * @return {MDCTextFieldHelperTextFoundation}
+   * @return {!MDCTextFieldHelperTextFoundation}
    */
   get foundation() {
     return this.foundation_;

packages/mdc-textfield/index.js

@@ -18,11 +18,12 @@
 import MDCComponent from '@material/base/component';
 import {MDCRipple} from '@material/ripple';
 
+/* eslint-disable no-unused-vars */
 import {cssClasses, strings} from './constants';
 import {MDCTextFieldAdapter} from './adapter';
 import MDCTextFieldFoundation from './foundation';
-import {MDCTextFieldBottomLine} from './bottom-line';
-import {MDCTextFieldHelperText} from './helper-text';
+import {MDCTextFieldBottomLine, MDCTextFieldBottomLineFoundation} from './bottom-line';
+import {MDCTextFieldHelperText, MDCTextFieldHelperTextFoundation} from './helper-text';
 
 /**
  * @extends {MDCComponent<!MDCTextFieldFoundation>}
@@ -142,50 +143,41 @@ class MDCTextField extends MDCComponent {
    * @return {!MDCTextFieldFoundation}
    */
   getDefaultFoundation() {
-    return new MDCTextFieldFoundation(/** @type {!MDCTextFieldAdapter} */ (Object.assign({
-      addClass: (className) => this.root_.classList.add(className),
-      removeClass: (className) => this.root_.classList.remove(className),
-      addClassToLabel: (className) => {
-        const label = this.label_;
-        if (label) {
-          label.classList.add(className);
-        }
-      },
-      removeClassFromLabel: (className) => {
-        const label = this.label_;
-        if (label) {
-          label.classList.remove(className);
-        }
-      },
-      eventTargetHasClass: (target, className) => target.classList.contains(className),
-      registerTextFieldInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
-      deregisterTextFieldInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
-      notifyIconAction: () => this.emit(MDCTextFieldFoundation.strings.ICON_EVENT, {}),
-      registerBottomLineEventHandler: (evtType, handler) => {
-        if (this.bottomLine_) {
-          this.bottomLine_.listen(evtType, handler);
-        }
-      },
-      deregisterBottomLineEventHandler: (evtType, handler) => {
-        if (this.bottomLine_) {
-          this.bottomLine_.unlisten(evtType, handler);
-        }
-      },
-      getBottomLineFoundation: () => {
-        if (this.bottomLine_) {
-          return this.bottomLine_.foundation;
-        }
-        return undefined;
+    return new MDCTextFieldFoundation(
+      /** @type {!MDCTextFieldAdapter} */ (Object.assign({
+        addClass: (className) => this.root_.classList.add(className),
+        removeClass: (className) => this.root_.classList.remove(className),
+        addClassToLabel: (className) => {
+          const label = this.label_;
+          if (label) {
+            label.classList.add(className);
+          }
+        },
+        removeClassFromLabel: (className) => {
+          const label = this.label_;
+          if (label) {
+            label.classList.remove(className);
+          }
+        },
+        eventTargetHasClass: (target, className) => target.classList.contains(className),
+        registerTextFieldInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
+        deregisterTextFieldInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
+        notifyIconAction: () => this.emit(MDCTextFieldFoundation.strings.ICON_EVENT, {}),
+        registerBottomLineEventHandler: (evtType, handler) => {
+          if (this.bottomLine_) {
+            this.bottomLine_.listen(evtType, handler);
+          }
+        },
+        deregisterBottomLineEventHandler: (evtType, handler) => {
+          if (this.bottomLine_) {
+            this.bottomLine_.unlisten(evtType, handler);
+          }
+        },
       },
-      getHelperTextFoundation: () => {
-        if (this.helperText_) {
-          return this.helperText_.foundation;
-        }
-        return undefined;
-      },
-    },
-    this.getInputAdapterMethods_(),
-    this.getIconAdapterMethods_())));
+      this.getInputAdapterMethods_(),
+      this.getIconAdapterMethods_())),
+      this.getBottomLineFoundation_(),
+      this.getHelperTextFoundation_());
   }
 
   /**
@@ -217,6 +209,30 @@ class MDCTextField extends MDCComponent {
       getNativeInput: () => this.input_,
     };
   }
+
+  /**
+   * Returns the foundation for the bottom line element. Returns undefined if
+   * there is no bottom line element.
+   * @return {!MDCTextFieldBottomLineFoundation|undefined}
+   */
+  getBottomLineFoundation_() {
+    if (this.bottomLine_) {
+      return this.bottomLine_.foundation;
+    }
+    return undefined;
+  }
+
+  /**
+   * Returns the foundation for the helper text element. Returns undefined if
+   * there is no helper text element.
+   * @return {!MDCTextFieldHelperTextFoundation|undefined}
+   */
+  getHelperTextFoundation_() {
+    if (this.helperText_) {
+      return this.helperText_.foundation;
+    }
+    return undefined;
+  }
 }
 
 export {MDCTextField, MDCTextFieldFoundation};