[FX-4593] Migrate tag #4264

ruslan-sed · 2024-04-26T08:17:48Z

FX-4593

Description

This PR migrates Tag component to Tailwind. It also removes Chip component because it is not a part of MUI Base.

How to test

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

Development checks

Add changeset according to guidelines (if needed)
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

PR commands

List of available commands:

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

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 · 2024-04-26T08:17:53Z

🦋 Changeset detected

Latest commit: bab036d

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

This PR includes changesets to release 6 packages

Name	Type
@toptal/picasso-tag	Major
@toptal/picasso	Patch
@toptal/picasso-page	Patch
@toptal/picasso-tagselector	Patch
@toptal/picasso-forms	Patch
@toptal/picasso-query-builder	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

ruslan-sed · 2024-05-03T15:43:44Z

@toptal-anvil ping reviewers

ruslan-sed · 2024-05-09T13:21:43Z

@toptal-bot run package:alpha-release

OleksandrNechai

Did not test, left few comments. Looks good to go 👍

packages/base/Tag/src/Indicator/Indicator.tsx

packages/base/Tag/src/Tag/Tag.tsx

TomasSlama

I left two very small comments, but I will approve to unblock you as it is end of the day for me. Great job 🎉 💪 !

packages/base/Tag/src/Tag/Tag.tsx

packages/base/Tag/src/TagRectangular/TagRectangular.tsx

packages/base/Tag/package.json

packages/base/Tag/src/TagCheckable/TagCheckable.tsx

packages/base/Tag/src/TagGroup/TagGroup.tsx

packages/base/Tag/src/TagRectangular/TagRectangular.tsx

packages/base/Tag/src/index.ts

ruslan-sed · 2024-05-10T08:39:37Z

@toptal-bot run package:alpha-release

toptal-devbot · 2024-05-10T08:47:04Z

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@55.0.4-alpha-fx-4593-migrate-tag-cfc36294d.11+cfc36294d
yarn add @toptal/picasso@44.0.19-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-accordion@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-account-select@1.0.10-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-alert@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-amount@1.0.4-alpha-fx-4593-migrate-tag-cfc36294d.40+cfc36294d
yarn add @toptal/picasso-application-update-notification@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-autocomplete@1.0.14-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-avatar@2.0.2-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-avatar-upload@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-backdrop@1.0.3-alpha-fx-4593-migrate-tag-cfc36294d.69+cfc36294d
yarn add @toptal/picasso-badge@1.0.3-alpha-fx-4593-migrate-tag-cfc36294d.69+cfc36294d
yarn add @toptal/picasso-breadcrumbs@1.0.7-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-button@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-calendar@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-carousel@1.0.14-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-charts@58.0.3-alpha-fx-4593-migrate-tag-cfc36294d.29+cfc36294d
yarn add @toptal/picasso-checkbox@1.0.8-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-codemod@6.0.1-alpha-fx-4593-migrate-tag-cfc36294d.36+cfc36294d
yarn add @toptal/picasso-collapse@1.0.2-alpha-fx-4593-migrate-tag-cfc36294d.5+cfc36294d
yarn add @toptal/picasso-container@1.0.3-alpha-fx-4593-migrate-tag-cfc36294d.69+cfc36294d
yarn add @toptal/picasso-date-picker@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-date-select@1.0.14-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-drawer@2.0.5-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-dropdown@2.0.2-alpha-fx-4593-migrate-tag-cfc36294d.11+cfc36294d
yarn add @toptal/picasso-dropzone@1.0.14-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-empty-state@1.0.6-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-environment-banner@1.0.3-alpha-fx-4593-migrate-tag-cfc36294d.69+cfc36294d
yarn add @toptal/picasso-fade@1.0.3-alpha-fx-4593-migrate-tag-cfc36294d.69+cfc36294d
yarn add @toptal/picasso-file-input@1.0.14-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-form@2.0.2-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-forms@68.0.14-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-grid@1.0.7-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-helpbox@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-icons@1.1.1-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-image@1.0.3-alpha-fx-4593-migrate-tag-cfc36294d.69+cfc36294d
yarn add @toptal/picasso-input@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-input-adornment@1.0.4-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-link@1.0.3-alpha-fx-4593-migrate-tag-cfc36294d.69+cfc36294d
yarn add @toptal/picasso-list@2.0.2-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-loader@1.0.3-alpha-fx-4593-migrate-tag-cfc36294d.69+cfc36294d
yarn add @toptal/picasso-logo@1.0.4-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-menu@1.0.10-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-modal@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-modal-context@1.0.2-alpha-fx-4593-migrate-tag-cfc36294d.95+cfc36294d
yarn add @toptal/picasso-note@1.0.6-alpha-fx-4593-migrate-tag-cfc36294d.40+cfc36294d
yarn add @toptal/picasso-notification@2.0.5-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-number-input@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-outlined-input@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-overview-block@1.0.6-alpha-fx-4593-migrate-tag-cfc36294d.40+cfc36294d
yarn add @toptal/picasso-page@2.0.6-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-pagination@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-paper@2.0.3-alpha-fx-4593-migrate-tag-cfc36294d.11+cfc36294d
yarn add @toptal/picasso-password-input@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-pictograms@3.0.2-alpha-fx-4593-migrate-tag-cfc36294d.69+cfc36294d
yarn add @toptal/picasso-popper@1.0.3-alpha-fx-4593-migrate-tag-cfc36294d.69+cfc36294d
yarn add @toptal/picasso-prompt-modal@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-provider@4.2.1-alpha-fx-4593-migrate-tag-cfc36294d.40+cfc36294d
yarn add @toptal/picasso-query-builder@6.0.4-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-quote@1.0.4-alpha-fx-4593-migrate-tag-cfc36294d.40+cfc36294d
yarn add @toptal/picasso-radio@1.0.8-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-rating@1.0.4-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-rich-text-editor@12.0.7-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-section@2.0.5-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-select@1.0.14-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-shared@14.0.2-alpha-fx-4593-migrate-tag-cfc36294d.69+cfc36294d
yarn add @toptal/picasso-show-more@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-skeleton-loader@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-slider@1.0.5-alpha-fx-4593-migrate-tag-cfc36294d.40+cfc36294d
yarn add @toptal/picasso-step@1.1.2-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-switch@1.0.8-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-table@1.1.10-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-tabs@2.0.2-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-tag@1.1.2-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-tagselector@1.0.15-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-tailwind@2.3.1-alpha-fx-4593-migrate-tag-cfc36294d.40+cfc36294d
yarn add @toptal/picasso-test-utils@1.1.1-alpha-fx-4593-migrate-tag-cfc36294d.61+cfc36294d
yarn add @toptal/picasso-timeline@2.0.1-alpha-fx-4593-migrate-tag-cfc36294d.40+cfc36294d
yarn add @toptal/picasso-timepicker@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-tooltip@1.1.2-alpha-fx-4593-migrate-tag-cfc36294d.40+cfc36294d
yarn add @toptal/picasso-tree-view@1.0.13-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-typography@2.0.1-alpha-fx-4593-migrate-tag-cfc36294d.40+cfc36294d
yarn add @toptal/picasso-typography-overflow@2.0.1-alpha-fx-4593-migrate-tag-cfc36294d.40+cfc36294d
yarn add @toptal/picasso-user-badge@2.0.2-alpha-fx-4593-migrate-tag-cfc36294d.7+cfc36294d
yarn add @toptal/picasso-utils@1.0.3-alpha-fx-4593-migrate-tag-cfc36294d.69+cfc36294d

packages/base/Tag/src/Indicator/Indicator.tsx

packages/base/Tag/src/Tag/Tag.tsx

packages/base/Tag/src/TagCheckable/TagCheckable.tsx

1. Update changeset comments 2. Use `@toptal/picasso-tailwind` 3. Remove unnecessary comments 4. Change border width to 1px 5. Use twJoin

sashuk

Great job, thank you! All visual changes are related to font handling, the https://toptal-core.atlassian.net/browse/FX-5297 contains everything that is left to do

ruslan-sed self-assigned this Apr 26, 2024

ruslan-sed force-pushed the fx-4593-migrate-tag branch 14 times, most recently from bfc0322 to 4fc8ff4 Compare May 3, 2024 09:13

ruslan-sed force-pushed the fx-4593-migrate-tag branch 2 times, most recently from d84bc53 to 07f9f29 Compare May 3, 2024 13:57

ruslan-sed marked this pull request as ready for review May 3, 2024 14:02

ruslan-sed requested a review from a team as a code owner May 3, 2024 14:02

ruslan-sed requested a review from sashuk May 3, 2024 14:05

ruslan-sed marked this pull request as draft May 3, 2024 15:09

ruslan-sed marked this pull request as ready for review May 3, 2024 15:40

ruslan-sed force-pushed the fx-4593-migrate-tag branch from 07f9f29 to 41e0cfa Compare May 3, 2024 15:40

ruslan-sed force-pushed the fx-4593-migrate-tag branch 2 times, most recently from 14a0d22 to af66af6 Compare May 6, 2024 07:50

ruslan-sed marked this pull request as draft May 6, 2024 08:06

ruslan-sed force-pushed the fx-4593-migrate-tag branch 2 times, most recently from 679e753 to d72ceda Compare May 6, 2024 08:36

ruslan-sed requested review from TomasSlama and sashuk May 9, 2024 13:14

OleksandrNechai approved these changes May 9, 2024

View reviewed changes

TomasSlama approved these changes May 9, 2024

View reviewed changes

packages/base/Tag/src/Tag/Tag.tsx Outdated Show resolved Hide resolved

packages/base/Tag/src/Tag/Tag.tsx Show resolved Hide resolved

packages/base/Tag/src/TagRectangular/TagRectangular.tsx Outdated Show resolved Hide resolved

sashuk reviewed May 9, 2024

View reviewed changes

packages/base/Tag/package.json Outdated Show resolved Hide resolved

augustobmoura reviewed May 10, 2024

View reviewed changes

toptal deleted a comment from toptal-devbot May 10, 2024

OleksandrNechai reviewed May 10, 2024

View reviewed changes

packages/base/Tag/src/Indicator/Indicator.tsx Show resolved Hide resolved

sashuk reviewed May 10, 2024

View reviewed changes

packages/base/Tag/src/Tag/Tag.tsx Outdated Show resolved Hide resolved

sashuk reviewed May 10, 2024

View reviewed changes

packages/base/Tag/src/TagCheckable/TagCheckable.tsx Outdated Show resolved Hide resolved

ruslan-sed force-pushed the fx-4593-migrate-tag branch from b48d472 to 08a16f7 Compare May 10, 2024 15:21

ruslan-sed added 7 commits May 15, 2024 12:30

[FX-4593] Migrate Tag to TailwindCSS

1eba71d

Address comments

cd2bd70

Address some comments

eeef18d

Update snapshot

65a98ba

Use simplified conditions in twMerge

ca08397

Address comments

70d0ecc

1. Update changeset comments 2. Use `@toptal/picasso-tailwind` 3. Remove unnecessary comments 4. Change border width to 1px 5. Use twJoin

Improve checkable classes

08e3334

ruslan-sed force-pushed the fx-4593-migrate-tag branch from 08a16f7 to 08e3334 Compare May 15, 2024 10:11

ruslan-sed changed the base branch from master to feature/migrate-tag May 15, 2024 10:22

Remove hovered prop from Tag

bab036d

sashuk approved these changes May 15, 2024

View reviewed changes

ruslan-sed merged commit 33b3333 into feature/migrate-tag May 15, 2024
12 of 14 checks passed

ruslan-sed deleted the fx-4593-migrate-tag branch May 15, 2024 14:51

sashuk pushed a commit that referenced this pull request May 17, 2024

[FX-4593] Migrate tag (#4264)

b1d78cd

sashuk pushed a commit that referenced this pull request May 20, 2024

[FX-4593] Migrate tag (#4264)

66f17ba

sashuk mentioned this pull request May 20, 2024

[FX-5297] Migrate Tag to TailwindCSS #4316

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FX-4593] Migrate tag #4264

[FX-4593] Migrate tag #4264

ruslan-sed commented Apr 26, 2024 •

edited

changeset-bot bot commented Apr 26, 2024 •

edited

ruslan-sed commented May 3, 2024

ruslan-sed commented May 9, 2024

OleksandrNechai left a comment

TomasSlama left a comment

ruslan-sed commented May 10, 2024

toptal-devbot commented May 10, 2024

sashuk left a comment

[FX-4593] Migrate tag #4264

[FX-4593] Migrate tag #4264

Conversation

ruslan-sed commented Apr 26, 2024 • edited

Description

How to test

Development checks

When to approve? ✅

When to request changes? ❌

When to comment (neither ✅ nor ❌)

How to handle the comments?

changeset-bot bot commented Apr 26, 2024 • edited

🦋 Changeset detected

ruslan-sed commented May 3, 2024

ruslan-sed commented May 9, 2024

OleksandrNechai left a comment

Choose a reason for hiding this comment

TomasSlama left a comment

Choose a reason for hiding this comment

ruslan-sed commented May 10, 2024

toptal-devbot commented May 10, 2024

sashuk left a comment

Choose a reason for hiding this comment

ruslan-sed commented Apr 26, 2024 •

edited

changeset-bot bot commented Apr 26, 2024 •

edited