1. Blog
  2. Article

Skeleton v0.132.4 (RC1)

chris
Chris Simmons @SkeletonUI
Skeleton v0.132.4 (RC1)

News

🎉 Skeleton has entered in Release Candidate status! 🎉

Today's update marks a huge milestone for the library, as Skeleton is now officially in release candidate status! See our full announcement linked below, including the first details for our upcoming v1.0 launch day event!

Skeleton on the LogRocket Podcast

Core maintainer Chris Simmons recently appeared on an episode of the LogRocket podcast to talk Skeleton. You can listen here to learn more about what Skeleton is, how the project was started, plus learn what's in store for the future of the library.

Release Notes

Similar to the Element and Component overhauls in the prior two releases, today's update focuses on improvements to the Utility features within Skeleton. This includes a new custom modal registry system, a new Popup feature to replace Menus and Tooltips, as well as a greatly improved onboarding experience. Best of all, this concludes all planned major breaking changes for the library, which means Skeleton is now in Release Candidate status!

Release: https://github.com/skeletonlabs/skeleton/releases/tag/0.132.4

Summary:

  • 🎉 Skeleton is now in release candidate status!
  • ⬆️ Includes major overhauls to all utility features
  • 📝 Custom modal registry system added
  • 💬 New Popup utility feature added
  • 🐞 Plus a slew of bugfixes and minor improvements

Utility Features Overhaul

https://github.com/skeletonlabs/skeleton/issues/922

Given the scale and scope of these changes, we've opted to provide a summary of the most noteworthy updates below.

Warning - Please view the changelog for a list of all updates and breaking changes!

Drawers

The drawer update includes a number of documentation and design improvements, new style props, and even a way to provide a background animation when opening or closing the drawer:

image

Lightswitches

In addition to a new adaptive design, the Lightswitch component has been rebuilt using a new service that exposes all information and methods for interacting with light and dark modes. Power users can utilize this to create their own custom Lightswitch components or interface with the existing component at any time. Don't worry though, you can still use the basic component as a quick means to toggle light/dark modes.

Screenshot 2023-02-20 at 12 09 49 PM

Modals

Modals now allow you to register custom component modals for simple and easy reuse. You no longer have to pass the component reference each time you trigger the modal. Just register it to the Modal component, then call it by name on demand anywhere in your application. Additionally custom modals no longer require you to override base styles, but are "naked" and untstyled by default. This gives you complete control to to customize your modal from the ground up.

Screenshot 2023-02-20 at 12 14 52 PM

Popups (replaces Menus and Tooltips)

Menu and Tooltip utilities have been removed, now replaces with a new Popup utility feature. This features combines the best of both worlds, making full use of Floating UI (previously called Popper.js) - a powerful library for controlling the positioning of "floating" elements. This comes with a HUGE number of improvements, so we recommend you review the detailed changelog.

Screenshot 2023-02-20 at 12 19 43 PM

⚠️ Migration Guide ⚠️

Migrating to the new popup system should be a breeze if you've used Menus before. This uses the same design pattern.

  1. Replace the Menu import with the Popup import: import { popup } from '@skeletonlabs/skeleton';
  2. Replace data-menu with data-popup on your "floating" element
  3. Then change the inline action from use:menu to use:popup
  4. Finally provide the the event, target and other desired settings to the action

See the full Popup documentation for full details and examples.

And More!

In addition to the above changes, new improvements to Code Blocks, Local Storage Store, and other utility features have been included. See the changelog for a full list of updates and breaking changes.

Theme Generator - Color Contrast Ratio

https://github.com/skeletonlabs/skeleton/pull/847

image

Contributor @ryceg has implemented a new contrast ratio checker feature for the theme generator, allowing for quick visual feedback if your text/fill "on" colors meet the appropriate standards. Hover over the small icon for more technical information.

Onboarding Improvements

https://github.com/skeletonlabs/skeleton/issues/981

Screenshot 2023-02-20 at 12 24 25 PM

As we prepare for our upcoming v1.0 release, we've kicked off a number new documentation improvements. The first notable change includes updates to our "Docs" section and onboarding instruction. This should make it easier than ever to get started with Skeleton, whether you're using the CLI or manual install instructions.

Minor Improvements

Bugfixes

Documentation

news