fix: vertical tabs style fix

Author: seanwuapps

packages/core/package.json

@@ -48,7 +48,7 @@
     "@commitlint/config-conventional": "^13.2.0",
     "@release-it/conventional-changelog": "^5.1.1",
     "@stencil-community/postcss": "^2.2.0",
-    "@stencil/core": "^4.12.2",
+    "@stencil/core": "^4.12.3",
     "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.4",
     "@stencil/vue-output-target": "^0.8.6",

packages/core/src/components/go-tabs/go-tablist.tsx

@@ -127,8 +127,6 @@ export class GoTablist {
     this.deactivateTabs();
     const tabId = tabEl.getAttribute('id');
 
-    this.activeTabRect = tabEl.getBoundingClientRect();
-
     this.tabsState = this.tabsState.map((tab, i) => {
       if (tab.tabId === tabId) {
         this.activeIndex = i;
@@ -150,6 +148,10 @@ export class GoTablist {
       index: this.activeIndex,
       tabEl,
     });
+
+    requestAnimationFrame(() => {
+      this.activeTabRect = tabEl.getBoundingClientRect();
+    });
   }
 
   // When a tab is clicked, activateTab is fired to activate it

packages/core/src/components/go-tabs/go-tabs.scss

@@ -0,0 +1,41 @@
+go-tabs {
+  --tab-padding: 0.75rem 1.25rem;
+  --tab-bg-color: transparent;
+  --tab-hover-bg-color: var(--go-color-neutral-200);
+  --tab-text-color: var(--go-color-neutral-700);
+  --tab-focus-color: var(--go-color-primary-600);
+  --tab-active-color: var(--go-color-primary-800);
+  --tab-active-bg-color: transparent;
+  --tab-border-width: 0.2em;
+  --tab-active-indicator-color: var(--tab-active-color);
+  --tabs-active-indicator-width: 0;
+  --tabs-active-indicator-height: 0.2em;
+  --tabs-active-indicator-color: var(--tab-active-color);
+  --tabs-vertical-tablist-max-width: 25%;
+  --tabs-tablist-gap: 1rem;
+
+  &.vertical {
+    display: grid;
+    grid-template-columns: minmax(min-content, var(--tabs-vertical-tablist-max-width)) 1fr;
+    gap: var(--tabs-tablist-gap);
+    [role='tablist'] {
+      .tabs-active-indicator-track {
+        width: auto;
+        top: 0;
+        left: auto;
+        .tabs-active-indicator {
+          --tabs-active-indicator-width: 4px;
+          transform: translateY(var(--tabs-active-indicator-top));
+        }
+      }
+    }
+    [role='tab'] {
+      text-align: start;
+      white-space: normal;
+      &:focus-visible {
+        border-top-color: transparent;
+        border-left-color: var(--tab-focus-color);
+      }
+    }
+  }
+}

packages/core/src/index.html

@@ -29,7 +29,7 @@
 
     <!-- keep this sandbox empty before pushing changes -->
     <div class="container">
-      <go-tabs fill>
+      <go-tabs fill vertical>
         <go-tab label="Icon tab" icon-position="before">
           <go-icon name="home" slot="icon"></go-icon>
           <p>