[EuiFormRow] Add support for warning and success messages

[cjcenizal]

@elastic/kibana-management has recently run into scenarios where we need to surface these types of messages next to the input. For example, here's a success message which we show when our async validation returns success when an index pattern matches indices:

We also would like to show warnings (yellow/orange text) for another input when the user enters input which is technically acceptable but suboptimal or has known gotchas.

In the example above, I've hacked this by using EuiTextColor and passing it to the help prop. Ideally I think it would be great if we added warning and success props to EuiFormRow which accept the same values as the error prop. We could then create EuiFormWarningText and EuiFormSuccessText components which EuiFormRow would use internally.

In terms of implementation, I'd suggest showing errors first, then warnings below that, and success below that. It's very unlikely anyone will want to use all of them together at once but you never know! I think this order makes sense since it orders the information from most important to least important.

[snide]

@cjcenizal Do you think that these alerts should show in addition or in replacement of anything in the help prop? Generally the way you're doing it seems like the way I'd handle it (changing the content of help based on context).

We also would like to show warnings (yellow/orange text) for another input when the user enters input which is technically acceptable but suboptimal or has known gotchas.

Can you explain this one a bit more? Are you looking to pre-validate as they type?

I think we'd rather not have messaging stack, so replacing help still seems like the proper place for this stuff. Only other option I could think is that we formalize some sort of EuiTipIcon to the side when these sorts of dynamic bits appear, but I'd be worried people would use them in addition to the current error validation. We'd likely want one or the other.

[cjcenizal]

Do you think that these alerts should show in addition or in replacement of anything in the help prop?

I can think of cases where we might want the help to be visible even when success is visible. For example, in the index pattern example there is help text that lists out the disallowed characters. If the user is still entering an index pattern, it's possible that it might match indices but the user isn't done typing in the full pattern. So that help text could still be useful. (I only hid it in my example because the lack of a gap between the success text and the rest of the help text looked weird). So, short answer: I think addition to help text is better than replacing it.

Can you explain this one a bit more? Are you looking to pre-validate as they type?

There's a particular input in the rollup wizard for specifying an interval. Due to the quirks of rollups, an interval of 1d is valid (and may be preferred depending on the user's use case) but will restrict the user from performing certain types of queries. An interval of 24h won't have the same restrictions. So when a user enters 1d we want to show a warning to act as a gut check and suggest the "generally preferred" value of 24h.

I think we'd rather not have messaging stack, so replacing help still seems like the proper place for this stuff.

I agree with you that having a messaging stack is suboptimal. But if we let the person building the UI be responsible for making those choices then I think the benefits outweigh the risks. I've been building a lot of these forms recently and the components we have in EUI are really easy to use, and every time they let me do something unexpected I breathe a sigh of relief and every time they fight me I head-desk (which is rare!). The flexibility is great when you run into edge/corner cases and need to wrangle a solution to something weird, like these interval validation rules.

[cjcenizal]

formalize some sort of EuiTipIcon to the side

I think this will be super-useful for tight spots where we can't use a EuiDescribedFormGroup, e.g. the editor sidebar in Canvas or Visualize!

[cjcenizal]

@snide Here's an example of what I mean:

As an aside, that's using the warning color, and this is using the danger color:

I couldn't tell the two apart... and I know we run into problems in terms of color contrast against the white background if we start moving the warning color more into the yellow part of the spectrum. Catch 22.

[snide]

Thanks for the context. Very helpful.

[cchaos]

I would assume that any validation style help messages should also contain a [customizable] icon as to not rely solely on text color alone.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[cee-chen]

Due to the age of this feature request and the lack of requests from others for this functionality, we won't be implementing this OOTB in EUI. Using the workaround mentioned in the issue description (using thehelpText prop and then <EuiTextColor color="success" />) would be the recommended way of accomplishing this more uncommon and edge case behavior.