From 11b157910627607ffab3ab16e10aa1fa6b9d4844 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 21 Mar 2023 23:02:59 +0100 Subject: [PATCH 1/3] CircularOptionPicker: for swatches to render on top of the rest of the component's content --- .../components/src/circular-option-picker/style.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss index e63cbd5b3ff92a..876d7364182144 100644 --- a/packages/components/src/circular-option-picker/style.scss +++ b/packages/components/src/circular-option-picker/style.scss @@ -16,6 +16,16 @@ $color-palette-circle-spacing: 12px; display: flex; flex-wrap: wrap; gap: $color-palette-circle-spacing; + position: relative; + z-index: 1; + } + + // Make sure that the .components-circular-option-picker__swatches element + // renders visually on top of its siblings. This is necessary to make sure + // that the tooltip rendered when hovering an `Option` always appears on top. + > *:not(.components-circular-option-picker__swatches) { + position: relative; + z-index: 0; } } From 2bdff319a92dcf3ccebd9a3894edb090b6aa4be9 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 21 Mar 2023 23:25:37 +0100 Subject: [PATCH 2/3] CHANGELOG --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a0d2f7c0fbafe9..49147f3422c262 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -14,6 +14,7 @@ ### Bug Fix +- `CircularOptionPicker`: force swatches to visually render on top of the rest of the component's content ([#49245](https://github.com/WordPress/gutenberg/pull/49245)). - `InputControl`: Fix misaligned textarea input control ([#49116](https://github.com/WordPress/gutenberg/pull/49116)). ### Internal From 8c85c859d3020f91b74042d51d48aacbff5b2617 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 22 Mar 2023 13:13:35 +0100 Subject: [PATCH 3/3] Use z-index utility --- packages/base-styles/_z-index.scss | 5 +++++ packages/components/src/circular-option-picker/style.scss | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 97427da1fd525e..d61403d7027073 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -170,6 +170,11 @@ $z-layers: ( // Needs to be higher than .components-circular-option-picker__option.is-pressed. ".components-circular-option-picker__option.is-pressed + svg": 2, + // The following two indexes are needed so that the swatches (and their tooltips) + // always render on top of the rest of the component's UI. + ".components-circular-option-picker__swatches": 1, + "> *:not(.components-circular-option-picker__swatches)": 0, + // Appear under the customizer heading UI, but over anything else. ".customize-widgets__topbar": 8, diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss index 876d7364182144..56c48f63372a19 100644 --- a/packages/components/src/circular-option-picker/style.scss +++ b/packages/components/src/circular-option-picker/style.scss @@ -17,7 +17,7 @@ $color-palette-circle-spacing: 12px; flex-wrap: wrap; gap: $color-palette-circle-spacing; position: relative; - z-index: 1; + z-index: z-index(".components-circular-option-picker__swatches"); } // Make sure that the .components-circular-option-picker__swatches element @@ -25,7 +25,7 @@ $color-palette-circle-spacing: 12px; // that the tooltip rendered when hovering an `Option` always appears on top. > *:not(.components-circular-option-picker__swatches) { position: relative; - z-index: 0; + z-index: z-index("> *:not(.components-circular-option-picker__swatches)"); } }