From 12f74c273f52f41ba75e4b31a8e20452a8c77592 Mon Sep 17 00:00:00 2001
From: foryuki <foryuki@outlook.com>
Date: Wed, 23 Nov 2022 14:26:09 +0800
Subject: [PATCH] fix: Space.Compact when wrapping a single child component

---
 components/space/Compact.tsx                  |  4 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  8 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  8 +--
 .../__snapshots__/space-compact.test.tsx.snap |  2 +-
 components/space/demo/compact-debug.tsx       | 60 ++++++++++---------
 5 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/components/space/Compact.tsx b/components/space/Compact.tsx
index 0b1c7d9cc255..e9f1abb28e91 100644
--- a/components/space/Compact.tsx
+++ b/components/space/Compact.tsx
@@ -94,7 +94,9 @@ const Compact: React.FC<SpaceCompactProps> = (props) => {
     () =>
       childNodes.map((child, i) => {
         const key = (child && child.key) || `${prefixCls}-item-${i}`;
-
+        if (childNodes.length === 1) {
+          return child;
+        }
         return (
           <CompactItem
             key={key}
diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
index 3c3bb7c82743..fb5800188d59 100644
--- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -10441,7 +10441,7 @@ exports[`renders ./components/space/demo/compact-debug.tsx extend context correc
       class="ant-space-compact"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -10458,7 +10458,7 @@ exports[`renders ./components/space/demo/compact-debug.tsx extend context correc
       class="ant-space-compact"
     >
       <div
-        class="ant-space-compact ant-space-compact-block ant-dropdown-button ant-dropdown-compact-item ant-dropdown-compact-first-item ant-dropdown-compact-last-item"
+        class="ant-space-compact ant-space-compact-block ant-dropdown-button"
       >
         <button
           class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
@@ -10639,7 +10639,7 @@ exports[`renders ./components/space/demo/compact-debug.tsx extend context correc
       class="ant-space-compact"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -10666,7 +10666,7 @@ exports[`renders ./components/space/demo/compact-debug.tsx extend context correc
             +
           </div>
           <div
-            class="ant-input-number ant-input-number-compact-item ant-input-number-compact-first-item ant-input-number-compact-last-item"
+            class="ant-input-number"
           >
             <div
               class="ant-input-number-handler-wrap"
diff --git a/components/space/__tests__/__snapshots__/demo.test.ts.snap b/components/space/__tests__/__snapshots__/demo.test.ts.snap
index d75ecb7d9977..8fc8caad2e3c 100644
--- a/components/space/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo.test.ts.snap
@@ -2825,7 +2825,7 @@ exports[`renders ./components/space/demo/compact-debug.tsx correctly 1`] = `
       class="ant-space-compact"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -2842,7 +2842,7 @@ exports[`renders ./components/space/demo/compact-debug.tsx correctly 1`] = `
       class="ant-space-compact"
     >
       <div
-        class="ant-space-compact ant-space-compact-block ant-dropdown-button ant-dropdown-compact-item ant-dropdown-compact-first-item ant-dropdown-compact-last-item"
+        class="ant-space-compact ant-space-compact-block ant-dropdown-button"
       >
         <button
           class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
@@ -2887,7 +2887,7 @@ exports[`renders ./components/space/demo/compact-debug.tsx correctly 1`] = `
       class="ant-space-compact"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -2914,7 +2914,7 @@ exports[`renders ./components/space/demo/compact-debug.tsx correctly 1`] = `
             +
           </div>
           <div
-            class="ant-input-number ant-input-number-compact-item ant-input-number-compact-first-item ant-input-number-compact-last-item"
+            class="ant-input-number"
           >
             <div
               class="ant-input-number-handler-wrap"
diff --git a/components/space/__tests__/__snapshots__/space-compact.test.tsx.snap b/components/space/__tests__/__snapshots__/space-compact.test.tsx.snap
index ec4b83b304be..0c2cbff34052 100644
--- a/components/space/__tests__/__snapshots__/space-compact.test.tsx.snap
+++ b/components/space/__tests__/__snapshots__/space-compact.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Space.Compact rtl render component should be rendered correctly in RTL
   class="ant-space-compact ant-space-compact-rtl"
 >
   <button
-    class="ant-btn ant-btn-primary ant-btn-rtl ant-btn-compact-item ant-btn-compact-first-item ant-btn-compact-last-item ant-btn-compact-item-rtl"
+    class="ant-btn ant-btn-primary ant-btn-rtl"
     type="button"
   >
     <span>
diff --git a/components/space/demo/compact-debug.tsx b/components/space/demo/compact-debug.tsx
index f95403d0e9b2..4fe429e7dcb3 100644
--- a/components/space/demo/compact-debug.tsx
+++ b/components/space/demo/compact-debug.tsx
@@ -81,19 +81,21 @@ const App: React.FC = () => {
       <br />
       <Space.Compact>
         <Button onClick={() => setShowModal(true)}>debug Modal context</Button>
-        <Modal title="Basic Modal" open={showModal} onCancel={() => setShowModal(false)}>
-          <Button>normal button A</Button>
-          <Button>normal button B</Button>
-          <br />
-          <br />
-          <Input />
-          <br />
-          <br />
-          <Space.Compact>
-            <Button>compact button A</Button>
-            <Button>compact button B</Button>
-          </Space.Compact>
-        </Modal>
+        {showModal && (
+          <Modal title="Basic Modal" open={showModal} onCancel={() => setShowModal(false)}>
+            <Button>normal button A</Button>
+            <Button>normal button B</Button>
+            <br />
+            <br />
+            <Input />
+            <br />
+            <br />
+            <Space.Compact>
+              <Button>compact button A</Button>
+              <Button>compact button B</Button>
+            </Space.Compact>
+          </Modal>
+        )}
       </Space.Compact>
       <Space.Compact>
         <Dropdown.Button
@@ -115,21 +117,23 @@ const App: React.FC = () => {
       </Space.Compact>
       <Space.Compact>
         <Button onClick={() => setShowDrawer(true)}>debug Drawer context</Button>
-        <Drawer
-          title="Basic Drawer"
-          placement="right"
-          onClose={() => setShowDrawer(false)}
-          open={showDrawer}
-        >
-          <Button>normal button A</Button>
-          <Button>normal button B</Button>
-          <br />
-          <br />
-          <Space.Compact>
-            <Button>compact button A</Button>
-            <Button>compact button B</Button>
-          </Space.Compact>
-        </Drawer>
+        {showDrawer && (
+          <Drawer
+            title="Basic Drawer"
+            placement="right"
+            onClose={() => setShowDrawer(false)}
+            open={showDrawer}
+          >
+            <Button>normal button A</Button>
+            <Button>normal button B</Button>
+            <br />
+            <br />
+            <Space.Compact>
+              <Button>compact button A</Button>
+              <Button>compact button B</Button>
+            </Space.Compact>
+          </Drawer>
+        )}
       </Space.Compact>
       <Space.Compact>
         <InputNumber addonBefore="+" addonAfter="$" defaultValue={100} />