feat(text-field): Expand the helper text foundation (#1955)

* Fill out helper text foundation with setPersistent and setValidation. * Remove dead code from demo
material-components · Jan 16, 2018 · 468942b · 468942b
1 parent 2c92827
commit 468942b
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 1 deletion.
diff --git a/demos/text-field.html b/demos/text-field.html
@@ -595,7 +595,6 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
         document.getElementById('use-helper-text').addEventListener('change', function(evt) {
           var target = evt.target;
-          tf.helperTextElement = target.checked ? helperText : null;
           helperText.style.display = target.checked ? 'block' : 'none';
           document.getElementById('persistent-helper-text').disabled = !target.checked;
           document.getElementById('helper-text-as-validation').disabled = !target.checked;

diff --git a/packages/mdc-textfield/helper-text/README.md b/packages/mdc-textfield/helper-text/README.md
@@ -95,5 +95,7 @@ Method Signature | Description
 Method Signature | Description
 --- | ---
 `setContent(content: string) => void` | Sets the content of the helper text
+`setPersistent(isPersistent: boolean) => void` | Sets the helper text as persistent
+`setValidation(isValidation: boolean) => void` | Sets the helper text as a validation message
 `showToScreenReader() => void` | Makes the helper text visible to the screen reader
 `setValidity(inputIsValid: boolean) => void` | Sets the validity of the helper text based on the input validity
diff --git a/packages/mdc-textfield/helper-text/foundation.js b/packages/mdc-textfield/helper-text/foundation.js
@@ -66,6 +66,27 @@ class MDCTextFieldHelperTextFoundation extends MDCFoundation {
     this.adapter_.setContent(content);
   }
 
+  /** @param {boolean} isPersistent Sets the persistency of the helper text. */
+  setPersistent(isPersistent) {
+    if (isPersistent) {
+      this.adapter_.addClass(cssClasses.HELPER_TEXT_PERSISTENT);
+    } else {
+      this.adapter_.removeClass(cssClasses.HELPER_TEXT_PERSISTENT);
+    }
+  }
+
+  /**
+   * @param {boolean} isValidation True to make the helper text act as an
+   *   error validation message.
+   */
+  setValidation(isValidation) {
+    if (isValidation) {
+      this.adapter_.addClass(cssClasses.HELPER_TEXT_VALIDATION_MSG);
+    } else {
+      this.adapter_.removeClass(cssClasses.HELPER_TEXT_VALIDATION_MSG);
+    }
+  }
+
   /** Makes the helper text visible to the screen reader. */
   showToScreenReader() {
     this.adapter_.removeAttr(strings.ARIA_HIDDEN);

diff --git a/test/unit/mdc-textfield/mdc-text-field-helper-text-foundation.test.js b/test/unit/mdc-textfield/mdc-text-field-helper-text-foundation.test.js
@@ -47,6 +47,22 @@ test('#setContent sets the content of the helper text element', () => {
   td.verify(mockAdapter.setContent('foo'));
 });
 
+test('#setPersistent toggles the persistent class', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.setPersistent(true);
+  td.verify(mockAdapter.addClass(cssClasses.HELPER_TEXT_PERSISTENT));
+  foundation.setPersistent(false);
+  td.verify(mockAdapter.removeClass(cssClasses.HELPER_TEXT_PERSISTENT));
+});
+
+test('#setValidation toggles the validation class', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.setValidation(true);
+  td.verify(mockAdapter.addClass(cssClasses.HELPER_TEXT_VALIDATION_MSG));
+  foundation.setValidation(false);
+  td.verify(mockAdapter.removeClass(cssClasses.HELPER_TEXT_VALIDATION_MSG));
+});
+
 test('#showToScreenReader removes aria-hidden from helperText', () => {
   const {foundation, mockAdapter} = setupTest();
   foundation.showToScreenReader();