fix: tab-group

sbb-design-systems · Jul 10, 2024 · 550aea1 · 550aea1
1 parent d71cdc4
commit 550aea1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/src/elements/tabs/tab-group/tab-group.scss b/src/elements/tabs/tab-group/tab-group.scss
@@ -18,8 +18,6 @@
 }
 
 .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);
 

diff --git a/src/elements/tabs/tab-group/tab-group.visual.spec.ts b/src/elements/tabs/tab-group/tab-group.visual.spec.ts
@@ -91,5 +91,24 @@ describe(`sbb-tab-group`, () => {
         `);
       }),
     );
+
+    it(
+      'respect content margin',
+      visualDiffFocus.with(async (setup) => {
+        await setup.withFixture(html`
+          <sbb-tab-group initial-selected-index="0">
+            <sbb-tab-label>Tab title</sbb-tab-label>
+            <sbb-tab>
+              <article style="margin-block-start: 2rem">
+                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 ultrices dui sapien eget mi
+                proin sed libero enim sed faucibus turpis in eu mi bibendum neque egestas congue.
+              </article>
+            </sbb-tab>
+          </sbb-tab-group>
+        `);
+      }),
+    );
   });
 });
diff --git a/src/elements/tabs/tab/tab.scss b/src/elements/tabs/tab/tab.scss
@@ -5,4 +5,6 @@
 
 :host {
   display: block;
+
+  @include sbb.ignore-children-margin;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,4 +5,6 @@ @@
     :host {
       display: block;
+      @include sbb.ignore-children-margin;
     }