add feedback

Author: rezrah

.changeset/hero-button-group.md

@@ -2,7 +2,7 @@
 '@primer/react-brand': patch
 ---
 
-Added `Hero.ButtonGroup` for rendering `Button` and `ActionMenu` children. `Hero.ButtonGroup` is now the defacto way to display buttons in the `Hero`.
+Added `Hero.ButtonGroup` for rendering `Button` and `ActionMenu` children. `Hero.ButtonGroup` is now the de facto way to display buttons in the `Hero`.
 
 ⚠️ `Hero.PrimaryAction` and `Hero.SecondaryAction` are now deprecated. Please migrate over to `Hero.ButtonGroup` as they will be removed in a future release.
 

.changeset/soft-banners-sparkle.md

@@ -4,4 +4,4 @@
 
 - Restored rounded corners to `CTABanner` while preserving square edges when grid lines are enabled.
 - Improved `ButtonGroup` to forward custom class names alongside its default styles.
-- Added native `ActionMenu` child support to `ButtonGroup`, including automatic positional variants and the `CTABanner.ButtonGroup` wrapper.
+- Added native `ActionMenu` child support to `ButtonGroup`, including automatic sizes and positional variants, and the `CTABanner.ButtonGroup` wrapper.

apps/next-docs/content/components/ButtonGroup/react.mdx

@@ -34,6 +34,8 @@ This is the default variant for the ButtonGroup component. The first item in the
 
 Explicit `variant` overrides to `Button` or `ActionMenu.Button` will override the default values.
 
+`buttonSize` applies to both child types. Because `ActionMenu` supports only `small` and `medium`, it remains `medium` when `buttonSize="large"`. Set `size` on `ActionMenu` to override the inherited size.
+
 ```jsx live
 <ButtonGroup>
   <Button>Primary action</Button>
@@ -49,7 +51,7 @@ Explicit `variant` overrides to `Button` or `ActionMenu.Button` will override th
 
 ### Sizes
 
-The ButtonGroup component can be rendered in different sizes in `medium` and `large` sizes. The default size is `medium`.
+The ButtonGroup component supports `small`, `medium`, and `large` buttons. The default size is `medium`. ActionMenu children support `small` and `medium`.
 
 ```jsx live
 <ButtonGroup buttonSize="large">

apps/next-docs/content/components/ButtonGroup/react.tsx

@@ -1,5 +1,5 @@
 'use client'
 import {PropTableValues} from '@primer/doctocat-nextjs/components'
 
-export const ButtonGroupSizesProp = () => <PropTableValues values={['medium', 'large']} commaSeparated />
+export const ButtonGroupSizesProp = () => <PropTableValues values={['small', 'medium', 'large']} commaSeparated />
 export const ButtonGroupAsProp = () => <PropTableValues values={['button', 'a']} commaSeparated />

packages/react/src/ButtonGroup/ButtonGroup.stories.tsx

@@ -17,7 +17,7 @@ const meta = {
       description: 'The size of the button elements',
       control: {
         type: 'radio',
-        options: ['medium', 'large'],
+        options: ['small', 'medium', 'large'],
       },
     },
     buttonsAs: {

packages/react/src/ButtonGroup/ButtonGroup.test.tsx

@@ -139,6 +139,25 @@ describe('ButtonGroup', () => {
     expect(getByRole('menu', {name: 'More actions'})).toBeInTheDocument()
   })
 
+  it.each([
+    ['small', 'small'],
+    ['medium', 'medium'],
+    ['large', 'medium'],
+  ] as const)('applies the %s group size to ActionMenu as %s', (buttonSize, expectedSize) => {
+    const {getByRole} = render(
+      <ButtonGroup buttonSize={buttonSize}>
+        <ActionMenu>
+          <ActionMenu.Button>More actions</ActionMenu.Button>
+          <ActionMenu.Overlay aria-label="More actions">
+            <ActionMenu.Item value="Contact sales">Contact sales</ActionMenu.Item>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+      </ButtonGroup>,
+    )
+
+    expect(getByRole('button', {name: 'More actions'})).toHaveClass(`Button--size-${expectedSize}`)
+  })
+
   it('applies variants automatically to ActionMenu children', () => {
     const {getByRole} = render(
       <ButtonGroup>

packages/react/src/ButtonGroup/ButtonGroup.tsx

@@ -34,6 +34,7 @@ export const ButtonGroup = forwardRef(
         }
 
         const actionMenu = child as PrimerBrandActionMenuType
+        const actionMenuSize = buttonSize === 'large' ? 'medium' : buttonSize
         const actionMenuChildren = React.Children.map(actionMenu.props.children, actionMenuChild => {
           if (
             React.isValidElement<React.ComponentProps<typeof ActionMenu.Button>>(actionMenuChild) &&
@@ -46,7 +47,10 @@ export const ButtonGroup = forwardRef(
           return actionMenuChild
         })
 
-        return React.cloneElement(actionMenu, {children: actionMenuChildren})
+        return React.cloneElement(actionMenu, {
+          children: actionMenuChildren,
+          size: actionMenu.props.size ?? actionMenuSize,
+        })
       })
 
     return (