From fbf54ef092f9e8345903b5c3861d3b5380c9afea Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 5 Jan 2023 18:08:59 +0200 Subject: [PATCH 1/3] [Components - Placeholder]: Fix right margin for dashicons --- packages/components/src/placeholder/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index 9f5db03711dc7..8eeef3bf1eaa4 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -54,6 +54,10 @@ } } + .dashicon { + margin-right: 0.7em; + } + // Don't take up space if the label is empty. &:empty { display: none; From 2a413f7400c9cd7b41713dc5b1cace444b91aa60 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 5 Jan 2023 18:23:31 +0200 Subject: [PATCH 2/3] add changelog --- packages/components/CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index aaee63a66ba53..7e79ba7a95b5a 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,10 @@ - `Dashicon`: remove unnecessary type for `className` prop ([46849](https://github.com/WordPress/gutenberg/pull/46849)). +### Bug Fix + +- `Placeholder`: fix label icon right margin when using dashicons ([46918](https://github.com/WordPress/gutenberg/pull/46918)). + ## 23.1.0 (2023-01-02) ## 23.0.0 (2022-12-14) @@ -76,6 +80,7 @@ - `TabPanel`: Add ability to set icon only tab buttons ([#45005](https://github.com/WordPress/gutenberg/pull/45005)). ### Internal + - `AnglePickerControl`: remove `:focus-visible' outline on `CircleOutlineWrapper` ([#45758](https://github.com/WordPress/gutenberg/pull/45758)) ### Bug Fix From 612310a8f6bbe7baa1e382391f41bf74e377488e Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 5 Jan 2023 19:36:40 +0200 Subject: [PATCH 3/3] use same `px` value for all cases --- packages/components/CHANGELOG.md | 2 +- packages/components/src/placeholder/style.scss | 6 +----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 7e79ba7a95b5a..3b0679e60cdb2 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -8,7 +8,7 @@ ### Bug Fix -- `Placeholder`: fix label icon right margin when using dashicons ([46918](https://github.com/WordPress/gutenberg/pull/46918)). +- `Placeholder`: set fixed right margin for label's icon ([46918](https://github.com/WordPress/gutenberg/pull/46918)). ## 23.1.0 (2023-01-02) diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index 8eeef3bf1eaa4..7fd9977e4645d 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -45,7 +45,7 @@ > svg, .dashicon, .block-editor-block-icon { - margin-right: 1ch; + margin-right: $grid-unit-15; fill: currentColor; // Optimizate for high contrast modes. // See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/. @@ -54,10 +54,6 @@ } } - .dashicon { - margin-right: 0.7em; - } - // Don't take up space if the label is empty. &:empty { display: none;