Skip to content
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

[Feature Request] Allow override for Skeleton 'content' component element type #3397

Open
ampossardt opened this issue Jul 2, 2024 · 1 comment

Comments

@ampossardt
Copy link

ampossardt commented Jul 2, 2024

Is your feature request related to a problem? Please describe.

When using the Skeleton component, there are scenarios where the structure of the HTML doesn't lend itself to wrapping the 'content' of skeleton in a div. Ex:

<ul>
  <Skeleton as="li" className="...">Item one</Skeleton>
  <Skeleton as="li"  className="...">Item two</Skeleton>
  <Skeleton as="li"  className="...">Item three</Skeleton>
</ul>

In this scenario, the top-level element is rendered as an li, but the inner content of the item is wrapped in a div, which isn't valid HTML. It would be nice to be able to control what element is rendered for the inner wrapper.

Describe the solution you'd like

I would expect there to be an additional prop to provide an element type similar to the as prop:

<ul>
  <Skeleton as="li" contentAs="p">
     My content
  </Skeleton>
</ul>

Describe alternatives you've considered

Using classNames is fine for styling the inner wrapper, but to be semantically correct in this scenario, divs aren't valid descendents of an li tag so it would be preferrable to keep the HTML valid, and also reduce the number of tags that need to be rendered.

Screenshots or Videos

No response

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