fix(popover): correct left/right tips for RTL, increase VRT coverage

[mdt2]

Description

Fixes an issue in Popover where Left and Right tips were mirrored incorrectly for RTL. This is simliar to some work done on Tooltip. Note that the Left and Right placement for the tips are always on the LTR left and right, even if RTL is turned on. Start and End, however, are adjusted based on the text direction.

Also included Storybook enhancements including:

• Show all placement options (previously Start and End placements weren't included in the Storybook controls)
• Increase Chromatic VRT coverage for the tip variant

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

• VRTs passing @mdt2
• Check Popover With Tip's new testing preview in Storybook. All the tips should look correctly positioned in LTR @jawinn
• Now check RTL, tips should be correctly positioned
• All placement options are shown in the Storybook controls

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

Before

After

To-do list

• I have read the contribution guidelines.
• I have updated relevant storybook stories and templates.
• If my change impacts documentation, I have updated the documentation accordingly.
• ✨ This pull request is ready to merge. ✨

[changeset-bot]

🦋 Changeset detected

Latest commit: fe34cdf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/popover	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

File metrics

Summary

Total size: 4.65 MB^*
Total change (Δ): ⬇ 0.03 KB (-0.00%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Δ
popover	15.92 KB	⬇ 0.01 KB

Details

popover

File	Head	Base	Δ
index-base.css	15.77 KB	15.78 KB	⬇ 0.01 KB (-0.06%)
index-theme.css	0.75 KB	0.75 KB	-
index-vars.css	15.92 KB	15.93 KB	⬇ 0.01 KB (-0.06%)
index.css	15.92 KB	15.93 KB	⬇ 0.01 KB (-0.06%)
metadata.json	10.32 KB	10.32 KB	-
themes/express.css	0.66 KB	0.66 KB	-
themes/spectrum.css	0.68 KB	0.68 KB	-

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[github-actions]

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

[jawinn]

Nice work fixing this and adding the Storybook improvements. The Chromatic-only view with descriptions makes it much easier to understand which ones should be flipping.

I only have one minor grammar suggestion.

[castastrophe]

This is looking good, just a question about the goals of the sourceless template. I'm wondering if we have to update the class list or add new features, is it going to be hard to remember to update that in both templates? Is there a way to have 1 be a "source of truth" without needing the duplication?

[castastrophe]

Can you add some more context in a comment here about why this additional template is needed?

[mdt2]

Great callout on this! Turns out all I had to do was pass a null trigger where I didn't want a source button to show up (for Chromatic), so I've removed this code 👍