Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[New WC] Coordinate dropdown #124

Open
DmitrySharabin opened this issue Oct 16, 2024 · 3 comments
Open

[New WC] Coordinate dropdown #124

DmitrySharabin opened this issue Oct 16, 2024 · 3 comments

Comments

@DmitrySharabin
Copy link
Member

DmitrySharabin commented Oct 16, 2024

Depends on #123

This new WC encapsulates the color space dropdown and can be used inside <color-picker> and <color-chart> to allow users to set (change) the color coord dynamically.

@DmitrySharabin
Copy link
Member Author

DmitrySharabin commented Nov 11, 2024

As @LeaVerou mentioned, the main issue with the current styles is that it doesn't communicate the hierarchy:
image

I thought, what if we use a chevron instead of a line, like in breadcrumbs? Will it help?

image

@LeaVerou
Copy link
Member

Too many chevrons, but it could work if the dropdown arrow only appears on hover/focus

@DmitrySharabin
Copy link
Member Author

DmitrySharabin commented Dec 2, 2024

Here are the UIs we considered (until now) for this component in one place.

Current oneLive preview

image

A là breadcrumbs

image

With some tweaks (not so many chevrons from the very beginning) — Related PR #150Live preview

Demo.mov

Channels as a button group — Related PR #169

image

With some tweaks (color space picker in bold, smaller text font for channels) — Live preview

image

Using fieldset (basic — channels is a button group, compact — channels is a <select> element) — Live demo

image

All the above + A là breadcrumbs + connectorLive preview

Channel Picker UI

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants