Skeleton v0.132.4 (RC1)
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!
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:
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.
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.
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.
⚠️ Migration Guide ⚠️
Migrating to the new popup system should be a breeze if you've used Menus before. This uses the same design pattern.
- Replace the Menu import with the Popup import:
import { popup } from '@skeletonlabs/skeleton';
- Replace
data-menu
withdata-popup
on your "floating" element - Then change the inline action from
use:menu
touse:popup
- 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
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
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
- Improved the
on:toggle
event for the Accordion Item:
https://github.com/skeletonlabs/skeleton/issues/945 - Add the ability to override the Accordion caret positions in open/close states:
https://github.com/skeletonlabs/skeleton/issues/965 - Improved keyboard interaction for Input Chips:
https://github.com/skeletonlabs/skeleton/issues/985
Bugfixes
- Fix for ListboxItem, RadioItem, and Tabs double reporting click events:
https://github.com/skeletonlabs/skeleton/pull/974 - Fixed a style issue for active rows within a Select input:
https://github.com/skeletonlabs/skeleton/issues/940 - Fixed the
file
property binding for FileButtons:
https://github.com/skeletonlabs/skeleton/pull/949 - Fixed and issue where Accordion and Steppers buttons would cause form submission:
https://github.com/skeletonlabs/skeleton/issues/943 - Fixed a regression to the Paginator button style props:
https://github.com/skeletonlabs/skeleton/issues/934 - Fix for input-group highlight on focus-within not working as expected:
https://github.com/skeletonlabs/skeleton/issues/941
Documentation
- Now lazy loading Vercel Analytics to prevent an error contributors were experiencing:
https://github.com/skeletonlabs/skeleton/pull/984 - Corrected a number of mislabeled property descriptions for Range Slider:
https://github.com/skeletonlabs/skeleton/issues/962 - Fixed a broken link on the Local Storage Store docs:
https://github.com/skeletonlabs/skeleton/pull/953 - Fixed typos and grammar issues:
https://github.com/skeletonlabs/skeleton/pull/946 - Reorganized the
/docs
directory in the project structure:
https://github.com/skeletonlabs/skeleton/pull/980 - Fixed outdated style property for the Theme Generator preview components:
https://github.com/skeletonlabs/skeleton/pull/961
https://github.com/skeletonlabs/skeleton/pull/972
https://github.com/skeletonlabs/skeleton/pull/991