[channel-picker] First iteration #147
Conversation
Reduce its resemblance with bare `<select>`.
✅ Deploy Preview for color-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Great job, only minor comments.
One thing that should absolutely change though is the styling: It should be obvious that these are two separate selects. They should still be readable as a unit, but their styling should have affordances that indicate that they are separate dropdowns. Like, the triangle should still be there, for both of them. Then you also don't need the weird dashed line.
| let channel = this.value?.split(".")[1]; | ||
| if (channel && channel in coords) { | ||
| // Preserve the channel if it exists in the new space | ||
| this._el.picker.value = channel; |
There was a problem hiding this comment.
Likely post-MVP, but even if it doesn't, it would be nice to still keep it around somewhere so that switching back to that space preserves your selection
There was a problem hiding this comment.
Good idea! Thanks.
Co-authored-by: Lea Verou <[email protected]>
Move the `spacechange` event handler from the `if` statement.
And corresponding docs
Bring the affordances back for both `<select>`s
DmitrySharabin
force-pushed
the
channel-picker
branch
from
0b14b5e to
1d701c4
Compare
|
I addressed all your feedback. Thank you! I also made the picker more resistant to and tolerant of user errors. I would be grateful for your following review. |
There was a problem hiding this comment.
Code looks good, only remaining comment is styling: The control still tries to look like a single thing, which looks weird. I'd render it as either separate dropdowns that are side by side or a "segmented" control, where there is a line down the middle. And the border color should be way fainter in any case.
Thank you for your feedback. I ended up with a "segmented" control. We can improve it with the next iterations. 
|
|
Yeah. One issue with the current styling is that it doesn't communicate the hierarchy, that Lightness is a coordinate of Oklch, they look like peers. |
Partially addresses #124.
It's a bare minimum, just for a start.
Docs: https://deploy-preview-147--color-elements.netlify.app/src/channel-picker/