Skip to content

[WB-2112] POC - DO NOT REVIEW: Convert TooltipPopper to use floating-ui/react-dom#2818

Closed
jandrade wants to merge 13 commits intomainfrom
exp-floating
Closed

[WB-2112] POC - DO NOT REVIEW: Convert TooltipPopper to use floating-ui/react-dom#2818
jandrade wants to merge 13 commits intomainfrom
exp-floating

Conversation

@jandrade
Copy link
Member

@jandrade jandrade commented Oct 9, 2025

Summary:

  • Switch to floating-ui
  • Add floating support to Tooltip and Popover

Issue: https://khanacademy.atlassian.net/browse/WB-2112

Test plan:

Navigate to the Tooltip and Popover examples in Storybook and verify that they
behave as expected.

@jandrade jandrade self-assigned this Oct 9, 2025
@changeset-bot
Copy link

changeset-bot bot commented Oct 9, 2025

🦋 Changeset detected

Latest commit: e46c107

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

This PR includes changesets to release 2 packages
Name Type
@khanacademy/wonder-blocks-tooltip Major
@khanacademy/wonder-blocks-popover 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

@github-actions
Copy link
Contributor

github-actions bot commented Oct 9, 2025

Size Change: -1.34 kB (-1.23%)

Total Size: 107 kB

Filename Size Change
packages/wonder-blocks-popover/dist/es/index.js 4.42 kB +115 B (+2.67%)
packages/wonder-blocks-tooltip/dist/es/index.js 4.94 kB -1.46 kB (-22.78%) 🎉
ℹ️ View Unchanged
Filename Size
packages/wonder-blocks-accordion/dist/es/index.js 3 kB
packages/wonder-blocks-announcer/dist/es/index.js 1.74 kB
packages/wonder-blocks-badge/dist/es/index.js 1.91 kB
packages/wonder-blocks-banner/dist/es/index.js 2.01 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.92 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 755 B
packages/wonder-blocks-button/dist/es/index.js 4.25 kB
packages/wonder-blocks-card/dist/es/index.js 1.01 kB
packages/wonder-blocks-cell/dist/es/index.js 2.19 kB
packages/wonder-blocks-clickable/dist/es/index.js 2.66 kB
packages/wonder-blocks-core/dist/es/index.js 2.48 kB
packages/wonder-blocks-data/dist/es/index.js 5.48 kB
packages/wonder-blocks-dropdown/dist/es/index.js 19.4 kB
packages/wonder-blocks-form/dist/es/index.js 6.2 kB
packages/wonder-blocks-grid/dist/es/index.js 1.24 kB
packages/wonder-blocks-icon-button/dist/es/index.js 3.16 kB
packages/wonder-blocks-icon/dist/es/index.js 1.91 kB
packages/wonder-blocks-labeled-field/dist/es/index.js 3.48 kB
packages/wonder-blocks-layout/dist/es/index.js 1.63 kB
packages/wonder-blocks-link/dist/es/index.js 1.52 kB
packages/wonder-blocks-modal/dist/es/index.js 7.1 kB
packages/wonder-blocks-pill/dist/es/index.js 1.31 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.48 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.1 kB
packages/wonder-blocks-styles/dist/es/index.js 464 B
packages/wonder-blocks-switch/dist/es/index.js 1.55 kB
packages/wonder-blocks-tabs/dist/es/index.js 3.71 kB
packages/wonder-blocks-testing-core/dist/es/index.js 3.25 kB
packages/wonder-blocks-testing/dist/es/index.js 978 B
packages/wonder-blocks-theming/dist/es/index.js 384 B
packages/wonder-blocks-timing/dist/es/index.js 1.37 kB
packages/wonder-blocks-tokens/dist/es/index.js 4.99 kB
packages/wonder-blocks-toolbar/dist/es/index.js 906 B
packages/wonder-blocks-typography/dist/es/index.js 1.57 kB

compressed-size-action

@github-actions
Copy link
Contributor

github-actions bot commented Oct 9, 2025

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-ssdipunolq.chromatic.com/

Chromatic results:

Metric Total
Captured snapshots 870
Tests with visual changes 9
Total stories 726
Inherited (not captured) snapshots [TurboSnap] 0
Tests on the build 435

@jandrade jandrade changed the title [WB-2112] POC: Convert TooltipPopper to use floating-ui/react-dom [WB-2112] POC - DO NOT REVIEW: Convert TooltipPopper to use floating-ui/react-dom Oct 10, 2025
@jandrade jandrade marked this pull request as ready for review October 10, 2025 18:23
@khan-actions-bot khan-actions-bot requested a review from a team October 10, 2025 18:24
@jandrade
Copy link
Member Author

Moving to "non-draft" to test a snapshot release in frontend.

@khan-actions-bot
Copy link
Contributor

khan-actions-bot commented Oct 10, 2025

Gerald

Required Reviewers
  • @Khan/wonder-blocks for changes to package.json, pnpm-lock.yaml, pnpm-workspace.yaml, .changeset/sour-horses-melt.md, __docs__/wonder-blocks-tooltip/tooltip.stories.tsx, packages/wonder-blocks-popover/package.json, packages/wonder-blocks-tooltip/package.json, packages/wonder-blocks-popover/src/components/popover-dialog.tsx, packages/wonder-blocks-tooltip/src/components/tooltip-bubble.tsx, packages/wonder-blocks-tooltip/src/components/tooltip-popper.tsx, packages/wonder-blocks-tooltip/src/components/tooltip.tsx, packages/wonder-blocks-tooltip/src/util/ref-tracker.ts, packages/wonder-blocks-tooltip/src/util/types.ts, packages/wonder-blocks-popover/src/components/__tests__/popover-dialog.test.tsx, packages/wonder-blocks-tooltip/src/components/__tests__/tooltip-popper.test.tsx, packages/wonder-blocks-tooltip/src/components/__tests__/tooltip.integration.test.tsx

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

@github-actions
Copy link
Contributor

github-actions bot commented Oct 10, 2025

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (7fa7c6d) and published all packages with changesets to npm.

You can install the packages in frontend by running:

./dev/tools/deploy_wonder_blocks.js --tag="PR2818"

Packages can also be installed manually by running:

pnpm add @khanacademy/wonder-blocks-<package-name>@PR2818

@jandrade
Copy link
Member Author

Using a new PR for a better approach: #2826 2826

@jandrade jandrade closed this Oct 23, 2025
@jandrade jandrade deleted the exp-floating branch October 23, 2025 18:31
@codecov
Copy link

codecov bot commented Oct 23, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 0.00%. Comparing base (726cd00) to head (e46c107).
⚠️ Report is 5 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@     Coverage Diff      @@
##   main   #2818   +/-   ##
============================
============================

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 726cd00...e46c107. Read the comment docs.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants