diff --git a/packages/eui/src/components/flyout/flyout.stories.tsx b/packages/eui/src/components/flyout/flyout.stories.tsx index 723cfc3ae48..ef735cc4cf8 100644 --- a/packages/eui/src/components/flyout/flyout.stories.tsx +++ b/packages/eui/src/components/flyout/flyout.stories.tsx @@ -10,7 +10,24 @@ import React, { useRef, useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { action } from '@storybook/addon-actions'; -import { EuiButton, EuiCallOut, EuiSpacer, EuiText, EuiTitle } from '../index'; +import { + EuiButton, + EuiButtonEmpty, + EuiCallOut, + EuiCodeBlock, + EuiSpacer, + EuiText, + EuiTitle, + EuiForm, + EuiFormRow, + EuiFieldText, + EuiSelect, + EuiSwitch, + EuiComboBox, + EuiFlexGroup, + EuiFlexItem, + EuiPanel, +} from '../index'; import { EuiFlyout, @@ -18,6 +35,7 @@ import { EuiFlyoutBody, EuiFlyoutHeader, EuiFlyoutFooter, + EuiFlyoutResizable, } from './index'; import { LOKI_SELECTORS } from '../../../.storybook/loki'; @@ -55,9 +73,11 @@ type Story = StoryObj; const onClose = action('onClose'); const StatefulFlyout = ( - props: Partial void }> + props: Partial & { onToggle: (open: boolean) => void }> & { + children?: React.ReactNode | ((close: () => void) => React.ReactNode); + } ) => { - const { onToggle } = props; + const { onToggle, children, ...rest } = props; const [_isOpen, setIsOpen] = useState(true); const handleToggle = (open: boolean) => { @@ -65,41 +85,600 @@ const StatefulFlyout = ( onToggle?.(open); }; + const handleClose = () => { + handleToggle(false); + onClose(); + }; + return ( <> - handleToggle(!_isOpen)}> + handleToggle(!_isOpen)}> Toggle flyout {_isOpen && ( - { - handleToggle(false); - onClose(); - }} - /> + + {typeof children === 'function' ? children(handleClose) : children} + )} ); }; export const Playground: Story = { - args: { - children: ( + render: ({ ...args }) => ( + !open && onClose()}> + {(close) => ( + <> + + +

Flyout header

+ + + Flyout body + + + + + Cancel + + + + Save changes + + + + + )} + + ), +}; + +export const WithHeader: Story = { + parameters: { + codeSnippet: { + snippet: `const [isOpen, setIsOpen] = useState(false); +const titleId = 'flyoutWithHeaderTitle'; + +<> + setIsOpen(true)}>Open flyout with header + {isOpen && ( + setIsOpen(false)}> + + +

Keyboard shortcuts

+ + + +

+ A recommended minimal accessible flyout pattern for + read-only reference content. +

+ + + + +

+ Use a header when you need a clear title and context, even if there + are no footer actions. +

+
    +
  • Ctrl + / – Toggle help
    • +
  • Ctrl + K – Open command palette
    • +
  • Ctrl + F – Search within the page
    • +
+

+ Users can close the flyout with the default close button when + they're done. +

+ + + + )} +`, + }, + }, + render: () => { + const [isOpen, setIsOpen] = useState(false); + const titleId = 'flyoutWithHeaderTitle'; + + return ( <> - - -

Flyout header

- - - Flyout body - - Flyout footer - + setIsOpen(true)}>Open flyout with header + {isOpen && ( + { + setIsOpen(false); + onClose(); + }} + > + + +

Keyboard shortcuts

+ + + +

+ A recommended minimal accessible flyout pattern for + read-only reference content. +

+ + + + +

+ Use a header when you need a clear title and context, even if + there are no footer actions. +

+
    +
  • + Ctrl + / – Toggle help +
    • +
  • + Ctrl + K – Open command palette +
    • +
  • + Ctrl + F – Search within the page +
    • +
+

+ Users can close the flyout with the default close button when + they're done. +

+ + + + )} - ), + ); + }, +}; + +export const WithHeaderAndFooter: Story = { + parameters: { + codeSnippet: { + snippet: `const [isOpen, setIsOpen] = useState(false); +const titleId = 'flyoutWithFooterTitle'; + +<> + setIsOpen(true)}>Open flyout with header and footer + {isOpen && ( + setIsOpen(false)}> + + +

Edit dashboard

+ + + + + + + + + + + + + + + + + + + + {}} /> + + + + + + setIsOpen(false)}>Cancel + + + setIsOpen(false)}> + Save changes + + + + + + )} +`, + }, + }, + render: () => { + const [isOpen, setIsOpen] = useState(false); + const titleId = 'flyoutWithFooterTitle'; + + return ( + <> + setIsOpen(true)}>Open flyout with header and footer + {isOpen && ( + { + setIsOpen(false); + onClose(); + }} + > + + +

Edit dashboard

+ + + + + + + + + + + + + + + + + + + + {}} + /> + + + + + + { + setIsOpen(false); + onClose(); + }} + > + Cancel + + + + { + console.log('Dashboard saved'); + setIsOpen(false); + onClose(); + }} + > + Save changes + + + + + + )} + + ); + }, +}; + +export const WithHeaderAndMenu: Story = { + parameters: { + codeSnippet: { + snippet: `const [isOpen, setIsOpen] = useState(false); +const titleId = 'flyoutWithHeaderAndMenuTitle'; + +<> + setIsOpen(true)}>Open flyout with header and menu + {isOpen && ( + setIsOpen(false)} + flyoutMenuProps={{ + title: 'Flyout menu', + showBackButton: false, + }} + > + + +

Document details

+ + + +

+ Combine a menu bar with a header for navigable reference content. +

+ + + + +

+ Use a menu bar for shared controls (like a share button) + along with structured content in a header. +

+
    +
  • The menu bar provides navigation context
    • +
  • The header provides content structure
    • +
  • Perfect for drill-down or multi-step workflows
    • +
  • Back button is automatically displayed in managed session flyouts
    • +
+ + + + )} +`, + }, + }, + render: () => { + const [isOpen, setIsOpen] = useState(false); + const titleId = 'flyoutWithHeaderAndMenuTitle'; + + return ( + <> + setIsOpen(true)}>Open flyout with header and menu + {isOpen && ( + { + setIsOpen(false); + onClose(); + }} + flyoutMenuProps={{ + customActions: [ + { + iconType: 'share', + onClick: () => alert('Share clicked'), + 'aria-label': 'Share this document', + }, + ], + }} + > + + +

Document details

+ + + +

+ Combine a menu bar with a header for navigable reference content. +

+ + + + +

+ Use a menu bar when you need navigation controls (like a back button) + along with structured content in a header. +

+
    +
  • The menu bar provides navigation context
    • +
  • The header provides content structure
    • +
  • Perfect for drill-down or multi-step workflows
    • +
  • Back button is automatically displayed in managed session flyouts
    • +
+ + + + )} + + ); + }, +}; + +export const WithBanner: Story = { + parameters: { + codeSnippet: { + snippet: `const [isOpen, setIsOpen] = useState(false); +const titleId = 'flyoutWithBannerTitle'; + +<> + setIsOpen(true)}>Open flyout with banner + {isOpen && ( + setIsOpen(false)}> + + +

Edit notification settings

+ + + +

Changes affect how alerts are delivered to this user.

+ + + + +

Double-check the email and severity before saving.

+ + } + > + + + + + + + + + + + + + + + +

Use the banner for important, contextual notices.

+ + + + + + setIsOpen(false)}> + Cancel + + + + setIsOpen(false)} fill> + Save changes + + + + + + + + )} +`, + }, + }, + render: () => { + const [isOpen, setIsOpen] = useState(false); + const titleId = 'flyoutWithBannerTitle'; + + return ( + <> + setIsOpen(true)}> + Open flyout with banner + + + {isOpen && ( + { + setIsOpen(false); + onClose(); + }} + > + + +

Edit notification settings

+ + + +

Changes affect how alerts are delivered to this user.

+ + + + +

Double-check the email and severity before saving.

+ + } + > + + + + + + + + + + + + + + + { + setIsOpen(false); + onClose(); + }} + > + Cancel + + + + { + console.log('Dashboard saved'); + setIsOpen(false); + onClose(); + }} + > + Save changes + + + + + + )} + + ); }, - render: ({ ...args }) => , }; export const PushFlyouts: Story = { @@ -114,33 +693,416 @@ export const PushFlyouts: Story = { args: { type: 'push', pushAnimation: false, - pushMinBreakpoint: 'xs', + pushMinBreakpoint: 'm', }, render: ({ ...args }) => { + const [isOpen, setIsOpen] = useState(false); const fillerText = (

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu condimentum ipsum, nec ornare metus. Sed egestas elit nec placerat suscipit. Cras pulvinar nisi eget enim sodales fringilla. Aliquam - lobortis lorem at ornare aliquet. Mauris laoreet laoreet mollis. - Pellentesque aliquet tortor dui, non luctus turpis pulvinar vitae. - Nunc ultrices scelerisque erat eu rutrum. Nam at ligula enim. Ut nec - nisl faucibus, euismod neque ut, aliquam nisl. Donec eu ante ut arcu - rutrum blandit nec ac nisl. In elementum id enim vitae aliquam. In - sagittis, neque vitae ultricies interdum, sapien justo efficitur - ligula, sit amet fermentum nisl magna sit amet turpis. Nulla facilisi. - Proin nec viverra mi. Morbi dolor arcu, ornare non consequat et, - viverra dapibus tellus. + lobortis lorem at ornare aliquet.

); + return ( +
+ setIsOpen(!isOpen)}> + Toggle push flyout + + + +

The content will resized to fit the flyout.

 + + {isOpen && ( + { + setIsOpen(false); + onClose(); + }} + > + {fillerText} + + )} +
+ ); + }, +}; + +export const Resizable: Story = { + parameters: { + codeSnippet: { + snippet: `const [isOpen, setIsOpen] = useState(false); +const titleId = 'resizableFlyoutTitle'; + +<> + setIsOpen(true)}> + Open resizable flyout + + + +

The content will resized to fit the flyout.

 + + {isOpen && ( + setIsOpen(false)} + minWidth={420} + maxWidth={800} + > + + +

Document details

+ + + +

+ Drag the left edge of the flyout to resize when you need + more space for wide content. +

+ + + + + +

+ Resizable flyouts are useful when content width is + unpredictable, like long field values or JSON payloads. +

+ + + + {\`{ + "id": "a2f9c4d1-39c2-4f89-a81e-93a3f42c1b7e", + "user": { + "name": "elastic-observability", + "email": "alerts@example.com" + }, + "message": "The flyout width may need to grow to keep this readable.", + "tags": ["alert", "observability", "resizable"] +}\`} + + + + + + + setIsOpen(false)}> + Close + + + + + + )} +`, + }, + }, + render: () => { + const [isOpen, setIsOpen] = useState(false); + const titleId = 'resizableFlyoutTitle'; + + return ( + <> + setIsOpen(true)}> + Open resizable flyout + + + {isOpen && ( + { + setIsOpen(false); + onClose(event); + }} + > + + +

Document details

+ + + +

+ Drag the left edge of the flyout to resize when you + need more space for wide content. +

+ + + + + +

+ Resizable flyouts are useful when content width is + unpredictable, like long field values or JSON payloads. +

+ + + + {`{ + "id": "a2f9c4d1-39c2-4f89-a81e-93a3f42c1b7e", + "user": { + "name": "elastic-observability", + "email": "alerts@example.com" + }, + "message": "The flyout width may need to grow to keep this readable.", + "tags": ["alert", "observability", "resizable"] +}`} + + + + + + + setIsOpen(false)}> + Close + + + + + + )} + + ); + }, +}; + +export const ResizableWithPush: Story = { + parameters: { + codeSnippet: { + snippet: `const [isOpen, setIsOpen] = useState(false); +const titleId = 'resizablePushFlyoutTitle'; + +
+ setIsOpen(true)}> + Open resizable push flyout + + + +

The content will resized to fit the flyout.

 + + {isOpen && ( + setIsOpen(false)} + minWidth={420} + maxWidth={800} + > + + +

Document details

+ + + +

+ This resizable flyout pushes page content instead of + overlaying it. Drag the left edge to resize. +

+ + + + + +

+ Combine resizable with push type when you want users to + reference page content while viewing flyout details. +

+ + + +{\`{ + "id": "a2f9c4d1-39c2-4f89-a81e-93a3f42c1b7e", + "user": { + "name": "elastic-observability", + "email": "alerts@example.com" + }, + "message": "The flyout width may need to grow to keep this readable.", + "tags": ["alert", "observability", "resizable"] +}\`} + + + + + + + setIsOpen(false)}> + Close + + + + + + )} +
`, + }, + }, + render: () => { + const [isOpen, setIsOpen] = useState(false); + const titleId = 'resizablePushFlyoutTitle'; + + return ( +
+ setIsOpen(true)}> + Open resizable push flyout + + + +

The content will resized to fit the flyout.

 + + + {isOpen && ( + { + setIsOpen(false); + onClose(event); + }} + > + + +

Document details

+ + + +

+ This resizable flyout pushes page content instead of + overlaying it. Drag the left edge to resize. +

+ + + + + +

+ Combine resizable with push type when you want users to + reference page content while viewing flyout details. +

+ + + + {`{ + "id": "a2f9c4d1-39c2-4f89-a81e-93a3f42c1b7e", + "user": { + "name": "elastic-observability", + "email": "alerts@example.com" + }, + "message": "The flyout width may need to grow to keep this readable.", + "tags": ["alert", "observability", "resizable"] +}`} + + + + + + + setIsOpen(false)}> + Close + + + + + + )} +
+ ); + }, +}; + +export const BasicBodyOnly: Story = { + parameters: { + codeSnippet: { + snippet: `const [isOpen, setIsOpen] = useState(false); + +<> + setIsOpen(true)}>Open flyout with body only + {isOpen && ( + setIsOpen(false)} + > + + +

+ Use this minimal flyout for quick supporting content that doesn't + require a header or footer. +

+
    +
  • Show brief contextual help or tips.
    • +
  • Display read-only details or metadata.
    • +
+ + + + + )} +`, + }, + }, + render: () => { + const [isOpen, setIsOpen] = useState(false); + return ( <> - - {fillerText} - - {fillerText} + setIsOpen(true)}>Open flyout with body only + {isOpen && ( + { + setIsOpen(false); + onClose(); + }} + > + + +

+ Use this minimal flyout for quick supporting content that + doesn't require a header or footer. +

+
    +
  • Show brief contextual help or tips.
    • +
  • Display read-only details or metadata.
    • +
+ + + + + )} ); }, @@ -172,7 +1134,7 @@ export const ManualReturnFocus: Story = { return ( <> - + Manual trigger diff --git a/packages/eui/src/components/flyout/manager/flyout_manager.stories.tsx b/packages/eui/src/components/flyout/manager/flyout_manager.stories.tsx index 7cf1641986f..0d96b48a299 100644 --- a/packages/eui/src/components/flyout/manager/flyout_manager.stories.tsx +++ b/packages/eui/src/components/flyout/manager/flyout_manager.stories.tsx @@ -11,8 +11,11 @@ import type { Meta, StoryObj } from '@storybook/react'; import React, { useState } from 'react'; import { EuiBreakpointSize } from '../../../services'; -import { EuiButton } from '../../button'; +import { EuiButton, EuiButtonEmpty } from '../../button'; +import { EuiFlexGroup, EuiFlexItem } from '../../flex'; +import { EuiHorizontalRule } from '../../horizontal_rule'; import { EuiSpacer } from '../../spacer'; +import { EuiTitle } from '../../title'; import { EuiText } from '../../text'; import { FLYOUT_TYPES, EuiFlyout } from '../flyout'; import { EuiFlyoutBody } from '../flyout_body'; @@ -171,8 +174,10 @@ const StatefulFlyout: React.FC = ({ childFlyoutResizable, ...args }) => { - const [isMainOpen, setIsMainOpen] = useState(true); + const [isMainOpen, setIsMainOpen] = useState(false); const [isChildOpen, setIsChildOpen] = useState(false); + const [isSecondChildOpen, setIsSecondChildOpen] = useState(false); + const [isSecondSessionOpen, setIsSecondSessionOpen] = useState(false); const openMain = () => { setIsMainOpen(true); @@ -181,6 +186,7 @@ const StatefulFlyout: React.FC = ({ const closeMain = () => { setIsMainOpen(false); setIsChildOpen(false); + setIsSecondChildOpen(false); playgroundActions.log('Parent flyout closed'); }; const openChild = () => { @@ -189,31 +195,76 @@ const StatefulFlyout: React.FC = ({ }; const closeChild = () => { setIsChildOpen(false); + setIsSecondChildOpen(false); playgroundActions.log('Child flyout closed'); }; + const openSecondChild = () => { + setIsSecondChildOpen(true); + playgroundActions.log('Second child flyout opened'); + }; + const closeSecondChild = () => { + setIsSecondChildOpen(false); + setIsChildOpen(false); + playgroundActions.log('Second child flyout closed'); + }; + const openSecondSession = () => { + setIsSecondSessionOpen(true); + playgroundActions.log('Second session opened'); + }; + const closeSecondSession = () => { + setIsSecondSessionOpen(false); + playgroundActions.log('Second session closed'); + }; const layoutMode = useFlyoutLayoutMode(); return ( <> - -

- This is the main page content. Watch how it behaves when the flyout - type changes. -

-

- Current layout mode: {layoutMode} -

- - - {isMainOpen ? ( - Close Main Flyout - ) : ( - Open Main Flyout - )} - + + + +

+ Managed flyout session +

+ + + + +

+ This is a managed flyout session. Navigate from one main flyout to another. +
+ Note that child flyouts are not stored in the session history, so they will not be accessible via the history popover. +

+ + + + + {isMainOpen ? 'Close' : 'Open'} main flyout + + + + + +

+ Managed flyouts appear side-by-side or stacked based on the viewport width. +

+ + + + +

Resize the browser window to see how the layout mode changes. +
+ Current layout mode: {layoutMode}. +

+ + + {isMainOpen && ( = ({ ownFocus={false} resizable={mainFlyoutResizable} aria-label={`Main Flyout Menu (${mainSize})`} - {...args} onClose={closeMain} > - +

This is the main flyout content.

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum - neque sequi illo, cum rerum quia ab animi velit sit incidunt - inventore temporibus eaque nam veritatis amet maxime maiores - optio quam? -

- {!isChildOpen ? ( - Open child panel - ) : ( - Close child panel - )} + + {isChildOpen ? 'Close' : 'Open'} child panel + {isChildOpen && ( - +

This is the child flyout content.

Size restrictions apply:

    @@ -267,14 +312,54 @@ const StatefulFlyout: React.FC = ({ is "fill"
- -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. - Dolorum neque sequi illo, cum rerum quia ab animi velit - sit incidunt inventore temporibus eaque nam veritatis amet - maxime maiores optio quam? -

+ + + + + {isSecondChildOpen ? 'Close' : 'Open'} another child + + + + + Open another main flyout + + + + {isSecondChildOpen && ( + + + +

This is the second child flyout.

+
    +
  • + Child flyouts are not stored in the session history, so they will not be accessible via the history popover. +
    • +
  • + Closing any child flyout will close all child flyouts + in the session. +
    • +
+ + + + )} {showFooter && ( @@ -296,6 +381,43 @@ const StatefulFlyout: React.FC = ({ )} )} + {isSecondSessionOpen && ( + + + +

+ This is a completely separate flyout session, independent from + the main session. In other words, a second main flyout. +

+
    +
  • + It was opened from a child flyout but starts its own session with{' '} + session="start", so it's a sibling + session rather than a nested child. +
    • +
  • + Notice how the flyout menu shows this as a separate session that + you can navigate to independently. +
    • +
  • + Upon closing this flyout, the previous main flyout will be restored. +
    • +
+ + + + )} ); }; diff --git a/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx b/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx index 5ea91759a1d..c8294c0dc92 100644 --- a/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx +++ b/packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx @@ -30,6 +30,7 @@ import { EuiFlyoutHeader, EuiPanel, EuiProvider, + EuiHorizontalRule, EuiSpacer, EuiSwitch, EuiSwitchEvent, @@ -306,8 +307,7 @@ const MultiSessionFlyoutDemo: React.FC = () => { const listItems = useMemo( () => [ { - title: 'Session A: main size = s, child size = s', - description: ( + title: ( { hasChildBackground={hasChildBackground} /> ), + description: 'Session A: main size = s, child size = s', }, { - title: 'Session B: main size = m, child size = s', - description: ( + title: ( { hasChildBackground={hasChildBackground} /> ), + description: 'Session B: main size = m, child size = s', }, { - title: 'Session C: main size = s, child size = fill', - description: ( + title: ( { hasChildBackground={hasChildBackground} /> ), + description: 'Session C: main size = s, child size = fill', }, { - title: 'Session D: main size = fill, child size = s', - description: ( + title: ( { hasChildBackground={hasChildBackground} /> ), + description: 'Session D: main size = fill, child size = s', }, { - title: 'Session E: main size = fill', - description: ( + title: ( { hasChildBackground={hasChildBackground} /> ), + description: 'Session E: main size = fill', }, { - title: - 'Session F: main size = undefined, child size = fill (maxWidth 1000px)', - description: ( + title: ( { hasChildBackground={hasChildBackground} /> ), + description: + 'Session F: main size = undefined, child size = fill (maxWidth 1000px)', }, { - title: 'Session G: main size = fill (maxWidth 1000px), child size = s', - description: ( + title: ( { hasChildBackground={hasChildBackground} /> ), + description: 'Session G: main size = fill (maxWidth 1000px), child size = s', }, { - title: 'Session H: main size = s, child size = s, ownFocus = true', - description: ( + title: ( { hasChildBackground={hasChildBackground} /> ), + description: 'Session H: main size = s, child size = s, ownFocus = true', }, { - title: 'Non-session flyout', - description: , + title: , + description: 'Non-session flyout', }, ], [flyoutType, hasChildBackground] @@ -414,21 +415,26 @@ const MultiSessionFlyoutDemo: React.FC = () => { return ( <> - - - setChildBackgroundShaded((prev) => !prev)} - /> - + + + + + + setChildBackgroundShaded((prev) => !prev)} + /> + + + diff --git a/packages/eui/src/components/flyout/flyout_body.stories.tsx b/packages/eui/src/components/flyout/subcomponents/flyout_body.stories.tsx similarity index 78% rename from packages/eui/src/components/flyout/flyout_body.stories.tsx rename to packages/eui/src/components/flyout/subcomponents/flyout_body.stories.tsx index 571553fbf8e..4a15f88d5a9 100644 --- a/packages/eui/src/components/flyout/flyout_body.stories.tsx +++ b/packages/eui/src/components/flyout/subcomponents/flyout_body.stories.tsx @@ -9,13 +9,13 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { EuiCallOut } from '../call_out'; -import { EuiFlyout } from './flyout'; -import { EuiFlyoutBody, EuiFlyoutBodyProps } from './flyout_body'; -import { LOKI_SELECTORS } from '../../../.storybook/loki'; +import { EuiCallOut } from '../../call_out'; +import { EuiFlyout } from '../flyout'; +import { EuiFlyoutBody, EuiFlyoutBodyProps } from '../flyout_body'; +import { LOKI_SELECTORS } from '../../../../.storybook/loki'; const meta: Meta = { - title: 'Layout/EuiFlyout/EuiFlyoutBody', + title: 'Layout/EuiFlyout/Subcomponents/EuiFlyoutBody', component: EuiFlyoutBody, argTypes: { // TODO: editable banner JSX @@ -29,6 +29,7 @@ const meta: Meta = { // Flyout content is rendered in a portal chromeSelector: LOKI_SELECTORS.portal, }, + docsOnly: true, }, }; @@ -46,3 +47,4 @@ export const Playground: Story = { ), }; + diff --git a/packages/eui/src/components/flyout/flyout_footer.stories.tsx b/packages/eui/src/components/flyout/subcomponents/flyout_footer.stories.tsx similarity index 74% rename from packages/eui/src/components/flyout/flyout_footer.stories.tsx rename to packages/eui/src/components/flyout/subcomponents/flyout_footer.stories.tsx index 78b37763cf9..9d9720440e3 100644 --- a/packages/eui/src/components/flyout/flyout_footer.stories.tsx +++ b/packages/eui/src/components/flyout/subcomponents/flyout_footer.stories.tsx @@ -9,14 +9,14 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { EuiButton } from '../button'; -import { EuiFlyout } from './flyout'; -import { EuiFlyoutBody } from './flyout_body'; -import { EuiFlyoutFooter, EuiFlyoutFooterProps } from './flyout_footer'; -import { LOKI_SELECTORS } from '../../../.storybook/loki'; +import { EuiButton } from '../../button'; +import { EuiFlyout } from '../flyout'; +import { EuiFlyoutBody } from '../flyout_body'; +import { EuiFlyoutFooter, EuiFlyoutFooterProps } from '../flyout_footer'; +import { LOKI_SELECTORS } from '../../../../.storybook/loki'; const meta: Meta = { - title: 'Layout/EuiFlyout/EuiFlyoutFooter', + title: 'Layout/EuiFlyout/Subcomponents/EuiFlyoutFooter', component: EuiFlyoutFooter, argTypes: { // TODO: editable children @@ -26,6 +26,7 @@ const meta: Meta = { // Flyout content is rendered in a portal chromeSelector: LOKI_SELECTORS.portal, }, + docsOnly: true, }, }; @@ -43,3 +44,4 @@ export const Playground: Story = { ), }; + diff --git a/packages/eui/src/components/flyout/flyout_header.stories.tsx b/packages/eui/src/components/flyout/subcomponents/flyout_header.stories.tsx similarity index 78% rename from packages/eui/src/components/flyout/flyout_header.stories.tsx rename to packages/eui/src/components/flyout/subcomponents/flyout_header.stories.tsx index a0766e0cff3..a9af098cf74 100644 --- a/packages/eui/src/components/flyout/flyout_header.stories.tsx +++ b/packages/eui/src/components/flyout/subcomponents/flyout_header.stories.tsx @@ -9,13 +9,13 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { EuiTitle } from '../title'; -import { EuiFlyout } from './flyout'; -import { EuiFlyoutHeader, EuiFlyoutHeaderProps } from './flyout_header'; -import { LOKI_SELECTORS } from '../../../.storybook/loki'; +import { EuiTitle } from '../../title'; +import { EuiFlyout } from '../flyout'; +import { EuiFlyoutHeader, EuiFlyoutHeaderProps } from '../flyout_header'; +import { LOKI_SELECTORS } from '../../../../.storybook/loki'; const meta: Meta = { - title: 'Layout/EuiFlyout/EuiFlyoutHeader', + title: 'Layout/EuiFlyout/Subcomponents/EuiFlyoutHeader', component: EuiFlyoutHeader, argTypes: { // TODO: editable children JSX @@ -29,6 +29,7 @@ const meta: Meta = { // Flyout content is rendered in a portal chromeSelector: LOKI_SELECTORS.portal, }, + docsOnly: true, }, }; @@ -49,3 +50,4 @@ export const Playground: Story = { ), }; + diff --git a/packages/eui/src/components/flyout/flyout_menu.stories.tsx b/packages/eui/src/components/flyout/subcomponents/flyout_menu.stories.tsx similarity index 88% rename from packages/eui/src/components/flyout/flyout_menu.stories.tsx rename to packages/eui/src/components/flyout/subcomponents/flyout_menu.stories.tsx index 44e571933d2..8eb911aab2e 100644 --- a/packages/eui/src/components/flyout/flyout_menu.stories.tsx +++ b/packages/eui/src/components/flyout/subcomponents/flyout_menu.stories.tsx @@ -10,12 +10,12 @@ import React, { useState } from 'react'; import { action } from '@storybook/addon-actions'; import { Meta, StoryObj } from '@storybook/react'; -import { EuiButton } from '../button'; -import { EuiSpacer } from '../spacer'; -import { EuiText } from '../text'; -import { EuiFlyout } from './flyout'; -import { EuiFlyoutBody } from './flyout_body'; -import { EuiFlyoutMenu, EuiFlyoutMenuProps } from './flyout_menu'; +import { EuiButton } from '../../button'; +import { EuiSpacer } from '../../spacer'; +import { EuiText } from '../../text'; +import { EuiFlyout } from '../flyout'; +import { EuiFlyoutBody } from '../flyout_body'; +import { EuiFlyoutMenu, EuiFlyoutMenuProps } from '../flyout_menu'; interface Args extends EuiFlyoutMenuProps { showCustomActions: boolean; @@ -23,7 +23,7 @@ interface Args extends EuiFlyoutMenuProps { } const meta: Meta = { - title: 'Layout/EuiFlyout/EuiFlyoutMenu', + title: 'Layout/EuiFlyout/Subcomponents/EuiFlyoutMenu', component: EuiFlyoutMenu, argTypes: { showBackButton: { control: 'boolean' }, @@ -39,6 +39,9 @@ const meta: Meta = { showCustomActions: true, showHistoryItems: true, }, + parameters: { + docsOnly: true, + }, }; export default meta; @@ -119,3 +122,4 @@ export const MenuBarExample: StoryObj = { name: 'Playground', render: (args) => , }; + diff --git a/packages/eui/src/components/flyout/flyout_resizable.stories.tsx b/packages/eui/src/components/flyout/subcomponents/flyout_resizable.stories.tsx similarity index 84% rename from packages/eui/src/components/flyout/flyout_resizable.stories.tsx rename to packages/eui/src/components/flyout/subcomponents/flyout_resizable.stories.tsx index 5e1afbf47a4..8d1925fe2bc 100644 --- a/packages/eui/src/components/flyout/flyout_resizable.stories.tsx +++ b/packages/eui/src/components/flyout/subcomponents/flyout_resizable.stories.tsx @@ -8,20 +8,20 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { LOKI_SELECTORS } from '../../../.storybook/loki'; -import { moveStorybookControlsToCategory } from '../../../.storybook/utils'; +import { LOKI_SELECTORS } from '../../../../.storybook/loki'; +import { moveStorybookControlsToCategory } from '../../../../.storybook/utils'; -import { EuiText } from '../text'; -import { EuiFlyoutBody } from './flyout_body'; +import { EuiText } from '../../text'; +import { EuiFlyoutBody } from '../flyout_body'; -import defaultFlyoutMeta from './flyout.stories'; +import defaultFlyoutMeta from '../flyout.stories'; import { EuiFlyoutResizable, EuiFlyoutResizableProps, -} from './flyout_resizable'; +} from '../flyout_resizable'; const meta: Meta = { - title: 'Layout/EuiFlyout/EuiFlyoutResizable', + title: 'Layout/EuiFlyout/Subcomponents/EuiFlyoutResizable', component: EuiFlyoutResizable as any, argTypes: { // TODO: `size` control isn't working correctly for whatever reason (appears to be a Storybook bug @@ -40,6 +40,7 @@ const meta: Meta = { // Flyout content is rendered in a portal chromeSelector: LOKI_SELECTORS.portal, }, + docsOnly: true, }, }; // Stateful flyouts are already tested via default EuiFlyout stories, hide non-relevant props @@ -86,3 +87,4 @@ export const Playground: Story = { hideCloseButton: true, }, }; +