Tabs: refresh selection rectangle when items update

liquity · Apr 27, 2024 · 06ba3a1 · 06ba3a1
1 parent 0fd8907
commit 06ba3a1
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/frontend/uikit-gallery/src/Tabs/1. Default.fixture.tsx b/frontend/uikit-gallery/src/Tabs/1. Default.fixture.tsx
@@ -1,16 +1,22 @@
 "use client";
 
 import { Tabs } from "@liquity2/uikit";
-import { useState } from "react";
-
-const items = [
-  { label: "Deposit", panelId: "deposit", tabId: "deposit" },
-  { label: "Withdraw", panelId: "withdraw", tabId: "withdraw" },
-  { label: "Claim Rewards", panelId: "claimRewards", tabId: "claimRewards" },
-];
+import { useEffect, useState } from "react";
+import { useFixtureInput } from "react-cosmos/client";
 
 export default function Fixture() {
   const [selected, setSelected] = useState(0);
+  const [tabs] = useFixtureInput("tabs", 3);
+  const items = Array.from(
+    { length: Math.max(2, tabs) },
+    (_, i) => `Item ${i + 1}`,
+  );
+
+  const [idPrefix, setIdPrefix] = useState("");
+  useEffect(() => {
+    setIdPrefix(String(Date.now()));
+  }, [tabs]);
+
   return (
     <div
       style={{
@@ -21,7 +27,11 @@ export default function Fixture() {
       }}
     >
       <Tabs
-        items={items}
+        items={items.map((label, index) => ({
+          label,
+          panelId: `${idPrefix}${index}-panel`,
+          tabId: `${idPrefix}${index}-tab`,
+        }))}
         onSelect={setSelected}
         selected={selected}
       />

diff --git a/frontend/uikit/src/Tabs/Tabs.tsx b/frontend/uikit/src/Tabs/Tabs.tsx
@@ -77,13 +77,15 @@ export function Tabs({
   }, [
     selected,
     width, // update on container width change too
+    items,
   ]);
 
   return (
     <div
       ref={container}
       role="tablist"
       className={css({
+        overflow: "hidden",
         display: "flex",
         width: "100%",
         height: 44,
@@ -171,10 +173,13 @@ function Tab({
         alignItems: "center",
         justifyContent: "center",
         height: "100%",
-        padding: 0,
+        padding: "0 16px",
         fontSize: 16,
         color: "interactive",
         cursor: "pointer",
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
+        overflow: "hidden",
         _active: {
           translate: "0 1px",
         },