[FF-7] Migrate Tabs #4768

dmaklygin · 2025-06-04T15:18:08Z

Description

Migrate tabs to Mui/Base

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

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

PR commands

List of available commands:

@toptal-bot run package:alpha-release - Release alpha version
@toptal-anvil ping reviewers - Ping for reviews

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-06-04T15:18:12Z

🦋 Changeset detected

Latest commit: 2a3da7c

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

dmaklygin · 2025-06-04T15:21:44Z

@toptal-bot run package:alpha-release

dmaklygin · 2025-06-04T15:42:52Z

@toptal-bot run package:alpha-release

toptal-devbot · 2025-06-04T15:51:28Z

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@56.0.7-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/base-tailwind@1.0.1-alpha-ff-7-tabs-19babbfd6.141+19babbfd6
yarn add @toptal/picasso@53.1.4-alpha-ff-7-tabs-19babbfd6.4+19babbfd6
yarn add @toptal/picasso-accordion@3.0.21-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-account-select@3.0.17-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-alert@3.0.33-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-amount@1.0.11-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-application-update-notification@2.0.33-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-autocomplete@5.1.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-avatar@6.1.11-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-avatar-upload@3.0.25-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-backdrop@1.0.10-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-badge@3.0.5-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-breadcrumbs@3.0.11-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-button@4.0.22-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-calendar@4.1.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-carousel@4.0.22-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-charts@59.0.5-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-checkbox@5.0.13-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-codemod@6.0.1-alpha-ff-7-tabs-19babbfd6.397+19babbfd6
yarn add @toptal/picasso-collapse@3.0.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-container@3.1.3-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-date-picker@3.1.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-date-select@1.0.70-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-drawer@3.0.33-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-dropdown@4.2.3-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-dropzone@5.0.21-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-empty-state@2.0.14-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-environment-banner@3.0.1-alpha-ff-7-tabs-19babbfd6.192+19babbfd6
yarn add @toptal/picasso-fade@1.0.9-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-file-input@4.0.20-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-form@6.2.2-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-form-label@1.0.3-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-form-layout@1.0.3-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-forms@73.1.7-alpha-ff-7-tabs-19babbfd6.2+19babbfd6
yarn add @toptal/picasso-grid@5.0.10-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-helpbox@5.0.22-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-icons@1.12.2-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-image@3.0.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-input@4.0.21-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-input-adornment@3.0.11-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-link@3.0.6-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-list@5.0.11-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-loader@3.0.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-logo@2.0.10-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-menu@3.0.16-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-modal@3.2.1-alpha-ff-7-tabs-19babbfd6.4+19babbfd6
yarn add @toptal/picasso-modal-context@1.0.2-alpha-ff-7-tabs-19babbfd6.456+19babbfd6
yarn add @toptal/picasso-note@4.0.5-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-notification@4.0.22-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-number-input@4.1.5-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-outlined-input@4.0.21-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-overview-block@4.0.5-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-page@5.4.5-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-pagination@4.0.23-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-paper@4.0.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-password-input@5.0.21-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-pictograms@5.1.2-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-popper@1.1.1-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-prompt-modal@2.0.34-alpha-ff-7-tabs-19babbfd6.4+19babbfd6
yarn add @toptal/picasso-provider@5.0.1-alpha-ff-7-tabs-19babbfd6.275+19babbfd6
yarn add @toptal/picasso-query-builder@8.0.21-alpha-ff-7-tabs-19babbfd6.4+19babbfd6
yarn add @toptal/picasso-quote@2.0.7-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-radio@5.0.13-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-rating@3.0.11-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-rich-text-editor@17.1.1-alpha-ff-7-tabs-19babbfd6.2+19babbfd6
yarn add @toptal/picasso-section@5.1.6-alpha-ff-7-tabs-19babbfd6.6+19babbfd6
yarn add @toptal/picasso-select@4.0.21-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-shared@15.0.1-alpha-ff-7-tabs-19babbfd6.354+19babbfd6
yarn add @toptal/picasso-show-more@2.0.21-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-skeleton-loader@1.0.58-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-slide@1.0.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-slider@4.0.5-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-step@4.0.10-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-switch@4.0.12-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-table@3.0.23-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-tabs@5.0.15-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-tag@4.0.11-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-tagselector@3.2.5-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-tailwind@3.0.1-alpha-ff-7-tabs-19babbfd6.141+19babbfd6
yarn add @toptal/picasso-tailwind-merge@2.0.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-test-utils@1.1.2-alpha-ff-7-tabs-19babbfd6.354+19babbfd6
yarn add @toptal/picasso-timeline@5.0.5-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-timepicker@4.0.22-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-tooltip@2.0.3-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-tree-view@3.0.34-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-typography@4.0.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-typography-overflow@4.0.4-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-user-badge@5.1.12-alpha-ff-7-tabs-19babbfd6.8+19babbfd6
yarn add @toptal/picasso-utils@3.1.1-alpha-ff-7-tabs-19babbfd6.8+19babbfd6

dmaklygin · 2025-06-06T11:59:10Z

@toptal-bot run package:alpha-release

toptal-devbot · 2025-06-06T12:07:44Z

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@56.0.7-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/base-tailwind@1.0.1-alpha-ff-7-tabs-17eb872bb.146+17eb872bb
yarn add @toptal/picasso@53.1.4-alpha-ff-7-tabs-17eb872bb.9+17eb872bb
yarn add @toptal/picasso-accordion@3.0.21-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-account-select@3.0.17-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-alert@3.0.33-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-amount@1.0.11-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-application-update-notification@2.0.33-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-autocomplete@5.1.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-avatar@6.1.11-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-avatar-upload@3.0.25-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-backdrop@1.0.10-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-badge@3.0.5-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-breadcrumbs@3.0.11-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-button@4.0.22-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-calendar@4.1.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-carousel@4.0.22-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-charts@59.0.5-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-checkbox@5.0.13-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-codemod@6.0.1-alpha-ff-7-tabs-17eb872bb.402+17eb872bb
yarn add @toptal/picasso-collapse@3.0.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-container@3.1.3-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-date-picker@3.1.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-date-select@1.0.70-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-drawer@3.0.33-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-dropdown@4.2.3-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-dropzone@5.0.21-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-empty-state@2.0.14-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-environment-banner@3.0.1-alpha-ff-7-tabs-17eb872bb.197+17eb872bb
yarn add @toptal/picasso-fade@1.0.9-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-file-input@4.0.20-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-form@6.2.2-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-form-label@1.0.3-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-form-layout@1.0.3-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-forms@73.1.7-alpha-ff-7-tabs-17eb872bb.7+17eb872bb
yarn add @toptal/picasso-grid@5.0.10-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-helpbox@5.0.22-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-icons@1.12.2-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-image@3.0.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-input@4.0.21-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-input-adornment@3.0.11-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-link@3.0.6-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-list@5.0.11-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-loader@3.0.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-logo@2.0.10-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-menu@3.0.16-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-modal@3.2.1-alpha-ff-7-tabs-17eb872bb.9+17eb872bb
yarn add @toptal/picasso-modal-context@1.0.2-alpha-ff-7-tabs-17eb872bb.461+17eb872bb
yarn add @toptal/picasso-note@4.0.5-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-notification@4.0.22-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-number-input@4.1.5-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-outlined-input@4.0.21-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-overview-block@4.0.5-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-page@5.4.5-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-pagination@4.0.23-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-paper@4.0.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-password-input@5.0.21-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-pictograms@5.1.2-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-popper@1.1.1-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-prompt-modal@2.0.34-alpha-ff-7-tabs-17eb872bb.9+17eb872bb
yarn add @toptal/picasso-provider@5.0.1-alpha-ff-7-tabs-17eb872bb.280+17eb872bb
yarn add @toptal/picasso-query-builder@8.0.21-alpha-ff-7-tabs-17eb872bb.9+17eb872bb
yarn add @toptal/picasso-quote@2.0.7-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-radio@5.0.13-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-rating@3.0.11-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-rich-text-editor@17.1.1-alpha-ff-7-tabs-17eb872bb.7+17eb872bb
yarn add @toptal/picasso-section@5.1.6-alpha-ff-7-tabs-17eb872bb.11+17eb872bb
yarn add @toptal/picasso-select@4.0.21-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-shared@15.0.1-alpha-ff-7-tabs-17eb872bb.359+17eb872bb
yarn add @toptal/picasso-show-more@2.0.21-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-skeleton-loader@1.0.58-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-slide@1.0.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-slider@4.0.5-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-step@4.0.10-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-switch@4.0.12-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-table@3.0.23-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-tabs@5.0.15-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-tag@4.0.11-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-tagselector@3.2.5-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-tailwind@3.0.1-alpha-ff-7-tabs-17eb872bb.146+17eb872bb
yarn add @toptal/picasso-tailwind-merge@2.0.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-test-utils@1.1.2-alpha-ff-7-tabs-17eb872bb.359+17eb872bb
yarn add @toptal/picasso-timeline@5.0.5-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-timepicker@4.0.22-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-tooltip@2.0.3-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-tree-view@3.0.34-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-typography@4.0.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-typography-overflow@4.0.4-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-user-badge@5.1.12-alpha-ff-7-tabs-17eb872bb.13+17eb872bb
yarn add @toptal/picasso-utils@3.1.1-alpha-ff-7-tabs-17eb872bb.13+17eb872bb

dmaklygin · 2025-06-06T15:34:52Z

@toptal-bot run package:alpha-release

toptal-devbot · 2025-06-06T15:43:30Z

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@56.0.7-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/base-tailwind@1.0.1-alpha-ff-7-tabs-2a3da7cea.149+2a3da7cea
yarn add @toptal/picasso@53.1.4-alpha-ff-7-tabs-2a3da7cea.12+2a3da7cea
yarn add @toptal/picasso-accordion@3.0.21-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-account-select@3.0.17-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-alert@3.0.33-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-amount@1.0.11-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-application-update-notification@2.0.33-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-autocomplete@5.1.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-avatar@6.1.11-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-avatar-upload@3.0.25-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-backdrop@1.0.10-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-badge@3.0.5-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-breadcrumbs@3.0.11-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-button@4.0.22-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-calendar@4.1.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-carousel@4.0.22-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-charts@59.0.5-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-checkbox@5.0.13-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-codemod@6.0.1-alpha-ff-7-tabs-2a3da7cea.405+2a3da7cea
yarn add @toptal/picasso-collapse@3.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-container@3.1.3-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-date-picker@3.1.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-date-select@1.0.70-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-drawer@3.0.33-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-dropdown@4.2.3-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-dropzone@5.0.21-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-empty-state@2.0.14-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-environment-banner@3.0.1-alpha-ff-7-tabs-2a3da7cea.200+2a3da7cea
yarn add @toptal/picasso-fade@1.0.9-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-file-input@4.0.20-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-form@6.2.2-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-form-label@1.0.3-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-form-layout@1.0.3-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-forms@73.1.7-alpha-ff-7-tabs-2a3da7cea.10+2a3da7cea
yarn add @toptal/picasso-grid@5.0.10-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-helpbox@5.0.22-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-icons@1.12.2-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-image@3.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-input@4.0.21-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-input-adornment@3.0.11-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-link@3.0.6-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-list@5.0.11-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-loader@3.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-logo@2.0.10-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-menu@3.0.16-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-modal@3.2.1-alpha-ff-7-tabs-2a3da7cea.12+2a3da7cea
yarn add @toptal/picasso-modal-context@1.0.2-alpha-ff-7-tabs-2a3da7cea.464+2a3da7cea
yarn add @toptal/picasso-note@4.0.5-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-notification@4.0.22-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-number-input@4.1.5-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-outlined-input@4.0.21-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-overview-block@4.0.5-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-page@5.4.5-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-pagination@4.0.23-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-paper@4.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-password-input@5.0.21-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-pictograms@5.1.2-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-popper@1.1.1-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-prompt-modal@2.0.34-alpha-ff-7-tabs-2a3da7cea.12+2a3da7cea
yarn add @toptal/picasso-provider@5.0.1-alpha-ff-7-tabs-2a3da7cea.283+2a3da7cea
yarn add @toptal/picasso-query-builder@8.0.21-alpha-ff-7-tabs-2a3da7cea.12+2a3da7cea
yarn add @toptal/picasso-quote@2.0.7-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-radio@5.0.13-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-rating@3.0.11-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-rich-text-editor@17.1.1-alpha-ff-7-tabs-2a3da7cea.10+2a3da7cea
yarn add @toptal/picasso-section@5.1.6-alpha-ff-7-tabs-2a3da7cea.14+2a3da7cea
yarn add @toptal/picasso-select@4.0.21-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-shared@15.0.1-alpha-ff-7-tabs-2a3da7cea.362+2a3da7cea
yarn add @toptal/picasso-show-more@2.0.21-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-skeleton-loader@1.0.58-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-slide@1.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-slider@4.0.5-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-step@4.0.10-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-switch@4.0.12-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-table@3.0.23-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-tabs@5.0.15-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-tag@4.0.11-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-tagselector@3.2.5-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-tailwind@3.0.1-alpha-ff-7-tabs-2a3da7cea.149+2a3da7cea
yarn add @toptal/picasso-tailwind-merge@2.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-test-utils@1.1.2-alpha-ff-7-tabs-2a3da7cea.362+2a3da7cea
yarn add @toptal/picasso-timeline@5.0.5-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-timepicker@4.0.22-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-tooltip@2.0.3-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-tree-view@3.0.34-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-typography@4.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-typography-overflow@4.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-user-badge@5.1.12-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea
yarn add @toptal/picasso-utils@3.1.1-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea

george-aidonidis · 2025-06-10T02:50:25Z

@dmaklygin I know this is a draft but https://github.com/toptal/staff-portal/pull/14453 you requested to review this too. Seems in this story the active tab is not working anymore

dmaklygin · 2025-06-10T09:23:50Z

@dmaklygin I know this is a draft but toptal/staff-portal#14453 you requested to review this too. Seems in this story the active tab is not working anymore

Could you please share a link to temploy.
I can check this temploy https://picasso.toptal.net/ff-7-tabs/?path=/story/layout-tabs--tabs and everything look working

george-aidonidis · 2025-06-10T10:41:24Z

@dmaklygin but the story in this PR is different please check the link and notice the change on
https://happo.io/a/675/p/1189/compare/ea8558d664d3d3c12c47263852996790aed70a84/2a3da7cea3ba840b0a702d9efc91380d60ee2fe6#Tabs%5C.Tab-Using%5C%20custom%5C%20value

dmaklygin · 2025-06-10T12:32:15Z

@dmaklygin but the story in this PR is different please check the link and notice the change on https://happo.io/a/675/p/1189/compare/ea8558d664d3d3c12c47263852996790aed70a84/2a3da7cea3ba840b0a702d9efc91380d60ee2fe6#Tabs%5C.Tab-Using%5C%20custom%5C%20value

Yeah, I've checked the stories and confirm, the changes are intentional.
Since, I've changed the default value for the Tabs.Tab Using custom value
Also, fixed the icons for the Tabs.Tab With Icon or Badge

dmaklygin · 2025-06-10T12:33:01Z

The left side of the comparison belongs to a previous version. The right side – to the new one

george-aidonidis · 2025-06-10T13:49:41Z

My apologies for the confusion 🙈

[FX-4602] Migrate Tabs (#4367)

c8fb75d

dmaklygin self-assigned this Jun 4, 2025

dmaklygin added 2 commits June 4, 2025 17:26

Fix issue

d41b65d

Remove Scroll Button

19babbf

dmaklygin added 5 commits June 4, 2025 18:26

Update snapshots

2c6d8df

Fix styles

06f2188

Remove Mui Base from Tabs

9ba0759

Fix style

e762a45

Update snapshots

17eb872

dmaklygin added 3 commits June 6, 2025 16:57

Update tabs

4e5ff64

Fixes

486895a

Update documentation

2a3da7c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[FF-7] Migrate Tabs #4768

[FF-7] Migrate Tabs #4768

Uh oh!

dmaklygin commented Jun 4, 2025 •

edited by jira bot

Loading

Uh oh!

changeset-bot bot commented Jun 4, 2025 •

edited

Loading

Uh oh!

dmaklygin commented Jun 4, 2025

Uh oh!

dmaklygin commented Jun 4, 2025

Uh oh!

toptal-devbot commented Jun 4, 2025

Uh oh!

dmaklygin commented Jun 6, 2025

Uh oh!

toptal-devbot commented Jun 6, 2025

Uh oh!

dmaklygin commented Jun 6, 2025

Uh oh!

toptal-devbot commented Jun 6, 2025

Uh oh!

george-aidonidis commented Jun 10, 2025

Uh oh!

dmaklygin commented Jun 10, 2025

Uh oh!

george-aidonidis commented Jun 10, 2025

Uh oh!

dmaklygin commented Jun 10, 2025

Uh oh!

dmaklygin commented Jun 10, 2025

Uh oh!

george-aidonidis commented Jun 10, 2025

Uh oh!

Uh oh!

[FF-7] Migrate Tabs #4768

Are you sure you want to change the base?

[FF-7] Migrate Tabs #4768

Uh oh!

Conversation

dmaklygin commented Jun 4, 2025 • edited by jira bot 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 Jun 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

dmaklygin commented Jun 4, 2025

Uh oh!

dmaklygin commented Jun 4, 2025

Uh oh!

toptal-devbot commented Jun 4, 2025

Uh oh!

dmaklygin commented Jun 6, 2025

Uh oh!

toptal-devbot commented Jun 6, 2025

Uh oh!

dmaklygin commented Jun 6, 2025

Uh oh!

toptal-devbot commented Jun 6, 2025

Uh oh!

george-aidonidis commented Jun 10, 2025

Uh oh!

dmaklygin commented Jun 10, 2025

Uh oh!

george-aidonidis commented Jun 10, 2025

Uh oh!

dmaklygin commented Jun 10, 2025

Uh oh!

dmaklygin commented Jun 10, 2025

Uh oh!

george-aidonidis commented Jun 10, 2025

Uh oh!

Uh oh!

dmaklygin commented Jun 4, 2025 •

edited by jira bot

Loading

changeset-bot bot commented Jun 4, 2025 •

edited

Loading