Add (invalid) validation styling to form components

[vertonghenb]

What feature are you requesting? Adding validation styles when the form component is invalid.

What would be the benefit of adding this feature? Uniform styling of validation errors.

What solution would be ideal for you? using an attribute aria-invalid

What alternatives have you considered? Adding custom styling

Attach screenshots or images add detail to your request: Some examples:

[janechu]

The @microsoft/fast-tooling-react migration to use the @microsoft/fast-components is effectively blocked without visual validation. The use of a pink accent color border for such inputs as <fast-text-field> is also confusing as from a user perspective this should have a red border if it is invalid. Having pink on a form filled with such inputs lends the impression that all fields are currently invalid.

I would suggest changing the border to a neutral color as well as things like the <fast-checkbox> background.

[bheston]

I agree this is something we should support in the base components, as well as for unblocking the tooling work. I think from the styling perspective this will be easier to support once the new color work lands because it will make additional palettes like success and error easier to support. Obviously the other plumbing needs to be in place for the validation logic first still.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[fcollonval]

Hey I would like to add this to our toolkit. But it would definitely be better if it can be upstream. Is there some pointers on the API design to implement this feature - presumably linked to that issue too https://github.com/microsoft/fast/issues/2442?

[bheston]

That would be great. I would still love to see this come in as a feature. In general we keep the API consistent with any existing public API, like https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation#validation-related_attributes. I suspect there is probably a tie-in with the form-associated portion of the components, which I don't have a ton of familiarity around, but perhaps you could propose modifications to that spec.md file through a PR and people can comment there.

I'm happy to help with design implications if you run into anything. For context, we've considered adding 'error' and 'success' base colors and palettes to support this. Now that we'd be officially supporting this in the foundation it seems time to add them. Of course, with the fast-components updates, that belongs in the future color and design package I've drafted in #5895 but will be writing up in proposal form soon.

[chrisdholt]

I think we'll want to move this over to the CLI repository where the components will be living. We can certainly look to take up the feature request there.