Merge pull request #6917 from Sage/submenu-max-width-fix

fix(menu-item, submenu): remove min-width when submenuMaxWidth prop is set
Sage · Aug 28, 2024 · db66e46 · db66e46
2 parents f8dd294 + 002c37d
commit db66e46
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/components/menu/__internal__/submenu/submenu.style.ts b/src/components/menu/__internal__/submenu/submenu.style.ts
@@ -81,7 +81,6 @@ const StyledSubmenu = styled.ul<StyledSubmenuProps>`
 
       ${submenuMaxWidth &&
       css`
-        min-width: ${submenuMaxWidth};
         max-width: ${submenuMaxWidth};
 
         &&& {

diff --git a/src/components/menu/menu.pw.tsx b/src/components/menu/menu.pw.tsx
@@ -2261,7 +2261,6 @@ test(`should verify that submenu item text wraps when it would overflow the cont
   );
 
   await expect(submenuBlockElement).toHaveCSS("max-width", "300px");
-  await expect(lastItem).toHaveCSS("width", "300px");
   expect(parseInt(cssItemHeight)).toBeGreaterThan(40);
 });
 

diff --git a/src/components/menu/menu.stories.tsx b/src/components/menu/menu.stories.tsx
@@ -747,7 +747,18 @@ export const TruncationAndSubmenuWidth: Story = () => {
               submenuMaxWidth="300px"
               submenu="This is a very long menu item title"
             >
-              <MenuItem href="#">Item Submenu One</MenuItem>
+              <MenuItem href="#">Item One</MenuItem>
+              <MenuItem p="2px 16px">
+                <Box minWidth="268px">
+                  <Search
+                    placeholder="placeholder"
+                    variant={
+                      ["white", "light"].includes(menuType) ? "default" : "dark"
+                    }
+                    defaultValue=""
+                  />
+                </Box>
+              </MenuItem>
               <MenuSegmentTitle text="segment title that should wrap when it will overflow">
                 <MenuItem href="#">Item Two</MenuItem>
                 <MenuItem href="#">