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>
jpmorganchase · Feb 5, 2025 · ba0f436 · ba0f436
1 parent 2c30bff
commit ba0f436
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 1 deletion.
diff --git a/.changeset/tasty-jobs-jump.md 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
@@ -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
@@ -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
@@ -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
+      },
+    },
+  },
+};