fix: Button Group style (#35178)

components/button/button-group.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { SizeType } from '../config-provider/SizeContext';
 import { ConfigContext } from '../config-provider';
 import devWarning from '../_util/devWarning';
+import { useToken } from '../_util/theme';
 
 export interface ButtonGroupProps {
   size?: SizeType;
@@ -20,6 +21,9 @@ const ButtonGroup: React.FC<ButtonGroupProps> = props => {
   const { prefixCls: customizePrefixCls, size, className, ...others } = props;
   const prefixCls = getPrefixCls('btn-group', customizePrefixCls);
 
+  // Here we only need hashId
+  const [, , hashId] = useToken();
+
   // large => lg
   // small => sm
   let sizeCls = '';
@@ -44,6 +48,7 @@ const ButtonGroup: React.FC<ButtonGroupProps> = props => {
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
     className,
+    hashId,
   );
 
   return (

components/button/demo/legacy-group.md

@@ -45,9 +45,3 @@ export default () => (
   </>
 );
 ```
-
-```css
-#components-button-demo-legacy-group .ant-btn {
-  margin: 0;
-}
-```

components/button/index.en-US.md

@@ -57,18 +57,14 @@ Following the Ant Design specification, we will add one space between if Button
 <img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="Button with two Chinese characters" />
 
 <style>
-[id^=components-button-demo-] .ant-btn {
+[id^="components-button-demo-"]:not([id^="components-button-demo-legacy-group"]) .ant-btn {
   margin-right: 8px;
   margin-bottom: 12px;
 }
-[id^="components-button-demo-"] .ant-btn-rtl {
+[id^="components-button-demo-"]:not([id^="components-button-demo-legacy-group"]) .ant-btn-rtl {
   margin-right: 0;
   margin-left: 8px;
 }
-[id^=components-button-demo-] .ant-btn-group > .ant-btn,
-[id^=components-button-demo-] .ant-btn-group > span > .ant-btn {
-  margin-right: 0;
-}
 [data-theme="dark"] .site-button-ghost-wrapper {
   background: rgba(255, 255, 255, 0.2);
 }

components/button/index.zh-CN.md

@@ -62,17 +62,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
 <img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="移除两个汉字之间的空格"  />
 
 <style>
-[id^="components-button-demo-"] .ant-btn {
+[id^="components-button-demo-"]:not([id^="components-button-demo-legacy-group"]) .ant-btn {
   margin-right: 8px;
   margin-bottom: 12px;
 }
-[id^="components-button-demo-"] .ant-btn-rtl {
+[id^="components-button-demo-"]:not([id^="components-button-demo-legacy-group"]) .ant-btn-rtl {
   margin-right: 0;
   margin-left: 8px;
 }
-[id^="components-button-demo-"] .ant-btn-group > .ant-btn {
-  margin-right: 0;
-}
 [data-theme="dark"] .site-button-ghost-wrapper {
   background: rgba(255, 255, 255, 0.2);
 }

components/button/style/group.tsx

@@ -0,0 +1,61 @@
+import type { GenerateStyle } from '../../_util/theme';
+import type { ButtonToken } from '.';
+
+const genGroupStyle: GenerateStyle<ButtonToken> = token => {
+  const { componentCls, fontSizeBase, controlLineWidth, colorPrimaryHover } = token;
+
+  return {
+    [`${componentCls}-group`]: {
+      position: 'relative',
+      display: 'inline-flex',
+
+      // Border
+      [`> span, > ${componentCls}`]: {
+        '&:not(:last-child)': {
+          [`&, & > ${componentCls}`]: {
+            borderStartEndRadius: 0,
+            borderEndEndRadius: 0,
+
+            '&:not(:disabled)': {
+              borderInlineEndColor: colorPrimaryHover,
+            },
+          },
+        },
+
+        '&:not(:first-child)': {
+          marginInlineStart: -controlLineWidth,
+
+          [`&, & > ${componentCls}`]: {
+            borderStartStartRadius: 0,
+            borderEndStartRadius: 0,
+
+            '&:not(:disabled)': {
+              borderInlineStartColor: colorPrimaryHover,
+            },
+          },
+        },
+      },
+
+      [componentCls]: {
+        position: 'relative',
+        zIndex: 1,
+
+        [`&:hover,
+          &:focus,
+          &:active`]: {
+          zIndex: 2,
+        },
+
+        '&[disabled]': {
+          zIndex: 0,
+        },
+      },
+
+      [`${componentCls}-icon-only`]: {
+        fontSize: fontSizeBase,
+      },
+    },
+  };
+};
+
+export default genGroupStyle;

components/button/style/index.tsx

@@ -3,6 +3,7 @@ import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
 import { mergeToken, genComponentStyleHook } from '../../_util/theme';
 import type { GenerateStyle, FullToken } from '../../_util/theme';
+import genGroupStyle from './group';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
@@ -10,7 +11,7 @@ export interface ComponentToken {
   colorBgTextActive: string;
 }
 
-interface ButtonToken extends FullToken<'Button'> {}
+export interface ButtonToken extends FullToken<'Button'> {}
 
 // ============================== Shared ==============================
 const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
@@ -383,6 +384,9 @@ export default genComponentStyleHook(
 
     // Group (type, ghost, danger, disabled, loading)
     genTypeButtonStyle(token),
+
+    // Button Group
+    genGroupStyle(token),
   ],
   token => {
     const { colorText } = token;