-
-
Notifications
You must be signed in to change notification settings - Fork 7
[DSRN] Added BadgeStatus #471
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
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
packages/design-system-react-native/src/components/BadgeStatus/BadgeStatus.tsx
Outdated
Show resolved
Hide resolved
packages/design-system-react-native/src/components/BadgeStatus/BadgeStatus.tsx
Outdated
Show resolved
Hide resolved
packages/design-system-react-native/src/components/BadgeStatus/README.md
Outdated
Show resolved
Hide resolved
| ]} | ||
| /> |
There was a problem hiding this comment.
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.
| ]} | |
| /> | |
| ]} | |
| {...innerBadgeProps} | |
| /> |
packages/design-system-react-native/src/components/BadgeStatus/README.md
Show resolved
Hide resolved
…/BadgeStatus.tsx Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
…/README.md Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
…/BadgeStatus.tsx Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
…gn-system into dsrn/badge-status
…o dsrn/badge-status
georgewrmarshall
left a comment
There was a problem hiding this 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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does 2.5 work?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes
| size: BadgeStatusSize.Md, | ||
| status: BadgeStatusStatus.Active, | ||
| hasBorder: true, | ||
| twClassName: '', |
There was a problem hiding this comment.
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
| export enum BadgeStatusStatus { | ||
| Active = 'active', | ||
| PartiallyActive = 'partiallyactive', | ||
| Inactive = 'inactive', | ||
| New = 'new', | ||
| Attention = 'attention', | ||
| } |
There was a problem hiding this comment.
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.

Description
This PR adds the
BadgeStatuscomponent to the@metamask/design-system-react-nativepackageRelated issues
Fixes: #397
Manual testing steps
yarn storybook:iosfrom rootScreenshots/Recordings
Before
After
Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2025-03-10.at.20.28.35.mp4
Pre-merge author checklist
Pre-merge reviewer checklist