[All fields and inputs] Helper text update

[jeanservaas]

Enhancement[All input fields]: Helper text update

Jan Child, the Design Lead for Watson assistant made several really good points about the way we're treating helper text followed by these suggestions...

This issue relates to all of our input fields (i.e. text input, text area, number input, select and dropdown components); it also affects the $helper-text type token (which would eventually need to be deprecated).

The Watson Assistant team would like to the helper text to be below the input field rather than above it (directly under the label); when the label is underneath, it's only there if you need it vs. when it's above, it's given the same weight as the label and is obtrusive for the user.

• Move helper text below the input / dropdown field Edit based on thread: doesn't work coz dropdown opens and covers helper text.

They also want to eliminate the use of italics; if the helper text is below the input field, there's no need for the italic to differentiate it from the label; also, the use of italics in the situation was not appropriate in the first place. Italics should be reserved primarily for single-word emphasis, titles / names and foreign / technical words and terms.

• ~~Use $label-01 token for helper text (eliminates the italic); eventually deprecate $helper-text-01; in the meantime, update $helper-text-01 to call regular Plex Sans instead of italic ~~ Edit based on thread: Keeping italic because it is currently the only visual differentiation between label text and helper text.

Speaking for the design team; I agree with these proposed changes; due to time constraints, we didn't spend enough time iterating on the helper text designs. Our primary concern was that it not interfere with the error text below the input field. Jan suggested that best practice here would be to remove the helper text when the warning appears.

• In the instance of an error state, remove helper text in favor of error message Edit based on thread: no longer relevant if we don't move text down.

Designs:

Current state of helper text in context:

Proposed change:

[elizabethsjudd]

From an a11y side of things moving the helper text would mean that the aria-describedby attribute would need to be used on the input that is connected to the id of the helper text so that screen reader users have access to the helper text when they are on the input and not after they leave the input.

Or even easier, using Flexbox's order property. Here's a screen shot from one of my team member's playing around with the component.

[jeanservaas]

Thanks for this input @elizabethsjudd! Just to clarify, do you see this as an impediment to making this change? Or is this just an added bullet point for the devs to tackle?

[elizabethsjudd]

@jeanservaas simply something for the devs to tackle while implementing the change. It shouldn't block the update.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[jeanservaas]

THIS IS NOT STALE

[stale]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[shixiedesign]

Palette work in progress.

[shixiedesign]

Blocked by #3226

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[shixiedesign]

not stale

[jeanservaas]

Keep open to wait for palette work

[lnajjar]

It looks like you're going this way anyway, but, if not, here is a rationale. To match users' cognitive flow and prevent user input errors, it would be helpful to retain your original design: Label, helper text, input field, error message. That way, users read the label, then the helper text, then make a valid entry. As you do now, displaying the helper text in italics might be a nice way to differentiate the helper text from the label.

[shixiedesign]

Closing this issue to start a new one to track implementation of color palette solution. See #3961