-
Notifications
You must be signed in to change notification settings - Fork 265
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
chore: dropdown component #6241
base: main
Are you sure you want to change the base?
Conversation
Creates a new Dropdown component that is just a styled select control, so that we don't have slight variations and styling in several places, and one less thing to fix for light-mode. Styling uses the same color pattern as an Input for consistency. I used the new component in three places to start so that there's something to test: deploying a pod to Kube, creating a pod from containers, and enum items in preferences. There are 11 other instances of <select> that will need to be switched in future PRs. Signed-off-by: Tim deBoer <git@tdeboer.ca>
Rebased, renamed to Dropdown, updated to current Input styling, updated PR description, and added proposed dropdown color variables for UX review. |
I'm using Fedora Linux and the dropdown options are the same colour as the bg making it illegible. |
$: enabled = !readonly && !disabled; | ||
</script> | ||
|
||
<select |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IMO We should not use <select>
as it is a bad1 html element, with very hard customization, limiting strongly its usage :(
Footnotes
-
This is opinionated, based on experience on many projects where select was always annoying, and the result was always using a custom component, (react-select, svelte-select, vue-select etc.) all having for the react 4M download/week. ↩
Yeah, that's why this got stuck in draft. I'll close it for now until we have a plan for a new component. |
What does this PR do?
Creates a new Dropdown component that is just a styled select control, so that we don't have this styling/slight variations in several places, and one less thing to fix for light-mode. Styling uses the same variable naming pattern as an Input.
I used the new component in three places to start so that there's something to test: deploying a pod to Kube, creating a pod from containers, and enum items in preferences. There are 11 other instances of
<select>
that will need to be switched in future PRs.Screenshot / video of UI
Screen.Recording.2024-03-20.at.8.33.17.AM.mov
What issues does this PR fix or reference?
First step of #6199.
How to test this PR?
Unit test included; go to the places listed in the UI to test styling/behaviour.