ColorSwatch does not apply UNSAFE_className

[CHE1RON]

Provide a general summary of the issue here

Using ColorSwatch, I want to give it a border, but it is not applied, no matter what I do 😅

🤔 Expected Behavior?

Given this code:

    <ColorSwatchPicker>
      {colors.map((color) => (
        <ColorSwatch
          key={color}
          color={color}
          UNSAFE_className="border border-black/10" // < does not work
        />
      ))}
    </ColorSwatchPicker>

😯 Current Behavior

no border showing

💁 Possible Solution

I checked the component source code, but to me it seems that className is applied after using useStyleProps so maybe it gets overwritten?

🔦 Context

No response

🖥️ Steps to Reproduce

Paste code above with list of some color codes and try to apply UNSAFE_className

Version

3.35.1

What browsers are you seeing the problem on?

Firefox, Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Looks like we're accidentally overwriting it https://github.com/adobe/react-spectrum/blob/2fd87d9f1d894e6b00a595cce73c6e8828029132/packages/%40react-spectrum/color/src/ColorSwatch.tsx#L64

want to contribute a fix?

[CHE1RON]

let me have a look 😉