[channel-picker] Add support for the compact prop

[DmitrySharabin]

Following our discussion with @LeaVerou on Messenger, this PR is an experiment using radio buttons to select a channel instead of a <select> element.

Works in dark mode, too:

I wonder what you think about it.

Live preview: https://deploy-preview-169--color-elements.netlify.app/src/channel-picker/

Here is what it looks like inside charts: https://deploy-preview-169--color-elements.netlify.app/src/color-chart/

[netlify]

✅ Deploy Preview for color-elements ready!

Name	Link
🔨 Latest commit	2f68190
🔍 Latest deploy log	https://app.netlify.com/sites/color-elements/deploys/675eb76e31cd0300087c8525
😎 Deploy Preview	https://deploy-preview-169--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.

[LeaVerou]

Oh I wasn't thinking of visible radio buttons! More like a button group next to the space picker e.g. see
(but likely with less background)
The radios would be visually hidden (but still accessible to the keyboard)

[DmitrySharabin]

I changed the styles to look more like a button group; I agree it's much better.

The issue is that I don't know how to show the hierarchy between a color space and its coords. Should we place the space picker above the channels, make it bigger, bolder, or something else? Or should we add some divider, chevron, or arrow?

Do you have any suggestions?

[LeaVerou]

I'd make the text smaller. And maybe the space bold?

But also, I’m thinking there is value in keeping the <select> code around and giving people the option — there are use cases for both

[DmitrySharabin]

I'd make the text smaller.

All the text or only the channels?

But also, I’m thinking there is value in keeping the <select> code around and giving people the option — there are use cases for both

I agree. How about a compact boolean attribute? If provided, the <select> element is used?

[DmitrySharabin]

I worked with the component a bit more, tweaked the styles a bit, and added support for the compact attribute (we can rename it if necessary). Could you please take another look?

https://deploy-preview-169--color-elements.netlify.app/src/channel-picker/

[LeaVerou]

Better but it still doesn't communicate hierarchy — the channel picker is much more prominent than its color space :/
Perhaps making the letters even smaller?

I wonder if there's any prior art, how does software with a colorspace / channel selector communicate the hierarchy?

PS: Remember that you need more horizontal padding than vertical padding for them to optically look the same

[DmitrySharabin]

What if we use <fieldset> to communicate hierarchy? https://codepen.io/dmitrysharabin/pen/KwPPOrd

I couldn't find any examples of software that allows one to choose a specific channel in a specified color space. 🤷‍♂️

[LeaVerou]

This is huge :( Think of how it would look in the components we want to use it…

[DmitrySharabin]

This is huge :( Think of how it would look in the components we want to use it…

I should have said that I made it bigger for demo purposes. It's not the size it will have IRL; it's just an illustration of the idea. I switched back to 100% font size in the Codepen.

[LeaVerou]

No I got that. But you usually want something having a height of about one line. Think of any of these above a chart for exmaple.

[DmitrySharabin]

What if we go with something as simple as bread crumbs using a slash-like symbol as a delimiter? Or with something fancier, like a connector between the space picker and the channels?

P.S. Those are my drawings, not screenshots of something already implemented. 😅

[LeaVerou]

I quite like the second one! It has the right horizontal format, and conveys hierarchy better than any of the other options. Not sure we need the gradient, we can just make them both the same border color (make sure it works with dark mode too)

[DmitrySharabin]

@LeaVerou, I implemented the style with connectors. Could you please take a look?