NEXT: Overlay System (modals/drawers/toasts)

[endigo9740]

[!WARNING] This issue is a work in progress.

This will act as a hub to centralize for this information.

Proposal

• https://github.com/skeletonlabs/skeleton/discussions/2629

Maintainer Requests

The following requests are coming straight from the Skeleton team. These are highly likely be implemented:

• [ ] Merge: https://github.com/skeletonlabs/skeleton/issues/2397
• [ ] Merge: https://github.com/skeletonlabs/skeleton/issues/2398
• [ ] Provide more documentation security restrictions for global reactive state.
• [ ] Consider consolidating on the "Registry" method rather than the "Direct" or canned options.
• [ ] Provide more parity between params and component props for custom components
• [ ] Async/await functionality for response function execution so the Modal stays open while the response computes.
• [ ] Review using the native Popover API
• [ ] Review using the native Dialog element (likely as a fallback)
• [ ] We need to provide more guidance around form handling within modals

Community Requests

The following requests have come from the community and are under consideration:

• https://github.com/skeletonlabs/skeleton/issues/1655
• https://github.com/skeletonlabs/skeleton/issues/1034
• https://github.com/skeletonlabs/skeleton/issues/1813
• https://github.com/skeletonlabs/skeleton/issues/1865
• https://github.com/skeletonlabs/skeleton/issues/1757
• https://github.com/skeletonlabs/skeleton/discussions/2328#discussioncomment-7993586
• https://github.com/skeletonlabs/skeleton/issues/2409
• https://github.com/skeletonlabs/skeleton/pull/2673
• https://github.com/skeletonlabs/skeleton/pull/2644

Bugs and Issues

• https://www.youtube.com/watch?v=yZT9906ZCLU

• https://github.com/skeletonlabs/skeleton/issues/2518
• https://github.com/skeletonlabs/skeleton/issues/1591
• https://github.com/skeletonlabs/skeleton/issues/2176

Feedback

If you have additional updates or requests for this feature, please do so in the comments section below.

[adamdva]

Please consider including a means to disable the backdrop's click to close feature. The ARIA APG guidelines do allow for this, marking a dialog modal only when both:

1. Application code prevents all users from interacting in any way with content outside of it.
2. Visual styling obscures the content outside of it.

[jhechtf]

Please move Modals away from the singleton pattern.

[rChaoz]

Here's a proposal for implementing modals/drawers/popups/whatever: REPL

While this does still use a "singleton" state under the hood, I'm sure this can be avoided. The idea is that, with snippets, it becomes extremely easy to just pass a snippet to a "openModal" function and it gets rendered. No modal store, no anything. This could then easily be refactored into a <Dialog open={true/false}> ... </Dialog> for ease of use.

[endigo9740]

Thank you @rChaoz - this is somewhat similar to what I have in mind as well (namely how the state rune is used). I've been quietly working on a mixture of Popups and Modals this week, so I should have more to show for this per next week's regular update. Keep an eye out here or in our Discord #announcements channel for that.

The general idea is we're going to aim for the following:

• Still provide a queue-based singleton approach. This will default to the registry approach only, while being optional and opt-in.
• We'll also provide styles for the native <dialog> component, or a guidance around styling this yourself, for folks that want modals to be triggers as one-off instances.
• Finally, we're investigating the use of Floating UI to handle the overlay display of not just popover elements (menus, tooltips, etc) but also modals/drawers/alerts. Kind of unifying all of these under a single umbrella.

But again, I'll plan to showcase my prototypes in next week's update.

[endigo9740]

We've provided a more in-depth exploration of our proposal for Skeleton v3 popover features here:

• Written Post: https://github.com/skeletonlabs/skeleton/discussions/2629
• Video Walkthrough: https://youtu.be/AU0Lrs16siA

We encourage feedback about the proposal be confined to the post linked above.