Try: Show background and increased opacity on disabled switcher

[jasmussen]

This one goes out to all the @chrivanpatten's in the crowd!

Well, specifically, it is in response to this conversation we had here: #11669 (comment)

The problem: we always show the Block Switcher interface, even if no transformations are available. When no transformations are available, the buttonis disabled, which usually means it needs to have very contrast.

However in this case, the block switcher also works as a block type indicator, which makes it valuable to be able to see the icon in question.

This PR tries to marry the two challenges and shows the button as disabled adding a light gray background, but still increasing the opacity.

Thoughts?

Before:

After:

[youknowriad]

I personally don't understand that this is a disabled button :(

[gziolo]

I personally don't understand that this is a disabled button :(

It needs to be disabled when there is no action available to make sure it's skipped when using keyboard navigation, right?

[jasmussen]

Added "needs design feedback" label to get some additional thoughts.

[ZebulanStanphill]

On my laptop screen, I can barely tell that the button has a light gray background; if my screen is tilted a bit too much in one direction, it just looks white.

[kjellr]

I like this approach. I do think it's not 100% clear that this is disabled, but that could be partially because the gray is so light. Perhaps we darken slightly to $light-gray-200? In any case, I think after hovering over it once, I'd get the message.

As you note, this area serves two purposes:

1. Primarily, it tells you what block you're currently using.
2. Secondarily, it allows you to swap it for a different block, or to choose a different block style.

The current, low opacity approach is designed primarily to address 2. It actually hurts 1 because it makes the indicator harder to see.

This new approach keeps 1 working well, and also addresses 2 as a secondary concern. That makes sense to me.

[jasmussen]

Great feedback, everyone. I tried darkening the background color, that helps. I also tried to make the icon itself monochrome, which I forgot from the conversation we had on the initial thread. I think that helps a lot:

When will the YouTube icon be red, then, you ask? Glad you asked. It still has its colors in the Block Library:

What do you think?

[youknowriad]

@jasmussen That's better for me 👍 Thanks for the updates

[jasmussen]

Awesome, thanks. I'm wondering why the tests fail?

[youknowriad]

@jasmussen Probably unrelated (related to animations), I'll look at those separately.

[kjellr]

LGTM!

One small note is that the placeholder and the disabled switcher colors are not exactly identical ($dark-opacity-light-200 vs. $light-gray-200) in my browser at least. This nags at me just a bit, but that may just be me being too nitpicky. Inspecting these shows that they're only a couple hex values off, so it's probably not a huge deal.

[jasmussen]

Thank you Kjell. Going to merge this one.

I've been thinking that we should revisit the placeholder pattern separately in a holistic way to see how we can improve it. I think there's some simplification we can do here that might make the gray unnecessary.