[Link] Incorrect underline animation in RTL

[macandcheese]

Check existing issues

• [x] 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: https://github.com/Esri/calcite-design-system/issues/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

• [X] @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.

https://github.com/Esri/calcite-design-system/assets/29716057/71c8f58b-15d8-4174-88e4-c6a6044413aa

[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:

https://github.com/Esri/calcite-design-system/assets/29716057/2a75ab64-806f-446d-bdcf-7e571a886faa