Add height, width and overflow to Popover component #6303

pksjce · 2025-07-08T01:35:00Z

Closes https://github.com/github/primer/issues/4722

As described in the issue, we have consumers who are opting for AnchoredOverlay because of width restrictions in Popover.
I added the width values as suggested. I have also added height and overflow properties as they are adjacent concerns.

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2025-07-08T01:35:04Z

🦋 Changeset detected

Latest commit: 6748644

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-07-08T01:35:28Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

Copilot

Pull Request Overview

This PR adds height, width, and overflow properties to the Popover component to address consumer needs who were previously using AnchoredOverlay due to width restrictions. The changes provide more flexible layout options for popover content.

Added width, height, and overflow props to PopoverContentProps with predefined size options
Updated PopoverContent component to handle the new props via data attributes
Added corresponding CSS rules for the new sizing and overflow behavior

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
packages/react/src/Popover/Popover.tsx	Added new props to PopoverContentProps type and updated PopoverContent component implementation
packages/react/src/Popover/Popover.stories.tsx	Updated Storybook stories to demonstrate new props and added controls for testing
packages/react/src/Popover/Popover.module.css	Added CSS rules for width, height, and overflow variants using data attributes
packages/react/src/Popover/Popover.dev.stories.tsx	Updated dev story to demonstrate overflow behavior

Copilot · 2025-07-08T01:35:40Z

packages/react/src/Popover/Popover.module.css

+    /* stylelint-disable-next-line primer/responsive-widths */
+    width: 640px;
+  }
+  &:where([data-width-xxlarge]) {


The CSS defines a xxlarge width variant, but the TypeScript interface only includes xlarge as the largest option. This creates an inconsistency where the CSS supports a size that cannot be accessed through the component API.

Copilot · 2025-07-08T01:35:40Z

packages/react/src/Popover/Popover.module.css

+    height: 256px;
+  }
+  &:where([data-height-medium]) {
+    height: 320px;    


There are trailing spaces after the semicolon on this line, which should be removed for consistency.

Suggested change

height: 320px;

height: 320px;

Copilot · 2025-07-08T01:35:40Z

packages/react/src/Popover/Popover.stories.tsx

@@ -33,6 +33,8 @@ Playground.args = {
  caret: 'top',
  open: true,
  relative: true,
+  width: 'auto',


The default args set width: 'auto', but the component implementation sets width = 'small' as the default. This inconsistency could confuse users about the actual default behavior.

Suggested change

width: 'auto',

width: 'small',

Copilot · 2025-07-08T01:35:41Z

packages/react/src/Popover/Popover.stories.tsx

@@ -33,6 +33,8 @@ Playground.args = {
  caret: 'top',
  open: true,
  relative: true,
+  width: 'auto',
+  height: 'auto',


The default args set height: 'auto', but the component implementation sets height = 'fit-content' as the default. This inconsistency could confuse users about the actual default behavior.

Suggested change

height: 'auto',

height: 'fit-content',

github-actions · 2025-07-08T01:39:08Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	91.9 KB (+0.03% 🔺)
packages/react/dist/browser.umd.js	92.23 KB (+0.14% 🔺)

francinelucca

LGTM, looks like the width changes on all our stories and is now slightly wider due to the 232 -> 256px change. I'd confirm this is ok with design before merging this since we'll experience similar changes in dotcom

francinelucca · 2025-07-09T14:43:56Z

.changeset/witty-paws-approve.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch


Suggested change

"@primer/react": patch

"@primer/react": minor

just a suggestion 🤔

Copilot AI review requested due to automatic review settings July 8, 2025 01:35

pksjce requested a review from a team as a code owner July 8, 2025 01:35

pksjce requested a review from jonrohan July 8, 2025 01:35

pksjce requested a review from mperrotti July 8, 2025 01:35

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jul 8, 2025

Copilot AI reviewed Jul 8, 2025

View reviewed changes

pksjce deployed to github-pages July 8, 2025 01:43 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6303 July 8, 2025 01:44 Inactive

pksjce force-pushed the pk/popover-width-height-overflow branch from c6834ab to f36ff28 Compare July 8, 2025 03:16

github-actions bot requested a deployment to storybook-preview-6303 July 8, 2025 03:19 Abandoned

pksjce deployed to github-pages July 8, 2025 03:28 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6303 July 8, 2025 03:28 Inactive

github-actions bot temporarily deployed to storybook-preview-6303 July 8, 2025 03:56 Inactive

pksjce deployed to github-pages July 8, 2025 04:10 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6303 July 8, 2025 04:10 Inactive

pksjce force-pushed the pk/popover-width-height-overflow branch from 7d10a6a to 49ebc1e Compare July 8, 2025 12:23

github-actions bot requested a deployment to storybook-preview-6303 July 8, 2025 12:28 Abandoned

pksjce deployed to github-pages July 8, 2025 12:37 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6303 July 8, 2025 12:37 Inactive

pksjce force-pushed the pk/popover-width-height-overflow branch from 8c9e1f0 to ef8ec56 Compare July 8, 2025 13:05

pksjce requested a review from a team as a code owner July 8, 2025 13:05

github-actions bot requested a deployment to storybook-preview-6303 July 8, 2025 13:08 Abandoned

pksjce deployed to github-pages July 8, 2025 13:18 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6303 July 8, 2025 13:18 Inactive

francinelucca approved these changes Jul 9, 2025

View reviewed changes

jonrohan approved these changes Jul 9, 2025

View reviewed changes

pksjce enabled auto-merge July 9, 2025 21:23

github-actions bot temporarily deployed to storybook-preview-6303 July 11, 2025 03:58 Inactive

pksjce requested a review from mperrotti July 13, 2025 22:53

pksjce force-pushed the pk/popover-width-height-overflow branch from 4459633 to 6b3daed Compare July 14, 2025 05:17

github-actions bot requested a deployment to storybook-preview-6303 July 14, 2025 05:24 Abandoned

pksjce deployed to github-pages July 14, 2025 05:33 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6303 July 14, 2025 05:33 Inactive

pksjce added 12 commits July 15, 2025 07:24

Add height, width and overflow to Popover component

193da45

Fix some copilot review comments

2a04fa5

Fix css linting

08e4adf

Fix some tests and lint

a9abc4c

Add back removed story

2c4e383

Update snapshots

dc3936d

Fix review comments by Mike

29636be

Fix ci

e2f9e67

Fix lint and test errors

e47439f

Add css variables for width/height

393ad31

Fix lint issues

f3bcabb

Merge with main

a5b1c3a

pksjce force-pushed the pk/popover-width-height-overflow branch from 82df9b2 to a5b1c3a Compare July 14, 2025 21:55

Create nine-ways-attend.md

6748644

github-actions bot requested a deployment to storybook-preview-6303 July 14, 2025 22:00 Abandoned

pksjce deployed to github-pages July 14, 2025 22:09 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6303 July 14, 2025 22:09 View deployment

mperrotti approved these changes Jul 15, 2025

View reviewed changes

pksjce added this pull request to the merge queue Jul 15, 2025

Merged via the queue into main with commit c77acc4 Jul 15, 2025
43 checks passed

pksjce deleted the pk/popover-width-height-overflow branch July 15, 2025 12:51

primer bot mentioned this pull request Jul 15, 2025

Release tracking #6312

Merged

llastflowers pushed a commit that referenced this pull request Jul 23, 2025

Add height, width and overflow to Popover component (#6303)

aed556e

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add height, width and overflow to Popover component #6303

Add height, width and overflow to Popover component #6303

Uh oh!

pksjce commented Jul 8, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Jul 8, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 8, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jul 8, 2025

Uh oh!

Copilot AI Jul 8, 2025

Uh oh!

Copilot AI Jul 8, 2025

Uh oh!

Copilot AI Jul 8, 2025

Uh oh!

github-actions bot commented Jul 8, 2025 •

edited

Loading

Uh oh!

francinelucca left a comment

Uh oh!

francinelucca Jul 9, 2025

Uh oh!

Uh oh!

Uh oh!

Add height, width and overflow to Popover component #6303

Add height, width and overflow to Popover component #6303

Uh oh!

Conversation

pksjce commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Jul 8, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

francinelucca left a comment

Choose a reason for hiding this comment

Uh oh!

francinelucca Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

pksjce commented Jul 8, 2025 •

edited

Loading

changeset-bot bot commented Jul 8, 2025 •

edited

Loading

github-actions bot commented Jul 8, 2025 •

edited

Loading