From 67dff3d9b2c2262e098e92728b1d60a4feb4acbe Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Mon, 29 Jun 2026 10:48:09 +0200 Subject: [PATCH 1/9] Fix Tiles layout --- packages/react/src/Tiles/Tiles.module.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react/src/Tiles/Tiles.module.css b/packages/react/src/Tiles/Tiles.module.css index 172478876..d7b084d72 100644 --- a/packages/react/src/Tiles/Tiles.module.css +++ b/packages/react/src/Tiles/Tiles.module.css @@ -19,6 +19,12 @@ } } +@media screen and (min-width: 34rem) and (max-width: 47.99rem) { + .Tiles-grid { + --tiles-columns: 3; + } +} + @media screen and (min-width: 63.25rem) { .Tiles--layout-default .Tiles-grid { --tiles-columns: 6; From c273ed1c048a34519377ed6da763c7c61f7de1e5 Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Mon, 29 Jun 2026 10:48:09 +0200 Subject: [PATCH 2/9] Fix Pillar icons --- packages/react/src/Pillar/Pillar.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react/src/Pillar/Pillar.module.css b/packages/react/src/Pillar/Pillar.module.css index 3d8bd40a4..68121d8d0 100644 --- a/packages/react/src/Pillar/Pillar.module.css +++ b/packages/react/src/Pillar/Pillar.module.css @@ -40,6 +40,10 @@ margin-bottom: var(--base-size-48); } +.Pillar__icon--with-background { + border-radius: var(--base-size-12); +} + .Pillar__icon--with-background > svg { width: 100%; height: 100%; From 086e15e39989d773c9ef67807f55f7db3fd2ce5a Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Mon, 29 Jun 2026 10:48:09 +0200 Subject: [PATCH 3/9] Fix Statistic color --- packages/react/src/Statistic/Statistic.examples.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/Statistic/Statistic.examples.stories.tsx b/packages/react/src/Statistic/Statistic.examples.stories.tsx index e2735ff57..dd710e498 100644 --- a/packages/react/src/Statistic/Statistic.examples.stories.tsx +++ b/packages/react/src/Statistic/Statistic.examples.stories.tsx @@ -133,7 +133,7 @@ export const SocialProof: Story = { style={{flex: 1, display: 'flex', alignItems: 'center'}} > - + 39% From 07710622ccf575d1bdb53bf00f26624c8679143e Mon Sep 17 00:00:00 2001 From: Daniel Guillan Date: Mon, 29 Jun 2026 10:48:09 +0200 Subject: [PATCH 4/9] Fix VideoPlayer controls --- .changeset/bright-tiles-play.md | 5 ++ .../content/components/VideoPlayer/index.mdx | 42 +++++++++----- .../VideoPlayer.features.stories.tsx | 7 +++ .../src/VideoPlayer/VideoPlayer.module.css | 12 ++++ .../VideoPlayer/VideoPlayer.module.css.d.ts | 2 + .../src/VideoPlayer/VideoPlayer.stories.tsx | 9 +++ .../src/VideoPlayer/VideoPlayer.test.tsx | 55 +++++++++++++++++++ .../react/src/VideoPlayer/VideoPlayer.tsx | 42 +++++++++----- .../react/src/VideoPlayer/hooks/useVideo.tsx | 10 +++- 9 files changed, 155 insertions(+), 29 deletions(-) create mode 100644 .changeset/bright-tiles-play.md diff --git a/.changeset/bright-tiles-play.md b/.changeset/bright-tiles-play.md new file mode 100644 index 000000000..4a3058372 --- /dev/null +++ b/.changeset/bright-tiles-play.md @@ -0,0 +1,5 @@ +--- +'@primer/react-brand': patch +--- + +Fix several Brand Refactor QA issues across Tiles, Pillar, Statistic, and VideoPlayer. diff --git a/apps/next-docs/content/components/VideoPlayer/index.mdx b/apps/next-docs/content/components/VideoPlayer/index.mdx index 684ed46ab..f424b2469 100644 --- a/apps/next-docs/content/components/VideoPlayer/index.mdx +++ b/apps/next-docs/content/components/VideoPlayer/index.mdx @@ -99,6 +99,17 @@ The audio description can be provided as part of the existing soundtrack, or via ``` +## Autoplay with bottom controls + +Autoplaying videos hide the large center play button overlay. Use `controlsPosition="bottom"` to place the controls bar at the bottom of the video. + +```jsx live + + + + +``` + ## Minimal ```jsx live @@ -200,21 +211,22 @@ Below is a detailed description of each property and method available in the `us `VideoPlayer` provides a React alternative to the native HTML `