Migrate popovers and tooltips to Floating UI #770
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Popover and Tooltip now uses Floating UI instead of Tippy.
https://floating-ui.com/
General changes
lazy
is no longer supported. All popovers are now lazy.appendTo
is no longer supported. All popovers are now appended to body.zIndex
is no longer supported, since we always use portals.Tooltip
Tooltip no longer supports the following props
Popover
renderTrigger
Popover now requires
renderTrigger
, which was previouslychildren
.renderTrigger
provides an argument object with props that should be passed to the button, or whatever HTML element is used as the trigger.The props sent to the trigger element contain listeners for onClick, onFocus, etc, depending on what the
trigger
prop has been set to.It also sets up the visual anchoring, so that the floating element is aligned correctly, and the arrow points at the anchor.
children
The
children
prop is now the content of the popover, thecontent
prop has been removed.It can be normal JSX, or it can be a function. If it is a function, it gets passed
an object as an argument, containing
onRequestClose
. This can be used within the popoverif some interaction in the popover (User clicks "Cancel" for example) wants to close it.
Removed props
Popover no longer supports the following props
ControlledPopover
This is a new component. It works like Popover, but does not have triggers or state.
You must use
open
andonRequestClose
props to control it.