search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
13.07k stars 1.14k forks source link

[RAC] Add support for children to <ColorSwatch> #7262

Open andrew-pledge-io opened 4 weeks ago

andrew-pledge-io commented 4 weeks ago

Provide a general summary of the feature here

Add a children prop to <ColorSwatch> that can take a ReactNode or a render prop that is passed the swatch color that returns a ReactNode.

🤔 Expected Behavior?

With a ReactNode

<ColorSwatch>
 <span>Aa</span>
</ColorSwatch>

or with a render prop

<ColorSwatch>
  {({ color }) => (
    <span style={{ color: color.toString('css') }}>
      Aa
    </span>
  )}
</ColorSwatch>

😯 Current Behavior

<ColorSwatch> doesn't render any children.

💁 Possible Solution

I think the starting point is to add children to the render props here: https://github.com/adobe/react-spectrum/blob/93c26d8bd2dfe48a815f08c58925a977b94d6fdd/packages/react-aria-components/src/ColorSwatch.tsx#L18-L25

I'm not sure what else if anything would be needed.

🔦 Context

I have a swatch that renders some text on top of the selected color in order to demonstrate text contrast, e.g.:

image

This is currently being done with <ColorSwatch> by absolutely positioning the text element on top of the swatch relative to a shared parent.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

snowystinger commented 3 weeks ago

Could you use the css property content with a string? We'd need to enforce some roles if we allowed children, they'd all need to be presentational.

andrew-pledge-io commented 3 weeks ago

I'm currently using an absolutely positioned sibling as a workaround.

I'm sure a pseudo element could be made to work but it's a little more difficult to style given the color is coming from JavaScript, especially in Tailwind.