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.

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

fix: make CircularButton responsive #3785

Merged

Conversation

mkrl
Copy link
Contributor

@mkrl mkrl commented Aug 8, 2023

FX-4179

Description

According to BASE design, icons acting as buttons should accommodate for bigger icons.

How to test

  • Temploy
  • Check the Button story
  • There's a new Responsive story for the CircularButton
  • Resize the screen to see how the icon changes

Screenshots

Before. After.
image image

Development checks

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.

@mkrl mkrl requested a review from a team August 8, 2023 11:27
@mkrl mkrl self-assigned this Aug 8, 2023
@changeset-bot
Copy link

changeset-bot bot commented Aug 8, 2023

🦋 Changeset detected

Latest commit: b533415

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

This PR includes changesets to release 1 package
Name Type
@toptal/picasso Minor

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

@toptal-devbot toptal-devbot temporarily deployed to staging August 8, 2023 11:38 Inactive
Copy link
Contributor

@TomasSlama TomasSlama left a comment

Choose a reason for hiding this comment

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

should we also change the stories of the Page where we use the buttons in the header? 🤔

@mkrl mkrl requested review from TomasSlama and a team August 9, 2023 10:18
@mkrl

This comment was marked as outdated.

@toptal-devbot toptal-devbot temporarily deployed to staging August 9, 2023 10:30 Inactive
sashuk

This comment was marked as outdated.

@mkrl

This comment was marked as outdated.

@sashuk

This comment was marked as outdated.

@mkrl mkrl marked this pull request as draft August 18, 2023 12:57
@mkrl mkrl force-pushed the fx-4179-update-guidelines-and-stories-for-icon-size-usage branch from 774e3ec to 2c9ca8d Compare August 22, 2023 11:43
@mkrl mkrl changed the base branch from master to fx-4179-create-responsive-icons August 22, 2023 11:45
@mkrl
Copy link
Contributor Author

mkrl commented Aug 22, 2023

I've updated this PR to take responsive value from Picasso Provider into account. This PR is now based on #3823 to make use of the responsive icon set, the base will be changed to master once it is merged.

@mkrl mkrl marked this pull request as ready for review August 22, 2023 11:49
@mkrl mkrl requested review from a team and dmaklygin August 22, 2023 11:53
@toptal-devbot toptal-devbot temporarily deployed to staging August 22, 2023 11:56 Inactive
Copy link

@augustobmoura augustobmoura left a comment

Choose a reason for hiding this comment

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

LGTM!

@mkrl mkrl requested a review from a team August 29, 2023 10:15
Copy link
Contributor

@sashuk sashuk left a comment

Choose a reason for hiding this comment

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

Looks and works good! The minor comment in #3785 (comment) left

@mkrl mkrl force-pushed the fx-4179-create-responsive-icons branch from f62994a to ca4bd09 Compare August 31, 2023 12:07
Base automatically changed from fx-4179-create-responsive-icons to master August 31, 2023 13:08
@mkrl mkrl force-pushed the fx-4179-update-guidelines-and-stories-for-icon-size-usage branch from 4c3b037 to b533415 Compare August 31, 2023 13:13
@toptal-devbot toptal-devbot temporarily deployed to staging August 31, 2023 13:26 Inactive
@mkrl mkrl merged commit 680ceb4 into master Aug 31, 2023
12 checks passed
@mkrl mkrl deleted the fx-4179-update-guidelines-and-stories-for-icon-size-usage branch August 31, 2023 13:52
@toptal-build toptal-build mentioned this pull request Aug 31, 2023
1 task
sashuk pushed a commit that referenced this pull request Sep 1, 2023
* feat: make CircularButton responsive

* feat: responsive is off by default

* chore: remove outdated changeset
sashuk pushed a commit that referenced this pull request Sep 14, 2023
* feat: make CircularButton responsive

* feat: responsive is off by default

* chore: remove outdated changeset
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants