feat(textbox, listbox-button): Add error icon to the left of the error message

[randybascue]

Problem

Error states should use more than color to indicate a change in state.

Solution

Prefix an error icon to the helper text to highlight invalid fields.

Resources

Playbook → Figma → Storybook →

Examples

[ArtBlue]

@randybascue , we need some clarifications on this issue, please.

1. The issue references ebay-textbox in the title, but the main large image is of the listbox-button. There are other images that include both a textbox and listbox. Is this change for the textbox, listbox or both?
2. The issue title says to "move the error icon to the left," but we currently don't seem to have an error icon in error messaging (aka field descriptions). Was it meant to say "add error icon" instead?

[randybascue]

@ArtBlue It’s any field, so both textbox and listbox

[randybascue]

It’s moving the error icon out of the field itself and in the leading position of the helper text.

[ArtBlue]

It’s moving the error icon out of the field itself and in the leading position of the helper text.

Oh, ok. Thanks for the clarifications, @randybascue .

I don't think we have the error icon inside a field on Skin. Maybe this originated from another team's ad hoc implementation?

[randybascue]

It might have been. In that case, it’s adding it instead of moving it from somewhere else.

[ArtBlue]

@randybascue , I don't see any state-specific styling (border and text color) for active, hover, and focus. Do we have them? If so, can you provide them? I'm hesitant to use the styling that's applied by default when there is no error state because once the user starts interacting with them, the error indication would vanish - not the best UX.

[randybascue]

@ArtBlue I’m unclear on the ask. Do you mean how does hover, focus, active look when a field is invalid?

[ArtBlue]

@ArtBlue I’m unclear on the ask. Do you mean how does hover, focus, active look when a field is invalid?

@randybascue , yes.

[ArtBlue]

@randybascue , for now, I simply matched the state colors to those of textbox (nothing's needed at the moment), but we should think of having those supported.