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

feat: updated styling in badgenetwork #9401

Merged
merged 15 commits into from
Apr 30, 2024
Merged

feat: updated styling in badgenetwork #9401

merged 15 commits into from
Apr 30, 2024

Conversation

brianacnguyen
Copy link
Contributor

@brianacnguyen brianacnguyen commented Apr 25, 2024 •
edited
Loading

Description

This PR seeks to

  • Update the sizing of the BadgeNetwork to correctly scale the AvatarNetwork
  • Added border and shadow to BadgeNetwork per design
  • Added the ability to add styles to BadgeNetwork

Related issues

Fixes: https://github.com/MetaMask/metamask-mobile#workspaces/design-system-61e8a2ae77c3a60012e5003c/issues/zh/602

Manual testing steps

  1. Go to storybook
  2. Go to BadgeWrapper
  3. Observe NetworkInitial and NetworkImage

Screenshots/Recordings

Before

Simulator Screenshot - iPhone 15 Pro - 2024-04-24 at 13 39 01

After

https://github.com/MetaMask/metamask-mobile/assets/14355083/4b14ea27-5803-4f20-95e7-60cf6b1396c0
https://github.com/MetaMask/metamask-mobile/assets/14355083/4582c921-3903-4cda-b4ce-3b8f75c510ed

Simulator Screenshot - iPhone 15 Pro - 2024-04-24 at 20 28 12
Simulator Screenshot - iPhone 15 Pro - 2024-04-25 at 15 14 53
Simulator Screenshot - iPhone 15 Pro - 2024-04-25 at 15 22 05

Pre-merge author checklist

  • I’ve followed MetaMask Coding Standards.
  • I've completed the PR template to the best of my ability
  • I’ve included tests if applicable
  • I’ve documented my code using JSDoc format if applicable
  • I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

@brianacnguyen brianacnguyen self-assigned this Apr 25, 2024
@brianacnguyen brianacnguyen requested review from a team as code owners April 25, 2024 03:34
@github-actions GitHub Actions
Copy link
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@brianacnguyen brianacnguyen added team-design-system All issues relating to design system in Mobile needs-dev-review PR needs reviews from other engineers (in order to receive required approvals) labels Apr 25, 2024
@brianacnguyen brianacnguyen requested review from a team as code owners April 25, 2024 05:26
@EtherWizard33 EtherWizard33 self-requested a review April 25, 2024 12:21
@EtherWizard33
Copy link
Contributor

Thanks @brianacnguyen, first, much thanks for your support and for making this change. Since I know the context I thought I might as well join the review.

nit: About the conventional commit prefix, since the PR does add the ability for the dev to configure the size of the NetworkBadge, I might have leaned towards prefixing it with feat rather than refactor.

Looks good to me, approved 👍

EtherWizard33
EtherWizard33 previously approved these changes Apr 25, 2024
View reviewed changes
@brianacnguyen brianacnguyen changed the title refactor: updated styling in badgenetwork feat: updated styling in badgenetwork Apr 25, 2024
@brianacnguyen
Copy link
Contributor Author

Thanks @brianacnguyen, first, much thanks for your support and for making this change. Since I know the context I thought I might as well join the review.

nit: About the conventional commit prefix, since the PR does add the ability for the dev to configure the size of the NetworkBadge, I might have leaned towards prefixing it with feat rather than refactor.

Looks good to me, approved 👍

updated title😁

@EtherWizard33 EtherWizard33 mentioned this pull request Apr 26, 2024
Merged
7 tasks
@EtherWizard33
Copy link
Contributor

EtherWizard33 commented Apr 26, 2024 •
edited
Loading

I tried with the latest changes from commit f1ba253, with badge sizes set as Xs and Sm, and it looks good to me, on both iOS and Android.

Screenshot 2024-04-18 at 3 56 43 PM

@EtherWizard33 EtherWizard33 self-requested a review April 26, 2024 20:44
EtherWizard33
EtherWizard33 previously approved these changes Apr 26, 2024
View reviewed changes
georgewrmarshall
georgewrmarshall reviewed Apr 29, 2024
View reviewed changes
Copy link
Contributor

@georgewrmarshall georgewrmarshall left a comment

Choose a reason for hiding this comment

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

Have a couple questions near the design requirements but if those have been thought about happy to approve

app/component-library/components/Badges/Badge/variants/BadgeNetwork/BadgeNetwork.styles.ts Outdated Show resolved Hide resolved
georgewrmarshall
georgewrmarshall previously approved these changes Apr 29, 2024
View reviewed changes
Copy link
Contributor

@georgewrmarshall georgewrmarshall left a comment

Choose a reason for hiding this comment

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

LGTM!

@sonarqubecloud SonarQubeCloud
Copy link

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
93.8% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

tommasini
tommasini approved these changes Apr 30, 2024
View reviewed changes
Copy link
Contributor

@tommasini tommasini left a comment

Choose a reason for hiding this comment

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

LGTM! Awesome PR @brianacnguyen

@brianacnguyen brianacnguyen merged commit 28bf4bc into main Apr 30, 2024
31 checks passed
@brianacnguyen brianacnguyen deleted the fix/badge-networks branch April 30, 2024 16:48
@github-actions github-actions bot locked and limited conversation to collaborators Apr 30, 2024
@github-actions github-actions bot removed the needs-dev-review PR needs reviews from other engineers (in order to receive required approvals) label Apr 30, 2024
@metamaskbot metamaskbot added the release-7.23.0 Issue or pull request that will be included in release 7.23.0 label Apr 30, 2024
@brianacnguyen brianacnguyen added the Spot Check on the Release Build If a ticket doesn't require feature QA, but does require some form of manual spot checking label Apr 30, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@georgewrmarshall georgewrmarshall georgewrmarshall left review comments

@tommasini tommasini tommasini approved these changes

@EtherWizard33 EtherWizard33 EtherWizard33 left review comments

Assignees

@brianacnguyen brianacnguyen

Labels
release-7.23.0 Issue or pull request that will be included in release 7.23.0 Spot Check on the Release Build If a ticket doesn't require feature QA, but does require some form of manual spot checking team-design-system All issues relating to design system in Mobile
Projects
PR review queue
Archived in project
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@brianacnguyen @EtherWizard33 @georgewrmarshall @tommasini @metamaskbot