chore(Tabs): migrate to CSS Modules with visual regression baseline

[DreaminDani]

Commits

• test(Tabs): add visual regression baseline before CSS Modules migration — adds stories (Tabs + FullWidthTabs, including a fixed-width-trigger story), a Playwright spec, and fresh PNG snapshots that capture the current rendering.
• chore(Tabs): migrate styling from styled-components to CSS Modules — replaces styled-components with .module.css + cn. DOM-identical, byte-for-byte visual parity verified.

Notes

• Tabs.Trigger, Tabs.Content, and Tabs.TriggersList are now forwardRef wrappers around the Radix primitives, preserving className passthrough (the DateTimeRangePicker consumer wraps Tabs.TriggersList via styled(), which relies on className forwarding).
• FullWidthTabs is a function component that forwards its className onto Tabs. Its Trigger keeps the optional width prop, emitted as an inline custom property so the fixed-width vs flex-grow branch matches the original exactly.
• The original styled-components had two separate active+hover rules ([data-state='active']:hover setting font, and :hover[data-state='active'] setting border-bottom); stylelint normalizes these to one selector, so they are merged into a single rule with identical specificity and result.

Verification

• yarn test:visual tests/display/tabs.spec.ts passes with zero snapshot regenerations
• yarn test Tabs, yarn lint:css, yarn lint:code, yarn format, yarn build all green
• grep -r 'styled-components' src/components/Tabs/ empty

---

Note

Low Risk
Styling-only refactor with explicit visual parity checks; main integration risk is subtle CSS or className forwarding regressions for styled wrappers.

Overview
Tabs and FullWidthTabs move off styled-components onto Tabs.module.css, using design tokens as CSS variables and cn() for class composition. Radix subcomponents (Trigger, Content, TriggersList) are now forwardRef wrappers so className still merges—needed for consumers like DateTimeRangePicker that wrap Tabs.TriggersList with styled().

FullWidthTabs becomes a thin wrapper around Tabs with module classes; optional trigger width is applied via --full-width-tabs-trigger-width and fixed vs grow modifiers instead of styled-component props.

Storybook gains harness decorators, shared story children, and extra variants (Default, FirstSelected, FixedWidthTrigger). A new Playwright spec (tests/display/tabs.spec.ts) snapshots light/dark layouts plus hover, focus, click, and keyboard behavior. Patch changeset documents no intended behavior change.

^{Reviewed by Cursor Bugbot for commit 35090f6. Bugbot is set up for automated code reviews on this repo. Configure here.}

[changeset-bot]

🦋 Changeset detected

Latest commit: 35090f6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clickhouse/click-ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Pull request overview

Migrates the Tabs and FullWidthTabs components from styled-components to CSS Modules while adding Storybook + Playwright visual-regression coverage to lock in rendering parity.

Changes:

• Added visual regression snapshots and a Playwright spec for Tabs variants + interactive states.
• Replaced styled-components styles with Tabs.module.css and cn()-based class composition.
• Updated Storybook stories to include fixed-size harnesses and additional variants (including fixed-width trigger coverage).

Reviewed changes

Copilot reviewed 6 out of 18 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
tests/display/tabs.spec.ts	Adds Tabs/FullWidthTabs visual regression + basic interaction coverage via Playwright screenshots.
src/components/Tabs/Tabs.tsx	Reworks Tabs primitives as forwardRef wrappers and swaps styling to CSS Modules + cn().
src/components/Tabs/Tabs.stories.tsx	Adds a consistent harness decorator and new story variants used by visual tests.
src/components/Tabs/Tabs.module.css	Introduces CSS Module styles equivalent to the prior styled-components rules.
src/components/Tabs/FullWidthTabs.stories.tsx	Adds harness decorator and new variants, including a fixed-width trigger scenario.
.changeset/migrate-tabs-to-css-modules.md	Records the migration as a patch-level changeset.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[workflow-authentication-public]

Storybook Preview Deployed

✅ Preview URL: https://click-rls9aupac-clickhouse.vercel.app

Built from commit: 6de8709c5879daddcebe4e0e4833b74e8d1848d3