Merge pull request #7120 from Sage/FE-7014-menuitem-alignment

feat(menu-item): fix padding when child of Menu and no icon
Sage · Dec 12, 2024 · 1780d7d · 1780d7d
2 parents eea28ad + 31dd3a7
commit 1780d7d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 21 deletions.
diff --git a/src/components/menu/menu-item/menu-item.style.ts b/src/components/menu/menu-item/menu-item.style.ts
@@ -1,15 +1,18 @@
 import styled, { css } from "styled-components";
+
 import { padding, PaddingProps } from "styled-system";
-import StyledButton from "../../button/button.style";
-import { StyledContent, StyledLink } from "../../link/link.style";
-import StyledIcon from "../../icon/icon.style";
-import StyledIconButton from "../../icon-button/icon-button.style";
+
 import menuConfigVariants from "../menu.config";
-import { MenuType } from "../__internal__/menu.context";
-import { MenuWithChildren } from "./menu-item.component";
 import Link from "../../link";
-import addFocusStyling from "../../../style/utils/add-focus-styling";
+import { MenuType } from "../__internal__/menu.context";
+import StyledButton from "../../button/button.style";
+import StyledIconButton from "../../icon-button/icon-button.style";
+import StyledIcon from "../../icon/icon.style";
+import { StyledContent, StyledLink } from "../../link/link.style";
 import { baseTheme } from "../../../style/themes";
+import addFocusStyling from "../../../style/utils/add-focus-styling";
+
+import { MenuWithChildren } from "./menu-item.component";
 
 interface StyledMenuItemWrapperProps
   extends Pick<
@@ -128,17 +131,6 @@ const StyledMenuItemWrapper = styled.a.attrs({
       `}
     }
 
-    ${!maxWidth &&
-    css`
-      a:has([data-component="icon"]):not(:has(button))
-        ${StyledContent},
-        button:has([data-component="icon"]):not(:has(button))
-        ${StyledContent} {
-        position: relative;
-        top: -1px;
-      }
-    `}
-
     :has([data-element="input"]) ${StyledContent} {
       width: 100%;
     }
@@ -227,7 +219,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
 
             > a:has(${StyledButton}:not(.search-button)) {
              height: 100%;
-             
+
              ${StyledContent} {
                 height: inherit;
 
@@ -492,7 +484,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
         `
       }
 
-      
+
       > a, > button {
        min-height: 40px;
        line-height: 40px;

diff --git a/src/components/menu/menu-test.stories.tsx b/src/components/menu/menu-test.stories.tsx
@@ -38,6 +38,7 @@ const meta: Meta<typeof Menu> = {
     "MenuWithSubmenuCustomPadding",
     "WhenMenuItemsWrap",
     "MenuFullScreenWithMaxWidth",
+    "IconAlignment",
   ],
   parameters: {
     info: { disable: true },
@@ -542,3 +543,14 @@ export const MenuFullScreenWithMaxWidth = () => {
   );
 };
 MenuFullScreenWithMaxWidth.storyName = "Menu Full Screen with Max Width";
+
+export const IconAlignment = () => {
+  return (
+    <Menu menuType="black">
+      <MenuItem icon="home">Alpha</MenuItem>
+      <MenuItem>Beta</MenuItem>
+      <MenuItem icon="print">Charlie</MenuItem>
+    </Menu>
+  );
+};
+IconAlignment.storyName = "Icon & Icon-less Text Alignment";
diff --git a/src/components/menu/menu.pw.tsx b/src/components/menu/menu.pw.tsx
@@ -415,7 +415,7 @@ test.describe("Prop tests for Menu component", () => {
     const topLess = 184;
     const leftLess = 108;
     // additionVal is to compensate for the outline.
-    const additionVal = 5;
+    const additionVal = 6;
 
     await page.keyboard.press("Tab");
     await page.keyboard.press("Enter");