adobe / adobe/react-spectrum

[RAC] Add support for children to <ColorSwatch>

Open
#7,262 2 comments 0 reactions 0 assignees View on GitHub
enhancement
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.:

![image](https://github.com/user-attachments/assets/7bcc9a31-12a4-4f7b-be81-264d6ac26e02)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.