terra-framework Terra date input focus style

Summary

This PR fixes focus style for terra-date-input which was overridden by form-input css (blue solid border appears instead of dashed border).

Testing

This change was tested using:

[x] WDIO
[x] Jest
[ ] Visual testing (please attach a screenshot or recording)
[ ] Other (please describe below)
[ ] No tests are needed

Reviews

In addition to engineering reviews, this PR needs:

[ ] UX review
[ ] Accessibility review
[ ] Functional review

Additional Details

This PR resolves:

UXPLATFORM-10307

Apr 09 '24 19:04 adoroshk

Need @eawww help to figure out the correct styling for fusion theme focus if error, as current option on prod looks way different from just on focus:

Apr 10 '24 13:04 adoroshk

Hi @adoroshk

For the default theme invalid state, since the visual border becomes wider (i think due to a box shadow) I'd recommend increasing the outline offset by 1px to ensure the required 1px gap between the border and focus indicator. Everything else looks good.

Standard focus indicator for fusion theme on this component's inputs appears to be border: 1px solid #dedfe0; box-shadow: 0 0 8px #a6d9f4;

Apr 10 '24 21:04 eawww

Hi @adoroshk

For the default theme invalid state, since the visual border becomes wider (i think due to a box shadow) I'd recommend increasing the outline offset by 1px to ensure the required 1px gap between the border and focus indicator. Everything else looks good.

Standard focus indicator for fusion theme on this component's inputs appears to be border: 1px solid #dedfe0; box-shadow: 0 0 8px #a6d9f4;

@eawww I have updated error and error + focus the styling, here is how it looks: