fix: menu icon

Author: tangjinzhou

components/menu/src/MenuItem.tsx

@@ -33,7 +33,7 @@ export default defineComponent({
   inheritAttrs: false,
   props: menuItemProps,
   emits: ['mouseenter', 'mouseleave', 'click', 'keydown', 'focus'],
-  slots: ['icon'],
+  slots: ['icon', 'title'],
   setup(props, { slots, emit, attrs }) {
     const instance = getCurrentInstance();
     const key = instance.vnode.key;
@@ -149,6 +149,7 @@ export default defineComponent({
     };
 
     const renderItemChildren = (icon: any, children: any) => {
+      const wrapNode = <span class={`${prefixCls.value}-title-content`}>{children}</span>;
       // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
       // ref: https://github.com/ant-design/ant-design/pull/23456
       if (!icon || (isValidElement(children) && children.type === 'span')) {
@@ -157,16 +158,15 @@ export default defineComponent({
             <div class={`${prefixCls.value}-inline-collapsed-noicon`}>{children.charAt(0)}</div>
           );
         }
-        return children;
       }
-      return <span class={`${prefixCls.value}-title-content`}>{children}</span>;
+      return wrapNode;
     };
 
     // ========================== DirectionStyle ==========================
     const directionStyle = useDirectionStyle(computed(() => keysPath.value.length));
 
     return () => {
-      const { title } = props;
+      const title = props.title ?? slots.title?.();
       const children = flattenChildren(slots.default?.());
       const childrenLength = children.length;
       let tooltipTitle: any = title;

components/menu/src/SubMenu.tsx

@@ -188,7 +188,7 @@ export default defineComponent({
           typeof title === 'string' ? (
           <div class={`${prefixCls.value}-inline-collapsed-noicon`}>{title.charAt(0)}</div>
         ) : (
-          title
+          <span class={`${prefixCls.value}-title-content`}>{title}</span>
         );
       }
       // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
@@ -223,6 +223,10 @@ export default defineComponent({
       return res ? getTransitionProps(res.name) : undefined;
     });
 
+    const subMenuTriggerModeRef = computed(() =>
+      triggerModeRef.value === 'horizontal' ? 'vertical' : triggerModeRef.value,
+    );
+
     return () => {
       const icon = getPropsSlot(slots, props, 'icon');
       const title = renderTitle(getPropsSlot(slots, props, 'title'), icon);
@@ -268,7 +272,7 @@ export default defineComponent({
               popup: ({ visible }) => (
                 <MenuContextProvider
                   props={{
-                    mode: computed(() => (triggerMode === 'horizontal' ? 'vertical' : triggerMode)),
+                    mode: subMenuTriggerModeRef,
                     isRootMenu: false,
                   }}
                 >

components/menu/style/dark.less

@@ -87,8 +87,7 @@
     > span > a {
       color: @menu-dark-highlight-color;
     }
-    > .@{menu-prefix-cls}-submenu-title,
-    > .@{menu-prefix-cls}-submenu-title:hover {
+    > .@{menu-prefix-cls}-submenu-title {
       > .@{menu-prefix-cls}-submenu-arrow {
         opacity: 1;
         &::after,

components/menu/style/index.less

@@ -211,8 +211,6 @@
       + span {
         margin-left: @menu-icon-margin-right;
         opacity: 1;
-        // transition: opacity @animation-duration-slow @ease-in-out,
-        //   width @animation-duration-slow @ease-in-out, color @animation-duration-slow;
         transition: opacity @animation-duration-slow @ease-in-out, margin @animation-duration-slow,
           color @animation-duration-slow;
       }
@@ -365,19 +363,19 @@
     &:not(.@{menu-prefix-cls}-dark) {
       > .@{menu-prefix-cls}-item,
       > .@{menu-prefix-cls}-submenu {
-        margin: @menu-item-padding;
         margin-top: -1px;
         margin-bottom: 0;
         padding: @menu-item-padding;
-        padding-right: 0;
-        padding-left: 0;
 
         &:hover,
         &-active,
         &-open,
         &-selected {
           color: @menu-highlight-color;
-          border-bottom: 2px solid @menu-highlight-color;
+
+          &::after {
+            border-bottom: 2px solid @menu-highlight-color;
+          }
         }
       }
     }
@@ -388,7 +386,16 @@
       top: 1px;
       display: inline-block;
       vertical-align: bottom;
-      border-bottom: 2px solid transparent;
+
+      &::after {
+        position: absolute;
+        right: @menu-item-padding-horizontal;
+        bottom: 0;
+        left: @menu-item-padding-horizontal;
+        border-bottom: 2px solid transparent;
+        transition: border-color @animation-duration-slow @ease-in-out;
+        content: '';
+      }
     }
 
     > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
@@ -535,7 +542,6 @@
 
       .@{menu-prefix-cls}-submenu-arrow {
         opacity: 0;
-        display: none;
       }
 
       .@{menu-prefix-cls}-item-icon,
@@ -626,8 +632,12 @@
   &-submenu-disabled {
     color: @disabled-color !important;
     background: none;
-    border-color: transparent !important;
     cursor: not-allowed;
+
+    &::after {
+      border-color: transparent !important;
+    }
+
     a {
       color: @disabled-color !important;
       pointer-events: none;

components/style/themes/default.less

@@ -512,7 +512,8 @@
 @menu-item-vertical-margin: 4px;
 @menu-item-font-size: @font-size-base;
 @menu-item-boundary-margin: 8px;
-@menu-item-padding: 0 20px;
+@menu-item-padding-horizontal: 20px;
+@menu-item-padding: 0 @menu-item-padding-horizontal;
 @menu-horizontal-line-height: 46px;
 @menu-icon-margin-right: 10px;
 @menu-icon-size: @menu-item-font-size;