fix: InputNumber addon in compact (#46130)

* fix: InputNumber addon in compact

* chore: code clean

components/input-number/style/index.ts

@@ -188,6 +188,29 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
             [`${componentCls}-wrapper-disabled > ${componentCls}-group-addon`]: {
               ...genDisabledStyle(token),
             },
+
+            // Fix the issue of using icons in Space Compact mode
+            // https://github.com/ant-design/ant-design/issues/45764
+            [`&:not(${componentCls}-compact-first-item):not(${componentCls}-compact-last-item)${componentCls}-compact-item`]:
+              {
+                [`${componentCls}, ${componentCls}-group-addon`]: {
+                  borderRadius: 0,
+                },
+              },
+
+            [`&:not(${componentCls}-compact-last-item)${componentCls}-compact-first-item`]: {
+              [`${componentCls}, ${componentCls}-group-addon`]: {
+                borderStartEndRadius: 0,
+                borderEndEndRadius: 0,
+              },
+            },
+
+            [`&:not(${componentCls}-compact-first-item)${componentCls}-compact-last-item`]: {
+              [`${componentCls}, ${componentCls}-group-addon`]: {
+                borderStartStartRadius: 0,
+                borderEndStartRadius: 0,
+              },
+            },
           },
         },
 

components/space/demo/compact.md

@@ -5,27 +5,3 @@
 ## en-US
 
 Compact Mode for form component.
-
-```css
-.site-space-compact-wrapper .site-input-split {
-  background-color: #fff;
-}
-
-.site-space-compact-wrapper .site-input-right:not(.ant-input-rtl) {
-  border-left-width: 0;
-}
-
-.site-space-compact-wrapper .site-input-right:not(.ant-input-rtl):hover,
-.site-space-compact-wrapper .site-input-right:not(.ant-input-rtl):focus {
-  border-left-width: 1px;
-}
-
-.site-space-compact-wrapper .site-input-right.ant-input-rtl {
-  border-right-width: 0;
-}
-
-.site-space-compact-wrapper .site-input-right.ant-input-rtl:hover,
-.site-space-compact-wrapper .site-input-right.ant-input-rtl:focus {
-  border-right-width: 1px;
-}
-```

components/space/demo/compact.tsx

@@ -18,22 +18,19 @@ const { Option } = Select;
 const { TreeNode } = TreeSelect;
 
 const App: React.FC = () => (
-  <div className="site-space-compact-wrapper">
+  <Space direction="vertical">
     <Space.Compact block>
       <Input style={{ width: '20%' }} defaultValue="0571" />
       <Input style={{ width: '30%' }} defaultValue="26888888" />
     </Space.Compact>
-    <br />
     <Space.Compact block size="small">
       <Input style={{ width: 'calc(100% - 200px)' }} defaultValue="https://ant.design" />
       <Button type="primary">Submit</Button>
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Input style={{ width: 'calc(100% - 200px)' }} defaultValue="https://ant.design" />
       <Button type="primary">Submit</Button>
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Input
         style={{ width: 'calc(100% - 200px)' }}
@@ -43,7 +40,6 @@ const App: React.FC = () => (
         <Button icon={<CopyOutlined />} />
       </Tooltip>
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Select defaultValue="Zhejiang" allowClear>
         <Option value="Zhejiang">Zhejiang</Option>
@@ -51,7 +47,6 @@ const App: React.FC = () => (
       </Select>
       <Input style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Select allowClear mode="multiple" defaultValue="Zhejianggggg" style={{ width: '50%' }}>
         <Option value="Zhejianggggg">Zhejianggggg</Option>
@@ -59,13 +54,11 @@ const App: React.FC = () => (
       </Select>
       <Input style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Input.Search style={{ width: '30%' }} defaultValue="0571" />
       <Input.Search allowClear style={{ width: '50%' }} defaultValue="26888888" />
       <Input.Search style={{ width: '20%' }} defaultValue="+1" />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Select defaultValue="Option1">
         <Option value="Option1">Option1</Option>
@@ -74,23 +67,19 @@ const App: React.FC = () => (
       <Input style={{ width: '50%' }} defaultValue="input content" />
       <InputNumber defaultValue={12} />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Input style={{ width: '50%' }} defaultValue="input content" />
       <DatePicker style={{ width: '50%' }} />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <DatePicker.RangePicker style={{ width: '70%' }} />
       <Input style={{ width: '30%' }} defaultValue="input content" />
       <Button type="primary">查询</Button>
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Input style={{ width: '30%' }} defaultValue="input content" />
       <DatePicker.RangePicker style={{ width: '70%' }} />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Select defaultValue="Option1-1">
         <Option value="Option1-1">Option1-1</Option>
@@ -101,7 +90,6 @@ const App: React.FC = () => (
         <Option value="Option2-2">Option2-2</Option>
       </Select>
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Select defaultValue="1">
         <Option value="1">Between</Option>
@@ -128,7 +116,6 @@ const App: React.FC = () => (
         placeholder="Maximum"
       />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <Select defaultValue="Sign Up" style={{ width: '30%' }}>
         <Option value="Sign Up">Sign Up</Option>
@@ -140,7 +127,6 @@ const App: React.FC = () => (
         options={[{ value: 'text 1' }, { value: 'text 2' }]}
       />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <TimePicker style={{ width: '70%' }} />
       <Cascader
@@ -182,7 +168,6 @@ const App: React.FC = () => (
         placeholder="Select Address"
       />
     </Space.Compact>
-    <br />
     <Space.Compact block>
       <TimePicker.RangePicker />
       <TreeSelect
@@ -207,8 +192,12 @@ const App: React.FC = () => (
       </TreeSelect>
       <Button type="primary">Submit</Button>
     </Space.Compact>
-    <br />
-  </div>
+    <Space.Compact>
+      <Input placeholder="input here" />
+      <InputNumber placeholder="another input" addonBefore="$" />
+      <InputNumber placeholder="another input" addonAfter="$" />
+    </Space.Compact>
+  </Space>
 );
 
 export default App;