Color palette settings button hover tootlip fix.

[nicolad]

Description

Fixes #14685
Adding z-index fixes the issue.

How has this been tested?

Has been tested locally, more details in gif from below

Screenshots

Types of changes

Had added few styles to color palette settings button in active state.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[nicolad]

@afercia can you please confirm that this PR is fixing the issue: #14685 ?

[afercia]

@nicolad yes, it fixes it. Thanks! I don't have the powers to approve PRs though.

[gziolo]

Thanks! I don't have the powers to approve PRs though.

Everyone can approve :)

[gziolo]

It looks like a valid fix. There is one remaining code maintainability related question to be answered before merging.

[gziolo]

@jasmussen - should there be special handling for z-index used?

[jasmussen]

My impression is that's always good. But I'm honestly not confident, sometimes a z index of 1 is just to elevate a child in a context that isn't subject to the mess it can otherwise create. I know @aduth has thoughts.

[gziolo]

I'll leave it to him then :)

[aduth]

My impression has been to always use _z-index function for any z-index, with the mapping serving as a centralized authority to serve in proactively avoiding aggressively and endlessly increasing a z-index value to "combat" others.

https://github.com/WordPress/gutenberg/blob/master/assets/stylesheets/_z-index.scss

But:

1. For a case like this, where the value is 1, perhaps it's reasonable to make exceptions
2. In any case, we don't codify this guideline one way or the other. Whatever we decide, it ought to be written down, e.g. coding-guidelines.md document

[afercia]

Note: if using z-index is not desirable, there's an alternative approach to fix this. Setting pointer-events: none on the selected button SVG should do the trick.

[gziolo]

Note: if using z-index is not desirable, there's an alternative approach to fix this. Setting pointer-events: none on the selected button SVG should do the trick.

I guess z-index is perfectly fine, I just wanted to double check whether we need to use z-index() helper.

[jasmussen]

Yep, z-index is fine. And if this PR is semi urgent or can make the cut by being merged now, feel free to and if Andrew objects to the lack of the z-index helper later on, I volunteer to fix that after the fact.

[gziolo]

@nicolad - thanks for the fix. Let's wait for feedback and take action only if necessary.

[nicolad]

@nicolad - thanks for the fix. Let's wait for feedback and take action only if necessary.

Sure, I can add a follow-up PR based on feedback, if it will be the case.