Skip to content

feat(studio): animate flat inspector group expand/collapse#2136

Open
vanceingalls wants to merge 2 commits into
studio-flat-10-remove-pinningfrom
studio-flat-11-expand-collapse-animation
Open

feat(studio): animate flat inspector group expand/collapse#2136
vanceingalls wants to merge 2 commits into
studio-flat-10-remove-pinningfrom
studio-flat-11-expand-collapse-animation

Conversation

@vanceingalls

@vanceingalls vanceingalls commented Jul 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

What

Eleventh PR in the flat inspector stack (see #2120 for the foundation and full stack list). Adds a fast (~120ms) entrance animation when accordion group headers expand/collapse, matching this codebase's existing plain-CSS @keyframes-based animation convention (no new library added).

Stack: #2120 → ... → #2135 → #2136 (this).

Why

Requested directly — toggling groups was instant with no transition. Since collapsed/open headers are two different JSX branches (React mounts a fresh node on every toggle rather than morphing one persistent element), an entrance animation on whichever branch just mounted was the correct, minimal approach rather than restructuring the DOM for a true height-morph.

How

  • New @keyframes hf-flat-group-in + .hf-flat-group-enter class in studio.css, mirroring the existing hf-toast-in pattern (opacity + small translateY, prefers-reduced-motion override).
  • PropertyPanelFlat.tsx tracks justToggledIds: string[] — populated with both the clicked group's id and whichever group was implicitly closed by the click (deduped when they're the same), cleared ~200ms after each toggle — so only the two groups actually transitioning ever animate, not unrelated siblings.
  • Caught during implementation, not shipped as a defect: the first pass applied the animation class unconditionally to whatever branch mounted, but a click jumping between non-adjacent groups (e.g. Motion→Text, skipping Style/Layout) caused those skipped-over siblings to incorrectly replay the animation too — a Chromium quirk where array-position shifts restart CSS animations even without a prop change on the affected element. Fixed by explicitly gating the class on justToggledIds rather than relying on incidental remounts.
  • A follow-up review caught a second gap: the initial fix only tracked the clicked group, so a group closing implicitly (displaced by a different group opening) never got its own collapse-entrance animation. Fixed by capturing the previously-open group's id alongside the clicked one.

Test plan

  • Component-level tests confirm the animation class renders correctly on both collapsed and open states.
  • Integration-level regression test (added after the second review round) drives real clicks through a non-adjacent double-jump (Text→Motion→Text) and asserts untouched siblings never get the class while both the closing and opening groups do — verified via A/B revert that this test actually fails against the earlier single-id implementation.
  • Verified live in the browser: clicked between non-adjacent groups and confirmed via direct DOM inspection that exactly the closing and opening group get the animation class, with all untouched siblings at false.
  • Confirmed the animation is purely cosmetic — freshly-opened content is fully interactive immediately, nothing gates on the animation completing.
  • Full monorepo suite green (1581 tests, 0 failures); oxlint/oxfmt/fallow clean.
  • Unit tests added/updated
  • Manual testing performed
  • Documentation updated (not applicable — internal Studio UI behind an off-by-default flag)

@vanceingalls
feat(studio): animate flat inspector group expand/collapse
f96c174 
Adds a fast (120ms) CSS entrance animation for flat inspector accordion
group headers/body, gated to the group actually toggling (not derived
from remounting alone) to avoid a Chromium reflow quirk that otherwise
replays the animation on untouched collapsed siblings.
@vanceingalls
fix(studio): animate the implicitly-closed group too, add regression …
030243d 
…test
@vanceingalls Graphite App

vanceingalls commented Jul 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator Author

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

This stack of pull requests is managed by Graphite. Learn more about stacking.

This was referenced Jul 10, 2026
Open
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@vanceingalls