[RAC] Add support for children to <ColorSwatch>

[andrew-pledge-io]

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:

react-spectrum/packages/react-aria-components/src/ColorSwatch.tsx

Lines 18 to 25 in 93c26d8

	let renderProps = useRenderProps({
	...props,
	defaultClassName: 'react-aria-ColorSwatch',
	defaultStyle: colorSwatchProps.style,
	values: {
	color
	}
	});

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.:

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]

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]

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.