From 0622f6a2dd07ddc6f5d89bf9f56a9fd9c528a4a6 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Fri, 12 Jul 2024 13:59:03 +0200
Subject: [PATCH] feat(GlTabs): Add animation

---
 src/components/base/tabs/tabs/tabs.scss | 40 +++++++++++++++++++++----
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/components/base/tabs/tabs/tabs.scss b/src/components/base/tabs/tabs/tabs.scss
index b19e7c0c00..d75f46d149 100644
--- a/src/components/base/tabs/tabs/tabs.scss
+++ b/src/components/base/tabs/tabs/tabs.scss
@@ -6,6 +6,7 @@
 }
 
 .gl-tab-nav-item {
+  position: relative;
   @include gl-text-gray-900;
   @include gl-px-4;
   @include gl-py-5;
@@ -14,15 +15,37 @@
   @include gl-display-flex;
   @include gl-justify-content-center;
   @include gl-overflow-hidden;
+  transition: box-shadow $gl-transition-duration-medium $gl-easing-out-cubic,
+              border-radius $gl-transition-duration-fast $gl-easing-out-cubic;
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    border-bottom: $gl-border-size-2 solid transparent;
+    translate: 0 $gl-border-size-2;
+    transition: border-bottom $gl-transition-duration-medium $gl-easing-out-cubic,
+                translate $gl-transition-duration-medium $gl-easing-out-cubic;
+  }
 
-  transition: box-shadow 100ms linear;
+  @media (prefers-reduced-motion: reduce) {
+    &, &::before {
+      transition-duration: .01ms;
+    }
+  }
 
   &:hover {
     @include gl-text-gray-900;
+  }
 
-    &:not(.gl-tab-nav-item-active) {
-      @include gl-inset-border-b-2-gray-200;
-    }
+  &:hover:not(.gl-tab-nav-item-active)::before {
+    border-bottom-color: $gray-200;
+    translate: 0;
+  }
+
+  &:focus {
+    border-radius: $gl-border-radius-base;
   }
 
   &.disabled {
@@ -51,13 +74,18 @@
 .gl-tab-nav-item-active {
   @include gl-font-weight-bold;
   @include gl-text-gray-900;
-  @include gl-inset-border-b-2-blue-500;
+  z-index: 1;
 
   &:active,
   &:focus,
   &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $blue-500, $focus-ring;
     @include gl-outline-none;
+    @include gl-focus;
+  }
+
+  &::before {
+    border-bottom-color: $blue-500;
+    translate: 0;
   }
 }
 
-- 
GitLab