fix(menu): ensure that the correct focus and hover styling is applied…

… to popover-container button
Sage · Feb 6, 2025 · eb2c4d2 · eb2c4d2
1 parent 21966b6
commit eb2c4d2
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/src/components/menu/menu-item/menu-item.style.ts b/src/components/menu/menu-item/menu-item.style.ts
@@ -181,6 +181,11 @@ const StyledMenuItemWrapper = styled.a.attrs({
 
         a:hover,
         button:hover {
+          ${StyledButton} {
+            border-radius: 0;
+            background-color: transparent;
+          }
+
           ${!asDiv &&
           css`
             background-color: var(--colorsComponentsMenuAutumnStandard600);

diff --git a/src/components/menu/menu.pw.tsx b/src/components/menu/menu.pw.tsx
@@ -2436,4 +2436,22 @@ test.describe("Styling, Scrolling & Navigation Bar Tests for Menu Component", ()
     await expect(menuItemAnchor).toHaveCSS("height", "40px");
     await expect(buttonChild).toHaveCSS("height", "40px");
   });
+
+  test("should render the menu with the expected hover styling when menu item has a PopoverContainer child with renderOpenComponent passed", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<MenuItemWithPopoverContainerChild />);
+
+    const popoverContainerButton = page.getByRole("button", {
+      name: "notification",
+    });
+    await popoverContainerButton.hover();
+
+    await expect(popoverContainerButton).toHaveCSS("border-radius", "0px");
+    await expect(popoverContainerButton).toHaveCSS(
+      "background-color",
+      "rgba(0, 0, 0, 0)",
+    );
+  });
 });