UI: Add WithPopover and port relevant internals to use it [1/3]

[Sidnioulz]

Works towards closing #32249

What I did

Added WithPopover

• Uses react-aria and allows kb nav
• Can be used in controlled or uncontrolled fashion
• Added based interactivity test stories
• Placement conversion helpers were added to avoid breaking changes on the placement prop

Added Popover

• Base container for popovers, to be used with WithPopover
• Supports hasChrome
• Supports a built-in close button
• Rationalises the color exposed on the old tooltip to only allow accessible colour pairings

Made Link forward refs

• This is so Link can be used as a popover/tooltip trigger with react-aria

Ported Controls/Color picker to use popover

• Switched from tooltip to popover
• Refactored code as I needed ref forwarding on the swatches and it was getting a bit complex
• Fixed a bug in swatches where semi-transparent colours were shown in the wrong colorspace, resulting in loss of opacity
• Ensured both icons in the control are actual buttons with a tooltip and aria-label

Ported Select to use popover

• That's it!

Ported ContextMenu to use popover

• Removed a bunch of code to let WithTooltip do its job and moved some props back to the trigger
• Allowed tooltip placement to change slightly as we're switching from absolute positioning to a portal
• Made StatusButton forward refs for ContextMenu

Ported Sidebar Menu to use popover

• Ported to popover
• Adjusted positioning so the menu goes towards the right in desktop, which is where we have plenty of space
• Modified LayoutProvider to allow forcing desktop/mobile, solely for testing purposes in Sidebar
• Added stories to Sidebar for mobile layout

Ported RefBlocks / RefIndicators to use popover

These are the components powering composed Storybooks in the sidebar.

• Ported RefIndicatorthe "menu" to use Popover until we have WithMenu
• Fixed RefIndicator link colors in dark theme
• Fixed RefIndicator lack of focus outline in the menu
• Improved RefIndicator menu dimensions in mobile layout
• Ported RefIndicator version selection to use the Select component
• Ported RefIndicator globe icon to use the Button component
• Adjusted ErrorBlock's error tooltip width to reduce the chance of seeing an horizontal scrollbar on desktop
• Used a popover in ErrorBlock so the content can be copy/pasted more easily and feels more permanent than a tooltip
• Added stories with mobile layout and more error scenarios

Ported TagsFilter to use popover

• That's it!

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Run yarn storybook:ui
2. Open relevant stories (Overlay/Popover, Overlay/WithPopover and all changed components)
3. Attempt kb nav after opening a popover

Documentation

N/A

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch sidnioulz/issue-32249-tooltip-popover

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 7159dd5

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	57s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-09-22 17:28:52 UTC

[storybook-app-bot]

Package Benchmarks

^{Commit: 7159dd5, ran on 22 September 2025 at 17:10:43 UTC}

The following packages have significant changes to their size or dependencies:

storybook

	Before	After	Difference
Dependency count	43	43	0
Self size	31.96 MB	34.86 MB	🚨 +2.90 MB 🚨
Dependency size	17.30 MB	17.30 MB	0 B
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	187	187	0
Self size	886 KB	886 KB	🎉 -84 B 🎉
Dependency size	81.55 MB	84.46 MB	🚨 +2.90 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	169	169	0
Self size	35 KB	35 KB	🚨 +42 B 🚨
Dependency size	77.98 MB	80.88 MB	🚨 +2.90 MB 🚨
Bundle Size Analyzer	Link	Link

create-storybook

	Before	After	Difference
Dependency count	44	44	0
Self size	1.55 MB	1.55 MB	🚨 +30 B 🚨
Dependency size	49.25 MB	52.16 MB	🚨 +2.90 MB 🚨
Bundle Size Analyzer	node	node

[Sidnioulz]

Current test status as CI is down: all UT pass, almost all E2E pass. Failing:

• Onboarding addon E2E because not running in sandboxes
• MobileLayout test because popover ends up drawn under the Mobile Navigation modal (which was coded by a newcomer a few months back and has been buggy since)

I'll fix up the modals used in the relevant code paths to ensure the UI works well.

[Sidnioulz]

I've ported Modal to react-aria and fixed up the modal navigation dialogs that had been having tooltip overlap issues for a few months. This was an opportunity to remove a Radix package and replace react-transition-group by something better maintained and lighter.