feat: support semantic classNames and styles for clear (#162)

Author: QDyanbing

src/BaseInput.tsx

@@ -96,10 +96,15 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
           // Do not trigger onBlur when clear input
           // https://github.com/ant-design/ant-design/issues/31200
           onMouseDown={(e) => e.preventDefault()}
-          className={clsx(clearIconCls, {
-            [`${clearIconCls}-hidden`]: !needClear,
-            [`${clearIconCls}-has-suffix`]: !!suffix,
-          })}
+          className={clsx(
+            clearIconCls,
+            {
+              [`${clearIconCls}-hidden`]: !needClear,
+              [`${clearIconCls}-has-suffix`]: !!suffix,
+            },
+            classNames?.clear,
+          )}
+          style={styles?.clear}
         >
           {iconNode}
         </button>

src/interface.ts

@@ -24,6 +24,7 @@ export interface CommonInputProps {
     affixWrapper?: string;
     prefix?: string;
     suffix?: string;
+    clear?: string;
     groupWrapper?: string;
     wrapper?: string;
     variant?: string;
@@ -32,6 +33,7 @@ export interface CommonInputProps {
     affixWrapper?: CSSProperties;
     prefix?: CSSProperties;
     suffix?: CSSProperties;
+    clear?: CSSProperties;
   };
   allowClear?: boolean | { disabled?: boolean; clearIcon?: ReactNode };
 }

tests/BaseInput.test.tsx

@@ -236,16 +236,20 @@ describe('BaseInput', () => {
         prefixCls="rc-input"
         prefix="prefix"
         addonBefore="addon"
+        allowClear
         styles={{
           affixWrapper: {
             color: 'red',
           },
           prefix: {
             color: 'blue',
           },
+          clear: {
+            color: 'green',
+          },
         }}
       >
-        <input />
+        <input defaultValue="test" />
       </BaseInput>,
     );
 
@@ -258,6 +262,11 @@ describe('BaseInput', () => {
       container.container.querySelector<HTMLSpanElement>('.rc-input-prefix')
         ?.style.color,
     ).toBe('blue');
+    expect(
+      container.container.querySelector('.rc-input-clear-icon'),
+    ).toHaveStyle({
+      color: 'green',
+    });
   });
 
   it('with addon and disabled', () => {

tests/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Input allowClear classNames and styles should work 1`] = `
 <div>
   <span
-    class="rc-input-affix-wrapper custom-class"
+    class="rc-input-affix-wrapper rc-input-affix-wrapper-input-with-clear-btn custom-class"
     style="background-color: red;"
   >
     <span
@@ -22,6 +22,14 @@ exports[`Input allowClear classNames and styles should work 1`] = `
       class="rc-input-suffix custom-suffix"
       style="color: yellow;"
     >
+      <button
+        class="rc-input-clear-icon rc-input-clear-icon-has-suffix custom-clear"
+        style="color: orange;"
+        tabindex="-1"
+        type="button"
+      >
+        ✖
+      </button>
       <span
         class="rc-input-show-count-suffix rc-input-show-count-has-suffix custom-count"
         style="color: green;"

tests/index.test.tsx

@@ -298,18 +298,21 @@ describe('Input allowClear', () => {
           prefixCls="rc-input"
           prefix="prefix"
           suffix="suffix"
+          allowClear
           className="custom-class"
           style={{ backgroundColor: 'red' }}
           classNames={{
             input: 'custom-input',
             prefix: 'custom-prefix',
             suffix: 'custom-suffix',
+            clear: 'custom-clear',
             count: 'custom-count',
           }}
           styles={{
             input: { color: 'red' },
             prefix: { color: 'blue' },
             suffix: { color: 'yellow' },
+            clear: { color: 'orange' },
             count: { color: 'green' },
           }}
         />
@@ -362,6 +365,12 @@ describe('Input allowClear', () => {
         />
       </>,
     );
+    expect(container.querySelector('.rc-input-clear-icon')).toHaveClass(
+      'custom-clear',
+    );
+    expect(container.querySelector('.rc-input-clear-icon')).toHaveStyle({
+      color: 'orange',
+    });
     expect(container).toMatchSnapshot();
   });
 });