v0.37.32 - New components, drawer overhaul, modular stylesheets, and more!

[endigo9740]

https://github.com/Brain-Bones/skeleton/releases/tag/0.37.32

Summary

• 🐚 New App Shell layout component added!
• ⬆️ New App Bar header component added!
• 🗄️ Drawer component overhauled!
• 🎨 Built-in themes and modular stylesheets!
• 🤘Plus many more improvements and fixes!

This update includes numerous additions, improvements, and bug fixes. With the introduction of the new App Shell and App Bar components, we've taken this opportunity to refresh and update the Skeleton documentation website. This includes a redesigned homepage that lists core features, displays the core team members, and better showcases sponsors and contributors.

Major Updates

New Component: App Shell - #158

The App Shell component allows for better control over your page layout. It allows you to more easily control the placement of header, sidebars, page content, and footers.

New Component: App Bar - #168

The App Bar is a header component that resides at the top of your page layout. This pairs well with the new App Shell layout. Includes multiple slots for easily reproducing standard top navigation bars.

Drawer Component Overhaul - #167

The drawer component has been completely rebuilt from the ground up. It now operates in an agnostic manner, meaning it's no longer limited to use as a side navigation panel. With this update you can choose from four positions: top/left/right/bottom.

NOTE: please be aware there's a bug in Svelte v3.50.0 that breaks the Svelte "fly" transition this component utilizes. If you rely on the Drawer we recommend you fallback to Svelte v3.49.0 until this is resolved.

UPDATE: Svelte v3.50.1 resolves the issue. The Drawer transitions will work as expected!

Built in Preset Themes - #136

You are no longer required to copy/paste theme CSS and can instead import these directly from the Skeleton package! See full instruction here.

Modular CSS Stylesheets - #136

Similar to themes, global styles for body, typography, forms, etc can now be directly imported from the Skeleton package. See full instruction here.

Code Block Component Returns - #88

After much deliberation the Code Block component has returned! Please read the documentation for this utility as setup instructions have changed. In short, the component can be progressively enchanted using Highlight.js for syntax highlighting.

Minor Updates

• New Comparison section added to the documentation site.
  Compare Skeleton to X Library #143
• The AccordionItem component now includes padding and rounded props.
  Expand AccordionItem component style props #165
• The Card component has been updated with a number of new props.
  Card element has inherit space-y-4 class #166
• The Tooltip component has been updated with new style props.
  Allow Tooltip "content" area to be full width #170
• The Data Table component now adapts to inherit page text color, as well as including a new color prop.
  Data Table text color cannot be customized #175

Bugfixes

• The hex color theme generator now provides much more balanced results.
  Hex color theme generator providing imbalanced results #161
• Keyboard Shortcut fix for ListItem.
  List and ListItem issues with ARIA #140
• The Card component no longer has an inherit y-spacing set.
  Card element has inherit space-y-4 class #166
• A Menu component race condition bug has been resolved.
  [Menu.svelte] setOrigin fires before element has been bound #172
• The Accordion component no longer shows double expansion caret icons in Safari.
  Accordion show double carets on Safari browser #173
• An a11y warning has been resolved for Gradient Headings.
  Gradient Heading throws A11y warning when package imported #183
• Avatars should no longer resize on page load.
  Avatars resizing on load and refresh #184