feat(text-field): rename helptext to helper text (#1576)

BREAKING CHANGE: Instances of "helptext" in mdc-textfield/adapter.js has changed to "helperText", and users should update their implementations of the adapter.

Author: bonniezhou

demos/text-field.html

@@ -74,7 +74,7 @@
       <div class="mdc-toolbar-fixed-adjust"></div>
       <section class="hero">
         <div class="mdc-text-field">
-          <input type="text" class="mdc-text-field__input" id="my-text-field" aria-controls="my-text-field-helptext">
+          <input type="text" class="mdc-text-field__input" id="my-text-field" aria-controls="my-text-field-helper-text">
           <label for="my-text-field" class="mdc-text-field__label">Text Field</label>
           <div class="mdc-text-field__bottom-line"></div>
         </div>
@@ -90,13 +90,13 @@
         <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
         <section id="demo-text-field-wrapper">
           <div class="mdc-text-field">
-            <input type="text" class="mdc-text-field__input" id="my-text-field" aria-controls="my-text-field-helptext">
+            <input type="text" class="mdc-text-field__input" id="my-text-field" aria-controls="my-text-field-helper-text">
             <label for="my-text-field" class="mdc-text-field__label">Email Address</label>
             <div class="mdc-text-field__bottom-line"></div>
           </div>
-          <p id="my-text-field-helptext" class="mdc-text-field-helptext"
+          <p id="my-text-field-helper-text" class="mdc-text-field-helper-text"
              aria-hidden="true" style="display:none;">
-            Help Text (possibly validation message)
+            Helper Text (possibly validation message)
           </p>
         </section>
         <div>
@@ -120,16 +120,16 @@ <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
           <label for="required">Required</label>
         </div>
         <div>
-          <input id="use-helptext" type="checkbox">
-          <label for="use-helptext">Use Helper Text</label>
+          <input id="use-helper-text" type="checkbox">
+          <label for="use-helper-text">Use Helper Text</label>
         </div>
         <div>
-          <input id="persistent-help-text" type="checkbox" disabled>
-          <label for="persistent-help-text">Make helper text persistent</label>
+          <input id="persistent-helper-text" type="checkbox" disabled>
+          <label for="persistent-helper-text">Make helper text persistent</label>
         </div>
         <div>
-          <input id="helptext-as-validation" type="checkbox" disabled>
-          <label for="helptext-as-validation">
+          <input id="helper-text-as-validation" type="checkbox" disabled>
+          <label for="helper-text-as-validation">
             Use helper text as validation message
           </label>
         </div>
@@ -143,7 +143,7 @@ <h2>Password field with validation</h2>
           <label for="pw" class="mdc-text-field__label">Choose password</label>
           <div class="mdc-text-field__bottom-line"></div>
         </div>
-        <p class="mdc-text-field-helptext mdc-text-field-helptext--persistent mdc-text-field-helptext--validation-msg"
+        <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"
            id="pw-validation-msg">
           Must be at least 8 characters long
         </p>
@@ -157,7 +157,7 @@ <h2>Text Field box</h2>
             <label for="tf-box" class="mdc-text-field__label">Your Name</label>
             <div class="mdc-text-field__bottom-line"></div>
           </div>
-          <p class="mdc-text-field-helptext mdc-text-field-helptext--validation-msg"
+          <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
              id="name-validation-msg">
             Must be at least 8 characters
           </p>
@@ -425,7 +425,7 @@ <h2>Full-Width Text Field and Textarea</h2>
       (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 @@ <h2>Full-Width Text Field and Textarea</h2>
           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'
           );
         });
       })();

demos/theme/index.html

@@ -780,25 +780,25 @@ <h2 class="mdc-typography--headline demo-component-section__heading">
         <figure class="demo-text-field-wrapper">
           <div class="mdc-text-field">
             <input type="text" class="mdc-text-field__input" id="demo-text-field-default"
-                   name="email" aria-controls="demo-text-field-default-helptext"
+                   name="email" aria-controls="demo-text-field-default-helper-text"
                    data-demo-no-js autocomplete="email">
             <label for="demo-text-field-default" class="mdc-text-field__label">Default</label>
             <div class="mdc-text-field__bottom-line"></div>
           </div>
-          <p class="mdc-text-field-helptext" id="demo-text-field-default-helptext"
+          <p class="mdc-text-field-helper-text" id="demo-text-field-default-helper-text"
              aria-hidden="true">
-            Help text
+            Helper text
           </p>
         </figure>
         <figure class="demo-text-field-wrapper">
           <div class="mdc-text-field">
             <input type="text" class="mdc-text-field__input" id="demo-text-field-required" required
-                   name="email" aria-controls="demo-text-field-required-helptext"
+                   name="email" aria-controls="demo-text-field-required-helper-text"
                    data-demo-no-js autocomplete="email">
             <label for="demo-text-field-required" class="mdc-text-field__label">Required</label>
             <div class="mdc-text-field__bottom-line"></div>
           </div>
-          <p class="mdc-text-field-helptext mdc-text-field-helptext--validation-msg" id="demo-text-field-required-helptext">
+          <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" id="demo-text-field-required-helper-text">
             Must provide a name
           </p>
         </figure>
@@ -809,9 +809,9 @@ <h2 class="mdc-typography--headline demo-component-section__heading">
             <label for="demo-text-field-box" class="mdc-text-field__label">With <code>--box</code> modifier</label>
             <div class="mdc-text-field__bottom-line"></div>
           </div>
-          <p class="mdc-text-field-helptext" id="demo-text-field-box-helptext"
+          <p class="mdc-text-field-helper-text" id="demo-text-field-box-helper-text"
              aria-hidden="true">
-            Help text
+            Helper text
           </p>
         </figure>
       </section>

packages/mdc-textfield/README.md

@@ -100,47 +100,47 @@ since it won't be added until that JS runs, adding it manually will prevent an i
 </div>
 ```
 
-### 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
 <div class="mdc-text-field">
-  <input type="text" id="username" class="mdc-text-field__input" aria-controls="username-helptext">
+  <input type="text" id="username" class="mdc-text-field__input" aria-controls="username-helper-text">
   <label for="username" class="mdc-text-field__label">Username</label>
   <div class="mdc-text-field__bottom-line"></div>
 </div>
-<p id="username-helptext" class="mdc-text-field-helptext" aria-hidden="true">
+<p id="username-helper-text" class="mdc-text-field-helper-text" aria-hidden="true">
   This will be displayed on your public profile
 </p>
 ```
 
-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
 <div class="mdc-text-field">
   <input type="email" id="email" class="mdc-text-field__input">
   <label for="email" class="mdc-text-field__label">Email address</label>
   <div class="mdc-text-field__bottom-line"></div>
 </div>
-<p class="mdc-text-field-helptext mdc-text-field-helptext--persistent">
+<p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent">
   We will <em>never</em> share your email address with third parties
 </p>
 ```
 
-#### 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.
   <label for="pw" class="mdc-text-field__label">Choose password</label>
   <div class="mdc-text-field__bottom-line"></div>
 </div>
-<p class="mdc-text-field-helptext
-          mdc-text-field-helptext--persistent
-          mdc-text-field-helptext--validation-msg"
+<p class="mdc-text-field-helper-text
+          mdc-text-field-helper-text--persistent
+          mdc-text-field-helper-text--validation-msg"
    id="pw-validation-msg">
   Must be at least 8 characters long
 </p>
@@ -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

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

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',