From fec0a753391814e2351cb2079aa1b134c5084010 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 12 Feb 2020 08:46:28 +0100 Subject: [PATCH] Adjust primary, secondary and tertiary buttons. This will no doubt need additional feedback, and the branch should stay open for a while to gather all those thoughts. One of the primary reasons for reducing the borders is, similar to tertiary buttons, that they work due to their context, just like how menu ite ms work in their menu item contexts. This puts a great onus on the implementer to choose the right button for the right context. In that vein, w e may even want to provide additional buttons, such as a solid background button that isn't primary, for cases where a primary button is insuffi cient, and a secondary button does not work well enough in the context. An example could be considered the link dialog mocked up here https://github.com/WordPress/gutenberg/issues/20007#issuecomment-581812491 --- packages/base-styles/_colors.scss | 1 + packages/base-styles/_mixins.scss | 19 +--- .../components/block-navigation/style.scss | 4 +- .../src/components/block-styles/style.scss | 10 +- .../src/components/block-switcher/index.js | 20 ++-- .../src/components/block-switcher/style.scss | 15 ++- .../components/inserter-list-item/style.scss | 4 - .../components/media-placeholder/style.scss | 23 +--- .../block-library/src/gallery/editor.scss | 30 ++++- packages/components/src/button/style.scss | 107 +++++++++++------- .../sidebar/last-revision/style.scss | 2 +- .../components/post-preview-button/index.js | 2 +- .../format-library/src/text-color/style.scss | 2 +- 13 files changed, 130 insertions(+), 109 deletions(-) diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss index a2ea5498778c45..ddcd5afdf21abc 100644 --- a/packages/base-styles/_colors.scss +++ b/packages/base-styles/_colors.scss @@ -29,6 +29,7 @@ $white: #fff; $dark-gray-primary: #1e1e1e; $medium-gray-text: #757575; $light-gray-secondary: #ccc; +$light-gray-tertiary: #e7e8e9; $theme-color: theme(button); $blue-medium-focus: #007cba; // @todo: Currently being used as "spot" color. Needs to be considered in context of themes. $blue-medium-focus-dark: #fff; diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 129cfe219a8be9..e74f8924cec7fd 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -214,35 +214,26 @@ } @mixin block-style__hover { - background: $light-gray-200; - color: $dark-gray-900 !important; + border-color: $theme-color; + color: $theme-color !important; } @mixin block-style__focus() { - color: $dark-gray-900; - box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500; + box-shadow: inset 0 0 0 1px $white, 0 0 0 2px $theme-color; // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; } @mixin block-style__is-active() { - color: $dark-gray-900; - box-shadow: inset 0 0 0 2px $dark-gray-500; + color: $white; + background: $dark-gray-primary; // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; outline-offset: -2px; } -@mixin block-style__is-active-focus() { - color: $dark-gray-900; - box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500, inset 0 0 0 2px $dark-gray-500; - - // Windows High Contrast mode will show this outline, but not the box-shadow. - outline: 4px solid transparent; - outline-offset: -4px; -} /** * Applies editor left position to the selector passed as argument diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 684d465ee1869b..b912462076fda9 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -92,8 +92,8 @@ $tree-item-height: 36px; &.is-selected, &.is-selected:focus { - color: $dark-gray-700; - background: $light-gray-300; + color: $white; + background: $dark-gray-primary; } } diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss index 63b1f311164438..da6c8d0ebbbb79 100644 --- a/packages/block-editor/src/components/block-styles/style.scss +++ b/packages/block-editor/src/components/block-styles/style.scss @@ -20,14 +20,14 @@ &:hover { @include block-style__hover; + + .block-editor-block-styles__item-preview { + border-color: $theme-color; + } } &.is-active { @include block-style__is-active(); - - &:focus { - @include block-style__is-active-focus(); - } } } @@ -35,7 +35,7 @@ .block-editor-block-styles__item-preview { outline: $border-width solid transparent; // Shown in Windows High Contrast mode. padding: 0; - border: $border-width solid rgba($dark-gray-900, 0.2); + border: $border-width solid rgba($dark-gray-primary, 0.2); border-radius: $radius-round-rectangle; display: flex; overflow: hidden; diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index da254ab88e6a3f..e74cfc9ad94b76 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -7,7 +7,7 @@ import { castArray, filter, first, mapKeys, orderBy, uniq, map } from 'lodash'; * WordPress dependencies */ import { __, _n, sprintf } from '@wordpress/i18n'; -import { Dropdown, Button, Toolbar, PanelBody } from '@wordpress/components'; +import { Dropdown, Button, Toolbar, MenuGroup } from '@wordpress/components'; import { getBlockType, getPossibleBlockTransformations, @@ -143,10 +143,10 @@ export class BlockSwitcher extends Component { possibleBlockTransformations.length !== 0 ) && (
{ hasBlockStyles && ( - + +
+ { __( 'Styles' ) } +
- + ) } { possibleBlockTransformations.length !== 0 && ( - <> -
{ __( 'Transform to:' ) }
+ +
+ { __( 'Transform to' ) } +
( { @@ -175,7 +177,7 @@ export class BlockSwitcher extends Component { onClose(); } } /> - + ) }
) } diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss index 363ad40771b5d6..deb97b464b4541 100644 --- a/packages/block-editor/src/components/block-switcher/style.scss +++ b/packages/block-editor/src/components/block-switcher/style.scss @@ -90,7 +90,15 @@ display: flex; background: $white; box-shadow: $shadow-popover; - padding: $grid-unit-30; + padding: 0; + + .components-menu-group { + padding: $grid-unit-20 $grid-unit-30; + } + + .components-menu-group + .components-menu-group { + border-color: $light-gray-secondary; + } } .block-editor-block-switcher__popover .components-popover__content { @@ -100,6 +108,11 @@ width: 50%; } + .block-editor-block-switcher__label { + margin-bottom: $grid-unit-10; + color: $medium-gray-text; + } + @include break-medium { position: relative; diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss index 7bbe6a156934c8..6b63e1cc520718 100644 --- a/packages/block-editor/src/components/inserter-list-item/style.scss +++ b/packages/block-editor/src/components/inserter-list-item/style.scss @@ -35,10 +35,6 @@ &.is-active { @include block-style__is-active(); - - &:focus { - @include block-style__is-active-focus(); - } } } } diff --git a/packages/block-editor/src/components/media-placeholder/style.scss b/packages/block-editor/src/components/media-placeholder/style.scss index 0d6f11dc16dea5..da043f1cc88c36 100644 --- a/packages/block-editor/src/components/media-placeholder/style.scss +++ b/packages/block-editor/src/components/media-placeholder/style.scss @@ -29,15 +29,6 @@ .block-editor-media-placeholder__button { margin-bottom: 0.5rem; - - .dashicon { - vertical-align: middle; - margin-bottom: 3px; - } - - &:hover { - color: $dark-gray-800; - } } .block-editor-media-placeholder__cancel-button.is-link { @@ -46,20 +37,10 @@ } .block-editor-media-placeholder.is-appender { - min-height: 100px; + min-height: 0; &:hover { cursor: pointer; - border: 1px solid $theme-color; + box-shadow: 0 0 0 1px $theme-color; } - - .block-editor-media-placeholder__upload-button { - margin-right: $grid-unit-05; - &.components-button:hover, - &.components-button:focus { - box-shadow: none; - border: $border-width solid $dark-gray-500; - } - } - } diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index c360af02cd997e..91f17230d8ba4a 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -6,8 +6,19 @@ list-style-type: none; } + // @todo: this deserves a refactor, by being moved to the toolbar. .block-editor-media-placeholder { - margin-bottom: $grid-unit-10; + margin-bottom: $grid-unit-15; + padding: $grid-unit-15; + + // This element is empty here anyway. + .components-placeholder__label { + display: none; + } + + .components-button { + margin-bottom: 0; + } } } @@ -26,12 +37,19 @@ figure.wp-block-gallery { .blocks-gallery-item { // Hide the focus outline that otherwise briefly appears when selecting a block. - figure:not(.is-selected):focus { + figure:not(.is-selected):focus, + img:focus { outline: none; } figure.is-selected { - outline: 4px solid theme(primary); + box-shadow: 0 0 0 $border-width $white, 0 0 0 3px $theme-color; + border-radius: $radius-block-ui; + outline: 2px solid transparent; + + img { + border-radius: $radius-block-ui; + } } figure.is-transient img { @@ -103,9 +121,9 @@ figure.wp-block-gallery { left: -2px; } -.blocks-gallery-item__move-backward, -.blocks-gallery-item__move-forward, -.blocks-gallery-item__remove { +.blocks-gallery-item__move-backward.components-button, +.blocks-gallery-item__move-forward.components-button, +.blocks-gallery-item__remove.components-button { padding: 0; } diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 909216adb80359..c2407b0babf669 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -36,35 +36,10 @@ outline: 1px solid transparent; } - // Secondary/default button style. - &.is-secondary { - white-space: nowrap; - color: $theme-color; - background: transparent; - - &:hover:not(:disabled) { - border-color: $theme-color; - } - - &:active:not(:disabled) { - background: #f3f5f6; - color: color($theme-color shade(5%)); - border-color: #7e8993; - box-shadow: none; - } - - &:disabled, - &[aria-disabled="true"] { - color: #a0a5aa; - border-color: #ddd; - background: #f7f7f7; - text-shadow: 0 $border-width 0 #fff; - transform: none; - opacity: 1; - } - } + /** + * Primary button style. + */ - // Primary button style. &.is-primary { white-space: nowrap; background: color($theme-color); @@ -126,7 +101,65 @@ } } - /* Buttons that look like links, for a cross of good semantics with the visual */ + /** + * Secondary and tertiary buttons. + */ + + &.is-secondary, + &.is-tertiary { + &:active:not(:disabled) { + background: $light-gray-tertiary; + color: color($theme-color shade(10%)); + box-shadow: none; + } + + &:hover:not(:disabled) { + color: color($theme-color shade(10%)); + box-shadow: 0 0 0 $border-width color($theme-color shade(10%)); + } + + &:disabled, + &[aria-disabled="true"], + &[aria-disabled="true"]:hover { + color: lighten($medium-gray-text, 5%); + background: lighten($light-gray-tertiary, 5%); + transform: none; + opacity: 1; + box-shadow: none; + } + } + + /** + * Secondary button style. + */ + + &.is-secondary { + box-shadow: 0 0 0 $border-width $theme-color; + outline: 1px solid transparent; // Shown in high contrast mode. + white-space: nowrap; + color: $theme-color; + background: transparent; + } + + /** + * Tertiary buttons. + */ + + &.is-tertiary { + white-space: nowrap; + color: $theme-color; + background: transparent; + + .dashicon { + display: inline-block; + flex: 0 0 auto; + } + } + + /** + * Link buttons. + */ + &.is-link { margin: 0; padding: 0; @@ -158,7 +191,7 @@ } } - /* Link buttons that are red to indicate destructive behavior. */ + // Link buttons that are red to indicate destructive behavior. &.is-link.is-destructive { color: $alert-red; } @@ -194,20 +227,6 @@ } } - // Buttons that are text-based. - &.is-tertiary { - color: $theme-color; - - .dashicon { - display: inline-block; - flex: 0 0 auto; - } - - &:not(:disabled):not([aria-disabled="true"]):hover { - color: color($theme-color shade(25%)); - } - } - &.has-icon { padding: 6px; // Works for 24px icons. Smaller icons are vertically centered by flex alignments. diff --git a/packages/edit-post/src/components/sidebar/last-revision/style.scss b/packages/edit-post/src/components/sidebar/last-revision/style.scss index 772119aa43d5c0..54c14ec4fdc069 100644 --- a/packages/edit-post/src/components/sidebar/last-revision/style.scss +++ b/packages/edit-post/src/components/sidebar/last-revision/style.scss @@ -3,6 +3,6 @@ padding: 0; } -.editor-post-last-revision__title { +.editor-post-last-revision__title.components-button { padding: #{ $panel-padding - 3px } $panel-padding; // subtract extra height of dashicon } diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js index ab04c3c5fa5bbc..742d7362fddb4c 100644 --- a/packages/editor/src/components/post-preview-button/index.js +++ b/packages/editor/src/components/post-preview-button/index.js @@ -192,7 +192,7 @@ export class PostPreviewButton extends Component { return (