Prevent bold text in selected tab from affecting layout

Amsterdam · Dec 10, 2024 · 7294df5 · 7294df5
1 parent 4ff5a73
commit 7294df5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss
@@ -28,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);
@@ -62,3 +63,17 @@
     }
   }
 }
+
+.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 mega menu is opened
+// 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
@@ -33,7 +33,12 @@ 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 aria-hidden="true" className="ams-tabs__button-label">
+          {children}
+        </span>
       </button>
     )
   },