Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Add a hover state to sidebar panel headers #10070
This PR adds a hover state to sidebar panels. When a panel is closed:
When a panel is already open, the text and icon color changes, but the background does not.
This helps subtly differentiate collapsed panels from uncollapsed ones, and provides another visual cue reinforcement that these headers are interactive.
This does lighten the un-hovered color of these headers to our usual
(The subtle background color isn't quite visible due to the compression
This also works nicely alongside #10062:
We should make a few changes, then ship this. First off, the Revisions box should have the same hover:
I don't know if we shouldn't change it here, but there's a change incoming in
update/font-picker (not yet a PR) that changes the text color of the sidebar to be way darker, not just dark gray. This is to be consistent with headings & chevrons inside the block library.
I can be convinced otherwise, but it looks good in that branch.
So, interestingly enough... it looks like as of right now, the Document Sidebar panel headers are
That clearly doesn't make sense.
I added that update to this branch in 13f5657. This technically works, but it's a little less ideal because now there's no hover state for expanded items. We could make the text lighter on hover, but that's the opposite of what happens with most of our other hover states.
In any case, give it a try and let me know what you think.
(Also — I realized these hover states go beyond the sidebar and effect the block picker, too!
I think this is pretty good!
I like the darker panel color. Also the hover seems fine in the library since we use it in a few places:
I don't think an expanded panel HAS to have that same hover, but it seems like just a matter of CSS specificity to make this work no? What makes this not work do you know?
Oh right! I tried that initially, but decided that the margins around the title bar in some expanded panels felt too uncomfortable for my taste:
In those cases, it looks nice and comfortable without the gray background, but when the background is in place, the vertical margin in between the panel background and the panel content feels a little tight. That's why I explored a text-only hover state for expanded panels instead.
In any case, give this another spin and let me know if you think those margins are uncomfortable or not in practice. I could be convinced otherwise.