Fix/accordion anim

[caseycarroll]

• Fixes accordion: close/open animation abruptly pops in and out at end of animation #551

Description

Replace margin-block-end: 6px; with padding-block-end: 6px; on .details__content to ensure height transition accounts for spacing. Adjust content-visibility transition timing to avoid abrupt shift on close.

Notes

I may be missing context around content-visiblity transition duration being shorter than height transition duration.

Screenshots

before

before.accordion.anim.fix.mov

after

after.accordion.anim.fix.mov

Checklist

• I verify all changes are within scope of the linked issue
• I added/updated/removed testing (Storybook in Skin) coverage as appropriate

• I tested the UI in all supported browsers
• I tested the UI in dark mode and RTL mode

[changeset-bot]

🦋 Changeset detected

Latest commit: 8cf89d1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@ebay/skin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Pull request overview

Fixes the accordion open/close animation “pop” by ensuring spacing is included in the animated height and by aligning the content-visibility transition timing with the height transition.

Changes:

• Replaced bottom margin on .details__content with padding-block-end to avoid margin clipping during height transitions.
• Updated content-visibility transition duration to match the height transition duration for smoother close behavior.

Reviewed changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated no comments.

File	Description
packages/skin/src/sass/accordion/accordion.scss	Updates accordion content spacing + transition timing to prevent abrupt visual shifts during animation.
packages/skin/dist/accordion/accordion.css	Regenerated compiled CSS to reflect the SCSS changes.

[LuLaValva]

@caseycarroll thanks for this! Can you add a changeset with npm run change? This should be a patch change to skin. Afterwards we'll get this merged!

[LuLaValva]

Thanks for the super quick changeset! Sorry to leave you hanging for so long 😅

[LuLaValva]

Oops, looks like some tests failed! Were you able to get tests running locally on your machine?

[caseycarroll]

Whoops! I’ll take a look at the tests soon.

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (main@ee0a8c8). Learn more about missing BASE report.
❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #552   +/-   ##
=======================================
  Coverage        ?   56.30%           
=======================================
  Files           ?     1076           
  Lines           ?     8140           
  Branches        ?     1717           
=======================================
  Hits            ?     4583           
  Misses          ?     3193           
  Partials        ?      364           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.