From 831490744878f80141b299f09a8eceef2862e2d7 Mon Sep 17 00:00:00 2001
From: TarunAdobe <ttomar@adobe.com>
Date: Wed, 4 Sep 2024 13:15:02 +0530
Subject: [PATCH] chore(menu): added a custom root submenu example in storybook

---
 packages/menu/stories/submenu.stories.ts | 23 +++++++++++++++++++++++
 packages/menu/test/submenu.test.ts       |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/menu/stories/submenu.stories.ts b/packages/menu/stories/submenu.stories.ts
index 36a20e32c1..aeff1e3be4 100644
--- a/packages/menu/stories/submenu.stories.ts
+++ b/packages/menu/stories/submenu.stories.ts
@@ -368,3 +368,26 @@ export const contextMenu = (): TemplateResult => {
         </sp-overlay>
     `;
 };
+
+export const customRootSubmenu = (): TemplateResult => {
+    return html`
+        <sp-action-menu label="More Actions">
+            <sp-menu-item>Bronx</sp-menu-item>
+            <sp-menu-item id="submenu-item-1">
+                Brooklyn
+                <div role="menuitem" slot="submenu" style="padding: 12px">
+                    <img
+                        src="https://placekitten.com/200/200"
+                        alt="Kitten"
+                        style="width: 100%; height: auto; border-radius: 4px"
+                    />
+                    <p>I am an arbitrary content in submenu</p>
+                </div>
+            </sp-menu-item>
+        </sp-action-menu>
+    `;
+};
+
+customRootSubmenu.swc_vrt = {
+    skip: true,
+};
diff --git a/packages/menu/test/submenu.test.ts b/packages/menu/test/submenu.test.ts
index 806114d08e..4395cfca25 100644
--- a/packages/menu/test/submenu.test.ts
+++ b/packages/menu/test/submenu.test.ts
@@ -1068,7 +1068,7 @@ describe('Submenu', () => {
         expect(rootItem1.open, 'finally closed 1').to.be.false;
         expect(rootItem2.open, 'finally closed 2').to.be.false;
     });
-    it.only('supports using non-menu-item elements as the root of a submenu', async () => {
+    it('supports using non-menu-item elements as the root of a submenu', async () => {
         const el = await fixture<Menu>(html`
             <sp-menu>
                 <sp-menu-item class="root">