Experimental: review and finalize error states for components

[aagonzales]

We've had multiple issues with error/validations states in the new Duo system. We need to evaluate and finalize the style across the board.

• states: enabled, focus, active, hover
• icon or not icon
• what happens with small inputs?
• what happens with multi-line

[aagonzales]

@designertyler If you get bored and want to take a stab this be my guest 😆
Link to components here: https://ibm.box.com/s/wjx23mseagc2air9l50j3p38katmptsk

[laurenmrice]

Audit

• Consistently keep the Red 60, 2px, inside border and error message below.

• Error message will be getting type style label-01 (12/16, .32)

• Changed alert icon in progress indicator to error icon.

• **Still need to figure out whether to keep or omit icon in fields.

• 2px Border paired with an error message displayed for color blindness is good however, an icon would be an even better visual cue.

• Having an icon inside a field could cause potential issues for mobile.

• Aria labels used to identify errors.

• Will try to finalize this issue in Design review Friday.

[laurenmrice]

Exploration

[aagonzales]

Sprint 25: pick final direction and submit dev issue with changes.
@laurenmrice

[laurenmrice]

Final error message

Fields:
-Icon within field to the right
-2 px border
-error message below