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.

[cheema-corellian]

Just a quick update. This issue used to impact only React Aria and Spectrum CSS and not React Spectrum. However with Spectrum 2, that I assume adopts more of React Aria and Spectrum CSS, it now impacts React Spectrum as well.

S2 Storybook:
https://reactspectrum.blob.core.windows.net/reactspectrum/0d72ba1e00cc5383bd0c436b3fe5f8345446781f/storybook-s2/index.html?path=/docs/intro--docs

All button labels in S2 storybook are off center. They are a little lower than they should be.

I did file an issue in the Spectrum CSS repo a few months ago. However, there doesn't appear to be any movement on it.

adobe/spectrum-css#2714

[snowystinger]

Spectrum 2 should be unaffected (please note, development is still in progress, the issue you're seeing in the s2 storybook will go away in the future), we aren't using more Spectrum CSS (can be seen in the PR and in the storybook docs). That it impacted React Aria was only if people tried to style it with Spectrum CSS, since we aren't doing that, it won't be affected. React Aria is unstyled to begin with.

[cheema-corellian]

the issue you're seeing in the s2 storybook will go away in the future

Thanks for clearing that up.