Polish Pass: Components & Actions

[endigo9740]

Base on: #782

The goal of this pass will be to improve, refine, and finalized all Svelte components and actions in Skeleton as we move closer to our release candidate status for the library.

• Fix and address known issues and bugs
• Improve the current styles, minimize code, better handling of edge cases
• Expand with new features as relevant
• Ensure form components play well with use:enhance forms
• Move SvgIcons component from /lib to /docs to remove from the public library
• Ensure Vitest test cases are passing
• Implement type of CssClasses (or similar) to identify Tailwind style props for IntelliSense auto-suggestions.
• Update the CLI template(s) per the new component updates

Actions

Clipboard

• Minor documentation improvements.

Filters

• Minor code refactor for filter action
• BREAKING: the filter action now requires # (ex: "#Apollo")
• Documentation improvements
• "How it Works" section added
• Interactive examples - can switch images

Focus Trap

• Code snippets improved on the doc page
• Documentation added explaining how it works
• Documentation expanded to cover Modal/Drawers

Components

Accordions

• Rename AccordionGroup component to Accordion for library consistency
• Refactored to drop Disclosure elements in favor of accessible markup
• Enable slide open/close animations for accordion contents
• Allow the Item open state behavior to be controlled with the autocollapse property
• Improve documentation and examples

App Bar

• BREAKING: renamed prop space to spacing for library consistency
• Refactor slots and props to allow for more configurations
• Introduce a new and optional "headline" row
• The design has been updated to be less opinionated by default
• Main/top row is now grid-based, rather than using flexbox
• Update documentation to show a variety of preset configurations

NOTE: want the old shadow effect? Use shadow="shadow-lg"

App Rail

• Added a new border prop on the AppRail
• Improved documentation in regards to anchor tiles
• Documented the process of setting the active state

App Shell

• The #page region now reports the vertical scroll position via the on:scroll event.
• Provided better visualization of the scrollable portion of the App Shell
• Added a new regionPage prop for adding classes to the scrollable #page region
• Document how to setup a sticky pageHeader slot
• Linked to responsive sidebar/drawer tutorial

Avatars

• Documented techniques to add interactive borders
• Provided support for style attribute, this allows Skeleton filters via CSS

NOTE: investigated the bug for off center initials (reference). Unfortunately I cannot pin down a fix. Per the settings provided this the SVG text SHOULD be centered. Could be a browser issue?

Conic Gradients

• Stops are now reactive and will update as the values change
• Greatly improved the documentation, added new usage techniques
• Added props for regionCaption|Cone|Legend to apply arbitrary region classes

File Buttons

• BREAKING: The name property is now required to support Svelte's native form submission.
• The design has been updated to be less opinionated by default
• Documentation has been expanded

File Dropzone

Warning BREAKING: This component has been completely rebuilt from the ground up.

• BREAKING: The name property is now required to support Svelte's native form submission.
• Improved the code, added more config options, easier to style
• Redesigned the UI to be more visually appealling
• The disabled attribute now has a visual affect on the input
• Documentation has been expanded

Input Chips

Warning BREAKING: This component has been completely rebuilt from the ground up.

• BREAKING: The name property is now required to support Svelte's native form submission.
• Embeds a native <select> input to provide better support for native forms
• UI redesign from the ground up, including animations
• Supports disabled state, per (#824)
• Provide a max prop to limit the maximum chips allowed
• Provide minlength and maxlength props to control input character length

Listboxes

Warning BREAKING: This component has been completely rebuilt from the ground up.

• BREAKING: The name property is now required to support Svelte's native form submission.
• By default uses radio inputs for single selection
• Apply the multiple prop to convert this to a checkbox input
• Update the custom modal example using a Listbox

NOTE: tested replacing with native select[size/multiple], but Safari support just isn't there yet.

Paginators

• Minor improvements to documentation and the example
• Updated $: page -> let page in docs to prevent server-side pagination rubber banding bug

NOTE: we may revisit this component when we return to data tables

Progress Bars

• BREAKING: Replace label with labelledby, we recommend a wrapping <label> as needed
• Minor refactor to the component logic and template
• The design has been updated to be less opinionated by default

NOTE: Documented native alternative, added native progress bar styles to forms.css

Progress Radials

• BREAKING: Replace label with labelledby, we recommend a wrapping <label> as needed
• The design has been updated to be less opinionated by default
• Improved documentation and examples

Radio Groups

Warning BREAKING: This component has been completely rebuilt from the ground up.

• BREAKING: The name property is now required to support Svelte's native form submission.
• BREAKING: borderSize/borderWidth combined into singular border prop for library consistency.
• This component is now a wrapper around a native radio checkbox input.
• Renamed accent prop to active for library consistency
• The design has been updated to be less opinionated by default
• Supports disabled state, per (#824)

Range Sliders

• BREAKING: The name property is now required to support Svelte's native form submission.
• Minor refactor and code adjustments
• Improved documentation and examples
• Documented current browser support (Safari not fully supported)

Slide Toggles

• BREAKING: The name property is now required to support Svelte's native form submission.
• BREAKING: the accent property renamed to active for library consistency
• BREAKING: borderSize/borderWidth combined into singular border prop for library consistency.
• The design has been updated to be less opinionated by default
• The class attribute is now correctly implemented on the parent element
• Improved documentation and examples

Note: we investigated switching to styled native input[checkbox] elements (ala Daisy), but found the a11y story lacking.

Steppers

Warning BREAKING: This component has been completely rebuilt from the ground up.

• Features a new horizontal layout by (EXTREMELY) popular demand!
• Most properties have been updated or modified.
• Allows for all English wording to be overwritten (ex: button labels, "Step", etc)

NOTE: No plans to support a vertical version at this time.

Tabs

Warning BREAKING: This component has been completely rebuilt from the ground up.

• Now includes an optional "panel" slot to improve a11y, per (#516)
• Minor redesign with updated props, events, and settings
• Icon position is now above the text label
• Improved documentation and examples

NOTE: can be used in place of a bottom navigation bar when customized. See the doc example.

Tables

• Reviewed a means to fix overlays (ex: tooltips) being clipped - NOTE: won't fix, see below
• Minor documentation improvements

NOTE: per the clipping issue, this is due to the wrapping .table-container using overflow-x-auto and .table using .overflow-hidden. These are required styles, so unfortunately I'm going to have to advise against using overlays within tables for now. This is generally bad UX, so please avoid it.

Table of Contents

• Added spacing prop to set vertical spacing between rows
• Added a note pointing to the example on the docs for desktop users.

[endigo9740]

A new PR for this is available here:

• Polish Pass: Components and Actions #862

Preview URL:
https://skeleton-docs-git-chore-component-actions-6f245c-skeleton-labs.vercel.app/actions/clipboard

[niktek]

Just one that came up in Discord:

[Gilgames000]

Hi! Here are a couple of things I'd really love to see in Skeleton, if possible :)

• modal that doesn't automatically close when clicked outside (example)
• animated accordion when collapsing/expanding content (example)
• countdown component (example)

I also included links to examples of what I mean, because sometimes it's hard to explain things just with words :P

[Sarenor]

Hey @Gilgames000!
Good news, the animated Accordion is going to be part of this issue you commented on and has already been completed. You can find a preview of it here: https://skeleton-docs-git-chore-component-actions-6f245c-skeleton-labs.vercel.app/components/accordions
The Modal is part of the next polishing issue, work on fleshing that out is currently ongoing here: #782

And the countdown is a new component that you can put down in it's own issue similar to the autocomplete issue:
#377

[endigo9740]

@Gilgames000

modal that doesn't automatically close when clicked outside

This will never be part of Skeleton. It's a dark pattern and terrible for accessibility. We covered this here:

• Make it so dialog cannot be closed #385

animated accordion when collapsing/expanding content

As Dom mentioned and linked above, this is done and will be part of the next release.

countdown component

Not something we intend to cover, though we would welcome a PR if someone wished to build this. But we officially recommend this library if you need something like this.

https://svelte-animated-counter.vercel.app/

[piperun]

In the Stepper component documentation, it describes in the event tab, events that only exists for the <Stepper> component as being for the <Step> component.

a few changes to Stepper that would be nice to see:

• Customizable Next/Prev button where placement and events such as on:next on:previous would be nice to have
• Integrates easily with form actions / progressive enhance (enables multi-form stepper) such as this example
• Choice of where the stepper placement will be (top, bottom, left or right)

[endigo9740]

We've merged this into the dev branch to make this easier to test. I'd welcome volunteers from anyone willing and able - there's a ton of changes in this update and we need full top-to-bottom regression testing.

How to Test (via the Skeleton project)

If possible, clone down the Skeleton project, checkout the dev branch, then run it in the local server. This provides the ideal way to review both code and the documentation at the same time.

If you do not have the means to do this, consider viewing the documentation from the following URL. This is still a valuable way to find visual issues or typos:
https://dev.skeleton.dev/actions/clipboard

How to Test (via your own project)

If you wish to test in your existing Skeleton projects, download this Tarball and follow the instructions linked here:
https://github.com/skeletonlabs/skeleton/wiki/Create-and-Install-Test-Packages

skeletonlabs-skeleton-component-test.tgz

What To Test

Every feature listed under the Svelte category from the doc site app rail. This includes ALL Actions and ALL Components. Start the top of the list and work your way down.

What to Look For

Keep an eye out for the following:

• Read the documented changes are working as expected
• Typos or grammar issues in updated documentation
• Ensure the basic features are working on your device/browser of choice
• Consider testing on multiple browsers/OS to ensure we catch issues for those channels
• Ensure the doc instruction is clear and easy to understand (this is important!)
• Look for bugs, edge case issues, or generally things going wrong

NOTE: Remember the Skeleton doc site is BUILT with many of these components, so it's a good idea to review all doc pages you can, from homepage, to guides, etc.

Where to Report issues

DO THAT HERE! You're welcome to ask questions here or on Discord, but please actually report the issues UNDER this ticket please!

Be aware this update WILL go live on February 7th, so the more issues we find and fix, the better!

Thanks for your help!

[Hugos68]

Unrelated/related, not sure but on the accordions page the WAI-AIRA link leads to a 404 whilst it should probably go to: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
This also is an issue present in current version here but might aswell be fixed in this update

[endigo9740]

Thanks @Hugos68 this was fixed part of: cb6a656

[endigo9740]

Given this release is dropping tomorrow I'm going to go ahead and close this ticket. If new issues are found related to components, please create dedicated tickets for them from this point forward. Do not add them here. Thanks!