From 2313836d2062c4ba6d754d51b69df329b25dcd14 Mon Sep 17 00:00:00 2001
From: Hit Bhalodia <58802366+hbhalodia@users.noreply.github.com>
Date: Wed, 13 Nov 2024 01:23:49 +0530
Subject: [PATCH] Feat: Storybook: Improve component organisation - Overlays
 Category - Issue #66275 (#66657)

* Group the overlay components in storybook

* Fix the id for the experimental components

* Remove unwanted changes from the PR

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 packages/components/src/confirm-dialog/stories/index.story.tsx | 3 ++-
 packages/components/src/dropdown/stories/index.story.tsx       | 3 ++-
 packages/components/src/modal/stories/index.story.tsx          | 3 ++-
 packages/components/src/popover/stories/index.story.tsx        | 3 ++-
 packages/components/src/tooltip/stories/index.story.tsx        | 3 ++-
 storybook/preview.js                                           | 3 ++-
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/confirm-dialog/stories/index.story.tsx b/packages/components/src/confirm-dialog/stories/index.story.tsx
index 85636c0ddc81ed..9496d85939edf3 100644
--- 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
index 0f07664787cc33..bfa51a07a97170 100644
--- 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
index f180de0dc06a46..92c922bcb8a977 100644
--- 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
index dfffaefe802a49..3d804f5d24d5c0 100644
--- 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
index b006bc03aced96..4bddba0ff7b666 100644
--- 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
index 9e9dd587b39c4c..ca90ad99e405de 100644
--- 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',
 			],
 		},