fix: Space.Compact when wrapping a single child component

ant-design · Nov 23, 2022 · 12f74c2 · 12f74c2
1 parent 6aa8002
commit 12f74c2
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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} />