fix: menu overflow (#38989)

ant-design · Nov 25, 2022 · 1fbb865 · 1fbb865
1 parent 72f7596
commit 1fbb865
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/components/menu/style/horizontal.tsx b/components/menu/style/horizontal.tsx
@@ -10,7 +10,6 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
     lineWidth,
     lineType,
     menuItemPaddingInline,
-    menuItemMarginInline,
   } = token;
 
   return {
@@ -33,7 +32,6 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
         display: 'inline-block',
         verticalAlign: 'bottom',
         paddingInline: menuItemPaddingInline,
-        marginInline: menuItemMarginInline,
       },
 
       [`> ${componentCls}-item:hover,

diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx
@@ -60,10 +60,10 @@ export interface MenuToken extends FullToken<'Menu'> {
   menuItemHeight: number;
   menuHorizontalHeight: number;
   menuItemPaddingInline: number;
-  menuItemMarginInline: number;
   menuArrowSize: number;
   menuArrowOffset: string;
   menuPanelMaskInset: number;
+  menuSubMenuBg: string;
 }
 
 // =============================== Base ===============================
@@ -409,8 +409,14 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
         return [];
       }
 
-      const { colorPrimary, colorError, colorErrorHover, colorTextLightSolid, colorTextSecondary } =
-        token;
+      const {
+        colorBgElevated,
+        colorPrimary,
+        colorError,
+        colorErrorHover,
+        colorTextLightSolid,
+        colorTextSecondary,
+      } = token;
 
       const { controlHeightLG, fontSize } = token;
 
@@ -420,11 +426,11 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
       const menuToken = mergeToken<MenuToken>(token, {
         menuItemHeight: controlHeightLG,
         menuItemPaddingInline: token.margin,
-        menuItemMarginInline: token.marginXXS,
         menuArrowSize,
         menuHorizontalHeight: controlHeightLG * 1.15,
         menuArrowOffset: `${menuArrowSize * 0.25}px`,
         menuPanelMaskInset: -7, // Still a hardcode here since it's offset by rc-align
+        menuSubMenuBg: colorBgElevated,
       });
 
       const menuDarkToken = mergeToken<MenuToken>(
@@ -451,6 +457,8 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
           colorDangerItemTextSelected: colorTextLightSolid,
           colorDangerItemBgActive: colorError,
           colorDangerItemBgSelected: colorError,
+
+          menuSubMenuBg: '#001529',
         },
         {
           ...overrideComponentToken,

diff --git a/components/menu/style/theme.tsx b/components/menu/style/theme.tsx
@@ -40,6 +40,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
     colorDangerItemBgSelected,
 
     colorItemBgHover,
+    menuSubMenuBg,
   } = token;
 
   return {
@@ -145,7 +146,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
       },
 
       [`&${componentCls}-submenu > ${componentCls}`]: {
-        backgroundColor: colorItemBg,
+        backgroundColor: menuSubMenuBg,
       },
 
       [`&${componentCls}-popup > ${componentCls}`]: {

diff --git a/components/menu/style/vertical.tsx b/components/menu/style/vertical.tsx
@@ -7,11 +7,11 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
   const {
     componentCls,
     menuItemHeight,
-    menuItemMarginInline,
     itemMarginInline,
     padding,
     menuArrowSize,
     fontSize,
+    marginXXS,
   } = token;
 
   const paddingWithArrow = menuArrowSize + fontSize;
@@ -29,7 +29,7 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
       textOverflow: 'ellipsis',
 
       marginInline: itemMarginInline,
-      marginBlock: menuItemMarginInline,
+      marginBlock: marginXXS,
       width: `calc(100% - ${itemMarginInline * 2}px)`,
     },