Issues with CdsControlAction in v6

[astorije]

Describe the bug

We use the CdsControlAction action="label" component to display an ℹ️ icon next to the label, with a tooltip to add information. For example:

This worked fine and well in v5, but starting with v6, we are experiencing 2 issues:

1. The icon does not get vertically centered anymore: vs.

2. The tooltip simply does not appear anymore.

How to reproduce

https://codesandbox.io/s/input-tooltip-issue-v6-qohlfv?file=/src/App.tsx

Steps to reproduce the behavior: Simply hover over the ℹ️ icon, the tooltip does not appear. It does work fine outside an input.

Expected behavior

For reference: https://codesandbox.io/s/input-tooltip-issue-v5-nrjekz?file=/src/App.tsx

Versions

Clarity project:

• [x] Clarity Core
• [ ] Clarity Angular/UI

Clarity version:

• [ ] v5.x
• [x] v6.x

Framework:

• [ ] Angular
• [x] React
• [ ] Vue
• [ ] Other:

Framework version:

React 17

[ashleyryan]

In v6, the ControlAction was refactored to be derived from the new ButtonAction element. Part of that work introduced an absolute positioned touch target on top of the action button that seems to be interfering with the tooltip: https://github.com/vmware-clarity/core/blob/main/projects/core/src/button-action/button-action.element.scss#L89

For #2, you can workaround it by moving the ControlAction inside of the TooltipElement: https://codesandbox.io/s/input-tooltip-issue-v6-forked-o97x07?file=/src/App.tsx I'll have to keep investigating a better solution otherwise

For #1, in v5, wrapping the icon in a span actually makes the icon smaller. I think it's a complete coincidence that the icon looks center aligned vertically, it's basically bottom aligned: https://codesandbox.io/s/input-tooltip-issue-v5-forked-gm65zs?file=/src/App.tsx I'm investigating the default behavior in v6 though.

[astorije]

Thanks @ashleyryan!

Unfortunately the workaround has a couple minor limitations:

• The icon can still be clicked. That behavior still existed in v5 with the addition that the icon now moves when clicked:

https://user-images.githubusercontent.com/113730/173453464-ac4bd0e6-1117-48fb-b321-de1231b02e47.mov

• When the control is disabled, the tooltip still works:

https://user-images.githubusercontent.com/113730/173454048-82ffb87d-9b25-4ccd-bd07-c35419e8e34d.mov

It is however still better than not working at all, so we'll use this for the time being. Thanks!

---

EDIT: I just noticed that we have the issue when disabled on v5 as well, because we are adding the tooltip ourselves. How would you feel about supporting tooltips in labels like this directly? I know it's dependent on Clarity Core having a tooltip itself, but it would be great if control actions were not limited to click events, we tend to use this a lot at CloudHealth.