Merge remote-tracking branch 'origin/lab' into lab

GovTechSG · Dec 18, 2024 · d6d031f · d6d031f
2 parents f04612a + 2ed2b38
commit d6d031f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/src/components/Tab/sgds-tab-panel.ts b/src/components/Tab/sgds-tab-panel.ts
@@ -37,9 +37,9 @@ export class SgdsTabPanel extends SgdsElement {
     return html`
       <slot
         class=${classMap({
-          "tab-panel": true,
-          "tab-panel--active": this.active
-        })}
+      "tab-panel": true,
+      "tab-panel--active": this.active
+    })}
       ></slot>
     `;
   }

diff --git a/src/components/Tab/tab-group.css b/src/components/Tab/tab-group.css
@@ -1,7 +1,12 @@
 .tab-group {
   display: flex;
   flex-direction: column;
+  gap: var(--sgds-gap-xl);
+}
 
+.tab-group__nav {
+  display: flex;
+  flex-direction: row;
 }
 
 .tab-group__content {
@@ -12,6 +17,10 @@
   flex-direction: row;
 }
 
-:host([orientation="vertical"]) .tab-group__content {
-  flex: 1;
+:host([orientation="vertical"]) .tab-group__nav {
+  flex-direction: column;
+}
+
+:host([variant="solid"]) .tab-group__nav {
+  gap: var(--sgds-gap-xs);
 }
diff --git a/src/components/Tab/tab-panel.css b/src/components/Tab/tab-panel.css
@@ -1,11 +1,7 @@
-:host {
-  --tab-panel-padding-y: 1rem;
-  display: block;
-}
 .tab-panel {
   display: block;
-  padding: var(--tab-panel-padding-y) 0;
 }
+
 .tab-panel:not(.tab-panel--active) {
   display: none;
-}
+}