chore(popover): adjust/enhance popover spacing by default [CSS-845]#4174
Merged
castastrophe merged 1 commit intospectrum-twofrom Aug 29, 2025
Merged
Conversation
🦋 Changeset detectedLatest commit: e602f75 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
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 |
castastrophe
force-pushed
the
castastrophe/chore-popoover-story-placement
branch
from
581de70 to
0b6bf81
Compare
Contributor
File metricsSummaryTotal size: 1.43 MB*
popover
* An ASCII character in UTF-8 is 8 bits or 1 byte. |
Contributor
📚 Branch previewPR #4174 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-4174/index.html. |
castastrophe
added
bug
castastrophe
changed the title
castastrophe
force-pushed
the
castastrophe/chore-popoover-story-placement
branch
from
0b6bf81 to
552bd90
Compare
castastrophe
force-pushed
the
castastrophe/chore-popoover-story-placement
branch
4 times, most recently
from
f3eced7 to
a4700c5
Compare
Contributor
|
@castastrophe It feels nice to not have those customStyle properties added anymore now that everything is consistent. Thank you! |
aramos-adobe
approved these changes
Aug 28, 2025
castastrophe
commented
Aug 29, 2025
| ], | ||
| }, context), | ||
| ], | ||
| popoverHeight: 42, |
Contributor
Author
There was a problem hiding this comment.
No longer needed! This is calculated now on the fly (and more accurately) by the popover wrapper.
| }, | ||
| iconSet: { table: { disable: true } }, | ||
| popoverPlacement: { | ||
| name: "Popover Placement", |
Contributor
Author
There was a problem hiding this comment.
Updated this to use the existing Popover storybook knob so that if the data changes from the source, this inherits the update.
castastrophe
force-pushed
the
castastrophe/chore-popoover-story-placement
branch
3 times, most recently
from
7a52c29 to
b7abb4a
Compare
castastrophe
force-pushed
the
castastrophe/chore-popoover-story-placement
branch
from
b7abb4a to
e602f75
Compare
Merged
This was referenced Aug 29, 2025
12 tasks
14 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR simplifies the Popover component's Storybook implementation by removing complex positioning JavaScript and hardcoded dimensions that were causing VRT issues and didn't represent the actual shipped component behavior.
Motivation and context
The current Popover stories attempt to emulate actual positioning behavior with JavaScript, which has caused ongoing VRT headaches. Since we're not shipping this Storybook implementation, simplifying it will provide a more reliable and maintainable experience.
In this update, I separated the Popover code from the Popover wrapper because the wrapper is a utility for alignment in VRTs and documentation but not representative of how the component is shipped in SWC.
The wrapper component for popover now performs an init height/width check for popover and trigger as well as a resize observer to ensure accuracy. Those values are added to the wrapper as custom properties so that positioning can use them for absolute alignment.
Related issue(s)
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Popover stories display correctly without positioning JavaScript
ContextualHelp stories maintain proper popover positioning
Coachmark stories display without hardcoded dimensions
Combobox stories maintain proper spacing