diff --git a/BUG_VERSIONS.json b/BUG_VERSIONS.json
index c39e264791..28841d1824 100644
--- a/BUG_VERSIONS.json
+++ b/BUG_VERSIONS.json
@@ -74,5 +74,6 @@
"5.22.1": [
"https://github.com/ant-design/ant-design/issues/51420",
"https://github.com/ant-design/ant-design/issues/51430"
- ]
+ ],
+ "5.22.6": ["https://github.com/ant-design/ant-design/issues/52124"]
}
diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
index 0d5e3d5b4e..b83e422849 100644
--- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1242,6 +1242,236 @@ Array [
+
+
+ 👇🏻 https://github.com/ant-design/ant-design/issues/52124 👇🏻
+
+
+
+
+
+
+
+
+ 👇🏻 https://github.com/ant-design/ant-design/issues/51380 👇🏻
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 👇🏻 https://github.com/ant-design/ant-design/issues/52124 👇🏻
+
+
+
+
+
+
+
+
+ 👇🏻 https://github.com/ant-design/ant-design/issues/51380 👇🏻
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
}>with icon
+ 👇🏻 https://github.com/ant-design/ant-design/issues/52124 👇🏻
+
+
+ }
+ style={{
+ height: 60,
+ }}
+ >
+ with icon
+
+
+ 👇🏻 https://github.com/ant-design/ant-design/issues/51380 👇🏻
+
+ } />
+ }>
+ custom icon
+
+ } />
+ }>with icon
+
+
+
👇🏻 https://github.com/ant-design/ant-design/issues/51380 👇🏻
= (token): CSS
pointerEvents: 'none',
},
- '> span:not(:only-child)': {
- display: 'inline-flex',
- alignSelf: 'baseline',
- },
-
- [`> span${componentCls}-icon, > span${iconCls}`]: {
- display: 'inline-flex',
- alignSelf: 'center',
- },
+ // https://github.com/ant-design/ant-design/issues/51380
+ [`${componentCls}-icon > svg`]: resetIcon(),
'> a': {
color: 'currentColor',
@@ -593,7 +586,6 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
componentCls,
controlHeight,
fontSize,
- lineHeight,
borderRadius,
buttonPaddingHorizontal,
iconCls,
@@ -605,7 +597,6 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
{
[prefixCls]: {
fontSize,
- lineHeight,
height: controlHeight,
padding: `${unit(buttonPaddingVertical!)} ${unit(buttonPaddingHorizontal!)}`,
borderRadius,
@@ -615,6 +606,7 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
[iconCls]: {
fontSize: buttonIconOnlyFontSize,
+ verticalAlign: 'calc(-0.125em - 1px)',
},
},
},
@@ -632,7 +624,6 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
const genSizeBaseButtonStyle: GenerateStyle = (token) => {
const baseToken = mergeToken(token, {
fontSize: token.contentFontSize,
- lineHeight: token.contentLineHeight,
});
return genButtonStyle(baseToken, token.componentCls);
};
@@ -641,10 +632,9 @@ const genSizeSmallButtonStyle: GenerateStyle = (token) => {
const smallToken = mergeToken(token, {
controlHeight: token.controlHeightSM,
fontSize: token.contentFontSizeSM,
- lineHeight: token.contentLineHeightSM,
padding: token.paddingXS,
buttonPaddingHorizontal: token.paddingInlineSM,
- buttonPaddingVertical: token.paddingBlockSM,
+ buttonPaddingVertical: 0,
borderRadius: token.borderRadiusSM,
buttonIconOnlyFontSize: token.onlyIconSizeSM,
});
@@ -656,9 +646,8 @@ const genSizeLargeButtonStyle: GenerateStyle = (token) => {
const largeToken = mergeToken(token, {
controlHeight: token.controlHeightLG,
fontSize: token.contentFontSizeLG,
- lineHeight: token.contentLineHeightLG,
buttonPaddingHorizontal: token.paddingInlineLG,
- buttonPaddingVertical: token.paddingBlockLG,
+ buttonPaddingVertical: 0,
borderRadius: token.borderRadiusLG,
buttonIconOnlyFontSize: token.onlyIconSizeLG,
});
diff --git a/components/button/style/token.ts b/components/button/style/token.ts
index 3a88d8a58b..5896ac408c 100644
--- a/components/button/style/token.ts
+++ b/components/button/style/token.ts
@@ -239,11 +239,11 @@ export interface ButtonToken extends FullToken<'Button'> {
export const prepareToken: (token: Parameters>[0]) => ButtonToken = (
token,
) => {
- const { paddingInline, onlyIconSize, paddingBlock } = token;
+ const { paddingInline, onlyIconSize } = token;
const buttonToken = mergeToken(token, {
buttonPaddingHorizontal: paddingInline,
- buttonPaddingVertical: paddingBlock,
+ buttonPaddingVertical: 0,
buttonIconOnlyFontSize: onlyIconSize,
});
diff --git a/package.json b/package.json
index 2cd96ea5ff..ae9875c726 100644
--- a/package.json
+++ b/package.json
@@ -290,6 +290,7 @@
"react-draggable": "^4.4.6",
"react-fast-marquee": "^1.6.5",
"react-highlight-words": "^0.20.0",
+ "react-icons": "^5.4.0",
"react-infinite-scroll-component": "^6.1.0",
"react-intersection-observer": "^9.13.1",
"react-resizable": "^3.0.5",