feat(lib): Change PopperJs to Floating UI#3502
Conversation
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR migrates OUDS Web’s positioning dependency from Popper.js to Floating UI, updating the library code, build tooling, documentation, and tests to match the new dependency and attribute conventions.
Changes:
- Replace Popper.js usage with Floating UI in core components (Tooltip/Dropdown) and introduce a new Floating UI utility module.
- Update documentation, CDN configuration keys, and migration guides to reference Floating UI instead of Popper.js.
- Adapt unit/visual tests and build scripts (Rollup externals, SRI generation, bundle size thresholds) for Floating UI.
Reviewed changes
Copilot reviewed 30 out of 31 changed files in this pull request and generated 14 comments.
Show a summary per file
| File | Description |
|---|---|
| site/src/libs/config.ts | Renames CDN config schema fields from popper* to floating_ui*. |
| site/src/content/docs/getting-started/migration.mdx | Adds migration note about switching from Popper.js to Floating UI. |
| site/src/content/docs/getting-started/migration-from-boosted.mdx | Adds migration note about switching from Popper.js to Floating UI. |
| site/src/content/docs/getting-started/javascript.mdx | Updates ESM/importmap guidance and dependency wording to Floating UI. |
| site/src/content/docs/getting-started/introduction.mdx | Updates quick-start instructions and CDN snippet to Floating UI keys. |
| site/src/content/docs/getting-started/download.mdx | Updates download/CDN notes to Floating UI. |
| site/src/content/docs/getting-started/contents.mdx | Updates bundled-dependency table/text from Popper to Floating UI. |
| site/src/content/callouts/warning-data-bs-title-vs-title.md | Updates callout wording to Floating UI. |
| site/src/components/home/GetStarted.astro | Updates homepage copy to mention Floating UI. |
| scss/_tooltip.scss | Switches tooltip placement selectors from data-popper-placement to data-bs-placement; removes a deprecation include. |
| scss/_popover.scss | Switches popover placement selectors from data-popper-placement to data-bs-placement. |
| scss/_dropdown.scss | Removes Popper-specific dropdown positioning/responsive SCSS blocks. |
| README.md | Updates README wording from Popper to Floating UI. |
| packages/sosh/config.yml | Replaces popper CDN entries with floating_ui equivalents. |
| packages/orange/config.yml | Replaces popper CDN entries with floating_ui equivalents. |
| packages/orange-compact/config.yml | Replaces popper CDN entries with floating_ui equivalents. |
| package.json | Swaps @popperjs/core peer/dev dependency to @floating-ui/dom; updates shim deps. |
| package-lock.json | Removes @popperjs/core lock entry; adds @floating-ui/* packages. |
| js/tests/visual/dropdown.html | Updates visual test label text. |
| js/tests/unit/util/floating-ui.spec.js | Adds unit tests for new Floating UI utility functions. |
| js/tests/unit/tooltip.spec.js | Updates tooltip tests for Floating UI behavior and new attributes/async show. |
| js/tests/unit/popover.spec.js | Adds/updates Popover data-api tests. |
| js/tests/unit/dropdown.spec.js | Updates dropdown tests for Floating UI behavior and new attributes; adds responsive placement tests. |
| js/src/util/floating-ui.js | Introduces Floating UI helper utilities (responsive placement parsing, media query listeners, RTL placement helpers). |
| js/src/tooltip.js | Replaces Popper integration with Floating UI computePosition/autoUpdate; adds responsive placement support and new data-api initialization. |
| js/src/popover.js | Adds Popover data-api auto-initialization wiring. |
| js/src/dropdown.js | Replaces Popper integration with Floating UI computePosition/autoUpdate; adds placement option and responsive placement parsing. |
| build/rollup.config.mjs | Updates Rollup externals/globals for @floating-ui/dom and bundling behavior. |
| build/generate-sri.mjs | Updates SRI generation input from Popper UMD to Floating UI UMD. |
| .github/dependabot.yml | Removes ignored dependency entry for @popperjs/core. |
| .bundlewatch.config.json | Updates bundle size thresholds to account for dependency switch/size changes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
MaxLardenois
left a comment
There was a problem hiding this comment.
Still think we should investigate a css version with anchor positioning for Dropdown but in the meantime LGTM
|
We need to check if this is compatible with dual mode or propose a way to make it work with the dual mode. |
Types of change
Related issues
NA
Context & Motivation
Update PopperJs to Floating UI for a newer version of the lib.
Description
Based on twbs/bootstrap#41941, update our JS and documentation to use Floating UI.
Checklists
Checklist (for Core Team only)
Progression (for Core Team only)
ouds/mainfollowing conventional commitLive previews