Summary

Part of #8873

Supports rending the top menu bar in EuiFlyout using flyoutMenuProps.

Before

<EuiFlyout
  onClose={closeFlyout}
  size="l"
  id="menu-bar-example-main"
  type="overlay"
  outsideClickCloses={false}
  ownFocus
>
  <EuiFlyoutMenu title="Flyout title">
    {customAction}
  </EuiFlyoutMenu>
  <EuiFlyoutBody>
    <EuiText>
      <p>Simple flyout content.</p>
      <EuiSpacer size="m" />
    </EuiText>
  </EuiFlyoutBody>
</EuiFlyout>

After

Example 1, using title and custom actions from flyoutMenuProps:

<EuiFlyout
  onClose={closeFlyout}
  size="l"
  id="menu-bar-example-main"
  type="overlay"
  outsideClickCloses={false}
  ownFocus
  flyoutMenuProps={{
    title: 'Flyout title',
    customActions,
  }}
>
  <EuiFlyoutBody>
    <EuiText>
      <p>Simple flyout content.</p>
      <EuiSpacer size="m" />
    </EuiText>
  </EuiFlyoutBody>
</EuiFlyout>

Example 2, using title from aria-label prop:

<EuiFlyout
  onClose={closeFlyout}
  size="l"
  id="menu-bar-example-main"
  type="overlay"
  outsideClickCloses={false}
  ownFocus
  aria-label="Flyout title"
  }}
>
  <EuiFlyoutBody>
    <EuiText>
      <p>Simple flyout content.</p>
      <EuiSpacer size="m" />
    </EuiText>
  </EuiFlyoutBody>
</EuiFlyout>

Why are we making this change?

Part of the Epic for Flyout System.

Part of #8873

This PR works on two requirements from the Epic:

1. Always use top menu bar: flyouts using the session APIs from the Flyout System must always feature a "top menu bar," known as EuiFlyoutMenu. This PR enforces that using validation of EuiFlyout props. The EuiFlyout in a session must have flyoutMenuProps with a title field, or aria-label can be used as the title for the top menu bar.
2. Support custom actions: consumers will want to add their own icons that launch tools or custom actions in the flyout. This PR exposes a way of doing that, also through the EuiFlyout flyoutMenuProps prop.

Screenshots

Impact to users

Provides consistent flyout menu bar for session-based flyouts.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)