Adding scroll and fixing layout issues

dust-tt · Nov 5, 2024 · 363509a · 363509a
1 parent e97bb11
commit 363509a
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 14 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.293",
+  "version": "0.2.294",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

diff --git a/sparkle/src/components/Tabs.tsx b/sparkle/src/components/Tabs.tsx
@@ -1,6 +1,7 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React from "react";
 
+import { ScrollArea, ScrollBar } from "@sparkle/components/";
 import { Button } from "@sparkle/components/Button";
 import { LinkWrapperProps } from "@sparkle/components/LinkWrapper";
 import { cn } from "@sparkle/lib/utils";
@@ -17,15 +18,18 @@ const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
   TabsListProps
 >(({ className, isFullSize = true, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "s-inline-flex s-h-10 s-items-center s-gap-2 s-border-b s-border-separator",
-      isFullSize && "s-w-full",
-      className
-    )}
-    {...props}
-  />
+  <ScrollArea>
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(
+        "s-inline-flex s-h-12 s-gap-2 s-border-b s-border-separator",
+        isFullSize && "s-w-full",
+        className
+      )}
+      {...props}
+    />
+    <ScrollBar orientation="horizontal" className="s-hidden" />
+  </ScrollArea>
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
 
@@ -58,7 +62,8 @@ const TabsTrigger = React.forwardRef<
       <TabsPrimitive.Trigger
         ref={ref}
         className={cn(
-          "disabled:s-pointer-events-none data-[state=active]:s-shadow-inner-border",
+          "s-h-12",
+          "data-[state=active]:s-shadow-inner-border disabled:s-pointer-events-none",
           className
         )}
         disabled={disabled}

diff --git a/sparkle/src/stories/Tabs.stories.tsx b/sparkle/src/stories/Tabs.stories.tsx
@@ -17,7 +17,7 @@ const meta = {
 
 export default meta;
 
-export function TabExample() {
+export function Demo() {
   return (
     <div className="s-w-80">
       <Tabs defaultValue="account">
@@ -38,3 +38,26 @@ export function TabExample() {
     </div>
   );
 }
+
+export function Demo2() {
+  return (
+    <div className="s-w-[100%]">
+      <Tabs defaultValue="tab1">
+        <TabsList className="s-px-2">
+          <TabsTrigger value="tab1" label="Tab 1" icon={CommandIcon} />
+          <TabsTrigger value="tab2" label="Tab 2" icon={LightbulbIcon} />
+          <TabsTrigger value="tab3" label="Tab 3" icon={Cog6ToothIcon} />
+          <TabsTrigger value="tab4" label="Tab 4" icon={CommandIcon} />
+          <TabsTrigger value="tab5" label="Tab 5" icon={LightbulbIcon} />
+          <TabsTrigger value="tab6" label="Tab 6" icon={Cog6ToothIcon} />
+        </TabsList>
+        <TabsContent value="tab1">Content for Tab 1</TabsContent>
+        <TabsContent value="tab2">Content for Tab 2</TabsContent>
+        <TabsContent value="tab3">Content for Tab 3</TabsContent>
+        <TabsContent value="tab4">Content for Tab 4</TabsContent>
+        <TabsContent value="tab5">Content for Tab 5</TabsContent>
+        <TabsContent value="tab6">Content for Tab 6</TabsContent>
+      </Tabs>
+    </div>
+  );
+}