fix(accordion): L3-0000 align expand/collapse animation with Radix pattern

[constantinehuzenko]

Jira ticket

L3-13058

Screenshots

Screen.Recording.2026-06-12.at.12.13.13.PM.mov

Video of before/after animation to be added.

Summary

The accordion expand/collapse animation didn't follow the Radix accordion animation pattern, which caused two visible glitches:

• The close animation stopped short and the bottom spacing disappeared in a one-frame jump. Root cause: padding-bottom lived on the animated Accordion.Content element itself, so the keyframed height could never reach a true 0. Radix docs require padding to live on a child of Content.
• The content didn't visibly slide at all in some cases. Root cause: Accordion.Content renders (via asChild + Text) as an inline <span>, which ignores height animation and vertical padding.

Change List

• Moved bottom spacing from the Item's [data-state='open'] padding / Content's dead margin-bottom (vertical margins don't apply to inline elements) to padding-bottom on the inner .radix-accordion-content wrapper
• Added display: block to __content so the <span> rendered by Text honors height animation and padding
• Keyframes now animate height only (removed opacity and a broken padding: 0), matching the Radix reference
• ease-in-out → ease-out, matching the Radix reference
• Added animation-fill-mode: forwards to slide-up only, so the closed content holds at height 0 until Radix unmounts it (no end-frame flash); open content is not pinned so it can reflow after opening
• Removed duplicated --transition[data-state] rule blocks

Acceptance Test (how to verify the PR)

1. Run Storybook and open Components/Accordion → Default
2. Expand "Provenance" or "Exhibited" (both have hasTransition: true) — content should slide down smoothly from the very start (no initial pop)
3. Collapse it — content should slide up the full distance with no jump when the bottom padding disappears
4. Confirm bottom spacing below open content is unchanged ($spacing-sm)

Regression Test

• Items without hasTransition (e.g. via AccordionSubmenu story) still open/close instantly with identical spacing
• Locked items ("Condition Report") still show the lock icon and keep their content spacing
• Plus/minus icon toggle on open/close unchanged

Evidence of testing

• All 20 Accordion unit tests pass (vitest run src/components/Accordion/)
• stylelint clean
• Verified manually in Storybook

Things to look for during review

• PR title should correctly describe the most significant type of commit. I.e. feat(scope): ... if a minor release should be triggered.
• All commit messages follow convention and are appropriate for the changes
• All references to phillips class prefix are using the prefix variable
• All major areas have a data-testid attribute.
• Document all props with jsdoc comments
• All strings should be translatable.
• Unit tests should be written and should have a coverage of 90% or higher in all areas.

[netlify]

✅ Deploy Preview for phillips-seldon ready!

Name	Link
🔨 Latest commit	2f0dcc2
🔍 Latest deploy log	https://app.netlify.com/projects/phillips-seldon/deploys/6a2c309e8d17e10008bd4248
😎 Deploy Preview	https://deploy-preview-877--phillips-seldon.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[chromatic-com]

Tip

All tests passed and all changes approved!

🟢 UI Tests: 458 tests unchanged
🟢 UI Review: 229 stories published -- no changes
Storybook Publish: 229 stories published

[github-actions]

🚀 Storybook preview is ready.

• Preview: https://68b9f094608b90f3cfec5a06-mrcuxjhnju.chromatic.com/
• Chromatic build: https://www.chromatic.com/build?appId=68b9f094608b90f3cfec5a06&number=574

[Copilot]

Pull request overview

Updates the Accordion component’s SCSS to align expand/collapse animation behavior with Radix’s recommended “animate height only” pattern, addressing spacing and animation glitches during open/close.

Changes:

• Moves bottom spacing to an inner .radix-accordion-content wrapper (instead of padding/margins on the animated element).
• Ensures the content element participates in height animation by forcing display: block.
• Simplifies the keyframes to animate height only and tweaks easing / fill-mode to better match Radix behavior.

[adietrich3074]

LGTM 👍

[davidicus]

🎉 This PR is included in version 1.265.1 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀