mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

fix: Button padding token should follow contentFontSize (#46901)

Browse Source
This commit is contained in:
MadCcc 2024-01-11 11:18:21 +08:00 committed by GitHub
parent 1139316ae2
commit c35e0982cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 71 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -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`] = `
<div
class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-text"
type="button"
>
<span>
TEXT
</span>
</button>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
CONTAINED
</span>
</button>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
OUTLINED
</span>
</button>
</div>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-text"
disabled=""
type="button"
>
<span>
TEXT
</span>
</button>
<button
class="ant-btn ant-btn-primary"
disabled=""
type="button"
>
<span>
CONTAINED
</span>
</button>
<button
class="ant-btn ant-btn-default"
disabled=""
type="button"
>
<span>
OUTLINED
</span>
</button>
</div>
</div>
`;
exports[`renders components/button/demo/component-token.tsx extend context correctly 2`] = `[]`;
exports[`renders components/button/demo/danger.tsx extend context correctly 1`] = `
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"

66
components/button/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -301,72 +301,6 @@ exports[`renders components/button/demo/chinese-chars-loading.tsx correctly 1`]
</div>
`;
exports[`renders components/button/demo/component-token.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-text"
type="button"
>
<span>
TEXT
</span>
</button>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
CONTAINED
</span>
</button>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
OUTLINED
</span>
</button>
</div>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-text"
disabled=""
type="button"
>
<span>
TEXT
</span>
</button>
<button
class="ant-btn ant-btn-primary"
disabled=""
type="button"
>
<span>
CONTAINED
</span>
</button>
<button
class="ant-btn ant-btn-default"
disabled=""
type="button"
>
<span>
OUTLINED
</span>
</button>
</div>
</div>
`;
exports[`renders components/button/demo/danger.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"

4
components/button/__tests__/demo-extend.test.ts
View File

@ -1,3 +1,5 @@
import { extendTest } from '../../../tests/shared/demoTest';
extendTest('button');
extendTest('button', {
skip: ['component-token.tsx'],
});

4
components/button/__tests__/demo.test.ts
View File

@ -1,3 +1,5 @@
import demoTest from '../../../tests/shared/demoTest';
demoTest('button');
demoTest('button', {
skip: ['component-token.tsx'],
});

10
components/button/demo/component-token.tsx
View File

@ -18,6 +18,7 @@ const App: React.FC = () => (
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 = () => (
</Button>
<Button disabled>OUTLINED</Button>
</Flex>
<Flex wrap="wrap" gap="small">
<Button type="text" size="small">
TEXT
</Button>
<Button type="primary" size="small">
CONTAINED
</Button>
<Button size="small">OUTLINED</Button>
</Flex>
</Flex>
</ConfigProvider>
);

91
components/button/style/index.ts
View File

@ -658,52 +658,37 @@ export const prepareToken: (token: Parameters<GenStyleFn<'Button'>>[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,
),
}),
},
);

1
components/input-number/style/index.ts
View File

@ -492,7 +492,6 @@ export const prepareComponentToken: GetDefaultToken<'InputNumber'> = (token) =>
});
export const formatComponentToken: FormatComponentToken<'InputNumber'> = (token) => ({
...token,
handleOpacity: token.handleVisible === true ? 1 : 0,
});

1
components/menu/style/index.ts
View File

@ -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)`,

22
components/theme/util/genComponentStyleHook.tsx
View File

@ -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<C extends OverrideComponent> = (
export type GetDefaultToken<C extends OverrideComponent> =
| null
| OverrideTokenWithoutDerivative[C]
| ((token: GlobalToken) => OverrideTokenWithoutDerivative[C]);
| ((token: AliasToken) => OverrideTokenWithoutDerivative[C]);
export type FormatComponentToken<C extends OverrideComponent> = (
token: NonNullable<OverrideTokenWithoutDerivative[C]>,
) => NonNullable<OverrideTokenWithoutDerivative[C]>;
token: NonNullable<OverrideTokenWithoutDerivative[C]> & AliasToken,
) => Partial<OverrideTokenWithoutDerivative[C]>;
const getDefaultComponentToken = <C extends OverrideComponent>(
component: C,
@ -76,7 +77,7 @@ const getDefaultComponentToken = <C extends OverrideComponent>(
getDefaultToken: GetDefaultToken<C>,
) => {
if (typeof getDefaultToken === 'function') {
return getDefaultToken(mergeToken<GlobalToken>(token, token[component] ?? {}));
return getDefaultToken(mergeToken<any>(token, token[component] ?? {}));
}
return getDefaultToken ?? {};
};
@ -97,9 +98,9 @@ const getComponentToken = <C extends OverrideComponent>(
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 = <C extends OverrideComponent>(
}
let mergedToken: any = { ...defaultToken, ...customToken };
if (options?.format) {
mergedToken = options.format(mergedToken);
mergedToken = { ...mergedToken, ...options.format(mergeToken<any>(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<C extends OverrideComponent>(
componentName: C | [C, string],
styleFn: GenStyleFn<C>,
getDefaultToken?:
| null
| OverrideTokenWithoutDerivative[C]
| ((token: GlobalToken) => OverrideTokenWithoutDerivative[C]),
getDefaultToken?: GetDefaultToken<C>,
options: {
resetStyle?: boolean;
// Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]]