chore(DatePicker): migrate to CSS Modules with visual regression baseline#1144
Merged
Conversation
…igration Adds VR stories (fixed dates) and Playwright specs covering DatePicker, DateRangePicker, and DateTimeRangePicker across light and dark themes: closed inputs, open day/month/year calendars, range indicators, predefined panels, tabbed time inputs, and the error state. The clock is pinned so the "today" highlight is deterministic. Snapshots capture the current styled-components rendering. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replaces styled-components with per-file `.module.css` + `cn` across the whole DatePicker directory (Common, DatePicker, DateRangePicker, DateTimeRangePicker). DOM-identical, byte-for-byte visual parity verified against the baseline. Notes on the shared/extension chains: - The exported `DateTableCell` and `CalendarRenderer` keep working for the range files; the range `DateRangeTableCell` and `StyledCalendarRenderer` are plain wrappers that add a class. - Overrides that extend an already-migrated CSS-module base and touch a base-declared property (InputWrapper border/width, Panel align-items/background, Dropdown.Item min-height, Dropdown.Content overflow-y, IconButton ghost focus) use a specificity-boosted selector so the override wins deterministically rather than relying on bundle order. Container's `:where()` base needs no boost. - DatePicker uses raw `@radix-ui/react-popover`, so those wrappers apply their class directly with no cascade competition. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 8b33991 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds deterministic visual-regression coverage for the DatePicker family and migrates the DatePicker implementation from styled-components to CSS Modules while keeping rendering/behavior stable.
Changes:
- Added Playwright visual-regression specs (light/dark) + fixed-time clock pinning for DatePicker, DateRangePicker, and DateTimeRangePicker.
- Migrated DatePicker-related styling from styled-components to per-component
.module.cssfiles andcn()class composition. - Added Storybook VR fixture stories and a changeset for the styling migration.
Reviewed changes
Copilot reviewed 15 out of 41 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/display/datepicker.spec.ts | New VR spec for DatePicker (fixed clock, snapshots, basic a11y assertions). |
| tests/display/daterangepicker.spec.ts | New VR spec for DateRangePicker (range + predefined panel snapshots). |
| tests/display/datetimerangepicker.spec.ts | New VR spec for DateTimeRangePicker (tabbed + predefined + error snapshots). |
| src/components/DatePicker/DatePicker.tsx | Swaps styled-components wrappers for CSS Module classes on Radix Popover primitives. |
| src/components/DatePicker/DatePicker.module.css | CSS Module replacement for Popover trigger/content styling. |
| src/components/DatePicker/DatePicker.stories.tsx | Adds VR fixture story with fixed selected date. |
| src/components/DatePicker/DateRangePicker.tsx | Replaces styled-components with lightweight wrapper components applying CSS Module classes. |
| src/components/DatePicker/DateRangePicker.module.css | CSS Module replacement for DateRangePicker-specific layout/overrides. |
| src/components/DatePicker/DateRangePicker.stories.tsx | Adds VR fixture stories for plain + predefined date ranges. |
| src/components/DatePicker/DateTimeRangePicker.tsx | Replaces styled-components with wrapper components + CSS Modules; removes $ props in favor of booleans. |
| src/components/DatePicker/DateTimeRangePicker.module.css | CSS Module replacement for DateTimeRangePicker-specific layout/overrides. |
| src/components/DatePicker/DateTimeRangePicker.stories.tsx | Adds VR fixture stories for tabbed, error, and predefined-times states. |
| src/components/DatePicker/Common.tsx | Migrates shared calendar/input primitives (DateTableCell, nav controls, grids) to CSS Modules + cn. |
| src/components/DatePicker/Common.module.css | CSS Module replacement for shared DatePicker primitives and specificity overrides. |
| .changeset/migrate-datepicker-to-css-modules.md | Patch changeset for the DatePicker CSS Modules migration. |
Import `Page` as an inline type (`import('@playwright/test').Page`) at
the usage sites instead of as a runtime named export, matching the
convention used by every other visual spec. No behavior change.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
ariser
reviewed
Jul 7, 2026
- Replace `...props` spreading in the internal wrappers with explicit prop lists (DateTableCell, StyledDropdownItem, PickerNav/EmptyDateSelectNav, HighlightedInputWrapper, and the range-picker wrappers). CalendarRenderer keeps its spread — it forwarded props explicitly in the original too. - Rename the `wide` prop to `fillWidth` (and the matching CSS module class). - Alphabetize the selectors in the three .module.css files. Properties stay in the stylelint-enforced logical order. No behavior change; visual regression parity unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Rename the fixed-date fixtures to descriptive names (SelectedDate, PredefinedDatesWithSelectedDate, InvalidDates) and drop the VR-prefixed comments. - Remove the DateTimeRangePicker fixtures already covered by the existing SetStartAndEndDate / PredefinedTimesWithSetStartAndEndDate stories, and repoint the visual spec at those. - Regenerate the affected baselines against the styled-components source so the parity check stays honest. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the inline `cn(styles['base'], cond && styles['modifier'])` patterns with `cva` variant definitions, matching the convention used across the rest of the migrated component library. Covers HighlightedInputWrapper, DateTableCell, the month/year grid cells, the CalendarRendererContainer open-direction, and the range-indicator cell in both range pickers. No behavior change; class output and visual regression parity are unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
Storybook Preview Deployed✅ Preview URL: https://click-drvph0wk4-clickhouse.vercel.app Built from commit: |
hoorayimhelping
approved these changes
Jul 8, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Commits
test(DatePicker): add visual regression baseline before CSS Modules migration— adds VR stories (fixed dates) and Playwright specs for DatePicker, DateRangePicker, and DateTimeRangePicker (closed inputs, open day/month/year calendars, range indicators, predefined panels, tabbed time inputs, error state) across light + dark, plus fresh PNG snapshots. The clock is pinned so the "today" highlight is deterministic.chore(DatePicker): migrate styling from styled-components to CSS Modules— replaces styled-components with per-file.module.css+cnacross the whole directory. DOM-identical, byte-for-byte visual parity verified.This is a coordinated cluster: the four files share
Common.tsx(exportedDateTableCell/CalendarRenderer) and ~24styled()extensions, several of which extend already-migrated CSS-module bases.Notes
:where()base needs no boost.DatePickeruses raw@radix-ui/react-popover, so those wrappers apply their class directly with no cascade competition.$-props were dropped; the exported public surface (index.ts) is unchanged.Verification
yarn test:visualfor all three specs passes with zero snapshot regenerations (28 snapshots)yarn test DatePicker DateRangePicker DateTimeRangePicker(131 tests),yarn lint:css,yarn lint:code,yarn format,yarn typecheck,yarn buildall greengrep -rn "from 'styled-components'" src/components/DatePicker/*.tsxempty