Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: v5 menu style #38009

Merged
merged 7 commits into from
Oct 18, 2022
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: more component token
MadCcc committed Oct 18, 2022
commit 30c1747cda7ba65b3947a872c4507809421517f7
120 changes: 120 additions & 0 deletions components/menu/demo/menu-v4.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
---
order: 999
title:
zh-CN: v4 版本 Menu
en-US: Menu v4
debug: true
---

## zh-CN

V4 样式的 Menu。

## en-US

Menu with v4 style.

```tsx
import {
AppstoreOutlined,
CalendarOutlined,
LinkOutlined,
MailOutlined,
SettingOutlined,
} from '@ant-design/icons';
import { Divider, Menu, Switch, theme, ConfigProvider } from 'antd';
import type { MenuProps, MenuTheme } from 'antd/es/menu';
import React, { useState } from 'react';

const { useToken } = theme;

console.log('version', version);

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 {
token: { colorPrimary, controlItemBgActive },
} = useToken();

const changeMode = (value: boolean) => {
setMode(value ? 'vertical' : 'inline');
};

const changeTheme = (value: boolean) => {
setTheme(value ? 'dark' : 'light');
};

return (
<>
<Switch onChange={changeMode} /> Change Mode
<br />
<br />
<ConfigProvider
theme={{
components: {
Menu: {
radiusItem: 0,
radiusSubMenuItem: 0,
colorItemTextHover: colorPrimary,
colorItemTextSelected: colorPrimary,
colorItemBgSelected: controlItemBgActive,
colorActiveBarWidth: 3,
itemMarginInline: 0,
colorItemBgHover: 'transparent',
},
},
}}
>
<Menu
style={{ width: 256 }}
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode={mode}
items={items}
/>
</ConfigProvider>
</>
);
};

export default App;
```
17 changes: 13 additions & 4 deletions components/menu/style/index.tsx
Original file line number Diff line number Diff line change
@@ -18,6 +18,7 @@ export interface ComponentToken {

// radius
radiusItem: number;
radiusSubMenuItem: number;

// Item Text
// > Default
@@ -39,6 +40,7 @@ export interface ComponentToken {

// Item Bg
colorItemBg: string;
colorItemBgHover: string;
colorSubItemBg: string;

// > Default
@@ -50,6 +52,8 @@ export interface ComponentToken {
colorActiveBarWidth: number;
colorActiveBarHeight: number;
colorActiveBarBorderSize: number;

itemMarginInline: number;
}

export interface MenuToken extends FullToken<'Menu'> {
@@ -81,7 +85,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
zIndexPopup,
radiusBase,
radiusLG,
radiusSM,
radiusSubMenuItem,
menuArrowSize,
controlHeightSM,
menuArrowOffset,
@@ -309,7 +313,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
borderRadius: radiusLG,

[`> ${componentCls}-item`]: {
borderRadius: radiusSM,
borderRadius: radiusSubMenuItem,
},

[`${componentCls}-submenu-title::after`]: {
@@ -488,25 +492,28 @@ 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: token.radiusLG,
radiusSubMenuItem: token.radiusSM,
colorItemText: colorText,
colorItemTextHover: colorText,
colorItemTextHoverHorizontal: colorPrimary,
colorGroupTitle: colorTextDescription,
colorItemTextSelected: colorText,
colorItemTextSelectedHorizontal: colorPrimary,
colorItemBg: colorBgContainer,
colorItemBgHover: colorBgTextHover,
colorItemBgActive: colorFillContent,
colorSubItemBg: colorFillAlter,
colorItemBgActive: controlItemBgActive,
colorItemBgSelected: controlItemBgActiveHover,
colorItemBgSelectedHorizontal: 'transparent',
colorActiveBarWidth: 0,
@@ -522,6 +529,8 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
colorDangerItemTextSelected: colorError,
colorDangerItemBgActive: colorErrorBg,
colorDangerItemBgSelected: colorErrorBg,

itemMarginInline: token.marginXXS,
};
},
);
22 changes: 11 additions & 11 deletions components/menu/style/theme.tsx
Original file line number Diff line number Diff line change
@@ -24,12 +24,12 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
motionEaseInOut,
motionEaseOut,
menuItemPaddingInline,
menuItemMarginInline,
itemMarginInline,
motionDurationFast,
colorItemTextHover,
lineType,
colorSplit,
colorFillContent,
colorItemBgActive,

// Disabled
colorItemTextDisabled,
@@ -43,7 +43,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation

radiusItem,

colorBgTextHover,
colorItemBgHover,
} = token;

return {
@@ -81,7 +81,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
[`&:not(${componentCls}-horizontal)`]: {
[`${componentCls}-item:not(${componentCls}-item-selected)`]: {
'&:hover': {
backgroundColor: colorBgTextHover,
backgroundColor: colorItemBgHover,
},

'&:active::before': {
@@ -93,36 +93,36 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
height: '100%',
flex: 1,
borderRadius: radiusItem,
backgroundColor: colorFillContent,
backgroundColor: colorItemBgActive,
transition: `background-color ${motionDurationFast}`,
},
},
[`${componentCls}-submenu-title`]: {
'&::before': {
content: '""',
position: 'absolute',
insetInlineStart: menuItemMarginInline,
insetInlineStart: itemMarginInline,
top: 0,
width: `calc(100% - ${menuItemMarginInline * 2}px)`,
width: `calc(100% - ${itemMarginInline * 2}px)`,
height: '100%',
borderRadius: radiusItem,
backgroundColor: 'transparent',
transition: `background-color ${motionDurationFast}`,
},

'&:hover::before': {
backgroundColor: colorBgTextHover,
backgroundColor: colorItemBgHover,
},

'&:active::after': {
content: '""',
position: 'absolute',
insetInlineStart: menuItemMarginInline,
insetInlineStart: itemMarginInline,
top: 0,
width: `calc(100% - ${menuItemMarginInline * 2}px)`,
width: `calc(100% - ${itemMarginInline * 2}px)`,
height: '100%',
borderRadius: radiusItem,
backgroundColor: colorFillContent,
backgroundColor: colorItemBgActive,
transition: `background-color ${motionDurationFast}`,
},
},
16 changes: 12 additions & 4 deletions components/menu/style/vertical.tsx
Original file line number Diff line number Diff line change
@@ -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;

@@ -22,8 +29,9 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = token => {
},

[`${componentCls}-item`]: {
margin: menuItemMarginInline,
width: `calc(100% - ${menuItemMarginInline * 2}px)`,
marginInline: itemMarginInline,
marginBlock: menuItemMarginInline,
width: `calc(100% - ${itemMarginInline * 2}px)`,
},

[`${componentCls}-submenu-title`]: {