RenewCMS/features/variants_visual_conformance.qa.md

QA: Variants and Media visual conformance, variant form overlay

Implementation note for coder (informational, not a QA assertion)

SPA only, no Go change. web/visual/check.ts already points to the merged Back-office board and uses "V1a · Loaded" names, so only web/visual/states.ts keys and setups and VariantFormSlideover.vue change. GET /v1/media/ already accepts variants=with|without and sort=total_size (api/handlers/media/mediaHandler.go parseListQuery), and the filter and sort already exist in MediaToolbar.vue, MediaVariantsFilter.vue and MediaView.vue: reuse, do not rebuild; touch Media code only if a V3 capture fails. The variant form currently uses USlideover side="right" at every width with a mobile back arrow; the mobile case becomes a bottom sheet at 92 % height with a grabber, close x and sticky footer. The Media detail panel is out of scope. The French catalogue gets entries for any new string. Supersedes the "Add variant opens a full page on mobile" scenario of features/image_variants_screens.feature. Never add a visual exception without asking the user.

Automated (Vitest + Vue Test Utils, task test:web)

Reuse web/src/views/__tests__/variantsTestKit.ts and mediaTestKit.ts. Mock useApi's request per case. Mock matchMedia for the 640 px breakpoint. No test freezes the system date.

1. Mobile variant form is a bottom sheet (below 640 px): bottom sheet, not full page; grabber, close x with a 44 px target, 92 % height class, sticky footer; no arrow-left back button; the list is still in the DOM behind the scrim.
2. Desktop variant form is a right slide-over (640 px and up): side right, 960 px max width class, close x with accessible name "Close", form and preview side by side.
3. Edit uses the same container: mount in edit mode at both widths and check the container and the title "Edit variant: hero".
4. Dismissal: pristine, Cancel, x, Escape and the scrim close with no dialog. Dirty, each opens "Discard changes?" and the sheet stays. Saving, nothing closes. Focus returns to the opener.
5. Media library regression: the existing MediaVariantsLibrary spec still passes unchanged.
6. Visual setup guard (optional): every state name of the six groups in check.ts has an entry in web/visual/states.ts.

Visual (task visual:check -- image-variants [state], desktop 1440×900 and mobile 390×844, light and dark)

Reference: the merged board and exact values in docs/design/source/AppFrame.dc.html, VariantsFrame.dc.html and MediaFrame.dc.html. The gate is hard: every non-skipped capture is within 10 % and the command exits 0. Setups use the board's sample data. No state is currently known to be clock-sensitive; if coder finds one, mark it skip: 'clock-sensitive' and list it in the report.

• Variants list: V1a Loaded, V1b Loading, V1c Empty, V1d Error loading, V1e Forbidden, V1f Row menu, V1g Row action in progress, V1h Purge confirm, V1i Delete confirm, V1j Delete in progress, V1k Request reference, V1l Entry: sidebar
• Add edit variant: V2a Create: pristine, V2b Create: dirty, V2c Field errors, V2d No dimension, V2e Name already taken, V2f Saving, V2g Save error, V2h Edit: pristine, V2i Edit: dirty, V2j Unsaved changes, V2k PNG: no quality (mobile captures show the bottom sheet)
• Media library: V3a Grid with badges, V3b Sort menu, V3c Filter: With variants, sorted by total size, V3d Filter: Without variants, V3e Filter: nothing to show, V3f Delete confirm
• Image detail: V4a Partly generated, V4b Nothing generated yet, V4c Generating, V4d Generation failed, V4e No variants defined, V4f Source is an SVG, V4h Preview dialog
• Cache panel: V5a Loaded, V5b Loading, V5c Empty cache, V5d Purging, V5e Purge done, V5f Purge failed, V5g Error loading, V5h Purge all: confirm, V5i Purge all: confirm, typed, V5j Purge unused: confirm
• Editor picker: V6a Variant select, V6b Select open, V6c No variants defined, V6d Variant deleted, V6e Variant disabled
• Final: the whole run ends with every capture at PASS or SKIP and exit code 0

Manual checks (screenshots cannot cover them)

• On a 390 px viewport, the sheet opens from the bottom, swipes down to close, shows the grabber, and the sticky footer stays above the on-screen keyboard.
• Keyboard: Tab order in the sheet and the slide-over, Escape behaviour, focus return to "Add variant" or the row's Edit button.
• Open and close motion, and the preview divider keyboard handling inside the sheet.
• Hover and focus-visible on the segmented filter and the sort menu in the Media library.