fix: MenuItem with icon only will still have additional margin (#21925)

* fix: MenuItem with icon only will still have additional margin * update snapshot * fix snapshot
ant-design · Mar 6, 2020 · e8876d5 · e8876d5
1 parent 36c05dd
commit e8876d5
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 47 deletions.
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -7784,7 +7784,7 @@ exports[`ConfigProvider components Menu configProvider 1`] = `
           class="config-menu-item-group-list"
         >
           <li
-            class="config-menu-item"
+            class="config-menu-item config-menu-item-only-child"
             role="menuitem"
             style="padding-left:48px"
           >
@@ -7838,7 +7838,7 @@ exports[`ConfigProvider components Menu normal 1`] = `
           class="ant-menu-item-group-list"
         >
           <li
-            class="ant-menu-item"
+            class="ant-menu-item ant-menu-item-only-child"
             role="menuitem"
             style="padding-left:48px"
           >
@@ -7892,7 +7892,7 @@ exports[`ConfigProvider components Menu prefixCls 1`] = `
           class="prefix-Menu-item-group-list"
         >
           <li
-            class="prefix-Menu-item"
+            class="prefix-Menu-item prefix-Menu-item-only-child"
             role="menuitem"
             style="padding-left:48px"
           >

diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js
@@ -413,6 +413,9 @@ describe('Form', () => {
       ).toEqual("'name' is required");
 
       await change(wrapper, 0, 'p');
+      await delay(100);
+      wrapper.update();
+
       expect(
         wrapper
           .find('.ant-form-item-explain')

diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.js.snap
@@ -306,7 +306,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
         </div>
       </li>
       <li
-        class="ant-menu-item"
+        class="ant-menu-item ant-menu-item-only-child"
         role="menuitem"
       >
         nav 1
@@ -331,7 +331,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
         </div>
       </li>
       <li
-        class="ant-menu-item ant-menu-item-selected"
+        class="ant-menu-item ant-menu-item-only-child ant-menu-item-selected"
         role="menuitem"
       >
         nav 2
@@ -356,7 +356,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
         </div>
       </li>
       <li
-        class="ant-menu-item"
+        class="ant-menu-item ant-menu-item-only-child"
         role="menuitem"
       >
         nav 3
@@ -1170,7 +1170,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
           <div />
         </li>
         <li
-          class="ant-menu-item"
+          class="ant-menu-item ant-menu-item-only-child"
           role="menuitem"
           style="padding-left:24px"
         >
@@ -1315,7 +1315,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
         </div>
       </li>
       <li
-        class="ant-menu-item"
+        class="ant-menu-item ant-menu-item-only-child"
         role="menuitem"
       >
         nav 1
@@ -1340,7 +1340,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
         </div>
       </li>
       <li
-        class="ant-menu-item ant-menu-item-selected"
+        class="ant-menu-item ant-menu-item-only-child ant-menu-item-selected"
         role="menuitem"
       >
         nav 2
@@ -1365,7 +1365,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
         </div>
       </li>
       <li
-        class="ant-menu-item"
+        class="ant-menu-item ant-menu-item-only-child"
         role="menuitem"
       >
         nav 3
@@ -1486,7 +1486,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
         </div>
       </li>
       <li
-        class="ant-menu-item"
+        class="ant-menu-item ant-menu-item-only-child"
         role="menuitem"
       >
         nav 1
@@ -1511,7 +1511,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
         </div>
       </li>
       <li
-        class="ant-menu-item ant-menu-item-selected"
+        class="ant-menu-item ant-menu-item-only-child ant-menu-item-selected"
         role="menuitem"
       >
         nav 2
@@ -1536,7 +1536,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
         </div>
       </li>
       <li
-        class="ant-menu-item"
+        class="ant-menu-item ant-menu-item-only-child"
         role="menuitem"
       >
         nav 3
@@ -1668,28 +1668,28 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
                 role="menu"
               >
                 <li
-                  class="ant-menu-item ant-menu-item-selected"
+                  class="ant-menu-item ant-menu-item-only-child ant-menu-item-selected"
                   role="menuitem"
                   style="padding-left:48px"
                 >
                   option1
                 </li>
                 <li
-                  class="ant-menu-item"
+                  class="ant-menu-item ant-menu-item-only-child"
                   role="menuitem"
                   style="padding-left:48px"
                 >
                   option2
                 </li>
                 <li
-                  class="ant-menu-item"
+                  class="ant-menu-item ant-menu-item-only-child"
                   role="menuitem"
                   style="padding-left:48px"
                 >
                   option3
                 </li>
                 <li
-                  class="ant-menu-item"
+                  class="ant-menu-item ant-menu-item-only-child"
                   role="menuitem"
                   style="padding-left:48px"
                 >
@@ -1832,7 +1832,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
         </div>
       </li>
       <li
-        class="ant-menu-item"
+        class="ant-menu-item ant-menu-item-only-child"
         role="menuitem"
       >
         nav 1
@@ -1857,7 +1857,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
         </div>
       </li>
       <li
-        class="ant-menu-item ant-menu-item-selected"
+        class="ant-menu-item ant-menu-item-only-child ant-menu-item-selected"
         role="menuitem"
       >
         nav 2
@@ -1882,7 +1882,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
         </div>
       </li>
       <li
-        class="ant-menu-item"
+        class="ant-menu-item ant-menu-item-only-child"
         role="menuitem"
       >
         nav 3
@@ -1968,28 +1968,28 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
               role="menu"
             >
               <li
-                class="ant-menu-item ant-menu-item-selected"
+                class="ant-menu-item ant-menu-item-only-child ant-menu-item-selected"
                 role="menuitem"
                 style="padding-left:48px"
               >
                 option1
               </li>
               <li
-                class="ant-menu-item"
+                class="ant-menu-item ant-menu-item-only-child"
                 role="menuitem"
                 style="padding-left:48px"
               >
                 option2
               </li>
               <li
-                class="ant-menu-item"
+                class="ant-menu-item ant-menu-item-only-child"
                 role="menuitem"
                 style="padding-left:48px"
               >
                 option3
               </li>
               <li
-                class="ant-menu-item"
+                class="ant-menu-item ant-menu-item-only-child"
                 role="menuitem"
                 style="padding-left:48px"
               >

diff --git a/components/menu/MenuItem.tsx b/components/menu/MenuItem.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { Item } from 'rc-menu';
+import toArray from 'rc-util/lib/Children/toArray';
+import classNames from 'classnames';
 import { ClickParam } from '.';
 import MenuContext, { MenuContextProps } from './MenuContext';
 import Tooltip, { TooltipProps } from '../tooltip';
@@ -36,7 +38,7 @@ export default class MenuItem extends React.Component<MenuItemProps> {
   };
 
   renderItem = ({ siderCollapsed }: SiderContextProps) => {
-    const { level, children, rootPrefixCls } = this.props;
+    const { level, className, children, rootPrefixCls } = this.props;
     const { title, ...rest } = this.props;
 
     return (
@@ -58,7 +60,14 @@ export default class MenuItem extends React.Component<MenuItemProps> {
               placement={direction === 'rtl' ? 'left' : 'right'}
               overlayClassName={`${rootPrefixCls}-inline-collapsed-tooltip`}
             >
-              <Item {...rest} title={title} ref={this.saveMenuItem} />
+              <Item
+                {...rest}
+                className={classNames(className, {
+                  [`${rootPrefixCls}-item-only-child`]: toArray(children).length === 1,
+                })}
+                title={title}
+                ref={this.saveMenuItem}
+              />
             </Tooltip>
           );
         }}