From cfe6fdfbe9060dc048f79bd861097a8350b0a845 Mon Sep 17 00:00:00 2001
From: Rivka Ungar <rivkaun@monday.com>
Date: Wed, 26 Feb 2025 14:52:34 +0200
Subject: [PATCH] docs: Menu storybook snippets

---
 .../Menu/__stories__/Menu.stories.helpers.tsx |   9 +-
 .../Menu/__stories__/Menu.stories.module.scss |  16 --
 .../Menu/Menu/__stories__/Menu.stories.tsx    | 147 +++++++++---------
 3 files changed, 82 insertions(+), 90 deletions(-)
 delete mode 100644 packages/core/src/components/Menu/Menu/__stories__/Menu.stories.module.scss

diff --git a/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.helpers.tsx b/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.helpers.tsx
index 79032b6149..cda13834b3 100644
--- a/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.helpers.tsx
+++ b/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.helpers.tsx
@@ -4,7 +4,6 @@ import Menu from "../../../Menu/Menu/Menu";
 import MenuItem from "../../../Menu/MenuItem/MenuItem";
 import Search from "../../../Search/Search";
 import { Calendar, Filter, Wand } from "@vibe/icons";
-import styles from "./Menu.stories.module.scss";
 import React from "react";
 
 export const TipCombobox = () => (
@@ -29,7 +28,9 @@ export const ComponentRuleSimpleActions = () => (
 
 export const ComponentRuleWithSearch = () => (
   <DialogContentContainer>
-    <Search size="small" className={styles["component-rule-search"]} />
+    <div style={{ marginBottom: "var(--sb-spacing-small)" }}>
+      <Search size="small" />
+    </div>
     <Menu>
       <MenuItem title="Item 1" icon={Calendar} />
       <MenuItem title="Item 2" icon={Wand} />
@@ -48,8 +49,8 @@ export const ComponentRuleDefaultWidth = () => (
 );
 
 export const ComponentRuleLargeWidth = () => (
-  <DialogContentContainer className={styles["component-rule-large-dialog"]}>
-    <Menu className={styles["component-rule-large-menu"]}>
+  <DialogContentContainer style={{ width: "348px" }}>
+    <Menu>
       <MenuItem title="Item 1" icon={Calendar} />
       <MenuItem title="Item 2" icon={Filter} />
     </Menu>
diff --git a/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.module.scss b/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.module.scss
deleted file mode 100644
index b434510c24..0000000000
--- a/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.component-rule {
-  &-search {
-    margin-bottom: var(--sb-spacing-small);
-  }
-
-  &-large-dialog {
-    width: 348px;
-  }
-  &-large-menu {
-    width: 328px;
-  }
-}
-
-.menu-long-story-wrapper {
-  height: 500px;
-}
diff --git a/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.tsx b/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.tsx
index 4a1011bf81..ea2a2615a6 100644
--- a/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.tsx
+++ b/packages/core/src/components/Menu/Menu/__stories__/Menu.stories.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 import { Activity, Code, Delete, Email, Emoji, Favorite, Feedback, Info, Invite, Settings } from "@vibe/icons";
-import { DialogContentContainer, Menu, MenuDivider, MenuGridItem, MenuItem, MenuTitle } from "../../..";
+import { DialogContentContainer, Flex, Menu, MenuDivider, MenuGridItem, MenuItem, MenuTitle } from "../../..";
 import { DummyNavigableGrid } from "../../../GridKeyboardNavigationContext/__stories__/useGridKeyboardNavigationContext.stories.helpers";
 import { menuWithTwoDepthsSuite } from "../__tests__/Menu.interactions";
-import styles from "./Menu.stories.module.scss";
 import { MenuProps } from "../../..";
 
 export default {
@@ -34,33 +33,35 @@ export const Overview = {
 
 export const Sizes = {
   render: () => [
-    <DialogContentContainer key="small">
-      <Menu size={Menu.sizes.SMALL}>
-        <MenuTitle caption="Small menu" />
-        <MenuDivider />
-        <MenuItem title="Menu item 1" />
-        <MenuItem title="Menu item 2" disabled />
-        <MenuItem title="Menu item 3" />
-      </Menu>
-    </DialogContentContainer>,
-    <DialogContentContainer key="md">
-      <Menu size={Menu.sizes.MEDIUM}>
-        <MenuTitle caption="Medium menu" />
-        <MenuDivider />
-        <MenuItem title="Menu item 1" />
-        <MenuItem title="Menu item 2" disabled />
-        <MenuItem title="Menu item 3" />
-      </Menu>
-    </DialogContentContainer>,
-    <DialogContentContainer key="lg">
-      <Menu size={Menu.sizes.LARGE}>
-        <MenuTitle caption="Large menu" />
-        <MenuDivider />
-        <MenuItem title="Menu item 1" />
-        <MenuItem title="Menu item 2" disabled />
-        <MenuItem title="Menu item 3" />
-      </Menu>
-    </DialogContentContainer>
+    <Flex gap="medium">
+      <DialogContentContainer key="small">
+        <Menu size={Menu.sizes.SMALL}>
+          <MenuTitle caption="Small menu" />
+          <MenuDivider />
+          <MenuItem title="Menu item 1" />
+          <MenuItem title="Menu item 2" disabled />
+          <MenuItem title="Menu item 3" />
+        </Menu>
+      </DialogContentContainer>
+      <DialogContentContainer key="md">
+        <Menu size={Menu.sizes.MEDIUM}>
+          <MenuTitle caption="Medium menu" />
+          <MenuDivider />
+          <MenuItem title="Menu item 1" />
+          <MenuItem title="Menu item 2" disabled />
+          <MenuItem title="Menu item 3" />
+        </Menu>
+      </DialogContentContainer>
+      <DialogContentContainer key="lg">
+        <Menu size={Menu.sizes.LARGE}>
+          <MenuTitle caption="Large menu" />
+          <MenuDivider />
+          <MenuItem title="Menu item 1" />
+          <MenuItem title="Menu item 2" disabled />
+          <MenuItem title="Menu item 3" />
+        </Menu>
+      </DialogContentContainer>
+    </Flex>
   ],
   name: "Sizes",
 
@@ -71,39 +72,43 @@ export const Sizes = {
 
 export const MenuWithIcons = {
   render: () => (
-    <DialogContentContainer>
-      <Menu>
-        <MenuItem icon={Email} title="Send" />
-        <MenuItem icon={Delete} title="Delete" disabled />
-        <MenuItem icon={Info} title="More info" />
-      </Menu>
-    </DialogContentContainer>
+    <Flex>
+      <DialogContentContainer>
+        <Menu>
+          <MenuItem icon={Email} title="Send" />
+          <MenuItem icon={Delete} title="Delete" disabled />
+          <MenuItem icon={Info} title="More info" />
+        </Menu>
+      </DialogContentContainer>
+    </Flex>
   ),
   name: "Menu with icons"
 };
 
 export const MenuWithSubMenu = {
   render: () => (
-    <DialogContentContainer>
-      <Menu>
-        <MenuItem title="Menu item without sub menu" icon={Activity} />
-        <MenuItem title="With Sub menu" icon={Activity}>
-          <Menu>
-            <MenuItem icon={Email} title="Send" />
-            <MenuItem icon={Delete} title="Delete" disabled />
-            <MenuItem icon={Info} title="More info" />
-          </Menu>
-        </MenuItem>
-        <MenuItem title="Another item" icon={Settings} />
-      </Menu>
-    </DialogContentContainer>
+    <Flex>
+      <DialogContentContainer>
+        <Menu>
+          <MenuItem title="Menu item without sub menu" icon={Activity} />
+          <MenuItem title="With Sub menu" icon={Activity}>
+            <Menu>
+              <MenuItem icon={Email} title="Send" />
+              <MenuItem icon={Delete} title="Delete" disabled />
+              <MenuItem icon={Info} title="More info" />
+            </Menu>
+          </MenuItem>
+          <MenuItem title="Another item" icon={Settings} />
+        </Menu>
+      </DialogContentContainer>
+    </Flex>
   ),
   name: "Menu with sub menu"
 };
 
 export const MenuWithGridItemsAndSubMenu = {
   render: () => (
-    <div className={styles["menu-long-story-wrapper"]}>
+    <Flex align="start" style={{ height: "500px" }}>
       <DialogContentContainer>
         <Menu>
           <MenuItem title="Menu item" icon={Favorite} />
@@ -130,32 +135,34 @@ export const MenuWithGridItemsAndSubMenu = {
           <MenuItem title="Another item" icon={Settings} />
         </Menu>
       </DialogContentContainer>
-    </div>
+    </Flex>
   ),
   name: "Menu with grid items and sub menu"
 };
 
 export const MenuWith2DepthSubMenu = {
   render: () => (
-    <DialogContentContainer>
-      <Menu>
-        <MenuItem title="Menu item" icon={Favorite} />
-        <MenuItem title="With Sub menu" icon={Activity}>
-          <Menu>
-            <MenuItem icon={Emoji} title="Send" />
-            <MenuItem icon={Code} title="Sub Sub menu">
-              <Menu>
-                <MenuItem icon={Email} title="Sub sub item" />
-                <MenuItem icon={Invite} title="Another sub sub item" />
-                <MenuItem icon={Settings} title="More sub sub items" />
-              </Menu>
-            </MenuItem>
-            <MenuItem icon={Feedback} title="More info" />
-          </Menu>
-        </MenuItem>
-        <MenuItem title="Another item" icon={Settings} />
-      </Menu>
-    </DialogContentContainer>
+    <Flex>
+      <DialogContentContainer>
+        <Menu>
+          <MenuItem title="Menu item" icon={Favorite} />
+          <MenuItem title="With Sub menu" icon={Activity}>
+            <Menu>
+              <MenuItem icon={Emoji} title="Send" />
+              <MenuItem icon={Code} title="Sub Sub menu">
+                <Menu>
+                  <MenuItem icon={Email} title="Sub sub item" />
+                  <MenuItem icon={Invite} title="Another sub sub item" />
+                  <MenuItem icon={Settings} title="More sub sub items" />
+                </Menu>
+              </MenuItem>
+              <MenuItem icon={Feedback} title="More info" />
+            </Menu>
+          </MenuItem>
+          <MenuItem title="Another item" icon={Settings} />
+        </Menu>
+      </DialogContentContainer>
+    </Flex>
   ),
   name: "Menu with 2-depth sub menu",
   play: menuWithTwoDepthsSuite