Text Input - Hover - Define state styling (Success/Warning/Error status)

[natalia-fitzgerald]

As part of the React component library (and lending app) we are currently looking to nail down the state styling for text input (Error status).

In the Design System we currently define the states as follows:

This is not visualized on the documentation page but is in the code. The hover state is Pacific while the other states are red. I am not sure whether this is intentional or a default style that was never customized for the error status.

If we apply the same visual logic that we do for the "destructive link" we could go with a dark red on hover.

That would look like this. What do you think?

I cross-referenced USWDS and they don't appear to have a separate hover style for their text inputs.

Default

Hover (No change)
The only change here is a cursor change.

Focus

@sonnakim for guidance

[sonnakim]

@natalia-fitzgerald 👍 to adding a hover state for fields in error status, as shown above, and (as we discussed) to do likewise for checkboxes. (If this isn't added, a field in error status will show our default blue hover state.) @anselmbradford for awareness. (ETA: Natalia will also add hover states for success and warning, see comment below)

[natalia-fitzgerald]

Ok, to confirm here are the colors for the hover states:

I don't have a use case for hover on success or warning in the work I'm doing but since the code currently defines these hover states as Pacific I recommend updating Success and Warning for the sake of consistent logic.

Success

• Dark green: #1e9642

Warning

• Dark gold: #dc731c

Error

• Dark red: #b63014

[itsmedavep]

I have made these changes to the Figma DS library file on a branch here.

@natalia-fitzgerald @sonnakim and @jenn-franklin

If you like I can merge the branch and publish the changes to the file after a review. Just let me know.

[natalia-fitzgerald]

@itsmedavep
I reviewed and the the Figma file looks good.

[itsmedavep]

I merged the changes and republished. TY everyone!

[billhimmelsbach]

I think this is completed @shindigira? Just still waiting on review?

[shindigira]

I think this is completed @shindigira? Just still waiting on review?

Yes, need a final approval from @natalia-fitzgerald