Repository: Sage/carbon (ts)

Issue:
Appear the green border around the Button by forcing :hover and :focus state
### Description

The halo appears when to click and hold on Button or when use Tab for focus on the Button and after hover on it.
So the issue appear by forcing :hover and :focus on the same time.

![Screenshot 2024-06-14 at 09 32 03](https://github.com/Sage/carbon/assets/56251247/8a99e129-bc40-42dd-913f-5b3e7ca2eed9)

### Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-cwybez?file=src%2FApp.tsx

### Steps to reproduce

- Using "Tab" focus on the "Tertiary" button
- Hover on the "Tertiary" button while button has focus state


https://github.com/Sage/carbon/assets/148766647/ceea2d2b-15a2-45ea-ae6d-8be7b7503577



### JIRA ticket numbers (Sage only)

SBS-97305

### Suggested solution

_No response_

### Carbon version

130.0.0

### Design tokens version

4.34.0

### Relevant browsers

Chrome

### Relevant OSs

Windows

### Additional context

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request:
fix(menu-item): ensure hover styling does not overlap focus outlines 
fixes #6781

### Proposed behaviour

<!--
A clear and concise description of what changes this PR makes. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->
Ensures that hover styling does not overlap the focus outlines by setting explicit height of `MenuItem` and ensuring any `Button`s passed as children to `MenuItem` have correct alignment with sibling items

![image](https://github.com/Sage/carbon/assets/44157880/f00f3df9-8d5d-4cc7-9652-848ffbb0f1a9)

### Current behaviour

<!--
A clear and concise description of the behaviour before this change. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->
Hover styling overflows the focus outlines and text alignment is wrong when passing `Button` children to `MenuItem`

![image](https://github.com/Sage/carbon/assets/44157880/7f18a461-7aff-4aa5-9e61-048643906e15)

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [x] Screenshots are included in the PR if useful
- [x] Playwright automation tests added or updated if required

#### QA

- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Additional context

<!-- Add any other context or links about the pull request here. -->

### Testing instructions

<!--
How can a reviewer test this PR?

If this PR addresses a pre-existing bug, please include a link to a sandbox that reproduces the original bug. A starter template has been provided to help you do this:
<https://stackblitz.com/fork/github/Parsium/carbon-starter>
-->


Patch:
diff --git a/src/components/menu/menu-item/menu-item.style.ts b/src/components/menu/menu-item/menu-item.style.ts
index 61f6d0059..8ab5186a3 100644
--- a/src/components/menu/menu-item/menu-item.style.ts
+++ b/src/components/menu/menu-item/menu-item.style.ts
@@ -57,12 +57,11 @@ const StyledMenuItemWrapper = styled.a.attrs({
     asDiv,
     hasInput,
   }) => css`
-    ${
-      !inFullscreenView &&
-      css`
-        ${padding}
-      `
-    }
+    ${!inFullscreenView &&
+    css`
+      ${padding}
+    `}
+
     display: inline-block;
     font-size: 14px;
     font-weight: 700;
@@ -75,87 +74,86 @@ const StyledMenuItemWrapper = styled.a.attrs({
       cursor: pointer;
     }
 
-      a:focus,
-      button:focus {
-        ${({ theme }) =>
-          `${
-            !theme.focusRedesignOptOut
-              ? addFocusStyling(true)
-              : /* istanbul ignore next */ oldFocusStyling
-          }`}
-      }
+    a:focus,
+    button:focus {
+      ${({ theme }) =>
+        `${
+          !theme.focusRedesignOptOut
+            ? addFocusStyling(true)
+            : /* istanbul ignore next */ oldFocusStyling
+        }
+      `}
     }
 
-    ${
-      !overrideColor &&
-      css`
-        background-color: ${menuConfigVariants[menuType].background};
-      `
+    a button:not(.search-button) {
+      position: relative;
+      top: -1px;
     }
 
-    ${
-      overrideColor &&
-      css`
-        &&&& {
-          background-color: ${variant === "alternate"
-            ? menuConfigVariants[menuType].alternate
-            : menuConfigVariants[menuType].submenuItemBackground};
+    ${!overrideColor &&
+    css`
+      background-color: ${menuConfigVariants[menuType].background};
+    `}
+
+    ${overrideColor &&
+    css`
+      &&&& {
+        background-color: ${variant === "alternate"
+          ? menuConfigVariants[menuType].alternate
+          : menuConfigVariants[menuType].submenuItemBackground};
+      }
+    `}
+
+    ${!inFullscreenView &&
+    css`
+      max-width: inherit;
+
+      && {
+        a:focus,
+        button:focus {
+          background-color: ${menuConfigVariants[menuType].background};
+          color: ${menuConfigVariants[menuType].color};
+          z-index: 1;
+          position: relative;
         }
-      `
-    }
+      }
 
-    ${
-      !inFullscreenView &&
-      css`
-        max-width: inherit;
-
-        && {
-          a:focus,
-          button:focus {
-            background-color: ${menuConfigVariants[menuType].background};
-            color: ${menuConfigVariants[menuType].color};
-            z-index: 1;
-            position: relative;
-          }
+      &&& {
+        a,
+        button {
+          ${maxWidth &&
+          css`
+            box-sizing: border-box;
+            max-width: inherit;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            vertical-align: bottom;
+          `}
+          height: 40px;
         }
 
-        &&& {
-          a,
-          button {
-            ${maxWidth &&
-            css`
-              box-sizing: border-box;
-              max-width: inherit;
-              text-overflow: ellipsis;
-              overflow: hidden;
-              white-space: nowrap;
-              vertical-align: bottom;
-            `}
-          }
+        a:hover,
+        button:hover {
+          ${!asDiv &&
+          css`
+            background-color: var(--colorsComponentsMenuAutumnStandard600);
+            color: var(--colorsComponentsMenuYang100);
 
-          a:hover,
-          button:hover {
-            ${!asDiv &&
-            css`
-              background-color: var(--colorsComponentsMenuAutumnStandard600);
+            [data-component="icon"] {
               color: var(--colorsComponentsMenuYang100);
-
-              [data-component="icon"] {
-                color: var(--colorsComponentsMenuYang100);
-              }
-            `}
-
-            ::before {
-              border-top-color: var(--colorsComponentsMenuYang100);
             }
+          `}
+
+          ::before {
+            border-top-color: var(--colorsComponentsMenuYang100);
           }
         }
-      `
-    }
+      }
+    `}
 
-    ${
-      asPassiveItem
-        ? `
+    ${asPassiveItem
+      ? `
         ${StyledIconButton} {
           > span {
             display: inline-flex;
@@ -170,15 +168,14 @@ const StyledMenuItemWrapper = styled.a.attrs({
           }
         }
       `
-        : `
+      : `
         a,
         ${StyledLink} a,
         button,
         ${StyledLink} button {
           padding: 0 16px;
         }
-      `
-    }
+      `}
 
     button,
     ${StyledLink} button {
@@ -187,13 +184,11 @@ const StyledMenuItemWrapper = styled.a.attrs({
       margin: 0px;
       text-align: left;
 
-      ${
-        inFullscreenView &&
-        css`
-          height: auto;
-          white-space: normal;
-        `
-      }
+      ${inFullscreenView &&
+      css`
+        height: auto;
+        white-space: normal;
+      `}
     }
 
     &&& {
@@ -208,158 +203,146 @@ const StyledMenuItemWrapper = styled.a.attrs({
         ${!hasInput && `color: ${menuConfigVariants[menuType].color};`}
       }
 
-      ${
-        !inFullscreenView &&
-        css`
-          a > ${StyledIcon}, button > ${StyledIcon} {
-            display: inline-block;
-          }
-        `
-      }
+      ${!inFullscreenView &&
+      css`
+        a > ${StyledIcon}, button > ${StyledIcon} {
+          display: inline-block;
+        }
+      `}
     }
 
-    ${
-      selected &&
-      css`
+    ${selected &&
+    css`
+      background-color: ${menuConfigVariants[menuType].selected};
+
+      a:focus,
+      button:focus {
         background-color: ${menuConfigVariants[menuType].selected};
+      }
 
-        a:focus,
-        button:focus {
-          background-color: ${menuConfigVariants[menuType].selected};
-        }
+      a:hover,
+      button:hover {
+        background-color: var(--colorsComponentsMenuAutumnStandard600);
+      }
+    `}
 
-        a:hover,
-        button:hover {
-          background-color: var(--colorsComponentsMenuAutumnStandard600);
-        }
-      `
-    }
+    ${variant === "alternate" &&
+    !inFullscreenView &&
+    css`
+      &&& {
+        background-color: ${menuConfigVariants[menuType].alternate};
+      }
 
-    ${
-      variant === "alternate" &&
-      !inFullscreenView &&
+      &&& a:focus,
+      &&& button:focus {
+        background-color: ${menuConfigVariants[menuType].alternate};
+      }
+
+      ${!hasInput &&
       css`
-        &&& {
-          background-color: ${menuConfigVariants[menuType].alternate};
+        &&& a:hover,
+        &&& button:hover {
+          background-color: ${menuConfigVariants[menuType].alternateHover};
         }
+      `}
+    `}
+
+    ${isOpen &&
+    css`
+      a,
+      button {
+        background-color: ${menuConfigVariants[menuType].submenuItemBackground};
+        color: ${menuConfigVariants[menuType].color};
+      }
+    `}
 
-        &&& a:focus,
-        &&& button:focus {
-          background-color: ${menuConfigVariants[menuType].alternate};
+    ${hasSubmenu &&
+    css`
+      background-color: ${menuConfigVariants[menuType].submenuBackground};
+
+      a:focus,
+      button:focus {
+        background-color: ${menuConfigVariants[menuType].submenuBackground};
+        color: ${menuConfigVariants[menuType].color};
+
+        [data-component="icon"] {
+          color: ${menuConfigVariants[menuType].color};
         }
 
-        ${!hasInput &&
+        ${clickToOpen &&
+        isOpen &&
         css`
-          &&& a:hover,
-          &&& button:hover {
-            background-color: ${menuConfigVariants[menuType].alternateHover};
-          }
+          background-color: ${menuConfigVariants[menuType]
+            .submenuOpenedBackground};
         `}
-      `
-    }
+      }
 
-    ${
-      isOpen &&
-      css`
-        a,
-        button {
+      a:hover,
+      button:hover {
+        background-color: ${menuConfigVariants[menuType]
+          .submenuOpenedBackground};
+        color: var(--colorsComponentsMenuYang100);
+
+        ${!(href || clickToOpen) &&
+        css`
+          cursor: default;
           background-color: ${menuConfigVariants[menuType]
             .submenuItemBackground};
           color: ${menuConfigVariants[menuType].color};
+        `}
+
+        [data-component="icon"] {
+          color: ${menuConfigVariants[menuType].color};
         }
-      `
-    }
+      }
 
-    ${
-      hasSubmenu &&
+      ${selected &&
       css`
-        background-color: ${menuConfigVariants[menuType].submenuBackground};
+        background-color: ${menuConfigVariants[menuType].submenuSelected};
 
         a:focus,
         button:focus {
-          background-color: ${menuConfigVariants[menuType].submenuBackground};
-          color: ${menuConfigVariants[menuType].color};
-
-          [data-component="icon"] {
-            color: ${menuConfigVariants[menuType].color};
-          }
-
-          ${clickToOpen &&
-          isOpen &&
-          css`
-            background-color: ${menuConfigVariants[menuType]
-              .submenuOpenedBackground};
-          `}
+          background-color: ${menuConfigVariants[menuType].submenuSelected};
         }
 
         a:hover,
         button:hover {
-          background-color: ${menuConfigVariants[menuType]
-            .submenuOpenedBackground};
+          background-color: var(--colorsComponentsMenuAutumnStandard600);
           color: var(--colorsComponentsMenuYang100);
-
-          ${!(href || clickToOpen) &&
-          css`
-            cursor: default;
-            background-color: ${menuConfigVariants[menuType]
-              .submenuItemBackground};
-            color: ${menuConfigVariants[menuType].color};
-          `}
-
-          [data-component="icon"] {
-            color: ${menuConfigVariants[menuType].color};
-          }
         }
+      `}
 
-        ${selected &&
-        css`
-          background-color: ${menuConfigVariants[menuType].submenuSelected};
-
-          a:focus,
-          button:focus {
-            background-color: ${menuConfigVariants[menuType].submenuSelected};
-          }
-
-          a:hover,
-          button:hover {
-            background-color: var(--colorsComponentsMenuAutumnStandard600);
-            color: var(--colorsComponentsMenuYang100);
-          }
-        `}
-
-        ${showDropdownArrow &&
-        css`
-          > a,
-          > button:not(${StyledIconButton}) {
-            padding-right: 32px;
-          }
+      ${showDropdownArrow &&
+      css`
+        > a,
+        > button:not(${StyledIconButton}) {
+          padding-right: 32px;
+        }
 
-          a::before,
-          button::before {
-            display: block;
-            margin-top: -2px;
-            pointer-events: none;
-            position: absolute;
-            right: 16px;
-            top: 50%;
-            z-index: 2;
-            content: "";
-            width: 0;
-            height: 0;
-            border-width: 5px 4px 4px;
-            border-style: solid;
-            border-top-color: initial;
-            border-right-color: transparent;
-            border-bottom-color: transparent;
-            border-left-color: transparent;
-          }
-        `}
-      `
-    }
+        a::before,
+        button::before {
+          display: block;
+          margin-top: -2px;
+          pointer-events: none;
+          position: absolute;
+          right: 16px;
+          top: 50%;
+          z-index: 2;
+          content: "";
+          width: 0;
+          height: 0;
+          border-width: 5px 4px 4px;
+          border-style: solid;
+          border-top-color: initial;
+          border-right-color: transparent;
+          border-bottom-color: transparent;
+          border-left-color: transparent;
+        }
+      `}
+    `}
 
-    ${
-      inFullscreenView &&
-      css`
+    ${inFullscreenView &&
+    css`
       ${
         asDiv &&
         css`
@@ -426,8 +409,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
           }
         }
       }
-    `
-    }
+    `}
   `}
 `;
 
diff --git a/src/components/menu/menu.pw.tsx b/src/components/menu/menu.pw.tsx
index fb23bf40f..f9cc733eb 100644
--- a/src/components/menu/menu.pw.tsx
+++ b/src/components/menu/menu.pw.tsx
@@ -67,6 +67,7 @@ import {
   MenuComponentScrollableWithSearch,
   MenuSegmentTitleComponentWithAdditionalMenuItem,
   MenuComponentFullScreenWithLongSubmenuText,
+  MenuItemWithPopoverContainerChild,
 } from "./component.test-pw";
 import { NavigationBarWithSubmenuAndChangingHeight } from "../navigation-bar/navigation-bar-test.stories";
 import { HooksConfig } from "../../../playwright";
@@ -402,7 +403,7 @@ test.describe("Prop tests for Menu component", () => {
     const topLess = 174;
     const leftLess = 124;
     // additionVal is to compensate for the outline.
-    const additionVal = 2;
+    const additionVal = 4;
 
     await page.keyboard.press("Tab");
     await page.keyboard.press("Enter");
@@ -2655,5 +2656,19 @@ test.describe(
       );
       await expect(subMenu).toBeInViewport();
     });
+
+    test("should render the menu with the expected styling when menu item has a PopoverContainer child with renderOpenComponent passed", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<MenuItemWithPopoverContainerChild />);
+
+      const menuItemAnchor = menuItem(page).first().locator("a");
+      const buttonChild = menuItemAnchor.locator("button");
+
+      await expect(menuItemAnchor).toHaveCSS("height", "40px");
+      await expect(buttonChild).toHaveCSS("position", "relative");
+      await expect(buttonChild).toHaveCSS("top", "-1px");
+    });
   }
 );


Test patch:
diff --git a/src/components/menu/component.test-pw.tsx b/src/components/menu/component.test-pw.tsx
index a81e2c78a..b63ec9873 100644
--- a/src/components/menu/component.test-pw.tsx
+++ b/src/components/menu/component.test-pw.tsx
@@ -19,6 +19,9 @@ import GlobalHeader from "../global-header";
 import Box from "../box/box.component";
 import Typography from "../typography/typography.component";
 import useMediaQuery from "../../hooks/useMediaQuery";
+import Button from "../button";
+import PopoverContainer from "../popover-container";
+import Icon from "../icon";
 
 const menuTypes: MenuType[] = ["white", "light", "dark", "black"];
 
@@ -771,3 +774,34 @@ export const SubMenuWithVeryLongLabel = () => {
     </Box>
   );
 };
+
+export const MenuItemWithPopoverContainerChild = () => {
+  return (
+    <Menu menuType="black">
+      <MenuItem>
+        <PopoverContainer
+          disableAnimation
+          containerAriaLabel="notifications"
+          closeButtonAriaLabel="closeContainerAriaLabel"
+          position="left"
+          shouldCoverButton
+          onOpen={() => {}}
+          onClose={() => {}}
+          open={false}
+          renderOpenComponent={({ ref, onClick }) => (
+            <Box data-role="gblnav-notificationui-bell">
+              <Button aria-label="Notifications" ref={ref} onClick={onClick}>
+                <Box alignItems="center" display="flex" px={2}>
+                  <Icon type="alert" />
+                  notifications
+                </Box>
+              </Button>
+            </Box>
+          )}
+        >
+          Content
+        </PopoverContainer>
+      </MenuItem>
+    </Menu>
+  );
+};