Feat: popover implement click outside #7063

francinelucca · 2025-10-23T14:32:54Z

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

Changelog

New

Add onClickOutside, ignoreClickRefs to Popover.Content to allow closing the Popover on click outside

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-10-23T14:32:57Z

🦋 Changeset detected

Latest commit: 6aa3071

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

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Minor
@primer/styled-react	Major

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

Updated the version of @primer/react from patch to minor and added a feature for popover to implement click outside.

github-actions · 2025-10-23T14:33:29Z

👋 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 click-outside functionality to the Popover component, allowing popovers to be closed when users click outside the popover content. It introduces two new props (onClickOutside and ignoreClickRefs) to Popover.Content that leverage the existing useOnOutsideClick hook.

Key changes:

Added onClickOutside callback and ignoreClickRefs props to Popover.Content
Created a feature story demonstrating the click-outside behavior
Fixed unrelated CSS issue in PageLayout where wrapper dimensions weren't matching Root

Reviewed Changes

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

Show a summary per file

File	Description
packages/react/src/Popover/Popover.tsx	Implemented click-outside detection using `useOnOutsideClick` hook with new props
packages/react/src/Popover/Popover.features.stories.tsx	Added interactive story demonstrating click-outside functionality with toggle button
packages/react/src/Popover/Popover.docs.json	Documented the new `onClickOutside` and `ignoreClickRefs` props
packages/react/src/PageLayout/PageLayout.module.css	Fixed wrapper dimensions to match Root (unrelated change)
e2e/components/Popover.test.ts	Added e2e test entry for the new close-on-click-outside story

packages/react/src/Popover/Popover.tsx

Copilot · 2025-10-23T14:34:40Z

@francinelucca I've opened a new pull request, #7064, to work on those changes. Once the pull request is ready, I'll request review from you.

Co-authored-by: Copilot <[email protected]>

…mer/react into feat/popover-implement-click-outside

… re-renders (#7064) Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: francinelucca <[email protected]>

…mer/react into feat/popover-implement-click-outside

primer-integration · 2025-10-29T00:55:05Z

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/5837

primer-integration · 2025-10-29T01:15:57Z

🟢 ci completed with status success.

francinelucca added 2 commits October 22, 2025 23:32

chore(PageLayout): update wrapper dimensions

e03c86d

feat(Popover): support close on click outside

ac2bdd8

francinelucca requested a review from a team as a code owner October 23, 2025 14:32

francinelucca requested review from TylerJDev and Copilot October 23, 2025 14:32

Change @primer/react version to minor and add popover feature

d42c329

Updated the version of @primer/react from patch to minor and added a feature for popover to implement click outside.

github-actions bot added the staff Author is a staff member label Oct 23, 2025

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 Oct 23, 2025

Copilot AI reviewed Oct 23, 2025

View reviewed changes

packages/react/src/Popover/Popover.tsx Outdated Show resolved Hide resolved

packages/react/src/Popover/Popover.tsx Outdated Show resolved Hide resolved

Copilot AI mentioned this pull request Oct 23, 2025

fix(Popover): use stable empty array reference to prevent unnecessary re-renders #7064

Merged

Update packages/react/src/Popover/Popover.tsx

4583ef3

Co-authored-by: Copilot <[email protected]>

github-actions bot requested a deployment to storybook-preview-7063 October 23, 2025 14:37 Abandoned

francinelucca added 3 commits October 23, 2025 10:39

remove unused import

b965c43

Merge branch 'feat/popover-implement-click-outside' of github.com:pri…

b29a043

…mer/react into feat/popover-implement-click-outside

fix default function

ee37caf

github-actions bot requested a deployment to storybook-preview-7063 October 23, 2025 14:43 Abandoned

francinelucca deployed to github-pages October 23, 2025 14:51 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7063 October 23, 2025 14:52 Inactive

fix(Popover): use stable empty array reference to prevent unnecessary…

b6be2d2

… re-renders (#7064) Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: francinelucca <[email protected]>

francinelucca deployed to github-pages October 23, 2025 15:15 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7063 October 23, 2025 15:15 Inactive

francinelucca added 2 commits October 23, 2025 13:15

lint fix

ef44f25

Merge branch 'feat/popover-implement-click-outside' of github.com:pri…

1cb8b18

…mer/react into feat/popover-implement-click-outside

francinelucca added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 23, 2025

Merge branch 'main' into feat/popover-implement-click-outside

bb3fcde

github-actions bot temporarily deployed to storybook-preview-7063 October 23, 2025 17:58 Inactive

francinelucca removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 23, 2025

github-actions bot requested a deployment to storybook-preview-7063 October 23, 2025 20:53 Abandoned

Merge branch 'main' into feat/popover-implement-click-outside

1a7936e

francinelucca removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 24, 2025

francinelucca deployed to github-pages October 24, 2025 13:51 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7063 October 24, 2025 13:52 Inactive

francinelucca added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 24, 2025

test(vrt): update snapshots

9f55312

primer bot requested a review from a team as a code owner October 24, 2025 14:34

primer bot requested a review from mperrotti October 24, 2025 14:34

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 24, 2025

primer bot deployed to github-pages October 24, 2025 14:44 View deployment

github-actions bot temporarily deployed to storybook-preview-7063 October 24, 2025 14:44 Inactive

Merge branch 'main' into feat/popover-implement-click-outside

af354c6

francinelucca deployed to github-pages October 24, 2025 19:06 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7063 October 24, 2025 19:07 Inactive

TylerJDev approved these changes Oct 28, 2025

View reviewed changes

Merge branch 'main' into feat/popover-implement-click-outside

6aa3071

francinelucca deployed to github-pages October 29, 2025 00:27 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-7063 October 29, 2025 00:27 View deployment

github-actions bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Oct 29, 2025

github-actions bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels Oct 29, 2025

francinelucca added this pull request to the merge queue Oct 29, 2025

Merged via the queue into main with commit 247c66a Oct 29, 2025
43 checks passed

francinelucca deleted the feat/popover-implement-click-outside branch October 29, 2025 01:29

primer bot mentioned this pull request Oct 29, 2025

Release tracking (38.1.0) #7096

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feat: popover implement click outside #7063

Feat: popover implement click outside #7063

Uh oh!

francinelucca commented Oct 23, 2025

Uh oh!

changeset-bot bot commented Oct 23, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 23, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI commented Oct 23, 2025

Uh oh!

primer-integration bot commented Oct 29, 2025

Uh oh!

primer-integration bot commented Oct 29, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Feat: popover implement click outside #7063

Feat: popover implement click outside #7063

Uh oh!

Conversation

francinelucca commented Oct 23, 2025

Changelog

New

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Oct 23, 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 Oct 23, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI commented Oct 23, 2025

Uh oh!

primer-integration bot commented Oct 29, 2025

Uh oh!

primer-integration bot commented Oct 29, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Oct 23, 2025 •

edited

Loading