-
Notifications
You must be signed in to change notification settings - Fork 46.4k
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
fix(devtools): update menu list css #22660
Conversation
Hey @bvaughn 👋 Can you take a look at this changes, whenever you get time ? |
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.
CI is failing with a lint error. Please run yarn prettier
to fix.
packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.css
Outdated
Show resolved
Hide resolved
Many CI check seems to be failing now. Any idea? Looks unrelated to the changes I did in latest commit |
Can you try rebasing on git rebase main |
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.
This is looking a lot better!
Now the only thing that's broken is the hover, I think. Probably need to do the same thing for the MenuItem
CSS class as we did for the MenuList
class.
It's really unfortunate how our CSS colors get forked between constants.js
and root.css
because of these global styles
Edit I filed #22678 to follow up on my above comment
Yes its left, should we add another variable in
Yes I was unsure whether the solution I proposed was good since it adds the same values from |
Love the suggestion on #22678. |
Glad it helped 😄 Do I need to close this PR ? If not, can you help me with this:
|
For the "fix" to work fully with this PR, yes. We would need to do this as well. Or we could land the other fix first and then this would not be necessary. |
Closing as it will be fixed in #22716 |
Love it |
Summary
In devtools when we select a deeply nested component, and try to select parent component using the dropdown. Text overlaps with the background text since the menu list is rendered outside the dom so CSS var is not applied properly.
Check below recording for the issue:
How did you test this change?
Tested using inline devtools testing example. Below is the screen recording for testing the CSS: