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

Make provider dropdown clickable area the full size of the visible UI element #41

Merged
merged 1 commit into from
May 30, 2024

Conversation

jdgarcia
Copy link
Contributor

https://gitkraken.atlassian.net/browse/GKCS-5674

select elements can't have other tags inside them, only text, so at first I though I'd have to create a custom select implementation to handle the "prefix" (PRs: [icon]), or add a dropdown or popover package, but I then thought of a much simpler solution: make the whole thing a select but give it margin left so I can show the custom "prefix" content over it.

Before:
image

After:
image

A small side effect is the caret is closer to the edge but that's a result of the caret in native select elements always rendering outside of the select's padding.

Copy link
Collaborator

@miggy-e miggy-e left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer the caret spacing be slightly padded, but think the full size clickable area is more important

@jdgarcia jdgarcia merged commit da53b84 into main May 30, 2024
1 check passed
@jdgarcia jdgarcia deleted the fix-small-provider-dropdown branch May 30, 2024 02:16
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

Successfully merging this pull request may close these issues.

2 participants