feat!: Make active Tab look less like a primary Button (#1773)

Co-authored-by: Aram <[email protected]>

packages/css/src/components/tabs/tabs.scss

@@ -20,15 +20,15 @@
 }
 
 .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;
 }
 
 .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;
+}

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>
     )
   },

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}" },

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>
   )),