From 2a635088c8cb868ec883f17429ae843a94108535 Mon Sep 17 00:00:00 2001 From: megane9988 Date: Sat, 20 May 2023 02:28:17 +0900 Subject: [PATCH 1/3] Add outline when color picker select box is focused --- packages/components/CHANGELOG.md | 2 +- packages/components/src/color-picker/styles.ts | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 388aef8d5a3df5..c3372ed8304623 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -13,7 +13,7 @@ - Added experimental v2 of `DropdownMenu` ([#49473](https://github.com/WordPress/gutenberg/pull/49473)). ### Bug Fix - +- `ColorPicker`: Add an outline when the color picker select box is focused([#50609]https://github.com/WordPress/gutenberg/pull/50609) - `InputControl`: Fix focus style to support Windows High Contrast mode ([#50772](https://github.com/WordPress/gutenberg/pull/50772)). ## 24.0.0 (2023-05-10) diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts index bf25707ba9c936..f78db13a8fd73f 100644 --- a/packages/components/src/color-picker/styles.ts +++ b/packages/components/src/color-picker/styles.ts @@ -29,8 +29,13 @@ export const NumberControlWrapper = styled( NumberControl )` export const SelectControl = styled( InnerSelectControl )` margin-left: ${ space( -2 ) }; width: 5em; - ${ BackdropUI } { - display: none; + /* + * Remove border, but preserve focus styles + * TODO: this override should be removed, + * see https://github.com/WordPress/gutenberg/pull/50609 + */ + select:not( :focus ) ~ ${ BackdropUI }${ BackdropUI }${ BackdropUI } { + border-color: transparent; } `; From 94a479bfc600317a20dea2161274ea916bc87c74 Mon Sep 17 00:00:00 2001 From: megane9988 Date: Sat, 20 May 2023 02:32:52 +0900 Subject: [PATCH 2/3] fix CHANGELOG --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c3372ed8304623..73ea9002c8ce2f 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -13,7 +13,7 @@ - Added experimental v2 of `DropdownMenu` ([#49473](https://github.com/WordPress/gutenberg/pull/49473)). ### Bug Fix -- `ColorPicker`: Add an outline when the color picker select box is focused([#50609]https://github.com/WordPress/gutenberg/pull/50609) +- `ColorPicker`: Add an outline when the color picker select box is focused([#50609](https://github.com/WordPress/gutenberg/pull/50609)). - `InputControl`: Fix focus style to support Windows High Contrast mode ([#50772](https://github.com/WordPress/gutenberg/pull/50772)). ## 24.0.0 (2023-05-10) From 3a2c76101d5de36874162c19005aafbc06010d00 Mon Sep 17 00:00:00 2001 From: megane9988 Date: Tue, 23 May 2023 00:01:35 +0900 Subject: [PATCH 3/3] Update packages/components/CHANGELOG.md add empty line Co-authored-by: Marco Ciampini --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 73ea9002c8ce2f..04586a6ee398bd 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -13,6 +13,7 @@ - Added experimental v2 of `DropdownMenu` ([#49473](https://github.com/WordPress/gutenberg/pull/49473)). ### Bug Fix + - `ColorPicker`: Add an outline when the color picker select box is focused([#50609](https://github.com/WordPress/gutenberg/pull/50609)). - `InputControl`: Fix focus style to support Windows High Contrast mode ([#50772](https://github.com/WordPress/gutenberg/pull/50772)).