mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

fix: Icon styles for inputs are incorrect in Space Compact mode. (#42167)

Browse Source 
* fix: Icon styles for inputs are incorrect in Space Compact mode.

* docs: add demo for snapshot compare

---------

Co-authored-by: 二货机器人 <smith3816@gmail.com>
This commit is contained in:
Wesley 2023-05-08 14:03:54 +08:00 committed by GitHub
parent 8c725caa73
commit 4e05f084ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 132 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -5300,6 +5300,7 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
</div>
<div
class="ant-space-item"
style="margin-bottom: 16px;"
>
<div
class="ant-space-compact"
@ -5452,6 +5453,57 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
/>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-space-compact"
>
<span
class="ant-input-group-wrapper ant-input-compact-item ant-input-compact-first-item ant-input-group-wrapper-lg"
>
<span
class="ant-input-wrapper ant-input-group"
>
<span
class="ant-input-group-addon"
>
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
/>
</svg>
</span>
</span>
<input
class="ant-input ant-input-lg"
placeholder="large size"
type="text"
value=""
/>
</span>
</span>
<input
class="ant-input ant-input-lg ant-input-compact-item ant-input-compact-last-item"
placeholder="another input"
type="text"
value=""
/>
</div>
</div>
</div>
`;

52
components/input/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -1518,6 +1518,7 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = `
</div>
<div
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-space-compact"
@ -1589,6 +1590,57 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = `
/>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-space-compact"
>
<span
class="ant-input-group-wrapper ant-input-compact-item ant-input-compact-first-item ant-input-group-wrapper-lg"
>
<span
class="ant-input-wrapper ant-input-group"
>
<span
class="ant-input-group-addon"
>
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
/>
</svg>
</span>
</span>
<input
class="ant-input ant-input-lg"
placeholder="large size"
type="text"
value=""
/>
</span>
</span>
<input
class="ant-input ant-input-lg ant-input-compact-item ant-input-compact-last-item"
placeholder="another input"
type="text"
value=""
/>
</div>
</div>
</div>
`;

5
components/input/demo/compact-style.tsx
View File

@ -1,3 +1,4 @@
import { SearchOutlined } from '@ant-design/icons';
import { Button, Input, Select, Space } from 'antd';
import React from 'react';
@ -34,6 +35,10 @@ const App: React.FC = () => (
<Select defaultValue="Zhejiang" options={options} />
<Input defaultValue="Xihu District, Hangzhou" />
</Space.Compact>
<Space.Compact size="large">
<Input addonBefore={<SearchOutlined />} placeholder="large size" />
<Input placeholder="another input" />
</Space.Compact>
</Space>
);

23
components/input/style/index.ts
View File

@ -726,6 +726,29 @@ const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
...genDisabledStyle(token),
},
},
// Fix the issue of using icons in Space Compact mode
// https://github.com/ant-design/ant-design/issues/42122
[`&:not(${componentCls}-compact-first-item):not(${componentCls}-compact-last-item)${componentCls}-compact-item`]:
{
[`${componentCls}, ${componentCls}-group-addon`]: {
borderRadius: 0,
},
},
[`&:not(${componentCls}-compact-last-item)${componentCls}-compact-first-item`]: {
[`${componentCls}, ${componentCls}-group-addon`]: {
borderStartEndRadius: 0,
borderEndEndRadius: 0,
},
},
[`&:not(${componentCls}-compact-first-item)${componentCls}-compact-last-item`]: {
[`${componentCls}, ${componentCls}-group-addon`]: {
borderStartStartRadius: 0,
borderEndStartRadius: 0,
},
},
},
},
};