From ba0f436a0f54a304a4e65adb98676a5347a6c462 Mon Sep 17 00:00:00 2001
From: Alberto Brusa <94554131+AlbertoBrusa@users.noreply.github.com>
Date: Wed, 5 Feb 2025 13:32:22 +0000
Subject: [PATCH] Center vertical alignment of MenuItem - #4571 (#4577)

Co-authored-by: Alberto <alberto.brusa@ibm.com>
Co-authored-by: Josh Wooding <12938082+joshwooding@users.noreply.github.com>
---
 .changeset/tasty-jobs-jump.md                 |  5 ++
 packages/core/src/menu/MenuItem.css           |  5 ++
 packages/core/src/option/Option.css           |  5 ++
 .../core/stories/menu/menu.qa.stories.tsx     | 61 ++++++++++++++++++-
 4 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tasty-jobs-jump.md

diff --git a/.changeset/tasty-jobs-jump.md b/.changeset/tasty-jobs-jump.md
new file mode 100644
index 00000000000..68a1da7caa0
--- /dev/null
+++ b/.changeset/tasty-jobs-jump.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Added centered vertical alignment to MenuItem
diff --git a/packages/core/src/menu/MenuItem.css b/packages/core/src/menu/MenuItem.css
index 29e8f071325..11ea31900dc 100644
--- a/packages/core/src/menu/MenuItem.css
+++ b/packages/core/src/menu/MenuItem.css
@@ -50,6 +50,11 @@
   box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);
 }
 
+/* TODO: Find a better way of doing this */
+.saltMenuItem .saltIcon:not(.saltCheckboxIcon-icon) {
+  min-height: var(--salt-text-lineHeight);
+}
+
 .saltMenuItem-expandIcon.saltIcon {
   margin-left: auto;
 }
diff --git a/packages/core/src/option/Option.css b/packages/core/src/option/Option.css
index 445a45016eb..0e50f27ca60 100644
--- a/packages/core/src/option/Option.css
+++ b/packages/core/src/option/Option.css
@@ -40,3 +40,8 @@
   color: var(--salt-content-primary-foreground-disabled);
   cursor: var(--salt-selectable-cursor-disabled);
 }
+
+/* TODO: Find a better way of doing this */
+.saltOption .saltIcon:not(.saltCheckboxIcon-icon) {
+  min-height: var(--salt-text-lineHeight);
+}
diff --git a/packages/core/stories/menu/menu.qa.stories.tsx b/packages/core/stories/menu/menu.qa.stories.tsx
index 02d29875e77..3a2169d879f 100644
--- a/packages/core/stories/menu/menu.qa.stories.tsx
+++ b/packages/core/stories/menu/menu.qa.stories.tsx
@@ -6,7 +6,12 @@ import {
   MenuPanel,
   MenuTrigger,
 } from "@salt-ds/core";
-import { MicroMenuIcon } from "@salt-ds/icons";
+import {
+  CopyIcon,
+  ExportIcon,
+  MicroMenuIcon,
+  SettingsIcon,
+} from "@salt-ds/icons";
 import type { Meta, StoryFn } from "@storybook/react";
 import { QAContainer, type QAContainerProps } from "docs/components";
 
@@ -163,3 +168,57 @@ GroupedExamples.parameters = {
     },
   },
 };
+
+export const WithIconExamples: StoryFn<QAContainerProps> = (props) => {
+  return (
+    <QAContainer
+      itemWidthAuto
+      height={500}
+      width={800}
+      transposeDensity
+      vertical
+      {...props}
+    >
+      <div style={{ width: 190, height: 300 }}>
+        <Menu open>
+          <MenuTrigger>
+            <Button appearance="transparent" aria-label="Open Menu">
+              <MicroMenuIcon aria-hidden />
+            </Button>
+          </MenuTrigger>
+          <MenuPanel>
+            <MenuItem>
+              <CopyIcon aria-hidden />
+              Copy
+            </MenuItem>
+            <MenuItem>
+              <ExportIcon aria-hidden />
+              Export
+            </MenuItem>
+            <MenuItem>
+              <SettingsIcon aria-hidden />
+              Settings
+            </MenuItem>
+          </MenuPanel>
+        </Menu>
+      </div>
+    </QAContainer>
+  );
+};
+
+WithIconExamples.parameters = {
+  chromatic: {
+    disableSnapshot: false,
+    modes: {
+      theme: {
+        themeNext: "disable",
+      },
+      themeNext: {
+        themeNext: "enable",
+        corner: "rounded",
+        accent: "teal",
+        // Ignore headingFont given font is not loaded
+      },
+    },
+  },
+};