[RAC] Add support for children to <ColorSwatch>
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the feature here
Add a `children` prop to `` that can take a `ReactNode` or a render prop that is passed the swatch color that returns a `ReactNode`.
### 🤔 Expected Behavior?
With a ReactNode
```tsx
Aa
```
or with a render prop
```tsx
{({ color }) => (
Aa
)}
```
### 😯 Current Behavior
`` 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.:

This is currently being done with `` 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_
Contributor guide
Research direction
Start at packages/react-aria-components/src/ColorSwatch.tsx, especially the render props around lines 18–25 mentioned in the issue. Check how ColorSwatch currently handles its color and rendering, then verify the ReactNode and render-prop examples; done means children render inside the swatch in both supported forms.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100