Skip to content

feat: add new DatePicker component #3139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

feat: add new DatePicker component #3139

wants to merge 6 commits into from

Conversation

@talkor
Copy link
Member

@talkor talkor commented Oct 16, 2025 •
edited by qodo-merge-for-open-source bot
Loading

User description

https://monday.monday.com/boards/3532714909/pulses/4640584267

PR Type

Enhancement

Description

  • Add new DatePicker component using react-day-picker library

  • Support single date and date range selection modes

  • Include comprehensive styling with SCSS modules and range visualization

  • Add month/year dropdown selectors and navigation controls

  • Update bundle check scripts to include next components

  • Migrate legacy DatePicker stories to deprecated section

Diagram Walkthrough

flowchart LR
  A["DatePicker Props"] --> B["DatePicker Component"]
  B --> C["DatePickerHeader"]
  B --> D["RangeDayContent/SingleDayContent"]
  C --> E["Month/Year Dropdowns"]
  D --> F["Day Styling & Selection"]
  G["Utils Functions"] --> B
  H["date-fns & react-day-picker"] --> B
  B --> I["SCSS Modules"]
  J["Bundle Check Scripts"] -.-> K["Next Components Tracking"]
Loading

File Walkthrough
Relevant files
Enhancement
14 files
DatePicker.types.ts
Define DatePicker component prop types                                     
+39/-0   
index.ts
Export DatePicker component and types                                       
+3/-0     
utils.ts
Implement date range manipulation utilities                           
+155/-0 
DatePicker.tsx
Implement main DatePicker component logic                               
+190/-0 
DatePickerHeader.tsx
Create header with month/year selectors                                   
+132/-0 
RangeDayContent.tsx
Render day content for range selection mode                           
+34/-0   
SingleDayContent.tsx
Render day content for single selection mode                         
+12/-0   
DateContentHoverContext.tsx
Create context for hover state management                               
+15/-0   
datePickerHooks.tsx
Implement hooks for months and years options                         
+37/-0   
DatePicker.module.scss
Style DatePicker with range and selection states                 
+286/-0 
DatePickerHeader.module.scss
Style header dropdowns and navigation buttons                       
+28/-0   
index.ts
Export DatePicker from next components                                     
+1/-0     
generate-size-limit-config.js
Add next components to bundle size tracking                           
+21/-0   
compare-bundles.js
Update bundle comparison for next components                         
+7/-1     
Configuration changes
2 files
files.d.ts
Add module declarations for assets                                             
+15/-0   
main.ts
Fix path aliases for storybook configuration                         
+2/-2     
Tests
2 files
utils.test.js
Test date range manipulation utilities                                     
+126/-0 
DatePicker.test.jsx
Test DatePicker component functionality                                   
+132/-0 
Dependencies
2 files
package.json
Add date-fns and react-day-picker dependencies                     
+2/-0     
package.json
Add date-fns dev dependency for documentation                       
+1/-0     
Documentation
4 files
DatePicker.mdx
Update documentation for new DatePicker                                   
+7/-1     
DatePicker.stories.tsx
Rewrite stories for new DatePicker component                         
+23/-68 
DatePicker.mdx
Create deprecated documentation for legacy DatePicker       
+46/-0   
DatePicker.stories.tsx
Move legacy DatePicker stories to deprecated section         
+135/-0 

@talkor talkor requested a review from a team as a code owner October 16, 2025 07:47
@qodo-merge-for-open-source
Copy link
Contributor

qodo-merge-for-open-source bot commented Oct 16, 2025 •
edited
Loading

PR Reviewer Guide 🔍

(Review updated until commit b591816)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

Type Safety

Casting DatePicker props to satisfy react-day-picker types (e.g., mode, selected) could hide mismatches at runtime; validate the props passed through to avoid subtle bugs when switching modes.

 
const modifiers = addToRangeModifiers(hover, selected as DateRange, intent);
return (
  <ReactDatePicker
    fixedWeeks
    showOutsideDays
    showWeekNumber={showWeekNumber}
    mode={mode as "single"} // cast to avoid type errors from ReactDatePicker
    required
    weekStartsOn={firstDayOfWeek}
    disabled={isDateDisabled}
    selected={selected as Date} // cast to avoid type errors from ReactDatePicker
    onSelect={onPickerDateChange}
    month={displayMonth}
    onMonthChange={setDisplayMonth}
    components={{ Caption, DayContent: mode === "single" ? SingleDayContent : RangeDayContent }}
    classNames={classNames}
    modifiers={modifiers}
Fragile Parsing

The JSON extraction regex assumes the JSON array spans full lines; ensure bundle outputs always match or add a fallback to avoid failures on minor formatting differences.

 
function extractJson(content) {
  const jsonMatch = content.match(/^\[[\s\S]*\]$/m);

  if (!jsonMatch) {
    throw new Error("No JSON array found in content");
  }
A11y Labels

Month/year dropdowns rely on ariaLabel props; ensure defaults are always provided and exposed in docs to avoid unlabeled controls in some locales/usages.

 
return (
  <div className={cx(styles.datePickerHeader, className)}>
    <Flex gap="small">
      <Dropdown
        className={styles.monthButtonDropdown}
        ariaLabel={monthSelectionAriaLabel}
        options={months}
        value={selectedMonth}
        onChange={onMonthSelect}
        menuWrapperClassName={styles.monthButtonDropdown}
        size="small"
        valueRenderer={(_option: DatePickerDropdownItem) => monthButtonLabel}
        searchable={false}
        clearable={false}
      />
      <Dropdown
        className={styles.yearButtonDropdown}
        ariaLabel={yearSelectionAriaLabel}
        options={years}
        value={selectedYear}
        onChange={onYearSelect}
        menuWrapperClassName={styles.yearButtonDropdown}
        size="small"
        valueRenderer={(_option: DatePickerDropdownItem) => yearsButtonLabel}
        searchable={false}
        clearable={false}
      />
    </Flex>

@github-actions
Copy link
Contributor

github-actions bot commented Oct 16, 2025 •
edited
Loading

📦 Bundle Size Analysis

✅ No bundle size changes detected.

Unchanged Components
Component Base PR Diff
Accordion 6.35KB 6.35KB 0B ➖
AccordionItem 67.77KB 67.77KB 0B ➖
AlertBanner 72.5KB 72.5KB 0B ➖
AlertBannerButton 19.03KB 19.03KB 0B ➖
AlertBannerLink 15.34KB 15.34KB 0B ➖
AlertBannerText 65.16KB 65.16KB 0B ➖
AttentionBox 74.03KB 74.03KB 0B ➖
AttentionBoxLink 15.22KB 15.22KB 0B ➖
Avatar 68.06KB 68.06KB 0B ➖
AvatarGroup 95.34KB 95.34KB 0B ➖
Badge 43.52KB 43.52KB 0B ➖
Box 9.36KB 9.36KB 0B ➖
BreadcrumbItem 65.8KB 65.8KB 0B ➖
BreadcrumbMenu 69.97KB 69.97KB 0B ➖
BreadcrumbMenuItem 78.71KB 78.71KB 0B ➖
BreadcrumbsBar 5.78KB 5.78KB 0B ➖
Button 18.74KB 18.74KB 0B ➖
ButtonGroup 69.92KB 69.92KB 0B ➖
Checkbox 68.08KB 68.08KB 0B ➖
Chips 76.76KB 76.76KB 0B ➖
Clickable 6.28KB 6.28KB 0B ➖
ColorPicker 75.86KB 75.86KB 0B ➖
ColorPickerContent 75.12KB 75.12KB 0B ➖
Combobox 85.69KB 85.69KB 0B ➖
Counter 42.36KB 42.36KB 0B ➖
DatePicker 134.16KB 134.16KB 0B ➖
Dialog 53.98KB 53.98KB 0B ➖
DialogContentContainer 6.32KB 6.32KB 0B ➖
Divider 5.55KB 5.55KB 0B ➖
Dropdown 125.01KB 125.01KB 0B ➖
menu 59.85KB 59.85KB 0B ➖
option 92.86KB 92.86KB 0B ➖
singleValue 92.71KB 92.71KB 0B ➖
EditableHeading 67.84KB 67.84KB 0B ➖
EditableText 67.75KB 67.75KB 0B ➖
EmptyState 72.4KB 72.4KB 0B ➖
ExpandCollapse 67.59KB 67.59KB 0B ➖
Flex 7.52KB 7.52KB 0B ➖
FormattedNumber 5.87KB 5.87KB 0B ➖
GridKeyboardNavigationContext 4.65KB 4.65KB 0B ➖
Heading 66.46KB 66.46KB 0B ➖
HiddenText 5.43KB 5.43KB 0B ➖
CustomSvgIcon 11.86KB 11.86KB 0B ➖
Icon 13.78KB 13.78KB 0B ➖
IconButton 69.59KB 69.59KB 0B ➖
Info 73.87KB 73.87KB 0B ➖
Label 70.08KB 70.08KB 0B ➖
LayerProvider 2.95KB 2.95KB 0B ➖
LegacyModal 76.28KB 76.28KB 0B ➖
LegacyModalContent 66.55KB 66.55KB 0B ➖
LegacyModalFooter 3.46KB 3.46KB 0B ➖
LegacyModalFooterButtons 20.44KB 20.44KB 0B ➖
LegacyModalHeader 72.56KB 72.56KB 0B ➖
Link 14.97KB 14.97KB 0B ➖
List 74.35KB 74.35KB 0B ➖
ListItem 66.99KB 66.99KB 0B ➖
ListItemAvatar 68.25KB 68.25KB 0B ➖
ListItemIcon 14.13KB 14.13KB 0B ➖
ListTitle 66.59KB 66.59KB 0B ➖
Loader 5.82KB 5.82KB 0B ➖
Menu 8.66KB 8.66KB 0B ➖
MenuDivider 5.65KB 5.65KB 0B ➖
MenuGridItem 7.22KB 7.22KB 0B ➖
MenuItem 78.7KB 78.7KB 0B ➖
MenuItemButton 71.68KB 71.68KB 0B ➖
MenuTitle 66.78KB 66.78KB 0B ➖
MenuButton 67.57KB 67.57KB 0B ➖
MultiStepIndicator 53.05KB 53.05KB 0B ➖
NumberField 74.49KB 74.49KB 0B ➖
LinearProgressBar 7.43KB 7.43KB 0B ➖
RadioButton 67.34KB 67.34KB 0B ➖
Search 72KB 72KB 0B ➖
Skeleton 6.19KB 6.19KB 0B ➖
Slider 75.62KB 75.62KB 0B ➖
SplitButton 68.37KB 68.37KB 0B ➖
SplitButtonMenu 8.81KB 8.81KB 0B ➖
Steps 73.08KB 73.08KB 0B ➖
Table 7.28KB 7.28KB 0B ➖
TableBody 68.25KB 68.25KB 0B ➖
TableCell 66.59KB 66.59KB 0B ➖
TableContainer 5.37KB 5.37KB 0B ➖
TableHeader 5.68KB 5.68KB 0B ➖
TableHeaderCell 73.72KB 73.72KB 0B ➖
TableRow 5.59KB 5.59KB 0B ➖
TableRowMenu 70.25KB 70.25KB 0B ➖
TableVirtualizedBody 72.99KB 72.99KB 0B ➖
Tab 65.22KB 65.22KB 0B ➖
TabList 8.92KB 8.92KB 0B ➖
TabPanel 5.35KB 5.35KB 0B ➖
TabPanels 5.94KB 5.94KB 0B ➖
TabsContext 5.54KB 5.54KB 0B ➖
Text 66.37KB 66.37KB 0B ➖
TextArea 67.69KB 67.69KB 0B ➖
TextField 70.95KB 70.95KB 0B ➖
TextWithHighlight 65.5KB 65.5KB 0B ➖
ThemeProvider 4.69KB 4.69KB 0B ➖
Tipseen 72.89KB 72.89KB 0B ➖
TipseenContent 73.39KB 73.39KB 0B ➖
TipseenImage 73.19KB 73.19KB 0B ➖
TipseenMedia 72.98KB 72.98KB 0B ➖
TipseenWizard 75.65KB 75.65KB 0B ➖
Toast 75.66KB 75.66KB 0B ➖
ToastButton 18.85KB 18.85KB 0B ➖
ToastLink 15.22KB 15.22KB 0B ➖
Toggle 68.08KB 68.08KB 0B ➖
Tooltip 64.43KB 64.43KB 0B ➖
TransitionView 37.68KB 37.68KB 0B ➖
VirtualizedGrid 12.58KB 12.58KB 0B ➖
VirtualizedList 12.36KB 12.36KB 0B ➖

📊 Summary:

  • Total Base Size: 5.12MB
  • Total PR Size: 5.12MB
  • Total Difference: +0B

rivka-ungar
rivka-ungar approved these changes Nov 2, 2025
View reviewed changes
@qodo-merge-for-open-source
Copy link
Contributor

qodo-merge-for-open-source bot commented Nov 4, 2025

CI Feedback 🧐

A test triggered by this PR failed. Here is an AI-generated analysis of the failure:

Action: Test / Test

Failed stage: Run Test [❌]

Failed test name: exports > should export next all components

Failure summary:

The action failed due to snapshot test mismatches in two test suites:
-
src/tests/exports.test.ts (line 12:48): Snapshot exports > should export next all components 1
mismatched. The received exports list now includes DatePicker, which was not in the stored snapshot.

- src/components/next/DatePicker/tests/DatePicker.test.jsx (line 19:25): Snapshot DatePicker
tests > snapshot tests > renders correctly 1 mismatched. Differences include class names changing
from icon_560b893605 noFocusStyle_f90433009d to icon noFocusStyle, indicating updated styles/DOM
output.
As a result, the test command exited with code 1 and the workflow failed.

Relevant error logs: 
1:  ##[group]Runner Image Provisioner
2:  Hosted Compute Agent
...

135:  * [new branch]          feature/moro/disabled-legacy-editable-heading-text-selection -> origin/feature/moro/disabled-legacy-editable-heading-text-selection
136:  * [new branch]          feature/moshe/auto_scroll_after_back_on_store -> origin/feature/moshe/auto_scroll_after_back_on_store
137:  * [new branch]          feature/moshe/vulcan_upgrade -> origin/feature/moshe/vulcan_upgrade
138:  * [new branch]          feature/sergeyro/icon-deprecate-clickable -> origin/feature/sergeyro/icon-deprecate-clickable
139:  * [new branch]          feature/shanab/input-type-time -> origin/feature/shanab/input-type-time
140:  * [new branch]          fix-add-tslib               -> origin/fix-add-tslib
141:  * [new branch]          fix-chromatic-action        -> origin/fix-chromatic-action
142:  * [new branch]          fix-dialog-show-contextmenu-default-menu -> origin/fix-dialog-show-contextmenu-default-menu
143:  * [new branch]          fix-dropdown-spec           -> origin/fix-dropdown-spec
144:  * [new branch]          fix-showHideEvent-in-dialog-story -> origin/fix-showHideEvent-in-dialog-story
145:  * [new branch]          fix/combobox-spacings-9062326510 -> origin/fix/combobox-spacings-9062326510
146:  * [new branch]          fix/modal-focus             -> origin/fix/modal-focus
147:  * [new branch]          fix/orhal/playwright-install-performance-fix -> origin/fix/orhal/playwright-install-performance-fix
148:  * [new branch]          fix/yossi/test-focus-lock-esm -> origin/fix/yossi/test-focus-lock-esm
149:  * [new branch]          gh-pages                    -> origin/gh-pages
150:  * [new branch]          lint-error-fixes            -> origin/lint-error-fixes
151:  * [new branch]          master                      -> origin/master
...

1916:  Created: src/react/WrapText.tsx
1917:  Created: index.ts
1918:  �[2K�[1G�[2m$ node scripts/generate-lazy-icons.js�[22m
1919:  Generated lazy components and index.ts for 272 icons.
1920:  �[2K�[1G�[2m$ node scripts/generate-svg-index.js�[22m
1921:  Generated index.ts for SVG exports in ./src/svg
1922:  �[36m
1923:  �[1msrc/react/index.ts, src/lazy/index.ts, src/svg/index.ts, src/iconsMetaData.ts�[22m → �[1mdist�[22m...�[39m
1924:  �[32mcreated �[1mdist�[22m in �[1m49s�[22m�[39m
1925:  �[2K�[1GDone in 55.79s.
1926:  ##[endgroup]
1927:  Lerna (powered by Nx)   Successfully ran target build for 2 projects
1928:  Done in 84.88s.
1929:  ##[group]Run if [[ -n "$(git status --porcelain yarn.lock)" ]]; then
1930:  �[36;1mif [[ -n "$(git status --porcelain yarn.lock)" ]]; then�[0m
1931:  �[36;1m  echo "Error: yarn.lock has uncommitted changes. Please commit it."�[0m
1932:  �[36;1m  exit 1�[0m
...

2168:  Warning: Invalid attribute `ref` supplied to `React.Fragment`.
2169:  in Fragment (at Tipseen.tsx:223)
2170:  in ForwardRef (at Tipseen.test.tsx:74)
2171:  �[90mstderr�[2m | src/components/Tipseen/__tests__/Tipseen.test.tsx�[2m > �[22m�[2mIntegration Tests�[2m > �[22m�[2mTipseen tests�[2m > �[22m�[2mcall onClose function when click on close button�[22m�[39m
2172:  Warning: Invalid prop `id` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.
2173:  in Fragment (at Tipseen.tsx:223)
2174:  in ForwardRef (at Tipseen.test.tsx:99)
2175:  Warning: Invalid attribute `ref` supplied to `React.Fragment`.
2176:  in Fragment (at Tipseen.tsx:223)
2177:  in ForwardRef (at Tipseen.test.tsx:99)
2178:  �[32m✓�[39m src/hooks/useWizard/__tests__/useWizard.test.ts �[2m (�[22m�[2m14 tests�[22m�[2m)�[22m�[90m 56�[2mms�[22m�[39m
2179:  �[32m✓�[39m src/components/Box/__tests__/Box.snapshot.test.tsx �[2m (�[22m�[2m22 tests�[22m�[2m)�[22m�[90m 51�[2mms�[22m�[39m
2180:  �[32m✓�[39m src/components/Flex/__tests__/Flex.snapshot.test.tsx �[2m (�[22m�[2m14 tests�[22m�[2m)�[22m�[90m 50�[2mms�[22m�[39m
2181:  �[32m✓�[39m src/components/Menu/MenuItem/components/BaseMenuItem/__tests__/BaseMenuItem.test.tsx �[2m (�[22m�[2m7 tests�[22m�[2m)�[22m�[90m 115�[2mms�[22m�[39m
2182:  �[32m✓�[39m src/components/Slider/__tests__/Slider-non-ranged.test.jsx �[2m (�[22m�[2m10 tests�[22m�[2m)�[22m�[33m 554�[2mms�[22m�[39m
2183:  �[33m❯�[39m src/components/next/DatePicker/__tests__/DatePicker.test.jsx �[2m (�[22m�[2m8 tests�[22m �[2m|�[22m �[31m1 failed�[39m�[2m)�[22m�[33m 6177�[2mms�[22m�[39m
2184:  �[31m   �[33m❯�[31m src/components/next/DatePicker/__tests__/DatePicker.test.jsx�[2m > �[22mDatePicker tests�[2m > �[22msnapshot tests�[2m > �[22mrenders correctly�[39m
...

2325:  �[32m✓�[39m src/components/Link/__tests__/Link.snapshot.test.tsx �[2m (�[22m�[2m8 tests�[22m�[2m)�[22m�[90m 41�[2mms�[22m�[39m
2326:  �[32m✓�[39m src/components/Table/Table/__tests__/TableHelpers.test.tsx �[2m (�[22m�[2m9 tests�[22m�[2m)�[22m�[90m 6�[2mms�[22m�[39m
2327:  �[32m✓�[39m src/components/TransitionView/__tests__/TransitionView.test.tsx �[2m (�[22m�[2m2 tests�[22m�[2m)�[22m�[90m 61�[2mms�[22m�[39m
2328:  �[32m✓�[39m src/components/Heading/__tests__/Heading.snapshot.test.tsx �[2m (�[22m�[2m7 tests�[22m�[2m)�[22m�[90m 38�[2mms�[22m�[39m
2329:  �[32m✓�[39m src/components/next/AttentionBox/layouts/AttentionBoxCompact/__tests__/AttentionBoxCompact.test.tsx �[2m (�[22m�[2m3 tests�[22m�[2m)�[22m�[90m 171�[2mms�[22m�[39m
2330:  �[32m✓�[39m src/components/Badge/__tests__/Badge.snapshot.test.tsx �[2m (�[22m�[2m6 tests�[22m�[2m)�[22m�[90m 36�[2mms�[22m�[39m
2331:  �[32m✓�[39m src/components/Text/__tests__/Text.snapshot.test.tsx �[2m (�[22m�[2m7 tests�[22m�[2m)�[22m�[90m 42�[2mms�[22m�[39m
2332:  �[32m✓�[39m src/components/Counter/__tests__/Counter.test.tsx �[2m (�[22m�[2m3 tests�[22m�[2m)�[22m�[90m 48�[2mms�[22m�[39m
2333:  �[32m✓�[39m src/components/Dialog/__tests__/Dialog.test.tsx �[2m (�[22m�[2m2 tests�[22m�[2m)�[22m�[90m 142�[2mms�[22m�[39m
2334:  �[32m✓�[39m src/components/LegacyModal/LegacyModalHeader/__tests__/LegacyModalHeader.snapshot.test.jsx �[2m (�[22m�[2m4 tests�[22m�[2m)�[22m�[90m 129�[2mms�[22m�[39m
2335:  �[32m✓�[39m src/components/Typography/__tests__/Typography.snapshot.test.tsx �[2m (�[22m�[2m6 tests�[22m�[2m)�[22m�[90m 24�[2mms�[22m�[39m
2336:  �[32m✓�[39m src/components/Info/components/InfoLink/__tests__/InfoLink.test.tsx �[2m (�[22m�[2m2 tests�[22m�[2m)�[22m�[90m 108�[2mms�[22m�[39m
2337:  �[32m✓�[39m src/hooks/useAfterFirstRender/__tests__/useAfterFirstRender.test.tsx �[2m (�[22m�[2m3 tests�[22m�[2m)�[22m�[90m 22�[2mms�[22m�[39m
2338:  �[32m✓�[39m src/components/Menu/MenuGridItem/__tests__/MenuGridItem.snapshot.test.jsx �[2m (�[22m�[2m2 tests�[22m�[2m)�[22m�[90m 25�[2mms�[22m�[39m
2339:  �[90mstderr�[2m | src/components/Menu/MenuGridItem/__tests__/MenuGridItem.snapshot.test.jsx�[2m > �[22m�[2mMenuGridItem renders correctly�[2m > �[22m�[2mwith a disabled child�[22m�[39m
2340:  Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
2341:  Check the render method of `ForwardRef`.
...

2349:  �[32m✓�[39m src/components/Avatar/__tests__/Avatar.test.tsx �[2m (�[22m�[2m1 test�[22m�[2m)�[22m�[90m 53�[2mms�[22m�[39m
2350:  �[32m✓�[39m src/components/Menu/MenuGridItem/__tests__/MenuGridItem.test.jsx �[2m (�[22m�[2m1 test�[22m�[2m)�[22m�[90m 42�[2mms�[22m�[39m
2351:  �[32m✓�[39m src/components/Slider/__tests__/Slider-helpers.test.js �[2m (�[22m�[2m13 tests�[22m�[2m)�[22m�[90m 5�[2mms�[22m�[39m
2352:  �[32m✓�[39m src/components/LegacyModal/LegacyModalFooter/__tests__/LegacyModalFooter.snapshot.test.jsx �[2m (�[22m�[2m2 tests�[22m�[2m)�[22m�[90m 34�[2mms�[22m�[39m
2353:  �[32m✓�[39m src/components/SplitButton/SplitButtonMenu/__tests__/SplitButtonMenu.snapshot.test.tsx �[2m (�[22m�[2m1 test�[22m�[2m)�[22m�[90m 40�[2mms�[22m�[39m
2354:  �[32m✓�[39m src/components/VirtualizedGrid/__tests__/VirtualizedGrid.test.jsx �[2m (�[22m�[2m3 tests�[22m�[2m)�[22m�[90m 27�[2mms�[22m�[39m
2355:  �[32m✓�[39m src/components/Clickable/__tests__/Clickable.snapshot.test.tsx �[2m (�[22m�[2m2 tests�[22m�[2m)�[22m�[90m 19�[2mms�[22m�[39m
2356:  �[32m✓�[39m src/components/Accordion/AccordionItem/__tests__/AccordionItem.test.tsx �[2m (�[22m�[2m1 test�[22m�[2m)�[22m�[90m 124�[2mms�[22m�[39m
2357:  �[32m✓�[39m src/components/Menu/MenuTitle/__tests__/MenuTitle.test.tsx �[2m (�[22m�[2m3 tests�[22m�[2m)�[22m�[90m 25�[2mms�[22m�[39m
2358:  �[32m✓�[39m src/components/LegacyModal/LegacyModalContent/__tests__/LegacyModalContent.snapshot.test.tsx �[2m (�[22m�[2m2 tests�[22m�[2m)�[22m�[90m 22�[2mms�[22m�[39m
2359:  �[32m✓�[39m src/components/Badge/Indicator/__tests__/Indicator.snapshot.test.tsx �[2m (�[22m�[2m2 tests�[22m�[2m)�[22m�[90m 20�[2mms�[22m�[39m
2360:  �[32m✓�[39m src/components/AttentionBox/__tests__/AttentionBox.test.tsx �[2m (�[22m�[2m1 test�[22m�[2m)�[22m�[90m 52�[2mms�[22m�[39m
2361:  �[32m✓�[39m src/components/HiddenText/__tests__/HiddenText.test.tsx �[2m (�[22m�[2m2 tests�[22m�[2m)�[22m�[90m 52�[2mms�[22m�[39m
2362:  �[32m✓�[39m src/components/DialogContentContainer/__tests__/DialogContentContainer.test.tsx �[2m (�[22m�[2m2 tests�[22m�[2m)�[22m�[90m 21�[2mms�[22m�[39m
2363:  �[32m✓�[39m src/components/ListItemIcon/__tests__/ListItemIcon.test.tsx �[2m (�[22m�[2m2 tests�[22m�[2m)�[22m�[90m 25�[2mms�[22m�[39m
2364:  �[33m❯�[39m src/__tests__/exports.test.ts �[2m (�[22m�[2m3 tests�[22m �[2m|�[22m �[31m1 failed�[39m�[2m)�[22m�[90m 11�[2mms�[22m�[39m
2365:  �[31m   �[33m❯�[31m src/__tests__/exports.test.ts�[2m > �[22mexports�[2m > �[22mshould export next all components�[39m
2366:  �[31m     → Snapshot `exports > should export next all components 1` mismatched�[39m
2367:  �[32m✓�[39m src/components/ListItemAvatar/__tests__/ListItemAvatar.test.tsx �[2m (�[22m�[2m2 tests�[22m�[2m)�[22m�[90m 32�[2mms�[22m�[39m
2368:  �[32m✓�[39m src/components/Divider/__tests__/Divider.test.tsx �[2m (�[22m�[2m2 tests�[22m�[2m)�[22m�[90m 21�[2mms�[22m�[39m
2369:  �[32m✓�[39m src/components/ListTitle/__tests__/ListTitle.test.tsx �[2m (�[22m�[2m1 test�[22m�[2m)�[22m�[90m 23�[2mms�[22m�[39m
2370:  �[32m✓�[39m src/components/VirtualizedList/__tests__/VirtualizedList.snapshot.test.jsx �[2m (�[22m�[2m1 test�[22m�[2m)�[22m�[90m 22�[2mms�[22m�[39m
2371:  �[32m✓�[39m src/components/TextWithHighlight/__tests__/TextWithHighlight.test.tsx �[2m (�[22m�[2m1 test�[22m�[2m)�[22m�[90m 15�[2mms�[22m�[39m
2372:  �[31m⎯⎯⎯⎯⎯⎯⎯�[1m�[7m Failed Tests 2 �[27m�[22m⎯⎯⎯⎯⎯⎯⎯�[39m
2373:  �[31m�[1m�[7m FAIL �[27m�[22m�[39m src/__tests__/exports.test.ts�[2m > �[22mexports�[2m > �[22mshould export next all components
2374:  �[31m�[1mError�[22m: Snapshot `exports > should export next all components 1` mismatched�[39m
2375:  - Expected
2376:  + Received
2377:  @@ -1,7 +1,8 @@
2378:  [
2379:  "AttentionBox",
2380:  +   "DatePicker",
2381:  "Dropdown",
2382:  "Modal",
2383:  "ModalBasicLayout",
2384:  "ModalContent",
2385:  "ModalFooter",
2386:  �[36m �[2m❯�[22m src/__tests__/exports.test.ts:�[2m12:48�[22m�[39m
2387:  �[90m 10| �[39m
2388:  �[90m 11| �[39m  �[34mit�[39m(�[32m"should export next all components"�[39m�[33m,�[39m () �[33m=>�[39m {
2389:  ##[error]Error: Snapshot `exports > should export next all components 1` mismatched
2390:  
...

2397:  +   "DatePicker",
2398:      "Dropdown",
2399:      "Modal",
2400:      "ModalBasicLayout",
2401:      "ModalContent",
2402:      "ModalFooter",
2403:  
2404:   ❯ src/__tests__/exports.test.ts:12:48
2405:  
2406:  
2407:  �[90m 12| �[39m    �[34mexpect�[39m(�[33mObject�[39m�[33m.�[39m�[34mkeys�[39m(nextComponents)�[33m.�[39m�[34msort�[39m())�[33m.�[39m�[34mtoMatchSnapshot�[39m()�[33m;�[39m
2408:  �[90m   | �[39m                                               �[31m^�[39m
2409:  �[90m 13| �[39m  })�[33m;�[39m
2410:  �[90m 14| �[39m
2411:  �[31m�[2m⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/2]⎯�[22m�[39m
2412:  �[31m�[1m�[7m FAIL �[27m�[22m�[39m src/components/next/DatePicker/__tests__/DatePicker.test.jsx�[2m > �[22mDatePicker tests�[2m > �[22msnapshot tests�[2m > �[22mrenders correctly
2413:  �[31m�[1mError�[22m: Snapshot `DatePicker tests > snapshot tests > renders correctly 1` mismatched�[39m
2414:  - Expected
...

2628:  -                     class="icon_560b893605 noFocusStyle_f90433009d"
2629:  +                     class="icon noFocusStyle"
2630:  data-testid="icon"
2631:  data-vibe="Icon"
2632:  fill="currentColor"
2633:  height="20"
2634:  viewBox="0 0 20 20"
2635:  �[36m �[2m❯�[22m src/components/next/DatePicker/__tests__/DatePicker.test.jsx:�[2m19:25�[22m�[39m
2636:  �[90m 17| �[39m    �[34mit�[39m(�[32m"renders correctly"�[39m�[33m,�[39m () �[33m=>�[39m {
2637:  �[90m 18| �[39m      �[35mconst�[39m { container } �[33m=�[39m �[34mrenderDatePicker�[39m({ date�[33m:�[39m �[35mnew�[39m �[33mDate�[39m(�[34m1992�[39m�[33m,�[39m �[34m2�[39m�[33m,�[39m…
2638:  �[90m 19| �[39m      �[34mexpect�[39m(container)�[33m.�[39m�[34mtoMatchSnapshot�[39m()�[33m;�[39m
2639:  �[90m   | �[39m                        �[31m^�[39m
2640:  �[90m 20| �[39m    })�[33m;�[39m
2641:  �[90m 21| �[39m  })�[33m;�[39m
2642:  �[31m�[2m⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/2]⎯�[22m�[39m
2643:  ##[error]Error: Snapshot `DatePicker tests > snapshot tests > renders correctly 1` mismatched
2644:  
...

2716:                                style="justify-content: center; align-items: center; padding: 0px; width: 24px; height: 24px;"
2717:                                tabindex="-1"
2718:                                type="button"
2719:                              >
2720:                                <svg
2721:                                  aria-hidden="true"
2722:  -                               class="icon_560b893605 noFocusStyle_f90433009d"
2723:  +                               class="icon noFocusStyle"
2724:                                  data-testid="icon"
2725:                                  data-vibe="Icon"
2726:                                  fill="currentColor"
2727:                                  height="16"
2728:                                  viewBox="0 0 20 20"
2729:  @@ -93,66 +93,66 @@
2730:     
2731:  �[2m  Snapshots �[22m �[1m�[31m2 failed�[39m�[22m
2732:  �[2m Test Files �[22m �[1m�[31m2 failed�[39m�[22m�[2m | �[22m�[1m�[32m166 passed�[39m�[22m�[90m (168)�[39m
2733:  �[2m      Tests �[22m �[1m�[31m2 failed�[39m�[22m�[2m | �[22m�[1m�[32m1466 passed�[39m�[22m�[2m | �[22m�[33m7 skipped�[39m�[90m (1475)�[39m
2734:  �[2m   Start at �[22m 08:10:40
2735:  �[2m   Duration �[22m 98.31s�[2m (transform 10.47s, setup 32.33s, collect 86.69s, tests 44.13s, environment 83.34s, prepare 17.93s)�[22m
2736:  �[2K�[1G�[31merror�[39m Command failed with exit code 1.
2737:  �[2K�[1G�[34minfo�[39m Visit �[1mhttps://yarnpkg.com/en/docs/cli/run�[22m for documentation about this command.
2738:  Lerna (powered by Nx)   Running target test for project @vibe/core failed
2739:  Failed tasks:
2740:  - @vibe/core:test
2741:  Hint: run the command with --verbose for more details.
2742:  error Command failed with exit code 1.
2743:  info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
2744:  ##[error]Process completed with exit code 1.
2745:  Post job cleanup.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@rivka-ungar rivka-ungar rivka-ungar approved these changes

Assignees

No one assigned

Labels

Review effort 4/5

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@talkor @rivka-ungar