From 1b99ff648f3caedf4e803c7094fb7a908b92e2c5 Mon Sep 17 00:00:00 2001
From: Edouard Wautier <4435185+Duncid@users.noreply.github.com>
Date: Wed, 13 Dec 2023 17:55:02 +0100
Subject: [PATCH] Updating Tab to fit Figma (#2862)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: édouard wautier <edouardwautier@Ed-Pro.local>
---
 sparkle/package-lock.json           |  4 +--
 sparkle/package.json                |  2 +-
 sparkle/src/components/Tab.tsx      |  5 ++--
 sparkle/src/stories/Tab.stories.tsx | 43 +++++++++++++++++++++++++----
 4 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
index 593668ca1e27..b2da2389e66c 100644
--- a/sparkle/package-lock.json
+++ b/sparkle/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.54",
+  "version": "0.2.55",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@dust-tt/sparkle",
-      "version": "0.2.54",
+      "version": "0.2.55",
       "license": "ISC",
       "dependencies": {
         "@headlessui/react": "^1.7.17"
diff --git a/sparkle/package.json b/sparkle/package.json
index 08ef07bdc58b..a2db65f6b799 100644
--- a/sparkle/package.json
+++ b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.54",
+  "version": "0.2.55",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",
diff --git a/sparkle/src/components/Tab.tsx b/sparkle/src/components/Tab.tsx
index 2f61923c36ea..b6d164dab7ce 100644
--- a/sparkle/src/components/Tab.tsx
+++ b/sparkle/src/components/Tab.tsx
@@ -80,9 +80,8 @@ export function Tab({ tabs, onTabClick, className = "" }: TabProps) {
         : iconClasses.default;
 
       const finalTabClasses = classNames(
-        "s-group s-justify-center s-flex s-text-sm s-font-semibold s-px-4 s-py-3 s-transition-all ease-out s-duration-400 s-whitespace-nowrap s-select-none s-border-b-2",
-        "s-group s-justify-center s-flex s-text-sm s-font-semibold s-py-3 s-transition-all ease-out s-duration-400 s-whitespace-nowrap s-select-none s-border-b-2",
-        tab.icon ? " s-pr-5 s-pl-4" : " s-px-5",
+        "s-group s-justify-center s-flex s-text-sm s-font-semibold s-py-2.5 s-transition-all ease-out s-duration-400 s-whitespace-nowrap s-select-none s-border-b-2",
+        tab.icon ? (tab.hideLabel ? "s-px-3" : "s-pr-3.5 s-pl-2.5") : "s-px-3",
         tabStateClasses.base,
         tabStateClasses.hover,
         tabStateClasses.dark.base,
diff --git a/sparkle/src/stories/Tab.stories.tsx b/sparkle/src/stories/Tab.stories.tsx
index 0c2ff10951e3..90cbbfee1781 100644
--- a/sparkle/src/stories/Tab.stories.tsx
+++ b/sparkle/src/stories/Tab.stories.tsx
@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
 
-import { Tab } from "../index_with_tw_base";
+import { RobotIcon, Tab } from "../index_with_tw_base";
 import {
   ChatBubbleBottomCenterTextIcon,
   Cog6ToothIcon,
-  TestTubeIcon,
 } from "../index_with_tw_base";
 
 const meta = {
@@ -15,19 +15,52 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+export const ButtonExamples = () => (
+  <div className="s-w-[320px]">
+    <Tab
+      tabs={[
+        {
+          label: "Conversations",
+          current: true,
+          icon: ChatBubbleBottomCenterTextIcon,
+          sizing: "hug",
+        },
+        {
+          label: "Assistants",
+          current: false,
+          icon: RobotIcon,
+          sizing: "hug",
+          hasSeparator: true,
+        },
+        {
+          label: "Settings",
+          hideLabel: true,
+          current: false,
+          icon: Cog6ToothIcon,
+        },
+      ]}
+      onTabClick={(tabName, event) => {
+        // add logic here
+        event.preventDefault();
+        console.log(tabName);
+      }}
+    />
+  </div>
+);
+
 export const TabNavigation: Story = {
   args: {
     tabs: [
       {
-        label: "Assistant",
+        label: "Conversations",
         current: true,
         icon: ChatBubbleBottomCenterTextIcon,
         sizing: "hug",
       },
       {
-        label: "Lab",
+        label: "Assistants",
         current: false,
-        icon: TestTubeIcon,
+        icon: RobotIcon,
         sizing: "hug",
         hasSeparator: true,
       },