From 505e31049b7ca56aa1d343433308355fddbb449d Mon Sep 17 00:00:00 2001 From: Joen Asmussen <1204802+jasmussen@users.noreply.github.com> Date: Mon, 13 Apr 2020 08:19:23 +0200 Subject: [PATCH] G2 visual followup (#21476) * Try removing the triangle indicator. * Remove the gray fade again. * Fix busy gradient. * Update latest post icon. * Tweak active state for alignments. * Also do that for block navigation. * Animate focus state. * Unfloat notice button. Fixes #21316. * Popovers: default to bottom right. Fixes #20765. * Add spacing to popover. * Add a "primary" prop to popover, and apply to menu popovers. * isAlternate instead of isPrimary * Smaller plus for appender. * Update snapshots. --- .../src/components/alignment-toolbar/index.js | 1 + .../test/__snapshots__/index.js.snap | 2 + .../components/block-navigation/style.scss | 6 +- .../components/block-settings-menu/index.js | 2 +- .../src/components/block-switcher/index.js | 7 +- .../src/components/block-switcher/style.scss | 14 --- .../test/__snapshots__/index.js.snap | 14 ++- .../components/button-block-appender/index.js | 4 +- .../rich-text/format-toolbar/index.js | 1 + .../block-library/src/paragraph/editor.scss | 27 ----- packages/components/src/button/style.scss | 13 +- .../components/src/dropdown-menu/style.scss | 9 +- packages/components/src/dropdown/index.js | 2 +- packages/components/src/notice/style.scss | 7 -- packages/components/src/popover/index.js | 6 +- packages/components/src/popover/style.scss | 23 ++++ packages/components/src/toolbar/style.scss | 15 +++ packages/icons/src/library/post-list.js | 10 +- storybook/test/__snapshots__/index.js.snap | 114 +----------------- 19 files changed, 93 insertions(+), 184 deletions(-) diff --git a/packages/block-editor/src/components/alignment-toolbar/index.js b/packages/block-editor/src/components/alignment-toolbar/index.js index 4e44ea01387b4e..2536e2e7e79b96 100644 --- a/packages/block-editor/src/components/alignment-toolbar/index.js +++ b/packages/block-editor/src/components/alignment-toolbar/index.js @@ -30,6 +30,7 @@ const DEFAULT_ALIGNMENT_CONTROLS = [ const POPOVER_PROPS = { position: 'bottom right', + isAlternate: true, }; export function AlignmentToolbar( props ) { diff --git a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap index fad7ec9756a73a..4c5300651aef32 100644 --- a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap @@ -50,6 +50,7 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified label="Change text alignment" popoverProps={ Object { + "isAlternate": true, "position": "bottom right", } } @@ -121,6 +122,7 @@ exports[`AlignmentToolbar should match snapshot 1`] = ` label="Change text alignment" popoverProps={ Object { + "isAlternate": true, "position": "bottom right", } } diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 6a6f47e7250561..abc9ad802ed08e 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -81,10 +81,12 @@ $tree-item-height: 36px; margin-right: 6px; } - &.is-selected, - &.is-selected:focus { + &.is-selected svg, + &.is-selected:focus svg { color: $white; background: $dark-gray-primary; + box-shadow: 0 0 0 $border-width $dark-gray-primary; + border-radius: $border-width; } } diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js index 278c3b79b0be32..e4c2c64682a32f 100644 --- a/packages/block-editor/src/components/block-settings-menu/index.js +++ b/packages/block-editor/src/components/block-settings-menu/index.js @@ -29,7 +29,7 @@ import BlockSettingsMenuControls from '../block-settings-menu-controls'; const POPOVER_PROPS = { className: 'block-editor-block-settings-menu__popover', position: 'bottom right', - noArrow: true, + isAlternate: true, }; export function BlockSettingsMenu( { clientIds } ) { diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index 95794f8f935731..eb2f7653af4f28 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -29,6 +29,11 @@ import BlockStyles from '../block-styles'; import BlockPreview from '../block-preview'; import BlockTypesList from '../block-types-list'; +const POPOVER_PROPS = { + position: 'bottom right', + isAlternate: true, +}; + export class BlockSwitcher extends Component { constructor() { super( ...arguments ); @@ -99,7 +104,7 @@ export class BlockSwitcher extends Component { return ( { diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss index 207acd240f0a45..17878a4db2963c 100644 --- a/packages/block-editor/src/components/block-switcher/style.scss +++ b/packages/block-editor/src/components/block-switcher/style.scss @@ -6,19 +6,6 @@ .block-editor-block-switcher__no-switcher-icon, .block-editor-block-switcher__toggle { position: relative; - - &::after { - display: block; - content: ""; - position: absolute; - bottom: 1px; - right: 0; - border-color: transparent; - border-style: solid; - border-width: 4px; - border-right-color: currentColor; - border-bottom-color: currentColor; - } } @@ -82,7 +69,6 @@ max-width: calc(340px * 2); display: flex; background: $white; - box-shadow: $shadow-popover; padding: 0; .components-menu-group { diff --git a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap index ab8ff515675b62..a7a9d6dd1bbed0 100644 --- a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap @@ -29,7 +29,12 @@ exports[`BlockSwitcher should render enabled block switcher with multi block whe @@ -39,7 +44,12 @@ exports[`BlockSwitcher should render switcher with blocks 1`] = ` diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js index 4d4a50e6712d58..7787bdfcfb87c1 100644 --- a/packages/block-editor/src/components/button-block-appender/index.js +++ b/packages/block-editor/src/components/button-block-appender/index.js @@ -8,7 +8,7 @@ import classnames from 'classnames'; */ import { Button, Tooltip, VisuallyHidden } from '@wordpress/components'; import { _x, sprintf } from '@wordpress/i18n'; -import { Icon, plus } from '@wordpress/icons'; +import { Icon, create } from '@wordpress/icons'; /** * Internal dependencies @@ -63,7 +63,7 @@ function ButtonBlockAppender( { label={ label } > { label } - + ); diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js index 159014241e85ee..3bbc0eadd680e3 100644 --- a/packages/block-editor/src/components/rich-text/format-toolbar/index.js +++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.js @@ -14,6 +14,7 @@ import { chevronDown } from '@wordpress/icons'; const POPOVER_PROPS = { position: 'bottom right', + isAlternate: true, }; const FormatToolbar = () => { diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss index 6d2711c0aded92..d0afb9ca839208 100644 --- a/packages/block-library/src/paragraph/editor.scss +++ b/packages/block-library/src/paragraph/editor.scss @@ -3,33 +3,6 @@ min-height: auto !important; } -// Show a footprint fade effect when first selecting any block. -.block-editor-block-list__block[data-type="core/paragraph"].is-selected { - &::before { - position: absolute; - z-index: 1; - pointer-events: none; - content: ""; - top: 0; - bottom: 0; - left: 0; - right: 0; - animation: block-editor-block-list__block-fade-out-animation 0.3s ease-out 0.2s; - animation-fill-mode: forwards; - @include reduce-motion("animation"); - } - - // Only flash it if you're not typing. - &:not(.is-typing)::before { - background: rgba($black, 0.03); - - // Flash a white color for dark themes. - .is-dark-theme & { - background: rgba($white, 0.1); - } - } -} - @keyframes block-editor-block-list__block-fade-out-animation { from { opacity: 1; diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 3e4a7b94e78a77..1ad73b8d4f142c 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -212,9 +212,18 @@ &.is-secondary.is-busy:disabled, &.is-secondary.is-busy[aria-disabled="true"] { animation: components-button__busy-animation 2500ms infinite linear; - background-size: 100px 100%; - background-image: repeating-linear-gradient(-45deg, $light-gray-500, $white 11px, $white 10px, $light-gray-500 20px); opacity: 1; + background-size: 100px 100%; + // Disable reason: This function call looks nicer when each argument is on its own line. + /* stylelint-disable */ + background-image: linear-gradient( + -45deg, + color($white shade(2%)) 28%, + color($white shade(12%)) 28%, + color($white shade(12%)) 72%, + color($white shade(2%)) 72% + ); + /* stylelint-enable */ } &.is-small { diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index c69ecd8c80a8dd..8b6c26be120168 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -34,20 +34,19 @@ height: 1px; } - &.is-active { + &.is-active svg { // Block UI appearance. - border: $border-width solid $dark-gray-primary; - border-radius: $radius-block-ui; color: $white; background: $dark-gray-primary; + box-shadow: 0 0 0 $border-width $dark-gray-primary; + border-radius: $border-width; } // Formatting buttons > svg { - border-radius: $radius-round-rectangle; + border-radius: $radius-block-ui; width: $button-size-small; height: $button-size-small; - margin: -1px $grid-unit-10 -1px 0; } } diff --git a/packages/components/src/dropdown/index.js b/packages/components/src/dropdown/index.js index cf47a7ac188a4a..dbf8380b1ffa47 100644 --- a/packages/components/src/dropdown/index.js +++ b/packages/components/src/dropdown/index.js @@ -78,7 +78,7 @@ class Dropdown extends Component { const { renderContent, renderToggle, - position = 'bottom', + position = 'bottom right', className, contentClassName, expandOnMobile, diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss index d69edcc61d8000..3ffb738ebbe07b 100644 --- a/packages/components/src/notice/style.scss +++ b/packages/components/src/notice/style.scss @@ -79,12 +79,5 @@ display: block; margin-left: 0; margin-top: $grid-unit-10; - - // Beyond mobile, align the action button on the right to use the space, and reduce margins so they don't add too much extra line-height. - @include break-medium() { - float: right; - margin-top: -$grid-unit-05; - margin-bottom: -$grid-unit-05; - } } } diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js index 2e06f907de8a75..13aa4b34dfe669 100644 --- a/packages/components/src/popover/index.js +++ b/packages/components/src/popover/index.js @@ -233,10 +233,11 @@ const Popover = ( { children, className, noArrow = true, + isAlternate, // Disable reason: We generate the `...contentProps` rest as remainder // of props which aren't explicitly handled by this component. /* eslint-disable no-unused-vars */ - position = 'top', + position = 'bottom right', range, focusOnMount = 'firstElement', anchorRef, @@ -270,6 +271,7 @@ const Popover = ( { useEffect( () => { if ( isExpanded ) { setClass( containerRef.current, 'is-without-arrow', noArrow ); + setClass( containerRef.current, 'is-alternate', isAlternate ); setAttribute( containerRef.current, 'data-x-axis' ); setAttribute( containerRef.current, 'data-y-axis' ); setStyle( containerRef.current, 'top' ); @@ -392,6 +394,7 @@ const Popover = ( { 'is-without-arrow', noArrow || ( xAxis === 'center' && yAxis === 'middle' ) ); + setClass( containerRef.current, 'is-alternate', isAlternate ); setAttribute( containerRef.current, 'data-x-axis', xAxis ); setAttribute( containerRef.current, 'data-y-axis', yAxis ); setStyle( @@ -575,6 +578,7 @@ const Popover = ( { { 'is-expanded': isExpanded, 'is-without-arrow': noArrow, + 'is-alternate': isAlternate, } ) } { ...contentProps } diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss index 7ece47bcdb9d79..74a57d17197d29 100644 --- a/packages/components/src/popover/style.scss +++ b/packages/components/src/popover/style.scss @@ -140,6 +140,23 @@ $arrow-size: 8px; align-items: center; display: flex; } + + // Add spacing. + &.is-from-top { + margin-top: $grid-unit-15; + } + + &.is-from-bottom { + margin-top: -$grid-unit-15; + } + + &.is-from-left:not(.is-from-top):not(.is-from-bottom) { + margin-left: $grid-unit-15; + } + + &.is-from-right:not(.is-from-top):not(.is-from-bottom) { + margin-right: $grid-unit-15; + } } .components-popover__content { @@ -149,6 +166,12 @@ $arrow-size: 8px; box-shadow: $shadow-popover; border-radius: $radius-block-ui; + // Alternate treatment for popovers that put them at elevation zero with high contrast. + .is-alternate & { + border: $border-width solid $dark-gray-primary; + box-shadow: none; + } + .components-popover & { position: absolute; height: auto; diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss index d6ed9ba8e0159c..74afbf16b7c812 100644 --- a/packages/components/src/toolbar/style.scss +++ b/packages/components/src/toolbar/style.scss @@ -39,6 +39,11 @@ left: $grid-unit-10; right: $grid-unit-10; z-index: -1; + + // Animate in. + animation: components-button__appear-animation 0.1s ease; + animation-fill-mode: forwards; + @include reduce-motion("animation"); } svg { @@ -85,3 +90,13 @@ } } } + + +@keyframes components-button__appear-animation { + from { + transform: scaleY(0); + } + to { + transform: scaleY(1); + } +} diff --git a/packages/icons/src/library/post-list.js b/packages/icons/src/library/post-list.js index 0c5fbdfa0c7e84..7656d492d17fd0 100644 --- a/packages/icons/src/library/post-list.js +++ b/packages/icons/src/library/post-list.js @@ -1,17 +1,11 @@ /** * WordPress dependencies */ -import { Path, Rect, SVG } from '@wordpress/primitives'; +import { Path, SVG } from '@wordpress/primitives'; const postList = ( - - - - - - - + ); diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index bb0a5659eaaa81..9cfcf29606ed3d 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -14832,44 +14832,8 @@ exports[`Storyshots Icons/Icon Library 1`] = ` width={24} xmlns="http://www.w3.org/2000/svg" > - - - - - - - - - - - - - - - - - -