Skip to content

docs(design-system): principle 29 — a toggle should not shove the rest of the panel, verified by eye - #2770

Merged
vybe merged 1 commit into
devfrom
docs/design-principle-29-no-jumpy-toggles
Sep 14, 2026
Merged

docs(design-system): principle 29 — a toggle should not shove the rest of the panel, verified by eye#2770
vybe merged 1 commit into
devfrom
docs/design-principle-29-no-jumpy-toggles

Conversation

@trinity-ability

Copy link
Copy Markdown
Contributor

What

Adds UI Construction Principle 29 to docs/memory/design-system.md and the builder contract, plus a do/don't row and a PR self-check item. Bumps the principle count in CLAUDE.md to 29.

Why

Section B ("Layout stability — no jumpy UI") covered shifts caused by data arriving (principles 4, 6) and context loss on refresh (5). Nothing covered a user-driven change — a toggle revealing dependent fields, a mode swapping a column, a tab switch. That class has shipped and been fixed four times: #954, #1563, #1939, #2640.

Shape of the rule

A recommendation, not a hard rule, and explicitly verified by eye:

  • Prefer a reserved footprint (small dependents, disabled in place) or a height/flex transition (section/column, 150–300ms, motion-reduce:transition-none) over a bare v-if snap.
  • Aim for: the trigger stays under the pointer, new content opens below or beside it, what the user was reading stays in view.
  • A snap is acceptable when the reviewer judges it so.
  • No scanner can see layout movement, so the self-check asks that a human exercised the control in the browser, in both themes, and that the PR says so.

Docs only. No code, no ratchet, no CI change.

🤖 Generated with Claude Code

https://claude.ai/code/session_01FigLSz2mrmmWyXF1HCt6Zq

…t of the panel, verified by eye

Section B (layout stability) covered shifts caused by data arriving and
context loss on refresh, but nothing addressed a user-driven change: a
toggle revealing dependent fields, a mode swapping a column, a tab switch.
That class has shipped and been fixed four times (#954, #1563, #1939,
#2640).

Added as a recommendation, not a hard rule: prefer a reserved footprint
or a height/flex transition over a bare v-if snap, with the trigger
staying under the pointer and the user's reading position kept in view.
No scanner can see layout movement, so the PR self-check asks for a human
to exercise the control in the browser, in both themes, and say so.

Both docs updated; CLAUDE.md principle count bumped to 29.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FigLSz2mrmmWyXF1HCt6Zq
@trinity-ability trinity-ability added type-docs Documentation theme-ui-ux Theme: UI/UX labels Sep 14, 2026

@vybe vybe left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

merge-train: batch validated on train/20260914-1332

@vybe
vybe merged commit e83a8a1 into dev Sep 14, 2026
26 of 29 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

theme-ui-ux Theme: UI/UX type-docs Documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants