Skeleton Next - Update 15b - Popovers and Modals

[endigo9740]

Hey everyone, Chris here from Skeleton 👋

As part of today's updates, we have new progress to share regarding Popovers and Modals in Skeleton v3. This is a departure from how things worked in Skeleton v2, so please make sure you read the following if these are critical features for your applications.

What's Changing in v3

1. We're not longer considering Popovers and Models separate features. Technically popovers, dropdown menus, context menus, dialogs, etc, are really all the same thing - interfaces that you position on a layer above your page content. The key distinction is whether these "floating" elements are anchored or not.
2. As such, we think the best solution long term is to get out of the way and take full advantage of the underlying library we rely on, called Floating UI. Floating UI is fairly low level though and doesn't solve all issues (such as interactivity), which is why we're going to recommend the specific implementations below.
3. For React users, we're providing a dedicated integration guide for Floating UI React. An official wrapper provided by the Floating UI team that makes this much more accessible via custom hooks, components, and similar features.
4. For Svelte users, sadly the Floating UI team does not provide a Svelte-focused alternative. However, myself and members of the Skeleton Labs team are building a solution for the Svelte community called, you guessed it, Floating UI Svelte. In fact you may recall our announcement from back in May. However, we've noted some caveats to this in the Popover Svelte section below.
5. Overall, we're no longer going to be taking an opinionated stance on how you implement these types of interfaces. While we will officially recommend Floating UI, you're free to substitute with any alternative you wish to use.

React Popovers

https://next.skeleton.dev/docs/integrations/popover/react

For our new React users, we're providing a detailed integration guide for Floating UI React. This covers the basics, while showcasing several examples with direct Skeleton integration. The idea is you take these simple examples for common use cases, then expand them to fulfill your project's unique requirements. This should make it easy to get started, while still allowing near infinite depth to expand.

• Popovers
• Tooltips
• Combox
• Modals

Svelte Popovers

https://next.skeleton.dev/docs/integrations/popover/svelte

For Svelte users, we hope to provide an equivalent experience for Svelte 5. However, there's one major caveat - Skeleton v3 is getting closer to launch, however Floating UI Svelte is not yet complete! Only around half of slated features are implemented at the time of writing. As such, we're offering four additional Svelte components to help bridge the gap for now. These will be available through the @skeletonlabs/skeleton-svelte package. Each component is powered by Zag.js under the hood:

• Popover: a simple popover component triggered on click
• Tooltip: a simple popover component triggered on hover
• Combobox: a dedicated popover for displaying a list of choices; with built in auto-suggest
• Modal: a general-purpose modal component for building dialogs, drawers, and more

While you don't get the endless set of features provided by Floating UI Svelte, you'll find these components are still quite competent. The plan is for these components to act as a stand-ins until we can fully flesh out Floating UI Svelte. At which point we'll then update the integration guide to provide parity with our React counterpart.

Modal System

With this change Skeleton will no longer be providing a "singleton system" for controlling modals in a global scope. This is partially due to returning control to you (the developers) via Floating UI, as well as in response to feedback from the community. We understand folks have different mental models for working with things, but if this is something you would like us to explore again, please let us know the comments. We're happy to consider more in-depth tutorials for building an optional opt-in version of this mechanic alongside Floating UI in the future!

Toasts

A quick note about Toasts, which are another type of modal. We're really impressed with the current Zag implementation, so we're planning to offer this as a standard component for all supported frameworks (React/Svelte/etc). This will be a permanent feature not affected by anything above. Expect to arrive very soon!

Native APIs

Finally, it would be a shame not to at least acknowledge the fact there are a number of current and upcoming browser-native APIs that are poised to replace tools such as Floating UI. However, as is often the case in frontend, these APIs have mixed levels of support and adoption cross-browser. As such, we're keeping an eye on them, but we do not feel they are quire ready for primetime just yet.

• Dialog Element
• Popover API
• CSS Anchoring Position

Note that we do plan to provide a simple Cookbook guide for integrating Skeleton styles for the native <dialog> element. Expect this to arrive prior to launch!

Questions and Feedback

As aways, please feel free to reach out in the comments below if you have questions or comments around these changes.

[rChaoz]

Overall, we're no longer going to be taking an opinionated stance on how you implement these types of interfaces.

I just wanna say: thank you so much!

I really like the new, declarative <Modal> component, it feels very natural and exactly what I had in mind when I first thought of modals + Svelte 5 snippets. I've had to go through so much trouble to adapt the Skeleton v2 singleton approach into what I needed in my project.

Very excited for the v3 beta! I hope to migrate to Svelte 5 by when the beta comes out so I can get to try all the new features.

[endigo9740]

It's definitely feedback we've heard a LOT over the years. I'm sure many folks will be happy. Note that we'll also be providing a Cookbook guide (think mini tutorial) for using the native dialog element in the same manner. It follows a very similar mental model, but with pure native tech. The only gotcha is it's a little more rigid and animating display: none in CSS has limited support cross-browser atm. But it's a nice preview of the future!