From 23c244e0288d47e762733bb60ca557550698675f Mon Sep 17 00:00:00 2001 From: Tammie Lister Date: Wed, 28 Oct 2020 19:33:27 +0000 Subject: [PATCH 1/3] Iterations to link interface. --- .../components/link-control/search-create-button.js | 4 ++-- .../src/components/link-control/style.scss | 12 ++++-------- packages/icons/src/library/keyboard-return.js | 2 +- 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/link-control/search-create-button.js b/packages/block-editor/src/components/link-control/search-create-button.js index 5bb385f31f8e26..679c5df55c0fca 100644 --- a/packages/block-editor/src/components/link-control/search-create-button.js +++ b/packages/block-editor/src/components/link-control/search-create-button.js @@ -10,7 +10,7 @@ import { isFunction } from 'lodash'; import { __, sprintf } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; import { createInterpolateElement } from '@wordpress/element'; -import { Icon, plusCircle } from '@wordpress/icons'; +import { Icon, plus } from '@wordpress/icons'; export const LinkControlSearchCreate = ( { searchTerm, @@ -50,7 +50,7 @@ export const LinkControlSearchCreate = ( { > diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index ae7d4c8b9b89dc..96e1e9b6360df5 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -78,21 +78,19 @@ $block-editor-link-control-number-of-actions: 1; height: $grid-unit-20/2; top: 0; bottom: auto; - background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); } &::after { height: $grid-unit-20; bottom: 0; top: auto; - background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); } } .block-editor-link-control__search-results-label { - padding: 15px 30px 0 30px; + padding: $grid-unit-20 $grid-unit-40 0; display: block; - font-size: 1.1em; + font-weight: 600; } .block-editor-link-control__search-results { @@ -116,7 +114,7 @@ $block-editor-link-control-number-of-actions: 1; width: 100%; border: none; text-align: left; - padding: 10px 15px; + padding: $grid-unit-15 $grid-unit-20; border-radius: 5px; height: auto; @@ -211,9 +209,8 @@ $block-editor-link-control-number-of-actions: 1; // Separate Create button when following other suggestions. .components-button + .block-editor-link-control__search-create { - margin-top: 20px; overflow: visible; - padding: 12px 15px; + padding: $grid-unit-15 $grid-unit-20; // Create fake border. We cannot use border because the button has a border // radius applied to it @@ -224,7 +221,6 @@ $block-editor-link-control-number-of-actions: 1; left: 0; display: block; width: 100%; - border-top: 1px solid $gray-300; } } diff --git a/packages/icons/src/library/keyboard-return.js b/packages/icons/src/library/keyboard-return.js index 4855d708131fb9..6304a6dc285b04 100644 --- a/packages/icons/src/library/keyboard-return.js +++ b/packages/icons/src/library/keyboard-return.js @@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives'; const keyboardReturn = ( - + ); From eb8ee9a0c6ba03b62eee495aaa92c6972e1b07b9 Mon Sep 17 00:00:00 2001 From: Tammie Lister Date: Mon, 9 Nov 2020 10:51:35 +0000 Subject: [PATCH 2/3] Adjusts margins on icon --- packages/block-editor/src/components/link-control/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 96e1e9b6360df5..c9249011bc4d22 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -59,6 +59,10 @@ $block-editor-link-control-number-of-actions: 1; right: $grid-unit-20 + 1px + min($grid-unit-10, ( 40px - $button-size ) / 2); } +.components-button .block-editor-link-control__search-submit .has-icon { + margin: -1px; +} + .block-editor-link-control__search-results-wrapper { position: relative; margin-top: -$grid-unit-20 + 1px; From bead00a4e57eb83117b9448983c2936faf0235de Mon Sep 17 00:00:00 2001 From: Tammie Lister Date: Mon, 9 Nov 2020 15:40:37 +0000 Subject: [PATCH 3/3] Adds in test for svg and also fixes issue with spacing --- .../components/link-control/test/__snapshots__/index.js.snap | 2 +- packages/icons/src/library/keyboard-return.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap index abb82e4ce4c1a5..dd0bc6f80877ce 100644 --- a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Basic rendering should render 1`] = `"
Currently selected link settings
"`; +exports[`Basic rendering should render 1`] = `"
Currently selected link settings
"`; diff --git a/packages/icons/src/library/keyboard-return.js b/packages/icons/src/library/keyboard-return.js index 6304a6dc285b04..dbced364bac4e4 100644 --- a/packages/icons/src/library/keyboard-return.js +++ b/packages/icons/src/library/keyboard-return.js @@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives'; const keyboardReturn = ( - + );