Make "experimental" banner collapsable/hidable.

[nyurik]

The experimental banner takes up considerable screen real estate, without being able to collapse/hide it.

[alexfrancoeur]

@snide @cjcenizal @cchaos I'd like your feedback here. We'd like to reduce the amount of space for the warning we present for lab visualizations. Not only that, but is there a better way we can style it? I know the ask here is to make the banner collapsable, but I'm wondering if we reduce the amount of space being used if it's still necessary.

cc: @thomasneirynck

[thomasneirynck]

I agree just making it smaller would be enough imho

[alexfrancoeur]

++ maybe we can sneak this into 6.2?

[cjcenizal]

Can this be surfaced using notify.info() without a timer? Then it will show up at the top of the screen as a blue banner and the user can dismiss it. As we start integrating EuiToast to replace most of our banner notifications, the banner notifications may become more appropriate for this kind of use case.

[cchaos]

I would just suggest switching to use the euiCallOut component with only a header. It only reduces the spacing a little bit, but the styling allows for a quick skim and skip over if it's a recognizable message.

I'd also suggest adding the experimental icon fa-flask (for now until a custom icon is created for that) to the message.

[cchaos]

I'm just seeing @cjcenizal's comment. That could work as well, but if you just want a quick component swap, you could go with the euiCallOut.

It's also worth considering if this is something that should be dismiss-able at all, or at least user-dismissed vs auto-dismissed.

[timroes]

I like the euiCallOut one. Do you think we could create a modified version of euiCallOut--condense, that would have less padding? We could of course also overwrite the padding just for this one, but I would rather - if you think it makes sense - have this as a common class in EUI.

I would vote against the info notification, since I think they are (the way they currently behave) a huge disturbance for the user and offer bad usability (they can stay when changing the screen, but doesn't need to, sometimes I see a banner up, and am not sure if it just appeared again, or is the one from earlier, etc.). So I would rather go with euiCallOut.

[cchaos]

We can do that. I'll update the component to add a paddingSize prop.

[cchaos]

There is now a small version of the EuiCallOut available.

elastic/eui#269