From 9721ebe33116bf83dcfe3a3c61b5453af4bc5f94 Mon Sep 17 00:00:00 2001
From: Yuki Zhang <foryuki@outlook.com>
Date: Wed, 19 Oct 2022 23:36:41 +0800
Subject: [PATCH] refactor: use Space.Compact for Dropdown.Button (#38090)

* feat: use Space.Compact for Dropdown.Button

* test: update button demo tests

* test: update config-provider demo tests

* fix: deps-lint-skip for dropdown

* fix: lint issue
---
 .../__snapshots__/demo-extend.test.ts.snap    |  6 +--
 .../__tests__/__snapshots__/demo.test.ts.snap |  6 +--
 .../__snapshots__/components.test.tsx.snap    | 42 +++++++--------
 .../__snapshots__/demo-extend.test.ts.snap    | 54 +++++++++----------
 .../__tests__/__snapshots__/demo.test.ts.snap | 54 +++++++++----------
 .../dropdown-button.test.tsx.snap             | 12 ++---
 components/dropdown/dropdown-button.tsx       | 13 +++--
 components/dropdown/style/index.tsx           |  1 +
 8 files changed, 96 insertions(+), 92 deletions(-)

diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
index 232331a29f..2e699a6043 100644
--- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1787,10 +1787,10 @@ Array [
     </span>
   </button>,
   <div
-    class="ant-btn-group ant-dropdown-button"
+    class="ant-space-compact ant-space-compact-block ant-dropdown-button"
   >
     <button
-      class="ant-btn ant-btn-default"
+      class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
       type="button"
     >
       <span>
@@ -1798,7 +1798,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
+      class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
       type="button"
     >
       <span
diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
index e9949b5542..e9daddc98e 100644
--- a/components/button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -1451,10 +1451,10 @@ Array [
     </span>
   </button>,
   <div
-    class="ant-btn-group ant-dropdown-button"
+    class="ant-space-compact ant-space-compact-block ant-dropdown-button"
   >
     <button
-      class="ant-btn ant-btn-default"
+      class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
       type="button"
     >
       <span>
@@ -1462,7 +1462,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
+      class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
       type="button"
     >
       <span
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
index 8a2854179a..6b766efe99 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -14977,10 +14977,10 @@ exports[`ConfigProvider components Drawer prefixCls 1`] = `
 
 exports[`ConfigProvider components Dropdown configProvider 1`] = `
 <div
-  class="config-btn-group config-dropdown-button"
+  class="config-space-compact config-space-compact-block config-dropdown-button"
 >
   <button
-    class="config-btn config-btn-default"
+    class="config-btn config-btn-default config-btn-compact-item config-btn-compact-first-item"
     type="button"
   >
     <span>
@@ -14988,7 +14988,7 @@ exports[`ConfigProvider components Dropdown configProvider 1`] = `
     </span>
   </button>
   <button
-    class="config-btn config-btn-default config-btn-icon-only config-dropdown-trigger"
+    class="config-btn config-btn-default config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
     type="button"
   >
     <span
@@ -15016,10 +15016,10 @@ exports[`ConfigProvider components Dropdown configProvider 1`] = `
 
 exports[`ConfigProvider components Dropdown configProvider componentDisabled 1`] = `
 <div
-  class="config-btn-group config-dropdown-button"
+  class="config-space-compact config-space-compact-block config-dropdown-button"
 >
   <button
-    class="config-btn config-btn-default"
+    class="config-btn config-btn-default config-btn-compact-item config-btn-compact-first-item"
     disabled=""
     type="button"
   >
@@ -15028,7 +15028,7 @@ exports[`ConfigProvider components Dropdown configProvider componentDisabled 1`]
     </span>
   </button>
   <button
-    class="config-btn config-btn-default config-btn-icon-only config-dropdown-trigger"
+    class="config-btn config-btn-default config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
     disabled=""
     type="button"
   >
@@ -15057,10 +15057,10 @@ exports[`ConfigProvider components Dropdown configProvider componentDisabled 1`]
 
 exports[`ConfigProvider components Dropdown configProvider componentSize large 1`] = `
 <div
-  class="config-btn-group config-dropdown-button"
+  class="config-space-compact config-space-compact-block config-dropdown-button"
 >
   <button
-    class="config-btn config-btn-default config-btn-lg"
+    class="config-btn config-btn-default config-btn-compact-item config-btn-compact-first-item"
     type="button"
   >
     <span>
@@ -15068,7 +15068,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize large 1
     </span>
   </button>
   <button
-    class="config-btn config-btn-default config-btn-lg config-btn-icon-only config-dropdown-trigger"
+    class="config-btn config-btn-default config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
     type="button"
   >
     <span
@@ -15096,10 +15096,10 @@ exports[`ConfigProvider components Dropdown configProvider componentSize large 1
 
 exports[`ConfigProvider components Dropdown configProvider componentSize middle 1`] = `
 <div
-  class="config-btn-group config-dropdown-button"
+  class="config-space-compact config-space-compact-block config-dropdown-button"
 >
   <button
-    class="config-btn config-btn-default"
+    class="config-btn config-btn-default config-btn-compact-item config-btn-compact-first-item"
     type="button"
   >
     <span>
@@ -15107,7 +15107,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize middle
     </span>
   </button>
   <button
-    class="config-btn config-btn-default config-btn-icon-only config-dropdown-trigger"
+    class="config-btn config-btn-default config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
     type="button"
   >
     <span
@@ -15135,10 +15135,10 @@ exports[`ConfigProvider components Dropdown configProvider componentSize middle
 
 exports[`ConfigProvider components Dropdown configProvider virtual and dropdownMatchSelectWidth 1`] = `
 <div
-  class="ant-btn-group ant-dropdown-button"
+  class="ant-space-compact ant-space-compact-block ant-dropdown-button"
 >
   <button
-    class="ant-btn ant-btn-default"
+    class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
     type="button"
   >
     <span>
@@ -15146,7 +15146,7 @@ exports[`ConfigProvider components Dropdown configProvider virtual and dropdownM
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
     type="button"
   >
     <span
@@ -15174,10 +15174,10 @@ exports[`ConfigProvider components Dropdown configProvider virtual and dropdownM
 
 exports[`ConfigProvider components Dropdown normal 1`] = `
 <div
-  class="ant-btn-group ant-dropdown-button"
+  class="ant-space-compact ant-space-compact-block ant-dropdown-button"
 >
   <button
-    class="ant-btn ant-btn-default"
+    class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
     type="button"
   >
     <span>
@@ -15185,7 +15185,7 @@ exports[`ConfigProvider components Dropdown normal 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
     type="button"
   >
     <span
@@ -15213,10 +15213,10 @@ exports[`ConfigProvider components Dropdown normal 1`] = `
 
 exports[`ConfigProvider components Dropdown prefixCls 1`] = `
 <div
-  class="ant-btn-group prefix-Dropdown"
+  class="ant-space-compact ant-space-compact-block prefix-Dropdown"
 >
   <button
-    class="ant-btn ant-btn-default"
+    class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
     type="button"
   >
     <span>
@@ -15224,7 +15224,7 @@ exports[`ConfigProvider components Dropdown prefixCls 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
     type="button"
   >
     <span
diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
index ddd7500cb7..ba2dcd33c7 100644
--- a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -3091,10 +3091,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
-      class="ant-btn-group ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default"
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -3102,7 +3102,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -3373,10 +3373,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
-      class="ant-btn-group ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default"
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -3384,7 +3384,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -3655,10 +3655,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
-      class="ant-btn-group ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default"
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
         disabled=""
         type="button"
       >
@@ -3667,7 +3667,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         disabled=""
         type="button"
       >
@@ -3939,10 +3939,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
-      class="ant-btn-group ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default"
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -3974,7 +3974,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
         </div>
       </div>
       <button
-        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -4533,10 +4533,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
     style="padding-bottom:8px"
   >
     <div
-      class="ant-btn-group ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-dangerous"
+        class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -4544,7 +4544,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-dangerous ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-dangerous ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -5289,10 +5289,10 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
     style="margin-bottom:8px"
   >
     <div
-      class="ant-btn-group ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-loading"
+        class="ant-btn ant-btn-primary ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span
@@ -5323,7 +5323,7 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -5427,10 +5427,10 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
     style="margin-bottom:8px"
   >
     <div
-      class="ant-btn-group ant-btn-group-sm ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span
@@ -5461,7 +5461,7 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -5565,10 +5565,10 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
     style="margin-bottom:8px"
   >
     <div
-      class="ant-btn-group ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -5576,7 +5576,7 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -5679,10 +5679,10 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
     class="ant-space-item"
   >
     <div
-      class="ant-btn-group ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default"
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -5690,7 +5690,7 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo.test.ts.snap
index cacf10e824..e9a2113bea 100644
--- a/components/dropdown/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo.test.ts.snap
@@ -167,10 +167,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
-      class="ant-btn-group ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default"
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -178,7 +178,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -208,10 +208,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
-      class="ant-btn-group ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default"
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -219,7 +219,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -249,10 +249,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
-      class="ant-btn-group ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default"
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
         disabled=""
         type="button"
       >
@@ -261,7 +261,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         disabled=""
         type="button"
       >
@@ -292,10 +292,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
-      class="ant-btn-group ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default"
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -303,7 +303,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -380,10 +380,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
     style="padding-bottom:8px"
   >
     <div
-      class="ant-btn-group ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-dangerous"
+        class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -391,7 +391,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-dangerous ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-dangerous ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -508,10 +508,10 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
     style="margin-bottom:8px"
   >
     <div
-      class="ant-btn-group ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-loading"
+        class="ant-btn ant-btn-primary ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span
@@ -542,7 +542,7 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -572,10 +572,10 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
     style="margin-bottom:8px"
   >
     <div
-      class="ant-btn-group ant-btn-group-sm ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span
@@ -606,7 +606,7 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -636,10 +636,10 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
     style="margin-bottom:8px"
   >
     <div
-      class="ant-btn-group ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -647,7 +647,7 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -676,10 +676,10 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-btn-group ant-dropdown-button"
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default"
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -687,7 +687,7 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
diff --git a/components/dropdown/__tests__/__snapshots__/dropdown-button.test.tsx.snap b/components/dropdown/__tests__/__snapshots__/dropdown-button.test.tsx.snap
index 5d60222278..cb02761bb0 100644
--- a/components/dropdown/__tests__/__snapshots__/dropdown-button.test.tsx.snap
+++ b/components/dropdown/__tests__/__snapshots__/dropdown-button.test.tsx.snap
@@ -2,14 +2,14 @@
 
 exports[`DropdownButton rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
-  class="ant-btn-group ant-btn-group-rtl ant-dropdown-button"
+  class="ant-space-compact ant-space-compact-rtl ant-space-compact-block ant-dropdown-button"
 >
   <button
-    class="ant-btn ant-btn-default ant-btn-rtl"
+    class="ant-btn ant-btn-default ant-btn-rtl ant-btn-compact-item ant-btn-compact-first-item ant-btn-compact-item-rtl"
     type="button"
   />
   <button
-    class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-rtl ant-dropdown-trigger ant-dropdown-rtl"
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-rtl ant-btn-compact-item ant-btn-compact-last-item ant-btn-compact-item-rtl ant-dropdown-trigger ant-dropdown-rtl"
     type="button"
   >
     <span
@@ -37,14 +37,14 @@ exports[`DropdownButton rtl render component should be rendered correctly in RTL
 
 exports[`DropdownButton should support href like Button 1`] = `
 <div
-  class="ant-btn-group ant-dropdown-button"
+  class="ant-space-compact ant-space-compact-block ant-dropdown-button"
 >
   <a
-    class="ant-btn ant-btn-default"
+    class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
     href="https://ant.design"
   />
   <button
-    class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
     type="button"
   >
     <span
diff --git a/components/dropdown/dropdown-button.tsx b/components/dropdown/dropdown-button.tsx
index 26d7e3b731..ae33e76bce 100644
--- a/components/dropdown/dropdown-button.tsx
+++ b/components/dropdown/dropdown-button.tsx
@@ -6,10 +6,10 @@ import Button from '../button';
 import type { ButtonHTMLType } from '../button/button';
 import type { ButtonGroupProps } from '../button/button-group';
 import { ConfigContext } from '../config-provider';
+import { useCompactItemContext } from '../space/Compact';
 import type { DropdownProps } from './dropdown';
 import Dropdown from './dropdown';
-
-const ButtonGroup = Button.Group;
+import Space from '../space';
 
 export type DropdownButtonType = 'default' | 'primary' | 'ghost' | 'dashed' | 'link' | 'text';
 
@@ -83,7 +83,10 @@ const DropdownButton: DropdownButtonInterface = props => {
     overlayClassName,
     overlayStyle,
     destroyPopupOnHide,
-  };
+  } as DropdownProps;
+  const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
+
+  const classes = classNames(prefixCls, compactItemClassnames, className);
 
   if ('open' in props) {
     dropdownProps.open = open;
@@ -117,10 +120,10 @@ const DropdownButton: DropdownButtonInterface = props => {
   const [leftButtonToRender, rightButtonToRender] = buttonsRender([leftButton, rightButton]);
 
   return (
-    <ButtonGroup {...restProps} className={classNames(prefixCls, className)}>
+    <Space.Compact className={classes} size={compactSize} block {...restProps}>
       {leftButtonToRender}
       <Dropdown {...dropdownProps}>{rightButtonToRender}</Dropdown>
-    </ButtonGroup>
+    </Space.Compact>
   );
 };
 
diff --git a/components/dropdown/style/index.tsx b/components/dropdown/style/index.tsx
index ce0a94d224..22c9ad8f96 100644
--- a/components/dropdown/style/index.tsx
+++ b/components/dropdown/style/index.tsx
@@ -4,3 +4,4 @@ import './index.less';
 // style dependencies
 import '../../button/style';
 import '../../menu/style';
+import '../../space/style';