Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
feat(text-field): rename helptext to helper text (#1576)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: Instances of "helptext" in mdc-textfield/adapter.js has changed to "helperText", and users should update their implementations of the adapter.
  • Loading branch information
@bonniezhou
bonniezhou authored Nov 13, 2017
1 parent 8cca080 commit 1a5acee
Show file tree
Hide file tree
Showing 10 changed files with 189 additions and 189 deletions.
48 changes: 24 additions & 24 deletions demos/text-field.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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) {
Expand All @@ -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'
);
});
})();
Expand Down
14 changes: 7 additions & 7 deletions demos/theme/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
52 changes: 26 additions & 26 deletions packages/mdc-textfield/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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
Expand Down
22 changes: 11 additions & 11 deletions packages/mdc-textfield/adapter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/mdc-textfield/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Loading

0 comments on commit 1a5acee

Please sign in to comment.