diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx index 61c2ed0ccdc..40877014213 100644 --- a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx +++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx @@ -6,12 +6,13 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, PropsWithChildren } from 'react'; +import React, { FunctionComponent, PropsWithChildren, useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { EuiHeader, EuiHeaderSection } from '../header'; +import { EuiHeader, EuiHeaderSection, EuiHeaderSectionItem } from '../header'; import { EuiPageTemplate } from '../page_template'; -import { EuiFlyoutBody, EuiFlyoutFooter } from '../flyout'; +import { EuiFlyout, EuiFlyoutBody, EuiFlyoutFooter } from '../flyout'; +import { EuiButton } from '../button'; import { EuiCollapsibleNavItem } from './collapsible_nav_item'; import { @@ -34,6 +35,7 @@ const meta: Meta = { args: { side: 'left', initialIsCollapsed: false, + width: 248, }, }; export default meta; @@ -411,3 +413,39 @@ export const MultipleFixedHeaders: Story = { ), }; + +const MockConsumerFlyout: FunctionComponent = () => { + const [flyoutIsOpen, setFlyoutOpen] = useState(false); + return ( + <> + setFlyoutOpen(!flyoutIsOpen)}> + Toggle a flyout + + {flyoutIsOpen && ( + setFlyoutOpen(false)}> + + Some other mock consumer flyout that should overlap + EuiCollapsibleNav + + + )} + + ); +}; + +export const FlyoutInFixedHeaders: Story = { + render: ({ ...args }) => { + return ( + + + Nav content + + + + + + + + ); + }, +};