S2 Styles Question

[ninavizz]

Hello! Been poking around the S2 Storybook, and I noticed that many of the UI components lack an "Emphasis" option—where things can be blue'd, as opposed to remaining black and white. Notably, the Action Buttons, tabs, and segmented menus lack this option. Are there plans to add-in the "Emphasis" option before launch to parity with S1?

Also, following S2's release, how long will S1 remain supported for—and will migrating some components to S2, require migrating all components to S2?

[reidbarber]

Some component variants that are available in S1 might not be available in S2 (due to design or accessibility reasons). I don't want to speak for specific components since some component designs are still in progress and things could change.

Hopefully the migration docs make it easier to upgrade and understand the changes. We are definitely open to feedback on that experience!

S2 will definitely be able to be used alongside S1. Although it isn't ideal, we recognize that teams may have complex apps that take a while to fully upgrade. I'm not sure of a support timeline for S1 but it definitely isn't going away in the foreseeable future.

[ninavizz]

@reidbarber Thx for the thorough response! Yes, the app I'm working on is very complicated—and its unique needs may require keeping S1 components—less because of time to migrate, and more because some items (such as the TableView) appear to be going out in S2 with far fewer features, than in S1. Likewise, to the "Emphasis" capability on buttons that I'm not seeing in S2 components. As the designer, I don't see aesthetic/usability conflicts with how I'm envisioning it—but it will be a pain for the devs. Thx again!

[ninavizz]

@snowystinger Ok—If I'm semi-understanding you (and I cannot understand Javascript to save my life, so that's not saying much!)... I think you're telling me that a developer with a solid understanding of Javascript and possibly some of React, could use the "StyleMacro" from S1 and apply it to Aria, with any modifications we want—and from a developer perspective, that'd function as a custom theme within the code itself?

(TY again for your patience & clarity, you rule!)

[dannify]

Sort of. The style macro is a way to apply styles defined by Spectrum (in this case it is styles and colors for Spectrum 2) and apply those to unstyled components. React Aria Components are the same components we use for Spectrum with the Spectrum styles added to them. If there is a component that does not work for you style wise, you are better off having your devs take the component you need and add the custom styles you need. You could even look at the code we use for our S2 components to use as the starting point or you could use the many examples we have on the website.

[cheema-corellian]

As I understand it, the new style macro makes it easier to customize styling of existing S2 components. Something easy like this where the marginStart style value is allowed to be changed.

<S2ActionButton styles={style({marginStart: 8})}>
  Edit
</S2ActionButton>

Using this method, changing many CSS properties is supported. However changing colors is not. For that, you have to use the underlying React Aria component and customize it. The task then goes from a 3-line thing to a 500-line thing. As seen here:

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/s2/src/ActionButton.tsx

Above link shows the code for S2 ActionButton that builds on top of React Aria ActionButton. Code for some dependencies is not shown on that page, but would have to be included.

Granted, a dev would not have to write the entire 500-line component from scratch. They could just copy the S2 ActionButton and edit it to the get the desired colors. But, at that point they would have forked the component and are largely responsible for its care and feeding from there on out.

If the above is a correct understanding, then perhaps the use of UNSAFE_style and UNSAFE_classNames with S2 components becomes quite appealing as they bring the task back down to a 3-line thing. The risks associated with the use of these facilities become quite palatable, given the alternative.

Please let me know if I got any of the details wrong and if there is an easier/better way to customize the colors of S2 components.

[devongovett]

Customizing the styles of spectrum components is not a supported use case. As a design system, Spectrum is about bringing consistency to our products, and allowing things to be overridden defeats the purpose of that. If you want to build your own custom design system, then I'd recommend using React Aria Components. UNSAFE should almost never be used (it is actually unsafe and will break when we make updates).

[cheema-corellian]

@devongovett I completely agree with what you said about Spectrum goals and that is one of the many reasons why we use Spectrum and not Aria. I am just thinking out loud here about options available to a team should they find themselves in a situation where they need to change a single color value on an S2 component. And also trying to validate my assumptions.