From 08ada1424072b95c1690706198434615b8913f4c Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Wed, 1 May 2024 10:05:25 +0200
Subject: [PATCH] fix(sbb-tab-group): avoid unwanted margin block spaces

---
 src/components/container/container/container.scss  | 11 ++---------
 src/components/core/styles/mixins/helpers.scss     | 11 +++++++++++
 src/components/tabs/tab-group/tab-group.scss       |  6 ++++++
 src/components/tabs/tab-group/tab-group.stories.ts |  4 +++-
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/container/container/container.scss b/src/components/container/container/container.scss
index 8041469ca0..237a9848c2 100644
--- a/src/components/container/container/container.scss
+++ b/src/components/container/container/container.scss
@@ -16,6 +16,8 @@
 }
 
 .sbb-container {
+  @include sbb.ignore-children-margin;
+
   background-color: var(--sbb-container-background-color);
 
   // In order to support nested sbb-containers (e.g. if used in an overlay), we need to explicitly set background color to transparent.
@@ -25,15 +27,6 @@
     background-color: transparent;
   }
 
-  // Placing content before and after the container stops the margin of inner elements from overflowing
-  &::after,
-  &::before {
-    content: '\a0';
-    display: block;
-    visibility: hidden;
-    height: 0;
-  }
-
   :host(:not([expanded])) & {
     @include sbb.page-spacing;
   }
diff --git a/src/components/core/styles/mixins/helpers.scss b/src/components/core/styles/mixins/helpers.scss
index 04fc25246b..ea8049f779 100644
--- a/src/components/core/styles/mixins/helpers.scss
+++ b/src/components/core/styles/mixins/helpers.scss
@@ -33,6 +33,17 @@
   }
 }
 
+// Placing content before and after the container stops the margin of inner elements from overflowing
+@mixin ignore-children-margin {
+  &::after,
+  &::before {
+    content: '\a0';
+    display: block;
+    visibility: hidden;
+    height: 0;
+  }
+}
+
 @mixin invisible-container-overlay {
   position: absolute;
   opacity: 0;
diff --git a/src/components/tabs/tab-group/tab-group.scss b/src/components/tabs/tab-group/tab-group.scss
index ce37e4df53..e90fbefb99 100644
--- a/src/components/tabs/tab-group/tab-group.scss
+++ b/src/components/tabs/tab-group/tab-group.scss
@@ -18,6 +18,8 @@
 }
 
 .tab-content {
+  @include sbb.ignore-children-margin;
+
   margin-block-start: var(--sbb-spacing-responsive-m);
   transition: height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing);
 
@@ -26,6 +28,10 @@
     opacity: 0;
     height: 0;
     overflow: hidden;
+
+    // If e.g. a block link with an absolute positioned element is slotted, there would be an visible space
+    // below the tab content. Setting position:relative removes the unwanted whitespace.
+    position: relative;
   }
 
   ::slotted(*[active]) {
diff --git a/src/components/tabs/tab-group/tab-group.stories.ts b/src/components/tabs/tab-group/tab-group.stories.ts
index 3aea79340f..beac4ec72c 100644
--- a/src/components/tabs/tab-group/tab-group.stories.ts
+++ b/src/components/tabs/tab-group/tab-group.stories.ts
@@ -16,8 +16,9 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js';
 import readme from './readme.md?raw';
 import { SbbTabGroupElement } from './tab-group.js';
 
-import '../tab-title.js';
+import '../../link.js';
 import '../../title.js';
+import '../tab-title.js';
 
 const firstTabTitle = (label: string, args: Args): TemplateResult => html`
   <sbb-tab-title ${sbbSpread(args)}>${label}</sbb-tab-title>
@@ -41,6 +42,7 @@ const tabPanelTwo = (): TemplateResult => html`
     Diam maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean euismod
     elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus
     urna neque viverra justo nec.
+    <sbb-block-link target="_blank" href="https://www.sbb.ch">Visit sbb.ch</sbb-block-link>
   </section>
 `;