ColorPalette: Prevent overflow of custom color button background (#66152

) * ColorPalette: Prevent overflow of custom color button background * Update changelog * Use variable instead of hardcoded value * Update packages/components/src/color-palette/style.scss Co-authored-by: Marco Ciampini <[email protected]> * Fix changelog entry --------- Co-authored-by: t-hamano <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: ciampo <[email protected]>
WordPress · Oct 17, 2024 · aef74c6 · aef74c6
1 parent 8497616
commit aef74c6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   `ColorPalette`: prevent overflow of custom color button background ([#66152](https://github.com/WordPress/gutenberg/pull/66152)).
+
 ## 28.10.0 (2024-10-16)
 
 ### Bug Fixes

diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
@@ -26,10 +26,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 	&::after {
 		content: "";
 		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
+		inset: $border-width;
 		z-index: -1;
 		// The background image creates a checkerboard pattern. Ignore rtlcss to
 		// make it work both in LTR and RTL.
@@ -41,6 +38,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 		background-position: 0 0, 24px 24px;
 		/*rtl:end:ignore*/
 		background-size: calc(2 * 24px) calc(2 * 24px);
+		border-radius: $radius-medium - $border-width $radius-medium - $border-width 0 0;
 	}
 }