From 4c54916cb6ef4743d9b4e1a80fb2a81e124de8c2 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska Date: Mon, 16 Dec 2024 14:03:37 +0100 Subject: [PATCH 01/10] fix(styles): fix focus indicator visibility for links in accordion items on mobile --- .../src/components/post-collapsible/post-collapsible.tsx | 3 ++- .../components/src/components/post-collapsible/readme.md | 7 +++++++ .../components/src/components/post-footer/post-footer.scss | 4 ++++ 3 files changed, 13 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 e44c2d25c2..5e5b246aef 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -14,6 +14,7 @@ import { collapse, expand } from '@/animations/collapse'; import { checkEmptyOrType, isMotionReduced } from '@/utils'; /** + * @part collapsible-container - The pseudo-element, used to override styles on the collapsible element. * @slot default - Slot for placing content within the collapsible element. */ @@ -96,7 +97,7 @@ export class PostCollapsible { render() { return ( - + ); diff --git a/packages/components/src/components/post-collapsible/readme.md b/packages/components/src/components/post-collapsible/readme.md index 527f26e7f7..b374422b8f 100644 --- a/packages/components/src/components/post-collapsible/readme.md +++ b/packages/components/src/components/post-collapsible/readme.md @@ -47,6 +47,13 @@ Type: `Promise` | `"default"` | Slot for placing content within the collapsible element. | +## Shadow Parts + +| Part | Description | +| ------------------------- | ----------------------------------------------------------------------- | +| `"collapsible-container"` | The pseudo-element, used to override styles on the collapsible element. | + + ## Dependencies ### Used by diff --git a/packages/components/src/components/post-footer/post-footer.scss b/packages/components/src/components/post-footer/post-footer.scss index 03aef95809..415a573ade 100644 --- a/packages/components/src/components/post-footer/post-footer.scss +++ b/packages/components/src/components/post-footer/post-footer.scss @@ -105,6 +105,10 @@ footer { ::part(body) { padding-inline: 0; } + ::part(collapsible-container) { + margin-inline: -1rem; + padding-inline: 1rem; + } } .footer-column { From 99bbea1de5b1f2ba397a704abd9198670712d3f1 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska Date: Wed, 18 Dec 2024 07:32:02 +0100 Subject: [PATCH 02/10] Revert "fix(styles): fix focus indicator visibility for links in accordion items on mobile" This reverts commit 4c54916cb6ef4743d9b4e1a80fb2a81e124de8c2. --- .../src/components/post-collapsible/post-collapsible.tsx | 3 +-- .../components/src/components/post-collapsible/readme.md | 7 ------- .../components/src/components/post-footer/post-footer.scss | 4 ---- 3 files changed, 1 insertion(+), 13 deletions(-) diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx index 5e5b246aef..e44c2d25c2 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -14,7 +14,6 @@ import { collapse, expand } from '@/animations/collapse'; import { checkEmptyOrType, isMotionReduced } from '@/utils'; /** - * @part collapsible-container - The pseudo-element, used to override styles on the collapsible element. * @slot default - Slot for placing content within the collapsible element. */ @@ -97,7 +96,7 @@ export class PostCollapsible { render() { return ( - + ); diff --git a/packages/components/src/components/post-collapsible/readme.md b/packages/components/src/components/post-collapsible/readme.md index b374422b8f..527f26e7f7 100644 --- a/packages/components/src/components/post-collapsible/readme.md +++ b/packages/components/src/components/post-collapsible/readme.md @@ -47,13 +47,6 @@ Type: `Promise` | `"default"` | Slot for placing content within the collapsible element. | -## Shadow Parts - -| Part | Description | -| ------------------------- | ----------------------------------------------------------------------- | -| `"collapsible-container"` | The pseudo-element, used to override styles on the collapsible element. | - - ## Dependencies ### Used by diff --git a/packages/components/src/components/post-footer/post-footer.scss b/packages/components/src/components/post-footer/post-footer.scss index 415a573ade..03aef95809 100644 --- a/packages/components/src/components/post-footer/post-footer.scss +++ b/packages/components/src/components/post-footer/post-footer.scss @@ -105,10 +105,6 @@ footer { ::part(body) { padding-inline: 0; } - ::part(collapsible-container) { - margin-inline: -1rem; - padding-inline: 1rem; - } } .footer-column { From b540d1c4fa294d787ae86568bc5cfcee0c3b3421 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska Date: Wed, 18 Dec 2024 08:47:50 +0100 Subject: [PATCH 03/10] fix(styles): added overflow visible for open `post-collapsible` --- .../post-collapsible/post-collapsible.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx index e44c2d25c2..0749b45406 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -66,20 +66,22 @@ export class PostCollapsible { @Method() async toggle(open = !this.isOpen): Promise { if (open === this.isOpen) return open; - this.isOpen = open; this.collapsed = !open; if (this.isLoaded) this.postToggle.emit(open); - + const animation = open ? expand(this.host) : collapse(this.host); - + if (!this.isLoaded || isMotionReduced()) animation.finish(); - + await animation.finished; const isHostRendered = this.host.offsetParent; if (isHostRendered) animation.commitStyles(); - + if (open) { + this.host.style.overflow = 'visible'; + } + return open; } @@ -100,5 +102,5 @@ export class PostCollapsible { ); - } + } } From 7aab94521237b2f7bfb61316876733c7ac9ac01e Mon Sep 17 00:00:00 2001 From: Alona Zherdetska Date: Wed, 18 Dec 2024 08:49:55 +0100 Subject: [PATCH 04/10] chore(code style): removed redundant spaces --- .../src/components/post-collapsible/post-collapsible.tsx | 9 +++++---- 1 file changed, 5 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 0749b45406..0cb665621f 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -66,14 +66,15 @@ export class PostCollapsible { @Method() async toggle(open = !this.isOpen): Promise { if (open === this.isOpen) return open; + this.isOpen = open; this.collapsed = !open; if (this.isLoaded) this.postToggle.emit(open); - + const animation = open ? expand(this.host) : collapse(this.host); - + if (!this.isLoaded || isMotionReduced()) animation.finish(); - + await animation.finished; const isHostRendered = this.host.offsetParent; @@ -81,7 +82,7 @@ export class PostCollapsible { if (open) { this.host.style.overflow = 'visible'; } - + return open; } From 23e17a52228dbb34fa811dd3c20dd4bda87e6d89 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska Date: Wed, 18 Dec 2024 08:50:51 +0100 Subject: [PATCH 05/10] chore(code style): removed redundant spaces --- .../src/components/post-collapsible/post-collapsible.tsx | 2 +- 1 file changed, 1 insertion(+), 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 0cb665621f..d99287828c 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -103,5 +103,5 @@ export class PostCollapsible { ); - } + } } From c7834e29f4eaa4bdbca1908e3b85599007c33b37 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska Date: Fri, 3 Jan 2025 09:15:56 +0100 Subject: [PATCH 06/10] fix(animation): handle overflow styles within expand animation --- packages/components/src/animations/collapse.ts | 8 +++++++- .../src/components/post-collapsible/post-collapsible.tsx | 5 +---- 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..65ae2e6cef 100644 --- a/packages/components/src/animations/collapse.ts +++ b/packages/components/src/animations/collapse.ts @@ -18,5 +18,11 @@ export const expand = (el: HTMLElement): Animation => { const expandedKeyframe: Keyframe = { height: `${el.scrollHeight}px`, offset: 1 }; const finalKeyframe: Keyframe = { height: 'auto' }; - return el.animate([collapsedKeyframe, expandedKeyframe, finalKeyframe], animationOptions); + const animation = el.animate([collapsedKeyframe, expandedKeyframe, finalKeyframe], animationOptions); + + animation.addEventListener('finish', () => { + el.style.overflow = 'visible'; + }); + + return animation; }; diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx index 4e8c01d732..31f8d81de6 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -79,10 +79,7 @@ export class PostCollapsible { const isHostRendered = this.host.offsetParent; if (isHostRendered) animation.commitStyles(); - if (open) { - this.host.style.overflow = 'visible'; - } - + return open; } From e954fca2c30e94c746def023c0e8ce6fdf641088 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska Date: Fri, 3 Jan 2025 09:17:05 +0100 Subject: [PATCH 07/10] fix(linting): removed redundant spacing --- .../src/components/post-collapsible/post-collapsible.tsx | 1 - 1 file changed, 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 31f8d81de6..f6bd2b047a 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -79,7 +79,6 @@ export class PostCollapsible { const isHostRendered = this.host.offsetParent; if (isHostRendered) animation.commitStyles(); - return open; } From b734e3542e62316c01c7218ba6eff4bdab66f344 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska Date: Fri, 3 Jan 2025 09:18:02 +0100 Subject: [PATCH 08/10] chore(linting): reverted the linting --- .../src/components/post-collapsible/post-collapsible.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx index f6bd2b047a..31f8d81de6 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -79,6 +79,7 @@ export class PostCollapsible { const isHostRendered = this.host.offsetParent; if (isHostRendered) animation.commitStyles(); + return open; } From a97e79c13eae0c19edc60f1d54a76c38fa181a99 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska Date: Fri, 3 Jan 2025 09:18:49 +0100 Subject: [PATCH 09/10] chore(linting): reverted the changes to the file --- .../src/components/post-collapsible/post-collapsible.tsx | 2 +- 1 file changed, 1 insertion(+), 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 31f8d81de6..424fc8ebbb 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.tsx +++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx @@ -79,7 +79,7 @@ export class PostCollapsible { const isHostRendered = this.host.offsetParent; if (isHostRendered) animation.commitStyles(); - + return open; } From 34013100f87b5df162b27ddb267fb4c53ed9893b Mon Sep 17 00:00:00 2001 From: Alona Zherdetska Date: Thu, 9 Jan 2025 10:59:34 +0100 Subject: [PATCH 10/10] fix(animation): simplified the animation implementation --- packages/components/src/animations/collapse.ts | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/components/src/animations/collapse.ts b/packages/components/src/animations/collapse.ts index 65ae2e6cef..449e3c46db 100644 --- a/packages/components/src/animations/collapse.ts +++ b/packages/components/src/animations/collapse.ts @@ -16,13 +16,7 @@ export const collapse = (el: HTMLElement): Animation => { export const expand = (el: HTMLElement): Animation => { const expandedKeyframe: Keyframe = { height: `${el.scrollHeight}px`, offset: 1 }; - const finalKeyframe: Keyframe = { height: 'auto' }; + const finalKeyframe: Keyframe = { height: 'auto', overflow: 'visible' }; - const animation = el.animate([collapsedKeyframe, expandedKeyframe, finalKeyframe], animationOptions); - - animation.addEventListener('finish', () => { - el.style.overflow = 'visible'; - }); - - return animation; + return el.animate([collapsedKeyframe, expandedKeyframe, finalKeyframe], animationOptions); };