Skip to content

Fix background-color in <select> elements in dark theme #15098

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.

Sign up for GitHub

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

Jump to bottom
Merged
krassowski merged 2 commits into from
Sep 26, 2023
Merged

Fix background-color in <select> elements in dark theme #15098

krassowski merged 2 commits into from
Sep 26, 2023

Conversation

@Rmarieta
Copy link
Contributor

@Rmarieta Rmarieta commented Sep 8, 2023

References

Issue #15091

Code changes

Small CSS fix

User-facing changes

Backwards-incompatible changes

@jupyterlab-probot
Copy link

jupyterlab-probot bot commented Sep 8, 2023

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link: Binder

@welcome
Copy link

welcome bot commented Sep 8, 2023

Thanks for submitting your first pull request! You are awesome! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please make sure you followed the pull request template, as this will help us review your contribution more quickly.
welcome
You can meet the other Jovyans by joining our Discourse forum. There is also a intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

@github-actions github-actions bot added tag:CSS For general CSS related issues and pecadilloes pkg:property-inspector Design System CSS labels Sep 8, 2023
@krassowski krassowski added the bug label Sep 8, 2023
@krassowski krassowski added this to the 4.0.x milestone Sep 8, 2023
krassowski
krassowski requested changes Sep 9, 2023
View reviewed changes
Copy link
Member

@krassowski krassowski left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Thank you for opening a PR @Rmarieta! I can confirm that this fixes the issue in the property inspector. However, it looks that the bug affects not only the property inspector, but also other places where the form editor is used, for example settings:

image

Would it be better to instead add:

.jp-inputFieldWrapper > select > option {
  background-color: var(--jp-layout-color1);
}

to packages/ui-components/style/rjsfTemplates.css where other .jp-inputFieldWrapper styles are?

@krassowski krassowski changed the title Fix issue #15091 : setting background-color in property inspector CSS Fix background-color in select elements in dark theme Sep 23, 2023
@krassowski
Copy link
Member

krassowski commented Sep 23, 2023

I pushed a commit generalising the fix to all <select>s under form wrappers. I also narrowed down related selectors. I did not add a visual test because playwright does not support capturing <select> dropdowns in open state as of now (microsoft/playwright#12229, which is understandable if you know how browsers implement them).

@krassowski krassowski changed the title Fix background-color in select elements in dark theme Fix background-color in <select> elements in dark theme Sep 26, 2023
@krassowski krassowski merged commit 0ca9b07 into jupyterlab:main Sep 26, 2023
@welcome
Copy link

welcome bot commented Sep 26, 2023

Congrats on your first merged pull request in this project! 🎉
congrats
Thank you for contributing, we are very proud of you! ❤️

@krassowski
Copy link
Member

krassowski commented Sep 26, 2023

@meeseeksdev please backport to 4.0.x

meeseeksmachine pushed a commit to meeseeksmachine/jupyterlab that referenced this pull request Sep 26, 2023
@Rmarieta @meeseeksmachine
Backport PR jupyterlab#15098: Fix background-color in <select> elem…
46898c3 
…ents in dark theme
@meeseeksmachine meeseeksmachine mentioned this pull request Sep 26, 2023
Merged
@krassowski krassowski mentioned this pull request Sep 26, 2023
Closed
jtpio pushed a commit that referenced this pull request Sep 27, 2023
@meeseeksmachine @Rmarieta
Backport PR #15098: Fix background-color in <select> elements in da…
3770d3b 
…rk theme (#15159)

Co-authored-by: Raphaël Mariétan <raphael.marietan@hotmail.com>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 26, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@krassowski krassowski krassowski approved these changes

Assignees

@Rmarieta Rmarieta

Labels

bug Design System CSS pkg:ui-components tag:CSS For general CSS related issues and pecadilloes

Projects

None yet

Milestone

4.0.x

Development

Successfully merging this pull request may close these issues.

2 participants

@Rmarieta @krassowski