From aef74c69cfe57afb5078886b01513d81739e22a7 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Thu, 17 Oct 2024 18:35:49 +0900 Subject: [PATCH] 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 * Fix changelog entry --------- Co-authored-by: t-hamano Co-authored-by: tyxla Co-authored-by: ciampo --- packages/components/CHANGELOG.md | 4 ++++ packages/components/src/color-palette/style.scss | 6 ++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index d1e75d9e0a3a8..f19e7f7eae7ba 100644 --- 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 index 9d922a8130692..278aacb22914b 100644 --- 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; } }