refactor: clearIcon in allowClear (#34340)

* refactor: Input allowClear api upadte

* test: add test

components/input/Input.tsx

@@ -129,7 +129,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     onBlur,
     onFocus,
     suffix,
-    clearIcon,
+    allowClear,
     ...rest
   } = props;
   const { getPrefixCls, direction, input } = React.useContext(ConfigContext);
@@ -199,6 +199,14 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
 
   const withPrefixSuffix = hasPrefixSuffix(props) || hasFeedback;
 
+  // Allow clear
+  let mergedAllowClear;
+  if (typeof allowClear === 'object' && allowClear?.clearIcon) {
+    mergedAllowClear = allowClear;
+  } else if (allowClear) {
+    mergedAllowClear = { clearIcon: <CloseCircleFilled /> };
+  }
+
   return (
     <RcInput
       ref={composeRef(ref, inputRef)}
@@ -208,7 +216,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       onBlur={handleBlur}
       onFocus={handleFocus}
       suffix={suffixNode}
-      clearIcon={clearIcon || <CloseCircleFilled />}
+      allowClear={mergedAllowClear}
       inputClassName={classNames(
         !withPrefixSuffix && {
           [`${prefixCls}-sm`]: mergedSize === 'small',

components/input/__tests__/index.test.js

@@ -380,4 +380,9 @@ describe('Input allowClear', () => {
     wrapper.setProps({ value: false });
     expect(wrapper.find('input').first().getDOMNode().value).toBe('false');
   });
+
+  it('should support custom clearIcon', () => {
+    const wrapper = mount(<Input allowClear={{ clearIcon: 'clear' }} />);
+    expect(wrapper.find('.ant-input-clear-icon').text()).toBe('clear');
+  });
 });

components/input/index.en-US.md

@@ -20,9 +20,8 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
 | --- | --- | --- | --- | --- |
 | addonAfter | The label text displayed after (on the right side of) the input field | ReactNode | - |  |
 | addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - |  |
-| allowClear | If allow to remove input content with clear icon | boolean | false |  |
+| allowClear | If allow to remove input content with clear icon | boolean \| { clearIcon: ReactNode } | false |  |
 | bordered | Whether has border style | boolean | true | 4.5.0 |
-| clearIcon | Icon displayed when `allowClear` is enabled | ReactNode | <CloseCircleFilled /> | 4.19.0 |
 | defaultValue | The initial input content | string | - |  |
 | disabled | Whether the input is disabled | boolean | false |  |
 | id | The ID for input | string | - |  |

components/input/index.zh-CN.md

@@ -21,9 +21,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
 | --- | --- | --- | --- | --- |
 | addonAfter | 带标签的 input，设置后置标签 | ReactNode | - |  |
 | addonBefore | 带标签的 input，设置前置标签 | ReactNode | - |  |
-| allowClear | 可以点击清除图标删除内容 | boolean | - |  |
+| allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - |  |
 | bordered | 是否有边框 | boolean | true | 4.5.0 |
-| clearIcon | 清除按钮，与 `allowClear` 一同使用 | ReactNode | <CloseCircleFilled /> | 4.19.0 |
 | defaultValue | 输入框默认内容 | string | - |  |
 | disabled | 是否禁用状态，默认为 false | boolean | false |  |
 | id | 输入框的 id | string | - |  |

package.json

@@ -129,7 +129,7 @@
     "rc-dropdown": "~3.3.2",
     "rc-field-form": "~1.23.0",
     "rc-image": "~5.2.5",
-    "rc-input": "^0.0.1-alpha.4",
+    "rc-input": "^0.0.1-alpha.5",
     "rc-input-number": "~7.3.0",
     "rc-mentions": "~1.6.1",
     "rc-menu": "~9.2.1",