From 34d1fb1246cc54e917e973a395af54fd084d4c28 Mon Sep 17 00:00:00 2001 From: Brendan O'Brien Date: Fri, 12 Jan 2018 15:01:36 -0800 Subject: [PATCH 1/2] Fill out helper text foundation. --- packages/mdc-textfield/helper-text/README.md | 2 ++ .../mdc-textfield/helper-text/foundation.js | 21 +++++++++++++++++++ ...-text-field-helper-text-foundation.test.js | 16 ++++++++++++++ 3 files changed, 39 insertions(+) diff --git a/packages/mdc-textfield/helper-text/README.md b/packages/mdc-textfield/helper-text/README.md index caab7bbb93f..ed0de05dbba 100644 --- 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 index a683fe00b0b..93448ee9934 100644 --- 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 index d2e53d299af..8d1883742ed 100644 --- 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(); From 3fa960c16fd31bc02b6f83edd6f7f0dd53ad47e3 Mon Sep 17 00:00:00 2001 From: Brendan O'Brien Date: Fri, 12 Jan 2018 15:20:40 -0800 Subject: [PATCH 2/2] Remove dead code from demo --- demos/text-field.html | 1 - 1 file changed, 1 deletion(-) diff --git a/demos/text-field.html b/demos/text-field.html index 64c509d7803..757d8cfd233 100644 --- a/demos/text-field.html +++ b/demos/text-field.html @@ -597,7 +597,6 @@

Full-Width Text Field and Textarea

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