React 19 upgrade #5552

vietanhtran16 · 2025-03-03T02:43:34Z

Important: Request PR reviews on Slack

Please reach out to the design system team on Slack in #prod_design_system for PR reviews. GitHub notifications (e.g. from tagging a person) are not actively monitored.

Why

To prepare for our Nextjs 15 and React 19 upgrade, I created this PR to test it out. My findings has been documented here

What

Upgrade to react and react-dom 19 for devDependencies
Allow react 19 and react dom 19 as peer dependencies
Released as canary and tested in conversations-ui

changeset-bot · 2025-03-03T02:43:38Z

🦋 Changeset detected

Latest commit: 19acc98

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

This PR includes changesets to release 4 packages

Name	Type
@kaizen/design-tokens	Minor
@kaizen/components	Minor
@kaizen/tailwind	Minor
@docs/storybook	Minor

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

github-actions · 2025-03-03T02:48:09Z

✨ Here is your branch preview! ✨

Storybook

Last updated for commit 19acc98: chore(changeset): Consolidate changeset

packages/components/package.json

packages/components/src/AvatarGroup/AvatarGroup.tsx

packages/components/src/Modal/GenericModal/GenericModal.tsx

vietanhtran16 · 2025-03-05T03:15:17Z

A bunch of tests are failing. I reckon it might be because of mismatch react version from possibly storybook? I also noticed react and react dom as dependency in the root package.json - are they needed there?

ryanseddon · 2025-05-14T05:45:32Z

packages/components/src/Calendar/CalendarRange/CalendarRange.module.scss

@@ -43,6 +43,7 @@ $cell-border-radius: 3px;
  justify-content: space-between;
  width: 100%;
  color: $color-purple-800;
+  top: -0.25rem;


This is needed as the original rdp nav would actually jump out of its containing block.

v8 on the left and this branch on the right, this fixes that. Due to how the markup has changed the cleanest way was to pull the nav outside of it's containing block again.

mcwinter07

Changes look good but given how much the deps update for react day picker impact the behavior of FilterDateRangePicker and DateRangePicker, can we update or add another changeset with a patch to call out this update out specifically. It'll help if we ever need to refer to the changelog cc: @ryanseddon

ryanseddon · 2025-05-16T03:59:41Z

~~@mcwinter07 absolutely was planning to get everything settled and then do a proper changeset~~
Done in 00d0ef4

* chore: Ignore peerDep warnings for older packages Target specific packages so as not to ignore valid warnings we can ignore * chore: add react popper * chore: add popper core * chore: add changeset and order packages

* fix: remove root-level React dependencies * Add react as a peerDep and don't rely on root * Add a devDep too to match other packages

* feat(components): upgrade react-day-picker from 8.10.1 to 9.6.7 Update react-day-picker to version 9.6.7 and update all dependent components to work with the new API. Changes include: - Refactor component props to use the updated type definitions - Update component rendering to match the new API requirements - Modify CSS modules to accommodate new class naming conventions - Adjust navigation components to use the new Chevron component API - Add new styles for proper range highlighting and hidden elements * update test to target button correctly * fix linting problems * Failing tests * fix(Calendar): replace ClassNames type casting with explicit PropsBase typing * Fix classnames * Fix css changes and first child not working in v9 dom

* fix: use ts-patch before building components * chore: changeset

* fix: remove root-level React dependencies * Add react as a peerDep and don't rely on root * Add a devDep too to match other packages

* fix: use ts-patch before building components * chore: changeset

* fix: remove root-level React dependencies * Add react as a peerDep and don't rely on root * Add a devDep too to match other packages

* fix: use ts-patch before building components * chore: changeset

- Add top spacing (-0.25rem) to navigation elements in all Calendar variants - Fix styling for today's date and disabled days - Update test selectors to properly target day buttons within grid cells

vietanhtran16 requested a review from a team as a code owner March 3, 2025 02:43

vietanhtran16 commented Mar 5, 2025

View reviewed changes

packages/components/package.json Outdated Show resolved Hide resolved

vietanhtran16 commented Mar 5, 2025

View reviewed changes

packages/components/src/AvatarGroup/AvatarGroup.tsx Outdated Show resolved Hide resolved

vietanhtran16 commented Mar 5, 2025

View reviewed changes

packages/components/src/Modal/GenericModal/GenericModal.tsx Outdated Show resolved Hide resolved

vietanhtran16 changed the title ~~Viet: Spike react 19 upgrade for next 15~~ Support React 19 for Next 15 and React 19 upgrade in consumer apps Mar 5, 2025

ryanseddon force-pushed the viet/react-19-peer-deps branch 3 times, most recently from 7dd6d47 to 7a6805f Compare April 15, 2025 05:58

ryanseddon self-assigned this Apr 28, 2025

ryanseddon force-pushed the viet/react-19-peer-deps branch 3 times, most recently from a31c6ed to 5e409ed Compare May 14, 2025 04:10

ryanseddon reviewed May 14, 2025

View reviewed changes

mcwinter07 reviewed May 16, 2025

View reviewed changes

ryanseddon changed the title ~~Support React 19 for Next 15 and React 19 upgrade in consumer apps~~ React 19 upgrade May 16, 2025

vietanhtran16 and others added 11 commits May 23, 2025 13:51

Allow react 19 as peer dependency

86e5f27

Allow react 19 as peer dependency

6ebc582

chore(deps): upgrade Storybook to 8.6.12 and React to 19.0.0 (#5677)

2b07551

chore: Ignore peerDep warnings for older packages (#5700)

096349b

* chore: Ignore peerDep warnings for older packages Target specific packages so as not to ignore valid warnings we can ignore * chore: add react popper * chore: add popper core * chore: add changeset and order packages

fix: remove root-level React dependencies (#5749)

e8ceaa1

* fix: remove root-level React dependencies * Add react as a peerDep and don't rely on root * Add a devDep too to match other packages

fix: upgrade to latest package-bundler to fix type issues (#5701)

bee202c

fix: use ts-patch before building components (#5718)

8ad5025

* fix: use ts-patch before building components * chore: changeset

Allow react 19 as peer dependency

619d418

chore(deps): upgrade Storybook to 8.6.12 and React to 19.0.0 (#5677)

7296a37

fix: remove root-level React dependencies (#5749)

8099741

* fix: remove root-level React dependencies * Add react as a peerDep and don't rely on root * Add a devDep too to match other packages

ckychris and others added 9 commits May 23, 2025 13:51

fix: use ts-patch before building components (#5718)

d805885

* fix: use ts-patch before building components * chore: changeset

chore(deps): upgrade Storybook to 8.6.12 and React to 19.0.0 (#5677)

c4fafe5

fix: remove root-level React dependencies (#5749)

1735849

* fix: remove root-level React dependencies * Add react as a peerDep and don't rely on root * Add a devDep too to match other packages

fix: use ts-patch before building components (#5718)

031657c

* fix: use ts-patch before building components * chore: changeset

fix: use ts-patch before building components (#5718)

5cbea98

* fix: use ts-patch before building components * chore: changeset

fix(components): adjust Calendar styling and test selectors

9f1c71a

- Add top spacing (-0.25rem) to navigation elements in all Calendar variants - Fix styling for today's date and disabled days - Update test selectors to properly target day buttons within grid cells

Fix lock file

044b6ac

chore(design-tokens): Remove react 17 frm peerDep range

46da943

chore(changeset): Consolidate changeset

19acc98

ryanseddon force-pushed the viet/react-19-peer-deps branch from 00d0ef4 to 19acc98 Compare May 23, 2025 03:52

mcwinter07 approved these changes May 23, 2025

View reviewed changes

ryanseddon merged commit fd29d3d into main May 25, 2025
18 checks passed

ryanseddon deleted the viet/react-19-peer-deps branch May 25, 2025 23:14

github-actions bot mentioned this pull request May 25, 2025

Changeset: Version packages #5789

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

React 19 upgrade #5552

React 19 upgrade #5552

Uh oh!

vietanhtran16 commented Mar 3, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 3, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 3, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

vietanhtran16 commented Mar 5, 2025

Uh oh!

ryanseddon May 14, 2025

Uh oh!

mcwinter07 left a comment •

edited

Loading

Uh oh!

ryanseddon commented May 16, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

React 19 upgrade #5552

React 19 upgrade #5552

Uh oh!

Conversation

vietanhtran16 commented Mar 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Important: Request PR reviews on Slack

Why

What

Uh oh!

changeset-bot bot commented Mar 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Mar 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

vietanhtran16 commented Mar 5, 2025

Uh oh!

ryanseddon May 14, 2025

Choose a reason for hiding this comment

Uh oh!

mcwinter07 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ryanseddon commented May 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

vietanhtran16 commented Mar 3, 2025 •

edited

Loading

changeset-bot bot commented Mar 3, 2025 •

edited

Loading

github-actions bot commented Mar 3, 2025 •

edited

Loading

mcwinter07 left a comment •

edited

Loading

ryanseddon commented May 16, 2025 •

edited

Loading