fix(Button): solid variant borders inside Space Compact (#56486)

* fix(Button): solid variant borders inside Space Compact

* refactor(Button): use genCssVar hook to generate CSS variables

* chore: adjust logic of compact

* test: update demo

---------

Co-authored-by: 遇见同学 <1875694521@qq.com>
Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: 二货机器人 <smith3816@gmail.com>

components/button/style/compact.ts

@@ -5,38 +5,67 @@ import { genCompactItemStyle } from '../../style/compact-item';
 import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
 import type { GenerateStyle } from '../../theme/internal';
 import { genSubStyleComponent } from '../../theme/internal';
+import { genCssVar } from '../../theme/util/genStyleUtils';
 import type { ButtonToken } from './token';
 import { prepareComponentToken, prepareToken } from './token';
 
 const genButtonCompactStyle: GenerateStyle<ButtonToken> = (token) => {
-  const { componentCls, colorPrimaryHover, lineWidth, calc } = token;
+  const { antCls, componentCls, lineWidth, calc, colorBgContainer } = token;
+
+  const solidSelector = `${componentCls}-variant-solid:not([disabled])`;
   const insetOffset = calc(lineWidth).mul(-1).equal();
-  const getCompactBorderStyle = (vertical?: boolean) => {
+
+  const [varName, varRef] = genCssVar(antCls, 'btn');
+
+  const getCompactBorderStyle = (vertical?: boolean): CSSObject => {
     const itemCls = `${componentCls}-compact${vertical ? '-vertical' : ''}-item`;
-    const selector = `${itemCls}${componentCls}-primary:not([disabled])`;
 
     return {
       // TODO: Border color transition should be not cover when has color.
       [itemCls]: {
-        transition: `none`,
-      },
+        [varName('compact-connect-border-color')]: varRef('bg-color-hover'),
 
-      [`${selector} + ${selector}::before`]: {
-        position: 'absolute',
-        top: vertical ? insetOffset : 0,
-        insetInlineStart: vertical ? 0 : insetOffset,
-        backgroundColor: colorPrimaryHover,
-        content: '""',
-        width: vertical ? '100%' : lineWidth,
-        height: vertical ? lineWidth : '100%',
-      } as CSSObject,
+        [`&${solidSelector}`]: {
+          transition: `none`,
+
+          [`& + ${solidSelector}:before`]: [
+            {
+              position: 'absolute',
+              backgroundColor: varRef('compact-connect-border-color'),
+              content: '""',
+            },
+            vertical
+              ? {
+                  top: insetOffset,
+                  insetInline: insetOffset,
+                  height: lineWidth,
+                }
+              : {
+                  insetBlock: insetOffset,
+                  insetInlineStart: insetOffset,
+                  width: lineWidth,
+                },
+          ],
+
+          '&:hover:before': {
+            display: 'none',
+          },
+        },
+      },
     };
   };
-  // Special styles for Primary Button
-  return {
-    ...getCompactBorderStyle(),
-    ...getCompactBorderStyle(true),
-  };
+
+  // Special styles for solid Button
+  return [
+    getCompactBorderStyle(),
+    getCompactBorderStyle(true),
+    {
+      [`${solidSelector}${componentCls}-color-default`]: {
+        [varName('compact-connect-border-color')]:
+          `color-mix(in srgb, ${varRef('bg-color-hover')} 75%, ${colorBgContainer})`,
+      },
+    },
+  ];
 };
 
 // ============================== Export ==============================

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

@@ -9278,6 +9278,38 @@ exports[`renders components/space/demo/compact-button-vertical.tsx extend contex
       </button>
     </div>
   </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-space-compact ant-space-compact-vertical"
+    >
+      <button
+        class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item ant-btn-compact-vertical-first-item"
+        type="button"
+      >
+        <span>
+          Button 1
+        </span>
+      </button>
+      <button
+        class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item"
+        type="button"
+      >
+        <span>
+          Button 2
+        </span>
+      </button>
+      <button
+        class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item ant-btn-compact-vertical-last-item"
+        type="button"
+      >
+        <span>
+          Button 3
+        </span>
+      </button>
+    </div>
+  </div>
 </div>
 `;
 
@@ -13956,7 +13988,9 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
 `;
 
 exports[`renders components/space/demo/compact-nested.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
   <div
     class="ant-space-compact ant-space-compact-block"
   >
@@ -14305,8 +14339,7 @@ Array [
         </button>
       </div>
     </div>
-  </div>,
-  <br />,
+  </div>
   <div
     class="ant-space-compact ant-space-compact-block"
   >
@@ -15879,6 +15912,22 @@ Array [
         </span>
       </button>
     </div>
+    <button
+      class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        ~
+      </span>
+    </button>
+    <button
+      class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        ~
+      </span>
+    </button>
     <div
       class="ant-space-compact"
     >
@@ -16028,8 +16077,44 @@ Array [
         </span>
       </button>
     </div>
-  </div>,
-]
+  </div>
+  <div
+    class="ant-space-compact"
+  >
+    <button
+      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-first-item"
+      type="button"
+    >
+      <span>
+        Button 1
+      </span>
+    </button>
+    <button
+      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Button 2
+      </span>
+    </button>
+    <button
+      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Button 3
+      </span>
+    </button>
+    <button
+      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
+      type="button"
+    >
+      <span>
+        Button 4
+      </span>
+    </button>
+  </div>
+</div>
 `;
 
 exports[`renders components/space/demo/compact-nested.tsx extend context correctly 2`] = `[]`;

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

@@ -1974,6 +1974,38 @@ exports[`renders components/space/demo/compact-button-vertical.tsx correctly 1`]
       </button>
     </div>
   </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-space-compact ant-space-compact-vertical"
+    >
+      <button
+        class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item ant-btn-compact-vertical-first-item"
+        type="button"
+      >
+        <span>
+          Button 1
+        </span>
+      </button>
+      <button
+        class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item"
+        type="button"
+      >
+        <span>
+          Button 2
+        </span>
+      </button>
+      <button
+        class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item ant-btn-compact-vertical-last-item"
+        type="button"
+      >
+        <span>
+          Button 3
+        </span>
+      </button>
+    </div>
+  </div>
 </div>
 `;
 
@@ -3673,7 +3705,9 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
 `;
 
 exports[`renders components/space/demo/compact-nested.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
   <div
     class="ant-space-compact ant-space-compact-block"
   >
@@ -3944,8 +3978,7 @@ Array [
         </button>
       </div>
     </div>
-  </div>,
-  <br />,
+  </div>
   <div
     class="ant-space-compact ant-space-compact-block"
   >
@@ -4002,6 +4035,22 @@ Array [
         </span>
       </button>
     </div>
+    <button
+      class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        ~
+      </span>
+    </button>
+    <button
+      class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        ~
+      </span>
+    </button>
     <div
       class="ant-space-compact"
     >
@@ -4063,8 +4112,44 @@ Array [
         </span>
       </button>
     </div>
-  </div>,
-]
+  </div>
+  <div
+    class="ant-space-compact"
+  >
+    <button
+      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-first-item"
+      type="button"
+    >
+      <span>
+        Button 1
+      </span>
+    </button>
+    <button
+      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Button 2
+      </span>
+    </button>
+    <button
+      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Button 3
+      </span>
+    </button>
+    <button
+      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
+      type="button"
+    >
+      <span>
+        Button 4
+      </span>
+    </button>
+  </div>
+</div>
 `;
 
 exports[`renders components/space/demo/debug.tsx correctly 1`] = `

components/space/demo/compact-button-vertical.tsx

@@ -18,6 +18,11 @@ const App: React.FC = () => (
       <Button type="primary">Button 2</Button>
       <Button type="primary">Button 3</Button>
     </Space.Compact>
+    <Space.Compact orientation="vertical">
+      <Button variant="outlined">Button 1</Button>
+      <Button variant="outlined">Button 2</Button>
+      <Button variant="outlined">Button 3</Button>
+    </Space.Compact>
   </Space>
 );
 

components/space/demo/compact-nested.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { CopyOutlined, SearchOutlined } from '@ant-design/icons';
-import { Button, Cascader, Input, InputNumber, Select, Space, TimePicker } from 'antd';
+import { Button, Cascader, Flex, Input, InputNumber, Select, Space, TimePicker } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Flex vertical gap="middle">
     <Space.Compact block>
       <Space.Compact>
         <Space.Compact>
@@ -33,12 +33,14 @@ const App: React.FC = () => (
         </Space.Compact>
       </Space.Compact>
     </Space.Compact>
-    <br />
+
     <Space.Compact block>
       <Space.Compact>
         <TimePicker />
         <Button type="primary">Submit</Button>
       </Space.Compact>
+      <Button type="primary">~</Button>
+      <Button type="primary">~</Button>
       <Space.Compact>
         <Cascader
           options={[
@@ -80,7 +82,22 @@ const App: React.FC = () => (
         <Button type="primary">Submit</Button>
       </Space.Compact>
     </Space.Compact>
-  </>
+
+    <Space.Compact>
+      <Button color="default" variant="solid">
+        Button 1
+      </Button>
+      <Button color="default" variant="solid">
+        Button 2
+      </Button>
+      <Button color="danger" variant="solid">
+        Button 3
+      </Button>
+      <Button color="danger" variant="solid">
+        Button 4
+      </Button>
+    </Space.Compact>
+  </Flex>
 );
 
 export default App;