From e4e4845b4284b7541e2266ce7deaf1dd1189d685 Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Wed, 6 Sep 2023 08:31:05 +0100
Subject: [PATCH] Make `CircularOptionPicker` focus styles resilient to button
 size changes (#54196)

* Make `CircularOptionPicker` focus styles resilient

Currently the focus ring around `CircularOptionPicker` options is hard-coded to a specific size. This means that any variation in option size isn't accounted for.
This patch updates how the focus ring is styled to make it adapable for differing control sizes.

* Updating CHANGELOG.md

* Updating CHANGELOG.md

* Updating CHANGELOG.md
---
 packages/components/CHANGELOG.md               |  2 ++
 .../src/circular-option-picker/style.scss      | 18 +++++++++++-------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index cb8183184a8136..6ec68347af2595 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -15,6 +15,8 @@
 ### Bug Fix
 
 -   `PaletteEdit`: Fix padding in RTL languages ([#54034](https://github.com/WordPress/gutenberg/pull/54034)).
+-   `CircularOptionPicker`: make focus styles resilient to button size changes ([#54196](https://github.com/WordPress/gutenberg/pull/54196)).
+
 
 ### Internal
 
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index 56c48f63372a19..e0e4f3e81d4190 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -116,14 +116,19 @@ $color-palette-circle-spacing: 12px;
 	&:focus {
 		&::after {
 			content: "";
-			border: #{ $border-width * 2 } solid $gray-700;
-			width: 32px;
-			height: 32px;
-			position: absolute;
-			top: -2px;
-			left: -2px;
 			border-radius: $radius-round;
 			box-shadow: inset 0 0 0 2px $white;
+
+			// Make sure it's always centered
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+
+			// Make sure dimensions account for border width
+			border: #{ $border-width * 2 } solid $gray-700;
+			width: calc(100% + #{ ( $border-width * 2 ) * 2 });
+			height: calc(100% + #{ ( $border-width * 2 ) * 2 });
 		}
 	}
 
@@ -139,7 +144,6 @@ $color-palette-circle-spacing: 12px;
 	background: $white;
 }
 
-
 .components-circular-option-picker__dropdown-link-action {
 	margin-right: $grid-unit-20;