From 4c54916cb6ef4743d9b4e1a80fb2a81e124de8c2 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska Date: Mon, 16 Dec 2024 14:03:37 +0100 Subject: [PATCH 1/5] 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 2/5] 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 3/5] 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 4/5] 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 5/5] 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 { ); - } + } }