source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat[Input.Search]: Abandoning the use of addon * in the Search component (#55705)

Browse Source 
* refactor: Search component refactoring using compact

* test: update snap

* test: update snap

* test: update snap

* chore: fix style

* chore: fix search style

* test: update snapshot

* test: update snapshot

* test: update snapshot

---------

Co-authored-by: 刘欢 <lh01217311@antgroup.com>
Co-authored-by: 二货机器人 <smith3816@gmail.com>
This commit is contained in:
EmilyyyLiu
2025-11-14 16:16:23 +08:00
committed by GitHub
parent 0c6cd4966a
commit bbef6f8752
19 changed files with 3018 additions and 3717 deletions
Download Patch File Download Diff File Expand all files Collapse all files

397
components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@@ -675,60 +675,52 @@ Array [
class="ant-select-placeholder"
style="visibility: visible;"
/>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-group-wrapper-outlined ant-input-search ant-input-search-large ant-select-input css-var-test-id ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-test-id ant-input-search-large ant-select-input"
>
<span
class="ant-input-wrapper ant-input-group"
<input
aria-autocomplete="list"
aria-controls="test-id_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="test-id_list"
autocomplete="off"
class="ant-input ant-input-lg ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
id="test-id"
placeholder="input here"
role="combobox"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<input
aria-autocomplete="list"
aria-controls="test-id_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="test-id_list"
autocomplete="off"
class="ant-input ant-input-lg ant-input-outlined"
id="test-id"
placeholder="input here"
role="combobox"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
</div>
</div>,
<div
@@ -1022,11 +1014,7 @@ Array [
]
`;
exports[`renders components/auto-complete/demo/certain-category.tsx extend context correctly 2`] = `
[
"Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.",
]
`;
exports[`renders components/auto-complete/demo/certain-category.tsx extend context correctly 2`] = `[]`;
exports[`renders components/auto-complete/demo/custom.tsx extend context correctly 1`] = `
Array [
@@ -1310,11 +1298,11 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-input-group css-var-test-id ant-input-group-compact"
<div
class="ant-space-compact ant-input-group css-var-test-id ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-outlined css-var-test-id ant-select-css-var ant-tree-select-css-var ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item css-var-test-id ant-select-css-var ant-tree-select-css-var ant-select-single ant-select-show-arrow"
style="width: 30%;"
>
<div
@@ -1424,7 +1412,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
</div>
</div>
<div
class="ant-select ant-select-outlined ant-select-auto-complete css-var-test-id ant-select-css-var ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-last-item ant-select-auto-complete css-var-test-id ant-select-css-var ant-select-single ant-select-show-search"
>
<div
class="ant-select-content"
@@ -1460,7 +1448,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
/>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
@@ -1585,11 +1573,11 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-input-group css-var-test-id ant-input-group-compact"
<div
class="ant-space-compact ant-input-group css-var-test-id ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-outlined css-var-test-id ant-select-css-var ant-tree-select-css-var ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item css-var-test-id ant-select-css-var ant-tree-select-css-var ant-select-single ant-select-show-arrow"
style="width: 30%;"
>
<div
@@ -1699,7 +1687,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
</div>
</div>
<div
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-customize css-var-test-id ant-select-css-var ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-last-item ant-select-auto-complete ant-select-customize css-var-test-id ant-select-css-var ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-content"
@@ -1709,7 +1697,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
style="visibility: visible;"
/>
<span
class="ant-input-affix-wrapper ant-input-outlined ant-select-input css-var-test-id ant-input-css-var"
class="ant-input-affix-wrapper ant-input-outlined ant-select-input css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-last-item"
>
<input
aria-autocomplete="list"
@@ -1762,7 +1750,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
/>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
@@ -1793,11 +1781,11 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-input-group css-var-test-id ant-input-group-compact"
<div
class="ant-space-compact ant-input-group css-var-test-id ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-outlined css-var-test-id ant-select-css-var ant-tree-select-css-var ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item css-var-test-id ant-select-css-var ant-tree-select-css-var ant-select-single ant-select-show-arrow"
style="width: 30%;"
>
<div
@@ -1907,7 +1895,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
</div>
</div>
<div
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-customize css-var-test-id ant-select-css-var ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-last-item ant-select-auto-complete ant-select-customize css-var-test-id ant-select-css-var ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-content"
@@ -1916,59 +1904,51 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
class="ant-select-placeholder"
style="visibility: visible;"
/>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search ant-select-input css-var-test-id ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-test-id ant-select-input"
>
<span
class="ant-input-wrapper ant-input-group"
<input
aria-autocomplete="list"
aria-controls="test-id_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="test-id_list"
autocomplete="off"
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item"
id="test-id"
role="combobox"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<input
aria-autocomplete="list"
aria-controls="test-id_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="test-id_list"
autocomplete="off"
class="ant-input ant-input-outlined"
id="test-id"
role="combobox"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
</div>
</div>
<div
@@ -1983,7 +1963,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
/>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
@@ -2014,11 +1994,11 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-input-group css-var-test-id ant-input-group-compact"
<div
class="ant-space-compact ant-input-group css-var-test-id ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-outlined css-var-test-id ant-select-css-var ant-tree-select-css-var ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item css-var-test-id ant-select-css-var ant-tree-select-css-var ant-select-single ant-select-show-arrow"
style="width: 20%;"
>
<div
@@ -2128,7 +2108,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
</div>
</div>
<div
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-customize css-var-test-id ant-select-css-var ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-auto-complete ant-select-customize css-var-test-id ant-select-css-var ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-content"
@@ -2137,59 +2117,51 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
class="ant-select-placeholder"
style="visibility: visible;"
/>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search ant-select-input css-var-test-id ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-test-id ant-select-input"
>
<span
class="ant-input-wrapper ant-input-group"
<input
aria-autocomplete="list"
aria-controls="test-id_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="test-id_list"
autocomplete="off"
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item"
id="test-id"
role="combobox"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-input-search-btn"
type="button"
>
<input
aria-autocomplete="list"
aria-controls="test-id_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="test-id_list"
autocomplete="off"
class="ant-input ant-input-outlined"
id="test-id"
role="combobox"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
</div>
</div>
<div
@@ -2205,7 +2177,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
</div>
</div>
<button
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
type="button"
>
<span
@@ -2235,7 +2207,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
Search
</span>
</button>
</span>
</div>
</div>
</div>
</div>
@@ -2247,7 +2219,6 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
exports[`renders components/auto-complete/demo/form-debug.tsx extend context correctly 2`] = `
[
"Warning: [antd: Input.Group] \`Input.Group\` is deprecated. Please use \`Space.Compact\` instead.",
"Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.",
]
`;
@@ -2998,60 +2969,52 @@ Array [
class="ant-select-placeholder"
style="visibility: visible;"
/>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-group-wrapper-outlined ant-input-search ant-input-search-large ant-input-search-with-button ant-select-input css-var-test-id ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-test-id ant-input-search-large ant-input-search-with-button ant-select-input"
>
<span
class="ant-input-wrapper ant-input-group"
<input
aria-autocomplete="list"
aria-controls="test-id_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="test-id_list"
autocomplete="off"
class="ant-input ant-input-lg ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
id="test-id"
placeholder="input here"
role="combobox"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-primary ant-btn-variant-solid ant-btn-lg ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<input
aria-autocomplete="list"
aria-controls="test-id_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="test-id_list"
autocomplete="off"
class="ant-input ant-input-lg ant-input-outlined"
id="test-id"
placeholder="input here"
role="combobox"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-primary ant-btn-variant-solid ant-btn-lg ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
</div>
</div>,
<div
@@ -3069,11 +3032,7 @@ Array [
]
`;
exports[`renders components/auto-complete/demo/uncertain-category.tsx extend context correctly 2`] = `
[
"Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.",
]
`;
exports[`renders components/auto-complete/demo/uncertain-category.tsx extend context correctly 2`] = `[]`;
exports[`renders components/auto-complete/demo/variant.tsx extend context correctly 1`] = `
<div

384
components/auto-complete/__tests__/__snapshots__/demo.test.tsx.snap
View File

@@ -401,60 +401,52 @@ exports[`renders components/auto-complete/demo/certain-category.tsx correctly 1`
class="ant-select-placeholder"
style="visibility:visible"
/>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-group-wrapper-outlined ant-input-search ant-input-search-large ant-select-input css-var-test-id ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-test-id ant-input-search-large ant-select-input"
>
<span
class="ant-input-wrapper ant-input-group"
<input
aria-autocomplete="list"
aria-controls="test-id_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="test-id_list"
autocomplete="off"
class="ant-input ant-input-lg ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
id="test-id"
placeholder="input here"
role="combobox"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<input
aria-autocomplete="list"
aria-controls="test-id_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="test-id_list"
autocomplete="off"
class="ant-input ant-input-lg ant-input-outlined"
id="test-id"
placeholder="input here"
role="combobox"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
</div>
</div>
`;
@@ -653,11 +645,11 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-input-group css-var-test-id ant-input-group-compact"
<div
class="ant-space-compact ant-input-group css-var-test-id ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-outlined css-var-test-id ant-select-css-var ant-tree-select-css-var ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item css-var-test-id ant-select-css-var ant-tree-select-css-var ant-select-single ant-select-show-arrow"
style="width:30%"
>
<div
@@ -707,7 +699,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
</div>
</div>
<div
class="ant-select ant-select-outlined ant-select-auto-complete css-var-test-id ant-select-css-var ant-select-single ant-select-show-search"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-last-item ant-select-auto-complete css-var-test-id ant-select-css-var ant-select-single ant-select-show-search"
>
<div
class="ant-select-content"
@@ -731,7 +723,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
/>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
@@ -844,11 +836,11 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-input-group css-var-test-id ant-input-group-compact"
<div
class="ant-space-compact ant-input-group css-var-test-id ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-outlined css-var-test-id ant-select-css-var ant-tree-select-css-var ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item css-var-test-id ant-select-css-var ant-tree-select-css-var ant-select-single ant-select-show-arrow"
style="width:30%"
>
<div
@@ -898,7 +890,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
</div>
</div>
<div
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-customize css-var-test-id ant-select-css-var ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-last-item ant-select-auto-complete ant-select-customize css-var-test-id ant-select-css-var ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-content"
@@ -908,7 +900,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
style="visibility:visible"
/>
<span
class="ant-input-affix-wrapper ant-input-outlined ant-select-input css-var-test-id ant-input-css-var"
class="ant-input-affix-wrapper ant-input-outlined ant-select-input css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-last-item"
>
<input
aria-autocomplete="list"
@@ -949,7 +941,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
</span>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
@@ -980,11 +972,11 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-input-group css-var-test-id ant-input-group-compact"
<div
class="ant-space-compact ant-input-group css-var-test-id ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-outlined css-var-test-id ant-select-css-var ant-tree-select-css-var ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item css-var-test-id ant-select-css-var ant-tree-select-css-var ant-select-single ant-select-show-arrow"
style="width:30%"
>
<div
@@ -1034,7 +1026,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
</div>
</div>
<div
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-customize css-var-test-id ant-select-css-var ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-compact-last-item ant-select-auto-complete ant-select-customize css-var-test-id ant-select-css-var ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-content"
@@ -1043,62 +1035,54 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
class="ant-select-placeholder"
style="visibility:visible"
/>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search ant-select-input css-var-test-id ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-test-id ant-select-input"
>
<span
class="ant-input-wrapper ant-input-group"
<input
aria-autocomplete="list"
aria-controls="test-id_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="test-id_list"
autocomplete="off"
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item"
id="test-id"
role="combobox"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<input
aria-autocomplete="list"
aria-controls="test-id_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="test-id_list"
autocomplete="off"
class="ant-input ant-input-outlined"
id="test-id"
role="combobox"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
@@ -1129,11 +1113,11 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
<div
class="ant-form-item-control-input-content"
>
<span
class="ant-input-group css-var-test-id ant-input-group-compact"
<div
class="ant-space-compact ant-input-group css-var-test-id ant-input-group-compact"
>
<div
class="ant-select ant-tree-select ant-select-outlined css-var-test-id ant-select-css-var ant-tree-select-css-var ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-outlined ant-select-compact-item ant-select-compact-first-item css-var-test-id ant-select-css-var ant-tree-select-css-var ant-select-single ant-select-show-arrow"
style="width:20%"
>
<div
@@ -1183,7 +1167,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
</div>
</div>
<div
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-customize css-var-test-id ant-select-css-var ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-outlined ant-select-compact-item ant-select-auto-complete ant-select-customize css-var-test-id ant-select-css-var ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-content"
@@ -1192,63 +1176,55 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
class="ant-select-placeholder"
style="visibility:visible"
/>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search ant-select-input css-var-test-id ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-test-id ant-select-input"
>
<span
class="ant-input-wrapper ant-input-group"
<input
aria-autocomplete="list"
aria-controls="test-id_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="test-id_list"
autocomplete="off"
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item"
id="test-id"
role="combobox"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-input-search-btn"
type="button"
>
<input
aria-autocomplete="list"
aria-controls="test-id_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="test-id_list"
autocomplete="off"
class="ant-input ant-input-outlined"
id="test-id"
role="combobox"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
</div>
</div>
<button
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
type="button"
>
<span
@@ -1278,7 +1254,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
Search
</span>
</button>
</span>
</div>
</div>
</div>
</div>
@@ -1552,60 +1528,52 @@ exports[`renders components/auto-complete/demo/uncertain-category.tsx correctly
class="ant-select-placeholder"
style="visibility:visible"
/>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-group-wrapper-outlined ant-input-search ant-input-search-large ant-input-search-with-button ant-select-input css-var-test-id ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-test-id ant-input-search-large ant-input-search-with-button ant-select-input"
>
<span
class="ant-input-wrapper ant-input-group"
<input
aria-autocomplete="list"
aria-controls="test-id_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="test-id_list"
autocomplete="off"
class="ant-input ant-input-lg ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
id="test-id"
placeholder="input here"
role="combobox"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-primary ant-btn-variant-solid ant-btn-lg ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<input
aria-autocomplete="list"
aria-controls="test-id_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="test-id_list"
autocomplete="off"
class="ant-input ant-input-lg ant-input-outlined"
id="test-id"
placeholder="input here"
role="combobox"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-primary ant-btn-variant-solid ant-btn-lg ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
</div>
</div>
`;

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

@@ -1659,52 +1659,44 @@ Array [
without icon
</span>
</button>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-group-wrapper-outlined ant-input-search ant-input-search-large css-var-test-id ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-test-id ant-input-search-large"
style="width: 100px;"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-lg ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-lg ant-input-outlined"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
</div>
<div
class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
@@ -2086,11 +2078,7 @@ Array [
]
`;
exports[`renders components/button/demo/debug-icon.tsx extend context correctly 2`] = `
[
"Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.",
]
`;
exports[`renders components/button/demo/debug-icon.tsx extend context correctly 2`] = `[]`;
exports[`renders components/button/demo/disabled.tsx extend context correctly 1`] = `
<div

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

@@ -1561,52 +1561,44 @@ Array [
without icon
</span>
</button>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-group-wrapper-outlined ant-input-search ant-input-search-large css-var-test-id ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-test-id ant-input-search-large"
style="width:100px"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-lg ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-lg ant-input-outlined"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
</div>
<div
class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"

536
components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
View File

@@ -15815,60 +15815,52 @@ exports[`ConfigProvider components Grid prefixCls 1`] = `
exports[`ConfigProvider components Input configProvider 1`] = `
<div>
<span
class="config-input-group css-var-root"
<div
class="config-space-compact config-input-group css-var-root"
>
<input
class="config-input config-input-outlined css-var-root config-input-css-var"
class="config-input config-input-outlined css-var-root config-input-css-var config-input-compact-item config-input-compact-first-item"
type="text"
value=""
/>
<span
class="config-input-group-wrapper config-input-group-wrapper-outlined config-input-search css-var-root config-input-css-var"
<div
class="config-space-compact config-input-search css-var-root"
>
<span
class="config-input-wrapper config-input-group"
<input
class="config-input config-input-outlined css-var-root config-input-css-var config-input-compact-item"
type="search"
value=""
/>
<button
class="config-btn css-var-root config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-input-search-btn"
type="button"
>
<input
class="config-input config-input-outlined"
type="search"
value=""
/>
<span
class="config-input-group-addon"
class="config-btn-icon"
>
<button
class="config-btn css-var-root config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-icon-only config-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="config-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</span>
</button>
</div>
</div>
<span
class="config-input-affix-wrapper config-input-outlined config-input-password css-var-root config-input-css-var"
>
@@ -15913,63 +15905,55 @@ exports[`ConfigProvider components Input configProvider 1`] = `
exports[`ConfigProvider components Input configProvider componentDisabled 1`] = `
<div>
<span
class="config-input-group css-var-root"
<div
class="config-space-compact config-input-group css-var-root"
>
<input
class="config-input config-input-disabled config-input-outlined css-var-root config-input-css-var"
class="config-input config-input-disabled config-input-outlined css-var-root config-input-css-var config-input-compact-item config-input-compact-first-item"
disabled=""
type="text"
value=""
/>
<span
class="config-input-group-wrapper config-input-group-wrapper-disabled config-input-group-wrapper-outlined config-input-search css-var-root config-input-css-var"
<div
class="config-space-compact config-input-search css-var-root"
>
<span
class="config-input-wrapper config-input-group"
<input
class="config-input config-input-disabled config-input-outlined css-var-root config-input-css-var config-input-compact-item"
disabled=""
type="search"
value=""
/>
<button
class="config-btn css-var-root config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-input-search-btn"
disabled=""
type="button"
>
<input
class="config-input config-input-disabled config-input-outlined"
disabled=""
type="search"
value=""
/>
<span
class="config-input-group-addon"
class="config-btn-icon"
>
<button
class="config-btn css-var-root config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-icon-only config-input-search-button"
disabled=""
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="config-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</span>
</button>
</div>
</div>
<span
class="config-input-affix-wrapper config-input-disabled config-input-affix-wrapper-disabled config-input-outlined config-input-password css-var-root config-input-css-var"
>
@@ -16016,60 +16000,52 @@ exports[`ConfigProvider components Input configProvider componentDisabled 1`] =
exports[`ConfigProvider components Input configProvider componentSize large 1`] = `
<div>
<span
class="config-input-group css-var-root"
<div
class="config-space-compact config-input-group css-var-root"
>
<input
class="config-input config-input-lg config-input-outlined css-var-root config-input-css-var"
class="config-input config-input-lg config-input-outlined css-var-root config-input-css-var config-input-compact-item config-input-compact-first-item"
type="text"
value=""
/>
<span
class="config-input-group-wrapper config-input-group-wrapper-lg config-input-group-wrapper-outlined config-input-search config-input-search-large css-var-root config-input-css-var"
<div
class="config-space-compact config-input-search css-var-root config-input-search-large"
>
<span
class="config-input-wrapper config-input-group"
<input
class="config-input config-input-lg config-input-outlined css-var-root config-input-css-var config-input-compact-item"
type="search"
value=""
/>
<button
class="config-btn css-var-root config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-lg config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-input-search-btn"
type="button"
>
<input
class="config-input config-input-lg config-input-outlined"
type="search"
value=""
/>
<span
class="config-input-group-addon"
class="config-btn-icon"
>
<button
class="config-btn css-var-root config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-lg config-btn-icon-only config-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="config-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</span>
</button>
</div>
</div>
<span
class="config-input-affix-wrapper config-input-affix-wrapper-lg config-input-outlined config-input-password css-var-root config-input-css-var"
>
@@ -16114,60 +16090,52 @@ exports[`ConfigProvider components Input configProvider componentSize large 1`]
exports[`ConfigProvider components Input configProvider componentSize middle 1`] = `
<div>
<span
class="config-input-group css-var-root"
<div
class="config-space-compact config-input-group css-var-root"
>
<input
class="config-input config-input-outlined css-var-root config-input-css-var"
class="config-input config-input-outlined css-var-root config-input-css-var config-input-compact-item config-input-compact-first-item"
type="text"
value=""
/>
<span
class="config-input-group-wrapper config-input-group-wrapper-outlined config-input-search config-input-search-middle css-var-root config-input-css-var"
<div
class="config-space-compact config-input-search css-var-root config-input-search-middle"
>
<span
class="config-input-wrapper config-input-group"
<input
class="config-input config-input-outlined css-var-root config-input-css-var config-input-compact-item"
type="search"
value=""
/>
<button
class="config-btn css-var-root config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-input-search-btn"
type="button"
>
<input
class="config-input config-input-outlined"
type="search"
value=""
/>
<span
class="config-input-group-addon"
class="config-btn-icon"
>
<button
class="config-btn css-var-root config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-icon-only config-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="config-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</span>
</button>
</div>
</div>
<span
class="config-input-affix-wrapper config-input-outlined config-input-password css-var-root config-input-css-var"
>
@@ -16212,60 +16180,52 @@ exports[`ConfigProvider components Input configProvider componentSize middle 1`]
exports[`ConfigProvider components Input configProvider componentSize small 1`] = `
<div>
<span
class="config-input-group css-var-root"
<div
class="config-space-compact config-input-group css-var-root"
>
<input
class="config-input config-input-sm config-input-outlined css-var-root config-input-css-var"
class="config-input config-input-sm config-input-outlined css-var-root config-input-css-var config-input-compact-item config-input-compact-first-item"
type="text"
value=""
/>
<span
class="config-input-group-wrapper config-input-group-wrapper-sm config-input-group-wrapper-outlined config-input-search config-input-search-small css-var-root config-input-css-var"
<div
class="config-space-compact config-input-search css-var-root config-input-search-small"
>
<span
class="config-input-wrapper config-input-group"
<input
class="config-input config-input-sm config-input-outlined css-var-root config-input-css-var config-input-compact-item"
type="search"
value=""
/>
<button
class="config-btn css-var-root config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-sm config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-input-search-btn"
type="button"
>
<input
class="config-input config-input-sm config-input-outlined"
type="search"
value=""
/>
<span
class="config-input-group-addon"
class="config-btn-icon"
>
<button
class="config-btn css-var-root config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-sm config-btn-icon-only config-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="config-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</span>
</button>
</div>
</div>
<span
class="config-input-affix-wrapper config-input-affix-wrapper-sm config-input-outlined config-input-password css-var-root config-input-css-var"
>
@@ -16310,60 +16270,52 @@ exports[`ConfigProvider components Input configProvider componentSize small 1`]
exports[`ConfigProvider components Input normal 1`] = `
<div>
<span
class="ant-input-group css-var-root"
<div
class="ant-space-compact ant-input-group css-var-root"
>
<input
class="ant-input ant-input-outlined css-var-root ant-input-css-var"
class="ant-input ant-input-outlined css-var-root ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
type="text"
value=""
/>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-root ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-root"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-root ant-input-css-var ant-input-compact-item"
type="search"
value=""
/>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</span>
</button>
</div>
</div>
<span
class="ant-input-affix-wrapper ant-input-outlined ant-input-password css-var-root ant-input-css-var"
>
@@ -16408,60 +16360,52 @@ exports[`ConfigProvider components Input normal 1`] = `
exports[`ConfigProvider components Input prefixCls 1`] = `
<div>
<span
class="prefix-Input css-var-root"
<div
class="ant-space-compact prefix-Input css-var-root"
>
<input
class="prefix-Input prefix-Input-outlined css-var-root prefix-Input-css-var"
class="prefix-Input prefix-Input-outlined css-var-root prefix-Input-css-var prefix-Input-compact-item prefix-Input-compact-first-item"
type="text"
value=""
/>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined prefix-Input css-var-root ant-input-css-var"
<div
class="ant-space-compact prefix-Input css-var-root"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-root ant-input-css-var ant-input-compact-item"
type="search"
value=""
/>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item prefix-Input-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only prefix-Input-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</span>
</button>
</div>
</div>
<span
class="ant-input-affix-wrapper ant-input-outlined prefix-Input css-var-root ant-input-css-var"
>

23
components/input/Group.tsx
View File

@@ -6,6 +6,7 @@ import { devUseWarning } from '../_util/warning';
import { ConfigContext } from '../config-provider';
import type { FormItemStatusContextProps } from '../form/context';
import { FormItemInputContext } from '../form/context';
import Space from '../space';
import useStyle from './style';
export interface GroupProps {
@@ -58,18 +59,18 @@ const Group: React.FC<GroupProps> = (props) => {
}
return (
<span
className={cls}
style={props.style}
onMouseEnter={props.onMouseEnter}
onMouseLeave={props.onMouseLeave}
onFocus={props.onFocus}
onBlur={props.onBlur}
>
<FormItemInputContext.Provider value={groupFormItemContext}>
<FormItemInputContext.Provider value={groupFormItemContext}>
<Space.Compact
className={cls}
style={props.style}
onMouseEnter={props.onMouseEnter}
onMouseLeave={props.onMouseLeave}
onFocus={props.onFocus}
onBlur={props.onBlur}
>
{props.children}
</FormItemInputContext.Provider>
</span>
</Space.Compact>
</FormItemInputContext.Provider>
);
};

74
components/input/Search.tsx
View File

@@ -2,6 +2,8 @@ import * as React from 'react';
import SearchOutlined from '@ant-design/icons/SearchOutlined';
import { composeRef } from '@rc-component/util/lib/ref';
import { clsx } from 'clsx';
import omit from 'rc-util/lib/omit';
import pickAttrs from 'rc-util/lib/pickAttrs';
import { useMergeSemantic } from '../_util/hooks';
import type {
@@ -15,9 +17,11 @@ import Button from '../button';
import type { ButtonSemanticName } from '../button/button';
import { useComponentConfig } from '../config-provider/context';
import useSize from '../config-provider/hooks/useSize';
import Space from '../space';
import { useCompactItemContext } from '../space/Compact';
import type { InputProps, InputRef } from './Input';
import Input from './Input';
import useStyle from './style/search';
type SemanticName = 'root' | 'input' | 'prefix' | 'suffix' | 'count';
@@ -54,7 +58,7 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
inputPrefixCls: customizeInputPrefixCls,
className,
size: customizeSize,
suffix,
style,
enterButton = false,
addonAfter,
loading,
@@ -67,6 +71,7 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
onPressEnter: customOnPressEnter,
classNames,
styles,
hidden,
...restProps
} = props;
@@ -101,6 +106,7 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
const prefixCls = getPrefixCls('input-search', customizePrefixCls);
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
const [hashId, cssVarCls] = useStyle(prefixCls);
const { compactSize } = useCompactItemContext(prefixCls, direction);
const size = useSize((ctx) => customizeSize ?? compactSize ?? ctx);
@@ -139,7 +145,10 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
};
const searchIcon = typeof enterButton === 'boolean' ? <SearchOutlined /> : null;
const btnClassName = clsx(`${prefixCls}-button`, mergedClassNames.button?.root);
const btnPrefixCls = `${prefixCls}-btn`;
const btnClassName = clsx(btnPrefixCls, {
[`${btnPrefixCls}-${variant}`]: variant,
});
let button: React.ReactNode;
const enterButtonAsElement = (enterButton || {}) as React.ReactElement;
@@ -157,12 +166,7 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
onSearch(e);
},
key: 'enterButton',
...(isAntdButton
? {
className: btnClassName,
size,
}
: {}),
...(isAntdButton ? { className: btnClassName, size } : {}),
});
} else {
button = (
@@ -197,12 +201,14 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
const mergedClassName = clsx(
prefixCls,
cssVarCls,
{
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-${size}`]: !!size,
[`${prefixCls}-with-button`]: !!enterButton,
},
className,
hashId,
mergedClassNames.root,
);
@@ -216,25 +222,41 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
onCompositionEnd?.(e);
};
const inputProps: InputProps = {
...restProps,
className: mergedClassName,
classNames: mergedClassNames,
styles: mergedStyles,
prefixCls: inputPrefixCls,
type: 'search',
size,
variant,
onPressEnter,
onCompositionStart: handleOnCompositionStart,
onCompositionEnd: handleOnCompositionEnd,
addonAfter: button,
suffix,
onChange,
disabled,
};
// ========================== Render ==========================
// >>> Root Props
const rootProps = pickAttrs(restProps, {
data: true,
});
return <Input ref={composeRef<InputRef>(inputRef, ref)} {...inputProps} />;
const inputProps: InputProps = omit(
{
...restProps,
classNames: omit(mergedClassNames, ['button', 'root']),
styles: omit(mergedStyles, ['button', 'root']),
prefixCls: inputPrefixCls,
type: 'search',
size,
variant,
onPressEnter,
onCompositionStart: handleOnCompositionStart,
onCompositionEnd: handleOnCompositionEnd,
onChange,
disabled,
},
Object.keys(rootProps) as any[],
);
return (
<Space.Compact
className={mergedClassName}
style={{ ...style, ...mergedStyles.root }}
{...rootProps}
hidden={hidden}
>
<Input ref={composeRef<InputRef>(inputRef, ref)} {...inputProps} />
{button}
</Space.Compact>
);
});
if (process.env.NODE_ENV !== 'production') {

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

@@ -1,4 +1,5 @@
import React from 'react';
import { EditOutlined, UserOutlined } from '@ant-design/icons';
import { fireEvent, render } from '@testing-library/react';
import focusTest from '../../../tests/shared/focusTest';
@@ -8,7 +9,6 @@ import Button from '../../button';
import type { InputRef } from '../Input';
import Search from '../Search';
import type { SearchProps } from '../Search';
import { EditOutlined, UserOutlined } from '@ant-design/icons';
describe('Input.Search', () => {
focusTest(Search, { refFocus: true });
@@ -215,6 +215,8 @@ describe('Input.Search', () => {
it('Search with allowClear should have one className only', () => {
const { container } = render(<Search allowClear className="bamboo" />);
expect(container.querySelectorAll('.bamboo')).toHaveLength(1);
expect(container.querySelector('.ant-input-search')).toHaveClass('bamboo');
expect(container.querySelector('.ant-input-affix-wrapper')).not.toHaveClass('bamboo');
});
// https://github.com/ant-design/ant-design/issues/53897

824
components/input/__tests__/__snapshots__/Search.test.tsx.snap
View File

@@ -1,578 +1,482 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`Input.Search rtl render component should be rendered correctly in RTL direction 1`] = `
<span
class="ant-input-group-wrapper ant-input-group-wrapper-rtl ant-input-group-wrapper-outlined ant-input-search ant-input-search-rtl css-var-root ant-input-css-var"
<div
class="ant-space-compact ant-space-compact-rtl ant-input-search css-var-root ant-input-search-rtl"
>
<span
class="ant-input-wrapper ant-input-group ant-input-group-rtl"
<input
class="ant-input ant-input-rtl ant-input-outlined css-var-root ant-input-css-var ant-input-compact-item ant-input-compact-first-item ant-input-compact-item-rtl"
type="search"
value=""
/>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-rtl ant-btn-compact-item ant-btn-compact-last-item ant-btn-compact-item-rtl ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-rtl ant-input-outlined"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-rtl ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
`;
exports[`Input.Search should support ReactNode suffix without error 1`] = `
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-root ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-root"
>
<span
class="ant-input-wrapper ant-input-group"
class="ant-input-affix-wrapper ant-input-outlined css-var-root ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
>
<input
class="ant-input"
type="search"
value=""
/>
<span
class="ant-input-affix-wrapper ant-input-outlined"
class="ant-input-suffix"
>
<input
class="ant-input"
type="search"
value=""
/>
<span
class="ant-input-suffix"
>
<div>
ok
</div>
</span>
</span>
<span
class="ant-input-group-addon"
>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
>
<span
class="ant-btn-icon"
>
<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>
</button>
<div>
ok
</div>
</span>
</span>
</span>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<span
class="ant-btn-icon"
>
<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>
</button>
</div>
`;
exports[`Input.Search should support addonAfter 1`] = `
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-root ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-root"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-root ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
type="search"
value=""
/>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</button>
<span>
Addon After
<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>
</button>
<span>
Addon After
</span>
</span>
</div>
`;
exports[`Input.Search should support addonAfter 2`] = `
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search ant-input-search-with-button css-var-root ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-root ant-input-search-with-button"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-root ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
type="search"
value=""
/>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-primary ant-btn-variant-solid ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</button>
<span>
Addon After
<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>
</button>
<span>
Addon After
</span>
</span>
</div>
`;
exports[`Input.Search should support addonAfter and suffix for loading 1`] = `
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-root ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-root"
>
<span
class="ant-input-wrapper ant-input-group"
class="ant-input-affix-wrapper ant-input-outlined css-var-root ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
>
<input
class="ant-input"
type="search"
value=""
/>
<span
class="ant-input-affix-wrapper ant-input-outlined"
class="ant-input-suffix"
>
<input
class="ant-input"
type="search"
value=""
/>
<span
class="ant-input-suffix"
>
suffix
</span>
</span>
<span
class="ant-input-group-addon"
>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-loading ant-input-search-button"
type="button"
>
<span
class="ant-btn-icon ant-btn-loading-icon"
>
<span
aria-label="loading"
class="anticon anticon-loading anticon-spin"
role="img"
>
<svg
aria-hidden="true"
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
suffix
</span>
</span>
</span>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-loading ant-btn-compact-item ant-input-search-btn"
type="button"
>
<span
class="ant-btn-icon ant-btn-loading-icon"
>
<span
aria-label="loading"
class="anticon anticon-loading anticon-spin"
role="img"
>
<svg
aria-hidden="true"
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
</div>
`;
exports[`Input.Search should support addonAfter and suffix for loading 2`] = `
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search ant-input-search-with-button css-var-root ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-root ant-input-search-with-button"
>
<span
class="ant-input-wrapper ant-input-group"
class="ant-input-affix-wrapper ant-input-outlined css-var-root ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
>
<input
class="ant-input"
type="search"
value=""
/>
<span
class="ant-input-affix-wrapper ant-input-outlined"
class="ant-input-suffix"
>
<input
class="ant-input"
type="search"
value=""
/>
<span
class="ant-input-suffix"
>
suffix
</span>
</span>
<span
class="ant-input-group-addon"
>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-primary ant-btn-variant-solid ant-btn-loading ant-input-search-button"
type="button"
>
<span
class="ant-btn-icon ant-btn-loading-icon"
>
<span
aria-label="loading"
class="anticon anticon-loading anticon-spin"
role="img"
>
<svg
aria-hidden="true"
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
suffix
</span>
</span>
</span>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-primary ant-btn-variant-solid ant-btn-loading ant-btn-compact-item ant-input-search-btn"
type="button"
>
<span
class="ant-btn-icon ant-btn-loading-icon"
>
<span
aria-label="loading"
class="anticon anticon-loading anticon-spin"
role="img"
>
<svg
aria-hidden="true"
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
</div>
`;
exports[`Input.Search should support custom Button 1`] = `
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search ant-input-search-with-button css-var-root ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-root ant-input-search-with-button"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-root ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
type="search"
value=""
/>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-input-search-button"
type="button"
>
<span>
ok
</span>
</button>
<span>
ok
</span>
</span>
</span>
</button>
</div>
`;
exports[`Input.Search should support custom button 1`] = `
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search ant-input-search-with-button css-var-root ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-root ant-input-search-with-button"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-root ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
type="search"
value=""
/>
<button
type="button"
>
<input
class="ant-input ant-input-outlined"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
>
<button
type="button"
>
ok
</button>
</span>
</span>
</span>
ok
</button>
</div>
`;
exports[`Input.Search should support invalid addonAfter 1`] = `
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search ant-input-search-with-button css-var-root ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-root ant-input-search-with-button"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-root ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
type="search"
value=""
/>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-primary ant-btn-variant-solid ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
`;
exports[`Input.Search should support invalid suffix 1`] = `
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-root ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-root"
>
<span
class="ant-input-wrapper ant-input-group"
class="ant-input-affix-wrapper ant-input-outlined css-var-root ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
>
<input
class="ant-input"
type="search"
value=""
/>
<span
class="ant-input-suffix"
/>
</span>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<span
class="ant-input-affix-wrapper ant-input-outlined"
class="ant-btn-icon"
>
<input
class="ant-input"
type="search"
value=""
/>
<span
class="ant-input-suffix"
/>
</span>
<span
class="ant-input-group-addon"
>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
`;
exports[`Input.Search should support loading 1`] = `
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-root ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-root"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-root ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
type="search"
value=""
/>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-loading ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon ant-btn-loading-icon"
>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-loading ant-input-search-button"
type="button"
<span
aria-label="loading"
class="anticon anticon-loading anticon-spin"
role="img"
>
<span
class="ant-btn-icon ant-btn-loading-icon"
<svg
aria-hidden="true"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<span
aria-label="loading"
class="anticon anticon-loading anticon-spin"
role="img"
>
<svg
aria-hidden="true"
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>
<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>
</button>
</div>
`;
exports[`Input.Search should support loading 2`] = `
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search ant-input-search-with-button css-var-root ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-root ant-input-search-with-button"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-root ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
type="search"
value=""
/>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-primary ant-btn-variant-solid ant-btn-loading ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon ant-btn-loading-icon"
>
<button
class="ant-btn css-var-root ant-btn-default ant-btn-color-primary ant-btn-variant-solid ant-btn-loading ant-input-search-button"
type="button"
<span
aria-label="loading"
class="anticon anticon-loading anticon-spin"
role="img"
>
<span
class="ant-btn-icon ant-btn-loading-icon"
<svg
aria-hidden="true"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<span
aria-label="loading"
class="anticon anticon-loading anticon-spin"
role="img"
>
<svg
aria-hidden="true"
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>
<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>
</button>
</div>
`;

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

6
components/input/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -446,11 +446,7 @@ exports[`Input rtl render component should be rendered correctly in RTL directio
/>
`;
exports[`Input rtl render component should be rendered correctly in RTL direction 2`] = `
<span
class="ant-input-group css-var-root ant-input-group-rtl"
/>
`;
exports[`Input rtl render component should be rendered correctly in RTL direction 2`] = `null`;
exports[`Input should support maxLength 1`] = `
<input

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

@@ -204,10 +204,6 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
'&:hover': {
zIndex: 1,
borderInlineEndWidth: 1,
[`${componentCls}-search-with-button &`]: {
zIndex: 0,
},
},
},
@@ -250,13 +246,9 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
'&:not(:last-child)': {
borderStartEndRadius: 0,
borderEndEndRadius: 0,
[`${componentCls}-search &`]: {
borderStartStartRadius: token.borderRadius,
borderEndStartRadius: token.borderRadius,
},
},
[`&:not(:first-child), ${componentCls}-search &:not(:first-child)`]: {
[`&:not(:first-child)`]: {
borderStartStartRadius: 0,
borderEndStartRadius: 0,
},
@@ -348,22 +340,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
[`${componentCls}-group-wrapper + ${componentCls}-group-wrapper`]: {
marginInlineStart: token.calc(token.lineWidth).mul(-1).equal(),
[`${componentCls}-affix-wrapper`]: {
borderRadius: 0,
},
},
[`${componentCls}-group-wrapper:not(:last-child)`]: {
[`&${componentCls}-search > ${componentCls}-group`]: {
[`& > ${componentCls}-group-addon > ${componentCls}-search-button`]: {
borderRadius: 0,
},
[`& > ${componentCls}`]: {
borderStartStartRadius: token.borderRadius,
borderStartEndRadius: 0,
borderEndEndRadius: 0,
borderEndStartRadius: token.borderRadius,
},
// borderRadius: 0,
},
},
},
@@ -468,13 +445,6 @@ export const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
...genBasicInputStyle(token),
display: 'inline-flex',
[`&:not(${componentCls}-disabled):hover`]: {
zIndex: 1,
[`${componentCls}-search-with-button &`]: {
zIndex: 0,
},
},
'&-focused, &:focus': {
zIndex: 1,
},
@@ -659,120 +629,6 @@ const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
};
};
const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
const { componentCls, antCls } = token;
const searchPrefixCls = `${componentCls}-search`;
return {
[searchPrefixCls]: {
[componentCls]: {
'&:not([disabled]):hover, &:not([disabled]):focus': {
[`+ ${componentCls}-group-addon ${searchPrefixCls}-button:not(${antCls}-btn-color-primary):not(${antCls}-btn-variant-text)`]:
{
borderInlineStartColor: token.colorPrimaryHover,
},
},
},
[`${componentCls}-affix-wrapper`]: {
height: token.controlHeight,
borderRadius: 0,
},
// fix slight height diff in Firefox:
// https://ant.design/components/auto-complete-cn/#auto-complete-demo-certain-category
[`${componentCls}-lg`]: {
lineHeight: token.calc(token.lineHeightLG).sub(0.0002).equal(),
},
[`> ${componentCls}-group`]: {
[`> ${componentCls}-group-addon:last-child`]: {
insetInlineStart: -1,
padding: 0,
border: 0,
[`${searchPrefixCls}-button`]: {
// Fix https://github.com/ant-design/ant-design/issues/47150
marginInlineEnd: -1,
borderStartStartRadius: 0,
borderEndStartRadius: 0,
boxShadow: 'none',
},
[`${searchPrefixCls}-button:not(${antCls}-btn-color-primary)`]: {
color: token.colorTextDescription,
'&:not([disabled]):hover': {
color: token.colorPrimaryHover,
},
'&:active': {
color: token.colorPrimaryActive,
},
[`&${antCls}-btn-loading::before`]: {
inset: 0,
},
},
},
},
[`${searchPrefixCls}-button`]: {
height: token.controlHeight,
'&:hover, &:focus': {
zIndex: 1,
},
},
'&-large': {
[`${componentCls}-affix-wrapper, ${searchPrefixCls}-button`]: {
height: token.controlHeightLG,
},
},
'&-small': {
[`${componentCls}-affix-wrapper, ${searchPrefixCls}-button`]: {
height: token.controlHeightSM,
},
},
'&-rtl': {
direction: 'rtl',
},
// ===================== Compact Item Customized Styles =====================
[`&${componentCls}-compact-item`]: {
[`&:not(${componentCls}-compact-last-item)`]: {
[`${componentCls}-group-addon`]: {
[`${componentCls}-search-button`]: {
marginInlineEnd: token.calc(token.lineWidth).mul(-1).equal(),
borderRadius: 0,
},
},
},
[`&:not(${componentCls}-compact-first-item)`]: {
[`${componentCls},${componentCls}-affix-wrapper`]: {
borderRadius: 0,
},
},
[`> ${componentCls}-group-addon ${componentCls}-search-button,
> ${componentCls},
${componentCls}-affix-wrapper`]: {
'&:hover, &:focus, &:active': {
zIndex: 2,
},
},
[`> ${componentCls}-affix-wrapper-focused`]: {
zIndex: 2,
},
},
},
};
};
// ============================== Range ===============================
const genRangeStyle: GenerateStyle<InputToken> = (token) => {
const { componentCls } = token;
@@ -807,7 +663,6 @@ export default genStyleHooks(
return [
genGroupStyle(inputToken),
genSearchInputStyle(inputToken),
genRangeStyle(inputToken),
// =====================================================
// == Space Compact ==

35
components/input/style/search.ts Normal file
View File

@@ -0,0 +1,35 @@
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genStyleHooks } from '../../theme/internal';
const genSearchStyle: GenerateStyle<FullToken<'Input'>> = (token) => {
const { componentCls } = token;
const btnCls = `${componentCls}-btn`;
return {
[componentCls]: {
width: '100%',
// =========================== Button ===========================
[btnCls]: {
'&-filled': {
background: token.colorFillTertiary,
'&:not(:disabled)': {
'&:hover': {
background: token.colorFillSecondary,
},
'&:active': {
background: token.colorFill,
},
},
},
},
},
};
};
export default genStyleHooks(['Input', 'Search'], (token) => {
return [genSearchStyle(token)];
});

484
components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@@ -851,178 +851,154 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
<div
class="ant-space-compact ant-space-compact-block"
>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
<div
class="ant-space-compact ant-input-search css-var-test-id"
style="width: 30%;"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
type="search"
value="0571"
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
type="search"
value="0571"
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-test-id ant-input-css-var ant-input-compact-item"
</button>
</div>
<div
class="ant-space-compact ant-input-search css-var-test-id"
style="width: 50%;"
>
<span
class="ant-input-wrapper ant-input-group"
>
<span
class="ant-input-affix-wrapper ant-input-outlined"
>
<input
class="ant-input"
type="search"
value="26888888"
/>
<span
class="ant-input-suffix"
>
<button
class="ant-input-clear-icon"
tabindex="-1"
type="button"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
/>
</svg>
</span>
</button>
</span>
</span>
<span
class="ant-input-group-addon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
>
<span
class="ant-btn-icon"
>
<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>
</button>
</span>
</span>
</span>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-last-item"
style="width: 20%;"
>
<span
class="ant-input-wrapper ant-input-group"
class="ant-input-affix-wrapper ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item"
>
<input
class="ant-input ant-input-outlined"
class="ant-input"
type="search"
value="+1"
value="26888888"
/>
<span
class="ant-input-group-addon"
class="ant-input-suffix"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
class="ant-input-clear-icon"
tabindex="-1"
type="button"
>
<span
class="ant-btn-icon"
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<span
aria-label="search"
class="anticon anticon-search"
role="img"
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
<path
d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
/>
</svg>
</span>
</button>
</span>
</span>
</span>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-input-search-btn"
type="button"
>
<span
class="ant-btn-icon"
>
<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>
</button>
</div>
<div
class="ant-space-compact ant-input-search css-var-test-id"
style="width: 20%;"
>
<input
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item"
type="search"
value="+1"
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<span
class="ant-btn-icon"
>
<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>
</button>
</div>
</div>
</div>
<div
@@ -9238,11 +9214,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
</div>
`;
exports[`renders components/space/demo/compact.tsx extend context correctly 2`] = `
[
"Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.",
]
`;
exports[`renders components/space/demo/compact.tsx extend context correctly 2`] = `[]`;
exports[`renders components/space/demo/compact-button-vertical.tsx extend context correctly 1`] = `
<div
@@ -10781,96 +10753,80 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
<div
class="ant-space-compact"
>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
<div
class="ant-space-compact ant-input-search css-var-test-id"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-test-id ant-input-css-var ant-input-compact-item"
</button>
</div>
<div
class="ant-space-compact ant-input-search css-var-test-id"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item"
type="button"
@@ -14335,53 +14291,45 @@ Array [
<div
class="ant-space-compact"
>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-test-id ant-input-css-var ant-input-compact-item"
<div
class="ant-space-compact ant-input-search css-var-test-id"
style="width: 110px;"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item"
placeholder="Search"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
placeholder="Search"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
<button
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
type="button"
@@ -16158,11 +16106,7 @@ Array [
]
`;
exports[`renders components/space/demo/compact-nested.tsx extend context correctly 2`] = `
[
"Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.",
]
`;
exports[`renders components/space/demo/compact-nested.tsx extend context correctly 2`] = `[]`;
exports[`renders components/space/demo/debug.tsx extend context correctly 1`] = `
<div

472
components/space/__tests__/__snapshots__/demo.test.tsx.snap
View File

@@ -573,178 +573,154 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
<div
class="ant-space-compact ant-space-compact-block"
>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
<div
class="ant-space-compact ant-input-search css-var-test-id"
style="width:30%"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
type="search"
value="0571"
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
type="search"
value="0571"
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-test-id ant-input-css-var ant-input-compact-item"
</button>
</div>
<div
class="ant-space-compact ant-input-search css-var-test-id"
style="width:50%"
>
<span
class="ant-input-wrapper ant-input-group"
>
<span
class="ant-input-affix-wrapper ant-input-outlined"
>
<input
class="ant-input"
type="search"
value="26888888"
/>
<span
class="ant-input-suffix"
>
<button
class="ant-input-clear-icon"
tabindex="-1"
type="button"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
/>
</svg>
</span>
</button>
</span>
</span>
<span
class="ant-input-group-addon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
>
<span
class="ant-btn-icon"
>
<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>
</button>
</span>
</span>
</span>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-last-item"
style="width:20%"
>
<span
class="ant-input-wrapper ant-input-group"
class="ant-input-affix-wrapper ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item"
>
<input
class="ant-input ant-input-outlined"
class="ant-input"
type="search"
value="+1"
value="26888888"
/>
<span
class="ant-input-group-addon"
class="ant-input-suffix"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
class="ant-input-clear-icon"
tabindex="-1"
type="button"
>
<span
class="ant-btn-icon"
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<span
aria-label="search"
class="anticon anticon-search"
role="img"
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
<path
d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
/>
</svg>
</span>
</button>
</span>
</span>
</span>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-input-search-btn"
type="button"
>
<span
class="ant-btn-icon"
>
<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>
</button>
</div>
<div
class="ant-space-compact ant-input-search css-var-test-id"
style="width:20%"
>
<input
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item"
type="search"
value="+1"
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<span
class="ant-btn-icon"
>
<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>
</button>
</div>
</div>
</div>
<div
@@ -2783,96 +2759,80 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
<div
class="ant-space-compact"
>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
<div
class="ant-space-compact ant-input-search css-var-test-id"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-test-id ant-input-css-var ant-input-compact-item"
</button>
</div>
<div
class="ant-space-compact ant-input-search css-var-test-id"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item"
type="button"
@@ -3973,53 +3933,45 @@ Array [
<div
class="ant-space-compact"
>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-test-id ant-input-css-var ant-input-compact-item"
<div
class="ant-space-compact ant-input-search css-var-test-id"
style="width:110px"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item"
placeholder="Search"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
placeholder="Search"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
<button
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
type="button"

32
components/space/__tests__/space-compact.test.tsx
View File

@@ -53,17 +53,17 @@ describe('Space.Compact', () => {
it('compact-item className', () => {
const { container } = render(
<Space.Compact>
<Input defaultValue="https://ant.design" />
<Input.Search />
<Button type="primary">Submit</Button>
<Input className="test-input" />
<Input.Search className="test-input-search" />
<Button className="test-button">Submit</Button>
</Space.Compact>,
);
expect(container.querySelector('.ant-input')).toHaveClass('ant-input-compact-item');
expect(container.querySelector('.ant-input-search')).toHaveClass('ant-input-compact-item');
expect(container.querySelector('.ant-input')).toHaveClass('ant-input-compact-first-item');
expect(container.querySelector('.ant-btn-compact-item')).toHaveClass(
'ant-btn-compact-last-item',
expect(container.querySelector('.test-input')).toHaveClass('ant-input-compact-first-item');
expect(container.querySelector('.test-input-search')).toHaveClass('ant-space-compact');
expect(container.querySelector('.test-input-search input')).toHaveClass(
'ant-input-compact-item',
);
expect(container.querySelector('.test-button')).toHaveClass('ant-btn-compact-last-item');
});
[
@@ -97,12 +97,6 @@ describe('Space.Compact', () => {
targetCls: 'ant-input',
expectClsPrefix: 'ant-input',
},
{
name: 'Input.Search',
component: Input.Search,
targetCls: 'ant-input-search',
expectClsPrefix: 'ant-input',
},
{
name: 'Select',
component: Select,
@@ -135,6 +129,16 @@ describe('Space.Compact', () => {
});
});
it('compact-item for Input.Search', () => {
const { container } = render(
<Space.Compact>
<Input.Search />
</Space.Compact>,
);
expect(container.querySelector('.ant-input-search')).toBeTruthy();
expect(container.querySelector(`.ant-input-search`)).toHaveClass('ant-space-compact');
});
it('size', () => {
const { container } = render(
<Space.Compact size="small">

76
components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@@ -4484,53 +4484,45 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
exports[`renders components/tree/demo/search.tsx extend context correctly 1`] = `
<div>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-test-id ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-test-id"
style="margin-bottom: 8px;"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
placeholder="Search"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
placeholder="Search"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
<div
class="ant-tree ant-tree-icon-hide css-var-test-id"
>
@@ -4703,11 +4695,7 @@ exports[`renders components/tree/demo/search.tsx extend context correctly 1`] =
</div>
`;
exports[`renders components/tree/demo/search.tsx extend context correctly 2`] = `
[
"Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.",
]
`;
exports[`renders components/tree/demo/search.tsx extend context correctly 2`] = `[]`;
exports[`renders components/tree/demo/style-class.tsx extend context correctly 1`] = `
<div

70
components/tree/__tests__/__snapshots__/demo.test.ts.snap
View File

@@ -4371,53 +4371,45 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
exports[`renders components/tree/demo/search.tsx correctly 1`] = `
<div>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-search css-var-test-id ant-input-css-var"
<div
class="ant-space-compact ant-input-search css-var-test-id"
style="margin-bottom:8px"
>
<span
class="ant-input-wrapper ant-input-group"
<input
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-input-compact-item ant-input-compact-first-item"
placeholder="Search"
type="search"
value=""
/>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-input-search-btn"
type="button"
>
<input
class="ant-input ant-input-outlined"
placeholder="Search"
type="search"
value=""
/>
<span
class="ant-input-group-addon"
class="ant-btn-icon"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
type="button"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<span
class="ant-btn-icon"
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<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>
</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>
</span>
</span>
</span>
</button>
</div>
<div
class="ant-tree ant-tree-icon-hide css-var-test-id"
>