💡 Proposal - Allow to edit which heading element is used in components

[YvesRijckaert]

Forma 36 contribution proposal

The problem

When using the EntryCard component, I wanted to change the heading element from h1 to h3. But this does not seem possible right now.

https://github.com/contentful/forma-36/blob/1f3b3eb71e2c22efced2ae64e2528f027fb47504/packages/components/card/src/EntryCard/EntryCard.tsx#L36

The proposed solution

Being able to change the heading element with a prop.

[YvesRijckaert]

I can create a PR for this, just checking if it would be okay to do so.

[burakukula]

Hey @YvesRijckaert! Sorry for the delay. I think it totally makes sense, I would even say that we have a bug right now, since it might actually create an incorrect structure. We should consider changing the default to something different than h1, but yeah, allowing the setting up of the tag here would be great and changing the default maybe. If you have some time to create a PR it would be great.

[denkristoffer]

Rendering the h1 shouldn't be a problem when it's inside article.

[YvesRijckaert]

@denkristoffer I think we use this component in a lot of places, and often we would need more flexibility when it comes to which heading element to use.. I ran into this issue when using this component in compose. But for example here in the web app an h2 or h3 would be more appropriate:

[denkristoffer]

I am all for being able to change the element. I wanted to add information that article should create a new heading context which would mean using a h1 in one should be fine. However, this discussion made me double check, and it looks like this behaviour was never actually implemented in browsers even though the spec says it's fine 😱

[massao]

I am all for being able to change the element. I wanted to add information that article should create a new heading context which would mean using a h1 in one should be fine. However, this discussion made me double check, and it looks like this behaviour was never actually implemented in browsers even though the spec says it's fine 😱

Didn't know that the browsers didn't implement this, good to know. But IMHO even if it was implemented we should also give the option to change the heading, since we give the option to change the tag used as wrapper of the EntryCard and other components

[denkristoffer]

Coming back to this, I guess an API that fits with our existing guidelines would be something like passing an object to headingProps, which can then contain the as key?

<Card headingProps={{ as: 'h3' }} />

What do you think?

[github-actions[bot]]

Marking issue as stale since there was no acitivty for 30 days

[Lelith]

this was fixed