Skip to content

Feature/picasso modernization temp#4978

Draft
vedrani wants to merge 23 commits into
feature/pf-1992-migration-orchestratorfrom
feature/picasso-modernization-temp
Draft

Feature/picasso modernization temp#4978
vedrani wants to merge 23 commits into
feature/pf-1992-migration-orchestratorfrom
feature/picasso-modernization-temp

Conversation

@vedrani

@vedrani vedrani commented May 26, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Collaborator

[FX-NNNN]

Description

Describe the changes and motivations for the pull request.

How to test

  • Temploy
  • FIXME: Add the steps describing how to verify your changes

Screenshots

Before. After.
Insert screenshots or screen recordings Insert screenshots or screen recordings

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.

@changeset-bot

changeset-bot Bot commented May 26, 2026 •
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: c46ff96

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

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

@vedrani vedrani changed the base branch from master to feature/pf-1992-migration-orchestrator May 26, 2026 08:16
@github-actions

github-actions Bot commented May 26, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor
Fails
🚫

The pull request title is missing a Jira issue code. Correct format '[ASD-123] Add a cool feature'. If you're working without a Jira issue then add a 'no-jira' label to your pull request.
🚫 Please assign someone to this PR before merging.

Generated by 🚫 dangerJS against c46ff96

@vedrani vedrani force-pushed the feature/picasso-modernization-temp branch from cf44677 to bdaa74e Compare May 28, 2026 08:20
@github-actions

github-actions Bot commented May 29, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request May 29, 2026
@github-actions
Sync: PR #4978 Preview
b81e288
@github-actions

github-actions Bot commented May 29, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request May 29, 2026
@github-actions
Sync: PR #4978 Preview
a258110
@github-actions

github-actions Bot commented May 29, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request May 29, 2026
@github-actions
Sync: PR #4978 Preview
aba7fcb
@github-actions

github-actions Bot commented May 30, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request May 30, 2026
@github-actions
Sync: PR #4978 Preview
470b113
@vedrani vedrani force-pushed the feature/picasso-modernization-temp branch from 9e14fb4 to 4e352de Compare June 1, 2026 13:51
@github-actions

github-actions Bot commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request Jun 3, 2026
@github-actions
Sync: PR #4978 Preview
7d05344
@github-actions

github-actions Bot commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request Jun 3, 2026
@github-actions
Sync: PR #4978 Preview
0f8fc94
@github-actions

github-actions Bot commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request Jun 3, 2026
@github-actions
Sync: PR #4978 Preview
1183a02
@github-actions

github-actions Bot commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request Jun 3, 2026
@github-actions
Sync: PR #4978 Preview
43d1b8f
@vedrani vedrani force-pushed the feature/picasso-modernization-temp branch 2 times, most recently from ae31ce9 to a1b0b32 Compare June 5, 2026 07:18
@github-actions

github-actions Bot commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request Jun 8, 2026
@github-actions
Sync: PR #4978 Preview
4efac32
@github-actions

github-actions Bot commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request Jun 9, 2026
@github-actions
Sync: PR #4978 Preview
32d7b26
@github-actions

github-actions Bot commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request Jun 9, 2026
@github-actions
Sync: PR #4978 Preview
e59f216
@vedrani vedrani force-pushed the feature/picasso-modernization-temp branch from 04ba6c3 to fe18ec8 Compare June 10, 2026 10:34
@vedrani vedrani force-pushed the feature/picasso-modernization-temp branch from fe18ec8 to 3d5041f Compare June 12, 2026 09:42
@github-actions

github-actions Bot commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request Jun 12, 2026
@github-actions
Sync: PR #4978 Preview
0d8b4a0
@azebich
[PF-1994] Migrate picasso-charts to @base-ui/react + Tailwind (#5011)
3127f66 
* [PF-1994] Migrate picasso-charts to @base-ui/react + Tailwind

Tier 4 component. See PR description for prop-surface diff,
import diff, and Happo summary.

Refs: PF-1994

* [PF-1994] Migrate BarChartIndicator to @base-ui/react + Tailwind

* [PF-1994] Migrate picasso-charts

remove migration comments

* [PF-1994] Migrate picasso-charts
remove styles.ts file
@github-actions

github-actions Bot commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request Jun 16, 2026
@github-actions
Sync: PR #4978 Preview
1f47545
@github-actions

github-actions Bot commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request Jun 17, 2026
@github-actions
Sync: PR #4978 Preview
82b897d
@github-actions

github-actions Bot commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request Jun 17, 2026
@github-actions
Sync: PR #4978 Preview
4c4fc92
@github-actions

github-actions Bot commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request Jun 17, 2026
@github-actions
Sync: PR #4978 Preview
420d41b
@dulishkovych @claude
[PF-1994] Migrate Dropdown to @base-ui/react + Tailwind (#5008)
1ef693d 
* [PF-1994] Migrate Dropdown to @base-ui/react + Tailwind

Tier 3 component. See PR description for prop-surface diff,
import diff, and Happo summary.

Refs: PF-1994

* [PF-1994] Migrate Dropdown to @base-ui/react + Tailwind

Tier 3 component. See PR description for prop-surface diff,
import diff, and Happo summary.

Refs: PF-1994

[ci-iter 3]

* [PF-1994] Migrate Dropdown to @base-ui/react + Tailwind

Tier 3 component. See PR description for prop-surface diff,
import diff, and Happo summary.

Refs: PF-1994

[ci-iter 5]

* [PF-1994] Use shared ClickAwayListener in Dropdown

The migration hand-rolled a local useClickAway hook (plus a wrapper
<div> kept only for a since-resolved MUI bug) to replace MUI's
ClickAwayListener. But @toptal/picasso-utils already exports a
ClickAwayListener -- the MUI-free replacement that DatePicker and Menu
use -- so swap to it for consistency with the rest of the library.

The shared component is also more robust than the local hook: it adds a
root-scrollbar click guard, portal / React-tree awareness, touch-move
cancellation, and an activation delay so the opening interaction is not
counted as a click-away. It clones its child, so no extra DOM node is
introduced.

Removes use-click-away.ts (the shared component carries its own tests).
Render-neutral: verified via Jest (unchanged DOM snapshot) and a local
Happo run (no new diffs).

Refs: PF-1994

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* [PF-1994] Restore Dropdown open animation via CSS @starting-style

The MUI <Grow> replacement was a no-op: growIn flipped in a pre-paint
layout effect (collapsed frame never painted) and scale sat on Tailwind
v4's `scale` property, which transition-[opacity,transform] did not
animate. Replace the growIn state machine with a CSS @starting-style
entry transition (transition-[opacity,scale] + starting:scale-75
starting:opacity-0); the resting state is scale-100 so static captures
stay stable. Drops the useIsomorphicLayoutEffect hack.

Verified: Jest, lint, tsc, and a local Happo run (dropdown snapshots
byte-identical to the settled baseline -- no new diffs). A TODO notes
the @floating-ui/react Popper migration must trigger the entry
animation only once positioned.

Refs: PF-1994

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* [PF-1994] Import PopperPlacementType from picasso-popper

Dropdown redefined the 12-member placement union locally, duplicating the
identical type @toptal/picasso-popper already declares. Surface it from the
Popper package entry and import it in Dropdown instead of the local copy.

The type is byte-identical in the current popper.js Popper and in the
@floating-ui/react migration (PR #5001), and #5001 leaves Popper/index.ts
untouched, so this rebases cleanly. PopperOptions stays on popper.js for
now; it has no native package export until #5001 and is repointed then.

Also refresh the Dropdown changeset to match the landed implementation
(shared ClickAwayListener, @starting-style open animation, imported
PopperPlacementType).

Refs: PF-1994

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* [PF-1994] Migrate Dropdown to @base-ui/react + Tailwind

Tier 3 component. See PR description for prop-surface diff,
import diff, and Happo summary.

Refs: PF-1994

[review-iter 2] address review feedback

* [PF-1994] Migrate Dropdown to @base-ui/react + Tailwind

Tier 3 component. See PR description for prop-surface diff,
import diff, and Happo summary.

Refs: PF-1994

[cleanup] strip review-aid comments before merge

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request Jun 18, 2026
@github-actions
Sync: PR #4978 Preview
710954e
@azebich
[PF-1994] Migrate Modal fix shades (#5015)
c46ff96 
* [PF-1994] Migrate Modal fix shades

Instead of showing them conditionally we animate them with opacity

* [PF-1994] Migrate Modal update changeset

* [PF-1994] Migrate Modal update cypress

* [PF-1994] Migrate Modal tweak cypress further

* [PF-1994] Migrate Modal tweak cypress
@github-actions

github-actions Bot commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions Bot added a commit that referenced this pull request Jun 19, 2026
@github-actions
Sync: PR #4978 Preview
831a4b7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@vedrani @azebich @dulishkovych