diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 97427da1fd525..d61403d702707 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/CHANGELOG.md b/packages/components/CHANGELOG.md index a0d2f7c0fbafe..49147f3422c26 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 diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss index e63cbd5b3ff92..56c48f63372a1 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: z-index(".components-circular-option-picker__swatches"); + } + + // 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: z-index("> *:not(.components-circular-option-picker__swatches)"); } }