Description
Warning
While we prep and plan for Skeleton v3, we're going to implement a feature freeze on the current popup implementation. This helps prevent redundant effort and avoids pushing out the goalpost even further.
This acts as a centralize HUB for requests related to popups, popovers, drop-downs, tooltips, and similar UI patterns.
The Issue
The Skeleton popup feature was originally implemented to provide very rudimentary popups. This included interacting with a single trigger element that would then show a single popup. Over time, the scope of this feature has grown and users are expecting more and more. To accomplish this, we've opted to integrate Floating UI.
Floating UI’s core is essentially a bunch of mathematical calculations performed on rectangles. These calculations are pure and agnostic, allowing Floating UI to work on any platform that can execute JavaScript.
To keep this dependency optional in Skeleton, users have been required to jump through extra hoops to import Floating UI as a dependency, pass several modules to a dedicated Svelte store, and then all implementation is based around these optional modules. This roundabout means for implementing the dependency has resulted is very limited capabilities, and prevented direct access to Typescript types provided by Floating UI.
The Goal
Seek the simplest and most direct integration path between Floating UI and each framework Skeleton supports, while still providing a friendly interface for common overlay patterns, such as: popovers, drop-down menus, tooltips, context menus, etc.
Solution:
- Svelte: Announcing Floating UI Svelte! 🎉 floating-ui-svelte#50
- React: https://floating-ui.com/docs/react
Maintainer Requests
The follow requests are coming from the Skeleton core team and maintains, these highly likely to be implemented:
- The ability to reuse the same popup with multiple triggers
- The ability to set or customize the enter/exit animations for the popup
- Provide new ways to trigger the popup, such as right click context menu
- Allow popups to be triggered programmatically, rather than using a button or page element.
- Provide much richer and more prominent type safety
- Better status updates for when the popup is opened or closed
- REVIEW: React hook-like pattern for Svelte 5
Community Requests
The following requests come from the Skeleton community and are pending review. They may or may not move forward:
- New Feature: Context Menu #819
- Investigate programatic popups #1484
- Allow for Passing Custom Functions to Open/Close event listeners on popups #1615
- Popup has delay when closing #1748
- Allow more PopupSettings events #1778
- Popup getting stuck when the button that is defined on is disabled. #1782
- Popup doesn't animate on first click #1787
- Simpler Popups #1806
- Long press event on popup #2101 (PR: feat: long press event on popup #2102)
- Popup Issues #2320
- Fast hover breaks popup #2646
Feedback
If you have additional updates or requests for this feature, please do so in the comments section below.