Skip to content

Remove Popover arrows - #8581

Draft
JannesPeters wants to merge 2 commits into
primer:mainfrom
JannesPeters:jannespeters-popover-arrow-removal
Draft

JannesPeters wants to merge 2 commits into
primer:mainfrom
JannesPeters:jannespeters-popover-arrow-removal

Conversation

@JannesPeters

@JannesPeters JannesPeters commented Oct 20, 2026 •

Copy link
Copy Markdown

N/A — no linked issue.

Remove the visible arrow from Popover in every direction. Preserve the existing content alignment, dimensions, open/close interactions, caret prop, and data-caret attribute. Update the caret documentation to describe its retained alignment behavior.

Before and after

The existing PullRequestFilesToolbar product component from github/github-ui, rendered in its Storybook with the single-file-mode onboarding Popover open. These are product-component Storybook screenshots, not the live/fullstack GitHub app.

The baseline uses the Popover CSS from 0d5607c3b29ab090a0a97d1532fdc3a066a37d3d; the updated view integrates the CSS from a447de40b6ec527f1f68b6d65b1f18393a3bf9f0 through a temporary dependency source override, not browser-injected styling. Viewport, light theme, content, and open state are matched. Only the arrow changes; the existing skeleton animation was paused in both captures.

Before After
Before: the single-file-mode onboarding Popover has an arrow above the pull request files toolbar. After: the same onboarding Popover renders without an arrow, with unchanged alignment and content.

Changelog

New

  • None.

Changed

  • Popover renders without an arrow for all existing caret values; existing content alignment is unchanged.
  • Clarify the retained caret behavior in the prop documentation.

Removed

  • The visible Popover arrow. No public props or attributes are removed.

Rollout strategy

  • No changes needed in github/github-ui
  • Needs changes in github/github-ui
  • Ships with feature flag(s)
  • Not sure
  • None

An @primer/react patch changeset is included. Existing consumers retain the same API and positioning; the styling changes when the package is upgraded.

Testing & Reviewing

  • npm test -- --run Popover — passed, 19 tests.
  • npm run build — passed on a standalone rerun. The initial run alongside type-check hit an EEXIST race creating the generated directory.
  • npm run type-check — passed.
  • npm run lint — passed.
  • npm run lint:css — passed.
  • npm run format:diff — passed.
  • npm run format — passed.
  • npm run lint:fix — passed.
  • Local default story — verified rendering with no ::before/::after arrow and no visible rendering error.
  • Full unit suite and canonical Linux visual regressions — not run locally; targeted Popover behavior coverage passed. Canonical Popover visual baselines will need updating for the intentional appearance change.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@JannesPeters
JannesPeters requested a review from a team as a code owner October 20, 2026 12:52
@JannesPeters
JannesPeters requested review from siddharthkp and a balanced review from Copilot October 20, 2026 12:52
@changeset-bot

changeset-bot Bot commented Oct 20, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: a447de4

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 Patch

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

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 Needs a closer look

Canonical visual baselines need updating, and pending product-context evidence requires human visual confirmation.

1 open issue
What changed in this PR

Removes Popover’s visible arrows while preserving existing alignment and the public API.

Changes:

  • Removes arrow pseudo-element styles, retaining content offsets.
  • Clarifies the retained caret behavior.
  • Adds an @primer/react patch changeset.
File Description
packages/​react/​src/​Popover/​Popover.module.css Removes arrows while preserving alignment.
packages/​react/​src/​Popover/​Popover.docs.json Documents retained caret behavior.
.changeset/​popover-remove-arrow.md Records the appearance change.

Review effort: Balanced

Comment thread packages/react/src/Popover/Popover.module.css
Regenerate all 27 active Popover screenshots with the pinned Playwright 1.60.0 Jammy Linux browser. The three dark-dimmed captures also pick up existing text-token drift, confirmed separately with the original Popover CSS. A clean comparison run passes all 27 cases.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

This branch was successfully deployed

1 active deployment
github-pages — 5ef9f43e Deployed Oct 21, 2026 by JannesPeters via deploy-preview #30133
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants