feat: add menu token and adjust style (#36777)

* fix: menu add margin token

* Update components/menu/style/index.tsx

Co-authored-by: MadCcc <1075746765@qq.com>

* fix ci

Co-authored-by: MadCcc <1075746765@qq.com>
This commit is contained in:
陈帅 2022-08-01 11:19:32 +08:00 committed by GitHub
parent 92fbfd1b93
commit dcca3d25f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 7 deletions

View File

@ -10,6 +10,7 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = token => {
lineWidth,
lineType,
menuItemPaddingInline,
menuItemMarginInline,
} = token;
return {
@ -32,6 +33,7 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = token => {
display: 'inline-block',
verticalAlign: 'bottom',
paddingInline: menuItemPaddingInline,
marginInline: menuItemMarginInline,
},
[`> ${componentCls}-item:hover,

View File

@ -55,6 +55,7 @@ export interface MenuToken extends FullToken<'Menu'> {
menuItemHeight: number;
menuHorizontalHeight: number;
menuItemPaddingInline: number;
menuItemMarginInline: number;
menuArrowSize: number;
menuArrowOffset: string;
menuPanelMaskInset: number;
@ -404,7 +405,8 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
// Menu Token
const menuToken = mergeToken<MenuToken>(token, {
menuItemHeight: controlHeightLG,
menuItemPaddingInline: controlHeightLG / 2,
menuItemPaddingInline: token.margin,
menuItemMarginInline: token.marginXXS,
menuArrowSize,
menuHorizontalHeight: controlHeightLG * 1.15,
menuArrowOffset: `${menuArrowSize * 0.25}px`,

View File

@ -3,7 +3,7 @@ import type { MenuToken } from '.';
import type { GenerateStyle } from '../../theme';
const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = token => {
const { componentCls, menuItemHeight, marginXS, padding, marginXXS, menuArrowSize, fontSize } =
const { componentCls, menuItemHeight, menuItemMarginInline, padding, menuArrowSize, fontSize } =
token;
const paddingWithArrow = menuArrowSize + fontSize;
@ -16,7 +16,7 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = token => {
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
height: menuItemHeight,
lineHeight: `${menuItemHeight}px`,
marginBlock: marginXXS,
marginBlock: menuItemMarginInline,
paddingInline: padding,
overflow: 'hidden',
textOverflow: 'ellipsis',
@ -27,10 +27,6 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = token => {
paddingBottom: 0.02,
},
[`${componentCls}-item:not(:last-child)`]: {
marginBottom: marginXS,
},
[`> ${componentCls}-item,
> ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
height: menuItemHeight,