Add a hover state to sidebar panel headers

[kjellr]

This PR adds a hover state to sidebar panels. When a panel is closed:

• The background changes to a light gray on hover
• The text and icon change from $dark-gray-500 to $dark-gray-900

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 $dark-gray-500 text color, but I don't think it effects their effectiveness as headers.

Screenshots

Closed, default:

Closed, hovered:

Open, default:

Open, title is hovered:

GIF

(The subtle background color isn't quite visible due to the compression 😕)

This also works nicely alongside #10062:

[jasmussen]

Love it.

We should make a few changes, then ship this. First off, the Revisions box should have the same hover:

Compare:

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.

[kjellr]

We should make a few changes, then ship this. First off, the Revisions box should have the same hover

✅ b023a78

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.

So, interestingly enough... it looks like as of right now, the Document Sidebar panel headers are dark-gray-900, but Block Sidebar panel headers (as well as the revisions header for some reason) are dark-gray-500:

That clearly doesn't make sense. 😄 As you mention, it looks like #9802 changes the block panel header color to dark-gray-900 to fix that.

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! 😄 So be sure to take a look there too)

[jasmussen]

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?

[kjellr]

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. 🙂

[jasmussen]

Ship it!