From 185ddcd5f9a83247567234c34bc8094bf4949fac Mon Sep 17 00:00:00 2001 From: Reza Rahman <13340707+rezrah@users.noreply.github.com> Date: Tue, 21 Jul 2026 11:38:35 +0100 Subject: [PATCH 01/10] Add ActionMenu to Hero and ButtonGroup changes --- .changeset/hero-button-group.md | 22 +++ .changeset/soft-banners-sparkle.md | 1 + .../content/components/ButtonGroup/react.mdx | 25 ++- .../content/components/Hero/react.mdx | 78 ++++++++- .../content/getting-started/index.mdx | 12 +- packages/mcp/src/test-utils/catalog.ts | 9 +- packages/react/src/ActionMenu/ActionMenu.tsx | 4 +- .../src/ButtonGroup/ButtonGroup.stories.tsx | 33 +++- .../src/ButtonGroup/ButtonGroup.test.tsx | 78 ++++++++- .../react/src/ButtonGroup/ButtonGroup.tsx | 38 ++++- .../ButtonGroup/ButtonGroup.visual.spec.ts | 22 +++ ...-ButtonGroup-With-Action-Menu-1-darwin.png | Bin 0 -> 9134 bytes ...nGroup-With-Variant-Overrides-1-darwin.png | Bin 0 -> 10320 bytes .../CTABanner/CTABanner.features.stories.tsx | 20 +++ .../src/CTABanner/CTABanner.visual.spec.ts | 11 ++ ...er-CTABanner-With-Action-Menu-1-darwin.png | Bin 0 -> 32755 bytes .../react/src/Hero/Hero.examples.stories.tsx | 109 +++++++++--- .../react/src/Hero/Hero.features.stories.tsx | 156 ++++++++++++++---- packages/react/src/Hero/Hero.figma.tsx | 15 +- .../react/src/Hero/Hero.gridline.stories.tsx | 117 ++++++++++--- .../src/Hero/Hero.images-videos.stories.tsx | 49 +++++- packages/react/src/Hero/Hero.module.css | 4 + .../react/src/Hero/Hero.stories.module.css | 15 -- .../src/Hero/Hero.stories.module.css.d.ts | 1 - packages/react/src/Hero/Hero.stories.tsx | 7 +- packages/react/src/Hero/Hero.test.tsx | 84 ++++++---- packages/react/src/Hero/Hero.tsx | 112 ++++++++----- packages/react/src/Hero/Hero.visual.spec.ts | 15 +- ...son-Hero-Hero-Hero-with-cards-1-darwin.png | Bin 65524 -> 74487 bytes ...on-Hero-Hero-With-Action-Menu-1-darwin.png | Bin 0 -> 38932 bytes ...Primary-And-Secondary-Actions-1-darwin.png | Bin 0 -> 38018 bytes .../Hero/sub-components/HeroButtonGroup.tsx | 36 ++++ .../react/src/Hero/sub-components/index.ts | 3 + 33 files changed, 864 insertions(+), 212 deletions(-) create mode 100644 .changeset/hero-button-group.md create mode 100644 packages/react/src/ButtonGroup/ButtonGroup.visual.spec.ts-snapshots/Visual-Comparison-ButtonGroup-ButtonGroup-With-Action-Menu-1-darwin.png create mode 100644 packages/react/src/ButtonGroup/ButtonGroup.visual.spec.ts-snapshots/Visual-Comparison-ButtonGroup-ButtonGroup-With-Variant-Overrides-1-darwin.png create mode 100644 packages/react/src/CTABanner/CTABanner.visual.spec.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-With-Action-Menu-1-darwin.png create mode 100644 packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-With-Action-Menu-1-darwin.png create mode 100644 packages/react/src/Hero/Hero.visual.spec.ts-snapshots/Visual-Comparison-Hero-Hero-With-Legacy-Primary-And-Secondary-Actions-1-darwin.png create mode 100644 packages/react/src/Hero/sub-components/HeroButtonGroup.tsx diff --git a/.changeset/hero-button-group.md b/.changeset/hero-button-group.md new file mode 100644 index 0000000000..29917d2205 --- /dev/null +++ b/.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 defacto 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 +-Primary action +-Secondary action ++ ++ ++ ++ +``` diff --git a/.changeset/soft-banners-sparkle.md b/.changeset/soft-banners-sparkle.md index 9fdcebfe45..171ccad458 100644 --- a/.changeset/soft-banners-sparkle.md +++ b/.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 positional variants and the `CTABanner.ButtonGroup` wrapper. diff --git a/apps/next-docs/content/components/ButtonGroup/react.mdx b/apps/next-docs/content/components/ButtonGroup/react.mdx index 9d5c253c8f..f4e1398fc3 100644 --- a/apps/next-docs/content/components/ButtonGroup/react.mdx +++ b/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 subtle button variant. ```jsx live @@ -28,6 +28,25 @@ This is the default variant for the ButtonGroup component. The first button in t ``` +### 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. + +```jsx live + + + + More actions + + Contact sales + View pricing + + + +``` + ### Sizes The ButtonGroup component can be rendered in different sizes in `medium` and `large` sizes. The default size is `medium`. diff --git a/apps/next-docs/content/components/Hero/react.mdx b/apps/next-docs/content/components/Hero/react.mdx index e5dc329b30..4c7b13a80f 100644 --- a/apps/next-docs/content/components/Hero/react.mdx +++ b/apps/next-docs/content/components/Hero/react.mdx @@ -18,7 +18,7 @@ import { } from './react' ```js -import {Hero} from '@primer/react-brand' +import {ActionMenu, Button, Hero} from '@primer/react-brand' ``` ## Examples @@ -33,8 +33,36 @@ import {Hero} from '@primer/react-brand' Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum. - Primary action - Secondary action + + + + + +``` + +### Action menus + +`Hero.ButtonGroup` accepts up to two `Button` or `ActionMenu` children and applies the primary variant to the first item and the subtle variant to the second. Set `variant` on `Button` or `ActionMenu.Button` to override it. + +```jsx live + + This is my super sweet hero heading + + + + More actions + + Contact sales + View pricing + + + ``` @@ -47,14 +75,22 @@ import {Hero} from '@primer/react-brand' Actions Automate your workflow from idea to production - Get started with Actions + + +
Actions Automate your workflow from idea to production - Get started with Actions + + + - Primary action + + + ``` @@ -96,7 +136,11 @@ The `GridLine` variants all feature a trailing border by default. Use `Box` if y Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum. - Primary action + + + ``` @@ -115,7 +159,11 @@ Use [VideoPlayer](/components/VideoPlayer), a native `