feat(popover): migrate s2 popover

[marissahuysentruyt]

Description

Welcome to the new and improved S2 popover! 🥳

This PR updates tokens used in the popover component. The work includes new S2 tokens specifically for colors, padding and the border radius for popover. There is also a transparent border in light mode and a visible border in dark mode.

There are several components that have popover as a subcomponent. Those were updated with just enough additional code to make them "work." Coachmark and picker did have some additional CSS needs, particularly relating to the new popover corner rounding, and the new bottom-start positioning.

Popover Mods

Some mods have been renamed to match their new token names, or better reflect their purposes:

Old mod name	New mod name
--mod-popover-content-area-spacing-vertical	--mod-popover-content-area-spacing
--mod-popover-shadow-blur	--mod-popover-drop-shadow-blur
--mod-popover-shadow-color	--mod-popover-drop-shadow-color
--mod-popover-shadow-horizontal	--mod-popover-drop-shadow-x
--mod-popover-shadow-vertical	--mod-popover-drop-shadow-y

Notes

• the background color and the border radius of the menu items is a known bug. It will be addressed in a separate branch.
• there's a few coach mark questions that are still outstanding as well, including the needed drop shadow on the action menu popover (css-1066), and the padding (as noted in a few comments).
• the picker 's popover styling is a known issue. I attempted to implement something like:

    /* popover passthroughs */
    --mod-popover-animation-distance: var(--spectrum-picker-spacing-picker-to-popover);

but the cascade doesn't quite work because of the markup differences. CSS-1065 captures some of the thoughts and issues, and Josh brought up some good questions/context in his comment below in regards to nesting elements and SWC.

Designs

S2 Popover Token specs
S2 / Desktop Popover

Jira

CSS-615

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

• Pull down the branch or use the deploy preview
• Visit the popover storybook. Verify all stories from main appear on the docs page. No changes should have been made to popover positions or tip placements.
• The default popover matches the s2 popover specs.
• Verify the action button trigger and popover menu items are accessible via keyboard.
• Create various combinations of the popover to verify combos are considered in the CSS:
  • mobile vs desktop
  • light vs dark mode (the border color/transparency should change in dark mode)
  • popover positioning and tip placement
• Verify new tokens are used:
  • popover-border-color (see the comment in index.css)
  • popover-border-opacity
  • drop-shadow-elevated-color
  • drop-shadow-elevated-x
  • drop-shadow-elevated-y
  • drop-shadow-elevated-blur
• Verify updated tokens are used:
  • corner-radius-large-default
  • popover-edge-to-content-area (popover-top-to-content-area was removed from tokens)
  • border-width-100
  • background-layer-2-color (it may not be pointing to gray-25 as intended, but should once we make the full change to S2 tokens)
• Chromatic coverage continues to maintain test templates, and does not have additional variations/test scenarios.
• Action bar, action menu, coach mark, combobox, contextual help, date picker, menu (specifically the "submenu in popover" story), and picker (which all call for a popover component) look acceptable. There may be additional style issues to handle during those components' migrations, as opposed to this PR.

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.

6. 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.
• 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. ✨

[changeset-bot]

🦋 Changeset detected

Latest commit: 1fac2ba

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

This PR includes changesets to release 3 packages

Name	Type
@spectrum-css/picker	Patch
@spectrum-css/popover	Major
@spectrum-css/coachmark	Minor

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: 2.23 MB^*
Total change (Δ): 🔴 ⬆ 0.54 KB (0.02%)

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

Package	Size	Δ
coachmark	5.48 KB	🔴 ⬆ < 0.01 KB
picker	28.63 KB	🔴 ⬆ 0.03 KB
popover	16.37 KB	🔴 ⬆ 0.29 KB

Details

coachmark

Filename	Head	Compared to base
index.css	5.48 KB	🔴 ⬆ < 0.01 KB (0.02%)
metadata.json	3.20 KB	🔴 ⬆ < 0.01 KB (0.03%)

picker

Filename	Head	Compared to base
index.css	28.63 KB	🔴 ⬆ 0.03 KB (0.10%)
metadata.json	14.22 KB	🔴 ⬆ 0.02 KB (0.17%)

popover

Filename	Head	Compared to base
index.css	16.37 KB	🔴 ⬆ 0.29 KB (1.76%)
metadata.json	8.10 KB	🔴 ⬆ 0.19 KB (2.33%)

* 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-3365--spectrum-css.netlify.app

[rise-erpelding]

I think this is good to go! Thanks for all your hard work on this, and for all the follow-up cards that you've made to explore some of the other complexities that came about with this migration - those cover a whole lot of the things that I noticed reviewing this.

I made a tiny callout about maybe linking Down state docs if you want, but I have a couple of other non-blocking questions/maybe concerns:

• I'm honestly a little puzzled as to why the left/right-positioned popovers with tip are so far away from the source compared to the top/bottom-positioned popovers with tip. This isn't anything you introduced, because I saw it on main too! To me, this seems like it could be a bug - the spacing is set based on popover-pointer-width if it's side-positioned, and based on popover-pointer-height if it's vertically positioned from its source, but popover-pointer-width and popover-pointer-height don't ever change, if I'm not mistaken - it's just that for side-positioned popovers inline-size is set to the height and otherwise it's set to the width.
  
• It also totally feels weird that we get popovers that look like this in rtl where the tip is way away from the source, but that would be a reason to use the logical position, I guess, so we probably don't need to take any further action there.
  
• Lastly, I know you have a card for the drop-shadows as pertaining to coachmark already, but I can't help but notice how much bigger the shadows look compared to Figma. I know I've done my fair share of digging and I think the mechanisms used to render the shadows in Figma are completely different than what is used in CSS for filter: drop-shadow() but that would be something that I'd love for us to standardize further at some point in the future.

That's all I've got! Nice work, once again!

[rise-erpelding]

This change looks good! I'm wondering if popover-animation-distance is the token we want but some of the context may have left my brain since yesterday--the top/bottom positions are still using popover-pointer-height while the side positions use popover-animation-distance, right? It all computes to the same value in the end, but I'm wondering if the tokens ever change their values if that leaves room for inconsistency down the road?

[marissahuysentruyt]

Good points! So, I've used the popover-pointer-height token in place of the popover-animatino-distance`, which makes much more sense I think.

To address your other comments from yesterday:

• There are little documentation blurbs on the docs page for the positions that don't adapt to RTL. "* Text direction does not affect the position" and "* Changes side with text direction (like a logical property)". Is that offer enough clarity on the expected behaviors for users when they use particular positions?
• I agree on the drop shadow. I thought maybe that our popover shadows were just looking "bigger" than the shadows in Figma because our background color is white, while Figma's background colors are light gray but...it's not light gray in all the files so that argument is nothing 😆 We have that card to document that we know it looks maybe a little funny, so I don't think I'm going to address anything further in this PR. Does that sound ok?

[jawinn]

Nice work working through this one. Approved!
I didn't see any issues. Just two tiny docs wording nitpicks here.