Color: expose a stable key / id for a selected swatch, not just the Color value

[rilescode]

Provide a general summary of the feature here

Let ColorSwatch/ColorSwatchPicker carry a stable key/id that is independent of the color value, and surface it in onChange/onSelectionChange alongside the Color

🤔 Expected Behavior?

I can give each swatch an id (for example a color design token name) and receive that id when it is selected, in addition to the resolved Color

😯 Current Behavior

ColorSwatchPicker renders a ListBox whose item id is the color string itself (<ListBoxItem id={color.toString('hexa')}>, selectedKeys={[state.color.toString('hexa')]}), and its value is ValueBase<string | Color, Color>, so onChange only ever hands back a Color. The color string is the identity, so two entries that resolve to the same color collide on the same key, and there is no way to know which entry was chosen.

💁 Possible Solution

Support an id/key on ColorSwatchPickerItem (and ColorSwatch) that is independent of color, key the underlying ListBox by that id, and include it in the selection callback (onChange(color, id))

🔦 Context

We map design tokens to colors. A token resolves to an arbitrary color string, and different tokens can share the same color. We need the selected token's key, not just the resolved color, which the current color string as key model cannot provide

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

I'll chat to the team if this use case has come up previously, but at a glance either this would require some larger changes to useColorPickerState to support key based tracking along side color tracking (or extend it since that is used in other components), or we could add the same selectedKey/onSelectionChange props to ColorSwatchPicker alongside the existing onChange which maybe confusing.

[LFDanLu]

Chatted with the team and we were wondering if you could instead use a base ListBox for this case since you'd be working with item keys instead of colors.

[snowystinger]

In addition, this component is specifically for choosing colors. It's not for choosing tokens, which may represent multiple colors depending on dark/light or multiple themes. So we feel that it's not the right component for this kind of UI. You might put Swatches inside the ListBox, but you wouldn't be selecting the colors, you'd be selecting the token.