Picker with Validation

[eunicekokor]

resolves https://github.com/Arize-ai/arize/issues/21007

• add validation to picker + underlying dropdown button

Before

After

Up next:
Think through how to show help text in isQuiet (should it be within ui-components or passed in through controller) in design review

Screen.Recording.2023-04-28.at.3.16.36.PM.mov

[github-actions]

size-limit report 📦

Path	Size
dist/components.cjs.production.min.js	154.33 KB (+0.22% 🔺)
dist/components.esm.js	103.95 KB (+0.27% 🔺)

[mikeldking]

Up next:
Think through how to show help text in isQuiet (should it be within ui-components or passed in through controller) in design review

I think it's more driven by the "inline" layout than anything here because it's the layout of the form that currently gives space for the errors. I think ultimately if errors are going to be shown in tooltips we need to figure out how to show an error indicator without changing the layout since these inputs are extremely small.

Datadog shows an error indicator at the top right of the input (not an icon) and puts a tooltip on the entire component. This is probably the least intrusive thing I've seen.
cc @theandylu

[mikeldking]

I think spectrum ultimately doesn't believe that pickers can be in an invalid state - e.g. why would you let someone pick something that's invalid.

Might be worth thinking about what causes pickers to be invalid - ultimately it's another field that causes it to be invalid - is there a way to completely eliminate that flow?