mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-01 21:37:06 +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 React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { ConfigProvider, Input } from 'antd'; import { ConfigProvider, Input } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
@ -12,6 +13,9 @@ const App: React.FC = () => (
> >
<Input placeholder="Basic usage" /> <Input placeholder="Basic usage" />
</ConfigProvider> </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 { const {
controlHeight, controlHeight,
fontSize, fontSize,
@ -124,19 +126,26 @@ export const initComponentToken = (token: AliasToken): SharedComponentToken => {
colorErrorOutline, colorErrorOutline,
colorWarningOutline, colorWarningOutline,
colorBgContainer, colorBgContainer,
inputFontSize,
inputFontSizeLG,
inputFontSizeSM,
} = token; } = token;
const mergedFontSize = inputFontSize || fontSize;
const mergedFontSizeSM = inputFontSizeSM || mergedFontSize;
const mergedFontSizeLG = inputFontSizeLG || fontSizeLG;
return { return {
paddingBlock: Math.max( paddingBlock: Math.max(
Math.round(((controlHeight - fontSize * lineHeight) / 2) * 10) / 10 - lineWidth, Math.round(((controlHeight - mergedFontSize * lineHeight) / 2) * 10) / 10 - lineWidth,
0, 0,
), ),
paddingBlockSM: Math.max( paddingBlockSM: Math.max(
Math.round(((controlHeightSM - fontSize * lineHeight) / 2) * 10) / 10 - lineWidth, Math.round(((controlHeightSM - mergedFontSizeSM * lineHeight) / 2) * 10) / 10 - lineWidth,
0, 0,
), ),
paddingBlockLG: paddingBlockLG:
Math.ceil(((controlHeightLG - fontSizeLG * lineHeightLG) / 2) * 10) / 10 - lineWidth, Math.ceil(((controlHeightLG - mergedFontSizeLG * lineHeightLG) / 2) * 10) / 10 - lineWidth,
paddingInline: paddingSM - lineWidth, paddingInline: paddingSM - lineWidth,
paddingInlineSM: controlPaddingHorizontalSM - lineWidth, paddingInlineSM: controlPaddingHorizontalSM - lineWidth,
paddingInlineLG: controlPaddingHorizontal - lineWidth, paddingInlineLG: controlPaddingHorizontal - lineWidth,
@ -148,8 +157,8 @@ export const initComponentToken = (token: AliasToken): SharedComponentToken => {
warningActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorWarningOutline}`, warningActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorWarningOutline}`,
hoverBg: colorBgContainer, hoverBg: colorBgContainer,
activeBg: colorBgContainer, activeBg: colorBgContainer,
inputFontSize: fontSize, inputFontSize: mergedFontSize,
inputFontSizeLG: fontSizeLG, inputFontSizeLG: mergedFontSizeLG,
inputFontSizeSM: fontSize, inputFontSizeSM: mergedFontSizeSM,
}; };
}; };