fix(vr): move data-vr attrs to ComponentPreview element

[mattrothenberg]

Summary

Screenshots were capturing the entire ComponentExample (preview + code block). This moves the VR attributes to just the ComponentPreview div so screenshots capture only the rendered component.

Root Cause Analysis

The VR false positive saga

1. PR security: harden CI pipeline against secret exfiltration via PR code execution #280 (security hardening) broke VR by checking out from main, so git diff couldn't detect changed files
2. PR fix(ci): restore visual regression after security hardening #309 & fix(ci): use two-dot diff for shallow clone compatibility #312 fixed git diff detection (PR_HEAD_SHA + two-dot diff)
3. PR fix(docs): auto-derive vrSection/vrTitle from demo prop #319 fixed the missing data-vr-* attributes that were dropped in PR feat(docs): migrate all 38 component docs to auto-extract pattern #297's migration, and simplified the worker to use [data-vr-demo] elements directly

But VR still showed false positives on PR #317 - 21 screenshots with "visual changes" that were actually just font antialiasing differences in the code blocks.

Why code blocks were being captured

PR #319 put the data-vr-* attributes on the outer ComponentExample container:

<!-- PR #319 structure -->
<div class="not-prose overflow-hidden rounded-lg" data-vr-demo data-vr-section="..." data-vr-title="...">
  <div class="flex min-h-[120px] ...">  <!-- ComponentPreview: just the button -->
    <button>Click me</button>
  </div>
  <div class="component-example-code">   <!-- CodeBlock: syntax-highlighted code -->
    <pre>import { Button } from "@cloudflare/kumo"...</pre>
  </div>
</div>

The worker found [data-vr-demo] and screenshotted the whole thing - preview AND code block. Code blocks have syntax highlighting with lots of small text, which accumulates font antialiasing differences across environments.

The fix

Move data-vr-* attributes to ComponentPreview only:

<!-- After this PR -->
<div class="not-prose overflow-hidden rounded-lg">
  <div class="flex min-h-[120px] ..." data-vr-demo data-vr-section="..." data-vr-title="...">
    <button>Click me</button>  <!-- Only this gets screenshotted -->
  </div>
  <div class="component-example-code">
    <pre>import { Button } from "@cloudflare/kumo"...</pre>  <!-- Excluded -->
  </div>
</div>

What changed

• ComponentExample.astro: Pass vrAttrs to ComponentPreview instead of outer div
• ComponentPreview.astro: Spread props onto the container div (with class handled separately for merging)

Testing

After merge + worker redeploy:

1. VR screenshots should show only the rendered component (no code blocks)
2. Screenshot dimensions should be much smaller (~120px height vs full page)
3. False positives from font antialiasing should be eliminated or drastically reduced

Related PRs

• fix(ci): restore visual regression after security hardening #309: Pass PR_HEAD_SHA to fix git diff detection
• fix(ci): use two-dot diff for shallow clone compatibility #312: Use two-dot diff for shallow clone compatibility
• fix(docs): auto-derive vrSection/vrTitle from demo prop #319: Auto-derive vrSection/vrTitle + simplify worker to use [data-vr-demo]
• fix(vr): move data-vr attrs to ComponentPreview element #320: This PR - move attributes to correct element

[mattrothenberg]

/bonk please review this follow up PR.

[ask-bonk]

LGTM! Clean fix that correctly moves the data-vr-* attributes from the outer ComponentExample wrapper to the inner ComponentPreview element.

Changes look good:

1. ComponentExample.astro: Moves {...vrAttrs} spread from outer div to <ComponentPreview>
2. ComponentPreview.astro: Now accepts and spreads arbitrary props via {...rest}, with proper class handling via class:list for merging

This ensures VR screenshots target only the rendered component preview (the [data-vr-demo] element) and exclude the code blocks, which should eliminate the font antialiasing false positives.

The PR description's root cause analysis is thorough and the fix is minimal and correct.

[ask-bonk]

I've reviewed and approved PR #320. The changes are straightforward and correct:

1. ComponentExample.astro - Moves the {...vrAttrs} spread from the outer container div to the <ComponentPreview> child component
2. ComponentPreview.astro - Updated to accept arbitrary props via {...rest} spread, with proper class handling through Astro's class:list directive to merge the base classes with any passed className

This ensures the [data-vr-demo] selector used by the screenshot worker targets only the preview div containing the rendered component, excluding the code block section that was causing font antialiasing false positives.

github run

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@320

commit: 59d6f95

[github-actions]

Docs Preview

View docs preview

Commit: 98b4374

[github-actions]

Visual Regression Report

29 screenshot(s) with visual changes:

Button / Basic

346,795 px (73.87%) changed

Before	After	Diff

Button / Variant: Primary

129,783 px (52.4%) changed

Before	After	Diff

Button / Variant: Secondary

129,215 px (52.17%) changed

Before	After	Diff

Button / Variant: Ghost

129,485 px (52.28%) changed

Before	After	Diff

Button / Variant: Destructive

128,938 px (52.06%) changed

Before	After	Diff

Button / Variant: Outline

129,334 px (52.22%) changed

Before	After	Diff

Button / Variant: Secondary Destructive

129,244 px (52.18%) changed

Before	After	Diff

Button / Sizes

426,895 px (77.61%) changed

Before	After	Diff

Button / With Icon

228,613 px (65.6%) changed

Before	After	Diff

Button / Icon Only

446,346 px (78.27%) changed

Before	After	Diff

Button / Loading State

209,597 px (63.84%) changed

Before	After	Diff

Button / Disabled State

209,437 px (63.79%) changed

Before	After	Diff

Dialog / Dialog With Actions

997,600 px (87.92%) changed

Before	After	Diff

Dialog / Dialog Basic

678,951 px (83.6%) changed

Before	After	Diff

Dialog / Dialog Alert

1,012,520 px (87.67%) changed

Before	After	Diff

Dialog / Dialog Confirmation

935,480 px (87.08%) changed

Before	After	Diff

Dialog / Dialog With Select

1,094,907 px (88.62%) changed

Before	After	Diff

Dialog / Dialog With Combobox

1,268,029 px (89.49%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

1,013,076 px (87.72%) changed

Before	After	Diff

Select / Select Basic

365,407 px (74.63%) changed

Before	After	Diff

Select / Select Without Label

364,694 px (74.49%) changed

Before	After	Diff

Select / Select With Field

483,365 px (76.87%) changed

Before	After	Diff

Select / Select Placeholder

464,787 px (78.72%) changed

Before	After	Diff

Select / Select With Tooltip

503,833 px (79.88%) changed

Before	After	Diff

Select / Select Custom Rendering

562,043 px (81.31%) changed

Before	After	Diff

Select / Select Loading

149,636 px (37.74%) changed

Before	After	Diff

Select / Select Multiple

695,550 px (83.57%) changed

Before	After	Diff

Select / Select Complex

616,611 px (79.99%) changed

Before	After	Diff

Select (Open)

0 px (0%) changed

Before	After	Diff

1 screenshot(s) unchanged

• Dialog (Open)

---

Generated by Kumo Visual Regression