Tweak margin and padding of toolbar icon buttons

[enriquesanchez]

Fixes 1/3 of #12260

Description

This PR tweaks the margin and padding of the toolbar icon buttons in order to give their corresponding tooltips more breathing room when hovering.

How has this been tested?

Tested on Firefox, Safari and Chrome (Mac), on large and narrow viewports.

Screenshots

Before:

After:

Types of changes

CSS and visual.

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.

[JJJ]

Hovering over Button:

Hovering over Tooltip:

---

If the tooltip is purposely remaining hoverable, and if clicking the tooltip is purposely invoking a click on the thing it is a tooltip for, then this PR provides a nice visual improvement, but does not address the interaction bugs. This looks much better though!

[mapk]

I agree this looks better, however it doesn't yet solve #12260. @enriquesanchez can we also explore keeping the hover state when hovering a tooltip in this PR?

[enriquesanchez]

I'm having trouble figuring out how to get the button to stay hovered while also hovering the tooltip.

@ItsJonQ do you think you could help me? We want to have the button maintain its hover state while the tooltip is being hovered.

[ItsJonQ]

@enriquesanchez Haii!! Without hacking the JS directly... For CSS work, the best work-around I found for these interactions is...

• Inspect Element via Chrome
• Click on Sources
• Hover UI to trigger Tooltip
• Press F8 on your keyboard

This freezes the document, keeping the tooltip open.
You can then inspect element to adjust CSS as needed

Hope this helps 🙏

[mapk]

@ItsJonQ f8 didn't work for me. I have to use setTimeout(() => { debugger; }, 5000) and then hover over the element.

I think the problem with this is because the tooltip HTML doesn't appear inside the icon's HTML. So as soon as you hover away from the icon, it no longer shows as hovered. It's not behaving like a dropdown menu might. Is there a way to move the HTML inside the icon so it acts like a dropdown?

[enriquesanchez]

@ItsJonQ @mapk Yep, sorry I wasn't clear enough. Mark's comment is what I meant. Because the button and the tooltip don't have a parent-child relationship, hovering the tooltip removes hover from the button. Ideally, we can keep both hovered instead.

[ItsJonQ]

Is there a way to move the HTML inside the icon so it acts like a dropdown?

@mapk We actually don't want that to happen. As far as App UI goes, it's preferable for the dropdown/popover box to be rendered at the root level. The reason is to better consistency + control over styles. Otherwise, nested CSS or things like position or overflow:hidden would break the dropdown/popover.

Ideally, we can keep both hovered instead.

@enriquesanchez To do this, we'll need to update the JS code for the Tooltip/Popover system to allow for this :)

[ZebulanStanphill]

Now that the G2 UI changes have landed in master, is this PR still relevant?

[mapk]

This PR doesn't look relevant anymore.

G2 tooltips