Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues with CdsControlAction in v6 #87

Open
3 of 8 tasks
astorije opened this issue Jun 7, 2022 · 2 comments
Open
3 of 8 tasks

Issues with CdsControlAction in v6 #87

astorije opened this issue Jun 7, 2022 · 2 comments
Assignees

Comments

@astorije
Copy link
Contributor

astorije commented Jun 7, 2022

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:

Screen Shot 2022-06-07 at 6 22 07 PM

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:
    Screen Shot 2022-06-07 at 6 23 47 PM vs. Screen Shot 2022-06-07 at 6 23 58 PM

  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:

  • Clarity Core
  • Clarity Angular/UI

Clarity version:

  • v5.x
  • v6.x

Framework:

  • Angular
  • React
  • Vue
  • Other:

Framework version:

React 17

@ashleyryan
Copy link
Contributor

ashleyryan commented Jun 8, 2022

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.

@ashleyryan ashleyryan self-assigned this Jun 8, 2022
@astorije
Copy link
Contributor Author

astorije commented Jun 13, 2022

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:
Screen.Recording.2022-06-13.at.6.08.19.PM.mov
  • When the control is disabled, the tooltip still works:
Screen.Recording.2022-06-13.at.6.11.04.PM.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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants