[gdevenyi]

Summary

 <DynamicField>
-  if (!staticField) return null
-  <StaticField field={staticField} />
+  <AnimatePresence initial={false}>
+    {staticField && (
+      <motion.div>                       # height 0 -> auto, opacity 0 -> 1, 200 ms
+        <StaticField field={staticField} />
+      </motion.div>
+    )}
+  </AnimatePresence>

• The collapsed wrapper has a top margin of -1.5rem, which cancels the gap-6 between fields. The fields below thus do not jump.
• A field that is shown when the form first renders does not animate.
• With prefers-reduced-motion, the duration is 0.
• The wrapper clips its content only during the animation, so focus rings are fully visible afterwards.
• Dynamic fields in a record array do not use DynamicField and are not animated.

Evidence

• Before: the field appears and disappears in one frame.
  After: Storybook Form / Ungrouped in Chromium, sampled each 35 ms. Values are: top of the next field (px) / wrapper height (px) / opacity / overflow.

  show: 1708/0/0.00/hidden  1725/12/0.18/hidden  1760/37/0.57/hidden  1792/61/0.97/hidden  1794/62/1.00/visible
  hide: 1789/58/1.00/hidden 1752/32/0.52/hidden  1713/4/0.06/hidden   1708/0/0.00/hidden   (removed) 1708
  

• pnpm test: 42 files, 249 tests pass (3 new). pnpm lint passes.

Merge Danger

Door: two-way

Blast Radius: tests

• A hidden dynamic field now stays in the DOM for 200 ms. A test that asserts its absence immediately after the change must wait. Two tests in Form.test.tsx needed this change.
• The value of the field is still set to undefined immediately.
• Each dynamic field has a new wrapper div (data-testid="dynamic-field"). The -1.5rem margin assumes the gap-6 of Form.

Closes #19

🤖 Generated with Claude Code

https://claude.ai/code/session_01W53iUP9ECVtoteopM7QtC7

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota. Try requesting a review at a lower effort level.

An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing.