From 2ec010286dd64ecebefa040a0ab18cf192542d0f Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 11 Dec 2024 10:21:47 +0100
Subject: [PATCH] feat!: Make active Tab look less like a primary Button
 (#1773)

Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com>
---
 packages/css/src/components/tabs/tabs.scss    | 23 +++++++++++++++----
 packages/react/src/Tabs/TabsButton.tsx        |  5 +++-
 .../src/components/ams/tabs.tokens.json       | 10 ++++----
 .../src/components/Tabs/Tabs.stories.tsx      |  4 +++-
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss
index 4c51d07bf2..3c4b8f10b2 100644
--- a/packages/css/src/components/tabs/tabs.scss
+++ b/packages/css/src/components/tabs/tabs.scss
@@ -20,8 +20,7 @@
 }
 
 .ams-tabs__list {
-  background-color: var(--ams-tabs-list-background-color);
-  border-block-end: var(--ams-tabs-list-border-block-end);
+  box-shadow: var(--ams-tabs-list-box-shadow);
   display: flex;
   overflow-x: auto;
 }
@@ -29,6 +28,7 @@
 .ams-tabs__button {
   color: var(--ams-tabs-button-color);
   cursor: var(--ams-tabs-button-cursor);
+  display: grid;
   font-family: var(--ams-tabs-button-font-family);
   font-size: var(--ams-tabs-button-font-size);
   font-weight: var(--ams-tabs-button-font-weight);
@@ -41,7 +41,7 @@
 
   &:disabled {
     color: var(--ams-tabs-button-disabled-color);
-    cursor: var(--ams-tab-button-disabled-cursor);
+    cursor: var(--ams-tabs-button-disabled-cursor);
 
     @media (forced-colors: active) {
       color: GrayText;
@@ -54,11 +54,26 @@
   }
 
   &[aria-selected="true"] {
-    background-color: var(--ams-tabs-button-selected-background-color);
+    box-shadow: var(--ams-tabs-button-selected-box-shadow);
     color: var(--ams-tabs-button-selected-color);
+    font-weight: var(--ams-tabs-button-selected-font-weight);
 
     @media (forced-colors: active) {
       background-color: SelectedItem;
     }
   }
 }
+
+.ams-tabs__button-label,
+.ams-tabs__button-label-hidden {
+  grid-area: 1 / 1;
+}
+
+// This hidden label is used to prevent a layout shift when the tab is selected
+// and the button text becomes bold.
+.ams-tabs__button-label-hidden {
+  font-weight: var(--ams-tabs-button-selected-font-weight);
+  pointer-events: none;
+  user-select: none;
+  visibility: hidden;
+}
diff --git a/packages/react/src/Tabs/TabsButton.tsx b/packages/react/src/Tabs/TabsButton.tsx
index 9c41b9d214..d73f15c3ef 100644
--- a/packages/react/src/Tabs/TabsButton.tsx
+++ b/packages/react/src/Tabs/TabsButton.tsx
@@ -33,7 +33,10 @@ export const TabsButton = forwardRef(
         role="tab"
         tabIndex={activeTab === tab ? 0 : -1}
       >
-        {children}
+        <span aria-hidden="true" className="ams-tabs__button-label-hidden">
+          {children}
+        </span>
+        <span className="ams-tabs__button-label">{children}</span>
       </button>
     )
   },
diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json
index 042814af09..06681aaace 100644
--- a/proprietary/tokens/src/components/ams/tabs.tokens.json
+++ b/proprietary/tokens/src/components/ams/tabs.tokens.json
@@ -3,8 +3,7 @@
     "tabs": {
       "gap": { "value": "{ams.space.md}" },
       "list": {
-        "background-color": { "value": "{ams.brand.color.neutral.0}" },
-        "border-block-end": { "value": "{ams.border.width.md} solid {ams.brand.color.blue.60}" }
+        "box-shadow": { "value": "inset 0 calc({ams.border.width.md} * -1) {ams.brand.color.neutral.20}" }
       },
       "button": {
         "color": { "value": "{ams.brand.color.blue.60}" },
@@ -18,11 +17,12 @@
         "padding-inline": { "value": "{ams.space.md}" },
         "hover": {
           "color": { "value": "{ams.brand.color.blue.80}" },
-          "box-shadow": { "value": "inset 0 -0.125rem 0 0 {ams.brand.color.blue.80}" }
+          "box-shadow": { "value": "inset 0 calc({ams.border.width.md} * -1) {ams.brand.color.blue.80}" }
         },
         "selected": {
-          "background-color": { "value": "{ams.brand.color.blue.60}" },
-          "color": { "value": "{ams.brand.color.neutral.0}" }
+          "box-shadow": { "value": "inset 0 calc({ams.border.width.xl} * -1) {ams.brand.color.blue.60}" },
+          "color": { "value": "{ams.brand.color.blue.60}" },
+          "font-weight": { "value": "{ams.text.font-weight.bold}" }
         },
         "disabled": {
           "color": { "value": "{ams.brand.color.neutral.60}" },
diff --git a/storybook/src/components/Tabs/Tabs.stories.tsx b/storybook/src/components/Tabs/Tabs.stories.tsx
index e7af747a91..d824b4a0de 100644
--- a/storybook/src/components/Tabs/Tabs.stories.tsx
+++ b/storybook/src/components/Tabs/Tabs.stories.tsx
@@ -54,7 +54,9 @@ const defaultTabs = [
   </Tabs.List>,
   tabsContent.map(({ id, body, label }) => (
     <Tabs.Panel key={label} tab={id}>
-      <Heading level={3}>{label}</Heading>
+      <Heading className="ams-mb--xs" level={3}>
+        {label}
+      </Heading>
       <Paragraph>{body}</Paragraph>
     </Tabs.Panel>
   )),