From 5d538849196cdf57af663a124acdea8e80e3d8b9 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Mon, 22 May 2023 13:37:41 +0800 Subject: [PATCH] fix: fix wrong button icon size and margin (#42516) --- .../__snapshots__/demo-extend.test.ts.snap | 34 +++++++++- .../__tests__/__snapshots__/demo.test.ts.snap | 34 +++++++++- components/button/demo/debug-icon.tsx | 8 ++- components/button/style/index.ts | 9 ++- .../__snapshots__/demo-extend.test.ts.snap | 66 +++++++++++++++++++ .../__snapshots__/demo.test.tsx.snap | 51 ++++++++++++++ components/dropdown/demo/icon-debug.md | 7 ++ components/dropdown/demo/icon-debug.tsx | 13 ++++ components/dropdown/index.en-US.md | 1 + components/dropdown/index.zh-CN.md | 1 + components/dropdown/style/index.ts | 7 +- package.json | 2 +- 12 files changed, 220 insertions(+), 13 deletions(-) create mode 100644 components/dropdown/demo/icon-debug.md create mode 100644 components/dropdown/demo/icon-debug.tsx diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap index b79ae5d430..8464e3528d 100644 --- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -976,7 +976,7 @@ Array [
+
+ +
, diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap index 184d8e7b02..6e59ba7429 100644 --- a/components/button/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap @@ -895,7 +895,7 @@ Array [
+
+ +
, diff --git a/components/button/demo/debug-icon.tsx b/components/button/demo/debug-icon.tsx index e1b6d6334c..f716db3ac3 100644 --- a/components/button/demo/debug-icon.tsx +++ b/components/button/demo/debug-icon.tsx @@ -1,7 +1,7 @@ -import React, { useState } from 'react'; import { SearchOutlined } from '@ant-design/icons'; -import { Button, Tooltip, ConfigProvider, Radio, Divider, Space } from 'antd'; +import { Button, ConfigProvider, Divider, Radio, Space, Tooltip } from 'antd'; import type { SizeType } from 'antd/es/config-provider/SizeContext'; +import React, { useState } from 'react'; const App: React.FC = () => { const [size, setSize] = useState('large'); @@ -45,6 +45,10 @@ const App: React.FC = () => { Search diff --git a/components/button/style/index.ts b/components/button/style/index.ts index bdce1c754f..a038022201 100644 --- a/components/button/style/index.ts +++ b/components/button/style/index.ts @@ -47,17 +47,16 @@ const genSharedButtonStyle: GenerateStyle = (token): CSS }, // Leave a space between icon and text. + [`> ${iconCls} + span, > span + ${iconCls}`]: { + marginInlineStart: token.marginXS, + }, + [`&:not(${componentCls}-icon-only) > ${componentCls}-icon`]: { [`&${componentCls}-loading-icon, &:not(:last-child)`]: { marginInlineEnd: token.marginXS, }, }, - // Special case for anticon after children - [`> span + ${iconCls}`]: { - marginInlineStart: token.marginXS, - }, - '> a': { color: 'currentColor', }, diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap index 9825d69913..01fc00d10b 100644 --- a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -5066,6 +5066,72 @@ Array [ ] `; +exports[`renders components/dropdown/demo/icon-debug.tsx extend context correctly 1`] = ` +
+
+
+ + +
+
+
+
+`; + exports[`renders components/dropdown/demo/item.tsx extend context correctly 1`] = ` Array [ `; +exports[`renders components/dropdown/demo/icon-debug.tsx correctly 1`] = ` +
+
+
+ + +
+
+
+`; + exports[`renders components/dropdown/demo/item.tsx correctly 1`] = ` ( + + } menu={{ items: [] }}> + Submit + + +); + +export default App; diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md index 2a5aae906f..62cef852b4 100644 --- a/components/dropdown/index.en-US.md +++ b/components/dropdown/index.en-US.md @@ -33,6 +33,7 @@ When there are more than a few options to choose from, you can wrap them in a `D Selectable Menu Menu full styles \_InternalPanelDoNotUseOrYouWillBeFired +Icon debug ## API diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index f497b92dea..00073ec217 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -37,6 +37,7 @@ demo: 菜单可选选择 Menu 完整样式 \_InternalPanelDoNotUseOrYouWillBeFired +Icon debug ## API diff --git a/components/dropdown/style/index.ts b/components/dropdown/style/index.ts index bd706b76b0..950e6f5d97 100644 --- a/components/dropdown/style/index.ts +++ b/components/dropdown/style/index.ts @@ -70,9 +70,10 @@ const genBaseStyle: GenerateStyle = (token) => { content: '""', }, - [`&-trigger${antCls}-btn > ${iconCls}-down`]: { - fontSize: fontSizeIcon, - transform: 'none', + [`&-trigger${antCls}-btn`]: { + [`& > ${iconCls}-down, & > ${antCls}-btn-icon > ${iconCls}-down`]: { + fontSize: fontSizeIcon, + }, }, [`${componentCls}-wrap`]: { diff --git a/package.json b/package.json index 63dbe2d89f..2b311c9c05 100644 --- a/package.json +++ b/package.json @@ -323,4 +323,4 @@ "*.{ts,tsx,js,jsx}": "prettier --ignore-unknown --write", "*.{json,less,md}": "prettier --ignore-unknown --write" } -} \ No newline at end of file +}