Hoist ButtonGroup's size prop (#2372)

.changeset/perfect-pugs-exist.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Deprecated the ButtonGroup's `actions.[primary|secondary].size` prop. Use the top-level `size` prop instead.

packages/circuit-ui/components/ButtonGroup/ButtonGroup.tsx

@@ -17,10 +17,16 @@ import { forwardRef, HTMLAttributes } from 'react';
 
 import Button, { ButtonProps } from '../Button/index.js';
 import { clsx } from '../../styles/clsx.js';
+import { deprecate } from '../../util/logger.js';
 
 import styles from './ButtonGroup.module.css';
 
-type Action = Omit<ButtonProps, 'variant'>;
+type Action = Omit<ButtonProps, 'variant' | 'size'> & {
+  /**
+   * @deprecated
+   */
+  size?: ButtonProps['size'];
+};
 
 export interface ButtonGroupProps
   extends Omit<HTMLAttributes<HTMLDivElement>, 'align'> {
@@ -35,29 +41,55 @@ export interface ButtonGroupProps
    * Direction to align the buttons. Defaults to `center`.
    */
   align?: 'left' | 'center' | 'right';
+  /**
+   * Choose from 2 sizes. Default: 'm'.
+   */
+  size?: ButtonProps['size'];
 }
 
 /**
  * The ButtonGroup component groups and formats two buttons.
  */
 export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
   (
-    { actions, className, align = 'center', ...props }: ButtonGroupProps,
+    { actions, className, align = 'center', size, ...props }: ButtonGroupProps,
     ref,
-  ) => (
-    <div {...props} className={clsx(styles.container, className)} ref={ref}>
-      <div className={clsx(styles.base, styles[align])}>
-        <Button {...actions.primary} variant="primary" />
-        {actions.secondary && (
+  ) => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (actions.primary.size) {
+        deprecate(
+          'ButtonGroup',
+          'The `actions.primary.size` prop has been deprecated. Use the top-level `size` prop instead.',
+        );
+      }
+      if (actions.secondary?.size) {
+        deprecate(
+          'ButtonGroup',
+          'The `actions.secondary.size` prop has been deprecated. Use the top-level `size` prop instead.',
+        );
+      }
+    }
+
+    return (
+      <div {...props} className={clsx(styles.container, className)} ref={ref}>
+        <div className={clsx(styles.base, styles[align])}>
           <Button
-            {...actions.secondary}
-            className={clsx(styles.secondary, actions.secondary.className)}
-            variant="tertiary"
+            {...actions.primary}
+            size={size || actions.primary.size}
+            variant="primary"
           />
-        )}
+          {actions.secondary && (
+            <Button
+              {...actions.secondary}
+              size={size || actions.secondary.size}
+              className={clsx(styles.secondary, actions.secondary.className)}
+              variant="tertiary"
+            />
+          )}
+        </div>
       </div>
-    </div>
-  ),
+    );
+  },
 );
 
 ButtonGroup.displayName = 'ButtonGroup';