Update components using Popper to optionally use Floating UI

[nicolethoen]

1. Problem Statement & Goal

What problem are we solving or opportunity are we seizing for our users?

PatternFly React's component library relies on the outdated Popper.js library for positioning dropdowns, tooltips, and popovers. This library has been deprecated in favor of Floating UI, which offers significant performance and feature enhancements. We have an opportunity to modernize our library's foundation, providing a more performant and maintainable solution for our users without any breaking changes to the public API.

This specifically impacts our developer persona, who uses our components to build applications. For them, a more performant and actively maintained library means better application performance, a smaller bundle size, and long-term stability. This migration also reduces the technical debt for the PatternFly team, enabling faster development of new components and easier maintenance.

What's our main objective?

To enable our developer persona to build more performant applications by migrating the PatternFly React library from Popper.js to Floating UI, resulting in a significant reduction in bundle size and improved runtime performance.

How will we measure success?

Zero Breaking Changes: A successful migration will have a 100% compatible public API, verified by automated and manual testing, and will not require any changes from our users.

Quality: We will see no increase in bug reports related to component positioning, collision detection, or event handling after the full rollout.

2. Scope & Completion

High-Level Acceptance Criteria / Definition of Done:

All 15+ components that currently use Popper.js have been successfully migrated to use the new Floating UI wrapper internally.

The FloatingUIPopper wrapper is a complete, drop-in replacement that fully supports all existing props and behaviors of the legacy Popper component.

The solution will be an opt-in, allowing for a gradual, controlled rollout and instant rollback.
Comprehensive visual regression, unit, and integration tests are in place to ensure identical behavior and appearance.

Foundation Setup:

[Story] Implement comprehensive prop mapping between Popper and Floating UI.

Component-by-Component Migration (in priority order):

[Story] Migrate Select component to use the Floating UI wrapper.

[Story] Migrate Dropdown component to use the Floating UI wrapper.

[Story] Migrate Popover component to use the Floating UI wrapper.

[Story] Migrate Tooltip component to use the Floating UI wrapper.

[Story] Migrate SearchInput component to use the Floating UI wrapper.

[Story] Migrate remaining 10+ components to use the Floating UI wrapper.

3. Risks & Testing

Potential Risks:

API Mapping Incompatibilities: A minor behavior or edge case may exist in the legacy Popper API that is not fully replicated by the new Floating UI wrapper.

Rollout Issues: The gradual rollout could be challenging to manage, and a full rollback may be required if a critical bug is found in production.

Testing Strategy:

Intermediate Testing:

Phase 1 & 2: After the FloatingUIPopper wrapper is complete, it will include comprehensive test coverage to ensure the new solution maps to the feature sets and API of the Popper implementation.

Phase 3 (Per Component): Each component migration will be followed by a full visual regression test to catch any layout shifts or visual glitches.

4. Supporting Information & Communication

Key Relevant Links:

[Technical Design Document] Popper to Floating UI Migration Plan

Communication Plan:

Weekly Updates: The team will present updates on the migration in weekly scrum calls, focusing on key milestones and showing off migrated components.

Release Notes: Clear, concise release notes will be drafted to inform developers of the underlying change and its benefits.

5. Effort & Open Questions

Estimated Level of Effort:

~3-4 weeks total, assuming 2 developers working on it (with some grace time available for Code review. An upcoming code freeze might impact the timeline for delivery here.

This is broken down into:
Phase 1: ~1 week (Foundation)
Phase 2: ~2 weeks (Component Migration & testing)

Open Questions:

What is the process for monitoring user-facing performance metrics during the gradual rollout?

Are there any external teams or projects that have hard dependencies on the legacy Popper.js that we should be aware of? This plan does not include removing the Popper dependency. That'll have to be reserved for a future breaking change, when FloatingUI is the default implementation.