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

style: tweak icon-only button font-size to align icon and text (#52353)

Browse Source 
* style: tweak icon-only button font-size to align icon and text

* fix

* fix
This commit is contained in:
afc163 2025-01-12 14:40:42 +08:00 committed by GitHub
parent 88687bbb3c
commit bd0d445668
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -698,7 +698,6 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
[iconCls]: { [iconCls]: {
fontSize: buttonIconOnlyFontSize, fontSize: buttonIconOnlyFontSize,
verticalAlign: 'calc(-0.125em - 1px)',
}, },
}, },
}, },

14
components/button/style/token.ts
View File

@ -160,17 +160,17 @@ export interface ComponentToken {
* @desc 只有图标的按钮图标尺寸 * @desc 只有图标的按钮图标尺寸
* @descEN Icon size of button which only contains icon * @descEN Icon size of button which only contains icon
*/ */
onlyIconSize: number; onlyIconSize: number | string;
/** /**
* @desc 大号只有图标的按钮图标尺寸 * @desc 大号只有图标的按钮图标尺寸
* @descEN Icon size of large button which only contains icon * @descEN Icon size of large button which only contains icon
*/ */
onlyIconSizeLG: number; onlyIconSizeLG: number | string;
/** /**
* @desc 小号只有图标的按钮图标尺寸 * @desc 小号只有图标的按钮图标尺寸
* @descEN Icon size of small button which only contains icon * @descEN Icon size of small button which only contains icon
*/ */
onlyIconSizeSM: number; onlyIconSizeSM: number | string;
/** /**
* @desc 按钮组边框颜色 * @desc 按钮组边框颜色
* @descEN Border color of button group * @descEN Border color of button group
@ -233,7 +233,7 @@ export interface ButtonToken extends FullToken<'Button'> {
* @desc 只有图标的按钮图标尺寸 * @desc 只有图标的按钮图标尺寸
* @descEN Icon size of button which only contains icon * @descEN Icon size of button which only contains icon
*/ */
buttonIconOnlyFontSize: number; buttonIconOnlyFontSize: number | string;
} }
export const prepareToken: (token: Parameters<GenStyleFn<'Button'>>[0]) => ButtonToken = ( export const prepareToken: (token: Parameters<GenStyleFn<'Button'>>[0]) => ButtonToken = (
@ -275,9 +275,9 @@ export const prepareComponentToken: GetDefaultToken<'Button'> = (token) => {
paddingInline: token.paddingContentHorizontal - token.lineWidth, paddingInline: token.paddingContentHorizontal - token.lineWidth,
paddingInlineLG: token.paddingContentHorizontal - token.lineWidth, paddingInlineLG: token.paddingContentHorizontal - token.lineWidth,
paddingInlineSM: 8 - token.lineWidth, paddingInlineSM: 8 - token.lineWidth,
onlyIconSize: token.fontSizeLG, onlyIconSize: 'inherit',
onlyIconSizeSM: token.fontSizeLG - 2, onlyIconSizeSM: 'inherit',
onlyIconSizeLG: token.fontSizeLG + 2, onlyIconSizeLG: 'inherit',
groupBorderColor: token.colorPrimaryHover, groupBorderColor: token.colorPrimaryHover,
linkHoverBg: 'transparent', linkHoverBg: 'transparent',
textTextColor: token.colorText, textTextColor: token.colorText,