Skip to content

Commit

Permalink
Try: Show background and increased opacity on disabled switcher (#13721)
Browse files Browse the repository at this point in the history
* Try: Show background and increased opacity on disabled switcher

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?

* Try darker gray and monochrome icon.
  • Loading branch information
jasmussen authored Feb 12, 2019
1 parent 134214d commit 33e6d42
Showing 1 changed file with 16 additions and 1 deletion.
17 changes: 16 additions & 1 deletion packages/editor/src/components/block-switcher/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,30 @@
padding: 3px;
}


.components-icon-button.editor-block-switcher__no-switcher-icon {
width: $icon-button-size + 6px + 6px;

.editor-block-icon {
margin-right: auto;
margin-left: auto;
}
}

// When the block switcher does not have any transformations, we show it but as disabled.
// The background and opacity change helps make the icon legible, despite being disabled.
.components-button.editor-block-switcher__no-switcher-icon:disabled {
background: $light-gray-200;
border-radius: 0;
opacity: 0.84;

// Also make the icon monochrome to further imply disabled state.
// We use !important here because icon colors are set as inline styles,
// and should be overridden when disabled.
.editor-block-icon.has-colors {
color: $dark-gray-500 !important;
}
}

// Style this the same as the block buttons in the library.
// Needs specificiity to override the icon button.
.components-icon-button.editor-block-switcher__toggle {
Expand Down

0 comments on commit 33e6d42

Please sign in to comment.