From d242721b26096720bbcc5301a7eb2190893e2fb5 Mon Sep 17 00:00:00 2001
From: Shane Melton <smelton@bitwarden.com>
Date: Mon, 18 Jul 2022 14:39:35 -0700
Subject: [PATCH] Cherry pick finished/merged tabs component [CL-17] Tabs -
 Router (#2952)

---
 .../src/tabs/tab-group.component.html         |  2 +-
 .../components/src/tabs/tab-item.component.ts | 25 ++++++++-----------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/libs/components/src/tabs/tab-group.component.html b/libs/components/src/tabs/tab-group.component.html
index aa29a2f58af..ad681b168f0 100644
--- a/libs/components/src/tabs/tab-group.component.html
+++ b/libs/components/src/tabs/tab-group.component.html
@@ -1,6 +1,6 @@
 <div
   role="tablist"
-  class="tw-flex tw-flex-wrap tw-pl-0 tw-my-0 tw-leading-5 tw-text-left tw-box-border"
+  class="tw-inline-flex tw-flex-wrap tw-leading-5 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
 >
   <ng-content></ng-content>
 </div>
diff --git a/libs/components/src/tabs/tab-item.component.ts b/libs/components/src/tabs/tab-item.component.ts
index 749775e91bf..cda332e26d5 100644
--- a/libs/components/src/tabs/tab-item.component.ts
+++ b/libs/components/src/tabs/tab-item.component.ts
@@ -14,29 +14,23 @@ export class TabItemComponent {
       "tw-relative",
       "tw-py-2",
       "tw-px-4",
-      "tw-leading-5",
-      "tw-text-left",
       "tw-font-semibold",
-      "tw-bg-transparent",
       "tw-transition",
       "tw-rounded-t",
       "tw-border-0",
+      "tw-border-x",
       "tw-border-t-4",
-      "tw-border-t-transparent",
-      "tw-border-b",
-      "tw-border-b-secondary-300",
+      "tw-border-transparent",
       "tw-border-solid",
-      "tw-cursor-pointer",
-      "tw-box-border",
-      "tw-text-main",
+      "!tw-text-main",
       "hover:tw-underline",
-      "hover:tw-text-main",
+      "hover:!tw-text-main",
       "focus:tw-z-10",
       "focus:tw-outline-none",
       "focus:tw-ring-2",
       "focus:tw-ring-primary-700",
       "disabled:tw-bg-secondary-100",
-      "disabled:tw-text-muted",
+      "disabled:!tw-text-muted",
       "disabled:tw-no-underline",
       "disabled:tw-cursor-not-allowed",
     ];
@@ -44,16 +38,17 @@ export class TabItemComponent {
 
   get activeClassList(): string {
     return [
-      "tw-border-x",
+      "tw--mb-px",
       "tw-border-x-secondary-300",
       "tw-border-t-primary-500",
-      "tw-border-b-transparent",
+      "tw-border-b",
+      "tw-border-b-background",
       "tw-bg-background",
-      "tw-text-primary-500",
+      "!tw-text-primary-500",
       "hover:tw-border-t-primary-700",
       "hover:!tw-text-primary-700",
       "focus:tw-border-t-primary-700",
-      "focus:tw-text-primary-700",
+      "focus:!tw-text-primary-700",
     ].join(" ");
   }
 }