test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

Merge pull request #38101 from ant-design/fix/input-textarea-border

Browse Source 
style: fix TextArea custom border style not working when allowClear is enable
This commit is contained in:
黑雨 2022-10-19 14:03:31 +08:00 committed by GitHub
commit d9bb472487
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 70 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5083,6 +5083,34 @@ exports[`renders ./components/input/demo/borderless-debug.md extend context corr
RMB
</span>
</span>
<span
class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
style="border:2px solid #000"
>
<textarea
class="ant-input"
/>
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
role="button"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
</span>
</div>
`;

28
components/input/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -1300,6 +1300,34 @@ exports[`renders ./components/input/demo/borderless-debug.md correctly 1`] = `
RMB
</span>
</span>
<span
class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
style="border:2px solid #000"
>
<textarea
class="ant-input"
/>
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
role="button"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
</span>
</div>
`;

7
components/input/demo/borderless-debug.md
View File

@ -1,14 +1,14 @@
---
order: 98
title:
zh-CN: Borderless Debug
en-US: Borderless Debug
zh-CN: Style Debug
en-US: Style Debug
debug: true
---
## zh-CN
Buggy!
Buggy! 测试一些踩过的样式坑。
## en-US
@ -29,6 +29,7 @@ const App: React.FC = () => (
<Input placeholder="Unbordered" bordered={false} allowClear />
<Input prefix="￥" suffix="RMB" bordered={false} />
<Input prefix="￥" suffix="RMB" disabled bordered={false} />
<TextArea allowClear style={{ border: '2px solid #000' }} />
</div>
);

7
components/input/style/affix.less
View File

@ -28,8 +28,7 @@
}
}
> input.@{ant-prefix}-input {
padding: 0;
> .@{ant-prefix}-input {
font-size: inherit;
border: none;
outline: none;
@ -37,6 +36,10 @@
&:focus {
box-shadow: none !important;
}
&:not(textarea) {
padding: 0;
}
}
&::before {

11
components/input/style/allow-clear.less
View File

@ -2,8 +2,8 @@
@input-prefix-cls: ~'@{ant-prefix}-input';
// ========================= Input =========================
.@{iconfont-css-prefix}.@{ant-prefix}-input-clear-icon,
.@{ant-prefix}-input-clear-icon {
.@{iconfont-css-prefix}.@{input-prefix-cls}-clear-icon,
.@{input-prefix-cls}-clear-icon {
margin: 0;
color: @disabled-color;
font-size: @font-size-sm;
@ -31,11 +31,10 @@
}
// ======================= TextArea ========================
.@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn {
padding: 0 !important;
border: 0 !important;
.@{input-prefix-cls}-affix-wrapper.@{input-prefix-cls}-affix-wrapper-textarea-with-clear-btn {
padding: 0;
.@{ant-prefix}-input-clear-icon {
.@{input-prefix-cls}-clear-icon {
position: absolute;
top: 8px;
right: 8px;