[Link] Incorrect underline animation in RTL

[macandcheese]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

The underline animation does not correctly animate in the expected direction when in RTL.

Expected Behavior

I'd expect the animation to correctly display as it does in LTR, but flipped.

cc @SkyeSeitz @ashetland - I know we've talked about changing this animation altogether and favoring something less... busy - maybe an additional px height on hover, just color change, etc., so could be a good opportunity to look at that.

Related: #6569

Reproduction Sample

https://codepen.io/mac_and_cheese/pen/qBQXYKB?editors=1000

Reproduction Steps

1. Go to Codepen
2. See difference in animation

Reproduction Version

Latest

Relevant Info

No response

Regression?

No response

Priority impact

p2 - want for current milestone

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react

Esri team

ArcGIS Map Viewer

[geospatialem]

cc @ashetland @SkyeSeitz WDYT/ any thoughts on changes to the link animation?

[SkyeSeitz]

I could definitely see a few options where the animation is removed. I think I lean towards just an instant color change from 40% opacity to 100%, as seen in the prototype below.

Screen.Recording.2023-08-07.at.11.53.34.AM.mov

[ashetland]

I like that instant change. Mocked up a bump from 1px to 2px for the indicator @macandcheese mentioned just for comparison. I think I go for the simple version or just instant timing.

[SkyeSeitz]

Clarifying question for @macandcheese 😅 - Additional px to the underline or the height of the link? Prototype below to demonstrate:

Screen.Recording.2023-08-07.at.12.14.12.PM.mov

[jcfranco]

@macandcheese Could you help clarify the comment above?

[macandcheese]

Sorry, which comment 😅

I think the immediate issue can be fixed with no design change, and then we can separately discuss an update there cc @SkyeSeitz @ashetland (I wouldn't think that a border change bumps the height up like in that example)

[jcfranco]

@macandcheese I was referring to #7284 (comment), apologies for not specifying earlier.

One more question, are we keeping the animation as is, but inverting it or are we also simplifying it to just color change?

[macandcheese]

The scope of the issue initially was intended to just fix the RTL implementation by inverting it. It works fine in LTR. I think this other discussion is good and we should update the visual, but can be moved to a separate design issue?

[ashetland]

Agree, we can move that to a separate design issue. Is the animation working correctly in LTR? I'm not seeing it here https://developers.arcgis.com/calcite-design-system/components/link/

[jcfranco]

Looks like the animation has been broken since v2.7.0 (possibly by #8797).

[macandcheese]

Heh - well in this case it's a "fix" as it behaves the same in both. I don't think the animation really adds anything. Maybe we can remove the code that isn't working and use another issue to track improvements. I'd think anything that lets us get rid of the "transparent underline" css, etc. could be nice.

[ashetland]

Agreed

[github-actions]

Installed and assigned for verification.

[DitwanP]

Verified locally on dev

Fixed animations:

Screen.Recording.2024-11-22.at.11.26.44.AM.mov