fix(input): border-radius issue with addonAfter in compact mode (#52490)

* fix: border-radius issue with `addonAfter` in compact mode

* chore: add demo

* chore: update  snapshot

components/input/style/index.ts

@@ -642,6 +642,14 @@ const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
             borderEndEndRadius: 0,
           },
         },
+        // Fix the issue of input use `addonAfter` param in space compact mode
+        // https://github.com/ant-design/ant-design/issues/52483
+        [`&:not(${componentCls}-compact-first-item)${componentCls}-compact-item`]: {
+          [`${componentCls}-affix-wrapper`]: {
+            borderStartStartRadius: 0,
+            borderEndStartRadius: 0,
+          },
+        },
       },
     },
   };

components/space/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -9377,6 +9377,41 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
       </div>
     </div>
   </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-first-item"
+        type="button"
+      >
+        <span>
+          Button
+        </span>
+      </button>
+      <span
+        class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-compact-item ant-input-compact-last-item"
+      >
+        <span
+          class="ant-input-wrapper ant-input-group"
+        >
+          <input
+            class="ant-input ant-input-outlined"
+            placeholder="input here"
+            type="text"
+            value=""
+          />
+          <span
+            class="ant-input-group-addon"
+          >
+            $
+          </span>
+        </span>
+      </span>
+    </div>
+  </div>
 </div>
 `;
 

components/space/__tests__/__snapshots__/demo.test.tsx.snap

@@ -2037,6 +2037,41 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-space-compact"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-first-item"
+        type="button"
+      >
+        <span>
+          Button
+        </span>
+      </button>
+      <span
+        class="ant-input-group-wrapper ant-input-group-wrapper-outlined ant-input-compact-item ant-input-compact-last-item"
+      >
+        <span
+          class="ant-input-wrapper ant-input-group"
+        >
+          <input
+            class="ant-input ant-input-outlined"
+            placeholder="input here"
+            type="text"
+            value=""
+          />
+          <span
+            class="ant-input-group-addon"
+          >
+            $
+          </span>
+        </span>
+      </span>
+    </div>
+  </div>
 </div>
 `;
 

components/space/demo/compact.tsx

@@ -202,6 +202,10 @@ const App: React.FC = () => (
       <Input placeholder="input here" />
       <ColorPicker />
     </Space.Compact>
+    <Space.Compact>
+      <Button type="primary">Button</Button>
+      <Input placeholder="input here" addonAfter="$" />
+    </Space.Compact>
   </Space>
 );