chore(popover): add vrt support - #6623
Conversation
|
rise-erpelding
added
Status:WIP
📚 Branch Preview Links🔍 Gen1 Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
d2fc8a1 to
144bff2
Compare
0d97557 to
b4a3f52
Compare
rise-erpelding
added
Status:Ready for review
| 'Content overflow' | ||
| ); | ||
|
|
||
| const cjkLanguageRow = (prefix: string) => |
There was a problem hiding this comment.
Dropped because we don't appear to need it, we're not styling anything for CJK in popover.
| // larger because open surfaces (especially size `l` and side placements) paint | ||
| // in the top layer and do not expand their ancestor's in-flow width. | ||
| export const SURFACE_SHADOW_BLEED = 24; | ||
| export const INLINE_SHADOW_BLEED = 48; |
There was a problem hiding this comment.
Made a number of adjustments here to get Chromatic to capture without cutting off popovers' drop shadows, open to other ideas if anyone has any!
|
I know it's a bit of a nit 😛, but on the RTL story, could we also test the top/bottom combinations? |
Adds dedicated Storybook VRT coverage under popover's own test/vrt/ folder, following the button VRT foundation: placement, size, hide-arrow, modal, content overflow, forced-colors, and the public custom-property contract. Since popover uses native popover="auto" (only one open at a time on a real page), a small test-only helper flips each instance to manual before opening so the whole matrix can render open in a single snapshot. Removes the ad hoc VRT-only stories/helpers that previously lived in popover.stories.ts, which predated this pattern.
6d43557 to
6476afd
Compare
3 participants
Description
Adds dedicated Chromatic VRT coverage for popover under
test/vrt/, following the pattern established for button.test/vrt/popover.vrt.tsstart/endplacement mirroring plus hide-arrow under dark theme. Split from Permutations because the overflow row’s tall top-layer surface covers a trailing dark block when both live on one page.forced-colors: active.test/vrt/popover-custom-properties.vrt.tsReference vs. override rows for the four documented
--swc-popover-*custom properties, with coverage verification inplay.test/vrt/vrt-helpers.tsPopover-specific VRT layout and capture helpers:
openManyPopoversForVrt— flips non-modal instances topopover="manual"and disables flip so a full matrix can render open in one snapshot (VRT-only; does not change real popover behavior).stack,vrtPage,propertyCompareRow— row/page layout for top-layer surfaces.popoverVrtParameters/popoverForcedColorsVrtParameters— canvas padding and min inline size sofilter: drop-shadowhalos are not clipped in Chromatic (including sizeland side placements).Also removes the ad hoc VRT-only stories/helpers that previously lived in
popover.stories.ts(predating this pattern); that coverage now lives in the dedicated files above.Related issue(s)
Screenshots
N/A — see Chromatic build on this PR for the new snapshots.
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Popover/Popover VRT—Placements,Placements (RTL),ForcedColors,Nested,CustomPropertiesDevice review
Accessibility testing checklist
Keyboard
No new interactive surface: these are VRT-only stories tagged
dev/!autodocs, not part of the docs page or sidebar. No keyboard regressions expected.Screen reader
No new interactive surface for the same reason as above.