mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

refactor: 📦 some styles to reduce css bundle size (#27129)

Browse Source 
* refactor: some styles to reduce css bundle size

* test: update snapshot

* fix snapshot

* fix test case

* fix addonAfter

* fix firefox style

* reduce riddon css size

* fix Input.Group border radius

* remove unused css selectors

* fix test cov

* fix search button hover border

* fix rtl textarea clear icon style

* update demos

* fix search rtl style

* fix input search style
This commit is contained in:
偏右 2020-10-13 21:16:20 +08:00 committed by GitHub
parent a04d13c0b9
commit 3ef6ea3ead
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 953 additions and 904 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
View File

@ -79,44 +79,52 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
class="ant-select-selection-search"
>
<span
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-search ant-select-selection-search-input"
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-select-selection-search-input"
>
<input
aria-activedescendant="undefined_list_0"
aria-autocomplete="list"
aria-controls="undefined_list"
aria-haspopup="listbox"
aria-owns="undefined_list"
autocomplete="off"
class="ant-input ant-input-lg"
placeholder="input here"
role="combobox"
type="search"
value=""
/>
<span
class="ant-input-suffix"
class="ant-input-wrapper ant-input-group"
>
<input
aria-activedescendant="undefined_list_0"
aria-autocomplete="list"
aria-controls="undefined_list"
aria-haspopup="listbox"
aria-owns="undefined_list"
autocomplete="off"
class="ant-input ant-input-lg"
placeholder="input here"
role="combobox"
type="search"
value=""
/>
<span
aria-label="search"
class="anticon anticon-search ant-input-search-icon"
role="img"
tabindex="-1"
class="ant-input-group-addon"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<button
class="ant-btn ant-btn-lg ant-btn-icon-only ant-input-search-button"
type="button"
>
<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
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
class=""
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>
</button>
</span>
</span>
</span>
@ -737,43 +745,51 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-select-selection-search"
>
<span
class="ant-input-affix-wrapper ant-input-search ant-select-selection-search-input"
class="ant-input-group-wrapper ant-input-search ant-select-selection-search-input"
>
<input
aria-activedescendant="undefined_list_0"
aria-autocomplete="list"
aria-controls="undefined_list"
aria-haspopup="listbox"
aria-owns="undefined_list"
autocomplete="off"
class="ant-input"
role="combobox"
type="search"
value=""
/>
<span
class="ant-input-suffix"
class="ant-input-wrapper ant-input-group"
>
<input
aria-activedescendant="undefined_list_0"
aria-autocomplete="list"
aria-controls="undefined_list"
aria-haspopup="listbox"
aria-owns="undefined_list"
autocomplete="off"
class="ant-input"
role="combobox"
type="search"
value=""
/>
<span
aria-label="search"
class="anticon anticon-search ant-input-search-icon"
role="img"
tabindex="-1"
class="ant-input-group-addon"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<button
class="ant-btn ant-btn-icon-only ant-input-search-button"
type="button"
>
<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
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
class=""
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>
</button>
</span>
</span>
</span>
@ -881,43 +897,51 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
class="ant-select-selection-search"
>
<span
class="ant-input-affix-wrapper ant-input-search ant-select-selection-search-input"
class="ant-input-group-wrapper ant-input-search ant-select-selection-search-input"
>
<input
aria-activedescendant="undefined_list_0"
aria-autocomplete="list"
aria-controls="undefined_list"
aria-haspopup="listbox"
aria-owns="undefined_list"
autocomplete="off"
class="ant-input"
role="combobox"
type="search"
value=""
/>
<span
class="ant-input-suffix"
class="ant-input-wrapper ant-input-group"
>
<input
aria-activedescendant="undefined_list_0"
aria-autocomplete="list"
aria-controls="undefined_list"
aria-haspopup="listbox"
aria-owns="undefined_list"
autocomplete="off"
class="ant-input"
role="combobox"
type="search"
value=""
/>
<span
aria-label="search"
class="anticon anticon-search ant-input-search-icon"
role="img"
tabindex="-1"
class="ant-input-group-addon"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<button
class="ant-btn ant-btn-icon-only ant-input-search-button"
type="button"
>
<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
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
class=""
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>
</button>
</span>
</span>
</span>
@ -1041,7 +1065,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
class="ant-select-selection-search"
>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-enter-button ant-input-search-large ant-select-selection-search-input"
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-select-selection-search-input"
>
<span
class="ant-input-wrapper ant-input-group"

2
components/badge/Ribbon.tsx
View File

@ -48,7 +48,7 @@ const Ribbon: React.FC<RibbonProps> = function Ribbon({
<div className={`${prefixCls}-wrapper`}>
{children}
<div className={ribbonCls} style={{ ...colorStyle, ...style }}>
{text}
<span className={`${prefixCls}-text`}>{text}</span>
<div className={`${prefixCls}-corner`} style={cornerColorStyle} />
</div>
</div>

36
components/badge/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2060,7 +2060,11 @@ exports[`renders ./components/badge/demo/ribbbon.md correctly 1`] = `
<div
class="ant-ribbon ant-ribbon-placement-end"
>
Pushes open the window
<span
class="ant-ribbon-text"
>
Pushes open the window
</span>
<div
class="ant-ribbon-corner"
/>
@ -2092,7 +2096,11 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
<div
class="ant-ribbon ant-ribbon-placement-end"
>
啦啦啦啦
<span
class="ant-ribbon-text"
>
啦啦啦啦
</span>
<div
class="ant-ribbon-corner"
/>
@ -2118,7 +2126,11 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
>
啦啦啦啦
<span
class="ant-ribbon-text"
>
啦啦啦啦
</span>
<div
class="ant-ribbon-corner"
/>
@ -2145,7 +2157,11 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
class="ant-ribbon ant-ribbon-placement-end"
style="background:#2db7f5"
>
啦啦啦啦
<span
class="ant-ribbon-text"
>
啦啦啦啦
</span>
<div
class="ant-ribbon-corner"
style="color:#2db7f5"
@ -2173,7 +2189,11 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
class="ant-ribbon ant-ribbon-placement-start"
style="background:#2db7f5"
>
啦啦啦啦
<span
class="ant-ribbon-text"
>
啦啦啦啦
</span>
<div
class="ant-ribbon-corner"
style="color:#2db7f5"
@ -2200,7 +2220,11 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
class="ant-ribbon ant-ribbon-placement-end"
style="background:#2db7f5"
>
啦啦啦啦
<span
class="ant-ribbon-text"
>
啦啦啦啦
</span>
<div
class="ant-ribbon-corner"
style="color:#2db7f5"

3
components/badge/__tests__/__snapshots__/index.test.js.snap
View File

@ -3505,6 +3505,9 @@ exports[`Ribbon rtl render component should be rendered correctly in RTL directi
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-rtl"
>
<span
class="ant-ribbon-text"
/>
<div
class="ant-ribbon-corner"
/>

19
components/badge/style/ribbon.less
View File

@ -21,12 +21,16 @@
background-color: @primary-color;
border-radius: @border-radius-sm;
&-text {
color: @white;
}
&-corner {
position: absolute;
top: 100%;
width: 8px;
height: 8px;
color: @primary-color;
color: currentColor;
border: 4px solid;
transform: scaleY(0.75);
transform-origin: top;
@ -50,10 +54,8 @@
@color: extract(@preset-colors, @i);
@darkColor: '@{color}-6';
&-color-@{color} {
background-color: @@darkColor;
.@{ribbon-prefix-cls}-corner {
color: @@darkColor;
}
color: @@darkColor;
background: @@darkColor;
}
}
.make-color-classes();
@ -65,20 +67,15 @@
.@{ribbon-prefix-cls}-corner {
right: 0;
border-color: currentColor transparent transparent currentColor;
&::after {
border-color: currentColor transparent transparent currentColor;
}
}
}
&.@{ribbon-prefix-cls}-placement-start {
left: -8px;
border-bottom-left-radius: 0;
.@{ribbon-prefix-cls}-corner {
left: 0;
border-color: currentColor currentColor transparent transparent;
&::after {
border-color: currentColor currentColor transparent transparent;
}
}
}
}

336
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -14459,36 +14459,44 @@ exports[`ConfigProvider components Input configProvider 1`] = `
value=""
/>
<span
class="config-input-affix-wrapper config-input-search"
class="config-input-group-wrapper config-input-search"
>
<input
class="config-input"
type="text"
value=""
/>
<span
class="config-input-suffix"
class="config-input-wrapper config-input-group"
>
<input
class="config-input"
type="text"
value=""
/>
<span
aria-label="search"
class="anticon anticon-search config-input-search-icon"
role="img"
tabindex="-1"
class="config-input-group-addon"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<button
class="config-btn config-btn-icon-only config-input-search-button"
type="button"
>
<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
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
class=""
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>
</button>
</span>
</span>
</span>
@ -14552,36 +14560,44 @@ exports[`ConfigProvider components Input configProvider componentSize large 1`]
value=""
/>
<span
class="config-input-affix-wrapper config-input-affix-wrapper-lg config-input-search"
class="config-input-group-wrapper config-input-group-wrapper-lg config-input-search config-input-search-large"
>
<input
class="config-input config-input-lg"
type="text"
value=""
/>
<span
class="config-input-suffix"
class="config-input-wrapper config-input-group"
>
<input
class="config-input config-input-lg"
type="text"
value=""
/>
<span
aria-label="search"
class="anticon anticon-search config-input-search-icon"
role="img"
tabindex="-1"
class="config-input-group-addon"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<button
class="config-btn config-btn-lg config-btn-icon-only config-input-search-button"
type="button"
>
<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
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
class=""
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>
</button>
</span>
</span>
</span>
@ -14645,36 +14661,44 @@ exports[`ConfigProvider components Input configProvider componentSize middle 1`]
value=""
/>
<span
class="config-input-affix-wrapper config-input-search"
class="config-input-group-wrapper config-input-search config-input-search-middle"
>
<input
class="config-input"
type="text"
value=""
/>
<span
class="config-input-suffix"
class="config-input-wrapper config-input-group"
>
<input
class="config-input"
type="text"
value=""
/>
<span
aria-label="search"
class="anticon anticon-search config-input-search-icon"
role="img"
tabindex="-1"
class="config-input-group-addon"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<button
class="config-btn config-btn-icon-only config-input-search-button"
type="button"
>
<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
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
class=""
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>
</button>
</span>
</span>
</span>
@ -14738,36 +14762,44 @@ exports[`ConfigProvider components Input configProvider virtual and dropdownMatc
value=""
/>
<span
class="ant-input-affix-wrapper ant-input-search"
class="ant-input-group-wrapper ant-input-search"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-suffix"
class="ant-input-wrapper ant-input-group"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
aria-label="search"
class="anticon anticon-search ant-input-search-icon"
role="img"
tabindex="-1"
class="ant-input-group-addon"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<button
class="ant-btn ant-btn-icon-only ant-input-search-button"
type="button"
>
<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
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
class=""
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>
</button>
</span>
</span>
</span>
@ -14831,36 +14863,44 @@ exports[`ConfigProvider components Input normal 1`] = `
value=""
/>
<span
class="ant-input-affix-wrapper ant-input-search"
class="ant-input-group-wrapper ant-input-search"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-suffix"
class="ant-input-wrapper ant-input-group"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
aria-label="search"
class="anticon anticon-search ant-input-search-icon"
role="img"
tabindex="-1"
class="ant-input-group-addon"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<button
class="ant-btn ant-btn-icon-only ant-input-search-button"
type="button"
>
<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
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
class=""
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>
</button>
</span>
</span>
</span>
@ -14924,36 +14964,44 @@ exports[`ConfigProvider components Input prefixCls 1`] = `
value=""
/>
<span
class="ant-input-affix-wrapper prefix-Input"
class="ant-input-group-wrapper prefix-Input"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-suffix"
class="ant-input-wrapper ant-input-group"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
aria-label="search"
class="anticon anticon-search prefix-Input-icon"
role="img"
tabindex="-1"
class="ant-input-group-addon"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<button
class="ant-btn ant-btn-icon-only prefix-Input-button"
type="button"
>
<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
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
class=""
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>
</button>
</span>
</span>
</span>

12
components/form/style/status.less
View File

@ -209,18 +209,6 @@
border-color: @error-color;
}
}
.@{ant-prefix}-mention-wrapper {
.@{ant-prefix}-mention-editor {
&,
&:not([disabled]):hover {
border-color: @error-color;
}
}
&.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
.@{ant-prefix}-mention-editor:not([disabled]):focus {
.active(@error-color);
}
}
.@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
.active(@error-color);

9
components/input/ClearableLabeledInput.tsx
View File

@ -55,17 +55,12 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
};
renderClearIcon(prefixCls: string) {
const { allowClear, value, disabled, readOnly, inputType, handleReset } = this.props;
const { allowClear, value, disabled, readOnly, handleReset } = this.props;
if (!allowClear) {
return null;
}
const needClear = !disabled && !readOnly && value;
const className =
inputType === ClearableInputType[0]
? `${prefixCls}-textarea-clear-icon`
: `${prefixCls}-clear-icon`;
const className = `${prefixCls}-clear-icon`;
return (
<CloseCircleFilled
onClick={handleReset}

105
components/input/Search.tsx
View File

@ -2,12 +2,11 @@ import * as React from 'react';
import classNames from 'classnames';
import { composeRef } from 'rc-util/lib/ref';
import SearchOutlined from '@ant-design/icons/SearchOutlined';
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import Input, { InputProps } from './Input';
import Button from '../button';
import SizeContext, { SizeType } from '../config-provider/SizeContext';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { cloneElement, replaceElement } from '../_util/reactNode';
import { cloneElement } from '../_util/reactNode';
export interface SearchProps extends InputProps {
inputPrefixCls?: string;
@ -42,67 +41,20 @@ const Search = React.forwardRef<Input, SearchProps>((props, ref) => {
};
const onSearch = (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLInputElement>) => {
const { onSearch: customOnSearch, loading, disabled } = props;
if (loading || disabled) {
return;
}
const { onSearch: customOnSearch } = props;
if (customOnSearch) {
customOnSearch(inputRef.current?.input.value!, e);
}
};
const renderLoading = (prefixCls: string) => {
const { enterButton, size: customizeSize } = props;
if (enterButton) {
return (
<SizeContext.Consumer key="enterButton">
{size => (
<Button className={`${prefixCls}-button`} type="primary" size={customizeSize || size}>
<LoadingOutlined />
</Button>
)}
</SizeContext.Consumer>
);
}
return <LoadingOutlined className={`${prefixCls}-icon`} key="loadingIcon" />;
};
const renderSuffix = (prefixCls: string) => {
const { suffix, enterButton, loading } = props;
if (loading && !enterButton) {
return [suffix, renderLoading(prefixCls)];
}
if (enterButton) return suffix;
const icon = (
<SearchOutlined className={`${prefixCls}-icon`} key="searchIcon" onClick={onSearch} />
);
if (suffix) {
return [
replaceElement(suffix, null, {
key: 'suffix',
}),
icon,
];
}
return icon;
};
const renderAddonAfter = (prefixCls: string, size: SizeType) => {
const { enterButton, disabled, addonAfter, loading } = props;
const searchIcon =
typeof enterButton === 'boolean' || typeof enterButton === 'undefined' ? (
<SearchOutlined />
) : null;
const btnClassName = `${prefixCls}-button`;
if (loading && enterButton) {
return [renderLoading(prefixCls), addonAfter];
}
if (!enterButton) return addonAfter;
let button: React.ReactNode;
const enterButtonAsElement = enterButton as React.ReactElement;
const isAntdButton =
@ -124,14 +76,16 @@ const Search = React.forwardRef<Input, SearchProps>((props, ref) => {
button = (
<Button
className={btnClassName}
type="primary"
type={enterButton ? 'primary' : undefined}
size={size}
disabled={disabled}
key="enterButton"
onMouseDown={onMouseDown}
onClick={onSearch}
loading={loading}
icon={searchIcon}
>
{enterButton === true ? <SearchOutlined /> : enterButton}
{enterButton}
</Button>
);
}
@ -139,7 +93,7 @@ const Search = React.forwardRef<Input, SearchProps>((props, ref) => {
if (addonAfter) {
return [
button,
replaceElement(addonAfter, null, {
cloneElement(addonAfter, {
key: 'addonAfter',
}),
];
@ -152,41 +106,28 @@ const Search = React.forwardRef<Input, SearchProps>((props, ref) => {
const {
prefixCls: customizePrefixCls,
inputPrefixCls: customizeInputPrefixCls,
enterButton,
className,
size: customizeSize,
suffix,
...restProps
} = props;
delete (restProps as any).onSearch;
delete (restProps as any).loading;
delete (restProps as any).enterButton;
const prefixCls = getPrefixCls('input-search', customizePrefixCls);
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
const getClassName = (size: SizeType) => {
let inputClassName;
if (enterButton) {
inputClassName = classNames(
prefixCls,
{
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-enter-button`]: !!enterButton,
[`${prefixCls}-${size}`]: !!size,
},
className,
);
} else {
inputClassName = classNames(
prefixCls,
{
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
);
}
return inputClassName;
};
const getClassName = (size: SizeType) =>
classNames(
prefixCls,
{
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-${size}`]: !!size,
},
className,
);
return (
<SizeContext.Consumer>
@ -198,7 +139,7 @@ const Search = React.forwardRef<Input, SearchProps>((props, ref) => {
size={customizeSize || size}
prefixCls={inputPrefixCls}
addonAfter={renderAddonAfter(prefixCls, customizeSize || size)}
suffix={renderSuffix(prefixCls)}
suffix={suffix}
onChange={onChange}
className={getClassName(customizeSize || size)}
/>

4
components/input/__tests__/Search.test.js
View File

@ -36,14 +36,14 @@ describe('Input.Search', () => {
it('should disable search icon when disabled prop is true', () => {
const onSearch = jest.fn();
const wrapper = mount(<Search defaultValue="search text" onSearch={onSearch} disabled />);
wrapper.find('.anticon-search').simulate('click');
wrapper.find('Button').simulate('click');
expect(onSearch).toHaveBeenCalledTimes(0);
});
it('should trigger onSearch when click search icon', () => {
const onSearch = jest.fn();
const wrapper = mount(<Search defaultValue="search text" onSearch={onSearch} />);
wrapper.find('.anticon-search').simulate('click');
wrapper.find('Button').simulate('click');
expect(onSearch).toHaveBeenCalledTimes(1);
expect(onSearch).toHaveBeenCalledWith(
'search text',

391
components/input/__tests__/__snapshots__/Search.test.js.snap
View File

@ -2,64 +2,27 @@
exports[`Input.Search rtl render component should be rendered correctly in RTL direction 1`] = `
<span
class="ant-input-affix-wrapper ant-input-affix-wrapper-rtl ant-input-search ant-input-search-rtl"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-suffix"
>
<span
aria-label="search"
class="anticon anticon-search ant-input-search-icon"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
class=""
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>
</span>
`;
exports[`Input.Search should support addonAfter 1`] = `
<span
class="ant-input-group-wrapper ant-input-search"
class="ant-input-group-wrapper ant-input-group-wrapper-rtl ant-input-search ant-input-search-rtl"
>
<span
class="ant-input-wrapper ant-input-group"
class="ant-input-wrapper ant-input-group ant-input-group-rtl"
>
<input
class="ant-input ant-input-rtl"
type="text"
value=""
/>
<span
class="ant-input-affix-wrapper ant-input-search"
class="ant-input-group-addon"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-suffix"
<button
class="ant-btn ant-btn-icon-only ant-btn-rtl ant-input-search-button"
type="button"
>
<span
aria-label="search"
class="anticon anticon-search ant-input-search-icon"
class="anticon anticon-search"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
@ -76,11 +39,52 @@ exports[`Input.Search should support addonAfter 1`] = `
/>
</svg>
</span>
</span>
</button>
</span>
</span>
</span>
`;
exports[`Input.Search should support addonAfter 1`] = `
<span
class="ant-input-group-wrapper ant-input-search"
>
<span
class="ant-input-wrapper ant-input-group"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-icon-only ant-input-search-button"
type="button"
>
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
class=""
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>
</button>
<span>
Addon After
</span>
@ -91,7 +95,7 @@ exports[`Input.Search should support addonAfter 1`] = `
exports[`Input.Search should support addonAfter 2`] = `
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
class="ant-input-group-wrapper ant-input-search"
>
<span
class="ant-input-wrapper ant-input-group"
@ -156,31 +160,40 @@ exports[`Input.Search should support addonAfter and suffix for loading 1`] = `
class="ant-input-suffix"
>
suffix
<span
aria-label="loading"
class="anticon anticon-loading ant-input-search-icon"
role="img"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</span>
</span>
</span>
<span
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-icon-only ant-btn-loading ant-input-search-button"
type="button"
>
<span
class="ant-btn-loading-icon"
>
<span
aria-label="loading"
class="anticon anticon-loading"
role="img"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</span>
</span>
</button>
addonAfter
</span>
</span>
@ -189,13 +202,13 @@ exports[`Input.Search should support addonAfter and suffix for loading 1`] = `
exports[`Input.Search should support addonAfter and suffix for loading 2`] = `
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
class="ant-input-group-wrapper ant-input-search"
>
<span
class="ant-input-wrapper ant-input-group"
>
<span
class="ant-input-affix-wrapper ant-input-search ant-input-search-enter-button"
class="ant-input-affix-wrapper ant-input-search"
>
<input
class="ant-input"
@ -212,28 +225,32 @@ exports[`Input.Search should support addonAfter and suffix for loading 2`] = `
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-primary ant-input-search-button"
class="ant-btn ant-btn-primary ant-btn-loading ant-input-search-button"
type="button"
>
<span
aria-label="loading"
class="anticon anticon-loading"
role="img"
class="ant-btn-loading-icon"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<span
aria-label="loading"
class="anticon anticon-loading"
role="img"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</span>
</span>
</button>
addonAfter
@ -244,7 +261,7 @@ exports[`Input.Search should support addonAfter and suffix for loading 2`] = `
exports[`Input.Search should support custom Button 1`] = `
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
class="ant-input-group-wrapper ant-input-search"
>
<span
class="ant-input-wrapper ant-input-group"
@ -272,7 +289,7 @@ exports[`Input.Search should support custom Button 1`] = `
exports[`Input.Search should support custom button 1`] = `
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
class="ant-input-group-wrapper ant-input-search"
>
<span
class="ant-input-wrapper ant-input-group"
@ -297,7 +314,7 @@ exports[`Input.Search should support custom button 1`] = `
exports[`Input.Search should support invalid addonAfter 1`] = `
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
class="ant-input-group-wrapper ant-input-search"
>
<span
class="ant-input-wrapper ant-input-group"
@ -342,36 +359,51 @@ exports[`Input.Search should support invalid addonAfter 1`] = `
exports[`Input.Search should support invalid suffix 1`] = `
<span
class="ant-input-affix-wrapper ant-input-search"
class="ant-input-group-wrapper ant-input-search"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-suffix"
class="ant-input-wrapper ant-input-group"
>
<span
aria-label="search"
class="anticon anticon-search ant-input-search-icon"
role="img"
tabindex="-1"
class="ant-input-affix-wrapper ant-input-search"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-suffix"
/>
</span>
<span
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-icon-only ant-input-search-button"
type="button"
>
<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
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
class=""
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>
</button>
</span>
</span>
</span>
@ -379,43 +411,7 @@ exports[`Input.Search should support invalid suffix 1`] = `
exports[`Input.Search should support loading 1`] = `
<span
class="ant-input-affix-wrapper ant-input-search"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-suffix"
>
<span
aria-label="loading"
class="anticon anticon-loading ant-input-search-icon"
role="img"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</span>
</span>
</span>
`;
exports[`Input.Search should support loading 2`] = `
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
class="ant-input-group-wrapper ant-input-search"
>
<span
class="ant-input-wrapper ant-input-group"
@ -429,28 +425,81 @@ exports[`Input.Search should support loading 2`] = `
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-primary ant-input-search-button"
class="ant-btn ant-btn-icon-only ant-btn-loading ant-input-search-button"
type="button"
>
<span
aria-label="loading"
class="anticon anticon-loading"
role="img"
class="ant-btn-loading-icon"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<span
aria-label="loading"
class="anticon anticon-loading"
role="img"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</span>
</span>
</button>
</span>
</span>
</span>
`;
exports[`Input.Search should support loading 2`] = `
<span
class="ant-input-group-wrapper ant-input-search"
>
<span
class="ant-input-wrapper ant-input-group"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-primary ant-btn-loading ant-input-search-button"
type="button"
>
<span
class="ant-btn-loading-icon"
>
<span
aria-label="loading"
class="anticon anticon-loading"
role="img"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</span>
</span>
</button>
</span>

279
components/input/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1020,7 +1020,7 @@ Array [
/>
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
role="button"
tabindex="-1"
>
@ -1133,7 +1133,7 @@ exports[`renders ./components/input/demo/borderless-debug.md correctly 1`] = `
/>
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
role="button"
tabindex="-1"
>
@ -1363,37 +1363,45 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
value="0571"
/>
<span
class="ant-input-affix-wrapper ant-input-search"
class="ant-input-group-wrapper ant-input-search"
style="width:30%"
>
<input
class="ant-input"
type="text"
value="26888888"
/>
<span
class="ant-input-suffix"
class="ant-input-wrapper ant-input-group"
>
<input
class="ant-input"
type="text"
value="26888888"
/>
<span
aria-label="search"
class="anticon anticon-search ant-input-search-icon"
role="img"
tabindex="-1"
class="ant-input-group-addon"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<button
class="ant-btn ant-btn-icon-only ant-input-search-button"
type="button"
>
<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
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
class=""
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>
</button>
</span>
</span>
</span>
@ -2315,45 +2323,53 @@ Array [
exports[`renders ./components/input/demo/search-input.md correctly 1`] = `
Array [
<span
class="ant-input-affix-wrapper ant-input-search"
class="ant-input-group-wrapper ant-input-search"
style="width:200px"
>
<input
class="ant-input"
placeholder="input search text"
type="text"
value=""
/>
<span
class="ant-input-suffix"
class="ant-input-wrapper ant-input-group"
>
<input
class="ant-input"
placeholder="input search text"
type="text"
value=""
/>
<span
aria-label="search"
class="anticon anticon-search ant-input-search-icon"
role="img"
tabindex="-1"
class="ant-input-group-addon"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<button
class="ant-btn ant-btn-icon-only ant-input-search-button"
type="button"
>
<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
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
class=""
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>
</button>
</span>
</span>
</span>,
<br />,
<br />,
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
class="ant-input-group-wrapper ant-input-search"
>
<span
class="ant-input-wrapper ant-input-group"
@ -2398,7 +2414,7 @@ Array [
<br />,
<br />,
<span
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-enter-button ant-input-search-large"
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large"
>
<span
class="ant-input-wrapper ant-input-group"
@ -2426,13 +2442,13 @@ Array [
<br />,
<br />,
<span
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-enter-button ant-input-search-large"
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large"
>
<span
class="ant-input-wrapper ant-input-group"
>
<span
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-search ant-input-search-enter-button ant-input-search-large"
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-search ant-input-search-large"
>
<input
class="ant-input ant-input-lg"
@ -2486,43 +2502,56 @@ Array [
exports[`renders ./components/input/demo/search-input-loading.md correctly 1`] = `
Array [
<span
class="ant-input-affix-wrapper ant-input-search"
class="ant-input-group-wrapper ant-input-search"
>
<input
class="ant-input"
placeholder="input search loading default"
type="text"
value=""
/>
<span
class="ant-input-suffix"
class="ant-input-wrapper ant-input-group"
>
<input
class="ant-input"
placeholder="input search loading default"
type="text"
value=""
/>
<span
aria-label="loading"
class="anticon anticon-loading ant-input-search-icon"
role="img"
class="ant-input-group-addon"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<button
class="ant-btn ant-btn-icon-only ant-btn-loading ant-input-search-button"
type="button"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
<span
class="ant-btn-loading-icon"
>
<span
aria-label="loading"
class="anticon anticon-loading"
role="img"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</span>
</span>
</button>
</span>
</span>
</span>,
<br />,
<br />,
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
class="ant-input-group-wrapper ant-input-search"
>
<span
class="ant-input-wrapper ant-input-group"
@ -2537,28 +2566,84 @@ Array [
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-primary ant-input-search-button"
class="ant-btn ant-btn-primary ant-btn-loading ant-input-search-button"
type="button"
>
<span
aria-label="loading"
class="anticon anticon-loading"
role="img"
class="ant-btn-loading-icon"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<span
aria-label="loading"
class="anticon anticon-loading"
role="img"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</span>
</span>
</button>
</span>
</span>
</span>,
<br />,
<br />,
<span
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large"
>
<span
class="ant-input-wrapper ant-input-group"
>
<input
class="ant-input ant-input-lg"
placeholder="input search text"
type="text"
value=""
/>
<span
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-primary ant-btn-lg ant-btn-loading ant-input-search-button"
type="button"
>
<span
class="ant-btn-loading-icon"
>
<span
aria-label="loading"
class="anticon anticon-loading"
role="img"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</span>
</span>
<span>
Search
</span>
</button>
</span>

65
components/input/__tests__/__snapshots__/index.test.js.snap
View File

@ -357,36 +357,53 @@ exports[`Input should support size in form 1`] = `
exports[`Input.Search should support suffix 1`] = `
<span
class="ant-input-affix-wrapper ant-input-search"
class="ant-input-group-wrapper ant-input-search"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-suffix"
class="ant-input-wrapper ant-input-group"
>
<span
aria-label="search"
class="anticon anticon-search ant-input-search-icon"
role="img"
tabindex="-1"
class="ant-input-affix-wrapper ant-input-search"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-suffix"
>
<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>
suffix
</span>
</span>
<span
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-icon-only ant-input-search-button"
type="button"
>
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
class=""
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>
</button>
</span>
</span>
</span>

16
components/input/__tests__/__snapshots__/textarea.test.js.snap
View File

@ -14,7 +14,7 @@ exports[`TextArea allowClear should change type when click 1`] = `
</textarea>
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-input-textarea-clear-icon"
class="anticon anticon-close-circle ant-input-clear-icon"
role="button"
tabindex="-1"
>
@ -49,7 +49,7 @@ exports[`TextArea allowClear should change type when click 2`] = `
/>
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
role="button"
tabindex="-1"
>
@ -84,7 +84,7 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined,
/>
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
role="button"
tabindex="-1"
>
@ -119,7 +119,7 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined,
/>
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
role="button"
tabindex="-1"
>
@ -154,7 +154,7 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined,
/>
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
role="button"
tabindex="-1"
>
@ -189,7 +189,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
/>
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
role="button"
tabindex="-1"
>
@ -224,7 +224,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
/>
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
role="button"
tabindex="-1"
>
@ -259,7 +259,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
/>
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
role="button"
tabindex="-1"
>

14
components/input/__tests__/textarea.test.js
View File

@ -147,7 +147,7 @@ describe('TextArea allowClear', () => {
wrapper.find('textarea').simulate('change', { target: { value: '111' } });
expect(wrapper.find('textarea').getDOMNode().value).toEqual('111');
expect(wrapper.render()).toMatchSnapshot();
wrapper.find('.ant-input-textarea-clear-icon').at(0).simulate('click');
wrapper.find('.ant-input-clear-icon').at(0).simulate('click');
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.find('textarea').getDOMNode().value).toEqual('');
});
@ -156,7 +156,7 @@ describe('TextArea allowClear', () => {
const wrappers = [null, undefined, ''].map(val => mount(<TextArea allowClear value={val} />));
wrappers.forEach(wrapper => {
expect(wrapper.find('textarea').getDOMNode().value).toEqual('');
expect(wrapper.find('.ant-input-textarea-clear-icon-hidden').exists()).toBeTruthy();
expect(wrapper.find('.ant-input-clear-icon-hidden').exists()).toBeTruthy();
expect(wrapper.render()).toMatchSnapshot();
});
});
@ -167,7 +167,7 @@ describe('TextArea allowClear', () => {
);
wrappers.forEach(wrapper => {
expect(wrapper.find('textarea').getDOMNode().value).toEqual('');
expect(wrapper.find('.ant-textarea-clear-icon').exists()).toEqual(false);
expect(wrapper.find('.ant-input-clear-icon-hidden').exists()).toBeTruthy();
expect(wrapper.render()).toMatchSnapshot();
});
});
@ -180,7 +180,7 @@ describe('TextArea allowClear', () => {
argumentEventObjectValue = e.target.value;
};
const wrapper = mount(<TextArea allowClear defaultValue="111" onChange={onChange} />);
wrapper.find('.ant-input-textarea-clear-icon').at(0).simulate('click');
wrapper.find('.ant-input-clear-icon').at(0).simulate('click');
expect(argumentEventObject.type).toBe('click');
expect(argumentEventObjectValue).toBe('');
expect(wrapper.find('textarea').at(0).getDOMNode().value).toBe('');
@ -194,7 +194,7 @@ describe('TextArea allowClear', () => {
argumentEventObjectValue = e.target.value;
};
const wrapper = mount(<TextArea allowClear value="111" onChange={onChange} />);
wrapper.find('.ant-input-textarea-clear-icon').at(0).simulate('click');
wrapper.find('.ant-input-clear-icon').at(0).simulate('click');
expect(argumentEventObject.type).toBe('click');
expect(argumentEventObjectValue).toBe('');
expect(wrapper.find('textarea').at(0).getDOMNode().value).toBe('111');
@ -202,14 +202,14 @@ describe('TextArea allowClear', () => {
it('should focus textarea after clear', () => {
const wrapper = mount(<TextArea allowClear defaultValue="111" />, { attachTo: document.body });
wrapper.find('.ant-input-textarea-clear-icon').at(0).simulate('click');
wrapper.find('.ant-input-clear-icon').at(0).simulate('click');
expect(document.activeElement).toBe(wrapper.find('textarea').at(0).getDOMNode());
wrapper.unmount();
});
it('should not support allowClear when it is disabled', () => {
const wrapper = mount(<TextArea allowClear defaultValue="111" disabled />);
expect(wrapper.find('.ant-input-textarea-clear-icon-hidden').exists()).toBeTruthy();
expect(wrapper.find('.ant-input-clear-icon-hidden').exists()).toBeTruthy();
});
it('not block input when `value` is undefined', () => {

3
components/input/demo/search-input-loading.md
View File

@ -24,6 +24,9 @@ ReactDOM.render(
<br />
<br />
<Search placeholder="input search loading with enterButton" loading enterButton />
<br />
<br />
<Search placeholder="input search text" enterButton="Search" size="large" loading />
</>,
mountNode,
);

19
components/input/demo/search-input.md
View File

@ -28,24 +28,17 @@ const suffix = (
/>
);
const onSearch = value => console.log(value);
ReactDOM.render(
<>
<Search
placeholder="input search text"
onSearch={value => console.log(value)}
style={{ width: 200 }}
/>
<Search placeholder="input search text" onSearch={onSearch} style={{ width: 200 }} />
<br />
<br />
<Search placeholder="input search text" onSearch={value => console.log(value)} enterButton />
<Search placeholder="input search text" onSearch={onSearch} enterButton />
<br />
<br />
<Search
placeholder="input search text"
enterButton="Search"
size="large"
onSearch={value => console.log(value)}
/>
<Search placeholder="input search text" enterButton="Search" size="large" onSearch={onSearch} />
<br />
<br />
<Search
@ -53,7 +46,7 @@ ReactDOM.render(
enterButton="Search"
size="large"
suffix={suffix}
onSearch={value => console.log(value)}
onSearch={onSearch}
/>
</>,
mountNode,

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

@ -1,8 +1,11 @@
@import './index';
.clear-icon() {
// ========================= Input =========================
.@{ant-prefix}-input-clear-icon {
margin: 0 @input-affix-margin;
color: @disabled-color;
font-size: @font-size-sm;
vertical-align: -1px;
// https://github.com/ant-design/ant-design/pull/18151
// https://codesandbox.io/s/wizardly-sun-u10br
cursor: pointer;
@ -16,20 +19,9 @@
color: @text-color;
}
+ i {
margin-left: 6px;
}
&-hidden {
visibility: hidden;
}
}
// ========================= Input =========================
.@{ant-prefix}-input-clear-icon {
.clear-icon;
margin: 0 @input-affix-margin;
vertical-align: -1px;
&:last-child {
margin-right: 0;
@ -40,13 +32,11 @@
.@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn {
padding: 0 !important;
border: 0 !important;
}
.@{ant-prefix}-input-textarea-clear-icon {
.clear-icon;
position: absolute;
top: 0;
right: 0;
z-index: 1;
margin: 8px 8px 0 0;
.@{ant-prefix}-input-clear-icon {
position: absolute;
top: 8px;
right: 8px;
z-index: 1;
}
}

25
components/input/style/mixin.less
View File

@ -202,17 +202,6 @@
}
}
}
// Expand addon icon click area
// https://github.com/ant-design/ant-design/issues/3714
> i:only-child::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
}
}
// Reset rounded corners
@ -339,11 +328,8 @@
// reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input
& > .@{ant-prefix}-select > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-calendar-picker .@{ant-prefix}-input,
& > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input,
& > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor,
& > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input,
& > .@{ant-prefix}-input-group-wrapper .@{ant-prefix}-input {
border-right-width: @border-width-base;
border-radius: 0;
@ -368,23 +354,16 @@
& > *:first-child,
& > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-calendar-picker:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-mention-wrapper:first-child .@{ant-prefix}-mention-editor,
& > .@{ant-prefix}-time-picker:first-child .@{ant-prefix}-time-picker-input {
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
& > *:last-child,
& > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
& > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
border-right-width: @border-width-base;
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;

97
components/input/style/rtl.less
View File

@ -53,13 +53,10 @@
margin-left: 0;
}
}
}
.@{ant-prefix}-input-textarea-clear-icon {
.@{ant-prefix}-input-affix-wrapper-rtl & {
right: auto;
left: 0;
margin: 8px 0 0 8px;
left: 8px;
}
}
@ -139,11 +136,8 @@
& > *:first-child,
& > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-calendar-picker:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-mention-wrapper:first-child .@{ant-prefix}-mention-editor,
& > .@{ant-prefix}-time-picker:first-child .@{ant-prefix}-time-picker-input {
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
.@{inputClass}-group-rtl& {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
@ -151,12 +145,9 @@
& > *:last-child,
& > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
& > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
.@{inputClass}-group-rtl& {
border-left-width: @border-width-base;
border-radius: @border-radius-base 0 0 @border-radius-base;
@ -169,79 +160,35 @@
@search-prefix: ~'@{ant-prefix}-input-search';
@search-rtl-cls: ~'@{search-prefix}-rtl';
.@{search-prefix} {
&-rtl {
direction: rtl;
}
.@{search-prefix}-rtl {
direction: rtl;
&-icon {
.@{search-rtl-cls} & {
margin-right: 0.5em;
margin-left: 0;
}
.@{ant-prefix}-input {
border-right: @border-width-base solid @border-color-base;
border-left: 0;
&::before {
.@{search-rtl-cls} & {
border-left: none;
}
}
&::after {
.@{search-rtl-cls} & {
right: auto;
left: 0;
border-right: @border-width-base @border-style-base @input-border-color;
transition: all 0.3s;
&:hover,
&:focus {
+ .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
border-right-color: @input-hover-border-color;
border-left-color: @border-color-base;
}
}
}
&:not(&-enter-button) {
.@{search-rtl-cls}& {
padding-right: @input-padding-horizontal-base;
padding-left: 0;
}
}
&-enter-button {
input {
.@{search-rtl-cls}& {
border-right: @border-width-base @border-style-base @input-border-color;
border-left: 0;
}
> .@{ant-prefix}-input-group {
> .@{ant-prefix}-input-affix-wrapper {
border-right: @border-width-base solid @border-color-base;
border-left: 0;
&:hover,
&:focus {
.@{search-rtl-cls}& {
border-color: @input-hover-border-color;
}
&-focused {
border-right-color: @input-hover-border-color;
}
}
&.@{ant-prefix}-input-affix-wrapper {
.@{search-rtl-cls}& {
border-right: @border-width-base @border-style-base @input-border-color;
border-left: 0;
}
&:hover,
&:focus {
.@{search-rtl-cls}& {
border-color: @input-hover-border-color;
}
}
}
& + .@{ant-prefix}-input-group-addon,
input + .@{ant-prefix}-input-group-addon {
.@{search-rtl-cls}& {
padding: 0;
border: 0;
.@{search-prefix}-button {
width: 100%;
border-radius: @border-radius-base 0 0 @border-radius-base;
}
> .@{ant-prefix}-input-group-addon {
.@{search-prefix}-button {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
}

96
components/input/style/search-input.less
View File

@ -5,85 +5,47 @@
@search-prefix: ~'@{ant-prefix}-input-search';
.searchInputIcon(@input-height, @font-size) {
.@{search-prefix}-icon {
@horizontal-padding: (@input-height - @font-size) / 2;
padding: 0 @horizontal-padding;
&::before {
transform: translateX(-@horizontal-padding - @border-width-base);
}
&::after {
width: @input-height;
}
}
}
.searchInputIcon(@input-height-base, @font-size-base);
.@{ant-prefix}-input-affix-wrapper-lg {
.searchInputIcon(@input-height-lg, @font-size-lg);
}
.@{ant-prefix}-input-affix-wrapper-sm {
.searchInputIcon(@input-height-sm, @font-size-sm);
}
.@{search-prefix} {
&-icon {
margin-left: 0.5em;
color: @text-color-secondary;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: @input-icon-hover-color;
}
.@{ant-prefix}-input {
border-right: 0;
&::before {
position: absolute;
top: 0;
bottom: 0;
display: block;
border-left: @border-width-base @border-style-base @input-border-color;
transition: all 0.3s;
content: '';
}
&:hover,
&:focus {
border-color: @input-hover-border-color;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
content: '';
}
}
&:not(&-enter-button) {
padding-right: 0;
}
&-enter-button {
input {
border-right: 0;
&:hover,
&:focus {
border-color: @input-hover-border-color;
+ .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
border-left-color: @input-hover-border-color;
}
}
}
&.@{ant-prefix}-input-affix-wrapper {
// fix slight height diff in Firefox:
// https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
.@{ant-prefix}-input-lg {
line-height: @line-height-base - 0.0002;
}
> .@{ant-prefix}-input-group {
> .@{ant-prefix}-input-affix-wrapper {
border-right: 0;
}
& + .@{ant-prefix}-input-group-addon,
input + .@{ant-prefix}-input-group-addon {
> .@{ant-prefix}-input-group-addon {
padding: 0;
border: 0;
.@{search-prefix}-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-radius: 0 @border-radius-base @border-radius-base 0;
}
.@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
color: @text-color-secondary;
&.@{ant-prefix}-btn-loading::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
}
}

2
components/layout/style/index.less
View File

@ -89,7 +89,7 @@
}
&-zero-width {
& > * {
> * {
overflow: hidden;
}

22
components/layout/style/light.less
View File

@ -1,15 +1,11 @@
.@{layout-prefix-cls} {
&-sider {
&-light {
background: @layout-sider-background-light;
}
&-light &-trigger {
color: @layout-trigger-color-light;
background: @layout-trigger-background-light;
}
&-light &-zero-width-trigger {
color: @layout-trigger-color-light;
background: @layout-trigger-background-light;
}
.@{layout-prefix-cls}-sider.@{layout-prefix-cls}-light {
background: @layout-sider-background-light;
.@{layout-prefix-cls}-sider-trigger {
color: @layout-trigger-color-light;
background: @layout-trigger-background-light;
}
.@{layout-prefix-cls}-sider-zero-width-trigger {
color: @layout-trigger-color-light;
background: @layout-trigger-background-light;
}
}

58
components/tree/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2262,38 +2262,46 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
exports[`renders ./components/tree/demo/search.md correctly 1`] = `
<div>
<span
class="ant-input-affix-wrapper ant-input-search"
class="ant-input-group-wrapper ant-input-search"
style="margin-bottom:8px"
>
<input
class="ant-input"
placeholder="Search"
type="text"
value=""
/>
<span
class="ant-input-suffix"
class="ant-input-wrapper ant-input-group"
>
<input
class="ant-input"
placeholder="Search"
type="text"
value=""
/>
<span
aria-label="search"
class="anticon anticon-search ant-input-search-icon"
role="img"
tabindex="-1"
class="ant-input-group-addon"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<button
class="ant-btn ant-btn-icon-only ant-input-search-button"
type="button"
>
<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
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
class=""
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>
</button>
</span>
</span>
</span>