Skip to content

feat(skeleton): add skeleton component #1925

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from

Conversation

dancormier
Copy link
Contributor

@dancormier dancormier commented May 23, 2025

STACKS-752


This PR adds a Skeleton component with a base monochromatic style and an ai variant.

cc @kylejrp

Details

Stacks Svelte implementation

Previously, a version of this component was maintained solely in our Stacks-Svelte library 🔒, but we've had requests for modification that made this seem like a good time to lift it into Stacks Classic. I've created a companion Stacks-Svelte PR 🔒 to support these changes.

Screenshots

Light mode

image
image

Dark mode

image
image

Light high contrast mode

image
image

Dark high contrast mode

image
image

How to test

  • Run this PR locally and visit the Skeleton docs page (or check out the deploy preview)
  • Verify that it renders and is styled as expected
  • Bonus: Verify the appearance in dark and HC modes

For design

  • Please verify the value choices for the base style. This style is new and I used my best judgement for the values. FWIW, the AI variant should look identical to the style currently set as the base style for the Stacks-Svelte Skeleton component.

Copy link

changeset-bot bot commented May 23, 2025

🦋 Changeset detected

Latest commit: 25cc9d1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@stackoverflow/stacks Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

netlify bot commented May 23, 2025

Deploy Preview for stacks ready!

Name Link
🔨 Latest commit 25cc9d1
🔍 Latest deploy log https://app.netlify.com/projects/stacks/deploys/6830c17f4e57f30008cec875
😎 Deploy Preview https://deploy-preview-1925--stacks.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@dancormier dancormier requested review from CGuindon and a team May 23, 2025 18:48
@dancormier dancormier marked this pull request as ready for review May 23, 2025 18:50
Copy link
Contributor

@giamir giamir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work @dancormier. Thanks for porting this over to Stacks Classic. It looks very good to me, including docs and tests. 🎉
After design gives the thumbs up I would be happy to see this merged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants