fix(layout): fix pop menu style error

close #7381
ant-design · Jul 28, 2023 · 36bfccf · 36bfccf
1 parent fd4b9fd
commit 36bfccf
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 103 deletions.
diff --git a/packages/layout/src/components/SiderMenu/BaseMenu.tsx b/packages/layout/src/components/SiderMenu/BaseMenu.tsx
@@ -246,7 +246,7 @@ class MenuUtil {
           {menuType === 'group' && collapsed ? null : shouldHasIcon &&
             iconDom ? (
             <span
-              className={`${baseClassName}-item-icon ${this.props?.hashId}`}
+              className={`${baseClassName}-item-icon ${this.props?.hashId}`.trim()}
             >
               {iconDom}
             </span>
@@ -430,7 +430,7 @@ class MenuUtil {
           )}
         >
           <span
-            className={`${baseClassName}-item-icon ${this.props?.hashId}`}
+            className={`${baseClassName}-item-icon ${this.props?.hashId}`.trim()}
             style={{
               display: defaultIcon === null && !icon ? 'none' : '',
             }}

diff --git a/packages/layout/src/components/SiderMenu/style/menu.ts b/packages/layout/src/components/SiderMenu/style/menu.ts
@@ -14,7 +14,6 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
     ? token.layout?.header
     : token.layout?.sider;
 
-  console.log(token.antCls);
   return {
     [`${token.componentCls}`]: {
       background: 'transparent',
@@ -59,16 +58,6 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
         },
       },
 
-      [`${token.componentCls}-item-icon`]: {
-        height: '14px',
-        width: '14px',
-        opacity: '0.85',
-        lineHeight: '14px',
-        '> span.anticon': {
-          lineHeight: '14px!important',
-          height: '14px',
-        },
-      },
       '&-item-title': {
         display: 'flex',
         flexDirection: 'row',
@@ -154,10 +143,19 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
         lineHeight: 20,
       },
     },
-    [`${token.antCls}-menu-submenu${token.antCls}-menu-submenu-popup`]: {
-      [`${token.componentCls}-item-title`]: {
-        alignItems: 'flex-start',
-      },
+    ...(mode.includes('horizontal')
+      ? {}
+      : {
+          [`${token.antCls}-menu-submenu${token.antCls}-menu-submenu-popup`]: {
+            [`${token.componentCls}-item-title`]: {
+              alignItems: 'flex-start',
+            },
+          },
+        }),
+    [`${token.antCls}-menu-submenu-popup`]: {
+      backgroundColor: 'rgba(255, 255, 255, 0.42)',
+      '-webkit-backdrop-filter': 'blur(8px)',
+      backdropFilter: 'blur(8px)',
     },
   };
 };

diff --git a/packages/layout/src/style/index.ts b/packages/layout/src/style/index.ts
@@ -265,11 +265,6 @@ const genProLayoutStyle: GenerateStyle<ProLayoutToken> = (token) => {
         background: token?.layout?.bgLayout,
       },
     },
-    [`${token.antCls}-menu-submenu-popup`]: {
-      backgroundColor: 'rgba(255, 255, 255, 0.42)',
-      '-webkit-backdrop-filter': 'blur(8px)',
-      backdropFilter: 'blur(8px)',
-    },
   };
 };
 

diff --git a/tests/form/__snapshots__/demo.test.ts.snap b/tests/form/__snapshots__/demo.test.ts.snap
@@ -47625,7 +47625,7 @@ exports[`form demos 📸 renders ./packages/form/src/demos/layout-footer.tsx cor
                       class="ant-pro-base-menu-inline-item-title ant-pro-base-menu-inline-item-title-collapsed"
                     >
                       <span
-                        class="ant-pro-base-menu-inline-item-icon "
+                        class="ant-pro-base-menu-inline-item-icon"
                       >
                         <span
                           aria-label="smile"