From c433d945c4935260c583520d9c994fc8af13a176 Mon Sep 17 00:00:00 2001 From: Alona Date: Thu, 15 May 2025 09:25:44 +0200 Subject: [PATCH 01/12] fix(component): fix animation error in post-collapsible when inside inactive tabs --- .../src/components/post-collapsible/post-collapsible.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx index 85b8a04165..cc8bb94515 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -77,7 +77,10 @@ export class PostCollapsible { await animation.finished; - animation.commitStyles(); + const isVisible = this.host.offsetParent || this.host.offsetWidth || this.host.offsetHeight; + if (isVisible) { + animation.commitStyles(); + } return open; } From 0afbf0b9e74d8fe7e44f35a85af39f3696511fad Mon Sep 17 00:00:00 2001 From: Alona Date: Thu, 15 May 2025 09:38:57 +0200 Subject: [PATCH 02/12] chore(chnageset): added a changeset --- .changeset/tricky-buckets-sniff.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tricky-buckets-sniff.md diff --git a/.changeset/tricky-buckets-sniff.md b/.changeset/tricky-buckets-sniff.md new file mode 100644 index 0000000000..4164bdf30b --- /dev/null +++ b/.changeset/tricky-buckets-sniff.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-components': patch +--- + +Fixed an issue where `post-accordion` placed inside inactive tabs would throw animation errors. \ No newline at end of file From 6016a481a4dddd2ec9c250390d2b03e0fcdbf11e Mon Sep 17 00:00:00 2001 From: Alona Date: Thu, 15 May 2025 09:46:34 +0200 Subject: [PATCH 03/12] chore(changeset): added a changeset --- .changeset/tricky-buckets-sniff.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/tricky-buckets-sniff.md b/.changeset/tricky-buckets-sniff.md index 4164bdf30b..1b592677b9 100644 --- a/.changeset/tricky-buckets-sniff.md +++ b/.changeset/tricky-buckets-sniff.md @@ -2,4 +2,4 @@ '@swisspost/design-system-components': patch --- -Fixed an issue where `post-accordion` placed inside inactive tabs would throw animation errors. \ No newline at end of file +Resolved an issue where `post-accordion` components placed within inactive tab panels caused animation-related exceptions. \ No newline at end of file From d2c64d3a6bc017db4c9f26521f22ea550b04fdc4 Mon Sep 17 00:00:00 2001 From: Alona Date: Tue, 20 May 2025 11:14:30 +0200 Subject: [PATCH 04/12] fix(styles): fixed the animation for `post-collapsible` --- .../components/post-collapsible/post-collapsible.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx index cc8bb94515..efe29fa3f6 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -41,6 +41,12 @@ export class PostCollapsible { 'The `collapsed` property of the `post-collapsible` must be a boolean.', ); + if (!this.isLoaded) { + this.host.style.height = this.collapsed ? '0' : ''; + this.host.style.overflow = 'hidden'; + return; + } + void this.toggle(!this.collapsed); } @@ -77,10 +83,7 @@ export class PostCollapsible { await animation.finished; - const isVisible = this.host.offsetParent || this.host.offsetWidth || this.host.offsetHeight; - if (isVisible) { - animation.commitStyles(); - } + animation.commitStyles(); return open; } From 3ae1d06831f17f609f6ba2e61c0461ffd4178545 Mon Sep 17 00:00:00 2001 From: Alona Date: Tue, 20 May 2025 14:16:02 +0200 Subject: [PATCH 05/12] fix(styles): fixed the animation for `post-collapsible` --- packages/components/src/animations/collapse.ts | 2 +- .../components/post-collapsible/post-collapsible.tsx | 11 +++++++---- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/components/src/animations/collapse.ts b/packages/components/src/animations/collapse.ts index 8e8a82d7d0..2187ab525b 100644 --- a/packages/components/src/animations/collapse.ts +++ b/packages/components/src/animations/collapse.ts @@ -1,6 +1,6 @@ const collapseDuration = 350; const collapseEasing = 'ease'; -const collapsedKeyframe: Keyframe = { height: '0', overflow: 'hidden' }; +export const collapsedKeyframe: Keyframe = { height: '0', overflow: 'hidden' }; const animationOptions: KeyframeAnimationOptions = { duration: collapseDuration, diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx index efe29fa3f6..0d64bb2056 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -10,7 +10,7 @@ import { Watch, } from '@stencil/core'; import { version } from '@root/package.json'; -import { collapse, expand } from '@/animations/collapse'; +import { collapse, collapsedKeyframe, expand } from '@/animations/collapse'; import { checkEmptyOrType, isMotionReduced } from '@/utils'; /** @@ -40,10 +40,13 @@ export class PostCollapsible { 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.', ); - + if (!this.isLoaded) { - this.host.style.height = this.collapsed ? '0' : ''; - this.host.style.overflow = 'hidden'; + if (this.collapsed) { + Object.assign(this.host.style, collapsedKeyframe); + } else { + this.host.style.height = 'auto'; + } return; } From 8656941beffb6a90ca07c4f6ae2846da2b8ffd1c Mon Sep 17 00:00:00 2001 From: Alona Date: Wed, 21 May 2025 09:43:13 +0200 Subject: [PATCH 06/12] fix:test fix --- .../src/components/post-collapsible/post-collapsible.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx index 0d64bb2056..ba352a9f17 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -42,12 +42,7 @@ export class PostCollapsible { ); if (!this.isLoaded) { - if (this.collapsed) { Object.assign(this.host.style, collapsedKeyframe); - } else { - this.host.style.height = 'auto'; - } - return; } void this.toggle(!this.collapsed); From 973f1c3a33207f64f4671dac1c8f872d49dfdf7f Mon Sep 17 00:00:00 2001 From: Alona Date: Wed, 21 May 2025 10:17:39 +0200 Subject: [PATCH 07/12] fix:test fix --- packages/components/src/animations/collapse.ts | 1 + .../post-collapsible/post-collapsible.tsx | 14 ++++++++++---- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/components/src/animations/collapse.ts b/packages/components/src/animations/collapse.ts index 2187ab525b..089c7c0628 100644 --- a/packages/components/src/animations/collapse.ts +++ b/packages/components/src/animations/collapse.ts @@ -1,6 +1,7 @@ const collapseDuration = 350; const collapseEasing = 'ease'; export const collapsedKeyframe: Keyframe = { height: '0', overflow: 'hidden' }; +export const expandedKeyframe: Keyframe = { height: 'auto', overflow: 'visible' }; const animationOptions: KeyframeAnimationOptions = { duration: collapseDuration, diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx index ba352a9f17..de26b6c54c 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -10,7 +10,7 @@ import { Watch, } from '@stencil/core'; import { version } from '@root/package.json'; -import { collapse, collapsedKeyframe, expand } from '@/animations/collapse'; +import { collapse, collapsedKeyframe, expand, expandedKeyframe } from '@/animations/collapse'; import { checkEmptyOrType, isMotionReduced } from '@/utils'; /** @@ -42,11 +42,17 @@ export class PostCollapsible { ); if (!this.isLoaded) { - Object.assign(this.host.style, collapsedKeyframe); + // Apply the appropriate keyframe based on collapsed state without animation + if (this.collapsed) { + Object.assign(this.host.style, collapsedKeyframe); + } else { + Object.assign(this.host.style, expandedKeyframe); } - - void this.toggle(!this.collapsed); + // Already set the internal state to match props + this.isOpen = !this.collapsed; + return; } +} /** * An event emitted when the collapse element is shown or hidden, before the transition. From 32ac8164ad30d1061bd5ae1788a2b9e341d62cd2 Mon Sep 17 00:00:00 2001 From: Alona Date: Wed, 21 May 2025 10:40:29 +0200 Subject: [PATCH 08/12] fixed linting --- .../post-collapsible/post-collapsible.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx index de26b6c54c..215f303ab5 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -42,17 +42,15 @@ export class PostCollapsible { ); if (!this.isLoaded) { - // Apply the appropriate keyframe based on collapsed state without animation - if (this.collapsed) { - Object.assign(this.host.style, collapsedKeyframe); - } else { - Object.assign(this.host.style, expandedKeyframe); + Object.assign( + this.host.style, + this.collapsed ? collapsedKeyframe : expandedKeyframe + ); + this.isOpen = !this.collapsed; } - // Already set the internal state to match props - this.isOpen = !this.collapsed; - return; + + void this.toggle(!this.collapsed); } -} /** * An event emitted when the collapse element is shown or hidden, before the transition. From 3d54b55631f5722e97b837bd5c82cabf47b432f5 Mon Sep 17 00:00:00 2001 From: Alona Date: Mon, 2 Jun 2025 18:02:35 +0200 Subject: [PATCH 09/12] fix(animation): removed redundant code --- packages/components/src/animations/collapse.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/animations/collapse.ts b/packages/components/src/animations/collapse.ts index 089c7c0628..2187ab525b 100644 --- a/packages/components/src/animations/collapse.ts +++ b/packages/components/src/animations/collapse.ts @@ -1,7 +1,6 @@ const collapseDuration = 350; const collapseEasing = 'ease'; export const collapsedKeyframe: Keyframe = { height: '0', overflow: 'hidden' }; -export const expandedKeyframe: Keyframe = { height: 'auto', overflow: 'visible' }; const animationOptions: KeyframeAnimationOptions = { duration: collapseDuration, From d53118793b48104e288a67b8ee31868a1ecfb031 Mon Sep 17 00:00:00 2001 From: Alona Date: Mon, 2 Jun 2025 18:09:48 +0200 Subject: [PATCH 10/12] chore(component): removed redundant import and introduced the local expandedKeyFrame variable --- .../src/components/post-collapsible/post-collapsible.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx index 215f303ab5..d7d9720f42 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -10,7 +10,7 @@ import { Watch, } from '@stencil/core'; import { version } from '@root/package.json'; -import { collapse, collapsedKeyframe, expand, expandedKeyframe } from '@/animations/collapse'; +import { collapse, collapsedKeyframe, expand } from '@/animations/collapse'; import { checkEmptyOrType, isMotionReduced } from '@/utils'; /** @@ -41,16 +41,18 @@ export class PostCollapsible { 'The `collapsed` property of the `post-collapsible` must be a boolean.', ); + const expandedKeyframe: Keyframe = { height: 'auto', overflow: 'visible' }; + if (!this.isLoaded) { Object.assign( this.host.style, this.collapsed ? collapsedKeyframe : expandedKeyframe ); this.isOpen = !this.collapsed; - } - + } else { void this.toggle(!this.collapsed); } + } /** * An event emitted when the collapse element is shown or hidden, before the transition. From bbcdfb87e24b6522c46bc20b38fae89528d800c2 Mon Sep 17 00:00:00 2001 From: Alona Date: Mon, 2 Jun 2025 19:08:49 +0200 Subject: [PATCH 11/12] fixed linting --- .../src/components/post-collapsible/post-collapsible.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx index d7d9720f42..d09a1b480b 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -50,8 +50,8 @@ export class PostCollapsible { ); this.isOpen = !this.collapsed; } else { - void this.toggle(!this.collapsed); - } + void this.toggle(!this.collapsed); + } } /** From 9433e71533e2ae84a14af0659d28a7033fab1561 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Sat, 14 Jun 2025 12:34:49 +0200 Subject: [PATCH 12/12] Update packages/components/src/components/post-collapsible/post-collapsible.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .../src/components/post-collapsible/post-collapsible.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx index d09a1b480b..74db190d76 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -41,9 +41,9 @@ export class PostCollapsible { 'The `collapsed` property of the `post-collapsible` must be a boolean.', ); - const expandedKeyframe: Keyframe = { height: 'auto', overflow: 'visible' }; - if (!this.isLoaded) { + + const expandedKeyframe: Keyframe = { height: 'auto', overflow: 'visible' }; Object.assign( this.host.style, this.collapsed ? collapsedKeyframe : expandedKeyframe