fix: menu inline collapsed show without icon (#24330)

close #24311

components/menu/MenuItem.tsx

@@ -39,11 +39,16 @@ export default class MenuItem extends React.Component<MenuItemProps> {
     this.menuItem = menuItem;
   };
 
-  renderItemChildren() {
-    const { icon, children } = this.props;
+  renderItemChildren(inlineCollapsed: boolean) {
+    const { icon, children, level, rootPrefixCls } = this.props;
     // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
     // ref: https://github.com/ant-design/ant-design/pull/23456
     if (!icon || (isValidElement(children) && children.type === 'span')) {
+      if (children && inlineCollapsed && level === 1 && typeof children === 'string') {
+        return (
+          <div className={`${rootPrefixCls}-inline-collapsed-noicon`}>{children.charAt(0)}</div>
+        );
+      }
       return children;
     }
     return <span>{children}</span>;
@@ -89,7 +94,7 @@ export default class MenuItem extends React.Component<MenuItemProps> {
                 ref={this.saveMenuItem}
               >
                 {icon}
-                {this.renderItemChildren()}
+                {this.renderItemChildren(inlineCollapsed)}
               </Item>
             </Tooltip>
           );

components/menu/SubMenu.tsx

@@ -15,6 +15,7 @@ export interface SubMenuProps {
   rootPrefixCls?: string;
   className?: string;
   disabled?: boolean;
+  level?: number;
   title?: React.ReactNode;
   icon?: React.ReactNode;
   style?: React.CSSProperties;
@@ -43,10 +44,14 @@ class SubMenu extends React.Component<SubMenuProps, any> {
     this.subMenu = subMenu;
   };
 
-  renderTitle() {
-    const { icon, title } = this.props;
+  renderTitle(inlineCollapsed: boolean) {
+    const { icon, title, level, rootPrefixCls } = this.props;
     if (!icon) {
-      return title;
+      return inlineCollapsed && level === 1 && title && typeof title === 'string' ? (
+        <div className={`${rootPrefixCls}-inline-collapsed-noicon`}>{title.charAt(0)}</div>
+      ) : (
+        title
+      );
     }
     // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
     // ref: https://github.com/ant-design/ant-design/pull/23456
@@ -63,10 +68,10 @@ class SubMenu extends React.Component<SubMenuProps, any> {
     const { rootPrefixCls, popupClassName } = this.props;
     return (
       <MenuContext.Consumer>
-        {({ antdMenuTheme }: MenuContextProps) => (
+        {({ inlineCollapsed, antdMenuTheme }: MenuContextProps) => (
           <RcSubMenu
             {...omit(this.props, ['icon'])}
-            title={this.renderTitle()}
+            title={this.renderTitle(inlineCollapsed)}
             ref={this.saveSubMenu}
             popupClassName={classNames(
               rootPrefixCls,

components/menu/style/index.less

@@ -515,6 +515,16 @@
     box-shadow: none;
   }
 
+  &-root&-inline-collapsed {
+    .@{menu-prefix-cls}-item,
+    .@{menu-prefix-cls}-submenu .@{menu-prefix-cls}-submenu-title {
+      > .@{menu-prefix-cls}-inline-collapsed-noicon {
+        font-size: @menu-icon-size-lg;
+        text-align: center;
+      }
+    }
+  }
+
   &-sub&-inline {
     padding: 0;
     border: 0;