Skip to content

Commit 77eb29a

Browse files
rezrahrezrah
committed
Merge branch 'main' of github.com:primer/brand into rezrah/action-menu-updates
2 parents 4b787ce + 5a29cf5 commit 77eb29a

87 files changed

Lines changed: 303 additions & 75 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/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/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

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

6.23 KB
Loading

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {render, cleanup} from '@testing-library/react'
1+
import {render, cleanup} from '@testing-library/react'
22
import '@testing-library/jest-dom'
33

44
import {ButtonGroup} from './ButtonGroup'
@@ -26,6 +26,19 @@ describe('ButtonGroup', () => {
2626
expect(buttonGroupEl.classList).toContain(expectedClass)
2727
})
2828

29+
it('forwards a custom className alongside the default class', () => {
30+
const {getByTestId} = render(
31+
<ButtonGroup data-testid="test" className="custom-button-group">
32+
<Button>Primary Action</Button>
33+
<Button>Secondary Action</Button>
34+
</ButtonGroup>,
35+
)
36+
37+
const buttonGroupEl = getByTestId('test')
38+
expect(buttonGroupEl).toHaveClass('ButtonGroup')
39+
expect(buttonGroupEl).toHaveClass('custom-button-group')
40+
})
41+
2942
it('renders buttons with the correct element type when buttonAs is set', () => {
3043
const expectedTag = 'a'
3144

‎packages/react/src/ButtonGroup/ButtonGroup.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, {forwardRef, type Ref} from 'react'
2+
import {clsx} from 'clsx'
23
import type {BaseProps} from '../component-helpers'
34
import {Button, ButtonProps} from '../Button'
45
import styles from './ButtonGroup.module.css'
@@ -29,7 +30,7 @@ export const ButtonGroup = forwardRef(
2930
.slice(0, 2)
3031

3132
return (
32-
<section ref={ref} className={styles.ButtonGroup} {...props}>
33+
<section ref={ref} {...props} className={clsx(styles.ButtonGroup, className)}>
3334
{buttonsToRender as React.ReactElement[]}
3435
</section>
3536
)

0 commit comments

Comments
 (0)