(edited by @mariohamann)
User Story
As a developer using SDS, I want to easily be able to style sd-skeleton regarding it's size fitting to the element being expected after sd-skeleton disappears.
Example
<sd-skeleton>
<sd-button>Some dummy text</sd-button>
</sd-skeleton>
The sd-skeleton should have exactly the size of the element itself. The docs describe that behaviour, but it's not working, see: https://codepen.io/mariohamann/pen/emBOmpy
<sd-skeleton show-content>
<sd-button>Some dummy text</sd-button>
</sd-skeleton>
In that case the skeleton should disappear, and the original content should be shown.
Furhter a11y guidelines would have to be evaluated here.
Further considerations
It should be evaluated, if the component should be deprecated and instead a CSS Style being introduced, as this would make a ton of things way easier.
Example:
<sd-button class="sd-skeleton">Some dummy text</sd-button>
Here the class could just be toggled.
Original ticket
As a developer or user of the Solid Design System, I would like to use the show-content attribute on the sd-skeleton component to toggle visibility of slotted content, as well as maintain the skeleton placeholder styling when content is hidden, so that the component behaves as intended by design, and developers can easily switch between loading state and real content without manual styling.
### Suggested Solution
Add a boolean showContent property/attribute to the sd-skeleton component.
When showContent is true, display the slotted content visibly and hide the skeleton placeholder styling.
When showContent is false or absent, hide the slotted content and show the skeleton placeholder as currently implemented.
Update styles and rendering logic accordingly.
Add tests to verify show-content toggling behavior.
DoR
DoD
(edited by @mariohamann)
User Story
As a developer using SDS, I want to easily be able to style
sd-skeletonregarding it's size fitting to the element being expected aftersd-skeletondisappears.Example
The sd-skeleton should have exactly the size of the element itself. The docs describe that behaviour, but it's not working, see: https://codepen.io/mariohamann/pen/emBOmpy
In that case the skeleton should disappear, and the original content should be shown.
Furhter a11y guidelines would have to be evaluated here.
Further considerations
It should be evaluated, if the component should be deprecated and instead a CSS Style being introduced, as this would make a ton of things way easier.
Example:
Here the class could just be toggled.
Original ticket
As a developer or user of the Solid Design System, I would like to use the show-content attribute on the sd-skeleton component to toggle visibility of slotted content, as well as maintain the skeleton placeholder styling when content is hidden, so that the component behaves as intended by design, and developers can easily switch between loading state and real content without manual styling. ### Suggested Solution Add a boolean showContent property/attribute to the sd-skeleton component. When showContent is true, display the slotted content visibly and hide the skeleton placeholder styling. When showContent is false or absent, hide the slotted content and show the skeleton placeholder as currently implemented. Update styles and rendering logic accordingly. Add tests to verify show-content toggling behavior.DoD