Polish Pass: Utility Features

[endigo9740]

Warning - changes prefaced with "BREAKING" indicate a breaking change.

Base on:

• Polish and refine all Skeleton features #782

Goals

The goal of this pass will be to improve, refine, and finalize all Utility features in Skeleton.

• Fix and address known issues and bugs
• Refactor code, cleanup styles, and improve edge cases
• Improve documentation for each feature
• Expand with new features as relevant
• Make overlays not suck, or at least suck less
• Ensure Vitest test cases are passing
• Resolve FIXME issues (reference)
• Update all style props to use CssClasses type

Utiliies

Local Storage Stores

• Update to the latest upstream version 0.40.0

Code Block

• Minor visual refresh and code refactor
• BREAKING: Property buttonCopy renamed button, default value is now variant-soft
• Added buttonLabel and buttonCopied for basic i18n support
• Added style props for blur and shadow
• Prepare documentation "previewer" component

Drawers

• Docs: make it clear these are a singleton
• Greatly improved documentation and setup instructions
• Provide advanced tip for animating background contents, per #637
• Refactor of Drawer animation logic
• Added shadow property for Drawer element
• Added regionBackdrop|Drawer props. Available as overrides as well!
• BREAKING: Removed drawer margin in favor of backdrop padding (provides better results)
• Rounded corners by default, based on theme settings (set rounded-none to disable)

Lightswitch

Warning - BREAKING: this utility feature has been complete rebuilt from the ground up.

• Lightswitch component rebuilt with new UI design and new props available
• Now uses a service-like approach, per #737
• Documented an alternative to the component if you wish to use OS preference automatically
• Users can now interface with all LightSwitch methods, or build their own Lightswitch UI
• Provided and documented interface stores, getters, and setter methods.

Modals

• Docs: make it clear these are a singleton
• Implement system to register and reuse custom modals, per #720
• BREAKING: Custom modals are not styled by default to allow FULL customization
• Allow prompt input to accept custom validation attributes, per #899
• Added image modal example
• Move modal example components to /docs - no longer part of the public package
• Provided prop to set position - ex: top (search) or center (default), (reference)
• Improve component scrolling, per #890

NOTE: we detailed a means to provide async modals here: #937

Toasts

• Docs: make it clear these are a singleton
• Add the selector class .toast-actions
• The button type can now be changed through the button style props
• Added new buttonDismissLabel prop to override the dismiss button label text
• BREAKING: Replaced preset prop with background property allowing any variant or background class.
• Improved transitions using Svelte Svelte FLIP animations
• Added a callback function feature for the ToastSettings object

Popups

Warning - BREAKING: this completely replaces Menus and Tooltip utilities
This requires a new dependency: https://floating-ui.com/

• Replaced Menus and Tooltips with new "Popup" utility feature
• Fully documented, has tons of config options
• Updated examples, including a functional Combobox
• Has an open and close fade animation that can customized with CSS
• Supports multiple interaction event handlers (click, hover, etc)
• Can optionally include a customizable arrow on any variation
• Now includes 12 position options
• Dramatically better at keeping the popup on screen
• Fully tree shakable
• Allows you to modify a slew of settings through "middleware"
• Supports a11y features, such as keyboard interaction
• Introduced closeQuery setting, to selectively choose elements that close the popup (replaces interactive)

Menus

DEPRECATED: replaced with Popups (shown above). This feature has been completely removed.

Menus

DEPRECATED: replaced with Popups (shown above). This feature has been completely removed.

[endigo9740]

A new PR has been added, and you view a preview URL for the newest changes here:
https://skeleton-docs-git-chore-utilities-polish-pass-skeleton-labs.vercel.app/utilities/codeblocks

Per today's update I've updated the Local Storage Store to the latest upstream changes, as well as implemented some minor improvements to the Code Block component.

Additionally I've introduced a proof of concept "Previewer" component, which gives you an interactive canvas space for previewing components, their HTML/CSS/JS code, as well as some settings like viewport size and background color. I don't expect to implement this broadly yet, but you can see the proof of concept on the Code Blocks page. The examples at the top of the page use this.

[endigo9740]

Preview URL:
https://skeleton-docs-git-chore-utilities-polish-pass-skeleton-labs.vercel.app/utilities/drawers

Today's updates have focused on Drawers, including a refactor to cleanup the animation logic, and a slew of new style properties. This should greatly expand the customization capabilities of this feature. Here's an example of a highly customized instance:

I've also added a subtle rounded effect to the Drawer element that matches theme settings and updates accordingly based on position:

Additionally I've research a means to animate the background content while the drawer is open. This will be best served as a feature users implement, as we cannot know what sort of layout structure they might be using.

I've provided more documentation about drawers using the Singleton pattern and what this means.

Finally, I've added a fixed note that we do not (and will not) support a means to disable the click-to-close backdrop feature. It's something we get regular requests for, so I want to make it clear it's against a11y best practices.

[endigo9740]

The Lightswitch component has been completely rebuilt from the ground up. Preview it here:
https://skeleton-docs-git-chore-utilities-polish-pass-skeleton-labs.vercel.app/utilities/lightswitches

Notable changes:

• New UI design that adheres to theme settings
• A variety of new props, including a means to adjust the size
• Underlaying logic completely rebuilt, abstracted to an external service
• This service exposes the stores, getters, and setting methods for users
• Users can utilize these to generate their own Lightswitch UI component
• Also provided an alternative if you wish to use OS preference only

In a nutshell, the basic version is at simple as before, but now provide a ton of power-user features.

[endigo9740]

We have a BIG series of modal updates today. These can be previewed here:
https://skeleton-docs-git-chore-utilities-polish-pass-skeleton-labs.vercel.app/utilities/modals

Notable changes:

• You can now optionally register components on the parent <Modal> for easy reuse.
• Custom modals are no longer styled by default, giving you complete control over design
• ModalSettings now allows for valueAttr to define the prompt input type and other attributes
• Transition duration, x, y, and opacity settings are now exposed a props.
• I've added a new example modal, which displays a single image with a detached close button.
• You can now easily set the modal vertical position either globally or per instance.
• The backdrop region now support vertical scroll for tall components.
• Added a canned set of utility classes to control modal width, such as .w-modal.

Here's what it looks like to register a set of components in the root layout:

Here's the reduction in code for our doc search modal using the above techniques:

That said, I do still have one more item I would like to address, which is making modals async by default, per #937

[endigo9740]

Several notable updates to the Toast utility today. You can preview this here:
https://skeleton-docs-git-chore-utilities-polish-pass-skeleton-labs.vercel.app/utilities/toasts

• Minor UI adjustments
• Various new or updates prop values, including the ability to customize the dismiss button text
• Replaced the preset prop with a background prop which can take utility classes or variants
• Improved the animation, especially when multiple are queued

[Hugos68]

• All visible toasts will slighly bump up a tiny amount after every toast that is triggered when the visible limit of 3 is full.

[endigo9740]

Big update today - both Menus and Tooltips have now been replaced with the new "Popups" feature:
https://skeleton-docs-git-chore-utilities-polish-pass-skeleton-labs.vercel.app/utilities/popups

popups.mp4

This includes a new dependency called Floating UI (previously known as Popper.js):
https://floating-ui.com/

Notable improvements:

• Fully documented, has tons of config options
• Updated examples, including a functional Combobox
• Includes a fade animation on open/close
• Supports multiple interaction event handlers (click, hover, both)
• Can optionally include a customizable arrow on any variation
• Now includes 12 position options
• Dramatically better performance in keeping the popup on screen
• Fully tree shakable
• Allows you to modify a host of settings through "middleware"

[ryceg]

• Minor quibble: you use the error token for the "advanced" tag, and should be using the error token.

[niktek]

• combobox opens once on iOS and not at all on Android

[AdrianGonz97]

• Share the open/close state of the popup, similar to how we currently do it for menus.
• Bug where if you click on the "Menu" button twice, any outside clicks won't close the popup. The button needs to be clicked again for outside clicks to close it.
• The options in the select box in Code Blocks is using gray text on a white background. This is the case on all browsers except Safari since I can't test it.
  

[endigo9740]

Popup QA feedback:

• Include the type import for doc shell settings
• Include the params data for the doc shell settings
• Include the CSS class names for the doc shell settings
• Mention that Floating UI popups have a fighting z-index issue when overlaying elements using backdrop-blur (at least on Chrome). It's most likely a browser bug.
• Implement keyboard interaction, such as ESC to close.
• Add popup and the PopupSettings type to index.ts package exports

[endigo9740]

Reminder:

• Implement @ryceg QA feedback items in the PR thread: Polish Pass: Utilities #936

[JustBarnt]

• Toast - Implement functionality below to allow Toasts to trigger a callback when it is created and closed.

• So when the ID is assigned -> trigger the callback with id: whatever and status: assigned as the response

• When the toast is closed -> we trigger it again, but this time change status: closed

The callback function would then look for a status of "assigned" or "closed" to fire the appropriate event.

[endigo9740]

FYI this has been merged into dev branch, please continue QA testing there!
https://dev.skeleton.dev/

[SebasF1349]

• Code Blocks: First example (at the very top) shows <div>This is meta</div> in the code but <p>Hello Skeleton<p> in the preview.
• Modals: undefined class
  
• Toasts: After spamming toasts and closing them I keep getting this error (it works btw)
  

[endigo9740]

Per Popups

• We need to implement the interactive mode option to allow popups to close when interaction or route change occurs.

[endigo9740]

I've implement a new queryClose setting for popups that allow you to set the list of the popup's child elements that will close the popup when clicked. By default any anchor or button clicked within the popup will automatically close it, but this can be easily overwritten.