Updating Tab to fit Figma (#2862)

Co-authored-by: édouard wautier <[email protected]>
dust-tt · Dec 13, 2023 · 1b99ff6 · 1b99ff6
1 parent 929d776
commit 1b99ff6
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 11 deletions.
diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
diff --git 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
@@ -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
@@ -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,
       },