Add white-active tab background support

[arifulhoque7]

Expose an activeColor prop on TabsList to allow a white background for active tabs and wire it into the DOM for styling (data-active-color). Update TabsTrigger classnames to apply the white active background when activeColor="white". Also adjust storybook examples: replace fixed w-[400px] with w-100 and add a new ActiveWhiteBackground story demonstrating the white active background. Files changed: src/components/ui/tabs.tsx, src/components/ui/Tabs.stories.tsx.

Summary by CodeRabbit

• New Features
  • Added support for white active color styling on Tabs component, enabling customizable active tab indicators in both light and dark modes.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request adds styling customization to the Tabs component by introducing an optional activeColor prop. The component now supports a white active state, with corresponding CSS classes and a new Storybook story demonstrating the feature. Width utilities in existing stories were also updated.

Changes

Cohort / File(s)	Summary
Storybook Stories src/components/ui/Tabs.stories.tsx	Added new ActiveWhiteBackground story export demonstrating white active tab styling. Updated width utilities from w-[400px] to w-100 in two existing stories.
Tabs Component src/components/ui/tabs.tsx	Extended TabsList component with optional activeColor?: "white" prop wired to data-active-color attribute. Added conditional CSS classes using group data selectors to apply white background styling in light and dark modes when active state occurs.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A dash of white upon the tabs so bright,
Where colors dance and active states ignite,
New props flow freely like a morning's gleam,
Configuration made a coder's dream!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add white-active tab background support' accurately summarizes the main change in the PR, which adds an activeColor prop to enable white background styling for active tabs.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

src/components/ui/Tabs.stories.tsx (1)

43-58: Consider adding a background color to the wrapper for better visual contrast.

The rounded-lg wrapper div doesn't visually demonstrate the white active background feature effectively. Adding a subtle background color would help showcase the contrast of the white active state.

♻️ Suggested improvement for better visual demonstration

 export const ActiveWhiteBackground: Story = {
   render: () => (
-    <div className="rounded-lg">
+    <div className="rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
       <Tabs defaultValue="tab1" className="w-100">
         <TabsList activeColor="white">

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/ui/Tabs.stories.tsx` around lines 43 - 58, The wrapper for the
ActiveWhiteBackground story doesn't show contrast for the white active tab;
update the ActiveWhiteBackground story to give the outer div a subtle background
and some padding so the Tabs/TabsList white active state is visible (e.g., add a
bg-... and p-... utility to the div with className="rounded-lg"). Keep the rest
of the Tabs, TabsList, TabsTrigger and TabsContent unchanged.

src/components/ui/tabs.tsx (1)

51-51: Conditionally render data-active-color to avoid attribute with undefined value.

When activeColor is undefined, React will render data-active-color="" (empty string) on the DOM element. While this doesn't break functionality since the CSS selector specifically targets data-active-color=white, it's cleaner to conditionally spread the attribute.

♻️ Suggested improvement

     <TabsPrimitive.List
       data-slot="tabs-list"
       data-variant={variant}
-      data-active-color={activeColor}
+      {...(activeColor && { "data-active-color": activeColor })}
       className={cn(tabsListVariants({ variant }), className)}
       {...props}
     />

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/ui/tabs.tsx` at line 51, The JSX currently always renders
data-active-color={activeColor} which can produce an empty attribute when
activeColor is undefined; update the Tabs component JSX to conditionally add the
attribute (e.g. spread ...(activeColor ? { 'data-active-color': activeColor } :
{}) or use {...(activeColor && { 'data-active-color': activeColor })}) so
data-active-color is only present when activeColor has a value. Ensure you
change the element(s) where data-active-color={activeColor} is set.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/ui/Tabs.stories.tsx`:
- Around line 43-58: The wrapper for the ActiveWhiteBackground story doesn't
show contrast for the white active tab; update the ActiveWhiteBackground story
to give the outer div a subtle background and some padding so the Tabs/TabsList
white active state is visible (e.g., add a bg-... and p-... utility to the div
with className="rounded-lg"). Keep the rest of the Tabs, TabsList, TabsTrigger
and TabsContent unchanged.

In `@src/components/ui/tabs.tsx`:
- Line 51: The JSX currently always renders data-active-color={activeColor}
which can produce an empty attribute when activeColor is undefined; update the
Tabs component JSX to conditionally add the attribute (e.g. spread
...(activeColor ? { 'data-active-color': activeColor } : {}) or use
{...(activeColor && { 'data-active-color': activeColor })}) so data-active-color
is only present when activeColor has a value. Ensure you change the element(s)
where data-active-color={activeColor} is set.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4f614dc7-1307-4268-b8a7-daca36c1dc8d

📥 Commits

Reviewing files that changed from the base of the PR and between e045017 and 89e29eb.

📒 Files selected for processing (2)

• src/components/ui/Tabs.stories.tsx
• src/components/ui/tabs.tsx