[CPS-2606] Migrate to Tailwind 4

[javier-delgado]

CPS-2606

Description

Upgrade Tailwind to V4.
min node version updated to 20

Discussion channel

How to test

• Temploy

There are still some "differences" picked up by happo, I checked them all and couldn't notice what the actual difference is.

Development checks

• Add changeset according to guidelines (if needed)
• Double check if picasso-tailwind-merge requires major update (check its README.md)
• Read CONTRIBUTING.md and Component API principles
• Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
• Annotate all props in component with documentation
• Create examples for component
• Ensure that deployed demo has expected results and good examples
• Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
• Self reviewed
• Covered with tests (visual tests included)

Breaking change

• codemod is created and showcased in the changeset
• test alpha package of Picasso in StaffPortal

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

Alpha packages

Manually trigger the publish.yml workflow to publish alpha packages. Specify pull request number as a parameter (only digits, e.g. 123).

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

1. You have no extra requests.
2. You have optional requests.
   1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

1. Something is broken after the changes.
2. Acceptance criteria is not reached.
3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

1. There are leftovers like unnecessary logs, comments, etc.
2. You have an opinionated comment regarding the code that requires a discussion.
3. You have questions.

How to handle the comments?

1. An owner of a comment is the only one who can resolve it.
2. An owner of a comment must resolve it when it's addressed.
3. A PR owner must reply with ✅ when a comment is addressed.

[github-actions]

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/4898/

This preview is updated automatically when you push changes to this PR.

[changeset-bot]

🦋 Changeset detected

Latest commit: e93f40b

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

This PR includes changesets to release 85 packages

Name	Type
@toptal/picasso-rich-text-editor	Major
@toptal/picasso-input-adornment	Major
@toptal/picasso-account-select	Major
@toptal/picasso-outlined-input	Major
@toptal/picasso-overview-block	Major
@toptal/picasso-autocomplete	Major
@toptal/picasso-avatar-upload	Major
@toptal/picasso-notification	Major
@toptal/picasso-number-input	Major
@toptal/picasso-prompt-modal	Major
@toptal/picasso-tagselector	Major
@toptal/picasso-tailwind	Major
@toptal/picasso-date-picker	Major
@toptal/picasso-date-select	Major
@toptal/picasso-pagination	Major
@toptal/picasso-test-utils	Major
@toptal/picasso-timepicker	Major
@toptal/picasso-typography	Major
@toptal/picasso-accordion	Major
@toptal/picasso-file-input	Major
@toptal/base-tailwind	Major
@toptal/picasso-backdrop	Major
@toptal/picasso-calendar	Major
@toptal/picasso-dropdown	Major
@toptal/picasso-show-more	Major
@toptal/picasso-forms	Major
@toptal/picasso-helpbox	Major
@toptal/picasso-section	Major
@toptal/picasso-avatar	Major
@toptal/picasso-button	Major
@toptal/picasso-select	Major
@toptal/picasso-slider	Major
@toptal/picasso-alert	Major
@toptal/picasso-badge	Major
@toptal/picasso-input	Major
@toptal/picasso-modal	Major
@toptal/picasso-table	Major
@toptal/picasso-utils	Major
@toptal/picasso-form	Major
@toptal/picasso-link	Major
@toptal/picasso-menu	Major
@toptal/picasso-page	Major
@toptal/picasso-tabs	Major
@toptal/picasso-tag	Major
@toptal/picasso	Patch
@toptal/picasso-password-input	Patch
@toptal/picasso-query-builder	Patch
@toptal/picasso-tailwind-merge	Patch
@toptal/picasso-switch	Major
@topkit/analytics-charts	Patch
@toptal/picasso-amount	Patch
@toptal/picasso-application-update-notification	Patch
@toptal/picasso-breadcrumbs	Patch
@toptal/picasso-checkbox	Patch
@toptal/picasso-collapse	Patch
@toptal/picasso-container	Patch
@toptal/picasso-dropzone	Patch
@toptal/picasso-fade	Patch
@toptal/picasso-form-label	Patch
@toptal/picasso-form-layout	Patch
@toptal/picasso-grid	Patch
@toptal/picasso-list	Patch
@toptal/picasso-note	Patch
@toptal/picasso-paper	Patch
@toptal/picasso-quote	Patch
@toptal/picasso-radio	Patch
@toptal/picasso-rating	Patch
@toptal/picasso-skeleton-loader	Patch
@toptal/picasso-slide	Patch
@toptal/picasso-step	Patch
@toptal/picasso-timeline	Patch
@toptal/picasso-tooltip	Patch
@toptal/picasso-typography-overflow	Patch
@toptal/picasso-user-badge	Patch
@toptal/picasso-drawer	Patch
@toptal/picasso-empty-state	Patch
@toptal/picasso-carousel	Patch
@toptal/picasso-tree-view	Patch
@toptal/picasso-charts	Patch
@toptal/picasso-pictograms	Patch
@toptal/picasso-icons	Patch
@toptal/picasso-image	Patch
@toptal/picasso-loader	Patch
@toptal/picasso-logo	Patch
@toptal/picasso-popper	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

[github-actions]

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/4898/

This preview is updated automatically when you push changes to this PR.

[github-actions]

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/4898/

This preview is updated automatically when you push changes to this PR.

[vedrani]

Thanks for doing it.

Interesting, not so many breaking changes.

What is migration path for projects using Picasso with TW4?

Check visual tests and ensure there are no differences or check are differences flaky.

[javier-delgado]

What is migration path for projects using Picasso with TW4?

They might have to make the same changes as in this PR if they use any of the changed TW utilities directly, but regarding picasso components per se, there is nothing to be done

Check visual tests and ensure there are no differences or check are differences flaky.

I fixed all the visual differences except the ones that are currently in happo. As I mentioned in the description, happo marks a difference in the corner of some buttons but I can't tell what is it even on full zoom

[denieler]

@javier-delgado on this screenshot https://happo.io/a/675/p/848/compare/4dda03d90fad34bc8be321eb9015b6c4cc5f226a/f17440a1df1ea2989559c1ffb904eebe1da173e8#Accordion-custom-expand-icon by some reason the icon has changed color, please take a look 🙇‍♂️ all the rest of screenshots look ok, apart of the issue with color of the shadow of buttons (but maybe we can ignore it, as visually change it not possible to identity, at least to me)

[github-actions]

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/4898/

This preview is updated automatically when you push changes to this PR.

[github-actions]

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/4898/

This preview is updated automatically when you push changes to this PR.

[github-actions]

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/4898/

This preview is updated automatically when you push changes to this PR.

[github-actions]

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/4898/

This preview is updated automatically when you push changes to this PR.

[denieler]

@javier-delgado here we still have wrong conversion

[denieler]

here it's still different

[denieler]

@javier-delgado I found why we had a difference in generated snapshots for flex-shrink-0. It appeared that in https://github.com/toptal/davinci/blob/master/packages/qa/src/configs/jest/jss-snapshot-serializer.cjs#L72 in the past we've been removing numeric pars from the class names that had format {name}-{name}-{number}. So the TW class flex-shrink-0 has this format, so it ends up as flex-shrink in the snapshot. However, the new TS class shrink-0 does not match this pattern, so it is rendered as shrink-0 without the numeric part being cut. So all differences I've mentioned before look legit to me now 👍

Regarding Davinci serializer, I think we can keep it for now until we migrate all the components to TW or the new Base UI

[github-actions]

🗑️ Storybook preview cleaned up

The preview deployment has been automatically removed since this PR was closed.