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

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

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 8 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!

2 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!

2 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