Merge branch 'next' into v5-site-upgrade

components/menu/demo/menu-v4.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+V4 样式的 Menu 组件。
+
+## en-US
+
+Menu with v4 style.

components/menu/demo/menu-v4.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import {
+  AppstoreOutlined,
+  CalendarOutlined,
+  LinkOutlined,
+  MailOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
+import { Menu, Switch, ConfigProvider } from 'antd';
+import type { MenuProps } from 'antd/es/menu';
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+function getItem(
+  label: React.ReactNode,
+  key?: React.Key | null,
+  icon?: React.ReactNode,
+  children?: MenuItem[],
+): MenuItem {
+  return {
+    key,
+    icon,
+    children,
+    label,
+  } as MenuItem;
+}
+
+const items: MenuItem[] = [
+  getItem('Navigation One', '1', <MailOutlined />),
+  getItem('Navigation Two', '2', <CalendarOutlined />),
+  getItem('Navigation Two', 'sub1', <AppstoreOutlined />, [
+    getItem('Option 3', '3'),
+    getItem('Option 4', '4'),
+    getItem('Submenu', 'sub1-2', null, [getItem('Option 5', '5'), getItem('Option 6', '6')]),
+  ]),
+  getItem('Navigation Three', 'sub2', <SettingOutlined />, [
+    getItem('Option 7', '7'),
+    getItem('Option 8', '8'),
+    getItem('Option 9', '9'),
+    getItem('Option 10', '10'),
+  ]),
+  getItem(
+    <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
+      Ant Design
+    </a>,
+    'link',
+    <LinkOutlined />,
+  ),
+];
+
+const App: React.FC = () => {
+  const [mode, setMode] = useState<'vertical' | 'inline'>('inline');
+
+  const changeMode = (value: boolean) => {
+    setMode(value ? 'vertical' : 'inline');
+  };
+
+  return (
+    <>
+      <Switch onChange={changeMode} /> Change Mode
+      <br />
+      <br />
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              radiusItem: 0,
+              radiusSubMenuItem: 0,
+              colorItemTextHover: '#1890ff',
+              colorItemTextSelected: '#1890ff',
+              colorItemBgSelected: '#e6f7ff',
+              colorActiveBarWidth: 3,
+              itemMarginInline: 0,
+              colorItemBgHover: 'transparent',
+            },
+          },
+        }}
+      >
+        <Menu
+          style={{ width: 256 }}
+          defaultSelectedKeys={['1']}
+          defaultOpenKeys={['sub1']}
+          mode={mode}
+          items={items}
+        />
+      </ConfigProvider>
+    </>
+  );
+};
+
+export default App;

components/menu/demo/submenu-theme.tsx

@@ -58,7 +58,7 @@ const App: React.FC = () => {
       <Menu
         onClick={onClick}
         style={{ width: 256 }}
-        defaultOpenKeys={['sub1']}
+        openKeys={['sub1']}
         selectedKeys={[current]}
         mode="vertical"
         theme="dark"

components/menu/index.en-US.md

@@ -62,6 +62,7 @@ The legacy demo code for version `<4.20.0` could be found at [https://github.com
 <code src="./demo/submenu-theme.tsx">Sub-menu theme</code>
 <code src="./demo/switch-mode.tsx">Switch the menu type</code>
 <code src="./demo/style-debug.tsx">Style debug</code>
+<code src="./demo/menu-v4.tsx">V4 Menu</code>
 
 ## API
 

components/menu/index.zh-CN.md

@@ -63,6 +63,7 @@ return <Menu items={items} />;
 <code src="./demo/submenu-theme.tsx">子菜单主题</code>
 <code src="./demo/switch-mode.tsx">切换菜单类型</code>
 <code src="./demo/style-debug.tsx">Style debug</code>
+<code src="./demo/menu-v4.tsx">V4 Menu</code>
 
 ## API
 

components/menu/style/index.tsx

@@ -18,12 +18,15 @@ export interface ComponentToken {
 
   // radius
   radiusItem: number;
+  radiusSubMenuItem: number;
 
   // Item Text
   // > Default
   colorItemText: string;
   colorItemTextHover: string;
+  colorItemTextHoverHorizontal: string;
   colorItemTextSelected: string;
+  colorItemTextSelectedHorizontal: string;
 
   // > Disabled
   colorItemTextDisabled: string;
@@ -37,6 +40,7 @@ export interface ComponentToken {
 
   // Item Bg
   colorItemBg: string;
+  colorItemBgHover: string;
   colorSubItemBg: string;
 
   // > Default
@@ -48,6 +52,8 @@ export interface ComponentToken {
   colorActiveBarWidth: number;
   colorActiveBarHeight: number;
   colorActiveBarBorderSize: number;
+
+  itemMarginInline: number;
 }
 
 export interface MenuToken extends FullToken<'Menu'> {
@@ -78,6 +84,8 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
     iconCls,
     zIndexPopup,
     radiusBase,
+    radiusLG,
+    radiusSubMenuItem,
     menuArrowSize,
     controlHeightSM,
     menuArrowOffset,
@@ -132,7 +140,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
             flex: 'none',
           },
         },
-        [`${componentCls}-item,${componentCls}-submenu,`]: {
+        [`${componentCls}-item, ${componentCls}-submenu`]: {
           borderRadius: token.radiusItem,
         },
 
@@ -279,7 +287,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
             position: 'absolute',
             zIndex: zIndexPopup,
             background: 'transparent',
-            borderRadius: radiusBase,
+            borderRadius: radiusLG,
             boxShadow: 'none',
             transformOrigin: '0 0',
 
@@ -302,7 +310,11 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
           },
 
           [`> ${componentCls}`]: {
-            borderRadius: radiusBase,
+            borderRadius: radiusLG,
+
+            [`> ${componentCls}-item`]: {
+              borderRadius: radiusSubMenuItem,
+            },
 
             [`${componentCls}-submenu-title::after`]: {
               transition: `transform ${motionDurationSlow} ${motionEaseInOut}`,
@@ -480,25 +492,31 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
         colorTextDescription,
         colorBgContainer,
         colorFillAlter,
-        controlItemBgActive,
+        colorFillContent,
         lineWidth,
         lineWidthBold,
+        controlItemBgActiveHover,
+        colorBgTextHover,
       } = token;
 
       return {
         dropdownWidth: 160,
         zIndexPopup: token.zIndexPopupBase + 50,
-        radiusItem: 0,
+        radiusItem: token.radiusLG,
+        radiusSubMenuItem: token.radiusSM,
         colorItemText: colorText,
-        colorItemTextHover: colorPrimary,
+        colorItemTextHover: colorText,
+        colorItemTextHoverHorizontal: colorPrimary,
         colorGroupTitle: colorTextDescription,
-        colorItemTextSelected: colorPrimary,
+        colorItemTextSelected: colorText,
+        colorItemTextSelectedHorizontal: colorPrimary,
         colorItemBg: colorBgContainer,
+        colorItemBgHover: colorBgTextHover,
+        colorItemBgActive: colorFillContent,
         colorSubItemBg: colorFillAlter,
-        colorItemBgActive: controlItemBgActive,
-        colorItemBgSelected: controlItemBgActive,
+        colorItemBgSelected: controlItemBgActiveHover,
         colorItemBgSelectedHorizontal: 'transparent',
-        colorActiveBarWidth: lineWidthBold + lineWidth,
+        colorActiveBarWidth: 0,
         colorActiveBarHeight: lineWidthBold,
         colorActiveBarBorderSize: lineWidth,
 
@@ -511,6 +529,8 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
         colorDangerItemTextSelected: colorError,
         colorDangerItemBgActive: colorErrorBg,
         colorDangerItemBgSelected: colorErrorBg,
+
+        itemMarginInline: token.marginXXS,
       };
     },
   );

components/menu/style/theme.tsx

@@ -11,10 +11,10 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
     componentCls,
     colorItemText,
     colorItemTextSelected,
+    colorItemTextSelectedHorizontal,
     colorGroupTitle,
     colorItemBg,
     colorSubItemBg,
-    colorItemBgActive,
     colorItemBgSelectedHorizontal,
     colorItemBgSelected,
     colorActiveBarHeight,
@@ -24,10 +24,12 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
     motionEaseInOut,
     motionEaseOut,
     menuItemPaddingInline,
+    itemMarginInline,
     motionDurationFast,
     colorItemTextHover,
     lineType,
     colorSplit,
+    colorItemBgActive,
 
     // Disabled
     colorItemTextDisabled,
@@ -38,6 +40,10 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
     colorDangerItemTextSelected,
     colorDangerItemBgActive,
     colorDangerItemBgSelected,
+
+    radiusItem,
+
+    colorItemBgHover,
   } = token;
 
   return {
@@ -72,9 +78,54 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
         },
       },
 
-      // Active
-      [`${componentCls}-item:active, ${componentCls}-submenu-title:active`]: {
-        background: colorItemBgActive,
+      [`&:not(${componentCls}-horizontal)`]: {
+        [`${componentCls}-item:not(${componentCls}-item-selected)`]: {
+          '&:hover': {
+            backgroundColor: colorItemBgHover,
+          },
+
+          '&:active::before': {
+            content: '""',
+            position: 'absolute',
+            insetInlineStart: 0,
+            top: 0,
+            width: `100%`,
+            height: '100%',
+            flex: 1,
+            borderRadius: radiusItem,
+            backgroundColor: colorItemBgActive,
+            transition: `background-color ${motionDurationFast}`,
+          },
+        },
+        [`${componentCls}-submenu-title`]: {
+          '&::before': {
+            content: '""',
+            position: 'absolute',
+            insetInlineStart: itemMarginInline,
+            top: 0,
+            width: `calc(100% - ${itemMarginInline * 2}px)`,
+            height: '100%',
+            borderRadius: radiusItem,
+            backgroundColor: 'transparent',
+            transition: `background-color ${motionDurationFast}`,
+          },
+
+          '&:hover::before': {
+            backgroundColor: colorItemBgHover,
+          },
+
+          '&:active::after': {
+            content: '""',
+            position: 'absolute',
+            insetInlineStart: itemMarginInline,
+            top: 0,
+            width: `calc(100% - ${itemMarginInline * 2}px)`,
+            height: '100%',
+            borderRadius: radiusItem,
+            backgroundColor: colorItemBgActive,
+            transition: `background-color ${motionDurationFast}`,
+          },
+        },
       },
 
       // Danger - only Item has
@@ -152,18 +203,18 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
           },
 
           [`&:hover, &-active, &-open`]: {
-            color: colorItemTextSelected,
+            color: colorItemTextSelectedHorizontal,
             '&::after': {
               borderWidth: `${colorActiveBarHeight}px`,
-              borderBottomColor: colorItemTextSelected,
+              borderBottomColor: colorItemTextSelectedHorizontal,
             },
           },
           [`&-selected`]: {
-            color: colorItemTextSelected,
+            color: colorItemTextSelectedHorizontal,
             backgroundColor: colorItemBgSelectedHorizontal,
             '&::after': {
               borderWidth: `${colorActiveBarHeight}px`,
-              borderBottomColor: colorItemTextSelected,
+              borderBottomColor: colorItemTextSelectedHorizontal,
             },
           },
         },
@@ -185,7 +236,8 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
         },
 
         // Item
-        [`${componentCls}-item, ${componentCls}-submenu-title`]: colorActiveBarBorderSize
+        [`${componentCls}-item, ${componentCls}-submenu-title`]:
+          colorActiveBarBorderSize && colorActiveBarWidth
             ? {
                 width: `calc(100% + ${colorActiveBarBorderSize}px)`,
               }

components/menu/style/vertical.tsx

@@ -3,8 +3,15 @@ import type { MenuToken } from '.';
 import type { GenerateStyle } from '../../theme';
 
 const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = token => {
-  const { componentCls, menuItemHeight, menuItemMarginInline, padding, menuArrowSize, fontSize } =
-    token;
+  const {
+    componentCls,
+    menuItemHeight,
+    menuItemMarginInline,
+    itemMarginInline,
+    padding,
+    menuArrowSize,
+    fontSize,
+  } = token;
 
   const paddingWithArrow = menuArrowSize + fontSize;
 
@@ -16,12 +23,21 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = token => {
     [`${componentCls}-item, ${componentCls}-submenu-title`]: {
       height: menuItemHeight,
       lineHeight: `${menuItemHeight}px`,
-      marginBlock: menuItemMarginInline,
       paddingInline: padding,
       overflow: 'hidden',
       textOverflow: 'ellipsis',
     },
 
+    [`${componentCls}-item`]: {
+      marginInline: itemMarginInline,
+      marginBlock: menuItemMarginInline,
+      width: `calc(100% - ${itemMarginInline * 2}px)`,
+    },
+
+    [`${componentCls}-submenu-title`]: {
+      marginBlock: menuItemMarginInline,
+    },
+
     // disable margin collapsed
     [`${componentCls}-submenu`]: {
       paddingBottom: 0.02,

scripts/tmp-mv-dumi-site.js

@@ -9,8 +9,7 @@ const path = require('path');
 
 const tmpFolder = `~demo`;
 
-glob('components/*/demo/*', (er, files) => {
-  // console.log(files);
+glob('components/**/*.md', (er, files) => {
   fs.ensureDirSync(tmpFolder);
   fs.emptyDirSync(tmpFolder);