Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix button errors #4372

Merged
merged 1 commit into from
Jun 21, 2024
Merged

Fix button errors #4372

merged 1 commit into from
Jun 21, 2024

Conversation

TomasSlama
Copy link
Contributor

@TomasSlama TomasSlama commented Jun 20, 2024 •
edited
Loading

[FX-NNNN]

Description

When we used

import React from 'react'
import { Button, Link, Tooltip } from '@toptal/picasso'
import { Player16 } from '@toptal/picasso-icons'

const Example = () => {
  return (
    <div>
      <Tooltip content='Watch Pitch' compact>
        <Button.Circular
          as={Link}
          size='small'
          variant='flat'
          disabled={false}
          href={''}
          target='_blank'
          rel='noreferrer'
          icon={<Player16 color='black' />}
        />
      </Tooltip>
    </div>
  )
}

It threw error Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

How to test

  • Temploy
  • Try ☝️ code snippet in the Picasso storybook, it should not throw an error

Screenshots

Before. After.
image image

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 FX team for review
PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

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

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

When to comment (neither ✅ nor ❌)

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

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

How to handle the comments?

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

@TomasSlama TomasSlama self-assigned this Jun 20, 2024
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jun 20, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 49a5f17

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

This PR includes changesets to release 35 packages
Name Type
@toptal/picasso-button Patch
@toptal/picasso-forms Patch
@toptal/picasso-query-builder Patch
@toptal/picasso-rich-text-editor Patch
@toptal/picasso Patch
@toptal/picasso-accordion Patch
@toptal/picasso-alert Patch
@toptal/picasso-application-update-notification Patch
@toptal/picasso-calendar Patch
@toptal/picasso-carousel Patch
@toptal/picasso-drawer Patch
@toptal/picasso-file-input Patch
@toptal/picasso-helpbox Patch
@toptal/picasso-modal Patch
@toptal/picasso-notification Patch
@toptal/picasso-outlined-input Patch
@toptal/picasso-page Patch
@toptal/picasso-pagination Patch
@toptal/picasso-password-input Patch
@toptal/picasso-prompt-modal Patch
@toptal/picasso-section Patch
@toptal/picasso-show-more Patch
@toptal/picasso-skeleton-loader Patch
@toptal/picasso-table Patch
@toptal/picasso-tree-view Patch
@toptal/picasso-date-picker Patch
@toptal/picasso-dropzone Patch
@toptal/picasso-autocomplete Patch
@toptal/picasso-avatar-upload Patch
@toptal/picasso-input Patch
@toptal/picasso-number-input Patch
@toptal/picasso-select Patch
@toptal/picasso-tagselector Patch
@toptal/picasso-timepicker Patch
@toptal/picasso-date-select 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

@TomasSlama
Copy link
Contributor Author

@toptal-bot run package:alpha-release

@toptal-devbot
Copy link
Collaborator

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@55.0.7-alpha-fx-null-fix-button-e862ee8b7.16+e862ee8b7
yarn add @toptal/picasso@46.0.5-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-accordion@1.0.22-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-account-select@1.0.16-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-alert@1.0.22-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-amount@1.0.6-alpha-fx-null-fix-button-e862ee8b7.16+e862ee8b7
yarn add @toptal/picasso-application-update-notification@1.0.22-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-autocomplete@1.0.25-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-avatar@2.0.7-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-avatar-upload@1.0.23-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-backdrop@1.0.5-alpha-fx-null-fix-button-e862ee8b7.28+e862ee8b7
yarn add @toptal/picasso-badge@1.0.4-alpha-fx-null-fix-button-e862ee8b7.34+e862ee8b7
yarn add @toptal/picasso-breadcrumbs@1.0.12-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-button@2.0.8-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-calendar@1.0.22-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-carousel@1.0.23-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-charts@59.0.1-alpha-fx-null-fix-button-e862ee8b7.34+e862ee8b7
yarn add @toptal/picasso-checkbox@2.0.7-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-codemod@6.0.1-alpha-fx-null-fix-button-e862ee8b7.77+e862ee8b7
yarn add @toptal/picasso-collapse@1.0.5-alpha-fx-null-fix-button-e862ee8b7.14+e862ee8b7
yarn add @toptal/picasso-container@1.0.4-alpha-fx-null-fix-button-e862ee8b7.34+e862ee8b7
yarn add @toptal/picasso-date-picker@1.0.24-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-date-select@1.0.25-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-drawer@2.0.14-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-dropdown@2.0.4-alpha-fx-null-fix-button-e862ee8b7.32+e862ee8b7
yarn add @toptal/picasso-dropzone@1.0.23-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-empty-state@1.0.11-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-environment-banner@1.0.4-alpha-fx-null-fix-button-e862ee8b7.34+e862ee8b7
yarn add @toptal/picasso-fade@1.0.5-alpha-fx-null-fix-button-e862ee8b7.28+e862ee8b7
yarn add @toptal/picasso-file-input@1.0.23-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-form@3.0.7-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-forms@70.0.5-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-grid@3.0.6-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-helpbox@2.0.8-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-icons@1.4.1-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-image@1.0.4-alpha-fx-null-fix-button-e862ee8b7.34+e862ee8b7
yarn add @toptal/picasso-input@2.0.6-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-input-adornment@1.0.8-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-link@1.0.4-alpha-fx-null-fix-button-e862ee8b7.34+e862ee8b7
yarn add @toptal/picasso-list@2.0.7-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-loader@1.0.4-alpha-fx-null-fix-button-e862ee8b7.34+e862ee8b7
yarn add @toptal/picasso-logo@1.0.8-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-menu@1.0.16-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-modal@2.0.8-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-modal-context@1.0.2-alpha-fx-null-fix-button-e862ee8b7.136+e862ee8b7
yarn add @toptal/picasso-note@1.0.8-alpha-fx-null-fix-button-e862ee8b7.16+e862ee8b7
yarn add @toptal/picasso-notification@2.0.14-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-number-input@1.0.24-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-outlined-input@1.1.3-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-overview-block@1.0.8-alpha-fx-null-fix-button-e862ee8b7.16+e862ee8b7
yarn add @toptal/picasso-page@2.0.20-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-pagination@2.0.8-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-paper@2.0.5-alpha-fx-null-fix-button-e862ee8b7.32+e862ee8b7
yarn add @toptal/picasso-password-input@2.0.10-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-pictograms@4.1.1-alpha-fx-null-fix-button-e862ee8b7.3+e862ee8b7
yarn add @toptal/picasso-popper@1.0.4-alpha-fx-null-fix-button-e862ee8b7.34+e862ee8b7
yarn add @toptal/picasso-prompt-modal@1.0.22-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-provider@4.2.2-alpha-fx-null-fix-button-e862ee8b7.42+e862ee8b7
yarn add @toptal/picasso-query-builder@6.0.17-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-quote@1.0.6-alpha-fx-null-fix-button-e862ee8b7.16+e862ee8b7
yarn add @toptal/picasso-radio@2.0.7-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-rating@1.0.8-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-rich-text-editor@13.0.10-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-section@3.0.3-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-select@1.0.25-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-shared@15.0.1-alpha-fx-null-fix-button-e862ee8b7.34+e862ee8b7
yarn add @toptal/picasso-show-more@1.0.22-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-skeleton-loader@1.0.22-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-slider@2.0.1-alpha-fx-null-fix-button-e862ee8b7.14+e862ee8b7
yarn add @toptal/picasso-step@1.1.7-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-switch@2.0.3-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-table@1.1.19-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-tabs@2.0.7-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-tag@2.0.6-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-tagselector@1.0.28-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-tailwind@2.6.1-alpha-fx-null-fix-button-e862ee8b7.14+e862ee8b7
yarn add @toptal/picasso-tailwind-merge@1.0.2-alpha-fx-null-fix-button-e862ee8b7.18+e862ee8b7
yarn add @toptal/picasso-test-utils@1.1.2-alpha-fx-null-fix-button-e862ee8b7.34+e862ee8b7
yarn add @toptal/picasso-timeline@2.0.3-alpha-fx-null-fix-button-e862ee8b7.16+e862ee8b7
yarn add @toptal/picasso-timepicker@1.0.24-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-tooltip@1.1.4-alpha-fx-null-fix-button-e862ee8b7.16+e862ee8b7
yarn add @toptal/picasso-tree-view@1.0.22-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-typography@2.0.3-alpha-fx-null-fix-button-e862ee8b7.16+e862ee8b7
yarn add @toptal/picasso-typography-overflow@2.0.3-alpha-fx-null-fix-button-e862ee8b7.16+e862ee8b7
yarn add @toptal/picasso-user-badge@2.0.7-alpha-fx-null-fix-button-e862ee8b7.0+e862ee8b7
yarn add @toptal/picasso-utils@1.0.4-alpha-fx-null-fix-button-e862ee8b7.34+e862ee8b7

@TomasSlama TomasSlama marked this pull request as ready for review June 20, 2024 12:23
@TomasSlama TomasSlama requested a review from a team as a code owner June 20, 2024 12:23
@TomasSlama
Copy link
Contributor Author

@toptal-anvil ping reviewers

@AdrianContiu AdrianContiu self-requested a review June 20, 2024 13:26
AdrianContiu
AdrianContiu approved these changes Jun 20, 2024
View reviewed changes
Copy link
Contributor

@AdrianContiu AdrianContiu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested using the suggested code snippet and now it works fine.

packages/base/Button/src/ButtonAction/ButtonAction.tsx Show resolved Hide resolved
packages/base/Button/src/ButtonBase/ButtonBase.tsx Show resolved Hide resolved
@TomasSlama TomasSlama requested a review from a team June 20, 2024 21:12
@TomasSlama TomasSlama requested a review from pudek357 June 21, 2024 07:57
@TomasSlama
Copy link
Contributor Author

@toptal-anvil ping reviewers

mkrl
mkrl approved these changes Jun 21, 2024
View reviewed changes
Copy link
Member

@mkrl mkrl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, tested locally in Storybook. Can't see any warnings or errors 👍

@TomasSlama TomasSlama merged commit c5651b1 into master Jun 21, 2024
18 checks passed
@TomasSlama TomasSlama deleted the fx-null-fix-button branch June 21, 2024 11:28
@toptal-build toptal-build mentioned this pull request Jun 21, 2024
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mkrl mkrl mkrl approved these changes

@AdrianContiu AdrianContiu AdrianContiu approved these changes

@pudek357 pudek357 Awaiting requested review from pudek357

Assignees

@TomasSlama TomasSlama

Labels
no-jira
Projects
None yet
Milestone
No milestone
5 participants
@TomasSlama @toptal-devbot @pudek357 @mkrl @AdrianContiu