feat(InputNumber): support classNames props (#46842)

* fix(InputNumber): lose style when pass classNames props #46841

fix: some classNames item were not take effect

docs: update docs

style: update

chore: update

test: update case

docs: update version

* docs: update Semantic DOM

* docs: update components/input-number/index.zh-CN.md

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: 云泥 <1656081615@qq.com>

* docs: format

* test: add case

---------

Signed-off-by: 云泥 <1656081615@qq.com>
Co-authored-by: lijianan <574980606@qq.com>

components/input-number/__tests__/index.test.tsx

@@ -1,5 +1,6 @@
-import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
 import React from 'react';
+import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
+
 import InputNumber from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
@@ -71,6 +72,23 @@ describe('InputNumber', () => {
     ).toBe(true);
   });
 
+  it('should support classNames', () => {
+    const { container } = render(
+      <InputNumber
+        prefix="$"
+        suffix="%"
+        classNames={{
+          input: 'my-class-name-input',
+          prefix: 'my-class-name-prefix',
+          suffix: 'my-class-name-suffix',
+        }}
+      />,
+    );
+    expect(container.querySelector('.ant-input-number')).toHaveClass('my-class-name-input');
+    expect(container.querySelector('.ant-input-number-prefix')).toHaveClass('my-class-name-prefix');
+    expect(container.querySelector('.ant-input-number-suffix')).toHaveClass('my-class-name-suffix');
+  });
+
   it('renders correctly when the controlled mode number is out of range', () => {
     const App: React.FC = () => {
       const [value, setValue] = React.useState<number | null>(1);

components/input-number/index.en-US.md

@@ -42,6 +42,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | 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 | - |  |
 | autoFocus | If get focus when component mounted | boolean | false | - |
+| classNames | Semantic DOM class | Record<[SemanticDOM](#inputnumber), string> | - | 5.13.0 |
 | changeOnBlur | Trigger `onChange` when blur. e.g. reset value in range by blur | boolean | true | 5.11.0 |
 | controls | Whether to show `+-` controls, or set custom arrows icon | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
 | decimalSeparator | Decimal separator | string | - | - |
@@ -66,6 +67,16 @@ Common props ref：[Common props](/docs/react/common-props)
 | onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | - |
 | onStep | The callback function that is triggered when click up or down buttons | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
 
+### Semantic DOM
+
+#### InputNumber
+
+| Property | Description                | Version |
+| -------- | -------------------------- | ------- |
+| input    | Wrapper of `input` element | 5.13.0  |
+| prefix   | Wrapper of prefix          | 5.13.0  |
+| suffix   | Wrapper of suffix          | 5.13.0  |
+
 ## Methods
 
 | Name    | Description  |

components/input-number/index.tsx

@@ -54,6 +54,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
   const {
     className,
     rootClassName,
+    classNames: classes,
     size: customizeSize,
     disabled: customDisabled,
     prefixCls: customizePrefixCls,
@@ -155,12 +156,12 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
         )
       }
       classNames={{
-        input: inputNumberClass,
+        ...classes,
+        input: classNames(inputNumberClass, classes?.input),
         variant: classNames(
           {
             [`${prefixCls}-${variant}`]: enableVariantCls,
           },
-
           getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
         ),
         affixWrapper: classNames(

components/input-number/index.zh-CN.md

@@ -43,6 +43,7 @@ demo:
 | addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
 | addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
 | autoFocus | 自动获取焦点 | boolean | false | - |
+| classNames | 语义化结构 class | Record<[SemanticDOM](#inputnumber), string> | - | 5.13.0 |
 | changeOnBlur | 是否在失去焦点时，触发 `onChange` 事件（例如值超出范围时，重新限制回范围并触发事件） | boolean | true | 5.11.0 |
 | controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
 | decimalSeparator | 小数点 | string | - | - |
@@ -67,6 +68,16 @@ demo:
 | onPressEnter | 按下回车的回调 | function(e) | - | - |
 | onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
 
+### Semantic DOM
+
+#### InputNumber
+
+| 名称   | 说明                 | 版本   |
+| ------ | -------------------- | ------ |
+| input  | `input` 元素包裹元素 | 5.13.0 |
+| prefix | 所有前缀的包裹元素   | 5.13.0 |
+| suffix | 所有后缀的包裹元素   | 5.13.0 |
+
 ## 方法
 
 | 名称    | 描述     |

scripts/__snapshots__/check-site.ts.snap

@@ -120,9 +120,9 @@ exports[`site test Component components/input en Page 1`] = `8`;
 
 exports[`site test Component components/input zh Page 1`] = `8`;
 
-exports[`site test Component components/input-number en Page 1`] = `2`;
+exports[`site test Component components/input-number en Page 1`] = `3`;
 
-exports[`site test Component components/input-number zh Page 1`] = `2`;
+exports[`site test Component components/input-number zh Page 1`] = `3`;
 
 exports[`site test Component components/layout en Page 1`] = `2`;