Merge branch 'main' into danielguillan/add-minimal-video-player-component

Author: danielguillan

.changeset/hero-button-group.md

@@ -0,0 +1,22 @@
+---
+'@primer/react-brand': patch
+---
+
+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.
+
+Migrate using the following approach:
+
+```diff
+-<Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+-<Hero.SecondaryAction href="#">Secondary action</Hero.SecondaryAction>
++<Hero.ButtonGroup>
++  <Button as="a" href="#">
++    Primary action
++  </Button>
++  <Button as="a" href="#">
++    Secondary action
++  </Button>
++</Hero.ButtonGroup>
+```

.changeset/hero-media-position-padding.md

@@ -0,0 +1,15 @@
+---
+'@primer/react-brand': minor
+'@primer/brand-css': minor
+---
+
+⚠️ Breaking change to `Hero.Image` and `Hero.Video` ⚠️
+
+Previously combined `padding` and `position` semantics have been separated.
+
+The `position` prop will now only control layout and positioning relative to the content. It accepts `block-end`, `inline-start`, or `inline-end`.
+
+```diff
+-<Hero.Image position="block-end-padded" src="image.jpg" alt="" />
++<Hero.Image position="block-end" padding="all" src="image.jpg" alt="" />
+```

.changeset/quiet-otters-dance.md

@@ -0,0 +1,13 @@
+---
+'@primer/react-brand': minor
+---
+
+⚠️ Breaking change: Removed the `imageBackgroundColor` prop from `River.Visual`, `RiverBreakout.Visual`, and `RiverBreakoutTabs.Visual`.
+
+The `River` `gridline` variant now applies the full-bleed visual background layout by default. Remove `imageBackgroundColor="subtle"` from `River.Visual` when using the `gridline` variant.
+
+Remove `imageBackgroundColor` from `RiverBreakout.Visual` and `RiverBreakoutTabs.Visual` without replacement. Their default visual treatments are unchanged.
+
+The background treatment is not applied to the default `River` variant or either `RiverBreakout` variant.
+
+Updated the River `gridline` variant tablet layout with a `618px` max-width and lateral gridlines.

.changeset/river-visual-layout.md

@@ -0,0 +1,16 @@
+---
+'@primer/react-brand': minor
+'@primer/brand-css': minor
+'@primer/brand-primitives': minor
+---
+
+Added opt-in `position` and `padding` controls to `River.Visual` media in the `gridline` variant.
+
+🔗 Storybook examples:
+
+- [Center position](https://stunning-chainsaw-j82glqz.pages.github.io/brand/storybook/?path=/story/components-river-features-gridline-variants--grid-line-visual-position-center)
+- [Block-end position](https://stunning-chainsaw-j82glqz.pages.github.io/brand/storybook/?path=/story/components-river-features-gridline-variants--grid-line-visual-position-block-end)
+- [Block-end inline-start position](https://stunning-chainsaw-j82glqz.pages.github.io/brand/storybook/?path=/story/components-river-features-gridline-variants--grid-line-visual-position-block-end-inline-start)
+- [Block-end inline-end position](https://stunning-chainsaw-j82glqz.pages.github.io/brand/storybook/?path=/story/components-river-features-gridline-variants--grid-line-visual-position-block-end-inline-end)
+- [No padding](https://stunning-chainsaw-j82glqz.pages.github.io/brand/storybook/?path=/story/components-river-features-gridline-variants--grid-line-visual-padding-none)
+- [Padding on all sides](https://stunning-chainsaw-j82glqz.pages.github.io/brand/storybook/?path=/story/components-river-features-gridline-variants--grid-line-visual-padding-all)

.changeset/silver-pandas-draw.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Improve `RiverAccordion` gridline layout on tablet viewports and update its accordion toggle icon from chevrons to triangles.

.changeset/soft-banners-sparkle.md

@@ -4,3 +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 sizes and positional variants, and the `CTABanner.ButtonGroup` wrapper.

.github/workflows/ci.yml

@@ -48,7 +48,7 @@ jobs:
         run: npm run check
 
       - name: Run unit tests
-        run: npm run test
+        run: npm run test --workspaces --if-present
 
       - name: Run MCP server smoke tests
         run: npm run smoke --workspace=packages/mcp

.gitignore

@@ -25,6 +25,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 debug-storybook.log
+.playwright-mcp/
 
 # local env files
 .env

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

@@ -1,6 +1,6 @@
 ---
 title: Button group
-description: Use the button group component to group related buttons together.
+description: Use the button group component to group related buttons and action menus together.
 keywords: ['buttons', 'control', 'action', 'group', 'paired']
 show-tabs: true
 tab-label: React
@@ -12,14 +12,14 @@ storybook: '/brand/storybook/?path=/story/components-buttongroup--playground'
 import {ButtonGroupSizesProp, ButtonGroupAsProp} from './react'
 
 ```js
-import {ButtonGroup, Button} from '@primer/react-brand'
+import {ActionMenu, Button, ButtonGroup} from '@primer/react-brand'
 ```
 
 ## Examples
 
 ### Default
 
-This is the default variant for the ButtonGroup component. The first button in the group is the primary button and the second button is the secondary button.
+This is the default variant for the ButtonGroup component. The first item in the group uses the primary button variant and the second uses the secondary button variant.
 
 ```jsx live
 <ButtonGroup>
@@ -28,9 +28,30 @@ This is the default variant for the ButtonGroup component. The first button in t
 </ButtonGroup>
 ```
 
+### Action menus
+
+`ButtonGroup` supports up to two `Button` or `ActionMenu` children and applies a default `variant` to each one.
+
+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>
+  <ActionMenu>
+    <ActionMenu.Button>More actions</ActionMenu.Button>
+    <ActionMenu.Overlay aria-label="More actions">
+      <ActionMenu.Item value="contact-sales">Contact sales</ActionMenu.Item>
+      <ActionMenu.Item value="view-pricing">View pricing</ActionMenu.Item>
+    </ActionMenu.Overlay>
+  </ActionMenu>
+</ButtonGroup>
+```
+
 ### 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 />