Skip to content

Commit eb2660c

Browse files
danielguillandanielguillan
committed
Merge main into MinimalFooter updates
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 3cd8d822-3861-4204-a7bb-16d62f57c85c
2 parents f768376 + a49a343 commit eb2660c

462 files changed

Lines changed: 4114 additions & 12842 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ jobs:
4848
run: npm run check
4949

5050
- name: Run unit tests
51-
run: npm run test
51+
run: npm run test --workspaces --if-present
5252

5353
- name: Run MCP server smoke tests
5454
run: npm run smoke --workspace=packages/mcp

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ npm-debug.log*
2525
yarn-debug.log*
2626
yarn-error.log*
2727
debug-storybook.log
28+
.playwright-mcp/
2829

2930
# local env files
3031
.env

‎apps/next-docs/CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# @primer/brand-docs
22

3+
## 0.72.0
4+
35
## 0.71.0
46

57
## 0.70.0

‎apps/next-docs/content/components/ActionMenu/index.mdx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
ActionMenuMenuAlignmentProp,
2020
ActionMenuMenuSideProp,
2121
ActionMenuModeProp,
22+
ActionMenuButtonVariantsProp,
2223
} from './react'
2324

2425
```js
@@ -77,11 +78,6 @@ render(<App />)
7778

7879
In this `mode`, the `ActionMenu` can be shown as a split button with an action (left) and dropdown button (right) with an additional list of actions.
7980

80-
<Note>
81-
In split-button mode, each action must be rendered as a link element using the as="a" prop, including the main button
82-
and all menu items.
83-
</Note>
84-
8581
```jsx live
8682
<ActionMenu mode="split-button">
8783
<ActionMenu.Button variant="subtle" as="a" href="#location-for-link" leadingVisual={<StarIcon />}>
@@ -144,11 +140,14 @@ In this `mode`, the `ActionMenu` can be shown as a split button with an action (
144140

145141
### ActionMenu.Button <Label>Required</Label>
146142

147-
| name | type | default | required | description |
148-
| ----------- | -------------- | ------- | -------- | ---------------------------------- |
149-
| `className` | `string` | | | Sets a custom class on the element |
150-
| `children` | `ReactElement` | | |
151-
| `id` | `string` | | | Sets a custom `id` |
143+
| name | type | default | required | description |
144+
| --------------- | -------------------------------- | ----------- | -------- | ------------------------------------------------ |
145+
| `className` | `string` | | | Sets a custom class on the element |
146+
| `children` | `ReactElement` | | | |
147+
| `id` | `string` | | | Sets a custom `id` |
148+
| `variant` | <ActionMenuButtonVariantsProp /> | | `false` | Sets the button styling variation |
149+
| `onClick` | `(event: MouseEvent) => void` | `undefined` | `false` | Handles activation of the button |
150+
| `leadingVisual` | `ReactElement` | `undefined` | `false` | Renders a leading visual before the button label |
152151

153152
### ActionMenu.Overlay <Label>Required</Label>
154153

‎apps/next-docs/content/components/ActionMenu/react.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import {ActionMenuButtonModes} from '../../../../../packages/react/src/ActionMen
66
export const ActionMenuSizesProp = () => <PropTableValues values={['small', 'medium']} commaSeparated />
77
export const ActionMenuSelectionVariantProp = () => <PropTableValues values={['single', 'none']} commaSeparated />
88
export const ActionMenuMenuAlignmentProp = () => <PropTableValues values={['start', 'end']} commaSeparated />
9+
export const ActionMenuButtonVariantsProp = () => (
10+
<PropTableValues values={['primary', 'secondary', 'subtle']} commaSeparated />
11+
)
912

1013
export const ActionMenuMenuSideProp = () => (
1114
<PropTableValues

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

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Button group
3-
description: Use the button group component to group related buttons together.
3+
description: Use the button group component to group related buttons and action menus together.
44
keywords: ['buttons', 'control', 'action', 'group', 'paired']
55
show-tabs: true
66
tab-label: React
@@ -12,14 +12,14 @@ storybook: '/brand/storybook/?path=/story/components-buttongroup--playground'
1212
import {ButtonGroupSizesProp, ButtonGroupAsProp} from './react'
1313

1414
```js
15-
import {ButtonGroup, Button} from '@primer/react-brand'
15+
import {ActionMenu, Button, ButtonGroup} from '@primer/react-brand'
1616
```
1717

1818
## Examples
1919

2020
### Default
2121

22-
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.
22+
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.
2323

2424
```jsx live
2525
<ButtonGroup>
@@ -28,9 +28,30 @@ This is the default variant for the ButtonGroup component. The first button in t
2828
</ButtonGroup>
2929
```
3030

31+
### Action menus
32+
33+
`ButtonGroup` supports up to two `Button` or `ActionMenu` children and applies a default `variant` to each one.
34+
35+
Explicit `variant` overrides to `Button` or `ActionMenu.Button` will override the default values.
36+
37+
`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.
38+
39+
```jsx live
40+
<ButtonGroup>
41+
<Button>Primary action</Button>
42+
<ActionMenu>
43+
<ActionMenu.Button>More actions</ActionMenu.Button>
44+
<ActionMenu.Overlay aria-label="More actions">
45+
<ActionMenu.Item value="contact-sales">Contact sales</ActionMenu.Item>
46+
<ActionMenu.Item value="view-pricing">View pricing</ActionMenu.Item>
47+
</ActionMenu.Overlay>
48+
</ActionMenu>
49+
</ButtonGroup>
50+
```
51+
3152
### Sizes
3253

33-
The ButtonGroup component can be rendered in different sizes in `medium` and `large` sizes. The default size is `medium`.
54+
The ButtonGroup component supports `small`, `medium`, and `large` buttons. The default size is `medium`. ActionMenu children support `small` and `medium`.
3455

3556
```jsx live
3657
<ButtonGroup buttonSize="large">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use client'
22
import {PropTableValues} from '@primer/doctocat-nextjs/components'
33

4-
export const ButtonGroupSizesProp = () => <PropTableValues values={['medium', 'large']} commaSeparated />
4+
export const ButtonGroupSizesProp = () => <PropTableValues values={['small', 'medium', 'large']} commaSeparated />
55
export const ButtonGroupAsProp = () => <PropTableValues values={['button', 'a']} commaSeparated />

‎apps/next-docs/content/components/Hero/react.mdx‎

Lines changed: 82 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
} from './react'
1919

2020
```js
21-
import {Hero} from '@primer/react-brand'
21+
import {ActionMenu, Button, Hero} from '@primer/react-brand'
2222
```
2323

2424
## Examples
@@ -33,8 +33,36 @@ import {Hero} from '@primer/react-brand'
3333
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
3434
felis nam pulvinar risus elementum.
3535
</Hero.Description>
36-
<Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
37-
<Hero.SecondaryAction href="#">Secondary action</Hero.SecondaryAction>
36+
<Hero.ButtonGroup>
37+
<Button as="a" href="#">
38+
Primary action
39+
</Button>
40+
<Button as="a" href="#">
41+
Secondary action
42+
</Button>
43+
</Hero.ButtonGroup>
44+
</Hero>
45+
```
46+
47+
### Action menus
48+
49+
`Hero.ButtonGroup` accepts up to two `Button` or `ActionMenu` children and applies the primary variant to the first item and the secondary variant to the second. Set `variant` on `Button` or `ActionMenu.Button` to override it.
50+
51+
```jsx live
52+
<Hero>
53+
<Hero.Heading>This is my super sweet hero heading</Hero.Heading>
54+
<Hero.ButtonGroup>
55+
<Button as="a" href="#">
56+
Primary action
57+
</Button>
58+
<ActionMenu>
59+
<ActionMenu.Button>More actions</ActionMenu.Button>
60+
<ActionMenu.Overlay aria-label="More actions">
61+
<ActionMenu.Item value="contact-sales">Contact sales</ActionMenu.Item>
62+
<ActionMenu.Item value="view-pricing">View pricing</ActionMenu.Item>
63+
</ActionMenu.Overlay>
64+
</ActionMenu>
65+
</Hero.ButtonGroup>
3866
</Hero>
3967
```
4068

@@ -47,14 +75,22 @@ import {Hero} from '@primer/react-brand'
4775
<Hero>
4876
<Hero.Label>Actions</Hero.Label>
4977
<Hero.Heading>Automate your workflow from idea to production</Hero.Heading>
50-
<Hero.PrimaryAction href="#">Get started with Actions</Hero.PrimaryAction>
78+
<Hero.ButtonGroup>
79+
<Button as="a" href="#">
80+
Get started with Actions
81+
</Button>
82+
</Hero.ButtonGroup>
5183
<Hero.Image src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
5284
</Hero>
5385
<br />
5486
<Hero align="center">
5587
<Hero.Label>Actions</Hero.Label>
5688
<Hero.Heading size="2">Automate your workflow from idea to production</Hero.Heading>
57-
<Hero.PrimaryAction href="#">Get started with Actions</Hero.PrimaryAction>
89+
<Hero.ButtonGroup>
90+
<Button as="a" href="#">
91+
Get started with Actions
92+
</Button>
93+
</Hero.ButtonGroup>
5894
<Hero.Image
5995
position="inline-end"
6096
src="/images/placeholder.png"
@@ -78,7 +114,11 @@ The `GridLine` variants all feature a trailing border by default. Use `Box` if y
78114
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
79115
felis nam pulvinar risus elementum.
80116
</Hero.Description>
81-
<Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
117+
<Hero.ButtonGroup>
118+
<Button as="a" href="#">
119+
Primary action
120+
</Button>
121+
</Hero.ButtonGroup>
82122
<Hero.Image src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
83123
</Hero>
84124
```
@@ -96,7 +136,11 @@ The `GridLine` variants all feature a trailing border by default. Use `Box` if y
96136
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
97137
felis nam pulvinar risus elementum.
98138
</Hero.Description>
99-
<Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
139+
<Hero.ButtonGroup>
140+
<Button as="a" href="#">
141+
Primary action
142+
</Button>
143+
</Hero.ButtonGroup>
100144
<Hero.Image src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
101145
</Hero>
102146
```
@@ -115,7 +159,11 @@ Use [VideoPlayer](/components/VideoPlayer), a native `<video>` element or a YouT
115159
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
116160
felis nam pulvinar risus elementum.
117161
</Hero.Description>
118-
<Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
162+
<Hero.ButtonGroup>
163+
<Button as="a" href="#">
164+
Primary action
165+
</Button>
166+
</Hero.ButtonGroup>
119167
<Hero.Video>
120168
<iframe
121169
src="https://www.youtube.com/embed/fHwtrOcLAnI"
@@ -142,7 +190,11 @@ Use [VideoPlayer](/components/VideoPlayer), a native `<video>` element or a YouT
142190
<br />
143191
developer environments
144192
</Hero.Heading>
145-
<Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
193+
<Hero.ButtonGroup>
194+
<Button as="a" href="#">
195+
Primary action
196+
</Button>
197+
</Hero.ButtonGroup>
146198
</Hero>
147199
```
148200

@@ -186,8 +238,14 @@ Forwards all props from the [Heading component](/typography/Heading), including
186238

187239
Forwards `size` and `weight` props from the [Text component](/typography/Text).
188240

241+
### Hero.ButtonGroup
242+
243+
Groups up to two [Button](/components/Button) or [ActionMenu](/components/ActionMenu) children. Forwards all props from the [ButtonGroup component](/components/ButtonGroup).
244+
189245
### Hero.PrimaryAction
190246

247+
Deprecated. Use `Hero.ButtonGroup` with a `Button` child instead.
248+
191249
| name | type | default | description |
192250
| ----------- | ------------- | ------- | ----------------------------------- |
193251
| `className` | `string` | | Primary link custom class |
@@ -198,6 +256,8 @@ Forwards all props from the [Button component](/components/Button).
198256

199257
### Hero.SecondaryAction
200258

259+
Deprecated. Use `Hero.ButtonGroup` with a `Button` child instead.
260+
201261
| name | type | default | description |
202262
| ----------- | ------------- | ------- | ----------------------------------- |
203263
| `className` | `string` | | Secondary link custom class |
@@ -208,21 +268,21 @@ Forwards all props from the [Button component](/components/Button).
208268

209269
### Hero.Image
210270

211-
| name | type | default | description |
212-
| ---------- | ------------------------- | ------------- | -------------------------------------------- |
213-
| `position` | <HeroImagePositionProp /> | `'block-end'` | Controls positioning of the foreground image |
271+
| name | type | default | description |
272+
| ---------- | ------------------------------ | ------------- | ------------------------------------------------- |
273+
| `position` | <HeroImagePositionProp /> | `'block-end'` | Controls positioning of the foreground image |
274+
| `padding` | `'default'`, `'none'`, `'all'` | `'default'` | Controls padding around media in gridline layouts |
214275

215276
Forwards all props from the [Image component](/components/Image), including `src`, `alt`, and `aspectRatio`.
216277

217-
### Hero.Video
218-
219-
| name | type | default | description |
220-
| --------------- | ------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------- |
221-
| `position` | <HeroImagePositionProp /> | `'block-end'` | Controls positioning of the child video element |
222-
| `poster` | `string` | | URL of the poster image to display before video plays. When set, `posterAltText` and `posterTitle` are required |
223-
| `posterAltText` | `string` | | Alt text for the poster image. Required when `poster` is set |
224-
| `posterTitle` | `string` | | Title text displayed on the poster overlay. Required when `poster` is set |
278+
`position` and `padding` props currently only apply to `gridline` variants. The `default` Hero variant ignores non-default media padding and logs a warning during development.
225279

226-
```
280+
### Hero.Video
227281

228-
```
282+
| name | type | default | description |
283+
| --------------- | ------------------------------ | ------------- | --------------------------------------------------------------------------------------------------------------- |
284+
| `position` | <HeroImagePositionProp /> | `'block-end'` | Controls positioning of the child video element |
285+
| `padding` | `'default'`, `'none'`, `'all'` | `'default'` | Controls padding around media in gridline layouts |
286+
| `poster` | `string` | | URL of the poster image to display before video plays. When set, `posterAltText` and `posterTitle` are required |
287+
| `posterAltText` | `string` | | Alt text for the poster image. Required when `poster` is set |
288+
| `posterTitle` | `string` | | Title text displayed on the poster overlay. Required when `poster` is set |

‎apps/next-docs/content/components/Hero/react.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@ import {TextVariants, defaultTextVariant} from '@primer/react-brand'
55
export const HeroDescriptionVariantProp = () => <PropTableValues values={[...TextVariants]} addLineBreaks />
66
export const HeroDescriptionVariantPropDefault = () => <PropTableValues values={[defaultTextVariant]} />
77
export const HeroImagePositionProp = () => (
8-
<PropTableValues
9-
values={['block-end', 'block-end-padded', 'inline-end', 'inline-end-padded', 'inline-start', 'inline-start-padded']}
10-
addLineBreaks
11-
/>
8+
<PropTableValues values={['block-end', 'inline-end', 'inline-start']} addLineBreaks />
129
)
1310
export const HeroVariantProp = () => <PropTableValues values={['default', 'gridline']} addLineBreaks />

0 commit comments

Comments
 (0)