feat(popover): migrate s2 popover

[marissahuysentruyt]

Description

Welcome to the new and improved S2 popover! 🥳

This PR updates tokens used in the popover component. Additionally, it brings over all of the relevant stories, tests, and documentation from main (in the hopes of reducing the conflicts the merge may introduce). The copy/pastes from main are marked with [from main] in the commit messages.

- In .storybook/base.css: This update is from main and helps to stop cutting off the nested popover content.

Most of the work in popover.stories.js and template.js is just copied over from main.
- In template.js:

1. I removed popoverAlignment["inset-inline-start"] = "0"; from 2 position cases (and left a comment explaining that decision).
2. I replaced the renderContent() from main with the content.map() that works on spectrum-two.
3. When spectrum-two merges, most of the comments in template.js can be uncommented and refactored to use the approaches we use in main.

- In popover.stories.js`

1. When spectrum-two merges, most of the comments in popover.stories.js can be uncommented and refactored to use the approaches we use in main. There's a few TODO comments left to hopefully remind us about certain things during that merge.
2. We'll need to remove the decorator, remove "Component/" from the title, and turn on the metadata/packageJson.

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

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

Designs

S2 Popover Token specs
S2 / Desktop Popover

Jira

CSS-615

Pending Questions

1. How should we be handling the "container padding" as seen in Figma? I'm currently implementing it here: feat(popover): migrate s2 popover #3365 (comment)

2. Should popover handle the nested menu overlap margin? My guess is no...

3. Do I need to address search within at all? It's deprecated component that calls for popover. It's very broken looking, but maybe that's to be expected.

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

• Popover design review and approval
• Pull down the branch
• Visit the popover storybook. Verify all stories from main appear on the docs page. No immediate changes have been made to popover positions or tip placements.
• The default popover matches the [s2 popover specs].(https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=27417-7447)
• 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 (using popover.test.js file) continues to maintains test templates, and does not have additional variations/test scenarios.
• Action bar, action menu, coach mark, combobox, contextual help, date picker and picker (which all call for a popover component) look acceptable. There may be slight style issues to handle with those components' migrations, as opposed to this PR.

Before:

After:

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

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

[marissahuysentruyt]

Just making sure here: the changes in the coachmark CSS are actually a result of the breaking changes from popover. Would that still be considered a minor change in the coachmark CSS?

[marissahuysentruyt]

One other thing I noticed is a display issue with the corners overlapping when I hover over the coachmark action button's popover menu items. Is this missing the padding? Feel free to leave this for the coachmark migration if it's outside the scope of this PR:

@jawinn I was going to leave this for the coachmark. I have a card that captures this right now: https://jira.corp.adobe.com/browse/CSS-1067

[marissahuysentruyt]

Some follow-up Jira tickets have been created:
CSS-1065(in response to picker questions found in this branch)
CSS-1066(in response to the coachmark dropshadow/filter questions)
CSS-1067(in response to the coachmark menu padding questions)