v1.8.0 Release Notes

[endigo9740]

News

Beta Features

Starting today, new Skeleton features will include a small Beta tag in the documentation navigation. This allows us to launch new features quickly, but still make breaking changes based on your feedback. If you are leery of breaking changes, please avoid using beta features in production. However, in most cases you can expect the beta tag to be removed in the following release cycle.

Release Notes

• View Release
• View Changelog

After several maintenance focused updates, we return with a new set of feature updates. This includes a brand new and interactive ratings component, new layouts for handling images and more, introducing an anchor-specific variation for tabs, and several new features for Toast notifications. If you wish to learn more about each new feature, continue reading below. Tap the Changelog link above if you wish to see the full list of changes.

Summary:

• ⭐ Ratings component added
• 🖼️ Image Layout blocks added
• 🔗 TabAnchor component added
• 🍞 Expanded Toast features
• 🐞 Plus general improvements and bugfixes

Ratings Component (Beta) - #1654

This component allows you to create a visual representation of numeric values - perfect for ratings for movies and more. This supports SVG, emoji, images, and text per each of the whole, half, and empty states. Plus see the documentation to learn how to make this interactive on click.

https://skeleton.dev/components/ratings

Image Layouts - #1617

This new Blocks section pairs HTML markup with standard Tailwind utility classes to provide grid or masonry layouts for displaying images. The styling for this feature comes directly from our friends over at Flowbite. If you're Interested in learning more about how to pair Skeleton and Flowbite, see our dedicated guide.

https://skeleton.dev/elements/image-layouts

TabAnchor Component

Following the same pattern as the AppRailAnchor component in Skeleton v.1.6, we've now introduced a TabAnchor component. This provides dedicated support for anchor links that are displayed as Tabs. Make sure to read the documentation to understand the ideal use case between standard Tabs and TabAnchors, as these should not be used interchangeably.

https://skeleton.dev/components/tabs

New Toast Features

programmatic-toast.mp4

The Toast notifications feature has been expanded with a number of new features, including:

• Now supports hiding the dismiss button when using the hideDismiss option
• Can remain visible when hovering with a mouse cursor using the hoverable option
• Has the ability to be closed programmatically using each Toast's unique reference ID

See the revamped Toast documentation to learn more about each of these features:
https://skeleton.dev/utilities/toasts

[derekhearst]

Looks amazing! Thank you for your continued support and development of this amazing library : )

[endigo9740]

Thank you for your kind words and use of the library! :) A lot of updates from today came from @Mahmoud-zino so he deserves the shoutout tbh!

[geoffkendall]

Another cracking update. Thanks @endigo9740 and @Mahmoud-zino !