CHANGELOG.md

+# [87.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v87.0.0...v87.1.0) (2024-07-24)
+
+
+### Features
+
+* **GlTabs:** Add animation ([0622f6a](https://gitlab.com/gitlab-org/gitlab-ui/commit/0622f6a2dd07ddc6f5d89bf9f56a9fd9c528a4a6))
+
 # [87.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.15.0...v87.0.0) (2024-07-23)
 
 

package.json

 {
   "name": "@gitlab/ui",
-  "version": "87.0.0",
+  "version": "87.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

src/components/base/tabs/tabs/tabs.scss

@@ -3,6 +3,7 @@
 }
 
 .gl-tab-nav-item {
+  position: relative;
   @include gl-text-gray-900;
   @include gl-px-4;
   @include gl-py-5;
@@ -11,15 +12,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 {
@@ -48,13 +71,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;
   }
 }
 

src/tokens/build/css/tokens.css

@@ -417,7 +417,7 @@
   --gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); /* Used for the background of a neutral action in the hover state. */
   --gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); /* Used for the background of a neutral action in the default state. */
   --gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
-  --gl-text-color-success: var(--gl-color-green-600); /* Used for text indicating success or validity. */
+  --gl-text-color-success: var(--gl-color-green-600); /* Used for text indicating success, completion, approval, addition, or validity. */
   --gl-text-color-danger: var(--gl-color-red-600); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
   --gl-text-color-link: var(--gl-color-blue-700); /* Used for default text links. */
   --gl-text-color-heading: var(--gl-color-neutral-950); /* Used for headings level 1-6. */

src/tokens/build/css/tokens.dark.css

@@ -417,7 +417,7 @@
   --gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); /* Used for the background of a neutral action in the hover state. */
   --gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); /* Used for the background of a neutral action in the default state. */
   --gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
-  --gl-text-color-success: var(--gl-color-green-300); /* Used for text indicating success or validity. */
+  --gl-text-color-success: var(--gl-color-green-300); /* Used for text indicating success, completion, approval, addition, or validity. */
   --gl-text-color-danger: var(--gl-color-red-300); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
   --gl-text-color-link: var(--gl-color-blue-300); /* Used for default text links. */
   --gl-text-color-heading: var(--gl-color-neutral-0); /* Used for headings level 1-6. */

src/tokens/build/js/tokens.dark.js

@@ -613,5 +613,5 @@ export const GL_TEXT_COLOR_STRONG = '#fff'; // Used for text with the highest co
 export const GL_TEXT_COLOR_HEADING = '#fff'; // Used for headings level 1-6.
 export const GL_TEXT_COLOR_LINK = '#63a6e9'; // Used for default text links.
 export const GL_TEXT_COLOR_DANGER = '#f57f6c'; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
-export const GL_TEXT_COLOR_SUCCESS = '#52b87a'; // Used for text indicating success or validity.
+export const GL_TEXT_COLOR_SUCCESS = '#52b87a'; // Used for text indicating success, completion, approval, addition, or validity.
 export const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.

src/tokens/build/js/tokens.js

@@ -613,5 +613,5 @@ export const GL_TEXT_COLOR_STRONG = '#18171d'; // Used for text with the highest
 export const GL_TEXT_COLOR_HEADING = '#18171d'; // Used for headings level 1-6.
 export const GL_TEXT_COLOR_LINK = '#0b5cad'; // Used for default text links.
 export const GL_TEXT_COLOR_DANGER = '#c91c00'; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
-export const GL_TEXT_COLOR_SUCCESS = '#217645'; // Used for text indicating success or validity.
+export const GL_TEXT_COLOR_SUCCESS = '#217645'; // Used for text indicating success, completion, approval, addition, or validity.
 export const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.

src/tokens/build/json/tokens.dark.json

@@ -13585,7 +13585,7 @@
       "success": {
         "value": "#52b87a",
         "$type": "color",
-        "comment": "Used for text indicating success or validity.",
+        "comment": "Used for text indicating success, completion, approval, addition, or validity.",
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -13594,7 +13594,7 @@
             "dark": "{color.green.300}"
           },
           "$type": "color",
-          "comment": "Used for text indicating success or validity."
+          "comment": "Used for text indicating success, completion, approval, addition, or validity."
         },
         "name": "TEXT_COLOR_SUCCESS",
         "attributes": {},

src/tokens/build/json/tokens.json

@@ -13585,7 +13585,7 @@
       "success": {
         "value": "#217645",
         "$type": "color",
-        "comment": "Used for text indicating success or validity.",
+        "comment": "Used for text indicating success, completion, approval, addition, or validity.",
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -13594,7 +13594,7 @@
             "dark": "{color.green.300}"
           },
           "$type": "color",
-          "comment": "Used for text indicating success or validity."
+          "comment": "Used for text indicating success, completion, approval, addition, or validity."
         },
         "name": "TEXT_COLOR_SUCCESS",
         "attributes": {},

src/tokens/build/scss/_tokens.dark.scss

@@ -415,7 +415,7 @@ $gl-action-neutral-background-color-active: rgba(137, 136, 141, 0.16); // Used f
 $gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); // Used for the background of a neutral action in the hover state.
 $gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); // Used for the background of a neutral action in the default state.
 $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
-$gl-text-color-success: $gl-color-green-300; // Used for text indicating success or validity.
+$gl-text-color-success: $gl-color-green-300; // Used for text indicating success, completion, approval, addition, or validity.
 $gl-text-color-danger: $gl-color-red-300; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
 $gl-text-color-link: $gl-color-blue-300; // Used for default text links.
 $gl-text-color-heading: $gl-color-neutral-0; // Used for headings level 1-6.

src/tokens/build/scss/_tokens.scss

@@ -415,7 +415,7 @@ $gl-action-neutral-background-color-active: rgba(83, 81, 88, 0.24); // Used for
 $gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); // Used for the background of a neutral action in the hover state.
 $gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); // Used for the background of a neutral action in the default state.
 $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
-$gl-text-color-success: $gl-color-green-600; // Used for text indicating success or validity.
+$gl-text-color-success: $gl-color-green-600; // Used for text indicating success, completion, approval, addition, or validity.
 $gl-text-color-danger: $gl-color-red-600; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
 $gl-text-color-link: $gl-color-blue-700; // Used for default text links.
 $gl-text-color-heading: $gl-color-neutral-950; // Used for headings level 1-6.

src/tokens/text.tokens.json

@@ -82,7 +82,7 @@
           "dark": "{color.green.300}"
         },
         "$type": "color",
-        "$description": "Used for text indicating success or validity."
+        "$description": "Used for text indicating success, completion, approval, addition, or validity."
       },
       "disabled": {
         "$value": {