feat: slider push mode and trigger toggle#54
Merged
Conversation
- sliderMode "overlay" | "push" (default overlay); push shifts page content aside instead of overlaying, keeps page interactive, falls back to overlay on narrow viewports - toggle open slider closed on repeat trigger click (JS + React) - fix slider close-button position
Contributor
📦 Snapshot ReleasePublished snapshot packages for this PR: pnpm add @perspective-ai/sdk@1.9.0-pr-54-20260529115045
pnpm add @perspective-ai/sdk-react@1.9.0-pr-54-20260529115045Or use the npm tag (always points to the latest snapshot from this PR): pnpm add @perspective-ai/sdk@pr-54
pnpm add @perspective-ai/sdk-react@pr-54 |
playwright install --with-deps deterministically stalled right after the chromium download hit 100% (no extraction, no progress) and reruns never helped because the browser cache only saves in the post-step, which never ran on the cancelled job. Use the prebuilt mcr.microsoft.com/playwright image so browsers are baked in and there's no CDN download to stall on.
The playwright container runs as root while the mounted workspace is owned by the host runner UID, so git rejects the lefthook postinstall hook with 'detected dubious ownership'. Add safe.directory before install.
GitHub overrides HOME to /github/home in container jobs, so the test process looked for browsers under ~/.cache/ms-playwright (default) instead of /ms-playwright where the image installs them, failing every test with 'Executable doesn't exist'. Set PLAYWRIGHT_BROWSERS_PATH explicitly.
Container approach hit a wall: Playwright launched against the default ~/.cache path even with PLAYWRIGHT_BROWSERS_PATH=/ms-playwright set, so every test failed with 'Executable doesn't exist'. Back to runs-on: ubuntu-latest, but make the original download hang survivable instead of infinite: - split apt system-deps (never hung) from the browser download - per-attempt timeout 240s + 3x retry: a stalled download is killed and retried on a fresh connection; already-fetched artifacts are skipped so retries make incremental progress - cache key on pnpm-lock.yaml so the browser cache tracks the Playwright version and actually persists once populated - job timeout-minutes: 20 as a backstop
Root cause of the e2e failures was two-fold: - playwright install --with-deps deterministically stalled right after the chromium download hit 100%, and reruns never helped (cache only saves in the post-step, which never ran on the cancelled job). - the container fix exposed a second issue: turbo 2.x strict env mode strips PLAYWRIGHT_BROWSERS_PATH before invoking 'playwright test', so the tests looked in ~/.cache instead of the image's /ms-playwright. Fix: run e2e in mcr.microsoft.com/playwright (browsers baked in, no CDN download to stall on) and allowlist PLAYWRIGHT_BROWSERS_PATH via passThroughEnv so it reaches the test process. Also trust the workspace dir (root container vs host-owned mount) for the lefthook postinstall hook. Bump @playwright/test 1.52 -> 1.60 and pin the image tag to match.
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
1 participant
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.
What
Adds a
sliderMode: \"overlay\" | \"push\"option to the slider (default\"overlay\", fully backward compatible).pushmode — slider shifts page content aside (animatedmargin-righton<html>, synced with the slide-in) so it occupies real layout space instead of overlaying. No backdrop, the page stays interactive, and clicking the page no longer closes the slider. Falls back to\"overlay\"below a 640px viewport so content isn't pushed off-screen on phones.data-perspective-slidertrigger again now closes an open slider instead of re-opening it (respectsdisableClose). The ReactuseSliderhook continues to exposetoggle().Available via the JS API, the
data-perspective-slider-mode=\"push\"attribute, and theuseSliderReact hook.Usage
```html
<button data-perspective-slider="research_xxx" data-perspective-slider-mode="push">Feedback
```
```ts
openSlider({ researchId: "research_xxx", sliderMode: "push" });
```
Testing
Changeset included (minor bump, fixed-versioned packages).