color-js / elements

WIP
12 stars 1 forks source link

[color-swatch] Decouple color and label concepts #107

Open LeaVerou opened 2 months ago

LeaVerou commented 2 months ago

The current API of <color-swatch> is a bit of a mess: its contents can be either the color, or its label, or even an input, in which case the color is taken from it and the label is editable. If no label is provided, it is the color. What a mess! This causes surprising bugs like the one in #103 .

Some inspiration could be <option>: It supports both value and label. Both default to textContent, but you can set either as an attribute. So you can do either <option label="United States">us</option> or `

Though in a color swatch it’s common to want to display both the color and its label. I think we should display both and users can always hide the relevant parts.