Skip to content

feat(side-menu): animate nested sidebar expand/collapse - #2872

Draft
illionillion wants to merge 1 commit into
Redocly:mainfrom
illionillion:cursor/sidebar-accordion-animation-c9c2
Draft

illionillion wants to merge 1 commit into
Redocly:mainfrom
illionillion:cursor/sidebar-accordion-animation-c9c2

Conversation

@illionillion

Copy link
Copy Markdown

What/Why/How?

Nested groups in the v3 sidebar already animate their height through @redocly/theme. This brings the rest of the pre-v3 accordion behavior onto current main:

  • Clamp the empty inline style that flashes a group fully open for one frame before the height transition.
  • Skip that height transition when prefers-reduced-motion is set.
  • Mark a nested group aria-hidden once it is fully collapsed. The root list keeps the theme's native list semantics.

Navigation, scroll sync, and keyboard behavior stay as they are.

Reference

Follow-up to #2779. That pull request targeted the pre-v3 sidebar and was closed with a request to rebase onto main. This is a new draft from cursor/sidebar-accordion-animation-c9c2 on current main.

Tests

  • Unit tests cover collapsed aria-hidden, the reduced-motion rules, and SideMenu wiring.
  • npm run lint, npm run ts:check, and npm run unit pass.
  • Playwright e2e/playwright/tests/menu.spec.ts (source project) passes.

Check yourself

  • Code is linted
  • Tested
  • All new/updated code is covered with tests

Keep the theme height transition for nested groups, clamp the empty
style frame that flashes the panel open, honor prefers-reduced-motion,
and mark fully collapsed nested panels aria-hidden.

Co-authored-by: Yuto Ichinose <illionillion@users.noreply.github.com>

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant