feat: inputNumber controls support customize upIcon/downIcon (#33914)

* feat: inputNumber controls support customize upIcon/downIcon

* feat: 修改代码格式问题

* feat: 更新snapshot,修改代码开启prettier

* feat: 更新snapshot,order 属性修改

* feat: upIcon/downIcon写法调整

* feat: 更新snapshot

components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1008,6 +1008,90 @@ exports[`renders ./components/input-number/demo/borderless.md extend context cor
 </div>
 `;
 
+exports[`renders ./components/input-number/demo/controls.md extend context correctly 1`] = `
+<div
+  class="ant-input-number"
+>
+  <div
+    class="ant-input-number-handler-wrap"
+  >
+    <span
+      aria-disabled="false"
+      aria-label="Increase Value"
+      class="ant-input-number-handler ant-input-number-handler-up"
+      role="button"
+      unselectable="on"
+    >
+      <span
+        class="ant-input-number-handler-up-inner"
+      >
+        <span
+          aria-label="arrow-up"
+          class="anticon anticon-arrow-up"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="arrow-up"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"
+            />
+          </svg>
+        </span>
+      </span>
+    </span>
+    <span
+      aria-disabled="false"
+      aria-label="Decrease Value"
+      class="ant-input-number-handler ant-input-number-handler-down"
+      role="button"
+      unselectable="on"
+    >
+      <span
+        class="ant-input-number-handler-down-inner"
+      >
+        <span
+          aria-label="arrow-down"
+          class="anticon anticon-arrow-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="arrow-down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0048.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2z"
+            />
+          </svg>
+        </span>
+      </span>
+    </span>
+  </div>
+  <div
+    class="ant-input-number-input-wrap"
+  >
+    <input
+      autocomplete="off"
+      class="ant-input-number-input"
+      role="spinbutton"
+      step="1"
+      value=""
+    />
+  </div>
+</div>
+`;
+
 exports[`renders ./components/input-number/demo/digit.md extend context correctly 1`] = `
 <div
   class="ant-input-number"

components/input-number/__tests__/__snapshots__/demo.test.js.snap

@@ -735,6 +735,90 @@ exports[`renders ./components/input-number/demo/borderless.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/input-number/demo/controls.md correctly 1`] = `
+<div
+  class="ant-input-number"
+>
+  <div
+    class="ant-input-number-handler-wrap"
+  >
+    <span
+      aria-disabled="false"
+      aria-label="Increase Value"
+      class="ant-input-number-handler ant-input-number-handler-up"
+      role="button"
+      unselectable="on"
+    >
+      <span
+        class="ant-input-number-handler-up-inner"
+      >
+        <span
+          aria-label="arrow-up"
+          class="anticon anticon-arrow-up"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="arrow-up"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"
+            />
+          </svg>
+        </span>
+      </span>
+    </span>
+    <span
+      aria-disabled="false"
+      aria-label="Decrease Value"
+      class="ant-input-number-handler ant-input-number-handler-down"
+      role="button"
+      unselectable="on"
+    >
+      <span
+        class="ant-input-number-handler-down-inner"
+      >
+        <span
+          aria-label="arrow-down"
+          class="anticon anticon-arrow-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="arrow-down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0048.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2z"
+            />
+          </svg>
+        </span>
+      </span>
+    </span>
+  </div>
+  <div
+    class="ant-input-number-input-wrap"
+  >
+    <input
+      autocomplete="off"
+      class="ant-input-number-input"
+      role="spinbutton"
+      step="1"
+      value=""
+    />
+  </div>
+</div>
+`;
+
 exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
 <div
   class="ant-input-number"

components/input-number/__tests__/__snapshots__/index.test.js.snap

@@ -1,5 +1,183 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`InputNumber renders correctly when controls has custom upIcon and downIcon 1`] = `
+<div
+  class="ant-input-number"
+>
+  <div
+    class="ant-input-number-handler-wrap"
+  >
+    <span
+      aria-disabled="false"
+      aria-label="Increase Value"
+      class="ant-input-number-handler ant-input-number-handler-up"
+      role="button"
+      unselectable="on"
+    >
+      <span
+        class="ant-input-number-handler-up-inner"
+      >
+        <span
+          aria-label="arrow-up"
+          class="anticon anticon-arrow-up"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="arrow-up"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"
+            />
+          </svg>
+        </span>
+      </span>
+    </span>
+    <span
+      aria-disabled="false"
+      aria-label="Decrease Value"
+      class="ant-input-number-handler ant-input-number-handler-down"
+      role="button"
+      unselectable="on"
+    >
+      <span
+        class="ant-input-number-handler-down-inner"
+      >
+        <span
+          aria-label="arrow-down"
+          class="anticon anticon-arrow-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="arrow-down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0048.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2z"
+            />
+          </svg>
+        </span>
+      </span>
+    </span>
+  </div>
+  <div
+    class="ant-input-number-input-wrap"
+  >
+    <input
+      autocomplete="off"
+      class="ant-input-number-input"
+      role="spinbutton"
+      step="1"
+      value=""
+    />
+  </div>
+</div>
+`;
+
+exports[`InputNumber renders correctly when controls is {} 1`] = `
+<div
+  class="ant-input-number"
+>
+  <div
+    class="ant-input-number-handler-wrap"
+  >
+    <span
+      aria-disabled="false"
+      aria-label="Increase Value"
+      class="ant-input-number-handler ant-input-number-handler-up"
+      role="button"
+      unselectable="on"
+    >
+      <span
+        aria-label="up"
+        class="anticon anticon-up ant-input-number-handler-up-inner"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="up"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
+    <span
+      aria-disabled="false"
+      aria-label="Decrease Value"
+      class="ant-input-number-handler ant-input-number-handler-down"
+      role="button"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down ant-input-number-handler-down-inner"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <div
+    class="ant-input-number-input-wrap"
+  >
+    <input
+      autocomplete="off"
+      class="ant-input-number-input"
+      role="spinbutton"
+      step="1"
+      value=""
+    />
+  </div>
+</div>
+`;
+
+exports[`InputNumber renders correctly when controls is boolean 1`] = `
+<div
+  class="ant-input-number"
+>
+  <div
+    class="ant-input-number-input-wrap"
+  >
+    <input
+      autocomplete="off"
+      class="ant-input-number-input"
+      role="spinbutton"
+      step="1"
+      value=""
+    />
+  </div>
+</div>
+`;
+
 exports[`InputNumber rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
   class="ant-input-number ant-input-number-rtl"

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
 import InputNumber from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
@@ -28,4 +29,41 @@ describe('InputNumber', () => {
     expect(onStep).toBeCalledTimes(2);
     expect(onStep).toHaveBeenLastCalledWith(1, { offset: 1, type: 'down' });
   });
+
+  it('renders correctly when controls is boolean', () => {
+    expect(mount(<InputNumber controls={false} />).render()).toMatchSnapshot();
+  });
+
+  it('renders correctly when controls is {}', () => {
+    expect(mount(<InputNumber controls={{}} />).render()).toMatchSnapshot();
+  });
+
+  it('renders correctly when controls has custom upIcon and downIcon', () => {
+    const wrapper = mount(
+      <InputNumber
+        controls={{
+          upIcon: <ArrowUpOutlined />,
+          downIcon: <ArrowDownOutlined />,
+        }}
+      />,
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  it('should support className', () => {
+    const wrapper = mount(
+      <InputNumber
+        controls={{
+          upIcon: <ArrowUpOutlined className="my-class-name" />,
+          downIcon: <ArrowDownOutlined className="my-class-name" />,
+        }}
+      />,
+    );
+    expect(wrapper.find('.anticon-arrow-up').getDOMNode().className.includes('my-class-name')).toBe(
+      true,
+    );
+    expect(
+      wrapper.find('.anticon-arrow-down').getDOMNode().className.includes('my-class-name'),
+    ).toBe(true);
+  });
 });

components/input-number/demo/controls.md

@@ -0,0 +1,26 @@
+---
+order: 99
+debug: true
+title:
+  zh-CN: 图标按钮
+  en-US: Icon
+---
+
+## zh-CN
+
+可以扩展 `controls` 属性用以设置自定义图标。
+
+## en-US
+
+When you need to use a custom `Icon`, you can set the `Icon` component as the property value of `upIcon` and `downIcon`.
+
+```jsx
+import { InputNumber } from 'antd';
+import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
+
+ReactDOM.render(
+  <InputNumber
+    controls={{ upIcon: <ArrowUpOutlined />, downIcon: <ArrowDownOutlined/> }}
+  />
+, mountNode);
+```

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

@@ -19,7 +19,7 @@ When a numeric value needs to be provided.
 | addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - |  |
 | autoFocus | If get focus when component mounted | boolean | false | - |
 | bordered | Whether has border style | boolean | true | 4.12.0 |
-| controls | Whether to show `+-` controls | boolean | true | 4.17.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 | - | - |
 | defaultValue | The initial value | number | - | - |
 | disabled | If disable the input | boolean | false | - |

components/input-number/index.tsx

@@ -11,13 +11,14 @@ import { cloneElement } from '../_util/reactNode';
 type ValueType = string | number;
 
 export interface InputNumberProps<T extends ValueType = ValueType>
-  extends Omit<RcInputNumberProps<T>, 'prefix' | 'size'> {
+  extends Omit<RcInputNumberProps<T>, 'prefix' | 'size' | 'controls'> {
   prefixCls?: string;
   addonBefore?: React.ReactNode;
   addonAfter?: React.ReactNode;
   prefix?: React.ReactNode;
   size?: SizeType;
   bordered?: boolean;
+  controls?: boolean | { upIcon?: React.ReactNode; downIcon?: React.ReactNode };
 }
 
 const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
@@ -37,12 +38,29 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
     prefix,
     bordered = true,
     readOnly,
+    controls,
     ...others
   } = props;
 
   const prefixCls = getPrefixCls('input-number', customizePrefixCls);
-  const upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />;
+  let upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />;
-  const downIcon = <DownOutlined className={`${prefixCls}-handler-down-inner`} />;
+  let downIcon = <DownOutlined className={`${prefixCls}-handler-down-inner`} />;
+  const controlsTemp = typeof controls === 'boolean' ? controls : undefined;
+
+  if (typeof controls === 'object') {
+    upIcon =
+      typeof controls.upIcon === 'undefined' ? (
+        upIcon
+      ) : (
+        <span className={`${prefixCls}-handler-up-inner`}>{controls.upIcon}</span>
+      );
+    downIcon =
+      typeof controls.downIcon === 'undefined' ? (
+        downIcon
+      ) : (
+        <span className={`${prefixCls}-handler-down-inner`}>{controls.downIcon}</span>
+      );
+  }
 
   const mergeSize = customizeSize || size;
   const inputNumberClass = classNames(
@@ -64,6 +82,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
       downHandler={downIcon}
       prefixCls={prefixCls}
       readOnly={readOnly}
+      controls={controlsTemp}
       {...others}
     />
   );

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

@@ -22,7 +22,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
 | addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
 | autoFocus | 自动获取焦点 | boolean | false | - |
 | bordered | 是否有边框 | boolean | true | 4.12.0 |
-| controls | 是否显示增减按钮 | boolean | true | 4.17.0 |
+| controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
 | decimalSeparator | 小数点 | string | - | - |
 | defaultValue | 初始值 | number | - | - |
 | disabled | 禁用 | boolean | false | - |