[space-picker] First iteration

DmitrySharabin commented 1 month ago

Partially addresses #123.

Usage examples

<space-picker></space-picker>

<space-picker value="oklab"></space-picker>

<space-picker spaces="oklch, p3, srgb"></space-picker>

<space-picker spaces="oklch, p3, srgb" value="p3"></space-picker>

<space-picker onspacechange="this.nextElementSibling.textContent = this.value"></space-picker>
<output></output>

netlify[bot] commented 1 month ago

Deploy Preview for color-elements ready!

Name	Link
Latest commit	42ae461e5d7ecb647eaece3b87c901553a2ca796
Latest deploy log	https://app.netlify.com/sites/color-elements/deploys/6729f4419f15120008fb1c19
Deploy Preview	https://deploy-preview-143--color-elements.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

DmitrySharabin commented 1 month ago

Thank you so much for your review! Every comment is on point, and I'll try to address it ASAP.

DmitrySharabin commented 3 weeks ago

@LeaVerou, I addressed all your feedback (thank you for it). Here are the changes I made:

Use value for actual input (as a string) and selectedSpace for the corresponding space object
Support custom grouping of color spaces via the groups() prop
Don't drop non-existent spaces; replace them with the { id, name: id } objects
Expose the valuechange and spacechange events
Retarget the input event
In formAssociated, use change as the changeEvent

Here is an example of using a custom grouping (from your color palettes research):

<space-picker id="space_picker" spaces="oklch, p3, srgb" value = "p3"></space-picker>

<script type="module">
    space_picker.groups = (spaces) => {
        let ret = {polar: {}, rectangular: {}};
        for (let id in spaces) {
            let space = spaces[id];

            if (space.id !== id) {
                continue;
            }

            let isPolar = space.coords.h?.type === "angle";
            ret[isPolar ? "polar" : "rectangular"][id] = space;
        }
        return ret;
    };
</script>

Could you please take a look at this PR one more time?

DmitrySharabin commented 3 weeks ago

Thank you so much for your feedback! I tried to address all the issues you pointed out. Namely:

Add the groupBy() prop that expects a space and returns the name of a group the space belongs to

Providing grouping looks like so now:

<space-picker id="space_picker" spaces="oklch, p3, srgb" value = "p3"></space-picker>

<script type="module">
    space_picker.groupBy = (space) => {
        let isPolar = space.coords.h?.type === "angle";
        return isPolar? "Polar" : "Rectangular";
    };
</script>

Related to the previous one: groups is now a computed prop returning an object with all the groups
Use different UI for cases with grouping and without

I hope I got everything right. If not, I'll be happy to fix it.

DmitrySharabin commented 3 weeks ago

Looks good! Please add a README, and add it to the list of upcoming components.

Thank you! Will do.

DmitrySharabin commented 3 weeks ago

Done! It's alive and can be played with: https://elements.colorjs.io/src/space-picker/ 🎉

color-js / elements