Skip to content

Conversation

@brianacnguyen
Copy link
Contributor

Description

This PR adds the BadgeStatus component to the @metamask/design-system-react-native package

Related issues

Fixes: #397

Manual testing steps

  1. Run yarn storybook:ios from root
  2. Go to Components > BadgeStatus

Screenshots/Recordings

Before

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2025-03-10.at.20.28.35.mp4

Pre-merge author checklist

  • I've followed MetaMask Contributor Docs
  • 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 Mar 11, 2025
@brianacnguyen brianacnguyen requested a review from a team as a code owner March 11, 2025 03:32
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.

Looking really good! Great alignment with Figma component api. Left a few non-blocking comments

  • Check Figma design agains code component ✅
  • Checked storybook stories and controls ✅

Screenshot 2025-03-12 at 2 40 42 PM

Comment on lines +44 to +45
]}
/>
Copy link
Contributor

Choose a reason for hiding this comment

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

non-blocking: Consider adding a prop to allow access to this child element.

Suggested change
]}
/>
]}
{...innerBadgeProps}
/>

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! Left a couple non-blocking comments


export const TWCLASSMAP_BADGESTATUS_SIZE: Record<BadgeStatusSize, string> = {
[BadgeStatusSize.Md]: 'h-2 w-2', // 8px width and height
[BadgeStatusSize.Lg]: 'h-2.5 w-2.5', // 10px width and height
Copy link
Contributor

Choose a reason for hiding this comment

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

Does 2.5 work?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yes

Comment on lines +48 to +51
size: BadgeStatusSize.Md,
status: BadgeStatusStatus.Active,
hasBorder: true,
twClassName: '',
Copy link
Contributor

@georgewrmarshall georgewrmarshall Mar 20, 2025

Choose a reason for hiding this comment

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

This is nice to read! Nice work

Comment on lines +6 to +12
export enum BadgeStatusStatus {
Active = 'active',
PartiallyActive = 'partiallyactive',
Inactive = 'inactive',
New = 'new',
Attention = 'attention',
}
Copy link
Contributor

@georgewrmarshall georgewrmarshall Mar 20, 2025

Choose a reason for hiding this comment

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

nit: consider adding comments here to explain what these mean in detail. It's somewhat of a niche component.

@brianacnguyen brianacnguyen merged commit 7514f25 into main Mar 21, 2025
36 checks passed
@brianacnguyen brianacnguyen deleted the dsrn/badge-status branch March 21, 2025 20:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[React Native]: Create BadgeStatus component in shared UI component library

3 participants