[DSRN] Add BadgeNetwork#470
Conversation
georgewrmarshall
left a comment
georgewrmarshall
left a comment
There was a problem hiding this comment.
Coming along! Some more stories and it will be close.
| twClassName: '', | ||
| }, | ||
| render: (args) => <BadgeNetwork {...args} src={storyImageSource} />, | ||
| }; |
There was a problem hiding this comment.
Should there be more stories here?
There was a problem hiding this comment.
@georgewrmarshall there are no sizes, so no size stories. what other stories are you looking for?
There was a problem hiding this comment.
Generally we should have a story for each prop, what does the badge look like when there is no image or the image fails? What doest the fallback look like? etc
georgewrmarshall
left a comment
georgewrmarshall
left a comment
There was a problem hiding this comment.
Looking good! I think it might be good to expose some of the intentional props that we want to carry over from AvatarNetwork as well as add the stories and tests for them.
georgewrmarshall
left a comment
georgewrmarshall
left a comment
There was a problem hiding this comment.
Left a couple non-blocking comments
| ### `name` (Optional) | ||
|
|
||
| Used to generate fallback text when the image or SVG fails to load. | ||
|
|
||
| | TYPE | REQUIRED | DEFAULT | | ||
| | :------- | :------- | :---------- | | ||
| | `string` | No | `undefined` | |
There was a problem hiding this comment.
If name is used for the fallback if the image fails should it be required?
There was a problem hiding this comment.
it's currently not required in mobile
| describe('BadgeNetwork', () => { | ||
| it('renders an AvatarNetwork with size forced to Xs and forwards additional props', () => { | ||
| const { getByTestId } = render( | ||
| <BadgeNetwork | ||
| src={remoteImageSrc} | ||
| testID="badge-network" | ||
| imageProps={{ testID: 'image-or-svg' }} | ||
| />, | ||
| ); | ||
| const renderedComponent = getByTestId('badge-network'); | ||
| expect(renderedComponent).toBeTruthy(); | ||
| expect(renderedComponent.props.style[0].height.toString()).toStrictEqual( | ||
| (Number(AvatarNetworkSize.Xs) + 2).toString(), | ||
| ); | ||
|
|
||
| expect(renderedComponent.props.children[1].props.src).toStrictEqual( | ||
| remoteImageSrc, | ||
| ); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
non-blocking: Not sure if we need to test for the default size? Some things to consider, what happens when the image fails? Should name be a required prop?
2 participants
Description
This PR adds the
BadgeNetworkcomponent to the@metamask/design-system-react-nativepackageRelated issues
Fixes: #396
Manual testing steps
yarn storybook:iosfrom rootScreenshots/Recordings
Before
After
Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2025-03-13.at.08.59.54.mp4
Pre-merge author checklist
Pre-merge reviewer checklist