Skip to content

Commit 02f8c6a

Browse files
rezrahrezrah
committed
Merge branch 'main' of github.com:primer/brand into rezrah/update-mcp-server-again
2 parents 414f152 + bbbc4b3 commit 02f8c6a

96 files changed

Lines changed: 560 additions & 96 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.

‎.changeset/fix-action-menu-split-button-click.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
'@primer/react-brand': minor
3+
---
4+
5+
Multiple `ActionMenu` component updates:
6+
7+
- Calls consumer-provided `onClick` handlers in default and split-button modes.
8+
- ⚠️ Breaking change to `ActionMenu.Button` in split-button mode. Custom HTML attributes are now correctly forwarded to the primary action instead of the menu toggle. This was the originally intended behavior.
9+
- Forwards the `variant` prop in `default` mode correctly. `ActionMenu` can now render in all available `Button` variants.
10+
- Forwards the `leadingVisual` prop in `default` mode.

‎.changeset/pagination-labels-prop.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
'@primer/react-brand': patch
3+
---
4+
5+
Added a `labels` prop to the `Pagination` component for customizing the user-facing labels of the previous and next controls.
6+
7+
```jsx
8+
<Pagination
9+
pageCount={10}
10+
currentPage={2}
11+
labels={{prev: 'Précédent', next: 'Suivant', prevAriaLabel: 'Page précédente', nextAriaLabel: 'Page suivante'}}
12+
/>
13+
```

‎.changeset/smart-wolves-pause.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react-brand': patch
3+
---
4+
5+
Removed the non-functional `VideoPlayer` `showControlsWhenPaused` prop from the public API and documentation.

‎.changeset/soft-banners-sparkle.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@primer/react-brand': patch
3+
---
4+
5+
- Restored rounded corners to `CTABanner` while preserving square edges when grid lines are enabled.
6+
- Improved `ButtonGroup` to forward custom class names alongside its default styles.

‎.changeset/soft-clouds-shift.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react-brand': patch
3+
---
4+
5+
Updated `SectionIntroStacked` layout spacing for improved visual alignment.

‎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/Pagination/index.mdx‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -69,17 +69,35 @@ render(<App />)
6969
/>
7070
```
7171

72+
### Custom button labels
73+
74+
Use the `labels` prop to customize the visible text of the previous and next controls. When localizing content, remember to also set the matching `prevAriaLabel` and `nextAriaLabel` labels so that the accessible names stay in sync with the visible text.
75+
76+
```jsx live
77+
<Pagination
78+
pageCount={3}
79+
currentPage={2}
80+
labels={{
81+
prev: 'Précédent',
82+
next: 'Suivant',
83+
prevAriaLabel: 'Page précédente',
84+
nextAriaLabel: 'Page suivante',
85+
}}
86+
/>
87+
```
88+
7289
## Component props
7390

7491
### Pagination <Label>Required</Label>
7592

76-
| name | type | default | required | description |
77-
| ----------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
78-
| `pageCount` | `number` | | `true` | The total number of pages |
79-
| `currentPage` | `number` | | `true` | The current page number |
80-
| `onPageChange` | `(e: React.MouseEvent, n: number) => void` | | `false` | Callback function for when the page changes |
81-
| `hrefBuilder` | `(n: number) => string` | | `false` | Function to build the href for each page |
82-
| `pageAttributesBuilder` | `(n: number, page: PaginationPageType) => {[attributeName: string]: string}` | | `false` | Forward custom attributes to pagination items. |
83-
| `marginPageCount` | `number` | | `false` | Defines how many pages are to be displayed on the left and right of the component. Will be reduced on narrow viewports. |
84-
| `showPages` | `boolean` | | `false` | Whether to show the page numbers |
85-
| `surroundingPageCount` | `number` | | `false` | The number of pages to show on each side of the current page. Will be hidden on narrow viewports. |
93+
| name | type | default | required | description |
94+
| ----------------------- | -------------------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
95+
| `pageCount` | `number` | | `true` | The total number of pages |
96+
| `currentPage` | `number` | | `true` | The current page number |
97+
| `onPageChange` | `(e: React.MouseEvent, n: number) => void` | | `false` | Callback function for when the page changes |
98+
| `hrefBuilder` | `(n: number) => string` | | `false` | Function to build the href for each page |
99+
| `pageAttributesBuilder` | `(n: number, page: PaginationPageType) => {[attributeName: string]: string}` | | `false` | Forward custom attributes to pagination items. |
100+
| `marginPageCount` | `number` | | `false` | Defines how many pages are to be displayed on the left and right of the component. Will be reduced on narrow viewports. |
101+
| `showPages` | `boolean` | | `false` | Whether to show the page numbers |
102+
| `surroundingPageCount` | `number` | | `false` | The number of pages to show on each side of the current page. Will be hidden on narrow viewports. |
103+
| `labels` | `{prev?: string; next?: string; prevAriaLabel?: string; nextAriaLabel?: string}` | | `false` | Custom text and accessible labels for the previous and next controls. Provide any subset. |

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

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -90,19 +90,10 @@ The audio description can be provided as part of the existing soundtrack, or via
9090
</VideoPlayer>
9191
```
9292

93-
## Hide controls when paused
94-
95-
```jsx live
96-
<VideoPlayer title="GitHub media player" showControlsWhenPaused={false}>
97-
<VideoPlayer.Source src="/example.mp4" type="video/mp4" />
98-
<VideoPlayer.Track src="/example.vtt" default />
99-
</VideoPlayer>
100-
```
101-
10293
## Minimal
10394

10495
```jsx live
105-
<VideoPlayer title="GitHub media player" visuallyHiddenTitle showBranding={false} showControlsWhenPaused={false}>
96+
<VideoPlayer title="GitHub media player" visuallyHiddenTitle showBranding={false}>
10697
<VideoPlayer.Source src="/example.mp4" type="video/mp4" />
10798
<VideoPlayer.Track src="/example.vtt" default />
10899
</VideoPlayer>
@@ -200,21 +191,20 @@ Below is a detailed description of each property and method available in the `us
200191

201192
`VideoPlayer` provides a React alternative to the native HTML `<video />`.
202193

203-
| Name | Type | Default | Required | Description |
204-
| :----------------------- | :------------------------------------- | :-----: | :------: | :-------------------------------------------------------------- |
205-
| `children` | `React.ReactNode`, `React.ReactNode[]` | | `true` | Takes `<VideoPlayer.Source>` and `<VideoPlayer.Track>` elements |
206-
| `title` | `string` | | `true` | Sets the title of the video |
207-
| `visuallyHiddenTitle` | `boolean` | | `false` | Visually hides the title of the video in the upper-left corner |
208-
| `showBranding` | `boolean` | `true` | `false` | Displays GitHub branding next to video title |
209-
| `poster` | `string` | | `false` | Sets an image as the starting frame for the video element |
210-
| `className` | `string` | | `false` | Sets a custom class on the `<video>` element |
211-
| `showControlsWhenPaused` | `boolean` | `true` | `false` | Show the video controls when paused |
212-
| `showPlayPauseButton` | `boolean` | `true` | `false` | Show the play button control |
213-
| `showSeekControl` | `boolean` | `true` | `false` | Show the seek control |
214-
| `showCCButton` | `boolean` | `true` | `false` | Show the closed caption toggle control |
215-
| `showMuteButton` | `boolean` | `true` | `false` | Show the mute button control |
216-
| `showVolumeControl` | `boolean` | `true` | `false` | Show the volume control |
217-
| `showFullScreenButton` | `boolean` | `true` | `false` | Show the full screen button control |
194+
| Name | Type | Default | Required | Description |
195+
| :--------------------- | :------------------------------------- | :-----: | :------: | :-------------------------------------------------------------- |
196+
| `children` | `React.ReactNode`, `React.ReactNode[]` | | `true` | Takes `<VideoPlayer.Source>` and `<VideoPlayer.Track>` elements |
197+
| `title` | `string` | | `true` | Sets the title of the video |
198+
| `visuallyHiddenTitle` | `boolean` | | `false` | Visually hides the title of the video in the upper-left corner |
199+
| `showBranding` | `boolean` | `true` | `false` | Displays GitHub branding next to video title |
200+
| `poster` | `string` | | `false` | Sets an image as the starting frame for the video element |
201+
| `className` | `string` | | `false` | Sets a custom class on the `<video>` element |
202+
| `showPlayPauseButton` | `boolean` | `true` | `false` | Show the play button control |
203+
| `showSeekControl` | `boolean` | `true` | `false` | Show the seek control |
204+
| `showCCButton` | `boolean` | `true` | `false` | Show the closed caption toggle control |
205+
| `showMuteButton` | `boolean` | `true` | `false` | Show the mute button control |
206+
| `showVolumeControl` | `boolean` | `true` | `false` | Show the volume control |
207+
| `showFullScreenButton` | `boolean` | `true` | `false` | Show the full screen button control |
218208

219209
The component API supports all standard HTML attribute props, while providing some additional behavior as described above.
220210

‎apps/next-docs/public/images/thumbnails/card-thumbnail-dark.png‎

5.93 KB
Loading

0 commit comments

Comments
 (0)