Spectrum style for React Aria?

[cheema-corellian]

Is anybody using any React Aria components and applying Spectrum styling to them?

We are considering adopting Spectrum as the preferred solution. But will occasionally need to customize a component. This is where we might pull in a React Aria component, customize it and add Spectrum style to it, to match the rest of the site. I imagine this is possible. But unsure on what the best known method to accomplish this is.

Thanks in advance.

[snowystinger]

Related discussions
#6231
#6242

[snowystinger]

That'd be a bug for https://github.com/adobe/spectrum-css it seems then?
However, since you can't use the Adobe Clean font, which has a funny quirk that spectrum-css is working around, maybe it'd be better to use the starter kits? https://react-spectrum.adobe.com/react-aria/getting-started.html#starter-kits where you don't need to worry about limitations of trying to modify Spectrum?

I'm actually not sure why the react spectrum one is working, we should have the same issue.

[cheema-corellian]

That'd be a bug for https://github.com/adobe/spectrum-css it seems then?

I agree that it is likely a spectrum-css bug. I have filed it as such with that project. adobe/spectrum-css#2714

However, since you can't use the Adobe Clean font, which has a funny quirk that spectrum-css is working around,

I suspect that this issue isn't caused by lack of Adobe Clean. All three buttons use the exact same font. Segoe UI, as that is the first fallback font available on my system. I could be wrong however. I am going to try to see if I can reproduce the issue with Adobe Clean.

maybe it'd be better to use the starter kits? https://react-spectrum.adobe.com/react-aria/getting-started.html#starter-kits where you don't need to worry about limitations of trying to modify Spectrum?

I can't quite use the starter kit. Because it throws away most of the excellent work done by the Spectrum team. And trying to recreate that on my own would be a major undertaking.

It is my understanding that the current choices for anybody wanting to adopt Adobe's React libraries are:

1. Adopt React Spectrum. Take the design system and style you are given and don't try to change it.
2. Adopt React Aria. You create your own design system and style. The starter kit is just that. You still have to do most of the work.
3. Adopt Aria and apply Spectrum design and style by using Spectrum CSS.

For very small teams, I think #1 makes the most sense. Until they need to change one small thing with style. That flexibility just isn't there.

#2 makes more sense for larger teams that have the desire and resources to create their own design system. Reading the comments in this form, this is the option many appear to have selected.

#3 tries to combine best of both worlds and is perhaps the best fit for a very small team like ours. We need to make very few changes to Spectrum style and do not have the resources to build a full-featured design system like Spectrum. But this option is perhaps the least tested.

Let me know if any of these assumptions are incorrect.

[cheema-corellian]

Just a quick update on this. I changed my Stackblitz example so that it uses Adobe Clean font for all buttons. And the issue did not go away. There appears to be uneven padding for button labels in spectrum-css that impacts React Aria buttons if they use spectrum-css. React Spectrum doesn't appear to use the same button label class and therefore doesn't suffer from this problem. See screenshot below.

I'll update the bug filed with spectrum-css project with this information. Just posting here fore the benefit of anybody else who runs into this issue down the road.

[snowystinger]

React Spectrum uses a fork of Spectrum CSS. We've diverged some over the years. Hopefully Spectrum CSS will be able to assist in getting the positioning correct for those non-React Spectrum components.