mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-07-31 12:18:42 +08:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

fix: token calc of padding input (#52865)

Browse Source
This commit is contained in:
二货爱吃白萝卜 2025-02-18 16:26:53 +08:00 committed by GitHub
parent 0e8ed2cb66
commit a8f116f8b4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/input/demo/component-token.tsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { ConfigProvider, Input } from 'antd';
const App: React.FC = () => (
@ -12,6 +13,9 @@ const App: React.FC = () => (
>
<Input placeholder="Basic usage" />
</ConfigProvider>
<ConfigProvider theme={{ components: { Input: { inputFontSize: 10 } } }}>
<Input placeholder="With prefix" prefix={<UserOutlined />} />
</ConfigProvider>
</>
);

23
components/input/style/token.ts
View File

@ -103,7 +103,9 @@ export function initInputToken(token: AliasToken): SharedInputToken {
});
}
export const initComponentToken = (token: AliasToken): SharedComponentToken => {
export const initComponentToken = (
token: AliasToken & Partial<SharedComponentToken>,
): SharedComponentToken => {
const {
controlHeight,
fontSize,
@ -124,19 +126,26 @@ export const initComponentToken = (token: AliasToken): SharedComponentToken => {
colorErrorOutline,
colorWarningOutline,
colorBgContainer,
inputFontSize,
inputFontSizeLG,
inputFontSizeSM,
} = token;
const mergedFontSize = inputFontSize || fontSize;
const mergedFontSizeSM = inputFontSizeSM || mergedFontSize;
const mergedFontSizeLG = inputFontSizeLG || fontSizeLG;
return {
paddingBlock: Math.max(
Math.round(((controlHeight - fontSize * lineHeight) / 2) * 10) / 10 - lineWidth,
Math.round(((controlHeight - mergedFontSize * lineHeight) / 2) * 10) / 10 - lineWidth,
0,
),
paddingBlockSM: Math.max(
Math.round(((controlHeightSM - fontSize * lineHeight) / 2) * 10) / 10 - lineWidth,
Math.round(((controlHeightSM - mergedFontSizeSM * lineHeight) / 2) * 10) / 10 - lineWidth,
0,
),
paddingBlockLG:
Math.ceil(((controlHeightLG - fontSizeLG * lineHeightLG) / 2) * 10) / 10 - lineWidth,
Math.ceil(((controlHeightLG - mergedFontSizeLG * lineHeightLG) / 2) * 10) / 10 - lineWidth,
paddingInline: paddingSM - lineWidth,
paddingInlineSM: controlPaddingHorizontalSM - lineWidth,
paddingInlineLG: controlPaddingHorizontal - lineWidth,
@ -148,8 +157,8 @@ export const initComponentToken = (token: AliasToken): SharedComponentToken => {
warningActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorWarningOutline}`,
hoverBg: colorBgContainer,
activeBg: colorBgContainer,
inputFontSize: fontSize,
inputFontSizeLG: fontSizeLG,
inputFontSizeSM: fontSize,
inputFontSize: mergedFontSize,
inputFontSizeLG: mergedFontSizeLG,
inputFontSizeSM: mergedFontSizeSM,
};
};