[EuiFlyout] Consideration for a 'double wide' layout

[ryankeairns]

Examples can be found in this related #7054

It seems additional conversation would be needed before determining if and how far EUI would go with this pattern.
A couple of teams in Kibana are already using a double-wide layout, and a third team is considering a similar solution.

• Should EUI provide this as an alternative layout for EuiFlyout?
• If yes, what things should be included in the guidelines?
• If no, what are the alternatives?

[cee-chen]

Should EUI provide this as an alternative layout for EuiFlyout?

Do we have a total count of the number of times this is used in Kibana? If it's under 5, I'm not fully sold on baking this in as a first-party prop, but the layout required to set this up is not terribly difficult, and we could provide an example if needed:

https://codesandbox.io/s/awesome-bush-8hs8mh?file=/demo.js

<EuiFlyout>
  <EuiFlexGroup gutterSize="none" css={{ height: '100%' }}>
    <EuiFlexItem>
      "non-flyout" content goes here
    </EuiFlexItem>
    <EuiFlexItem>
      Standard EuiFlyout header, body, and footer go here
    </EuiFlexItem>
  </EuiFlexGroup>
</EuiFlyout>

[cee-chen]

Good call @jughosta! EuiFlyoutBody should handle its own scrolling without any extra work needed; Adding a className="eui-yScroll" on the preview space should suffice (updated the above CodeSandbox demo).

[drewdaemon]

Very good point @jughosta

EuiFlyoutBody should handle its own scrolling without any extra work needed;

I don't think this is working out-of-the-box for me... the body is pushing the footer out of the view. You can't see it in the video, but I'm trying to scroll up and down at the end there.

Screen.Recording.2023-08-08.at.12.09.15.PM.mov

[cee-chen]

You're right, I can repro this in the above sandbox. Let me investigate why and see if there's a fix or workaround.

[cee-chen]

@drewdaemon Thankfully, setting a very quick height: 100%; on the wrapping <EuiFlexGroup> solves the issue:

https://codesandbox.io/s/awesome-bush-8hs8mh?file=/demo.js:772-798

Let me know if that works for you! I'll update the snippet above as well.

[drewdaemon]

Works over here! @cee-chen ++

[ryankeairns]

While this is an emerging pattern, we aren't quite ready to a) establish an officially-supported pattern or b) provide direct support via EuiFlyout.

If/when the EUI team decides to proceed, the next steps would entail further design exploration, alignment, and resulting guideline creation. At this point, we are not able to prioritize this work and will live with the provided example/answer for the time being.