Custom components

[iwasingh]

Hi everyone, first of all i would like to thank you for your work in this project and i appreciate the fact you made it available to use for everyone. Now the question, let's say i want to make a new custom component that inherits part of the style from spectrum(for instance an action button). How do i give the style to the component since everything is scoped and the package comes with a transpiled css? These are the possible solutions that i came up with:

1. inherit the style with %spectrum-BaseButton or @extends %spectrum-BaseButton or @inherit: %spectrum-BaseButton, none of them worked out
2. write own custom css and replace parts of the styling using css variables provided by react-spectrum
3. install the css of the component from spectrum-css and inherit the style from that
4. create and build the component in the cloned react-spectrum repository and link that to the main repository of the project

[LFDanLu]

@iwasingh How custom is this component? Will it be using the aria/stately hooks or is it wrapping a component straight from the @react-spectrum packages? If it is the former, you could probably grab the styles from spectrum-css. If it is the latter, what kind of style changes are you looking for? Color/theming can be handled via the provider.

[LFDanLu]

What Spectrum styles would you be using for this component? This doesn't feel like a SearchField, more like a button that triggers a popover, and that button has a button within it for performing the search.

EDIT: not a button within a button, rather multiple buttons side by side on top of a div

[iwasingh]

I was thinking about applying the Action Button style but with white background. This is the final result i would like to have

[LFDanLu]

I see. Would the dates and "Desk" be separate clickable areas? Or is the entire thing just one big button?

Here is how you accomplish some of it, the main part is the overriding of the spectrum variables so that the action button is white rather than grey: https://codesandbox.io/s/muddy-breeze-dc147?file=/src/App.js

[iwasingh]

@LFDanLu appreciate your example, the entire thing is a big one button as in your example
I thought about editing the spectrum theme variable (--spectrum-actionbutton-background-color) but that would modify the default background color of all action buttons in the app which is not i am aiming for. I need some sort of inheritance similar to ActionButton itself or with the SearchField which get the style from skin.css under @adobe/spectrum-css-temp

Example with SearchField
This component inherits part of the style from the text-field

https://github.com/adobe/react-spectrum/blob/main/packages/@adobe/spectrum-css-temp/components/search/skin.css

return (
    <TextFieldBase
      {...otherProps}
      labelProps={labelProps}
      inputProps={inputProps}
      UNSAFE_className={
        classNames(
          styles,
          'spectrum-Search',
          'spectrum-Textfield',
          {
            'is-disabled': isDisabled,
            'is-quiet': props.isQuiet,
            'spectrum-Search--invalid': props.validationState === 'invalid',
            'spectrum-Search--valid': props.validationState === 'valid'
          },
          UNSAFE_className
        )
      }
      inputClassName={classNames(styles, 'spectrum-Search-input')}
      ref={ref}
      inputRef={inputRef}
      isDisabled={isDisabled}
      icon={icon}
      wrapperChildren={(state.value !== '' && !props.isReadOnly) && clearButton} />
  );

Notice the 'spectrum-Search' 'spectrum-Textfield',

Now the problem
I cannot make a custom component that inherit the style from react-spectrum like SearchField because

• css is scoped
• react-spectrum does not deliver spectrum-temp-css but only the transpiled style which is, as i said before, scoped

There are 3 reasonable way that comes to my mind that solves the problem:

1. use Spectrum Css package which deliver not scoped css and use that to build a new component that inherits the style from others
2. make available @adobe/spectrum-css-temp within react-spectrum (btw, why is not available?)
3. use spectrum theme variables to recreate the style of the component and override it, in my case that would mean to
   create custom css that inherit border colors, hovers etc. with the spectrum-theme variables and finally use a
   custom background color

Is that makes sense or am i overthinking it?

EDIT: third solution that came up in my mind

[LFDanLu]

Well if the only change you want to make to the styles is to make ActionButton is the background color, you could leverage the UNSAFE_className prop to pass in your own custom class name (pairing it with a css file that specifies the background color override). Typically this is frowned upon since we don't want to encourage people to override how the components are styled due to possible breakage/conflicts with other components, but a background color change seems pretty innocuous to me. Keep in mind that there should be a certain degree of color contrast between the background color and the text color for accessibility (https://www.w3.org/WAI/test-evaluate/preliminary/#contrast).

Your other options are pretty much as you said:

1. create your own component leveraging the aria/stately hooks as I mentioned previously and then you can make your own styling/piggy back off of what Spectrum CSS provides (basically your option 1). Careful with this one if you intend on using other React Spectrum components alongside your custom component since our css variables are 100% up to date with Spectrum CSS and you may end up with two copies of the css.
2. Do the variable overriding + Provider scoping (https://react-spectrum.adobe.com/react-spectrum/theming.html#color-schemes) from my sandbox to ensure the changes are consistent across your app. (basically your option 3)

How much of your app is going to be using React Spectrum components? How much customization are you aiming for? Is this going to be your only custom component? The answers to these question will affect how you should go about handling this.
As for Spectrum-css-temp, we don't expose that since it has diverged a bit from Spectrum CSS and we still need to sync with their latest. It also uses css-modules so you'd need a mapping between the class name and the modularized name to do anything meaningful