From e240d7a85dc330d3b2c1340c529217d2edde644a Mon Sep 17 00:00:00 2001 From: Bonnie Zhou Date: Fri, 10 Nov 2017 10:20:52 -0800 Subject: [PATCH 1/2] feat(textfield): rename helptext to helper text --- CHANGELOG.md | 2 +- demos/text-field.html | 48 +++++----- demos/theme/index.html | 14 +-- packages/mdc-textfield/README.md | 52 +++++------ packages/mdc-textfield/adapter.js | 22 ++--- packages/mdc-textfield/constants.js | 4 +- packages/mdc-textfield/foundation.js | 46 +++++----- packages/mdc-textfield/index.js | 50 +++++------ packages/mdc-textfield/mdc-text-field.scss | 14 +-- test/unit/mdc-textfield/foundation.test.js | 38 ++++---- .../unit/mdc-textfield/mdc-text-field.test.js | 90 +++++++++---------- 11 files changed, 190 insertions(+), 190 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3170abe0adf..5d0b76916ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -202,7 +202,7 @@ * **button:** Restore order of disabled styles (#1176) ([6ffed49](https://github.com/material-components/material-components-web/commit/6ffed49)) * **demos:** Fix button demo update from #1176 to work in IE 11 (#1178) ([dadc597](https://github.com/material-components/material-components-web/commit/dadc597)), closes [#1176](https://github.com/material-components/material-components-web/issues/1176) [#1178](https://github.com/material-components/material-components-web/issues/1178) * **ripple:** Correct unbounded ripple diameter (#1098) ([0f1ca35](https://github.com/material-components/material-components-web/commit/0f1ca35)), closes [#1067](https://github.com/material-components/material-components-web/issues/1067) -* **textfield:** Add left and right margin to helptext ([3a24bca](https://github.com/material-components/material-components-web/commit/3a24bca)) +* **textfield:** Add left and right margin to helperText ([3a24bca](https://github.com/material-components/material-components-web/commit/3a24bca)) diff --git a/demos/text-field.html b/demos/text-field.html index d7d531d7b77..6964a25c8e4 100644 --- a/demos/text-field.html +++ b/demos/text-field.html @@ -74,7 +74,7 @@
- +
@@ -90,13 +90,13 @@

Full Functionality JS Component (Floating Label, Validation)

- +
-
@@ -120,16 +120,16 @@

Full Functionality JS Component (Floating Label, Validation)

- - + +
- - + +
- -
@@ -143,7 +143,7 @@

Password field with validation

-

Must be at least 8 characters long

@@ -157,7 +157,7 @@

Text Field box

-

Must be at least 8 characters

@@ -425,7 +425,7 @@

Full-Width Text Field and Textarea

(function() { var section = document.getElementById('demo-text-field-wrapper'); var tfRoot = section.querySelector('.mdc-text-field'); - var helptext = section.querySelector('.mdc-text-field-helptext'); + var helperText = section.querySelector('.mdc-text-field-helper-text'); var tf = new mdc.textField.MDCTextField(tfRoot); document.getElementById('disable').addEventListener('change', function(evt) { @@ -452,23 +452,23 @@

Full-Width Text Field and Textarea

var target = evt.target; tfRoot.querySelector('.mdc-text-field__input').required = target.checked; }); - document.getElementById('use-helptext').addEventListener('change', function(evt) { + document.getElementById('use-helper-text').addEventListener('change', function(evt) { var target = evt.target; - tf.helptextElement = target.checked ? helptext : null; - helptext.style.display = target.checked ? 'block' : 'none'; - document.getElementById('persistent-help-text').disabled = !target.checked; - document.getElementById('helptext-as-validation').disabled = !target.checked; + 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; }); - document.getElementById('persistent-help-text').addEventListener('change', function(evt) { + document.getElementById('persistent-helper-text').addEventListener('change', function(evt) { var target = evt.target; - helptext.classList[target.checked ? 'add' : 'remove']( - 'mdc-text-field-helptext--persistent' + helperText.classList[target.checked ? 'add' : 'remove']( + 'mdc-text-field-helper-text--persistent' ); }); - document.getElementById('helptext-as-validation').addEventListener('change', function(evt) { + document.getElementById('helper-text-as-validation').addEventListener('change', function(evt) { var target = evt.target; - helptext.classList[target.checked ? 'add' : 'remove']( - 'mdc-text-field-helptext--validation-msg' + helperText.classList[target.checked ? 'add' : 'remove']( + 'mdc-text-field-helper-text--validation-msg' ); }); })(); diff --git a/demos/theme/index.html b/demos/theme/index.html index 539acefeb23..ad315f85cbe 100644 --- a/demos/theme/index.html +++ b/demos/theme/index.html @@ -780,25 +780,25 @@

-
-

+

Must provide a name

@@ -809,9 +809,9 @@

-

diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md index 8cbf8309b0d..0c6af7c9527 100644 --- a/packages/mdc-textfield/README.md +++ b/packages/mdc-textfield/README.md @@ -100,29 +100,29 @@ since it won't be added until that JS runs, adding it manually will prevent an i ``` -### Using help text +### Using helper text -MDC Text Fields can include help text that is useful for providing supplemental +MDC Text Fields can include helper text that is useful for providing supplemental information to users, as well for validation messages (covered below). ```html
- +
- ``` -Help text appears on input field focus and disappears on input field blur by default when using +Helper text appears on input field focus and disappears on input field blur by default when using the text-field JS component. -#### Persistent help text +#### Persistent helper text -If you'd like the help text to always be visible, add the -`mdc-text-field-helptext--persistent` modifier class to the element. +If you'd like the helper text to always be visible, add the +`mdc-text-field-helper-text--persistent` modifier class to the element. ```html
@@ -130,17 +130,17 @@ If you'd like the help text to always be visible, add the
-

+

We will never share your email address with third parties

``` -#### Help text and accessibility +#### Helper text and accessibility -Note that in every example where the help text is dependent on the state of the input element, we -assign an id to the `mdc-text-field-helptext` element and set that id to the value of the +Note that in every example where the helper text is dependent on the state of the input element, we +assign an id to the `mdc-text-field-helper-text` element and set that id to the value of the `aria-controls` attribute on the input element. We recommend doing this as well as it will help -indicate to assistive devices that the display of the help text is dependent on the interaction with +indicate to assistive devices that the display of the helper text is dependent on the interaction with the input element. When using our vanilla JS component, if it sees that the input element has an `aria-controls` @@ -165,9 +165,9 @@ By default an input's validity is checked via `checkValidity()` on blur, and the accordingly. Set the MDCTextField.valid variable to set the input's validity explicitly. MDC TextField automatically appends an asterisk to the label text if the required attribute is set. -Help text can be used to provide additional validation messages. Use -`mdc-text-field-helptext--validation-msg` to provide styles for using the help text as a validation -message. This can be easily combined with `mdc-text-field-helptext--persistent` to provide a robust +Helper text can be used to provide additional validation messages. Use +`mdc-text-field-helper-text--validation-msg` to provide styles for using the helper text as a validation +message. This can be easily combined with `mdc-text-field-helper-text--persistent` to provide a robust UX for client-side form field validation. ```html @@ -177,9 +177,9 @@ UX for client-side form field validation.
-

Must be at least 8 characters long

@@ -366,10 +366,10 @@ By default the ripple factory simply calls `new MDCRipple(el)` and returns the r Similar to regular DOM elements, the `MDCTextField` functionality is exposed through accessor methods. -##### MDCTextField.helptextElement +##### MDCTextField.helperTextElement HTMLLabelElement. This is a normal property (non-accessor) that holds a reference to the element -being used as the text field's "help text". It defaults to `null`. If the text field's input element +being used as the text field's "helper text". It defaults to `null`. If the text field's input element contains an `aria-controls` attribute on instantiation of the component, it will look for an element with the corresponding id within the document and automatically assign it to this property. @@ -404,16 +404,16 @@ complicated. | notifyIconAction() => void | Emits a custom event "MDCTextField:icon" denoting a user has clicked the icon | | addClassToBottomLine(className: string) => void | Adds a class to the bottom line element | | removeClassFromBottomLine(className: string) => void | Removes a class from the bottom line element | -| addClassToHelptext(className: string) => void | Adds a class to the help text element. Note that in our code we check for whether or not we have a help text element and if we don't, we simply return. | -| removeClassFromHelptext(className: string) => void | Removes a class from the help text element. | -| helptextHasClass(className: string) => boolean | Returns whether or not the help text element contains the current class | +| addClassToHelperText(className: string) => void | Adds a class to the helper text element. Note that in our code we check for whether or not we have a helper text element and if we don't, we simply return. | +| removeClassFromHelperText(className: string) => void | Removes a class from the helper text element. | +| helperTextHasClass(className: string) => boolean | Returns whether or not the helper text element contains the current class | | registerInputInteractionHandler(evtType: string, handler: EventListener) => void | Registers an event listener on the native input element for a given event | | deregisterInputInteractionHandler(evtType: string, handler: EventListener) => void | Deregisters an event listener on the native input element for a given event | | registerTransitionEndHandler(handler: EventListener) => void | Registers an event listener on the bottom line element for a "transitionend" event | | deregisterTransitionEndHandler(handler: EventListener) => void | Deregisters an event listener on the bottom line element for a "transitionend" event | | setBottomLineAttr(attr: string, value: string) => void | Sets an attribute with a given value on the bottom line element | -| setHelptextAttr(name: string, value: string) => void | Sets an attribute with a given value on the help text element | -| removeHelptextAttr(name: string) => void | Removes an attribute from the help text element | +| setHelperTextAttr(name: string, value: string) => void | Sets an attribute with a given value on the helper text element | +| removeHelperTextAttr(name: string) => void | Removes an attribute from the helper text element | | 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. | #### The full foundation API diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js index 6fdb3b1152a..467c234a705 100644 --- a/packages/mdc-textfield/adapter.js +++ b/packages/mdc-textfield/adapter.js @@ -112,25 +112,25 @@ class MDCTextFieldAdapter { removeClassFromBottomLine(className) {} /** - * Adds a class to the help text element. Note that in our code we check for - * whether or not we have a help text element and if we don't, we simply + * Adds a class to the helper text element. Note that in our code we check for + * whether or not we have a helper text element and if we don't, we simply * return. * @param {string} className */ - addClassToHelptext(className) {} + addClassToHelperText(className) {} /** - * Removes a class from the help text element. + * Removes a class from the helper text element. * @param {string} className */ - removeClassFromHelptext(className) {} + removeClassFromHelperText(className) {} /** - * Returns whether or not the help text element contains the given class. + * Returns whether or not the helper text element contains the given class. * @param {string} className * @return {boolean} */ - helptextHasClass(className) {} + helperTextHasClass(className) {} /** * Registers an event listener on the native input element for a given event. @@ -166,17 +166,17 @@ class MDCTextFieldAdapter { setBottomLineAttr(attr, value) {} /** - * Sets an attribute with a given value on the help text element. + * Sets an attribute with a given value on the helper text element. * @param {string} name * @param {string} value */ - setHelptextAttr(name, value) {} + setHelperTextAttr(name, value) {} /** - * Removes an attribute from the help text element. + * Removes an attribute from the helper text element. * @param {string} name */ - removeHelptextAttr(name) {} + removeHelperTextAttr(name) {} /** * Returns an object representing the native text input element, with a diff --git a/packages/mdc-textfield/constants.js b/packages/mdc-textfield/constants.js index ef267eab0e2..8a6643ff72a 100644 --- a/packages/mdc-textfield/constants.js +++ b/packages/mdc-textfield/constants.js @@ -33,8 +33,8 @@ const cssClasses = { DISABLED: 'mdc-text-field--disabled', FOCUSED: 'mdc-text-field--focused', INVALID: 'mdc-text-field--invalid', - HELPTEXT_PERSISTENT: 'mdc-text-field-helptext--persistent', - HELPTEXT_VALIDATION_MSG: 'mdc-text-field-helptext--validation-msg', + HELPER_TEXT_PERSISTENT: 'mdc-text-field-helper-text--persistent', + HELPER_TEXT_VALIDATION_MSG: 'mdc-text-field-helper-text--validation-msg', LABEL_FLOAT_ABOVE: 'mdc-text-field__label--float-above', LABEL_SHAKE: 'mdc-text-field__label--shake', BOX: 'mdc-text-field--box', diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js index 8748db75908..8e83e23036d 100644 --- a/packages/mdc-textfield/foundation.js +++ b/packages/mdc-textfield/foundation.js @@ -53,16 +53,16 @@ class MDCTextFieldFoundation extends MDCFoundation { notifyIconAction: () => {}, addClassToBottomLine: () => {}, removeClassFromBottomLine: () => {}, - addClassToHelptext: () => {}, - removeClassFromHelptext: () => {}, - helptextHasClass: () => false, + addClassToHelperText: () => {}, + removeClassFromHelperText: () => {}, + helperTextHasClass: () => false, registerInputInteractionHandler: () => {}, deregisterInputInteractionHandler: () => {}, registerTransitionEndHandler: () => {}, deregisterTransitionEndHandler: () => {}, setBottomLineAttr: () => {}, - setHelptextAttr: () => {}, - removeHelptextAttr: () => {}, + setHelperTextAttr: () => {}, + removeHelperTextAttr: () => {}, getNativeInput: () => {}, }); } @@ -156,7 +156,7 @@ class MDCTextFieldFoundation extends MDCFoundation { this.adapter_.addClassToBottomLine(BOTTOM_LINE_ACTIVE); this.adapter_.addClassToLabel(LABEL_FLOAT_ABOVE); this.adapter_.removeClassFromLabel(LABEL_SHAKE); - this.showHelptext_(); + this.showHelperText_(); this.isFocused_ = true; } @@ -185,12 +185,12 @@ class MDCTextFieldFoundation extends MDCFoundation { } /** - * Makes the help text visible to screen readers. + * Makes the helper text visible to screen readers. * @private */ - showHelptext_() { + showHelperText_() { const {ARIA_HIDDEN} = MDCTextFieldFoundation.strings; - this.adapter_.removeHelptextAttr(ARIA_HIDDEN); + this.adapter_.removeHelperTextAttr(ARIA_HIDDEN); } /** @@ -243,40 +243,40 @@ class MDCTextFieldFoundation extends MDCFoundation { this.adapter_.addClassToLabel(LABEL_SHAKE); this.adapter_.addClass(INVALID); } - this.updateHelptext_(isValid); + this.updateHelperText_(isValid); } /** - * Updates the state of the Text Field's help text based on validity and + * Updates the state of the Text Field's helper text based on validity and * the Text Field's options. * @param {boolean} isValid */ - updateHelptext_(isValid) { - const {HELPTEXT_PERSISTENT, HELPTEXT_VALIDATION_MSG} = MDCTextFieldFoundation.cssClasses; + updateHelperText_(isValid) { + const {HELPER_TEXT_PERSISTENT, HELPER_TEXT_VALIDATION_MSG} = MDCTextFieldFoundation.cssClasses; const {ROLE} = MDCTextFieldFoundation.strings; - const helptextIsPersistent = this.adapter_.helptextHasClass(HELPTEXT_PERSISTENT); - const helptextIsValidationMsg = this.adapter_.helptextHasClass(HELPTEXT_VALIDATION_MSG); - const validationMsgNeedsDisplay = helptextIsValidationMsg && !isValid; + const helperTextIsPersistent = this.adapter_.helperTextHasClass(HELPER_TEXT_PERSISTENT); + const helperTextIsValidationMsg = this.adapter_.helperTextHasClass(HELPER_TEXT_VALIDATION_MSG); + const validationMsgNeedsDisplay = helperTextIsValidationMsg && !isValid; if (validationMsgNeedsDisplay) { - this.adapter_.setHelptextAttr(ROLE, 'alert'); + this.adapter_.setHelperTextAttr(ROLE, 'alert'); } else { - this.adapter_.removeHelptextAttr(ROLE); + this.adapter_.removeHelperTextAttr(ROLE); } - if (helptextIsPersistent || validationMsgNeedsDisplay) { + if (helperTextIsPersistent || validationMsgNeedsDisplay) { return; } - this.hideHelptext_(); + this.hideHelperText_(); } /** - * Hides the help text from screen readers. + * Hides the helper text from screen readers. * @private */ - hideHelptext_() { + hideHelperText_() { const {ARIA_HIDDEN} = MDCTextFieldFoundation.strings; - this.adapter_.setHelptextAttr(ARIA_HIDDEN, 'true'); + this.adapter_.setHelperTextAttr(ARIA_HIDDEN, 'true'); } /** diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js index b8d898c2ab2..96c841fd786 100644 --- a/packages/mdc-textfield/index.js +++ b/packages/mdc-textfield/index.js @@ -37,7 +37,7 @@ class MDCTextField extends MDCComponent { /** @private {?Element} */ this.label_; /** @type {?Element} */ - this.helptextElement; + this.helperTextElement; /** @type {?MDCRipple} */ this.ripple; /** @private {?Element} */ @@ -61,10 +61,10 @@ class MDCTextField extends MDCComponent { initialize(rippleFactory = (el) => new MDCRipple(el)) { this.input_ = this.root_.querySelector(strings.INPUT_SELECTOR); this.label_ = this.root_.querySelector(strings.LABEL_SELECTOR); - this.helptextElement = null; + this.helperTextElement = null; this.ripple = null; if (this.input_.hasAttribute('aria-controls')) { - this.helptextElement = document.getElementById(this.input_.getAttribute('aria-controls')); + this.helperTextElement = document.getElementById(this.input_.getAttribute('aria-controls')); } if (this.root_.classList.contains(cssClasses.BOX)) { this.ripple = rippleFactory(this.root_); @@ -138,7 +138,7 @@ class MDCTextField extends MDCComponent { notifyIconAction: () => this.emit(MDCTextFieldFoundation.strings.ICON_EVENT, {}), }, this.getInputAdapterMethods_(), - this.getHelptextAdapterMethods_(), + this.getHelperTextAdapterMethods_(), this.getBottomLineAdapterMethods_(), this.getIconAdapterMethods_()))); } @@ -214,39 +214,39 @@ class MDCTextField extends MDCComponent { /** * @return {!{ - * addClassToHelptext: function(string): undefined, - * removeClassFromHelptext: function(string): undefined, - * helptextHasClass: function(string): boolean, - * setHelptextAttr: function(string, string): undefined, - * removeHelptextAttr: function(string): undefined, + * addClassToHelperText: function(string): undefined, + * removeClassFromHelperText: function(string): undefined, + * helperTextHasClass: function(string): boolean, + * setHelperTextAttr: function(string, string): undefined, + * removeHelperTextAttr: function(string): undefined, * }} */ - getHelptextAdapterMethods_() { + getHelperTextAdapterMethods_() { return { - addClassToHelptext: (className) => { - if (this.helptextElement) { - this.helptextElement.classList.add(className); + addClassToHelperText: (className) => { + if (this.helperTextElement) { + this.helperTextElement.classList.add(className); } }, - removeClassFromHelptext: (className) => { - if (this.helptextElement) { - this.helptextElement.classList.remove(className); + removeClassFromHelperText: (className) => { + if (this.helperTextElement) { + this.helperTextElement.classList.remove(className); } }, - helptextHasClass: (className) => { - if (!this.helptextElement) { + helperTextHasClass: (className) => { + if (!this.helperTextElement) { return false; } - return this.helptextElement.classList.contains(className); + return this.helperTextElement.classList.contains(className); }, - setHelptextAttr: (name, value) => { - if (this.helptextElement) { - this.helptextElement.setAttribute(name, value); + setHelperTextAttr: (name, value) => { + if (this.helperTextElement) { + this.helperTextElement.setAttribute(name, value); } }, - removeHelptextAttr: (name) => { - if (this.helptextElement) { - this.helptextElement.removeAttribute(name); + removeHelperTextAttr: (name) => { + if (this.helperTextElement) { + this.helperTextElement.removeAttribute(name); } }, }; diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss index e760c88962e..54a64622be9 100644 --- a/packages/mdc-textfield/mdc-text-field.scss +++ b/packages/mdc-textfield/mdc-text-field.scss @@ -408,7 +408,7 @@ // stylelint-disable plugin/selector-bem-pattern .mdc-text-field__input, .mdc-text-field__label, - + .mdc-text-field-helptext { + + .mdc-text-field-helper-text { @include mdc-theme-prop(color, text-disabled-on-light); } // stylelint-enable plugin/selector-bem-pattern @@ -422,7 +422,7 @@ @include mdc-theme-dark(".mdc-text-field", true) { // stylelint-disable plugin/selector-bem-pattern - + .mdc-text-field-helptext { + + .mdc-text-field-helper-text { @include mdc-theme-prop(color, text-disabled-on-dark); } // stylelint-enable plugin/selector-bem-pattern @@ -649,9 +649,9 @@ // postcss-bem-linter: end -// postcss-bem-linter: define text-field-helptext +// postcss-bem-linter: define text-field-helper-text -.mdc-text-field-helptext { +.mdc-text-field-helper-text { @include mdc-theme-prop(color, text-hint-on-light); margin: 0; @@ -685,7 +685,7 @@ // stylelint-enable plugin/selector-bem-pattern } -.mdc-text-field-helptext--persistent { +.mdc-text-field-helper-text--persistent { transition: none; opacity: 1; will-change: initial; @@ -694,13 +694,13 @@ // postcss-bem-linter: end .mdc-text-field--invalid { - + .mdc-text-field-helptext--validation-msg { + + .mdc-text-field-helper-text--validation-msg { opacity: 1; color: $mdc-text-field-error-on-light; } @include mdc-theme-dark(".mdc-text-field", true) { - + .mdc-text-field-helptext--validation-msg { + + .mdc-text-field-helper-text--validation-msg { color: $mdc-text-field-error-on-dark; } } diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js index e1ed0049b42..4e0682ffd63 100644 --- a/test/unit/mdc-textfield/foundation.test.js +++ b/test/unit/mdc-textfield/foundation.test.js @@ -39,10 +39,10 @@ test('defaultAdapter returns a complete adapter implementation', () => { 'setIconAttr', 'eventTargetHasClass', 'registerTextFieldInteractionHandler', 'deregisterTextFieldInteractionHandler', 'notifyIconAction', 'addClassToBottomLine', 'removeClassFromBottomLine', - 'addClassToHelptext', 'removeClassFromHelptext', 'helptextHasClass', + 'addClassToHelperText', 'removeClassFromHelperText', 'helperTextHasClass', 'registerInputInteractionHandler', 'deregisterInputInteractionHandler', 'registerTransitionEndHandler', 'deregisterTransitionEndHandler', - 'setBottomLineAttr', 'setHelptextAttr', 'removeHelptextAttr', 'getNativeInput', + 'setBottomLineAttr', 'setHelperTextAttr', 'removeHelperTextAttr', 'getNativeInput', ]); }); @@ -237,7 +237,7 @@ test('on focus adds mdc-text-field__label--float-above class', () => { td.verify(mockAdapter.addClassToLabel(cssClasses.LABEL_FLOAT_ABOVE)); }); -test('on focus removes aria-hidden from helptext', () => { +test('on focus removes aria-hidden from helperText', () => { const {foundation, mockAdapter} = setupTest(); let focus; td.when(mockAdapter.registerInputInteractionHandler('focus', td.matchers.isA(Function))) @@ -246,7 +246,7 @@ test('on focus removes aria-hidden from helptext', () => { }); foundation.init(); focus(); - td.verify(mockAdapter.removeHelptextAttr('aria-hidden')); + td.verify(mockAdapter.removeHelperTextAttr('aria-hidden')); }); const setupBlurTest = () => { @@ -316,47 +316,47 @@ test('on blur does not add mdc-textfied--invalid if custom validity is true and' td.verify(mockAdapter.addClass(cssClasses.INVALID), {times: 0}); }); -test('on blur adds role="alert" to helptext if input is invalid and helptext is being used ' + +test('on blur adds role="alert" to helper text if input is invalid and helper text is being used ' + 'as a validation message', () => { const {mockAdapter, blur, nativeInput} = setupBlurTest(); nativeInput.checkValidity = () => false; - td.when(mockAdapter.helptextHasClass(cssClasses.HELPTEXT_VALIDATION_MSG)).thenReturn(true); + td.when(mockAdapter.helperTextHasClass(cssClasses.HELPER_TEXT_VALIDATION_MSG)).thenReturn(true); blur(); - td.verify(mockAdapter.setHelptextAttr('role', 'alert')); + td.verify(mockAdapter.setHelperTextAttr('role', 'alert')); }); test('on blur remove role="alert" if input is valid', () => { const {mockAdapter, blur} = setupBlurTest(); blur(); - td.verify(mockAdapter.removeHelptextAttr('role')); + td.verify(mockAdapter.removeHelperTextAttr('role')); }); -test('on blur sets aria-hidden="true" on help text by default', () => { +test('on blur sets aria-hidden="true" on helper text by default', () => { const {mockAdapter, blur} = setupBlurTest(); blur(); - td.verify(mockAdapter.setHelptextAttr('aria-hidden', 'true')); + td.verify(mockAdapter.setHelperTextAttr('aria-hidden', 'true')); }); -test('on blur does not set aria-hidden on help text when it is persistent', () => { +test('on blur does not set aria-hidden on helper text when it is persistent', () => { const {mockAdapter, blur} = setupBlurTest(); - td.when(mockAdapter.helptextHasClass(cssClasses.HELPTEXT_PERSISTENT)).thenReturn(true); + td.when(mockAdapter.helperTextHasClass(cssClasses.HELPER_TEXT_PERSISTENT)).thenReturn(true); blur(); - td.verify(mockAdapter.setHelptextAttr('aria-hidden', 'true'), {times: 0}); + td.verify(mockAdapter.setHelperTextAttr('aria-hidden', 'true'), {times: 0}); }); -test('on blur does not set aria-hidden if input is invalid and help text is validation message', () => { +test('on blur does not set aria-hidden if input is invalid and helper text is validation message', () => { const {mockAdapter, blur, nativeInput} = setupBlurTest(); - td.when(mockAdapter.helptextHasClass(cssClasses.HELPTEXT_VALIDATION_MSG)).thenReturn(true); + td.when(mockAdapter.helperTextHasClass(cssClasses.HELPER_TEXT_VALIDATION_MSG)).thenReturn(true); nativeInput.checkValidity = () => false; blur(); - td.verify(mockAdapter.setHelptextAttr('aria-hidden', 'true'), {times: 0}); + td.verify(mockAdapter.setHelperTextAttr('aria-hidden', 'true'), {times: 0}); }); -test('on blur sets aria-hidden=true if input is valid and help text is validation message', () => { +test('on blur sets aria-hidden=true if input is valid and helper text is validation message', () => { const {mockAdapter, blur} = setupBlurTest(); - td.when(mockAdapter.helptextHasClass(cssClasses.HELPTEXT_VALIDATION_MSG)).thenReturn(true); + td.when(mockAdapter.helperTextHasClass(cssClasses.HELPER_TEXT_VALIDATION_MSG)).thenReturn(true); blur(); - td.verify(mockAdapter.setHelptextAttr('aria-hidden', 'true')); + td.verify(mockAdapter.setHelperTextAttr('aria-hidden', 'true')); }); test('on blur handles getNativeInput() not returning anything gracefully', () => { diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js index b6d727be1d8..0131581ce5f 100644 --- a/test/unit/mdc-textfield/mdc-text-field.test.js +++ b/test/unit/mdc-textfield/mdc-text-field.test.js @@ -39,16 +39,16 @@ test('attachTo returns an MDCTextField instance', () => { assert.isOk(MDCTextField.attachTo(getFixture()) instanceof MDCTextField); }); -const getHelptext = () => bel`

help text

`; +const getHelperText = () => bel`

helper text

`; -test('#constructor assigns helptextElement to the id specified in the input aria-controls if present', () => { +test('#constructor assigns helperTextElement to the id specified in the input aria-controls if present', () => { const root = getFixture(); - root.querySelector('.mdc-text-field__input').setAttribute('aria-controls', 'helptext'); - const helptext = getHelptext(); - document.body.appendChild(helptext); + root.querySelector('.mdc-text-field__input').setAttribute('aria-controls', 'helper-text'); + const helperText = getHelperText(); + document.body.appendChild(helperText); const component = new MDCTextField(root); - assert.equal(component.helptextElement, helptext); - document.body.removeChild(helptext); + assert.equal(component.helperTextElement, helperText); + document.body.removeChild(helperText); }); class FakeRipple { @@ -262,72 +262,72 @@ test('#adapter.getNativeInput returns the component input element', () => { ); }); -test('#adapter.addClassToHelptext does nothing if no help text element present', () => { +test('#adapter.addClassToHelperText does nothing if no helper text element present', () => { const {component} = setupTest(); - assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.addClassToHelptext('foo')); + assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.addClassToHelperText('foo')); }); -test('#adapter.addClassToHelptext adds a class to the helptext element when present', () => { +test('#adapter.addClassToHelperText adds a class to the helper text element when present', () => { const {component} = setupTest(); - component.helptextElement = getHelptext(); - component.getDefaultFoundation().adapter_.addClassToHelptext('foo'); - assert.isOk(component.helptextElement.classList.contains('foo')); + component.helperTextElement = getHelperText(); + component.getDefaultFoundation().adapter_.addClassToHelperText('foo'); + assert.isOk(component.helperTextElement.classList.contains('foo')); }); -test('#adapter.removeClassFromHelptext does nothing if no help text element present', () => { +test('#adapter.removeClassFromHelperText does nothing if no helper text element present', () => { const {component} = setupTest(); - assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.removeClassFromHelptext('foo')); + assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.removeClassFromHelperText('foo')); }); -test('#adapter.removeClassFromHelptext removes a class from the helptext element when present', () => { +test('#adapter.removeClassFromHelperText removes a class from the helper text element when present', () => { const {component} = setupTest(); - const helptext = getHelptext(); - component.helptextElement = helptext; - helptext.classList.add('foo'); - component.getDefaultFoundation().adapter_.removeClassFromHelptext('foo'); - assert.isNotOk(helptext.classList.contains('foo')); + const helperText = getHelperText(); + component.helperTextElement = helperText; + helperText.classList.add('foo'); + component.getDefaultFoundation().adapter_.removeClassFromHelperText('foo'); + assert.isNotOk(helperText.classList.contains('foo')); }); -test('#adapter.helptextHasClass does nothing if no help text element present', () => { +test('#adapter.helperTextHasClass does nothing if no helper text element present', () => { const {component} = setupTest(); - assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.helptextHasClass('foo')); + assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.helperTextHasClass('foo')); }); -test('#adapter.helptextHasClass returns whether or not the help text contains a certain class', () => { +test('#adapter.helperTextHasClass returns whether or not the helper text contains a certain class', () => { const {component} = setupTest(); - const helptext = getHelptext(); - component.helptextElement = helptext; - helptext.classList.add('foo'); - assert.isOk(component.getDefaultFoundation().adapter_.helptextHasClass('foo')); - helptext.classList.remove('foo'); - assert.isNotOk(component.getDefaultFoundation().adapter_.helptextHasClass('foo')); + const helperText = getHelperText(); + component.helperTextElement = helperText; + helperText.classList.add('foo'); + assert.isOk(component.getDefaultFoundation().adapter_.helperTextHasClass('foo')); + helperText.classList.remove('foo'); + assert.isNotOk(component.getDefaultFoundation().adapter_.helperTextHasClass('foo')); }); -test('#adapter.setHelptextAttr does nothing if no help text element present', () => { +test('#adapter.setHelperTextAttr does nothing if no helper text element present', () => { const {component} = setupTest(); - assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.helptextHasClass('foo')); + assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.helperTextHasClass('foo')); }); -test('#adapter.setHelptextAttr sets an attribute to a certain value on the help text element', () => { +test('#adapter.setHelperTextAttr sets an attribute to a certain value on the helper text element', () => { const {component} = setupTest(); - const helptext = getHelptext(); - component.helptextElement = helptext; - component.getDefaultFoundation().adapter_.setHelptextAttr('aria-label', 'foo'); - assert.equal(helptext.getAttribute('aria-label'), 'foo'); + const helperText = getHelperText(); + component.helperTextElement = helperText; + component.getDefaultFoundation().adapter_.setHelperTextAttr('aria-label', 'foo'); + assert.equal(helperText.getAttribute('aria-label'), 'foo'); }); -test('#adapter.removeHelptextAttr does nothing if no help text element present', () => { +test('#adapter.removeHelperTextAttr does nothing if no helper text element present', () => { const {component} = setupTest(); - assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.removeHelptextAttr('aria-label')); + assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.removeHelperTextAttr('aria-label')); }); -test('#adapter.removeHelptextAttr removes an attribute on the help text element', () => { +test('#adapter.removeHelperTextAttr removes an attribute on the helper text element', () => { const {component} = setupTest(); - const helptext = getHelptext(); - helptext.setAttribute('aria-label', 'foo'); - component.helptextElement = helptext; - component.getDefaultFoundation().adapter_.removeHelptextAttr('aria-label'); - assert.isNotOk(helptext.hasAttribute('aria-label')); + const helperText = getHelperText(); + helperText.setAttribute('aria-label', 'foo'); + component.helperTextElement = helperText; + component.getDefaultFoundation().adapter_.removeHelperTextAttr('aria-label'); + assert.isNotOk(helperText.hasAttribute('aria-label')); }); test(`#adapter.notifyIconAction emits ${strings.ICON_EVENT}`, () => { From 7f962189357bf7b0987df0a1c1b82a2e40da16a4 Mon Sep 17 00:00:00 2001 From: Bonnie Zhou Date: Mon, 13 Nov 2017 11:59:13 -0800 Subject: [PATCH 2/2] revert changes in CHANGELOG --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d0b76916ba..3170abe0adf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -202,7 +202,7 @@ * **button:** Restore order of disabled styles (#1176) ([6ffed49](https://github.com/material-components/material-components-web/commit/6ffed49)) * **demos:** Fix button demo update from #1176 to work in IE 11 (#1178) ([dadc597](https://github.com/material-components/material-components-web/commit/dadc597)), closes [#1176](https://github.com/material-components/material-components-web/issues/1176) [#1178](https://github.com/material-components/material-components-web/issues/1178) * **ripple:** Correct unbounded ripple diameter (#1098) ([0f1ca35](https://github.com/material-components/material-components-web/commit/0f1ca35)), closes [#1067](https://github.com/material-components/material-components-web/issues/1067) -* **textfield:** Add left and right margin to helperText ([3a24bca](https://github.com/material-components/material-components-web/commit/3a24bca)) +* **textfield:** Add left and right margin to helptext ([3a24bca](https://github.com/material-components/material-components-web/commit/3a24bca))