filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.

Home Page:https://filamentphp.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Move to Alpine.js Anchor plugin

zepfietje opened this issue · comments

Replaces the following direct dependencies: tippy.js, alpine-floating-ui, and alpine-tooltip.

Replaces #8701.

Donate 💰 to fund this issue

  • You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
  • 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
  • Thank you in advance for helping us make maintenance sustainable!
Fund with Polar

@awcodes are there any differences between your plugin and the Alpine.js one?

Asking since Livewire ships with the Alpine.js plugin and we're also going to move to the Alpine.js Sort plugin.

Anchor is a lot less flexible. It only offers placement and offset settings and it requires more manual set up. Also, to my knowledge it isn't a11y compatible out of the box.

Alright, thanks for clarifying, @awcodes!

Something else to keep in mind with this is that anchor fundamentally operates in a different way than we are using the floating ui plugin. Anchor just says attach this element to this other element vs this element has a drop down component. If that makes sense. So, switching to anchor will lose the context and ability to use the open/close/toggle methods which are embedded with the floating ui alpine plugin. More importantly the biggest issue i see is that anchor doesn't support teleport which it looks like every instance of the floating ui implementation is using by default so we could run into a lot of z index issues.

Thanks for the clear summary, @awcodes!

I agree the missing teleport feature is a deal-breaker.
However, maybe we could use HTML's popover API?