From 61ef1b4a028bb58ac8dee818f51ce863850feb71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 21 Jan 2025 14:27:49 +0100 Subject: [PATCH] fix(components): fix render context issues in the `post-collapsible` component (#4478) --- .changeset/angry-eagles-appear.md | 5 +++++ .changeset/cold-bags-chew.md | 5 +++++ .../post-collapsible/post-collapsible.scss | 1 + packages/styles/src/mixins/_list.scss | 2 +- pnpm-lock.yaml | 16 ++++++++-------- 5 files changed, 20 insertions(+), 9 deletions(-) create mode 100644 .changeset/angry-eagles-appear.md create mode 100644 .changeset/cold-bags-chew.md diff --git a/.changeset/angry-eagles-appear.md b/.changeset/angry-eagles-appear.md new file mode 100644 index 0000000000..4cabe52f9f --- /dev/null +++ b/.changeset/angry-eagles-appear.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-components': patch +--- + +Positioned the `post-collapsible` host relative so every not static positioned element within uses it as its base render context and therefore gets clipped as it should. diff --git a/.changeset/cold-bags-chew.md b/.changeset/cold-bags-chew.md new file mode 100644 index 0000000000..19da8dfee5 --- /dev/null +++ b/.changeset/cold-bags-chew.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Positioned `ul.list-bullet > li::before` elements statically, so they can't cause render context issues anymore. diff --git a/packages/components/src/components/post-collapsible/post-collapsible.scss b/packages/components/src/components/post-collapsible/post-collapsible.scss index 20947d5cd1..480275c883 100644 --- a/packages/components/src/components/post-collapsible/post-collapsible.scss +++ b/packages/components/src/components/post-collapsible/post-collapsible.scss @@ -1,4 +1,5 @@ :host { display: block; + position: relative; overflow: hidden; } diff --git a/packages/styles/src/mixins/_list.scss b/packages/styles/src/mixins/_list.scss index 03a136a240..dd8e13ac5e 100644 --- a/packages/styles/src/mixins/_list.scss +++ b/packages/styles/src/mixins/_list.scss @@ -24,7 +24,7 @@ display: block; content: ''; box-sizing: content-box; - position: absolute; + float: inline-start; margin-block-start: calc( (#{tokens.get('body-line-height', elements.$post-body)} * 0.5em) - (#{tokens.get('list-bullet-item-icon-bullet-size', elements.$post-listbullet)} * 0.5) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7f091fa2f3..ee044fdda4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11639,7 +11639,7 @@ snapshots: dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1802.12(chokidar@3.6.0) - '@angular-devkit/build-webpack': 0.1802.12(chokidar@3.6.0)(webpack-dev-server@5.0.4(webpack@5.94.0))(webpack@5.94.0(esbuild@0.23.0)) + '@angular-devkit/build-webpack': 0.1802.12(chokidar@3.6.0)(webpack-dev-server@5.0.4(webpack@5.94.0(esbuild@0.23.0)))(webpack@5.94.0(esbuild@0.23.0)) '@angular-devkit/core': 18.2.12(chokidar@3.6.0) '@angular/build': 18.2.12(@angular/compiler-cli@18.2.13(@angular/compiler@18.2.13(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.15.0)))(typescript@5.5.4))(@angular/localize@18.2.13(@angular/compiler-cli@18.2.13(@angular/compiler@18.2.13(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.15.0)))(typescript@5.5.4))(@angular/compiler@18.2.13(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.15.0))))(@types/node@22.10.5)(chokidar@3.6.0)(less@4.2.0)(postcss@8.4.41)(sass-embedded@1.81.0)(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.10.5)(typescript@5.5.4)))(terser@5.31.6)(typescript@5.5.4) '@angular/compiler-cli': 18.2.13(@angular/compiler@18.2.13(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.15.0)))(typescript@5.5.4) @@ -11697,8 +11697,8 @@ snapshots: vite: 5.4.6(@types/node@22.10.5)(less@4.2.0)(sass-embedded@1.81.0)(sass@1.77.6)(terser@5.31.6) watchpack: 2.4.1 webpack: 5.94.0(esbuild@0.23.0) - webpack-dev-middleware: 7.4.2(webpack@5.94.0) - webpack-dev-server: 5.0.4(webpack@5.94.0) + webpack-dev-middleware: 7.4.2(webpack@5.94.0(esbuild@0.23.0)) + webpack-dev-server: 5.0.4(webpack@5.94.0(esbuild@0.23.0)) webpack-merge: 6.0.1 webpack-subresource-integrity: 5.1.0(webpack@5.94.0(esbuild@0.23.0)) optionalDependencies: @@ -11727,12 +11727,12 @@ snapshots: - utf-8-validate - webpack-cli - '@angular-devkit/build-webpack@0.1802.12(chokidar@3.6.0)(webpack-dev-server@5.0.4(webpack@5.94.0))(webpack@5.94.0(esbuild@0.23.0))': + '@angular-devkit/build-webpack@0.1802.12(chokidar@3.6.0)(webpack-dev-server@5.0.4(webpack@5.94.0(esbuild@0.23.0)))(webpack@5.94.0(esbuild@0.23.0))': dependencies: '@angular-devkit/architect': 0.1802.12(chokidar@3.6.0) rxjs: 7.8.1 webpack: 5.94.0(esbuild@0.23.0) - webpack-dev-server: 5.0.4(webpack@5.94.0) + webpack-dev-server: 5.0.4(webpack@5.94.0(esbuild@0.23.0)) transitivePeerDependencies: - chokidar @@ -23932,7 +23932,7 @@ snapshots: webidl-conversions@7.0.0: {} - webpack-dev-middleware@7.4.2(webpack@5.94.0): + webpack-dev-middleware@7.4.2(webpack@5.94.0(esbuild@0.23.0)): dependencies: colorette: 2.0.20 memfs: 4.9.3 @@ -23943,7 +23943,7 @@ snapshots: optionalDependencies: webpack: 5.94.0(esbuild@0.23.0) - webpack-dev-server@5.0.4(webpack@5.94.0): + webpack-dev-server@5.0.4(webpack@5.94.0(esbuild@0.23.0)): dependencies: '@types/bonjour': 3.5.13 '@types/connect-history-api-fallback': 1.5.4 @@ -23973,7 +23973,7 @@ snapshots: serve-index: 1.9.1 sockjs: 0.3.24 spdy: 4.0.2 - webpack-dev-middleware: 7.4.2(webpack@5.94.0) + webpack-dev-middleware: 7.4.2(webpack@5.94.0(esbuild@0.23.0)) ws: 8.17.1 optionalDependencies: webpack: 5.94.0(esbuild@0.23.0)