[PF-2145] Migrate Backdrop, Fade, Slide to tailwind

[azebich]

PF-2145

Description

Removes react-transition-group from Fade, Slide and Backdrop, replacing it with Tailwind class-driven transitions.

• Utils — adds useTransitionStatus + getTransitionTimeouts: a timer-driven replacement for rtg's <Transition> state machine. It settles on setTimeout(timeout) exactly as rtg does when no addEndListener is given, so callback timing is identical and fake timers still drive it in jsdom. Supports the full lifecycle (onEnter/onEntering/onEntered/onExit/onExiting/onExited, appear, unmountOnExit) so Collapse can reuse it later. Also adds getElementRef, which types the ReactElement.ref lookup in one place and replaces the @ts-expect-error suppressions in Fade/Slide.
• Fade / Slide — reimplemented on top of the hook. Hidden state is now expressed with opacity-0 / translate-* / invisible classes instead of inline visibility/opacity/transform styles, merged via twMerge. Public props, the direction mapping and callback timing are unchanged. Fixes the object form of timeout ({ enter, exit }), which previously produced an invalid inline [object Object]ms duration.
• Backdrop — unchanged structurally (still composes Fade), so rtg leaves its dependency tree. Also merges the consumer className via twMerge so consumer utilities win on conflicts, and drops a redundant bg-black plus a dead -webkit-tap-highlight-color-transparent class (no visual change).
• picasso-tailwind-merge — drops the react-transition-group dependency it never imported.

react-transition-group stays in the workspace via Collapse (out of scope for this story) and transitively via recharts → react-smooth.

How to test

• Temploy
• Storybook → Transitions → Fade: toggle the button, the content fades in/out over 350ms.
• Storybook → Slide: toggle the button, the content slides in/out; verify all four direction values.
• Storybook → Backdrop: default and invisible variants still cover the viewport and fade on open/close.
• pnpm test:unit -- packages/base/Fade packages/base/Slide packages/base/Backdrop packages/base/Utils

Screenshots

No visual change — transitions are visually identical, only the mechanism changed. These stories run with takeScreenshot: false, so there is no Happo coverage to diff.

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 — N/A

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 5b11d04

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

This PR includes changesets to release 82 packages

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

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/5079/

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/5079/

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

[github-actions]

🗑️ Storybook preview cleaned up

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