[DSRN] Add BadgeIcon#473
Conversation
There was a problem hiding this comment.
Component and stories look great, but we have some inconsistencies between Figma and Code. Do we need a variant prop? It might make sense to remove it and rely solely on the iconName prop.
- Checked alignment with Figma design ❌
- Checked Storybook stories and controls ✅
…adgeIcon.test.tsx Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
The |
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new BadgeIcon component to the design system for React Native to visually indicate different actions or statuses. In addition to the new component, the PR includes its stories, tests, documentation, and necessary updates to types, constants, and assets.
- Introduces the BadgeIcon component with customizable variants and icon mapping.
- Adds storybook stories and tests to verify component behavior.
- Updates package exports, documentation, and the Icon assets/types to support the new Plant icon for the Stake variant.
Reviewed Changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/design-system-react-native/src/components/BadgeIcon/BadgeIcon.tsx | New BadgeIcon component implementation |
| packages/design-system-react-native/src/components/BadgeIcon/BadgeIcon.stories.tsx | Storybook story for BadgeIcon |
| packages/design-system-react-native/src/components/BadgeIcon/BadgeIcon.test.tsx | Test coverage for BadgeIcon |
| packages/design-system-react-native/src/components/BadgeIcon/README.md | Documentation for BadgeIcon |
| packages/design-system-react-native/src/components/BadgeIcon/BadgeIcon.types.ts | Type declarations for BadgeIcon |
| packages/design-system-react-native/src/components/BadgeIcon/BadgeIcon.constants.ts | Constants and icon mapping for BadgeIcon |
| packages/design-system-react-native/src/components/BadgeIcon/index.ts | Export for BadgeIcon via index |
| packages/design-system-react-native/src/index.ts | Updated package exports to include BadgeIcon |
| packages/design-system-react-native/src/components/Icon/Icon.types.ts | Updated Icon types with the new Plant icon |
| packages/design-system-react-native/src/components/Icon/Icon.assets.ts | Added Plant asset and removed the Stake asset |
| packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.tsx | Updated Icon import in AvatarIcon |
| apps/storybook-react-native/.storybook/storybook.requires.js | Added BadgeIcon stories to Storybook |
| }; | ||
| const { getByTestId } = render(<TestComponent />); | ||
| const badgeIcon = getByTestId('badge-icon'); | ||
| expect(badgeIcon.props.style).toEqual(customStyle); |
There was a problem hiding this comment.
The test expects the style prop to equal customStyle, but the component combines a computed tw style with the custom style in an array. Consider updating the test to check that the custom style is included or modify the component to flatten the styles.
| expect(badgeIcon.props.style).toEqual(customStyle); | |
| expect(badgeIcon.props.style).toEqual(expect.arrayContaining([customStyle])); |
…-system into dsrn/badge-icon
Description
This PR adds the
BadgeIconcomponent to the@metamask/design-system-react-nativepackageRelated issues
Fixes: #401
Manual testing steps
yarn storybook:iosfrom rootScreenshots/Recordings
Before
After
Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2025-03-21.at.14.38.15.mp4
Pre-merge author checklist
Pre-merge reviewer checklist