feat: replace sd-skeleton web component with CSS class (alternative) - #3087
Open
mariohamann wants to merge 1 commit into
Open
feat: replace sd-skeleton web component with CSS class (alternative)#3087mariohamann wants to merge 1 commit into
mariohamann wants to merge 1 commit into
Conversation
github-project-automation
Bot
moved this to 📋 Backlog
in Solid Design System Project Board
|
Contributor
|
🚀 Storybook has been deployed for branch |
1 task
5 tasks
Introduce `sd-skeleton` as a CSS utility class in `packages/styles/src/modules/skeleton.css`. The class uses a `::after` overlay with `isolation: isolate` so it correctly covers shadow DOM elements (e.g. `sd-button`) without z-index leakage, and animates the host rather than the overlay to prevent opacity bleed-through at mid-pulse. Pair with the native `inert` attribute to remove the element from the a11y tree and prevent focus during loading — toggle both together. Deprecate `<sd-skeleton>` web component with `@status deprecated` and a runtime `console.warn`. Add `Styles/sd-skeleton` stories (overview, variants, on-elements, toggle demo) and screenshot test stories. Update component stories with deprecation notices. Also fix ESLint config to disable `no-unsafe-call` for `*.spec.ts` files (was only `*.test.ts`). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
mariohamann
force-pushed
the
refactor-skeleton
branch
from
June 26, 2026 11:18
f03f904 to
caf166b
Compare
mariohamann
marked this pull request as ready for review
June 26, 2026 11:19
martascorreia
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Introduce
sd-skeletonas a CSS utility class inpackages/styles/src/modules/skeleton.css. The class uses a::afteroverlay withisolation: isolateso it correctly covers shadow DOM elements (e.g.sd-button) without z-index leakage, and animates the host rather than the overlay to prevent opacity bleed-through at mid-pulse.Pair with the native
inertattribute to remove the element from the a11y tree and prevent focus during loading — toggle both together.Deprecate
<sd-skeleton>web component with@status deprecatedand a runtimeconsole.warn.Add
Styles/sd-skeletonstories (overview, variants, on-elements, toggle demo) and screenshot test stories. Update component stories with deprecation notices.Also fix ESLint config to disable
no-unsafe-callfor*.spec.tsfiles (was only*.test.ts).Description:
Definition of Reviewable: