From c35e0982cbe0c92ea292e2a7dda74507a2aa34b1 Mon Sep 17 00:00:00 2001 From: MadCcc Date: Thu, 11 Jan 2024 11:18:21 +0800 Subject: [PATCH] fix: Button padding token should follow contentFontSize (#46901) --- .../__snapshots__/demo-extend.test.ts.snap | 68 -------------- .../__tests__/__snapshots__/demo.test.ts.snap | 66 -------------- .../button/__tests__/demo-extend.test.ts | 4 +- components/button/__tests__/demo.test.ts | 4 +- components/button/demo/component-token.tsx | 10 ++ components/button/style/index.ts | 91 +++++++++---------- components/input-number/style/index.ts | 1 - components/menu/style/index.ts | 1 - .../theme/util/genComponentStyleHook.tsx | 22 ++--- 9 files changed, 71 insertions(+), 196 deletions(-) diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap index b42a3b9f01..0c49239da2 100644 --- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -312,74 +312,6 @@ exports[`renders components/button/demo/chinese-chars-loading.tsx extend context exports[`renders components/button/demo/chinese-chars-loading.tsx extend context correctly 2`] = `[]`; -exports[`renders components/button/demo/component-token.tsx extend context correctly 1`] = ` -
-
- - - -
-
- - - -
-
-`; - -exports[`renders components/button/demo/component-token.tsx extend context correctly 2`] = `[]`; - exports[`renders components/button/demo/danger.tsx extend context correctly 1`] = `
`; -exports[`renders components/button/demo/component-token.tsx correctly 1`] = ` -
-
- - - -
-
- - - -
-
-`; - exports[`renders components/button/demo/danger.tsx correctly 1`] = `
( borderRadius: 4, colorTextDisabled: 'rgba(0, 0, 0, 0.26)', colorBgContainerDisabled: 'rgba(0, 0, 0, 0.12)', + contentFontSizeSM: 12, }, }, }} @@ -37,6 +38,15 @@ const App: React.FC = () => ( + + + + + ); diff --git a/components/button/style/index.ts b/components/button/style/index.ts index add8cfacc7..71282a4e63 100644 --- a/components/button/style/index.ts +++ b/components/button/style/index.ts @@ -658,52 +658,37 @@ export const prepareToken: (token: Parameters>[0]) => Butto return buttonToken; }; -export const prepareComponentToken: GetDefaultToken<'Button'> = (token) => { - const contentFontSize = token.fontSize; - const contentFontSizeSM = token.fontSize; - const contentFontSizeLG = token.fontSizeLG; - - return { - fontWeight: 400, - defaultShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`, - primaryShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`, - dangerShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`, - primaryColor: token.colorTextLightSolid, - dangerColor: token.colorTextLightSolid, - borderColorDisabled: token.colorBorder, - defaultGhostColor: token.colorBgContainer, - ghostBg: 'transparent', - defaultGhostBorderColor: token.colorBgContainer, - paddingInline: token.paddingContentHorizontal - token.lineWidth, - paddingInlineLG: token.paddingContentHorizontal - token.lineWidth, - paddingInlineSM: 8 - token.lineWidth, - paddingBlock: Math.max( - (token.controlHeight - contentFontSize * token.lineHeight) / 2 - token.lineWidth, - 0, - ), - paddingBlockSM: Math.max( - (token.controlHeightSM - contentFontSizeSM * token.lineHeight) / 2 - token.lineWidth, - 0, - ), - paddingBlockLG: Math.max( - (token.controlHeightLG - contentFontSizeLG * token.lineHeight) / 2 - token.lineWidth, - 0, - ), - onlyIconSize: token.fontSizeLG, - onlyIconSizeSM: token.fontSizeLG - 2, - onlyIconSizeLG: token.fontSizeLG + 2, - groupBorderColor: token.colorPrimaryHover, - linkHoverBg: 'transparent', - textHoverBg: token.colorBgTextHover, - defaultColor: token.colorText, - defaultBg: token.colorBgContainer, - defaultBorderColor: token.colorBorder, - defaultBorderColorDisabled: token.colorBorder, - contentFontSize, - contentFontSizeSM, - contentFontSizeLG, - }; -}; +export const prepareComponentToken: GetDefaultToken<'Button'> = (token) => ({ + fontWeight: 400, + defaultShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`, + primaryShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`, + dangerShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`, + primaryColor: token.colorTextLightSolid, + dangerColor: token.colorTextLightSolid, + borderColorDisabled: token.colorBorder, + defaultGhostColor: token.colorBgContainer, + ghostBg: 'transparent', + defaultGhostBorderColor: token.colorBgContainer, + paddingInline: token.paddingContentHorizontal - token.lineWidth, + paddingInlineLG: token.paddingContentHorizontal - token.lineWidth, + paddingInlineSM: 8 - token.lineWidth, + paddingBlock: 0, + paddingBlockSM: 0, + paddingBlockLG: 0, + onlyIconSize: token.fontSizeLG, + onlyIconSizeSM: token.fontSizeLG - 2, + onlyIconSizeLG: token.fontSizeLG + 2, + groupBorderColor: token.colorPrimaryHover, + linkHoverBg: 'transparent', + textHoverBg: token.colorBgTextHover, + defaultColor: token.colorText, + defaultBg: token.colorBgContainer, + defaultBorderColor: token.colorBorder, + defaultBorderColorDisabled: token.colorBorder, + contentFontSize: token.fontSize, + contentFontSizeSM: token.fontSize, + contentFontSizeLG: token.fontSizeLG, +}); export default genStyleHooks( 'Button', @@ -734,5 +719,19 @@ export default genStyleHooks( unitless: { fontWeight: true, }, + format: (token) => ({ + paddingBlock: Math.max( + (token.controlHeight - token.contentFontSize * token.lineHeight) / 2 - token.lineWidth, + 0, + ), + paddingBlockSM: Math.max( + (token.controlHeightSM - token.contentFontSizeSM * token.lineHeight) / 2 - token.lineWidth, + 0, + ), + paddingBlockLG: Math.max( + (token.controlHeightLG - token.contentFontSizeLG * token.lineHeight) / 2 - token.lineWidth, + 0, + ), + }), }, ); diff --git a/components/input-number/style/index.ts b/components/input-number/style/index.ts index 9b180ea3db..90db58e8ad 100644 --- a/components/input-number/style/index.ts +++ b/components/input-number/style/index.ts @@ -492,7 +492,6 @@ export const prepareComponentToken: GetDefaultToken<'InputNumber'> = (token) => }); export const formatComponentToken: FormatComponentToken<'InputNumber'> = (token) => ({ - ...token, handleOpacity: token.handleVisible === true ? 1 : 0, }); diff --git a/components/menu/style/index.ts b/components/menu/style/index.ts index ba6adf31d5..bd55f736b1 100644 --- a/components/menu/style/index.ts +++ b/components/menu/style/index.ts @@ -931,7 +931,6 @@ export const prepareComponentToken: GetDefaultToken<'Menu'> = (token) => { }; export const formatComponentToken: FormatComponentToken<'Menu'> = (token) => ({ - ...token, itemWidth: token.activeBarWidth ? `calc(100% + ${token.activeBarBorderWidth}px)` : `calc(100% - ${token.itemMarginInline * 2}px)`, diff --git a/components/theme/util/genComponentStyleHook.tsx b/components/theme/util/genComponentStyleHook.tsx index 2aaa8192e9..a18e87060b 100644 --- a/components/theme/util/genComponentStyleHook.tsx +++ b/components/theme/util/genComponentStyleHook.tsx @@ -8,6 +8,7 @@ import { warning } from 'rc-util'; import { ConfigContext } from '../../config-provider/context'; import { genCommonStyle, genLinkStyle } from '../../style'; import type { + AliasToken, ComponentTokenMap, GlobalToken, OverrideToken, @@ -64,11 +65,11 @@ export type GenStyleFn = ( export type GetDefaultToken = | null | OverrideTokenWithoutDerivative[C] - | ((token: GlobalToken) => OverrideTokenWithoutDerivative[C]); + | ((token: AliasToken) => OverrideTokenWithoutDerivative[C]); export type FormatComponentToken = ( - token: NonNullable, -) => NonNullable; + token: NonNullable & AliasToken, +) => Partial; const getDefaultComponentToken = ( component: C, @@ -76,7 +77,7 @@ const getDefaultComponentToken = ( getDefaultToken: GetDefaultToken, ) => { if (typeof getDefaultToken === 'function') { - return getDefaultToken(mergeToken(token, token[component] ?? {})); + return getDefaultToken(mergeToken(token, token[component] ?? {})); } return getDefaultToken ?? {}; }; @@ -97,9 +98,9 @@ const getComponentToken = ( if (process.env.NODE_ENV !== 'production') { warning( !customToken?.[oldTokenKey], - `The token '${String(oldTokenKey)}' of ${component} had deprecated, use '${String( - newTokenKey, - )}' instead.`, + `Component Token \`${String( + oldTokenKey, + )}\` of ${component} is deprecated. Please use \`${String(newTokenKey)}\` instead.`, ); } @@ -111,7 +112,7 @@ const getComponentToken = ( } let mergedToken: any = { ...defaultToken, ...customToken }; if (options?.format) { - mergedToken = options.format(mergedToken); + mergedToken = { ...mergedToken, ...options.format(mergeToken(token, mergedToken)) }; } // Remove same value as global token to minimize size @@ -135,10 +136,7 @@ const getCompVarPrefix = (component: string, prefix?: string) => export default function genComponentStyleHook( componentName: C | [C, string], styleFn: GenStyleFn, - getDefaultToken?: - | null - | OverrideTokenWithoutDerivative[C] - | ((token: GlobalToken) => OverrideTokenWithoutDerivative[C]), + getDefaultToken?: GetDefaultToken, options: { resetStyle?: boolean; // Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]]