Hotfix(Select) add select clear icon (#12196)

close #12181

components/cascader/__tests__/__snapshots__/demo.test.js.snap

@@ -103,19 +103,19 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
     value=""
   />
   <i
-    class="anticon anticon-close ant-cascader-picker-clear"
+    class="anticon anticon-close-circle ant-cascader-picker-clear"
   >
     <svg
       aria-hidden="true"
       class=""
-      data-icon="close"
+      data-icon="close-circle"
       fill="currentColor"
       height="1em"
       viewBox="64 64 896 896"
       width="1em"
     >
       <path
-        d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
       />
     </svg>
   </i>
@@ -169,19 +169,19 @@ exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
     value=""
   />
   <i
-    class="anticon anticon-close ant-cascader-picker-clear"
+    class="anticon anticon-close-circle ant-cascader-picker-clear"
   >
     <svg
       aria-hidden="true"
       class=""
-      data-icon="close"
+      data-icon="close-circle"
       fill="currentColor"
       height="1em"
       viewBox="64 64 896 896"
       width="1em"
     >
       <path
-        d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
       />
     </svg>
   </i>

components/cascader/__tests__/__snapshots__/index.test.js.snap

@@ -1183,19 +1183,19 @@ exports[`Cascader support controlled mode 1`] = `
     value=""
   />
   <i
-    class="anticon anticon-close ant-cascader-picker-clear"
+    class="anticon anticon-close-circle ant-cascader-picker-clear"
   >
     <svg
       aria-hidden="true"
       class=""
-      data-icon="close"
+      data-icon="close-circle"
       fill="currentColor"
       height="1em"
       viewBox="64 64 896 896"
       width="1em"
     >
       <path
-        d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
       />
     </svg>
   </i>

components/cascader/index.tsx

@@ -351,7 +351,8 @@ export default class Cascader extends React.Component<CascaderProps, CascaderSta
     });
     const clearIcon = (allowClear && !disabled && value.length > 0) || state.inputValue ? (
       <Icon
-        type="close"
+        type="close-circle"
+        theme="filled"
         className={`${prefixCls}-picker-clear`}
         onClick={this.clearSelection}
       />

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -1703,19 +1703,19 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
               value=""
             />
             <i
-              class="anticon anticon-close ant-cascader-picker-clear"
+              class="anticon anticon-close-circle ant-cascader-picker-clear"
             >
               <svg
                 aria-hidden="true"
                 class=""
-                data-icon="close"
+                data-icon="close-circle"
                 fill="currentColor"
                 height="1em"
                 viewBox="64 64 896 896"
                 width="1em"
               >
                 <path
-                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                 />
               </svg>
             </i>
@@ -4097,19 +4097,19 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
               value=""
             />
             <i
-              class="anticon anticon-close ant-cascader-picker-clear"
+              class="anticon anticon-close-circle ant-cascader-picker-clear"
             >
               <svg
                 aria-hidden="true"
                 class=""
-                data-icon="close"
+                data-icon="close-circle"
                 fill="currentColor"
                 height="1em"
                 viewBox="64 64 896 896"
                 width="1em"
               >
                 <path
-                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                 />
               </svg>
             </i>

components/select/index.tsx

@@ -182,6 +182,10 @@ export default class Select extends React.Component<SelectProps, {}> {
       <Icon type="close" className={`${prefixCls}-remove-icon`} />
     );
 
+    const clearIcon = (
+      <Icon type="close-circle" theme="filled" className={`${prefixCls}-clear-icon`} />
+    );
+
     const menuItemSelectedIcon = (
       <Icon type="check" className={`${prefixCls}-selected-icon`} />
     );
@@ -190,6 +194,7 @@ export default class Select extends React.Component<SelectProps, {}> {
       <RcSelect
         inputIcon={inputIcon}
         removeIcon={removeIcon}
+        clearIcon={clearIcon}
         menuItemSelectedIcon={menuItemSelectedIcon}
         {...restProps}
         {...modeConfig}