From 47acdb29afb3c790500e80529f21b74514dbc67f Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 19 Feb 2019 15:04:18 -0500 Subject: [PATCH 1/6] Use chevron instead of ellipsis in url input field options. --- packages/editor/src/components/url-popover/index.js | 2 +- packages/editor/src/components/url-popover/style.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/url-popover/index.js b/packages/editor/src/components/url-popover/index.js index c89f76d8bfd626..5842dd6017b5ed 100644 --- a/packages/editor/src/components/url-popover/index.js +++ b/packages/editor/src/components/url-popover/index.js @@ -54,7 +54,7 @@ class URLPopover extends Component { { !! renderSettings && ( Date: Tue, 19 Feb 2019 15:32:42 -0500 Subject: [PATCH 2/6] Mimic toolbar icon styles for the icons in the URL popover. --- .../src/components/url-popover/style.scss | 30 +++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/url-popover/style.scss b/packages/editor/src/components/url-popover/style.scss index 73fec059b69f28..0ce6933525e318 100644 --- a/packages/editor/src/components/url-popover/style.scss +++ b/packages/editor/src/components/url-popover/style.scss @@ -9,10 +9,36 @@ flex-grow: 1; } + // Mimic toolbar component styles for the icons in this popover + .components-icon-button { + padding: 3px; + + > svg { + padding: 5px; + border-radius: $radius-round-rectangle; + height: 30px; + width: 30px; + } + + &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { + box-shadow: none; + + > svg { + @include formatting-button-style__hover; + } + } + + &:not(:disabled):focus { + box-shadow: none; + + > svg { + @include formatting-button-style__focus; + } + } + } + &__settings-toggle { flex-shrink: 0; - width: $icon-button-size; - height: $icon-button-size; &[aria-expanded="true"] .dashicon { transform: rotate(180deg); From 6cdf20b33bd094f1b6b4dfa4e6513ce9fe7e610b Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 19 Feb 2019 16:10:30 -0500 Subject: [PATCH 3/6] Add a left divider before the URL settings toggle --- packages/editor/src/components/url-popover/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/editor/src/components/url-popover/style.scss b/packages/editor/src/components/url-popover/style.scss index 0ce6933525e318..80a0131c61310c 100644 --- a/packages/editor/src/components/url-popover/style.scss +++ b/packages/editor/src/components/url-popover/style.scss @@ -40,6 +40,11 @@ &__settings-toggle { flex-shrink: 0; + // Add a left divider to the toggle button + border-radius: 0; + border-left: $border-width solid $light-gray-500; + margin-left: 1px; + &[aria-expanded="true"] .dashicon { transform: rotate(180deg); } From 3fb56cdd6adf405ce901c0db1e92b6faf0799453 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 20 Feb 2019 08:27:45 -0500 Subject: [PATCH 4/6] Even up the spacing in the settings panel. --- packages/editor/src/components/url-popover/style.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/url-popover/style.scss b/packages/editor/src/components/url-popover/style.scss index 80a0131c61310c..65722c4fedf964 100644 --- a/packages/editor/src/components/url-popover/style.scss +++ b/packages/editor/src/components/url-popover/style.scss @@ -51,8 +51,11 @@ } &__settings { - padding: 7px 8px; + padding: $panel-padding; border-top: $border-width solid $light-gray-500; - padding-top: 7px + $border-width; + + .components-base-control:last-child .components-base-control__field { + margin-bottom: 0; + } } } From b12a17f9c0121cf44cc2da4000681de444715454 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Thu, 21 Feb 2019 09:23:20 -0500 Subject: [PATCH 5/6] Add periods to code comments. --- packages/editor/src/components/url-popover/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/url-popover/style.scss b/packages/editor/src/components/url-popover/style.scss index 65722c4fedf964..af277e9fc4c4af 100644 --- a/packages/editor/src/components/url-popover/style.scss +++ b/packages/editor/src/components/url-popover/style.scss @@ -9,7 +9,7 @@ flex-grow: 1; } - // Mimic toolbar component styles for the icons in this popover + // Mimic toolbar component styles for the icons in this popover. .components-icon-button { padding: 3px; @@ -40,7 +40,7 @@ &__settings-toggle { flex-shrink: 0; - // Add a left divider to the toggle button + // Add a left divider to the toggle button. border-radius: 0; border-left: $border-width solid $light-gray-500; margin-left: 1px; From 02acf7efd4ff360e838aceac4e4342a86696a1b2 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Thu, 21 Feb 2019 09:32:28 -0500 Subject: [PATCH 6/6] Update snapshot --- .../components/url-popover/test/__snapshots__/index.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/url-popover/test/__snapshots__/index.js.snap b/packages/editor/src/components/url-popover/test/__snapshots__/index.js.snap index 4bffa2ecb37473..f8f0aa9027bdc7 100644 --- a/packages/editor/src/components/url-popover/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/url-popover/test/__snapshots__/index.js.snap @@ -16,7 +16,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = ` @@ -40,7 +40,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]