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

fix(icon-button): Button icon not vertically centered error (#51381)

Browse Source
This commit is contained in:
𝑾𝒖𝒙𝒉 2024-10-26 23:54:03 +08:00 committed by GitHub
parent 55835153e8
commit c69e943eeb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 167 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1170,6 +1170,78 @@ Array [
</span>
</button>
</div>
<div
class="ant-flex ant-flex-gap-small"
style="transform: scale(3); transform-origin: left top;"
>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="minus-square"
class="anticon anticon-minus-square"
role="img"
>
<svg
aria-hidden="true"
data-icon="minus-square"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
/>
<path
d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
/>
</svg>
</span>
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
type="button"
>
<span
class="ant-btn-icon"
>
<div
style="background: red; width: 12px; height: 12px;"
/>
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
type="button"
>
<span
class="ant-btn-icon"
>
<div
style="background: green; width: 16px; height: 16px;"
/>
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
type="button"
>
<span
class="ant-btn-icon"
>
<div
style="background: blue; width: 14px; height: 16px;"
/>
</span>
</button>
</div>
</div>,
]
`;

72
components/button/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -1075,6 +1075,78 @@ Array [
</span>
</button>
</div>
<div
class="ant-flex ant-flex-gap-small"
style="transform:scale(3);transform-origin:left top"
>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="minus-square"
class="anticon anticon-minus-square"
role="img"
>
<svg
aria-hidden="true"
data-icon="minus-square"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
/>
<path
d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
/>
</svg>
</span>
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
type="button"
>
<span
class="ant-btn-icon"
>
<div
style="background:red;width:12px;height:12px"
/>
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
type="button"
>
<span
class="ant-btn-icon"
>
<div
style="background:green;width:16px;height:16px"
/>
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
type="button"
>
<span
class="ant-btn-icon"
>
<div
style="background:blue;width:14px;height:16px"
/>
</span>
</button>
</div>
</div>,
]
`;

22
components/button/demo/debug-icon.tsx
View File

@ -1,10 +1,17 @@
import React from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { SearchOutlined, MinusSquareOutlined } from '@ant-design/icons';
import { Button, ConfigProvider, Divider, Flex, Radio, Tooltip } from 'antd';
import type { ConfigProviderProps } from 'antd';
type SizeType = ConfigProviderProps['componentSize'];
/**12px 图标 */
const Icon12Size = () => <div style={{ background: 'red', width: 12, height: 12 }} />;
/**16px 图标 */
const Icon16Size = () => <div style={{ background: 'green', width: 16, height: 16 }} />;
/**不规则宽高 */
const IconIrregularSize = () => <div style={{ background: 'blue', width: 14, height: 16 }} />;
const App: React.FC = () => {
const [size, setSize] = React.useState<SizeType>('large');
return (
@ -51,6 +58,19 @@ const App: React.FC = () => {
Search
</Button>
</Flex>
<Flex
gap="small"
style={{
// https://github.com/ant-design/ant-design/issues/51380 // 视觉回归测试
transform: 'scale(3)',
transformOrigin: 'left top',
}}
>
<Button icon={<MinusSquareOutlined />} />
<Button icon={<Icon12Size />} />
<Button icon={<Icon16Size />} />
<Button icon={<IconIrregularSize />} />
</Flex>
</Flex>
</ConfigProvider>
</>

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

@ -39,7 +39,8 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
},
'> span': {
display: 'inline-block',
// https://github.com/ant-design/ant-design/issues/51380
display: 'inline-flex',
},
[`${componentCls}-icon`]: {