From fa2704a9d3f49657463812ed8657d97be87e2a61 Mon Sep 17 00:00:00 2001
From: Bruno Henriques <zettca@users.noreply.github.com>
Date: Thu, 9 Jan 2025 12:25:07 +0000
Subject: [PATCH] fix(Tabs): support for scrollable tabs

---
 apps/docs/next-env.d.ts                 |  2 +-
 apps/docs/src/pages/components/tabs.mdx | 65 +++++++++++++++++--------
 packages/core/src/Tabs/Tabs.stories.tsx | 55 +++++++++++++++++----
 packages/core/src/Tabs/Tabs.styles.tsx  |  5 +-
 4 files changed, 93 insertions(+), 34 deletions(-)

diff --git a/apps/docs/next-env.d.ts b/apps/docs/next-env.d.ts
index a4a7b3f5cf..52e831b434 100644
--- a/apps/docs/next-env.d.ts
+++ b/apps/docs/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/apps/docs/src/pages/components/tabs.mdx b/apps/docs/src/pages/components/tabs.mdx
index 65369792bb..34852b3545 100644
--- a/apps/docs/src/pages/components/tabs.mdx
+++ b/apps/docs/src/pages/components/tabs.mdx
@@ -17,6 +17,9 @@ export const getStaticProps = async ({ params }) => {
 
 ### Usage
 
+The `HvTabs` is controlled via the `value` and `onChange` props.
+The `value` prop contains the `value` of the `HvTab`, which is its index by default.
+
 ```tsx live
 import { useState } from "react";
 
@@ -30,9 +33,42 @@ export default function Demo() {
         <HvTab label="Page 2" />
         <HvTab label="Page 3" />
       </HvTabs>
-      <HvTypography
-        style={{ padding: 16 }}
-      >{`Page ${value + 1} content`}</HvTypography>
+      <HvTypography className="p-sm">
+        {`Page ${value + 1} content`}
+      </HvTypography>
+    </div>
+  );
+}
+```
+
+### Variants
+
+The tabs supports `fullWidth` and `scrollable` variants, based on the [MUI Tabs](https://mui.com/material-ui/api/tabs/#tabs-prop-variant) component.
+
+```tsx live
+import { useState } from "react";
+
+export default function Demo() {
+  const [value, setValue] = useState(0);
+
+  const handleChange: HvTabsProps["onChange"] = (evt, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <div className="grid gap-xs w-full">
+      <HvTabs variant="fullWidth" value={value}>
+        <HvTab label="Clickable tab 1" />
+        <HvTab label="Clickable tab 2" />
+        <HvTab label="Clickable tab 3" />
+      </HvTabs>
+      <div className="max-w-400px">
+        <HvTabs variant="scrollable" scrollButtons="auto" value={value}>
+          {[...Array(12).keys()].map((i) => (
+            <HvTab key={i} label={`Clickable tab ${i + 1}`} />
+          ))}
+        </HvTabs>
+      </div>
     </div>
   );
 }
@@ -51,19 +87,15 @@ export default function Demo() {
   const [showLabels, setShowLabels] = useState(true);
   const [iconPosition, setIconPosition] = useState("start");
 
-  const handleChange: HvTabsProps["onChange"] = (_, newValue) => {
-    setValue(newValue);
-  };
-
   return (
-    <div className="flex flex-col w-full gap-4">
-      <div className="flex gap-2">
+    <div className="flex flex-col w-full gap-md">
+      <div className="flex gap-sm">
         <HvCheckBox
           checked={showLabels}
           onChange={() => setShowLabels((p) => !p)}
           label="Show labels"
         />
-        <div className="flex gap-2 items-center">
+        <div className="flex gap-sm items-center">
           <HvLabel>Icon position:</HvLabel>
           <HvSelect
             value={iconPosition}
@@ -78,7 +110,7 @@ export default function Demo() {
           </HvSelect>
         </div>
       </div>
-      <HvTabs value={value} onChange={handleChange}>
+      <HvTabs value={value} onChange={(_, val) => setValue(val)}>
         {tabs.map((tab, index) => (
           <HvTab
             key={index}
@@ -96,17 +128,14 @@ const tabs = [
   {
     label: "Clickable tab 1",
     icon: <Alert />,
-    iconPosition: "start",
   },
   {
     label: "Clickable tab 2",
     icon: <Reload />,
-    iconPosition: "start",
   },
   {
     label: "Clickable tab 3",
     icon: <Calendar />,
-    iconPosition: "start",
   },
 ];
 ```
@@ -164,13 +193,9 @@ import { useState } from "react";
 export default function Demo() {
   const [value, setValue] = useState(0);
 
-  const handleChange: HvTabsProps["onChange"] = (_, newValue) => {
-    setValue(newValue);
-  };
-
   return (
-    <div className="flex flex-col w-full gap-4">
-      <HvTabs value={value} onChange={handleChange} floating>
+    <div className="flex flex-col w-full gap-md">
+      <HvTabs floating value={value} onChange={(_, val) => setValue(val)}>
         <HvTab label="Videos" icon={<PlayVideo />} iconPosition="start" />
         <HvTab label="Photos" icon={<Picture />} iconPosition="start" />
         <HvTab label="Text files" icon={<DocWord />} iconPosition="start" />
diff --git a/packages/core/src/Tabs/Tabs.stories.tsx b/packages/core/src/Tabs/Tabs.stories.tsx
index 0ae5096c2c..f1fa5ac277 100644
--- a/packages/core/src/Tabs/Tabs.stories.tsx
+++ b/packages/core/src/Tabs/Tabs.stories.tsx
@@ -72,6 +72,34 @@ export const FullWidth: StoryObj<HvTabsProps> = {
   },
 };
 
+export const Scrollable: StoryObj<HvTabsProps> = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Tabs with scroll buttons.",
+      },
+    },
+  },
+  render: () => {
+    const [value, setValue] = useState(0);
+
+    return (
+      <div className="max-w-400px">
+        <HvTabs
+          variant="scrollable"
+          scrollButtons="auto"
+          value={value}
+          onChange={(_, newValue) => setValue(newValue)}
+        >
+          {[...Array(12).keys()].map((i) => (
+            <HvTab key={i} label={`Clickable tab ${i + 1}`} />
+          ))}
+        </HvTabs>
+      </div>
+    );
+  },
+};
+
 export const ContentChanging: StoryObj<HvTabsProps> = {
   parameters: {
     docs: {
@@ -281,15 +309,24 @@ export const Test: StoryObj = {
           iconPosition="top"
         />
       </HvTabs>
-      <HvTabs value={0}>
-        <HvTab icon={<Alert />} aria-label="Alert" />
-        <HvTab icon={<Reload />} aria-label="Reload" />
-        <HvTab disabled icon={<Calendar />} aria-label="Calendar" />
-      </HvTabs>
-      <HvTabs value={0}>
-        <HvTab label={<HvBadge showCount count={2} text="Track events" />} />
-        <HvTab label={<HvBadge count={1} text="Vehicle events" />} />
-      </HvTabs>
+      <div className="max-w-500px">
+        <HvTabs variant="scrollable" scrollButtons="auto" value={0}>
+          {[...Array(12).keys()].map((i) => (
+            <HvTab key={i} label={`Clickable tab ${i + 1}`} />
+          ))}
+        </HvTabs>
+      </div>
+      <div className="flex flex-wrap gap-xs">
+        <HvTabs value={0}>
+          <HvTab icon={<Alert />} aria-label="Alert" />
+          <HvTab icon={<Reload />} aria-label="Reload" />
+          <HvTab disabled icon={<Calendar />} aria-label="Calendar" />
+        </HvTabs>
+        <HvTabs value={0}>
+          <HvTab label={<HvBadge showCount count={2} text="Track events" />} />
+          <HvTab label={<HvBadge count={1} text="Vehicle events" />} />
+        </HvTabs>
+      </div>
     </HvSimpleGrid>
   ),
 };
diff --git a/packages/core/src/Tabs/Tabs.styles.tsx b/packages/core/src/Tabs/Tabs.styles.tsx
index f2f482ba85..e16ff10573 100644
--- a/packages/core/src/Tabs/Tabs.styles.tsx
+++ b/packages/core/src/Tabs/Tabs.styles.tsx
@@ -3,12 +3,9 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 export const { staticClasses, useClasses } = createClasses("HvTabs", {
   root: {
     minHeight: 0,
-    overflow: "visible",
   },
   indicator: {},
-  scroller: {
-    overflow: "visible !important",
-  },
+  scroller: {},
   flexContainer: {
     marginLeft: "3px",
   },