Skip to content

feat(lib): Change PopperJs to Floating UI#3502

Open
louismaximepiton wants to merge 7 commits intoouds/main-lmp-remove-jqueryfrom
ouds/main-lmp-change-popperjs-to-floatingui
Open

feat(lib): Change PopperJs to Floating UI#3502
louismaximepiton wants to merge 7 commits intoouds/main-lmp-remove-jqueryfrom
ouds/main-lmp-change-popperjs-to-floatingui

Conversation

@louismaximepiton
Copy link
Copy Markdown
Member

@louismaximepiton louismaximepiton commented Apr 8, 2026

Types of change

  • Non-breaking change
  • Breaking change (fix or feature that would change existing functionality and usage)

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

  • I have read the contributing guidelines
  • My change follows the developer guide
  • My change pass all tests
  • My change is compatible with a responsive display
  • I have added tests (Javascript unit test or visual) to cover my changes
  • My change introduces changes to the documentation that I have updated accordingly
    • Title and DOM structure is correct
    • Links have been updated (title changes impact links)
    • CSS for the documentation
  • I have checked all states and combinations of the component with my change
  • I have checked all the impacts for the other components and core behavior (grid, reboot, utilities)

Checklist (for Core Team only)

  • The changes need to be in the migration guide
  • The changes are well displayed in Storybook (be careful if example order has changed for DSM)
  • The changes are compatible with RTL
  • Manually test browser compatibility with BrowserStack (Chrome 120, Firefox 121, Edge 120, Safari 15.6, iOS Safari, Chrome & Firefox on Android)

Progression (for Core Team only)

Live previews

@netlify
Copy link
Copy Markdown

netlify bot commented Apr 8, 2026

Deploy Preview for boosted ready!

Name Link
🔨 Latest commit a1ef2e9
🔍 Latest deploy log https://app.netlify.com/projects/boosted/deploys/69d750d749a8b9000875f080
😎 Deploy Preview https://deploy-preview-3502--boosted.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

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

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.

Comment thread js/src/util/floating-ui.js Outdated
Comment thread js/src/tooltip.js
Comment thread js/src/tooltip.js
Comment thread js/src/tooltip.js
Comment thread js/src/dropdown.js
Comment thread packages/sosh/config.yml
Comment thread packages/orange/config.yml
Comment thread packages/orange-compact/config.yml
Comment thread js/tests/unit/util/floating-ui.spec.js Outdated
Comment thread .github/dependabot.yml
@louismaximepiton louismaximepiton marked this pull request as draft April 8, 2026 11:19
@louismaximepiton louismaximepiton marked this pull request as ready for review April 8, 2026 15:28
Copy link
Copy Markdown
Collaborator

@MaxLardenois MaxLardenois left a comment

Choose a reason for hiding this comment

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

Still think we should investigate a css version with anchor positioning for Dropdown but in the meantime LGTM

@boosted-bot boosted-bot moved this from Need Dev Review to Need Lead Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

Status: Need Lead Dev Review

Development

Successfully merging this pull request may close these issues.

5 participants