Feat: Storybook: Improve component organisation - Overlays Category -…

… Issue WordPress#66275 (WordPress#66657) * Group the overlay components in storybook * Fix the id for the experimental components * Remove unwanted changes from the PR Co-authored-by: hbhalodia <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: mirka <[email protected]>
karthick-murugan · Nov 13, 2024 · 77c53f3 · 77c53f3
1 parent a318a45
commit 77c53f3
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 6 deletions.
diff --git a/packages/components/src/confirm-dialog/stories/index.story.tsx b/packages/components/src/confirm-dialog/stories/index.story.tsx
@@ -16,7 +16,8 @@ import { ConfirmDialog } from '../component';
 
 const meta: Meta< typeof ConfirmDialog > = {
 	component: ConfirmDialog,
-	title: 'Components (Experimental)/ConfirmDialog',
+	title: 'Components (Experimental)/Overlays/ConfirmDialog',
+	id: 'components-experimental-confirmdialog',
 	argTypes: {
 		isOpen: {
 			control: { type: null },

diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx
@@ -13,7 +13,8 @@ import MenuItem from '../../menu-item';
 import { DropdownContentWrapper } from '../dropdown-content-wrapper';
 
 const meta: Meta< typeof Dropdown > = {
-	title: 'Components/Dropdown',
+	title: 'Components/Overlays/Dropdown',
+	id: 'components-dropdown',
 	component: Dropdown,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { DropdownContentWrapper },

diff --git a/packages/components/src/modal/stories/index.story.tsx b/packages/components/src/modal/stories/index.story.tsx
@@ -19,7 +19,8 @@ import type { ModalProps } from '../types';
 
 const meta: Meta< typeof Modal > = {
 	component: Modal,
-	title: 'Components/Modal',
+	title: 'Components/Overlays/Modal',
+	id: 'components-modal',
 	argTypes: {
 		children: {
 			control: { type: null },

diff --git a/packages/components/src/popover/stories/index.story.tsx b/packages/components/src/popover/stories/index.story.tsx
@@ -33,7 +33,8 @@ const AVAILABLE_PLACEMENTS: PopoverProps[ 'placement' ][] = [
 ];
 
 const meta: Meta< typeof Popover > = {
-	title: 'Components/Popover',
+	title: 'Components/Overlays/Popover',
+	id: 'components-popover',
 	component: Popover,
 	argTypes: {
 		anchor: { control: { type: null } },

diff --git a/packages/components/src/tooltip/stories/index.story.tsx b/packages/components/src/tooltip/stories/index.story.tsx
@@ -15,7 +15,8 @@ import Tooltip from '..';
 import Button from '../../button';
 
 const meta: Meta< typeof Tooltip > = {
-	title: 'Components/Tooltip',
+	title: 'Components/Overlays/Tooltip',
+	id: 'components-tooltip',
 	component: Tooltip,
 	argTypes: {
 		children: { control: { type: null } },

diff --git a/storybook/preview.js b/storybook/preview.js
@@ -134,10 +134,11 @@ export const parameters = {
 					'Containers',
 					'Feedback',
 					'Navigation',
+					'Overlays',
 					'Utilities',
 				],
 				'Components (Experimental)',
-				[ 'Navigation' ],
+				[ 'Navigation', 'Overlays' ],
 				'Icons',
 			],
 		},