[Feature-Request] use semantic html elements wherever possible

[isaac-martin]

Just grabbed reshaped and excited to start using it, but can't help but hate that the text component defaults to rendering a div. I understand I can use the as prop to change it, but then I'd have to do this for every instance. Going to wrap my own text component for now and choose an as based on the variant passed in. But this is filing a feature request for wherever it makes sense to use semantic HTML element instead of div.

For the text component the default as could be chosen based on a mapping of variant to tag

[isaac-martin]

If wanted these are the mappings i used

  const defaultAsByVariant = {
    "title-1": "h1",
    "title-2": "h2",
    "title-3": "h3",
    "title-4": "h4",
    "title-5": "h5",
    "title-6": "h6",
    "featured-1": "p",
    "featured-2": "p",
    "featured-3": "p",
    "body-1": "p",
    "body-2": "p",
    "body-3": "p",
    "caption-1": "span",
    "caption-2": "span",
  }

[blvdmitry]

Hey, is your use case mostly about h1-6? I think we can add the heading level tags now that we have title1-6 (in v1 we had way more typography tokens which made it hard). As for the "p" – I find that most of the time body/featured fonts are used not for the paragraphs but for element label and short pieces of information where using p by default can be harmful. wdyt if we just add the heading levels by default?

[isaac-martin]

Sounds good re headings

using p by default can be harmful yeah this makes sense, maybe span rather then div as default IDK

[blvdmitry]

Coming for the next nightly release next week. Added automatic tag resolving for regular and responsive variants. Thanks for creating the ticket :)