From 75d5b5afe7179dbc2764dd48078a8712b356366c Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Tue, 12 Mar 2024 18:45:27 +0100 Subject: [PATCH] [Storybook] Add explicit sidebar structure (#7559) --- .storybook/preview.tsx | 23 ++++++++++++++++++- .../screen_reader_live.stories.tsx | 2 +- .../screen-reader_only.stories.tsx | 2 +- .../skip_link/skip_link.stories.tsx | 2 +- .../accordion/accordion.stories.tsx | 2 +- .../aspect_ratio/aspect_ratio.stories.tsx | 2 +- .../auto_sizer/auto_sizer.stories.tsx | 2 +- src/components/avatar/avatar.stories.tsx | 2 +- src/components/badge/badge.stories.tsx | 2 +- .../badge/badge_group/badge_group.stories.tsx | 2 +- .../badge/beta_badge/beta_badge.stories.tsx | 2 +- .../badge_notification.stories.tsx | 2 +- src/components/beacon/beacon.stories.tsx | 2 +- .../bottom_bar/bottom_bar.stories.tsx | 2 +- .../breadcrumbs/breadcrumbs.stories.tsx | 2 +- src/components/button/button.stories.tsx | 2 +- .../button_empty/button_empty.stories.tsx | 2 +- .../button_group/button_group.stories.tsx | 2 +- .../button_icon/button_icon.stories.tsx | 2 +- src/components/call_out/call_out.stories.tsx | 2 +- src/components/card/card.stories.tsx | 2 +- .../checkable_card/checkable_card.stories.tsx | 2 +- src/components/code/code.stories.tsx | 2 +- src/components/code/code_block.stories.tsx | 2 +- .../collapsible_nav.stories.tsx | 2 +- .../collapsible_nav_group.stories.tsx | 2 +- .../collapsible_nav_beta.stories.tsx | 2 +- .../collapsible_nav_group.stories.tsx | 2 +- .../collapsed/collapsed_nav_item.stories.tsx | 2 +- .../collapsible_nav_item.stories.tsx | 2 +- .../color_palette_display.stories.tsx | 2 +- .../color_palette_picker.stories.tsx | 2 +- .../color_picker/color_picker.stories.tsx | 2 +- .../color_picker_swatch.stories.tsx | 2 +- .../combo_box/combo_box.stories.tsx | 2 +- .../comment_list/comment.stories.tsx | 2 +- .../comment_list/comment_event.stories.tsx | 2 +- .../comment_list/comment_list.stories.tsx | 2 +- src/components/context/context.stories.tsx | 2 +- .../context_menu/context_menu.stories.tsx | 2 +- .../context_menu_item.stories.tsx | 2 +- .../context_menu_panel.stories.tsx | 2 +- src/components/copy/copy.stories.tsx | 2 +- .../empty_prompt/empty_prompt.stories.tsx | 2 +- .../error_boundary/error_boundary.stories.tsx | 2 +- .../expression/expression.stories.tsx | 2 +- src/components/facet/facet_button.stories.tsx | 2 +- src/components/facet/facet_group.stories.tsx | 2 +- .../filter_group/filter_button.stories.tsx | 2 +- .../filter_group/filter_group.stories.tsx | 2 +- src/components/flex/flex_grid.stories.tsx | 2 +- src/components/flex/flex_group.stories.tsx | 2 +- src/components/flex/flex_item.stories.tsx | 2 +- src/components/flyout/flyout.stories.tsx | 2 +- src/components/flyout/flyout_body.stories.tsx | 2 +- .../flyout/flyout_footer.stories.tsx | 2 +- .../flyout/flyout_header.stories.tsx | 2 +- .../flyout/flyout_resizable.stories.tsx | 2 +- .../focus_trap/focus_trap.stories.tsx | 2 +- .../field_number/field_number.stories.tsx | 2 +- src/components/header/header.stories.tsx | 2 +- .../header_alert/header_alert.stories.tsx | 2 +- .../header_breadcrumbs.stories.tsx | 2 +- .../header_links/header_link.stories.tsx | 2 +- .../header_links/header_links.stories.tsx | 2 +- .../header_logo/header_logo.stories.tsx | 2 +- .../header_section/header_section.stories.tsx | 2 +- .../header_section_item.stories.tsx | 2 +- .../header_section_item_button.stories.tsx | 2 +- src/components/health/health.stories.tsx | 2 +- .../highlight/highlight.stories.tsx | 2 +- .../horizontal_rule.stories.tsx | 2 +- .../key_pad_menu_item.stories.tsx | 2 +- src/components/page/page.stories.tsx | 2 +- .../page/page_body/page_body.stories.tsx | 2 +- .../page/page_header/page_header.stories.tsx | 2 +- .../page_header_section.stories.tsx | 2 +- .../page_section/page_section.stories.tsx | 2 +- .../page_sidebar/page_sidebar.stories.tsx | 2 +- .../split_panel/split_panel_inner.stories.tsx | 2 +- .../split_panel/split_panel_outer.stories.tsx | 2 +- src/components/provider/provider.stories.tsx | 2 +- .../resizable_button.stories.tsx | 2 +- .../resizable_collapse_button.stories.tsx | 2 +- .../responsive/hide_for.stories.tsx | 2 +- src/components/side_nav/side_nav.stories.tsx | 2 +- .../text_block_truncate.stories.tsx | 2 +- .../text_truncate/text_truncate.stories.tsx | 2 +- .../tree_view/tree_view.stories.tsx | 2 +- .../tree_view/tree_view_item.stories.tsx | 2 +- src/services/theme/provider.stories.tsx | 2 +- 91 files changed, 112 insertions(+), 91 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 857654a3218..ac2f6d463c7 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -18,6 +18,7 @@ import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; */ import { typeToPathMap } from '../src/components/icon/icon_map'; import { appendIconComponentCache } from '../src/components/icon/icon'; + const iconCache: Record = {}; Object.entries(typeToPathMap).forEach(async ([iconType, iconFileName]) => { @@ -96,7 +97,27 @@ const preview: Preview = { parameters: { actions: { argTypesRegex: '^on[A-Z].*' }, backgrounds: { disable: true }, // Use colorMode instead - options: { showPanel: true }, // default to showing the controls panel + options: { + showPanel: true, // default to showing the controls panel + storySort: { + method: 'alphabetical', + order: [ + // order option as well as story titles require static content (dynamic values or references don't work) + // https://storybook.js.org/docs/api/parameters#optionsstorysort + // https://storybook.js.org/docs/writing-stories#default-export + 'Theming', + 'Templates', + 'Layout', + 'Navigation', + 'Display', + 'Forms', + 'Tabular Content', + 'Editors & Syntax', + 'Utilities', + '*', + ], + }, + }, controls: { expanded: true, sort: 'requiredFirst', diff --git a/src/components/accessibility/screen_reader_live/screen_reader_live.stories.tsx b/src/components/accessibility/screen_reader_live/screen_reader_live.stories.tsx index dee615cda21..561afb05324 100644 --- a/src/components/accessibility/screen_reader_live/screen_reader_live.stories.tsx +++ b/src/components/accessibility/screen_reader_live/screen_reader_live.stories.tsx @@ -14,7 +14,7 @@ import { } from './screen_reader_live'; const meta: Meta = { - title: 'EuiScreenReaderLive', + title: 'Utilities/EuiScreenReaderLive', component: EuiScreenReaderLive, args: { // Component defaults diff --git a/src/components/accessibility/screen_reader_only/screen-reader_only.stories.tsx b/src/components/accessibility/screen_reader_only/screen-reader_only.stories.tsx index f735d995fd7..4340f68826b 100644 --- a/src/components/accessibility/screen_reader_only/screen-reader_only.stories.tsx +++ b/src/components/accessibility/screen_reader_only/screen-reader_only.stories.tsx @@ -15,7 +15,7 @@ import { } from './screen_reader_only'; const meta: Meta = { - title: 'EuiScreenReaderOnly', + title: 'Utilities/EuiScreenReaderOnly', component: EuiScreenReaderOnly, args: { // Component defaults diff --git a/src/components/accessibility/skip_link/skip_link.stories.tsx b/src/components/accessibility/skip_link/skip_link.stories.tsx index a0d6b185945..8544dfcbf99 100644 --- a/src/components/accessibility/skip_link/skip_link.stories.tsx +++ b/src/components/accessibility/skip_link/skip_link.stories.tsx @@ -12,7 +12,7 @@ import { hideStorybookControls } from '../../../../.storybook/utils'; import { EuiSkipLink, EuiSkipLinkProps } from './skip_link'; const meta: Meta = { - title: 'EuiSkipLink', + title: 'Utilities/EuiSkipLink', component: EuiSkipLink, args: { // Component defaults diff --git a/src/components/accordion/accordion.stories.tsx b/src/components/accordion/accordion.stories.tsx index d53c2d3b662..d948ad19074 100644 --- a/src/components/accordion/accordion.stories.tsx +++ b/src/components/accordion/accordion.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiAccordion, EuiAccordionProps } from './accordion'; const meta: Meta = { - title: 'EuiAccordion', + title: 'Layout/EuiAccordion', component: EuiAccordion, argTypes: { forceState: { diff --git a/src/components/aspect_ratio/aspect_ratio.stories.tsx b/src/components/aspect_ratio/aspect_ratio.stories.tsx index 78a4c0a41b7..052526a1868 100644 --- a/src/components/aspect_ratio/aspect_ratio.stories.tsx +++ b/src/components/aspect_ratio/aspect_ratio.stories.tsx @@ -13,7 +13,7 @@ import { disableStorybookControls } from '../../../.storybook/utils'; import { EuiAspectRatio, EuiAspectRatioProps } from './aspect_ratio'; const meta: Meta = { - title: 'EuiAspectRatio', + title: 'Display/EuiAspectRatio', component: EuiAspectRatio, }; diff --git a/src/components/auto_sizer/auto_sizer.stories.tsx b/src/components/auto_sizer/auto_sizer.stories.tsx index a5c3f72abdf..c0bf7c5d427 100644 --- a/src/components/auto_sizer/auto_sizer.stories.tsx +++ b/src/components/auto_sizer/auto_sizer.stories.tsx @@ -15,7 +15,7 @@ import { EuiPanel } from '../panel'; import { EuiAutoSizer, EuiAutoSizerProps, EuiAutoSize } from './auto_sizer'; const meta: Meta = { - title: 'EuiAutoSizer', + title: 'Utilities/EuiAutoSizer', component: EuiAutoSizer, args: { // Component defaults diff --git a/src/components/avatar/avatar.stories.tsx b/src/components/avatar/avatar.stories.tsx index 048bd05f0b8..e41ac6667bc 100644 --- a/src/components/avatar/avatar.stories.tsx +++ b/src/components/avatar/avatar.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiAvatar, EuiAvatarProps } from './avatar'; const meta: Meta = { - title: 'EuiAvatar', + title: 'Display/EuiAvatar', component: EuiAvatar, argTypes: { initialsLength: { diff --git a/src/components/badge/badge.stories.tsx b/src/components/badge/badge.stories.tsx index b031b0c09e4..ca063053d33 100644 --- a/src/components/badge/badge.stories.tsx +++ b/src/components/badge/badge.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiBadge, EuiBadgeProps } from './badge'; const meta: Meta = { - title: 'EuiBadge', + title: 'Display/EuiBadge/EuiBadge', component: EuiBadge, argTypes: { iconType: { control: 'text' }, diff --git a/src/components/badge/badge_group/badge_group.stories.tsx b/src/components/badge/badge_group/badge_group.stories.tsx index 99d40b1d106..622205d17d5 100644 --- a/src/components/badge/badge_group/badge_group.stories.tsx +++ b/src/components/badge/badge_group/badge_group.stories.tsx @@ -13,7 +13,7 @@ import { EuiBadge } from '../badge'; import { EuiBadgeGroup, EuiBadgeGroupProps } from './badge_group'; const meta: Meta = { - title: 'EuiBadgeGroup', + title: 'Display/EuiBadge/EuiBadgeGroup', component: EuiBadgeGroup, args: { // Component defaults diff --git a/src/components/badge/beta_badge/beta_badge.stories.tsx b/src/components/badge/beta_badge/beta_badge.stories.tsx index 3298df62165..b3b1004c289 100644 --- a/src/components/badge/beta_badge/beta_badge.stories.tsx +++ b/src/components/badge/beta_badge/beta_badge.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiBetaBadge, EuiBetaBadgeProps } from './beta_badge'; const meta: Meta = { - title: 'EuiBetaBadge', + title: 'Display/EuiBetaBadge', component: EuiBetaBadge, argTypes: { iconType: { control: 'text' }, diff --git a/src/components/badge/notification_badge/badge_notification.stories.tsx b/src/components/badge/notification_badge/badge_notification.stories.tsx index 239df9aebe1..05f67509de2 100644 --- a/src/components/badge/notification_badge/badge_notification.stories.tsx +++ b/src/components/badge/notification_badge/badge_notification.stories.tsx @@ -14,7 +14,7 @@ import { } from './badge_notification'; const meta: Meta = { - title: 'EuiNotificationBadge', + title: 'Display/EuiNotificationBadge', component: EuiNotificationBadge, args: { // Component defaults diff --git a/src/components/beacon/beacon.stories.tsx b/src/components/beacon/beacon.stories.tsx index 7f587bf1230..c837f455bc2 100644 --- a/src/components/beacon/beacon.stories.tsx +++ b/src/components/beacon/beacon.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiBeacon, EuiBeaconProps } from './beacon'; const meta: Meta = { - title: 'EuiBeacon', + title: 'Utilities/EuiBeacon', component: EuiBeacon, args: { // Component defaults diff --git a/src/components/bottom_bar/bottom_bar.stories.tsx b/src/components/bottom_bar/bottom_bar.stories.tsx index 25d86631587..0f295fc118c 100644 --- a/src/components/bottom_bar/bottom_bar.stories.tsx +++ b/src/components/bottom_bar/bottom_bar.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiBottomBar, EuiBottomBarProps } from './bottom_bar'; const meta: Meta = { - title: 'EuiBottomBar', + title: 'Layout/EuiBottomBar', component: EuiBottomBar, argTypes: { top: { control: 'number' }, diff --git a/src/components/breadcrumbs/breadcrumbs.stories.tsx b/src/components/breadcrumbs/breadcrumbs.stories.tsx index df822f86782..8bab5a82205 100644 --- a/src/components/breadcrumbs/breadcrumbs.stories.tsx +++ b/src/components/breadcrumbs/breadcrumbs.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiBreadcrumbs, EuiBreadcrumbsProps } from './breadcrumbs'; const meta: Meta = { - title: 'EuiBreadcrumbs', + title: 'Navigation/EuiBreadcrumbs', component: EuiBreadcrumbs, args: { // Component defaults diff --git a/src/components/button/button.stories.tsx b/src/components/button/button.stories.tsx index 409027df8ad..7dcf3b273e8 100644 --- a/src/components/button/button.stories.tsx +++ b/src/components/button/button.stories.tsx @@ -12,7 +12,7 @@ import { disableStorybookControls } from '../../../.storybook/utils'; import { EuiButton, Props as EuiButtonProps } from './button'; const meta: Meta = { - title: 'EuiButton', + title: 'Navigation/EuiButton', component: EuiButton, argTypes: { iconType: { control: 'text' }, diff --git a/src/components/button/button_empty/button_empty.stories.tsx b/src/components/button/button_empty/button_empty.stories.tsx index e34c206a60f..a76879b1527 100644 --- a/src/components/button/button_empty/button_empty.stories.tsx +++ b/src/components/button/button_empty/button_empty.stories.tsx @@ -12,7 +12,7 @@ import { disableStorybookControls } from '../../../../.storybook/utils'; import { EuiButtonEmpty, EuiButtonEmptyProps } from './button_empty'; const meta: Meta = { - title: 'EuiButtonEmpty', + title: 'Navigation/EuiButtonEmpty', component: EuiButtonEmpty, argTypes: { flush: { diff --git a/src/components/button/button_group/button_group.stories.tsx b/src/components/button/button_group/button_group.stories.tsx index d4f0eef2928..4db0864a1ef 100644 --- a/src/components/button/button_group/button_group.stories.tsx +++ b/src/components/button/button_group/button_group.stories.tsx @@ -17,7 +17,7 @@ import { } from './button_group'; const meta: Meta = { - title: 'EuiButtonGroup', + title: 'Navigation/EuiButtonGroup', // @ts-ignore This still works for Storybook controls, even though Typescript complains component: EuiButtonGroup, argTypes: { diff --git a/src/components/button/button_icon/button_icon.stories.tsx b/src/components/button/button_icon/button_icon.stories.tsx index 8ef364ab30a..6cc10457d9c 100644 --- a/src/components/button/button_icon/button_icon.stories.tsx +++ b/src/components/button/button_icon/button_icon.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiButtonIcon, EuiButtonIconProps } from './button_icon'; const meta: Meta = { - title: 'EuiButtonIcon', + title: 'Navigation/EuiButtonIcon', component: EuiButtonIcon, args: { // Component defaults diff --git a/src/components/call_out/call_out.stories.tsx b/src/components/call_out/call_out.stories.tsx index f21fd4c5178..7f40c86a655 100644 --- a/src/components/call_out/call_out.stories.tsx +++ b/src/components/call_out/call_out.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiCallOut, EuiCallOutProps } from './call_out'; const meta: Meta = { - title: 'EuiCallOut', + title: 'Display/EuiCallOut', component: EuiCallOut, argTypes: { iconType: { control: 'text' }, diff --git a/src/components/card/card.stories.tsx b/src/components/card/card.stories.tsx index 18f9094ea9c..334df38a938 100644 --- a/src/components/card/card.stories.tsx +++ b/src/components/card/card.stories.tsx @@ -16,7 +16,7 @@ import { EuiIcon } from '../icon'; import { EuiCard, EuiCardProps } from './card'; const meta: Meta = { - title: 'EuiCard', + title: 'Display/EuiCard', component: EuiCard, argTypes: { display: { options: [undefined, ...BACKGROUND_COLORS] }, diff --git a/src/components/card/checkable_card/checkable_card.stories.tsx b/src/components/card/checkable_card/checkable_card.stories.tsx index 67dc686aa7b..2653b63822e 100644 --- a/src/components/card/checkable_card/checkable_card.stories.tsx +++ b/src/components/card/checkable_card/checkable_card.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiCheckableCard, EuiCheckableCardProps } from './checkable_card'; const meta: Meta = { - title: 'EuiCheckableCard', + title: 'Display/EuiCheckableCard', component: EuiCheckableCard, // NOTE: Storybook isn't correctly inheriting certain props due to the exclusive union, // so we have to do some manual polyfilling diff --git a/src/components/code/code.stories.tsx b/src/components/code/code.stories.tsx index c218d8b658e..689c12916bc 100644 --- a/src/components/code/code.stories.tsx +++ b/src/components/code/code.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiCode, EuiCodeProps } from './code'; const meta: Meta = { - title: 'EuiCode', + title: 'Editors & Syntax/EuiCode', component: EuiCode, args: { // Component defaults diff --git a/src/components/code/code_block.stories.tsx b/src/components/code/code_block.stories.tsx index 0b0b0346053..a123e931ec6 100644 --- a/src/components/code/code_block.stories.tsx +++ b/src/components/code/code_block.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiCodeBlock, EuiCodeBlockProps } from './code_block'; const meta: Meta = { - title: 'EuiCodeBlock', + title: 'Editors & Syntax/EuiCodeBlock', component: EuiCodeBlock, argTypes: { lineNumbers: { control: 'boolean' }, diff --git a/src/components/collapsible_nav/collapsible_nav.stories.tsx b/src/components/collapsible_nav/collapsible_nav.stories.tsx index 777f63732d1..70c0c0b921f 100644 --- a/src/components/collapsible_nav/collapsible_nav.stories.tsx +++ b/src/components/collapsible_nav/collapsible_nav.stories.tsx @@ -15,7 +15,7 @@ import { EuiButton } from '../button'; import { EuiCollapsibleNav, EuiCollapsibleNavProps } from './collapsible_nav'; const meta: Meta = { - title: 'EuiCollapsibleNav', + title: 'Navigation/EuiCollapsibleNav/EuiCollapsibleNav', component: EuiCollapsibleNav, argTypes: { ...disableStorybookControls(['button']), diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx index ae4d317761d..e56b65dcdba 100644 --- a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx +++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx @@ -14,7 +14,7 @@ import { } from './collapsible_nav_group'; const meta: Meta = { - title: 'EuiCollapsibleNavGroup', + title: 'Navigation/EuiCollapsibleNav/EuiCollapsibleNavGroup', // @ts-ignore This still works for Storybook controls, even though Typescript complains component: EuiCollapsibleNavGroup, argTypes: { 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 1a24ef61b7d..06a531b1e4c 100644 --- a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx +++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx @@ -27,7 +27,7 @@ import { } from './'; const meta: Meta = { - title: 'EuiCollapsibleNavBeta', + title: 'Navigation/EuiCollapsibleNav/EuiCollapsibleNavBeta', component: EuiCollapsibleNavBeta, parameters: { layout: 'fullscreen', diff --git a/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx index 75d55827b71..a1eff120556 100644 --- a/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx +++ b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx @@ -19,7 +19,7 @@ import { } from './collapsible_nav_group'; const meta: Meta = { - title: 'EuiCollapsibleNavBeta.Group', + title: 'Navigation/EuiCollapsibleNav/EuiCollapsibleNavBeta.Group', component: EuiCollapsibleNavGroup, parameters: { layout: 'fullscreen', diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.stories.tsx index d10762203f8..79122316085 100644 --- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.stories.tsx +++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.stories.tsx @@ -12,7 +12,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiCollapsedNavItem } from './collapsed_nav_item'; const meta: Meta = { - title: 'EuiCollapsedNavItem', + title: 'Navigation/EuiCollapsibleNav/EuiCollapsedNavItem', component: EuiCollapsedNavItem, argTypes: { icon: { control: 'text' }, diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.stories.tsx index fa98a54c2e0..4e33b031f04 100644 --- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.stories.tsx +++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.stories.tsx @@ -18,7 +18,7 @@ import { } from './collapsible_nav_item'; const meta: Meta = { - title: 'EuiCollapsibleNavItem', + title: 'Navigation/EuiCollapsibleNav/EuiCollapsibleNavItem', component: EuiCollapsibleNavItem, }; export default meta; diff --git a/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx b/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx index 00295386b3a..001024b5f5f 100644 --- a/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx +++ b/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx @@ -16,7 +16,7 @@ import { } from './color_palette_display'; const meta: Meta = { - title: 'EuiColorPaletteDisplay', + title: 'Forms/EuiColorPalettePicker/EuiColorPaletteDisplay', component: EuiColorPaletteDisplay, args: { // Component defaults diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx index 1b702cb8308..d71640fb0a5 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx @@ -16,7 +16,7 @@ import { } from './color_palette_picker'; const meta: Meta> = { - title: 'EuiColorPalettePicker', + title: 'Forms/EuiColorPalettePicker/EuiColorPalettePicker', component: EuiColorPalettePicker, argTypes: { placeholder: { control: 'text' }, diff --git a/src/components/color_picker/color_picker.stories.tsx b/src/components/color_picker/color_picker.stories.tsx index 587cd3ef087..e374027358d 100644 --- a/src/components/color_picker/color_picker.stories.tsx +++ b/src/components/color_picker/color_picker.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiColorPicker, EuiColorPickerProps } from './color_picker'; const meta: Meta = { - title: 'EuiColorPicker', + title: 'Forms/EuiColorPicker/EuiColorPicker', component: EuiColorPicker, argTypes: { color: { control: 'color' }, diff --git a/src/components/color_picker/color_picker_swatch.stories.tsx b/src/components/color_picker/color_picker_swatch.stories.tsx index b9983b18e31..a89cf20c564 100644 --- a/src/components/color_picker/color_picker_swatch.stories.tsx +++ b/src/components/color_picker/color_picker_swatch.stories.tsx @@ -14,7 +14,7 @@ import { } from './color_picker_swatch'; const meta: Meta = { - title: 'EuiColorPickerSwatch', + title: 'Forms/EuiColorPicker/EuiColorPickerSwatch', component: EuiColorPickerSwatch, }; diff --git a/src/components/combo_box/combo_box.stories.tsx b/src/components/combo_box/combo_box.stories.tsx index 0af9433391a..da31f4a5ffa 100644 --- a/src/components/combo_box/combo_box.stories.tsx +++ b/src/components/combo_box/combo_box.stories.tsx @@ -21,7 +21,7 @@ const options = [ ]; const meta: Meta> = { - title: 'EuiComboBox', + title: 'Forms/EuiComboBox', // @ts-ignore typescript shenanigans component: EuiComboBox, argTypes: { diff --git a/src/components/comment_list/comment.stories.tsx b/src/components/comment_list/comment.stories.tsx index b56423f8faa..d85b185c0c0 100644 --- a/src/components/comment_list/comment.stories.tsx +++ b/src/components/comment_list/comment.stories.tsx @@ -53,7 +53,7 @@ export const _actionsExampleArgType = { */ const meta: Meta = { - title: 'EuiComment', + title: 'Display/EuiComment/EuiComment', component: EuiComment, argTypes: { eventColor: _eventColorArgType, diff --git a/src/components/comment_list/comment_event.stories.tsx b/src/components/comment_list/comment_event.stories.tsx index 29f12f71891..99f8f535687 100644 --- a/src/components/comment_list/comment_event.stories.tsx +++ b/src/components/comment_list/comment_event.stories.tsx @@ -12,7 +12,7 @@ import { _eventColorArgType, _actionsExampleArgType } from './comment.stories'; import { EuiCommentEvent, EuiCommentEventProps } from './comment_event'; const meta: Meta = { - title: 'EuiCommentEvent', + title: 'Display/EuiComment/EuiCommentEvent', component: EuiCommentEvent, args: { username: 'janed', diff --git a/src/components/comment_list/comment_list.stories.tsx b/src/components/comment_list/comment_list.stories.tsx index 8eab65bf76b..3dc994e160c 100644 --- a/src/components/comment_list/comment_list.stories.tsx +++ b/src/components/comment_list/comment_list.stories.tsx @@ -17,7 +17,7 @@ import { EuiFlexGroup, EuiFlexItem } from '../flex'; import { EuiCommentList, EuiCommentListProps } from './comment_list'; const meta: Meta = { - title: 'EuiCommentList', + title: 'Display/EuiComment/EuiCommentList', component: EuiCommentList, args: { // Component defaults diff --git a/src/components/context/context.stories.tsx b/src/components/context/context.stories.tsx index 9a915ff4bae..172ba025f4f 100644 --- a/src/components/context/context.stories.tsx +++ b/src/components/context/context.stories.tsx @@ -14,7 +14,7 @@ import { useEuiI18n, EuiI18n, EuiI18nNumber } from '../i18n'; import { EuiContext, EuiContextProps, EuiI18nConsumer } from './context'; const meta: Meta = { - title: 'EuiContext', + title: 'Utilities/EuiContext', component: EuiContext, }; diff --git a/src/components/context_menu/context_menu.stories.tsx b/src/components/context_menu/context_menu.stories.tsx index 996a1aa7531..90a4e803bd6 100644 --- a/src/components/context_menu/context_menu.stories.tsx +++ b/src/components/context_menu/context_menu.stories.tsx @@ -17,7 +17,7 @@ import { EuiTitle } from '../title'; import { EuiContextMenu, EuiContextMenuProps } from './context_menu'; const meta: Meta = { - title: 'EuiContextMenu', + title: 'Navigation/EuiContextMenu/EuiContextMenu', component: EuiContextMenu, args: { // Component defaults diff --git a/src/components/context_menu/context_menu_item.stories.tsx b/src/components/context_menu/context_menu_item.stories.tsx index 82fd1ed5c36..eb50f0df60e 100644 --- a/src/components/context_menu/context_menu_item.stories.tsx +++ b/src/components/context_menu/context_menu_item.stories.tsx @@ -15,7 +15,7 @@ import { } from './context_menu_item'; const meta: Meta = { - title: 'EuiContextMenuItem', + title: 'Navigation/EuiContextMenu/EuiContextMenuItem', component: EuiContextMenuItem, argTypes: { ...disableStorybookControls(['buttonRef']), diff --git a/src/components/context_menu/context_menu_panel.stories.tsx b/src/components/context_menu/context_menu_panel.stories.tsx index e33c25fcdaf..1475e996048 100644 --- a/src/components/context_menu/context_menu_panel.stories.tsx +++ b/src/components/context_menu/context_menu_panel.stories.tsx @@ -17,7 +17,7 @@ import { } from './context_menu_panel'; const meta: Meta = { - title: 'EuiContextMenuPanel', + title: 'Navigation/EuiContextMenu/EuiContextMenuPanel', component: EuiContextMenuPanel, args: { // Component defaults diff --git a/src/components/copy/copy.stories.tsx b/src/components/copy/copy.stories.tsx index e3f0217ade7..498299605ff 100644 --- a/src/components/copy/copy.stories.tsx +++ b/src/components/copy/copy.stories.tsx @@ -14,7 +14,7 @@ import { EuiButton } from '../button'; import { EuiCopy, EuiCopyProps } from './copy'; const meta: Meta = { - title: 'EuiCopy', + title: 'Utilities/EuiCopy', component: EuiCopy, argTypes: { afterMessage: { control: 'text' }, diff --git a/src/components/empty_prompt/empty_prompt.stories.tsx b/src/components/empty_prompt/empty_prompt.stories.tsx index dcb64852d34..db5e316f1e5 100644 --- a/src/components/empty_prompt/empty_prompt.stories.tsx +++ b/src/components/empty_prompt/empty_prompt.stories.tsx @@ -19,7 +19,7 @@ import { EuiPageTemplate } from '../page_template'; import { EuiEmptyPrompt, EuiEmptyPromptProps } from './empty_prompt'; const meta: Meta = { - title: 'EuiEmptyPrompt', + title: 'Display/EuiEmptyPrompt', component: EuiEmptyPrompt, args: { // Component defaults diff --git a/src/components/error_boundary/error_boundary.stories.tsx b/src/components/error_boundary/error_boundary.stories.tsx index f62dffba499..19446e5da7d 100644 --- a/src/components/error_boundary/error_boundary.stories.tsx +++ b/src/components/error_boundary/error_boundary.stories.tsx @@ -12,7 +12,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiErrorBoundary, EuiErrorBoundaryProps } from './error_boundary'; const meta: Meta = { - title: 'EuiErrorBoundary', + title: 'Utilities/EuiErrorBoundary', component: EuiErrorBoundary, parameters: { layout: 'fullscreen', diff --git a/src/components/expression/expression.stories.tsx b/src/components/expression/expression.stories.tsx index b4b23e6d98f..788b24c6cde 100644 --- a/src/components/expression/expression.stories.tsx +++ b/src/components/expression/expression.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiExpression, EuiExpressionProps } from './expression'; const meta: Meta = { - title: 'EuiExpression', + title: 'Forms/EuiExpression', component: EuiExpression, args: { // Component defaults diff --git a/src/components/facet/facet_button.stories.tsx b/src/components/facet/facet_button.stories.tsx index a82efa021cc..06f0463a0f7 100644 --- a/src/components/facet/facet_button.stories.tsx +++ b/src/components/facet/facet_button.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiFacetButton, EuiFacetButtonProps } from './facet_button'; const meta: Meta = { - title: 'EuiFacetButton', + title: 'Navigation/EuiFacetButton', component: EuiFacetButton, argTypes: { // TODO: icon diff --git a/src/components/facet/facet_group.stories.tsx b/src/components/facet/facet_group.stories.tsx index 2ffe73ca7a7..d8442c6d336 100644 --- a/src/components/facet/facet_group.stories.tsx +++ b/src/components/facet/facet_group.stories.tsx @@ -13,7 +13,7 @@ import { EuiFacetButton } from './facet_button'; import { EuiFacetGroup, EuiFacetGroupProps } from './facet_group'; const meta: Meta = { - title: 'EuiFacetGroup', + title: 'Navigation/EuiFacetGroup', component: EuiFacetGroup, args: { // Component defaults diff --git a/src/components/filter_group/filter_button.stories.tsx b/src/components/filter_group/filter_button.stories.tsx index 95ec373ca8f..bf881964f74 100644 --- a/src/components/filter_group/filter_button.stories.tsx +++ b/src/components/filter_group/filter_button.stories.tsx @@ -15,7 +15,7 @@ import { EuiFilterGroup } from './filter_group'; import { EuiFilterButton, EuiFilterButtonProps } from './filter_button'; const meta: Meta = { - title: 'EuiFilterButton', + title: 'Forms/EuiFilterButton', component: EuiFilterButton as any, argTypes: { color: { control: 'select', options: BUTTON_COLORS }, diff --git a/src/components/filter_group/filter_group.stories.tsx b/src/components/filter_group/filter_group.stories.tsx index 8bf4f563d42..3262890a317 100644 --- a/src/components/filter_group/filter_group.stories.tsx +++ b/src/components/filter_group/filter_group.stories.tsx @@ -14,7 +14,7 @@ import { EuiFilterButton } from './filter_button'; import { EuiFilterGroup, EuiFilterGroupProps } from './filter_group'; const meta: Meta = { - title: 'EuiFilterGroup', + title: 'Forms/EuiFilterGroup', component: EuiFilterGroup, args: { // Component defaults diff --git a/src/components/flex/flex_grid.stories.tsx b/src/components/flex/flex_grid.stories.tsx index 6f4b24c5d8a..90638bd0ecb 100644 --- a/src/components/flex/flex_grid.stories.tsx +++ b/src/components/flex/flex_grid.stories.tsx @@ -13,7 +13,7 @@ import { EuiFlexItem } from './flex_item'; import { EuiFlexGrid, EuiFlexGridProps } from './flex_grid'; const meta: Meta = { - title: 'EuiFlexGrid', + title: 'Layout/EuiFlexGrid', component: EuiFlexGrid, argTypes: { component: { control: 'text' }, diff --git a/src/components/flex/flex_group.stories.tsx b/src/components/flex/flex_group.stories.tsx index f69833c7522..0b5168f802d 100644 --- a/src/components/flex/flex_group.stories.tsx +++ b/src/components/flex/flex_group.stories.tsx @@ -13,7 +13,7 @@ import { EuiFlexItem } from './flex_item'; import { EuiFlexGroup, EuiFlexGroupProps } from './flex_group'; const meta: Meta = { - title: 'EuiFlexGroup', + title: 'Layout/EuiFlexGroup', component: EuiFlexGroup, argTypes: { justifyContent: { control: 'radio' }, diff --git a/src/components/flex/flex_item.stories.tsx b/src/components/flex/flex_item.stories.tsx index cc959c10bf9..bc4caa8e61c 100644 --- a/src/components/flex/flex_item.stories.tsx +++ b/src/components/flex/flex_item.stories.tsx @@ -13,7 +13,7 @@ import { EuiFlexGroup } from './flex_group'; import { EuiFlexItem, EuiFlexItemProps } from './flex_item'; const meta: Meta = { - title: 'EuiFlexItem', + title: 'Layout/EuiFlexItem', component: EuiFlexItem, argTypes: { grow: { diff --git a/src/components/flyout/flyout.stories.tsx b/src/components/flyout/flyout.stories.tsx index 56d064b62ae..7eea16c5f9d 100644 --- a/src/components/flyout/flyout.stories.tsx +++ b/src/components/flyout/flyout.stories.tsx @@ -22,7 +22,7 @@ import { } from './index'; const meta: Meta = { - title: 'EuiFlyout', + title: 'Layout/EuiFlyout/EuiFlyout', component: EuiFlyout, argTypes: { as: { control: 'text' }, diff --git a/src/components/flyout/flyout_body.stories.tsx b/src/components/flyout/flyout_body.stories.tsx index 9902cef3f5a..8d1076ff276 100644 --- a/src/components/flyout/flyout_body.stories.tsx +++ b/src/components/flyout/flyout_body.stories.tsx @@ -14,7 +14,7 @@ import { EuiFlyout } from './flyout'; import { EuiFlyoutBody, EuiFlyoutBodyProps } from './flyout_body'; const meta: Meta = { - title: 'EuiFlyoutBody', + title: 'Layout/EuiFlyout/EuiFlyoutBody', component: EuiFlyoutBody, argTypes: { // TODO: editable banner JSX diff --git a/src/components/flyout/flyout_footer.stories.tsx b/src/components/flyout/flyout_footer.stories.tsx index 0788e4c5b76..d27f8d75b30 100644 --- a/src/components/flyout/flyout_footer.stories.tsx +++ b/src/components/flyout/flyout_footer.stories.tsx @@ -15,7 +15,7 @@ import { EuiFlyoutBody } from './flyout_body'; import { EuiFlyoutFooter, EuiFlyoutFooterProps } from './flyout_footer'; const meta: Meta = { - title: 'EuiFlyoutFooter', + title: 'Layout/EuiFlyout/EuiFlyoutFooter', component: EuiFlyoutFooter, argTypes: { // TODO: editable children diff --git a/src/components/flyout/flyout_header.stories.tsx b/src/components/flyout/flyout_header.stories.tsx index daa702e9d54..8b5a7fbd8d2 100644 --- a/src/components/flyout/flyout_header.stories.tsx +++ b/src/components/flyout/flyout_header.stories.tsx @@ -14,7 +14,7 @@ import { EuiFlyout } from './flyout'; import { EuiFlyoutHeader, EuiFlyoutHeaderProps } from './flyout_header'; const meta: Meta = { - title: 'EuiFlyoutHeader', + title: 'Layout/EuiFlyout/EuiFlyoutHeader', component: EuiFlyoutHeader, argTypes: { // TODO: editable children JSX diff --git a/src/components/flyout/flyout_resizable.stories.tsx b/src/components/flyout/flyout_resizable.stories.tsx index 7a6ddaaba7d..f620f33d862 100644 --- a/src/components/flyout/flyout_resizable.stories.tsx +++ b/src/components/flyout/flyout_resizable.stories.tsx @@ -20,7 +20,7 @@ import { } from './flyout_resizable'; const meta: Meta = { - title: 'EuiFlyoutResizable', + title: 'Layout/EuiFlyout/EuiFlyoutResizable', component: EuiFlyoutResizable as any, argTypes: { // TODO: `size` control isn't working correctly for whatever reason (appears to be a Storybook bug diff --git a/src/components/focus_trap/focus_trap.stories.tsx b/src/components/focus_trap/focus_trap.stories.tsx index 6d9d0509509..4903c41d5e5 100644 --- a/src/components/focus_trap/focus_trap.stories.tsx +++ b/src/components/focus_trap/focus_trap.stories.tsx @@ -19,7 +19,7 @@ import { EuiProvider } from '../provider'; import { EuiFocusTrap, EuiFocusTrapProps } from './focus_trap'; const meta: Meta = { - title: 'EuiFocusTrap', + title: 'Utilities/EuiFocusTrap', // @ts-ignore This still works for Storybook controls, even though Typescript complains component: EuiFocusTrap, argTypes: { diff --git a/src/components/form/field_number/field_number.stories.tsx b/src/components/form/field_number/field_number.stories.tsx index bd1f86380d9..b283f0d8e5f 100644 --- a/src/components/form/field_number/field_number.stories.tsx +++ b/src/components/form/field_number/field_number.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiFieldNumber, EuiFieldNumberProps } from './field_number'; const meta: Meta = { - title: 'EuiFieldNumber', + title: 'Forms/EuiFieldNumber', component: EuiFieldNumber, argTypes: { step: { control: 'number' }, diff --git a/src/components/header/header.stories.tsx b/src/components/header/header.stories.tsx index bb0b4a5bae8..2ee3e036e95 100644 --- a/src/components/header/header.stories.tsx +++ b/src/components/header/header.stories.tsx @@ -24,7 +24,7 @@ import { import { EuiHeader, EuiHeaderProps } from './header'; const meta: Meta = { - title: 'EuiHeader', + title: 'Layout/EuiHeader/EuiHeader', component: EuiHeader, args: { // Component defaults diff --git a/src/components/header/header_alert/header_alert.stories.tsx b/src/components/header/header_alert/header_alert.stories.tsx index 91749eee728..1ad16621999 100644 --- a/src/components/header/header_alert/header_alert.stories.tsx +++ b/src/components/header/header_alert/header_alert.stories.tsx @@ -38,7 +38,7 @@ import { import { EuiHeaderAlert, EuiHeaderAlertProps } from './header_alert'; const meta: Meta = { - title: 'EuiHeaderAlert', + title: 'Layout/EuiHeader/EuiHeaderAlert', component: EuiHeaderAlert, args: { // Not default props, set for demo purposes diff --git a/src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx b/src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx index e07399aeb66..50ba43fe3ac 100644 --- a/src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx +++ b/src/components/header/header_breadcrumbs/header_breadcrumbs.stories.tsx @@ -12,7 +12,7 @@ import { EuiBreadcrumbsProps } from '../../breadcrumbs'; import { EuiHeaderBreadcrumbs } from './header_breadcrumbs'; const meta: Meta = { - title: 'EuiHeaderBreadcrumbs', + title: 'Layout/EuiHeader/EuiHeaderBreadcrumbs', component: EuiHeaderBreadcrumbs, args: { // Component defaults diff --git a/src/components/header/header_links/header_link.stories.tsx b/src/components/header/header_links/header_link.stories.tsx index 6aec278a118..3241bb960dc 100644 --- a/src/components/header/header_links/header_link.stories.tsx +++ b/src/components/header/header_links/header_link.stories.tsx @@ -12,7 +12,7 @@ import { disableStorybookControls } from '../../../../.storybook/utils'; import { EuiHeaderLink, EuiHeaderLinkProps } from './header_link'; const meta: Meta = { - title: 'EuiHeaderLink', + title: 'Layout/EuiHeader/EuiHeaderLink', component: EuiHeaderLink, // Component defaults args: { diff --git a/src/components/header/header_links/header_links.stories.tsx b/src/components/header/header_links/header_links.stories.tsx index 35ae96b895b..29156ae9565 100644 --- a/src/components/header/header_links/header_links.stories.tsx +++ b/src/components/header/header_links/header_links.stories.tsx @@ -15,7 +15,7 @@ import { EuiHeaderLink } from './header_link'; import { EuiHeaderLinks, EuiHeaderLinksProps } from './header_links'; const meta: Meta = { - title: 'EuiHeaderLinks', + title: 'Layout/EuiHeader/EuiHeaderLinks', component: EuiHeaderLinks, args: { // Component defaults diff --git a/src/components/header/header_logo/header_logo.stories.tsx b/src/components/header/header_logo/header_logo.stories.tsx index 2ba258a2b84..5e918d5537e 100644 --- a/src/components/header/header_logo/header_logo.stories.tsx +++ b/src/components/header/header_logo/header_logo.stories.tsx @@ -13,7 +13,7 @@ import { EuiHeader, EuiHeaderSectionItem } from '../'; import { EuiHeaderLogo, EuiHeaderLogoProps } from './header_logo'; const meta: Meta = { - title: 'EuiHeaderLogo', + title: 'Layout/EuiHeader/EuiHeaderLogo', component: EuiHeaderLogo, args: { // Not default props, set for demo purposes diff --git a/src/components/header/header_section/header_section.stories.tsx b/src/components/header/header_section/header_section.stories.tsx index 210a1b55522..1295916a69c 100644 --- a/src/components/header/header_section/header_section.stories.tsx +++ b/src/components/header/header_section/header_section.stories.tsx @@ -13,7 +13,7 @@ import { EuiHeader } from '../header'; import { EuiHeaderSection, EuiHeaderSectionProps } from './header_section'; const meta: Meta = { - title: 'EuiHeaderSection', + title: 'Layout/EuiHeader/EuiHeaderSection/EuiHeaderSection', component: EuiHeaderSection, }; diff --git a/src/components/header/header_section/header_section_item.stories.tsx b/src/components/header/header_section/header_section_item.stories.tsx index 2b012ad325c..f9693bae814 100644 --- a/src/components/header/header_section/header_section_item.stories.tsx +++ b/src/components/header/header_section/header_section_item.stories.tsx @@ -17,7 +17,7 @@ import { } from './header_section_item'; const meta: Meta = { - title: 'EuiHeaderSectionItem', + title: 'Layout/EuiHeader/EuiHeaderSection/EuiHeaderSectionItem', component: EuiHeaderSectionItem, }; diff --git a/src/components/header/header_section/header_section_item_button.stories.tsx b/src/components/header/header_section/header_section_item_button.stories.tsx index 1e642b66307..054990c33f8 100644 --- a/src/components/header/header_section/header_section_item_button.stories.tsx +++ b/src/components/header/header_section/header_section_item_button.stories.tsx @@ -22,7 +22,7 @@ import { } from './header_section_item_button'; const meta: Meta = { - title: 'EuiHeaderSectionItemButton', + title: 'Layout/EuiHeader/EuiHeaderSection/EuiHeaderSectionItemButton', // Exclude `component` here - it inherits too many props/controls from EuiButtonEmpty }; diff --git a/src/components/health/health.stories.tsx b/src/components/health/health.stories.tsx index 77801a6fb85..750ecc3004d 100644 --- a/src/components/health/health.stories.tsx +++ b/src/components/health/health.stories.tsx @@ -12,7 +12,7 @@ import { hideStorybookControls } from '../../../.storybook/utils'; import { EuiHealth, EuiHealthProps } from './health'; const meta: Meta = { - title: 'EuiHealth', + title: 'Display/EuiHealth', component: EuiHealth, argTypes: { color: { control: 'text' }, diff --git a/src/components/highlight/highlight.stories.tsx b/src/components/highlight/highlight.stories.tsx index 3f1b746a1c6..d61b650c61f 100644 --- a/src/components/highlight/highlight.stories.tsx +++ b/src/components/highlight/highlight.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiHighlight, EuiHighlightProps } from './highlight'; const meta: Meta = { - title: 'EuiHighlight', + title: 'Utilities/EuiHighlight', component: EuiHighlight, argTypes: {}, // Component defaults diff --git a/src/components/horizontal_rule/horizontal_rule.stories.tsx b/src/components/horizontal_rule/horizontal_rule.stories.tsx index 46c0867287c..ca22f210494 100644 --- a/src/components/horizontal_rule/horizontal_rule.stories.tsx +++ b/src/components/horizontal_rule/horizontal_rule.stories.tsx @@ -12,7 +12,7 @@ import { hideStorybookControls } from '../../../.storybook/utils'; import { EuiHorizontalRule, EuiHorizontalRuleProps } from './horizontal_rule'; const meta: Meta = { - title: 'EuiHorizontalRule', + title: 'Layout/EuiHorizontalRule', component: EuiHorizontalRule, argTypes: {}, // Component defaults diff --git a/src/components/key_pad_menu/key_pad_menu_item.stories.tsx b/src/components/key_pad_menu/key_pad_menu_item.stories.tsx index c6e829f7057..285048301b7 100644 --- a/src/components/key_pad_menu/key_pad_menu_item.stories.tsx +++ b/src/components/key_pad_menu/key_pad_menu_item.stories.tsx @@ -14,7 +14,7 @@ import { EuiIcon } from '../icon'; import { EuiKeyPadMenuItem, EuiKeyPadMenuItemProps } from './key_pad_menu_item'; const meta: Meta = { - title: 'EuiKeyPadMenuItem', + title: 'Navigation/EuiKeyPadMenuItem', component: EuiKeyPadMenuItem as any, argTypes: { checkable: { options: [undefined, 'multi', 'single'] }, diff --git a/src/components/page/page.stories.tsx b/src/components/page/page.stories.tsx index 7b1415eb09a..8ae1749e99c 100644 --- a/src/components/page/page.stories.tsx +++ b/src/components/page/page.stories.tsx @@ -18,7 +18,7 @@ import { EuiPageSection } from './page_section'; import { EuiPage, EuiPageProps } from './page'; const meta: Meta = { - title: 'EuiPage', + title: 'Layout/EuiPage/EuiPage', component: EuiPage, argTypes: { restrictWidth: { control: 'boolean' }, diff --git a/src/components/page/page_body/page_body.stories.tsx b/src/components/page/page_body/page_body.stories.tsx index 4e9621b5107..e82a627c854 100644 --- a/src/components/page/page_body/page_body.stories.tsx +++ b/src/components/page/page_body/page_body.stories.tsx @@ -16,7 +16,7 @@ import { EuiPage } from '../page'; import { EuiPageBody, EuiPageBodyProps } from './page_body'; const meta: Meta> = { - title: 'EuiPageBody', + title: 'Layout/EuiPage/EuiPageBody', component: EuiPageBody, argTypes: { borderRadius: { control: 'radio', options: BORDER_RADII }, diff --git a/src/components/page/page_header/page_header.stories.tsx b/src/components/page/page_header/page_header.stories.tsx index d692656150f..f48ad74436d 100644 --- a/src/components/page/page_header/page_header.stories.tsx +++ b/src/components/page/page_header/page_header.stories.tsx @@ -13,7 +13,7 @@ import { EuiButton } from '../../button'; import { EuiPageHeader, EuiPageHeaderProps } from '../page_header'; const meta: Meta = { - title: 'EuiPageHeader', + title: 'Layout/EuiPage/EuiPageHeader/EuiPageHeader', component: EuiPageHeader, argTypes: { alignItems: { diff --git a/src/components/page/page_header/page_header_section.stories.tsx b/src/components/page/page_header/page_header_section.stories.tsx index 91f1e7ecd3f..8be8067f41f 100644 --- a/src/components/page/page_header/page_header_section.stories.tsx +++ b/src/components/page/page_header/page_header_section.stories.tsx @@ -17,7 +17,7 @@ import { } from '../page_header'; const meta: Meta = { - title: 'EuiPageHeaderSection', + title: 'Layout/EuiPage/EuiPageHeader/EuiPageHeaderSection', component: EuiPageHeaderSection, }; diff --git a/src/components/page/page_section/page_section.stories.tsx b/src/components/page/page_section/page_section.stories.tsx index 89559bc065c..8fefc03c802 100644 --- a/src/components/page/page_section/page_section.stories.tsx +++ b/src/components/page/page_section/page_section.stories.tsx @@ -14,7 +14,7 @@ import { EuiSkeletonText } from '../../skeleton'; import { EuiPageSection, EuiPageSectionProps } from '../page_section'; const meta: Meta = { - title: 'EuiPageSection', + title: 'Layout/EuiPage/EuiPageSection', component: EuiPageSection, argTypes: { bottomBorder: { control: 'select', options: [true, false, 'extended'] }, diff --git a/src/components/page/page_sidebar/page_sidebar.stories.tsx b/src/components/page/page_sidebar/page_sidebar.stories.tsx index 2321cb71900..6d74233e66d 100644 --- a/src/components/page/page_sidebar/page_sidebar.stories.tsx +++ b/src/components/page/page_sidebar/page_sidebar.stories.tsx @@ -17,7 +17,7 @@ import { EuiPage } from '../page'; import { EuiPageSidebar, EuiPageSidebarProps } from './page_sidebar'; const meta: Meta = { - title: 'EuiPageSidebar', + title: 'Layout/EuiPage/EuiPageSidebar', component: EuiPageSidebar, parameters: { layout: 'fullscreen', diff --git a/src/components/panel/split_panel/split_panel_inner.stories.tsx b/src/components/panel/split_panel/split_panel_inner.stories.tsx index 9828b9e02d8..e0dfc053c0a 100644 --- a/src/components/panel/split_panel/split_panel_inner.stories.tsx +++ b/src/components/panel/split_panel/split_panel_inner.stories.tsx @@ -14,7 +14,7 @@ import { COLORS } from '../panel'; import { EuiSplitPanel, _EuiSplitPanelInnerProps } from './split_panel'; const meta: Meta<_EuiSplitPanelInnerProps> = { - title: 'EuiSplitPanel', + title: 'Layout/EuiSplitPanel', component: EuiSplitPanel.Inner, argTypes: { color: { control: 'select', options: COLORS }, diff --git a/src/components/panel/split_panel/split_panel_outer.stories.tsx b/src/components/panel/split_panel/split_panel_outer.stories.tsx index e6b89dc0254..474e1718634 100644 --- a/src/components/panel/split_panel/split_panel_outer.stories.tsx +++ b/src/components/panel/split_panel/split_panel_outer.stories.tsx @@ -12,7 +12,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiSplitPanel, _EuiSplitPanelOuterProps } from './split_panel'; const meta: Meta<_EuiSplitPanelOuterProps> = { - title: 'EuiSplitPanel', + title: 'Layout/EuiSplitPanel', component: EuiSplitPanel.Outer, args: { // Component defaults diff --git a/src/components/provider/provider.stories.tsx b/src/components/provider/provider.stories.tsx index 7eb59fe5767..6c84468bda0 100644 --- a/src/components/provider/provider.stories.tsx +++ b/src/components/provider/provider.stories.tsx @@ -12,7 +12,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiProvider, EuiProviderProps } from './provider'; const meta: Meta> = { - title: 'EuiProvider', + title: 'Theming/EuiProvider', component: EuiProvider, argTypes: { colorMode: { diff --git a/src/components/resizable_container/resizable_button.stories.tsx b/src/components/resizable_container/resizable_button.stories.tsx index 511648a0cec..7dfeb994a04 100644 --- a/src/components/resizable_container/resizable_button.stories.tsx +++ b/src/components/resizable_container/resizable_button.stories.tsx @@ -17,7 +17,7 @@ import { } from './resizable_button'; const meta: Meta = { - title: 'EuiResizableButton', + title: 'Layout/EuiResizableContainer/EuiResizableButton', component: EuiResizableButton, args: { // Component defaults diff --git a/src/components/resizable_container/resizable_collapse_button.stories.tsx b/src/components/resizable_container/resizable_collapse_button.stories.tsx index efc09176eff..5b1ffd4e960 100644 --- a/src/components/resizable_container/resizable_collapse_button.stories.tsx +++ b/src/components/resizable_container/resizable_collapse_button.stories.tsx @@ -18,7 +18,7 @@ import { } from './resizable_collapse_button'; const meta: Meta = { - title: 'EuiResizableCollapseButton', + title: 'Layout/EuiResizableContainer/EuiResizableCollapseButton', component: EuiResizableCollapseButton, args: { isVisible: true, diff --git a/src/components/responsive/hide_for.stories.tsx b/src/components/responsive/hide_for.stories.tsx index 8b0553fee38..3dcb2f18ff0 100644 --- a/src/components/responsive/hide_for.stories.tsx +++ b/src/components/responsive/hide_for.stories.tsx @@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiHideFor, EuiHideForProps } from './hide_for'; const meta: Meta = { - title: 'EuiHideFor', + title: 'Utilities/EuiHideFor', component: EuiHideFor, }; diff --git a/src/components/side_nav/side_nav.stories.tsx b/src/components/side_nav/side_nav.stories.tsx index e16371946b7..f534181eea4 100644 --- a/src/components/side_nav/side_nav.stories.tsx +++ b/src/components/side_nav/side_nav.stories.tsx @@ -19,7 +19,7 @@ import { EuiText } from '../text'; import { EuiSideNav, EuiSideNavProps } from './side_nav'; const meta: Meta = { - title: 'EuiSideNav', + title: 'Navigation/EuiSideNav', component: EuiSideNav, argTypes: disableStorybookControls(['children']), args: { diff --git a/src/components/text_truncate/text_block_truncate.stories.tsx b/src/components/text_truncate/text_block_truncate.stories.tsx index fae93b3b2ca..6b2c6ff68df 100644 --- a/src/components/text_truncate/text_block_truncate.stories.tsx +++ b/src/components/text_truncate/text_block_truncate.stories.tsx @@ -17,7 +17,7 @@ import { } from './text_block_truncate'; const meta: Meta = { - title: 'EuiTextBlockTruncate', + title: 'Utilities/EuiTextBlockTruncate', component: EuiTextBlockTruncate, decorators: [ (Story) => ( diff --git a/src/components/text_truncate/text_truncate.stories.tsx b/src/components/text_truncate/text_truncate.stories.tsx index d72d8f8cd90..257ff0290e8 100644 --- a/src/components/text_truncate/text_truncate.stories.tsx +++ b/src/components/text_truncate/text_truncate.stories.tsx @@ -19,7 +19,7 @@ import { EuiHighlight, EuiMark } from '../../components'; import { EuiTextTruncate, EuiTextTruncateProps } from './text_truncate'; const meta: Meta = { - title: 'EuiTextTruncate', + title: 'Utilities/EuiTextTruncate', component: EuiTextTruncate, argTypes: { truncationOffset: { if: { arg: 'truncation', neq: 'startEnd' } }, // Should also not show on `middle`, but Storybook doesn't currently support multiple if conditions :( diff --git a/src/components/tree_view/tree_view.stories.tsx b/src/components/tree_view/tree_view.stories.tsx index 61ec5c3e4bb..9d36e21acc8 100644 --- a/src/components/tree_view/tree_view.stories.tsx +++ b/src/components/tree_view/tree_view.stories.tsx @@ -15,7 +15,7 @@ import { EuiToken } from '../token'; import { EuiTreeView, EuiTreeViewProps } from './tree_view'; const meta: Meta = { - title: 'EuiTreeView', + title: 'Navigation/EuiTreeView/EuiTreeView', component: EuiTreeView, argTypes: { 'aria-label': { diff --git a/src/components/tree_view/tree_view_item.stories.tsx b/src/components/tree_view/tree_view_item.stories.tsx index 43e1a82f34f..f900d7d5fe1 100644 --- a/src/components/tree_view/tree_view_item.stories.tsx +++ b/src/components/tree_view/tree_view_item.stories.tsx @@ -15,7 +15,7 @@ import { EuiTreeView } from './tree_view'; import type { EuiTreeViewItemProps } from './tree_view_item'; const meta: Meta = { - title: 'EuiTreeView.Item', + title: 'Navigation/EuiTreeView/EuiTreeView.Item', component: EuiTreeView.Item, args: { // Component defaults diff --git a/src/services/theme/provider.stories.tsx b/src/services/theme/provider.stories.tsx index 2b2fbe33d7b..dfeff43e2a3 100644 --- a/src/services/theme/provider.stories.tsx +++ b/src/services/theme/provider.stories.tsx @@ -13,7 +13,7 @@ import { useEuiThemeCSSVariables } from './hooks'; import { EuiThemeProvider, EuiThemeProviderProps } from './provider'; const meta: Meta> = { - title: 'EuiThemeProvider', + title: 'Theming/EuiThemeProvider', component: EuiThemeProvider, };