Spectrum heading vs React-Spectrum heading

[CezCz]

The Spectrum heading has many variable properties[0]. Size and weight among them.
In React Spectrum heading, the only thing that can be adjusted is the level [1].

I am getting designs with heading specification as per the Spectrum. Is there a way to comply with that using React Spectrum or should I create own custom component?

0. https://spectrum.adobe.com/page/heading/
1. https://react-spectrum.adobe.com/react-spectrum/Heading.html

[carolframpton]

This is a problem for Admin Console as well. For accessibility, the header elements need to be hierarchical but their default styling often doesn't match our XD. We've had to add many UNSAFE_classname attributes to work around this.

[snowystinger]

Our Heading is not the same as Spectrum's Heading, the one that maps to Spectrum's Heading will be part of Typography, which we have not started yet.
Our Heading component has no styles when standalone. It is used only within parent containers and gets context and layout from there. See https://react-spectrum.adobe.com/react-spectrum/layout.html#slots for more information.

[bstro]

I'm curious where Typography is on the react-spectrum roadmap! I could really use it right now, but can get by using Spectrum CSS classnames.

[matthewdeutsch]

Hi @bstro, unfortunately Typography is little further out on our roadmap, and likely won't be tackled until 2023 (unless a team is willing to help us contribute sooner!)

[cd-a]

What is the recommended way to use a heading then on a page? The Heading as you mentioned has no styles so dark mode isn't applied.
I could use the Text component and change the weight and size of it, but it seems hacky as I would have to use unsafe styles/class overrides.

[snowystinger]

Sorry, I didn't see this. Recommended way is to use Spectrum CSS classnames and don't use our Heading component, you should just use whatever native tag you need. Ours is specifically for use inside container components such as Dialog/Menu etc, it's not meant to be used standalone.