search

color-js / elements

WIP
12 stars 1 forks source link

[color-chart] Doesn't work properly when no labels are provided #103

Open LeaVerou opened 3 months ago

LeaVerou commented 3 months ago

We resolved that it should default to the color index, but it seems to be incorrect.

image
DmitrySharabin commented 2 months ago

When we use <color-scale> as a source of colors to be plotted, there is no way that colors won't get a label—by default, the color itself will become the label:

https://github.com/color-js/elements/blob/805459eb4db244f7a9169e28bcc9eccb94f72b0e/src/color-scale/color-scale.js#L111

I wonder if there is a way to get the raw string used when building the corresponding color. If so, we could compare that string with the generated label, and if they are equal, the color index should be used as an X-coordinate. 🤔

DmitrySharabin commented 2 months ago

I can see that every color has parseMeta. Let's see if it can help.

LeaVerou commented 2 months ago

This is quite hacky. Let me think how we can solve this properly.

LeaVerou commented 2 months ago

I think we need to have a distinct concept of a color name/label, rather than "sometimes it's the element content and sometimes it's not, sometimes it's the color itself, sometimes it's not". The color itself should be shown at all times, and if authors wish not to show it, they can always hide the corresponding part.

I also don't like this weird API where we slot an input to indicate the element is editable. We should have a separate attribute for that that generates the input, and we should be able to optionally slot a custom input if we want to apply custom things to it or have it participate in form submission (rather than recreating the whole input API on <color-swatch>).