v0.99.5 Release Notes

[endigo9740]

News

Skeleton on the LogRock Podcast

Chris will be appearing on an episode of the LogRocket Podcast on February 15th. Be sure to tune in as we'll be sharing some exciting news about Skeleton!

• Where to Subscribe
• View the full announcement

Community Updates

We've introduced a new set of community focused updates to help ensure that all Skeleton projects are friendly and inclusive. These rules and guidelines will be enforced on Github, Discord, and any other community focused space.

• View the new Code of Conduct
• View the full announcement

Release Notes

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

Today's release kicks off the refinement phase for the project as we move towards Release Candidate status for Skeleton. This means we'll be focusing primarily on polish and bugfixes. Please be aware that we expect the next few release to be bumpy, with more breaking changes than you may be used to. We ask for your patience during this time. However, be aware this will come with many highly requested updates and changes that will result in a much more stable product overall.

Summary:

• 🎨 New universal variant styles
• 🔘 Added button group styles
• 🔲 Added input group styles
• 📙 Greatly expanded Element documentation
• 🐞 Various bugfixes and minor improvements

Tailwind Element Updates - #837

Our refinement and polish for Skeleton has started with Tailwind Elements. These are broad and far reaching styles that affect many parts of Skeleton applications. We have compiled a detailed list of changes here. The most notable improvements include:

Universal Variants

Element variant styles now pull from a shared pool of styles and are universal. These are now available to buttons, badges, chips, cards, and other features. See the migration guide below for more info.

Button Groups

Button groups have now been introduced, allowing you to group a set of related actions.

Input Groups

Input groups have been introduced, allowing you to append icons and group multiple inputs.

Greatly Expanded Documentation

The documentation for each section has been greatly expanded, including many previously undocumented features.

Less Opinionated Styles

Styling for certain elements, such as links and button animations, are now less opinionated by default. Providing a simpler starting point for customization in your own projects.

Presentation Features

We've also introduced a new Tailwind > Presentation category, for features such as Gradient Headings that do not require Skeleton.

⚠️ Migration Guide

Given the scope of these changes, we would highly recommend viewing this ticket and review items marked BREAKING:. We also advise reviewing the latest documentation for each feature. The change to universal variants is the most broad so we've provided instruction below.

Migrating to Universal Variants

All elements will now pull from a universal pool of shared variant styles, rather than having a unique set per Element. These are much simpler to use in practice. For example:

• Was <button class="btn btn-filled-primary">, now <button class="btn variant-filled-primary">
• Was <span class="badge badge-ghost-secondary">, now <span class="badge variant-ghost-secondary">
• Was <span class="chip chip-ringed-tertiary">, now <span class="chip variant-ringed-tertiary">
• Was <aside class="alert alert-primary">, now <aside class="alert variant-ghost-warning">

Even elements that previously required passing color values can now utilize variants instead:

• Was <div class="card !bg-error-500">, now <div class="card variant-filled-error">

We recommend using your code editor's find/replace feature to update each instance. See a few examples below:

• Find: btn-filled, replace with: variant-filled
• Find: badge-filled, replace with: variant-filled
• Find: chip-filled, replace with: variant-filled

Tailwind Plugin Change

We've modified how portions of the Skeleton Tailwind plugin are generated. It is now more modular. Due to this change there is one minor breaking change introduced that you will need to address in existing projects. See the migration guide below.

⚠️ Migration Guide

Open your tailwind.config.cjs and prepend ... before the plugin and () after the plugin:

const config = {
  // ...
  plugins: [
    // Keep any existing plugins present and append the following:
    // 👇 ADD THIS! "..."
    ...require("@skeletonlabs/skeleton/tailwind/skeleton.cjs")(), // <--- ADD THIS!
  ],
};

Minor Improvements

• As announced in the last release, Alerts, Breadcrumbs, and Divider components have been removed:
  Remove alerts, breadcrumbs, dividers. Convert gradient headings. #831

Bugfixes

• Resolved an issue preventing the use of most Toast presets:
  Bugfix for toast preset classes #855
• Auto-generated Intellisense will now be limited to just classes:
  Fix: Only include class selectors in the intellisense plugin #828
• File Button components now respect the disabled attribute:
  Visually disable FileButtons #823
• Minor bugfix for Gradient Heading styles
  changed bg-clip to bg-clip-text #812
• Progress Radial text will now accept 0%:
  Fixed text display for 0% #843
• Fixed two minor issue related to Listboxes:
  [ListBox] Non array objects cannot be used for single selection #845
  [ListBox] Undefined behaviour when 0 is passed as selection value #846

Documentation

• Resolved an issue with the Table of Contents causing site navigation to become unresponsive:
  Fixed Table of Contents crashing on small screens where the Table of Contents isn't visible and therefore can't select the activeHeader #861
• Improved our onboarding experience, especially for users migrating from an existing project:
  QA Fixes for Onboarding and Forms page #871
• Fixed a minor issue related to theme selection:
  Fix: Set cookie path for theme switcher to root #853
• We've changed from Google Analytics to Vercel Analytics, which we feel will be less invasive of privacy:
  Chore/analytics #867
• We've added @LukeHagar as our first major sponsor on the homepage:
  A Luke's sponsor position on the homepage #816
• Fixed various typos and errors:
  Typo on Theme Colors doc  #808
  Fix example code #838

Preparing for Upcoming Releases

We do not typically discuss upcoming releases here, but given the amount of notable changes coming, we thought it might be helpful to explain what's coming down the pipeline over the next few releases. Expect to see a large amount of breaking issues as we move closer towards a stable Release Candidate status.

Polish Passes

Per this ticket, our current focus is polishing and refining as many core features within Skeleton as possible. The updates to Elements in this release are just the beginning. We have two other passes planned as follows:

1. Polish Pass: Components & Actions #857
2. Polish Pass: Utility features - coming soon (put issues here)

We welcome your feedback for changes you would like to see for these features. Please provide these in linked tickets or reach out on Discord. Keep in mind that these will be polish/bugfix focused. Total refactors are not likely, so please keep your expectations reasonable.

Documentation Updates

Per this ticket, we have a large number of improvements for the Skeleton documentation website planned. This includes everything from design updates, improved text copy and instruction, to administrative tasks such as SEO.

If you're a skilled copywriter we could use your help! The plan is to take all volunteers, then divide and conquer, addressing issues from top to bottom - this includes fixing typos, grammar, and ensuring content is relevant and accurate. If you're available to help in this process then please reach out and let us know!

Support Skeleton

Like what you see here? Wish to sponsor Skeleton directly? Consider supporting us via one of the following services:

• Ko-Fi
• GitHub Sponsors
• Patreon

[VincentWo]

Is input-cell now a required class on input elements to be styled correctly (with border-radius etc.)?
i can't find it documented anywhere, but without it it does not work

[endigo9740]

Nope, no class is required for input elements. They should operate just the same as before. Just make sure you've installed the Tailwind forms plugin (same as always) and ensure you're using all.css which will come with the form styles.

If you're having issues feel free to post a ticket or reach out on Discord and we'll help you further.

[lgs]

that is not workin for me

[endigo9740]

@lgs you'll have to be a bit more specific. The release notes cover a variety of topics and changes.