feat(): Add color change on hover for TabsTrigger #3

feat(): Add color change on hover for TabsTrigger
CQCL · Apr 3, 2024 · ffa841e · ffa841e
2 parents 9471fa2 + c1f9ce6
commit ffa841e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/shadcn/ui/tabs.tsx b/src/shadcn/ui/tabs.tsx
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow data-[state=inactive]:hover:brightness-50 data-[state=inactive]:dark:hover:brightness-150",
       className
     )}
     {...props}

diff --git a/stories/shadcn/tabs.stories.tsx b/stories/shadcn/tabs.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "src";
 
 const meta: Meta<typeof Tabs> = {
@@ -19,3 +19,7 @@ const meta: Meta<typeof Tabs> = {
 };
 
 export default meta;
+
+export const Default: StoryObj<typeof Tabs> = {
+  args: {},
+};