[FF-7] Migrate Tabs to Tailwind #4874

rocodesign · 2025-12-10T11:55:04Z

Description

Migrate Tabs to Tailwind

How to test

Temploy

can be tested on staff-portal in this PR
https://github.com/toptal/staff-portal/pull/15126

Screenshots

There's a single slight change from master due to positioning of the icons that was off
https://happo.io/a/431/p/1194/compare/master-2025-12-10/after-changes5

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 · 2025-12-10T11:55:08Z

🦋 Changeset detected

Latest commit: bebf01b

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

This PR includes changesets to release 2 packages

Name	Type
@toptal/picasso-tabs	Major
@toptal/picasso	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 · 2025-12-10T12:11:19Z

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions · 2025-12-10T12:28:16Z

🎉 Alpha packages are ready!

PR: #4874
Triggered by: @rocodesign
Workflow run: 20098358312

Installation commands:
yarn add @toptal/picasso-tailwind@3.0.1-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-shared@15.0.1-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-modal-context@1.0.2-alpha-ff-7-763b46173.0
yarn add @toptal/base-tailwind@1.0.1-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-typography@4.0.5-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-container@3.1.3-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-icons@1.15.1-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-link@3.0.8-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-tooltip@2.0.5-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-input-adornment@3.0.17-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-loader@3.0.5-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-paper@4.0.5-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-popper@2.0.2-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-outlined-input@4.1.10-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-typography-overflow@4.0.6-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-grid@5.0.18-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-input@4.1.10-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-logo@2.0.17-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-collapse@3.0.4-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-tag@4.0.19-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-list@5.0.19-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-image@3.0.5-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-timepicker@4.1.10-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-alert@3.0.42-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-avatar@6.1.19-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-rating@3.0.18-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-form-layout@1.0.3-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-menu@3.0.25-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-user-badge@5.1.20-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-dropdown@4.2.5-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-form@6.3.10-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-avatar-upload@3.0.35-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-fade@1.0.9-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-form-label@1.0.4-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-select@4.1.10-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-number-input@4.2.10-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-radio@5.0.21-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-autocomplete@5.2.10-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-checkbox@5.0.21-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-badge@3.0.6-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-tagselector@3.3.10-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-button@4.0.31-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-backdrop@1.0.10-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-switch@4.0.14-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-file-input@4.0.30-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-modal@3.2.10-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-calendar@4.1.13-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-dropzone@5.0.31-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-prompt-modal@2.1.10-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-date-picker@3.2.10-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-accordion@3.0.30-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-password-input@5.1.10-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-skeleton-loader@1.0.67-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-table@3.0.33-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-helpbox@5.0.31-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-page@5.4.15-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-section@5.1.15-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-tree-view@3.0.43-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-carousel@4.0.31-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-pagination@4.0.32-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-tabs@5.0.23-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-slider@4.0.7-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-timeline@5.0.7-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-breadcrumbs@3.0.19-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-note@4.0.6-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-overview-block@4.0.7-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-environment-banner@3.0.1-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-slide@1.0.4-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-amount@1.0.12-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-quote@2.0.8-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-drawer@3.0.43-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-show-more@2.0.30-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-date-select@1.0.80-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-account-select@3.0.26-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-step@4.0.18-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-empty-state@2.0.21-alpha-ff-7-763b46173.0
yarn add @toptal/picasso@54.0.12-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-utils@3.1.1-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-tailwind-merge@2.0.4-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-charts@59.0.6-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-pictograms@5.2.1-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-notification@4.0.31-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-provider@5.0.3-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-test-utils@1.1.2-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-application-update-notification@2.0.42-alpha-ff-7-763b46173.0
yarn add @topkit/analytics-charts@56.0.9-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-forms@73.2.12-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-query-builder@8.0.32-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-rich-text-editor@17.2.11-alpha-ff-7-763b46173.0
yarn add @toptal/picasso-codemod@6.0.1-alpha-ff-7-763b46173.0

These alpha packages were built from the latest commit in this PR.

github-actions · 2025-12-10T12:31:51Z

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

denys-medynskyi

Looks good 👍

github-actions · 2025-12-10T18:31:15Z

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap

denieler · 2025-12-11T09:20:40Z

packages/base/Tabs/src/Tabs/Tabs.tsx

+            onChange as (
+              event: React.ChangeEvent<{}> | null,
+              value: TabsValueType
+            ) => void


do we need this type casting?

Let me see if I can find a workaround I just wanted to fix it so that I can test visually so I didn't look into it further

denieler · 2025-12-11T09:31:53Z

by some reason storybook link is not available 😞 @rocodesign can you please regenerate it? 🙇

github-actions · 2025-12-11T15:22:48Z

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

github-actions · 2025-12-17T18:54:25Z

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

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

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

rocodesign self-assigned this Dec 10, 2025

rocodesign requested a review from a team as a code owner December 10, 2025 11:55

rocodesign force-pushed the ff-7 branch from 85075f1 to 763b461 Compare December 10, 2025 12:16

denys-medynskyi approved these changes Dec 10, 2025

View reviewed changes

[FF-7] Migrate Tabs to Tailwind

7bb49ef

rocodesign force-pushed the ff-7 branch from 763b461 to 7bb49ef Compare December 10, 2025 18:14

denieler reviewed Dec 11, 2025

View reviewed changes

packages/base/Tabs/src/Tab/__snapshots__/test.tsx.snap Show resolved Hide resolved

denieler reviewed Dec 11, 2025

View reviewed changes

Updat Tabs types

5e79bbc

Reverted Tabs types

bebf01b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[FF-7] Migrate Tabs to Tailwind #4874

[FF-7] Migrate Tabs to Tailwind #4874

rocodesign commented Dec 10, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Dec 10, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 10, 2025

Uh oh!

github-actions bot commented Dec 10, 2025

Uh oh!

github-actions bot commented Dec 10, 2025

Uh oh!

denys-medynskyi left a comment

Uh oh!

github-actions bot commented Dec 10, 2025

Uh oh!

Uh oh!

denieler Dec 11, 2025

Uh oh!

rocodesign Dec 11, 2025

Uh oh!

denieler commented Dec 11, 2025

Uh oh!

github-actions bot commented Dec 11, 2025

Uh oh!

github-actions bot commented Dec 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[FF-7] Migrate Tabs to Tailwind #4874

Are you sure you want to change the base?

[FF-7] Migrate Tabs to Tailwind #4874

Conversation

rocodesign commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How to test

Screenshots

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 Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Dec 10, 2025

Uh oh!

github-actions bot commented Dec 10, 2025

Uh oh!

github-actions bot commented Dec 10, 2025

Uh oh!

denys-medynskyi left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 10, 2025

Uh oh!

Uh oh!

denieler Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

rocodesign Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

denieler commented Dec 11, 2025

Uh oh!

github-actions bot commented Dec 11, 2025

Uh oh!

github-actions bot commented Dec 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rocodesign commented Dec 10, 2025 •

edited

Loading

changeset-bot bot commented Dec 10, 2025 •

edited

Loading