mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 22:26:38 +03:00
Paul BakausandClaude Opus 4.7
630e586b01
Closes #113. Picker chrome could become unclickable inside Radix Dialog portals, and clicking it dismissed the host dialog. Three orthogonal issues surfaced during manual verification: 1. Modal-aware chrome - Add `defangOutsideHandlers` and apply it to bar, picker, params panel, annotation overlay, global bar, and design panel host. - Sets `pointer-events: auto !important` on interactive chrome so Radix's `body { pointer-events: none }` modal scroll-lock can't silence our UI. - Stops `pointerdown` / `mousedown` / `focusin` propagation at the chrome boundary so DismissableLayer / FocusScope outside-handlers never fire for clicks that land on us. 2. detectPageTheme: misread transparent body as black - `getComputedStyle(body).backgroundColor` returns `rgba(0,0,0,0)` when no bg is set; the prior regex captured (0,0,0) and ignored alpha, calling every default-bg page "dark." - Honor alpha, walk body → html, fall back to `prefers-color-scheme` only when both are transparent. 3. Exit X invisible on host pages with `button { padding: ... }` - Every other chrome button sets padding inline; exitBtn didn't. Host resets like `button { padding: 0.5rem 1rem }` (in the new fixture, common in the wild) inflated the 24x24 button into 56x40 and pushed the SVG into a non-rendering region — DevTools showed the right styles, the X just didn't paint. - Pin `padding: 0` + `box-sizing: border-box`, match the toggle icon spec (14 / stroke 1.5 / textDim → text on hover). 4. Toast no longer obscures the global bar - Position the toast above globalBarEl's actual rect instead of a fixed bottom: 16px that overlapped the bar's bottom: 14px. Test coverage: new `vite8-react-radix-dialog` fixture exercises the full pick → Go → cycle → Accept loop with `@radix-ui/react-dialog` + `Portal` + `Overlay` + `Content`. Without the fix, clicking Go dismisses the dialog and unmounts the picked element. All 20 live e2e fixtures pass; all 180 unit tests pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
40 lines
1.2 KiB
JSON
40 lines
1.2 KiB
JSON
{
|
|
"name": "Vite 8 + React + Radix Dialog (portal)",
|
|
"config": {
|
|
"files": ["index.html"],
|
|
"insertBefore": "</body>",
|
|
"commentSyntax": "html"
|
|
},
|
|
"sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css", "vite.config.js"],
|
|
"generatedFiles": [],
|
|
"wrapCases": [
|
|
{
|
|
"name": "wraps lightbox heading inside Radix portal",
|
|
"args": { "classes": "hero-title", "tag": "h1" },
|
|
"expectedFile": "src/App.jsx"
|
|
}
|
|
],
|
|
"runtime": {
|
|
"styling": "plain-css",
|
|
"install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
|
|
"devCommand": ["npx", "vite", "--host", "127.0.0.1"],
|
|
"readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
|
|
"readyTimeoutMs": 120000,
|
|
"preActions": [
|
|
{ "type": "click", "selector": "[data-testid='open-dialog']" },
|
|
{ "type": "wait", "selector": "h1.hero-title" }
|
|
],
|
|
"reloadProbe": {
|
|
"preActions": [
|
|
{ "type": "click", "selector": "[data-testid='open-dialog']" },
|
|
{ "type": "wait", "selector": "h1.hero-title" }
|
|
],
|
|
"expectSelector": "h1.hero-title"
|
|
},
|
|
"probe": {
|
|
"expectLiveInit": true,
|
|
"expectConsoleClean": true
|
|
}
|
|
}
|
|
}
|