From 39bf8caf1bbf9c81cfd59110a59a31fec59ae5f2 Mon Sep 17 00:00:00 2001 From: Casey Carroll Date: Thu, 5 Mar 2026 20:32:39 -0800 Subject: [PATCH 1/4] fix: stuttering accordion animation --- packages/skin/src/sass/accordion/accordion.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/skin/src/sass/accordion/accordion.scss b/packages/skin/src/sass/accordion/accordion.scss index bdec115c0..d4eb43eec 100644 --- a/packages/skin/src/sass/accordion/accordion.scss +++ b/packages/skin/src/sass/accordion/accordion.scss @@ -31,8 +31,9 @@ ul.accordion details { } ul.accordion details .details__content { - margin: 0 16px 6px; + margin: 0 16px; overflow: hidden; + padding-block-end: 6px; } ul.accordion @@ -87,7 +88,7 @@ ul.accordion--large summary.details__summary { overflow: clip; transition: height var(--motion-duration-medium-3) var(--motion-easing-standard), - content-visibility var(--motion-duration-medium-2) + content-visibility var(--motion-duration-medium-3) var(--motion-easing-continuous) allow-discrete, opacity var(--motion-duration-medium-2) var(--motion-easing-continuous); From e72c98e0fb21f932c6ffd25fb43e3c6c10380265 Mon Sep 17 00:00:00 2001 From: Casey Carroll Date: Thu, 5 Mar 2026 20:49:46 -0800 Subject: [PATCH 2/4] chore: add dist --- packages/skin/dist/accordion/accordion.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/skin/dist/accordion/accordion.css b/packages/skin/dist/accordion/accordion.css index 7b4ab5a13..b0372dbb5 100644 --- a/packages/skin/dist/accordion/accordion.css +++ b/packages/skin/dist/accordion/accordion.css @@ -26,8 +26,9 @@ ul.accordion details { } ul.accordion details .details__content { - margin: 0 16px 6px; + margin: 0 16px; overflow: hidden; + padding-block-end: 6px; } ul.accordion @@ -82,7 +83,7 @@ ul.accordion--large summary.details__summary { overflow: clip; transition: height var(--motion-duration-medium-3) var(--motion-easing-standard), - content-visibility var(--motion-duration-medium-2) + content-visibility var(--motion-duration-medium-3) var(--motion-easing-continuous) allow-discrete, opacity var(--motion-duration-medium-2) var(--motion-easing-continuous); From 62950739389204d01473cf03cf414c40d8d2ffc4 Mon Sep 17 00:00:00 2001 From: Casey Carroll Date: Wed, 11 Mar 2026 11:37:39 -0700 Subject: [PATCH 3/4] chore: changeset --- .changeset/warm-cougars-stare.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/warm-cougars-stare.md diff --git a/.changeset/warm-cougars-stare.md b/.changeset/warm-cougars-stare.md new file mode 100644 index 000000000..289d8e03e --- /dev/null +++ b/.changeset/warm-cougars-stare.md @@ -0,0 +1,5 @@ +--- +"@ebay/skin": patch +--- + +Adjust accordion open/close animation to avoid jumpiness From 8cf89d17bb87cae7c4057df64cc94926062612d1 Mon Sep 17 00:00:00 2001 From: Casey Carroll Date: Wed, 11 Mar 2026 18:23:29 -0700 Subject: [PATCH 4/4] test: update css snapshot for accordion --- .../test/__snapshots__/test.browser.js.snap | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/ebayui-core/src/components/ebay-accordion/test/__snapshots__/test.browser.js.snap b/packages/ebayui-core/src/components/ebay-accordion/test/__snapshots__/test.browser.js.snap index 7348517a1..e4fee007b 100644 --- a/packages/ebayui-core/src/components/ebay-accordion/test/__snapshots__/test.browser.js.snap +++ b/packages/ebayui-core/src/components/ebay-accordion/test/__snapshots__/test.browser.js.snap @@ -40,7 +40,7 @@ exports[`accordion > given the accordion in the default state > then it matches transition-delay: 0ms; transition-duration: 0ms; transition: height var(--motion-duration-medium-3) var(--motion-easing-standard), - content-visibility var(--motion-duration-medium-2) + content-visibility var(--motion-duration-medium-3) var(--motion-easing-continuous) allow-discrete, opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) @@ -147,11 +147,11 @@ exports[`accordion > given the accordion in the default state > then it matches
@@ -196,7 +196,7 @@ exports[`accordion > given the accordion in the default state > then it matches transition-delay: 0ms; transition-duration: 0ms; transition: height var(--motion-duration-medium-3) var(--motion-easing-standard), - content-visibility var(--motion-duration-medium-2) + content-visibility var(--motion-duration-medium-3) var(--motion-easing-continuous) allow-discrete, opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) @@ -303,11 +303,11 @@ exports[`accordion > given the accordion in the default state > then it matches
@@ -351,7 +351,7 @@ exports[`accordion > given the accordion in the default state > then it matches transition-delay: 0ms; transition-duration: 0ms; transition: height var(--motion-duration-medium-3) var(--motion-easing-standard), - content-visibility var(--motion-duration-medium-2) + content-visibility var(--motion-duration-medium-3) var(--motion-easing-continuous) allow-discrete, opacity var(--motion-duration-medium-2) var(--motion-easing-continuous) @@ -458,11 +458,11 @@ exports[`accordion > given the accordion in the default state > then it matches