Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate popovers and tooltips to Floating UI #770

Merged
merged 6 commits into from
Aug 23, 2024
Merged

Conversation

mattias800
Copy link
Collaborator

@mattias800 mattias800 commented Aug 22, 2024

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

  • trigger
  • disabled
  • appendTo
  • zIndex

Popover

renderTrigger

Popover now requires renderTrigger, which was previously children.
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, the content 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 popover
if some interaction in the popover (User clicks "Cancel" for example) wants to close it.

Removed props

Popover no longer supports the following props

  • disabled
  • content
  • theme
  • variant
  • lazy
  • appendTo
  • Index

ControlledPopover

This is a new component. It works like Popover, but does not have triggers or state.
You must use open and onRequestClose props to control it.

@mattias800 mattias800 added enhancement New feature or request dependencies Update one or more dependencies version major Increment the major version when merged labels Aug 22, 2024
Copy link

github-actions bot commented Aug 22, 2024

Size Change: 0 B

Total Size: 379 kB

ℹ️ View Unchanged
Filename Size
packages/calendar/dist/index.es.js 22.1 kB
packages/calendar/dist/index.js 18.5 kB
packages/core/dist/index.es.js 8.87 kB
packages/core/dist/index.js 6.91 kB
packages/elements/dist/index.es.js 102 kB
packages/elements/dist/index.js 99.5 kB
packages/filter/dist/index.es.js 3.68 kB
packages/filter/dist/index.js 3.02 kB
packages/forms/dist/index.es.js 8.62 kB
packages/forms/dist/index.js 7.8 kB
packages/grid-export/dist/index.es.js 1.89 kB
packages/grid-export/dist/index.js 1.79 kB
packages/grid/dist/index.es.js 24.5 kB
packages/grid/dist/index.js 20.2 kB
packages/input-mask/dist/index.es.js 714 B
packages/input-mask/dist/index.js 615 B
packages/modal/dist/index.es.js 6.54 kB
packages/modal/dist/index.js 5.84 kB
packages/panels/dist/index.es.js 6.85 kB
packages/panels/dist/index.js 5.95 kB
packages/redux/dist/index.es.js 2.98 kB
packages/redux/dist/index.js 2.62 kB
packages/select/dist/index.es.js 4.52 kB
packages/select/dist/index.js 3.84 kB
packages/theme/dist/index.es.js 2.03 kB
packages/theme/dist/index.js 2.07 kB
packages/tooltip/dist/index.es.js 2.94 kB
packages/tooltip/dist/index.js 2.39 kB

compressed-size-action

…as already supported by Floating UI, so just had to add the types.

- That fixes the TODOs.
@mattias800 mattias800 merged commit 8255df6 into master Aug 23, 2024
6 checks passed
@mattias800 mattias800 deleted the feature/floatin-ui branch August 23, 2024 07:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies Update one or more dependencies version enhancement New feature or request major Increment the major version when merged
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants