feat: InputNumber support bordered prop (#29105)

* feat: InputNumber support bordered prop

* update style

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

@@ -79,6 +79,85 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/input-number/demo/borderless.md correctly 1`] = `
+<div
+  class="ant-input-number ant-input-number-borderless"
+>
+  <div
+    class="ant-input-number-handler-wrap"
+  >
+    <span
+      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-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
+      aria-valuemax="10"
+      aria-valuemin="1"
+      aria-valuenow="3"
+      autocomplete="off"
+      class="ant-input-number-input"
+      max="10"
+      min="1"
+      role="spinbutton"
+      step="1"
+      value="3"
+    />
+  </div>
+</div>
+`;
+
 exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
 <div
   class="ant-input-number"

components/input-number/demo/borderless.md

@@ -0,0 +1,20 @@
+---
+order: 6
+title:
+  zh-CN: 无边框
+  en-US: Borderless
+---
+
+## zh-CN
+
+没有边框。
+
+## en-US
+
+No border.
+
+```jsx
+import { InputNumber } from 'antd';
+
+ReactDOM.render(<InputNumber min={1} max={10} defaultValue={3} bordered={false} />, mountNode);
+```

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

@@ -16,6 +16,7 @@ When a numeric value needs to be provided.
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | autoFocus | If get focus when component mounted | boolean | false | - |
+| bordered | Whether has border style | boolean | true | 4.12.0 |
 | decimalSeparator | Decimal separator | string | - | - |
 | defaultValue | The initial value | number | - | - |
 | disabled | If disable the input | boolean | false | - |

components/input-number/index.tsx

@@ -24,6 +24,7 @@ export interface InputNumberProps
   disabled?: boolean;
   readOnly?: boolean;
   size?: SizeType;
+  bordered?: boolean;
   formatter?: (value: number | string | undefined) => string;
   parser?: (displayValue: string | undefined) => number | string;
   decimalSeparator?: string;
@@ -45,6 +46,7 @@ const InputNumber = React.forwardRef<unknown, InputNumberProps>((props, ref) =>
     className,
     size: customizeSize,
     prefixCls: customizePrefixCls,
+    bordered = true,
     readOnly,
     ...others
   } = props;
@@ -60,6 +62,7 @@ const InputNumber = React.forwardRef<unknown, InputNumberProps>((props, ref) =>
       [`${prefixCls}-sm`]: mergeSize === 'small',
       [`${prefixCls}-rtl`]: direction === 'rtl',
       [`${prefixCls}-readonly`]: readOnly,
+      [`${prefixCls}-borderless`]: !bordered,
     },
     className,
   );

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

@@ -19,6 +19,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
 | 成员 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | autoFocus | 自动获取焦点 | boolean | false | - |
+| bordered | 是否有边框 | boolean | true | 4.12.0 |
 | decimalSeparator | 小数点 | string | - | - |
 | defaultValue | 初始值 | number | - | - |
 | disabled | 禁用 | boolean | false | - |

components/input-number/style/index.less

@@ -139,6 +139,10 @@
         font-size: 7px;
       }
     }
+
+    .@{input-number-prefix-cls}-borderless & {
+      border-left-width: 0;
+    }
   }
 
   &-handler-wrap:hover &-handler {
@@ -175,6 +179,9 @@
     &:hover {
       height: 60% !important;
     }
+    .@{input-number-prefix-cls}-borderless & {
+      border-top-width: 0;
+    }
   }
 
   &-handler-up-disabled,
@@ -186,6 +193,10 @@
   &-handler-down-disabled:hover &-handler-down-inner {
     color: @disabled-color;
   }
+
+  &-borderless {
+    box-shadow: none;
+  }
 }
 
 @import './rtl';

components/input-number/style/rtl.less

@@ -17,6 +17,10 @@
       border-left: 0;
       border-radius: @border-radius-base 0 0 @border-radius-base;
     }
+
+    .@{input-number-prefix-cls}-rtl.@{input-number-prefix-cls}-borderless & {
+      border-right-width: 0;
+    }
   }
 
   &-input {