Skip to content

fix: skip Pixel-flaky menu/spinner/icon/progress-bar motion, fix VSCodeParity Menu capture - #1085

Open
EhabY wants to merge 1 commit into
mainfrom
ci/pixel-skip-menu-motion
Open

fix: skip Pixel-flaky menu/spinner/icon/progress-bar motion, fix VSCodeParity Menu capture#1085
EhabY wants to merge 1 commit into
mainfrom
ci/pixel-skip-menu-motion

Conversation

@EhabY

@EhabY EhabY commented Aug 18, 2026

Copy link
Copy Markdown
Collaborator
  • .ui-menu, .ui-spinner, .ui-icon--spin, and the indeterminate .ui-progress-bar all animate via CSS, which is a likely source of flaky Pixel diffs: a capture can land mid-animation depending on timing, and infinite animations (spinner rotation, icon spin, progress-bar travel) are never fast-forwarded by Playwright's animations: "disabled" -- they just freeze at whatever frame happens to be current.
  • isPixel() from @coder/pixel-storybook/storyapi is the tool's documented hook for exactly this, but it was unused anywhere in this repo. .storybook/preview.ts now sets a data-pixel attribute on <html> when isPixel() is true; each component's CSS zeroes out its animation only during captures. No effect outside Pixel (normal dev Storybook, production webview).
  • ci.yaml now sets PIXEL_COMMIT to the real PR head SHA (github.event.pull_request.head.sha) instead of letting it default to github.sha, which on pull_request events is a synthetic GitHub-generated merge commit that changes every run and was never seen on a prior build of the same PR.
  • The UI/VSCodeParity Menu story was only capturing our DropdownMenu, missing the VscodeContextMenu reference that's supposed to render beside it for comparison. Switched to defaultOpen with an invisible trigger anchor so both render from the first paint, matching the reference's always-open show prop, and dropped the unneeded visible "Menu" button from the comparison.

@EhabY
EhabY force-pushed the ci/pixel-skip-menu-motion branch 2 times, most recently from 63dcec6 to a12b734 Compare August 18, 2026 12:48
@EhabY EhabY changed the title fix: skip menu open/close motion during Pixel captures fix: skip Pixel-flaky menu/spinner/icon/progress-bar motion, fix VSCodeParity Menu capture Aug 18, 2026
…deParity Menu capture

CSS animations are a likely source of flaky Pixel diffs: a capture can land
mid-animation depending on timing, and infinite animations (spinner
rotation, icon spin, indeterminate progress-bar travel) are never
fast-forwarded by Playwright's animations:"disabled", so they freeze at
whatever frame happens to be current. isPixel() (from @coder/pixel-storybook)
is the documented hook for this but was unused anywhere in the repo;
preview.ts now sets a data-pixel attribute from it so each component's CSS
can zero out its animation only during captures.

Also:
- ci.yaml now reports the real PR head commit to Pixel (PIXEL_COMMIT)
  instead of GitHub's synthetic pull_request merge SHA, which changes on
  every run and was never seen on a prior build of the same PR.
- The VSCodeParity "Menu" story was only capturing our DropdownMenu, not
  the VscodeContextMenu reference beside it. Switching to defaultOpen with
  an invisible trigger anchor renders both from the first paint, matching
  the reference's always-open show prop, and drops the unneeded visible
  "Menu" button from the comparison.
@EhabY
EhabY force-pushed the ci/pixel-skip-menu-motion branch from a12b734 to b6f128a Compare August 18, 2026 13:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant