[PF-2005] Create Code Connect config Component Library V2 by Kosov234 · Pull Request #5016 · toptal/picasso

Kosov234 · 2026-06-22T09:08:56Z

[PF-2005](https://toptal-core.atlassian.net/browse/PF-2005?search_id=a20599ed-15c9-4f4e-bc7c-c62e5cce743d)

Description

Creating a Code Connect config for 10 Picasso components

How to test

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

Development checks

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

You have no extra requests.
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

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

When to comment (neither ✅ nor ❌)

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

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

How to handle the comments?

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

changeset-bot · 2026-06-22T09:09:02Z

⚠️ No Changeset found

Latest commit: 2ba6acf

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

azebich · 2026-06-23T08:26:06Z

+    <Accordion expanded={expanded} borders={borders} content={<p>Content</p>}>
+      Summary
+    </Accordion>


would it make sense to have these examples similar to the stories we have for the components?
(Asking as for example here we have also Accordion.Summary and Accordion.Details)

hmmm we could even re-use the examples from stories?

Good catch, fixed in 6674432

When it comes to Storybook examples - the issue is that in this case the code examples in Figma will look like <StorybookExampleName/> which eliminates the whole point of Code Connect

github-actions · 2026-06-23T08:48:36Z

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions · 2026-06-23T09:53:10Z

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions · 2026-06-23T11:28:41Z

	Fails
🚫	Commit `62109fc` does not meet requirements of Commit Message Quality: body lines must not exceed 79 characters

Generated by 🚫 dangerJS against 2ba6acf

github-actions · 2026-06-23T11:46:59Z

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

* [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

* [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>

* [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

…nd (#5010) * [PF-1994] Migrate picasso-rich-text-editor 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 picasso-rich-text-editor to @base-ui/react + Tailwind Tier 4 component. See PR description for prop-surface diff, import diff, and Happo summary. Refs: PF-1994 [review-iter 1] address review feedback * [PF-1994] Migrate picass-rich-text-editor fix tests and use tokens * [PF-1994] Migrate picasso-rich-text-editor Fix unordered list bullet visibility --------- Co-authored-by: Ante Zebic <a.zebic@toptal.com>

* [PF-1994] Migrate FileInput to @base-ui/react + Tailwind Tier 2 component. See PR description for prop-surface diff, import diff, and Happo summary. Refs: PF-1994 * Fix FileInput changeset: patch bump, remove empty changeset file Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Inline styles into components --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

) * [PF-1994] Migrate OutlinedInput to @base-ui/react + Tailwind Tier 3 component. See PR description for prop-surface diff, import diff, and Happo summary. Refs: PF-1994 Fix OutlinedInput infinite-render loop and audit violations - Wrap setControlRef in useCallback([inputRef]) — prevents React from cycling the callback ref on every render, which caused an infinite loop in Happo's production-mode Storybook - Route all remaining InputHTMLAttributes (aria-*, name, id, tabIndex, form, pattern, min, max, step, accept, multiple, list, etc.) to the control element via nativeInputAttrs spread instead of landing them on the outline <div> where they silently did nothing - Change InputBaseComponentProps index signature from `any` to `unknown` (ESLint @typescript-eslint/no-explicit-any violation) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> [PF-1994] Migrate OutlinedInput to @base-ui/react + Tailwind Tier 3 component. See PR description for prop-surface diff, import diff, and Happo summary. Refs: PF-1994 * Address PR review comments * Simplify handleRootClick * Update snapshots after OutlinedInput migration * Update DateSelect snapshots after OutlinedInput migration

* [PF-1994] Migrate Accordion 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 Accordion 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 Accordion 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 1] address review feedback * [PF-1994] Migrate Accordion to @base-ui/react + Tailwind Tier 3 component. See PR description for prop-surface diff, import diff, and Happo summary. Fix collapsed-panel width: Base UI sets the native `hidden` attribute (display:none) on the collapsed panel, dropping its content out of layout and letting a flex-item Accordion shrink to its summary width. Keep the panel in layout while hidden ([&[hidden]]:block/h-0/invisible). Fix disabled arrow color: drop `disabled` on the expand-icon ButtonAction so the arrow stays full-color (graphite-700) like master instead of the opacity-[.48] dimming; the Accordion is still disabled via Root/Item. Refs: PF-1994 * [PF-1994] Migrate Accordion Fix disabled state for dependent components * [PF-1994] Migrate Accordion Fix failing lint from Page package * [PF-1994] Migrate Accordion 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 Accordion remove unused style file * [PF-1994] Migrate Accordion fix transitionProps timeout * [PF-1994] Migrate Accordion Tweak transitionProps * [PF-1994] Migrate Accordion 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 * [PF-1994] Migrate Accordion 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 Accordion 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: Vedran Ivanac <vedran.ivanac@toptal.com>

- Fix all template literal URLs (replaced ${FILE_KEY} with inlined key) - Fix wrong node IDs pointing to variant instances instead of component sets: Modal, Notification, Note, Timeline, Loader, Tooltip, OverviewBlock - Fix wrong node IDs pointing to design frames instead of components: Table (-> Table Cell), Switch (-> Switches), Stepper, PageHead, List (-> List Item) - Fix invalid Figma property references: HelpBox Color, Tooltip Content, EmptyState Title, QueryBuilder Loading, Input Show Error, Section/EmptyState unsupported expression patterns - All 95 Code Connect files now pass validation (npx figma connect publish --dry-run)

picasso-tailwind-merge source does not import from picasso-utils. The stale dep + tsconfig reference created a false edge in the Nx task graph that caused a circular dependency, which in turn caused Nx to skip building picasso-tailwind-merge on a cold CI cache. Packages that reference picasso-tailwind-merge in their tsconfig (e.g. Typography) then failed because tsc -b could not find the tailwind-merge artifacts. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

github-actions · 2026-06-30T10:00:04Z

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions · 2026-07-01T08:35:06Z

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

Kosov234 self-assigned this Jun 22, 2026

Kosov234 requested a review from a team as a code owner June 22, 2026 09:08

Kosov234 added the WIP Work in Progress (Don't review) label Jun 22, 2026

Kosov234 changed the base branch from feature/picasso-modernization-temp to master June 22, 2026 09:10

Kosov234 force-pushed the pf-2005-cover-base-design-system-picasso-with-code-connect-top-20 branch 2 times, most recently from 268d14d to f5bd3e5 Compare June 22, 2026 09:20

azebich reviewed Jun 23, 2026

View reviewed changes

github-actions Bot added a commit that referenced this pull request Jun 23, 2026

Sync: PR #5016 Preview

b0e58a0

github-actions Bot added a commit that referenced this pull request Jun 23, 2026

Sync: PR #5016 Preview

dd1a170

github-actions Bot added a commit that referenced this pull request Jun 23, 2026

Sync: PR #5016 Preview

d3b9f95

Kosov234 changed the title ~~[PF-2005] Create Code Connect config for 10 Picasso components~~ [PF-2005] Create Code Connect config Component Library V2 Jun 24, 2026

Kosov234 force-pushed the pf-2005-cover-base-design-system-picasso-with-code-connect-top-20 branch from 78685ef to 4ab6f6f Compare June 26, 2026 08:48

Kosov234 changed the base branch from master to feature/picasso-modernization-temp June 26, 2026 08:48

vedrani added 12 commits June 29, 2026 14:16

Planning docs

fa4206f

Planning docs

551f5a4

Planning docs

4b3c749

Orchestrator

81d14f2

Orchestrator fix

38b15ce

Orchestrator fix #2

3b29cd5

Orchestrator fix #3

9b53b7e

Orchestrator fix #4

938b093

Orchestrator fix #5

312c890

Orchestrator fix #6

6984aa6

Orchestrator fix #8

3767585

Orchestrator fix #9

1268d7a

vedrani and others added 15 commits June 29, 2026 18:05

[PF-1994] Migrate Utils to @base-ui/react + Tailwind (#4997)

a51608d

[PF-1994] Migrate Notification to @base-ui/react + Tailwind (#4995)

df652ba

[PF-1994] Migrate Tabs to @base-ui/react + Tailwind (#4996)

f013124

[PF-1994] Migrate Modal to @base-ui/react + Tailwind (#4993)

34304fb

[PF-1994] Migrate Drawer to @base-ui/react + Tailwind V2 (#4994)

8b89ead

[PF-1994] Migrate Page to @base-ui/react + Tailwind (#5003)

f65ef59

Regenerate pnpm-lock.yaml after rebase

e86978f

Sync tsconfig references after rebase

30547b5

vedrani force-pushed the feature/picasso-modernization-temp branch from 042ade3 to 30547b5 Compare June 30, 2026 07:07

Kosov234 added 6 commits June 30, 2026 12:00

Add Figma Code Connect infrastructure

7427a85

Add Figma Code Connect for top 10 Picasso components

c461f21

Fix Accordion Code Connect to use compound component pattern

d196a66

Add Figma Code Connect for DatePicker component

c0c2bb8

Properly map List styleType

ea4d5e1

Kosov234 force-pushed the pf-2005-cover-base-design-system-picasso-with-code-connect-top-20 branch from 4ab6f6f to ea4d5e1 Compare June 30, 2026 09:05

github-actions Bot added a commit that referenced this pull request Jun 30, 2026

Sync: PR #5016 Preview

7e882d6

Add new Figma Code Connect configs and update old ones

2ba6acf

github-actions Bot added a commit that referenced this pull request Jul 1, 2026

Sync: PR #5016 Preview

d2c24f6

vedrani force-pushed the feature/picasso-modernization-temp branch from ef610dd to de97766 Compare July 23, 2026 12:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[PF-2005] Create Code Connect config Component Library V2 - #5016

[PF-2005] Create Code Connect config Component Library V2#5016
Kosov234 wants to merge 157 commits into
feature/picasso-modernization-tempfrom
pf-2005-cover-base-design-system-picasso-with-code-connect-top-20

Kosov234 commented Jun 22, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jun 22, 2026 •

edited

Loading

Uh oh!

azebich Jun 23, 2026

Uh oh!

Kosov234 Jun 23, 2026

Uh oh!

github-actions Bot commented Jun 23, 2026

Uh oh!

github-actions Bot commented Jun 23, 2026

Uh oh!

github-actions Bot commented Jun 23, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 23, 2026

Uh oh!

github-actions Bot commented Jun 30, 2026

Uh oh!

github-actions Bot commented Jul 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

Kosov234 commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How to test

Development checks

When to approve? ✅

When to request changes? ❌

When to comment (neither ✅ nor ❌)

How to handle the comments?

Uh oh!

changeset-bot Bot commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

azebich Jun 23, 2026

Choose a reason for hiding this comment

Uh oh!

Kosov234 Jun 23, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 23, 2026

Uh oh!

github-actions Bot commented Jun 23, 2026

Uh oh!

github-actions Bot commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 23, 2026

Uh oh!

github-actions Bot commented Jun 30, 2026

Uh oh!

github-actions Bot commented Jul 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Kosov234 commented Jun 22, 2026 •

edited

Loading

changeset-bot Bot commented Jun 22, 2026 •

edited

Loading

github-actions Bot commented Jun 23, 2026 •

edited

Loading