Better overflow shadows and some mobile modal fixes

[cchaos]

Modals

1. Fixed EuiConfirmationModal responsive sizing

Since most confirmation modals are a simple title, short description and then the buttons, it meant that the buttons (footer) was very far from the intro. I made is so the confirmation style modal is just at the bottom of the screen but that it will still max out at 100vh.

This also fixes a layout issue for title-only confirmation modals:

Normal modals still display in full height:

2. Using the new euiOverflowShadow mixin instead of separate shadows on header and footer

This is a much simpler and more configurable way to add the overflow shadows, though it does require one extra wrapping div. However, it doesn't require a before element and after element.

The new mixin is also more subtle (most noticeable in the flyout example below).

3. Allow confirm modal confirm button to be disabled

I can't remember the exact reason this was necessary, but I remember someone asking for it and had made a note of it.

Flyouts

4. Also updated EuiFlyout to use the new overflow shadow

Which also required an extra wrapping div.

Deprecations

5. The mixins euiOverflowShadowTop and euiOverflowShadowBottom will now be deprecated in favor of euiOverflowShadow.

I also updated the SASS example:

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
• [ ] Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• [ ] This was checked against keyboard-only and screenreader scenarios
• [ ] This required updates to Framer X components

[snide]

Ran locally, but did not check IE. Might want to check there because of some of the width calcs. We need to be careful about when this goes into Kibana because I think it will cause breaks because of the extra wrapping divs. I don't think we need to label it as breaking, but let's just make sure we do the Kiana PR immediately when this merges so someone in engineering doesn't casually add this in.

[snide]

Just a reminder. The changes you've made here will require you to likely follow up on the Kibana PR for search profiler. We might want to do some searches against CSS selectors for modal and flyout in Kibana. Without the inner div you're using my guess is those HTML only versions will break.

[ryankeairns]

👍 Really nice solution, love the anchored-to-bottom look, reminds me of an iOS action sheet.

Since you are in the neighborhood, might be good to add a Snippet to these docs.

[cchaos]

but did not check IE. Might want to check there

Already did, everything is as it was

We need to be careful about when this goes into Kibana

My plan before this merges is to link it against Kibana and make sure all the instances work

[cchaos]

So I linked into Kibana, and the good thing is that my hack in Search Profiler is the only use of the flyout or modal classes directly (in Kibana) so that's just a quick fix when we update Kibana's EUI version. This could affect other consumers, though, but I don't think it's a breaking change since that's now how we support EUI usage.

I will want to do a more overall Modal and Flyout usage consolidation since there are some pages that were converted early on that hasn't evolved. Also there are some pages that really need to have their mobile sizes looked at.

Example: