fix(tooltip): custom animation distance overrides overlay value

[mdt2]

Description

Per issue #2156, Tooltips (all variants except the hover variant) were inheriting the wrong animation distance (6px instead of the 4px that is noted in the spec). This work adjusts the animation distance for the component.

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

• Use dev tools to inspect a tooltip. You should see the animation distance transform at the top level of the component being set with the --spectrum-tooltip-animation-distance token.
  • Confirmed in the docs site
  • Confirmed in storybook

Regression testing

Validate:

1. The documentation pages for at least two other components are still loading, including:

• The pages render correctly, are accessible, and are responsive.

2. If components have been modified, VRTs have been run on this branch:

• VRTs have been run and looked at.
• Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

• I have read the contribution guidelines.
• I have updated relevant storybook stories and templates.
• I have tested these changes in Windows High Contrast mode.
• If my change impacts other components, I have tested to make sure they don't break.
• If my change impacts documentation, I have updated the documentation accordingly.
• ✨ This pull request is ready to merge. ✨

[github-actions]

🚀 Deployed on https://pr-2266--spectrum-css.netlify.app

[Westbrook]

It would be useful to compare the actual output here for review, to ensure we're not seeing any values forced on us from the mixins leveraged here?

Is there benefit from using --spectrum-overlay-animation-distance or a similar value in the various directions rather than all of var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) each time?

[mdt2]

@Westbrook hello! Yes, below is the dist output on prod vs this PR. Before this PR, we were relying on some transform values in "../commons/overlay-coretokens.css", which is what caused the wonkiness you were seeing in the issue you posted. You can see this in the prod output that it's falling back to the 6px instead of the spacing-75 4px animation distance value that we set for Tooltip.

Instead of trying to force the animation-distance to be something different than in overlay-coretokens.css, I've refactored the Tooltip to define it's own transforms so that we're no longer inheriting those. This eliminates the connection to --spectrum-overlay-animation-distance and hopefully also eliminates the confusion caused by the inheritance.

Let me know what other questions you have.

[Westbrook]

Overwriting this value in the .is-open state means that JS application will not have access to this value while the Tooltip is closed. I can't remember right off why someone was asking about that recently, but would it be that different to move this onto the default rule?

[mdt2]

I either didn't send this earlier or it disappeared, so for posterity:

Good catch! We don't need this overwrite since we've refactored the transforms so I removed it.

[Westbrook]

LGTM!