Skeleton Next - Update 8 - Popovers and Modals

[endigo9740]

Hey everyone, Chris here from the Skeleton crew! This post is part of an ongoing series of updates as we progress towards Skeleton v3 (aka Skeleton "Next"). In today's update we'll be changing things up and showing some early stage previews and proposals for our upcoming popover and modal solutions. We encourage you to read below, watch the videos, and submit your feedback in the comments section below.

YouTube Video Walkthroughs

• Popover Walkthrough
• Modal Walkthrough

Prototypes

The following zip includes the prototypes covered in the video walkthroughs for both popovers and modals.

skeleton-overlay-prototypes.zip

To test:

1. Download the zip file above
2. Exact to a location on your computer
3. Point your terminal at either project
4. Run npm run install (or similar) to install the project dependencies
5. Then run npm run dev to start a new dev server

Popovers

First off we want to cover a few ideas we're testing around Popovers (Popups in Skeleton v2). The current implementation utilizes a dependency called Floating UI to help handle the overlay element positioning on the screen. This is then paired with Svelte Actions to create a paired relationship between the trigger element and the overlay element.

However, over the last couple years, it's become obvious that Skeleton users need and want a lot more power-centric features. We've fielded a number of requests asking for programatic control, context menus, and more. While we certainly want to provide the most friendly and flexible solution we can, it's evident that our abstraction of Floating UI is far too limited. Folks are fenced in, and the feature itself has a number of flaws, mainly due to the scope creep over time.

In v3, our goal is to get out of the way of Floating UI and let it do what it does best. This means providing guidance around integrating Floating UI directly. This will of course require you to install Floating UI as a dependency as usual, but we'll provide detailed integration instructions setting things up and creating most common features, such as: tooltips, drop down menus, and more. These will of course be styled using Tailwind and Skeleton utility classes and theme.

For React Users

Floating UI for React has a few bonus features not available to other frameworks. Specifically, they provide a number of React-specific hooks and utilities that provide a huge quality of life improvements over direct integration. This makes it easy to generate and manipulate floating elements in a number of ways. For example, here's what it looks like to setup a example Tooltip component, based on the official Floating UI guide:

import { useRef, useState } from "react";

// Importing the React-specific features from Floating UI React
import { autoUpdate, useFloating, useInteractions, useHover, arrow, FloatingArrow, offset } from "@floating-ui/react";

export const ExampleTooltip: React.FC = () => {

  // Creating a state hook to handle display of our tooltip
  const [isOpen, setIsOpen] = useState(false);

  // Creates a reference to the Floating UI arrow SVG component
  const arrowRef = useRef(null);

  // Configure core features via the `useFloating` hook
  const { refs, floatingStyles, context } = useFloating({
    whileElementsMounted: autoUpdate,
    placement: "top-start",
    open: isOpen,
    onOpenChange: setIsOpen,
    middleware: [arrow({ element: arrowRef }), offset(8)],
  });

  // Then setup and handle a hover interaction
  const eventHover = useHover(context);
  const { getReferenceProps, getFloatingProps } = useInteractions([eventHover]);

  return (
    <div>

      {/* Set the trigger element reference */}
      <button ref={refs.setReference} {...getReferenceProps()}>
        Trigger
      </button>

      {/* Control the display state of our floating element */}
      {isOpen && (

        {/* Set the floating element. */}
        <div ref={refs.setFloating} {...getFloatingProps()} style={{ ...floatingStyles }}>
          <p>This is a tooltip.</p>
          <FloatingArrow ref={arrowRef} context={context} className="fill-blue-500" />
        </div>

      )}
    </div>
  );
};

export default ExampleTooltip;

And the result:

While more verbose than the Skeleton Popover, you can already start imagining the endless customization this might afford you. Instead of hover you could use a click interaction. You could switch placement to bottom. Maybe remove the arrow. Then suddenly you have a fully function drop-down menu.

For Svelte Users

Floating UI does not yet provide an equivalent set of features for Svelte. Members of the Skeleton team recently reached out to the Floating UI maintainers to ask if they would be interested in working on a Svelte-specific port. Unfortunately, as of now, this does not appear to be a priority.

As maintainers ourself, we can empathize. So Skeleton Labs is hatching a plan to make this happen under a new dedicated package under our organization. While this will remain under Skeleton Labs, this will NOT be Skeleton-specific. Instead, this new tooling will act as a "polyfill" for Svelte users. Unlocking these same convenient features, while aiming for parity in terms of syntax and capability.

Thankfully Svelte 5 makes this process relatively painless, allowing us to create hook-like features that mimic the Floating UI API. In many cases we can implement Floating UI's code directly. To help showcase this, see an early proof of concept REPL created by Skeleton contributor @Hugos68:

• Floating UI Svelte hook REPL

Implementing this should look very similar to the React useFloating hook:

import { useFloating } from "@skeletonlabs/floating-ui-svelte";

let isOpen = $state(false);

const { refs } = useFloating({
  placement: "right",
  middleware: [flip()],
});

<button bind:this={refs.reference} onclick={() => (isOpen = !isOpen)}>Trigger</button>

{#if isOpen}
  <div class="popover" bind:this={refs.floating}>(popoverContent)</div>
{/if}

If you're interested in contributing this to project, please feel free to reach out in the comments sections below, or on the #contributors channel on the Skeleton Discord. And of course keep an eye out for a proper announcement over the next couple weeks!

Popover API

While we love the power of Floating UI, please know we are monitoring progress on the upcoming native Popover API. This is currently available in most browsers, minus Firefox, which remains limited to "nightly" builds. It may be more limited in capability, but will likely provide the best accessibility story possible in most browsers. Expect more updates on this as we revisit for future versions of Skeleton.

Modals

Finally, while it's still early days, we're considering a major shake up Skeleton's approach to modals. This will begin by merging all modal types under a new unified system, including: dialogs, drawers, and toasts. Additionally, we will be investing multiple approaches to overlays, including:

1. Native HTML Dialog element - for handling one-off modals in a highly accessible manner.
2. Singleton Queue System - provide a powerful but scalable solution for large scale applications.

Singleton Queue System

If you've never used the queue system in Skeleton, or if you're just curios to learn more about the concept and how this work, we encourage you to watch the YouTube walkthrough video linked at the top of this post. This covers how this works, shows a quick demo of this in action, as well as an explanation for the benefits.

In a nutshell, this new component and accompanying utility features will be included as part of each respective Skeleton framework package (ex: React/Svelte/etc). This implements a single globally scoped component that responds to modals triggered in any portion of your application. Including support for dialogs, modals, and toasts, all in one.

In practice, we expect implementation to look as follows. Having you import and insert the <OverlayProvider> once in the root layout of your applications:

import OverlayProvider from "@skeletonlabs/skeleton-svelte";

<OverlayProvider />

You can then trigger a new modal from any portion of your client-side application:

import { trigger as modalTrigger } from "@skeletonlabs/skeleton-svelte";

function triggerModal() {
  modalTrigger({ type: "modal", componentRef: 'modal-dialog`, ... });
}

<button class="btn" onclick="{triggerModal}">Trigger</button>

This will add a new modal instance to a global "overlay queue", powered by React useState or Svelte $state() runes. The <OverlayProvider> is then responsible for displaying the modal in the appropriate the appropriate component, showing it in the correct location on the screen, and even handle z-index stacking when multiple modals are on screen at once.

What's Next

Now the important part - we need your comments and feedback! We've outlined our desired approach for popovers and modals, but we're building Skeleton for you, our wonderful community. As such, we would love to hear your feedback. Let us know what will or won't work for you, feel free to ask questions, and of course we welcome volunteers interested in contributing. Especially for the upcoming Floating UI Svelte package. Please share your comments in the section below, or within the #skeleton-next channel on the Skeleton Discord.

[rChaoz]

Are there plans to support modals with shallow routing as well?

[endigo9740]

We have it under consideration in the dedicated modal milestone issue here:

• NEXT: Modals #2357

That said I think it's important to keep perspective that this is specific to and introduced in SvelteKit v2. One of the primary goals of Skeleton v3 is not only to support cross-framework (Svelte, React, etc), but also fully supporting all environments Svelte can run (Vite/Svelte projects, Astro, etc).

Additionally, it's not a feature we would implement per se, but rather a technique we would provide guidance around for SvelteKit users. This means something close to this post that implements shallow routing in Skeleton v2 modals. Just fully vetted and documented.