[DSRN] Added AvatarGroup #462

brianacnguyen · 2025-03-01T02:52:19Z

Description

This PR adds the AvatarGroup component to the DSRN

Related issues

Fixes: #371

Manual testing steps

Run yarn storybook:ios from root
Go to Components > AvatarGroup

Screenshots/Recordings

Before

After

Added more sample stories to different Avatar variants
https://github.com/user-attachments/assets/9620df1f-0299-42b4-b347-75482318e65e

AvatarGroup stories
https://github.com/user-attachments/assets/f0662a4c-0d0d-4fef-beb2-a9a423eb5127

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.

…o dsrn/avatar-group

georgewrmarshall

Looks like you may need to remove the other avatars from this PR?

brianacnguyen · 2025-03-05T18:59:45Z

Looks like you may need to remove the other avatars from this PR?

Nope those changes are enhancements to all Avatars stemming from AvatarGroup requirements so I kept them in here

brianacnguyen · 2025-03-05T19:00:59Z

packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.constants.ts

+  '0x8AceA3A9748294d1B5C25a08EFE37b756AafDFdd',
+  '0xEC5CE72f2e18B0017C88F7B12d3308119C5Cf129',
+  '0xeC56Da21c90Af6b50E4Ba5ec252bD97e735290fc',
+];


Added these so they can be reused for both AvatarAccount, AvatarGroup, and any other components built from AvatarAccount

brianacnguyen · 2025-03-05T19:01:22Z

packages/design-system-react-native/src/components/AvatarFavicon/AvatarFavicon.constants.ts

+  'https://trezor.io/favicon.ico',
+  'https://electrum.org/favicon.ico',
+  'https://cryptologos.cc/logos/ethereum-eth-logo.svg',
+];


Added these so they can be reused for both AvatarFavicon, AvatarGroup, and any other components built from AvatarFavicon

brianacnguyen · 2025-03-05T19:02:19Z

packages/design-system-react-native/src/components/AvatarNetwork/AvatarNetwork.constants.ts

+  'https://cryptologos.cc/logos/ethereum-eth-logo.svg',
+  'https://cryptologos.cc/logos/solana-sol-logo.svg',
+  'https://cryptologos.cc/logos/tether-usdt-logo.svg',
+];


Added these so they can be reused for both AvatarNetwork, AvatarGroup, and any other components built from AvatarNetwork

brianacnguyen · 2025-03-05T19:02:35Z

packages/design-system-react-native/src/components/AvatarToken/AvatarToken.constants.ts

+  'https://cryptologos.cc/logos/chainlink-link-logo.svg',
+  'https://cryptologos.cc/logos/uniswap-uni-logo.svg',
+  'https://cryptologos.cc/logos/flare-flr-logo.svg',
+];


Added these so they can be reused for both AvatarToken, AvatarGroup, and any other components built from AvatarToken

brianacnguyen · 2025-03-05T19:03:40Z

packages/design-system-react-native/src/primitives/AvatarBase/AvatarBase.types.ts

+   * For internal use only
+   * @default false
+   */
+  hasSolidBackgroundColor?: boolean;


These are needed for AvatarGroup and Badge

non-blocking: Can we create a ticket or separate PR to add these props to the React component to ensure alignment across our component APIs? I think it's fine to handle the styling logic differently internally within the component.

Copilot

PR Overview

This PR introduces the new AvatarGroup component and its supporting utilities, tests, stories, and constants to improve the design system's avatar management capabilities. Key changes include:

Adding the AvatarGroup component with overflow handling and configurable props.
Creating utility functions for generating Tailwind class names for layout and overflow.
Adding comprehensive test cases and Storybook stories across all avatar variants.

Reviewed Changes

File	Description
README.md	Added comprehensive documentation for AvatarGroup props, usage examples, and guidelines.
AvatarGroup.utilities.ts	Introduced utility functions for generating container and overflow text Tailwind class names.
AvatarGroup.types.ts	Defined types and enums for AvatarGroup and its variants.
AvatarGroup.tsx	Implemented the AvatarGroup component with overflow counter logic and variant rendering.
AvatarGroup.test.tsx	Added tests to validate utility functions and proper rendering behavior of AvatarGroup.
AvatarGroup.stories.tsx	Created Storybook stories to showcase all avatar variants and different sizes/orientations.
AvatarGroup.constants.ts	Defined constants for AvatarGroup including default props and sample data.
Various Avatar* files	Updated AvatarAccount, AvatarFavicon, AvatarNetwork, and AvatarToken components and their stories/tests to integrate with new constants and sample data.
storybook.requires.js	Registered the new AvatarGroup stories in the Storybook configuration.

Copilot reviewed 31 out of 31 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

packages/design-system-react-native/src/components/AvatarGroup/AvatarGroup.constants.ts:14

[nitpick] Consider renaming 'MAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS' to a name that more clearly indicates its purpose (e.g., 'AVATAR_OVERLAP_GAP') to improve clarity and readability.

export const MAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS: Record<AvatarGroupSize, number> = {

Copilot · 2025-03-07T21:48:33Z

packages/design-system-react-native/src/components/AvatarNetwork/AvatarNetwork.tsx

  shape = DEFAULT_AVATARNETWORK_PROPS.shape,
  fallbackText,
  fallbackTextProps,
+  hasBorder,


New props 'hasBorder' and 'hasSolidBackgroundColor' are now passed to AvatarBase without default values. Consider defining default values for these props to ensure consistent styling when they are omitted.

georgewrmarshall

LGTM! In the future, it would be good to break this PR into two—it's over 1000 lines, and the hasBorder and hasSolidBackgroundColor updates could have been easily separated into their own PRs.

We're also missing stories and README updates for hasBorder and hasSolidBackgroundColor, which should be added in a subsequent PR.

Checked:

Stories and controls for AvatarGroup ✅

georgewrmarshall · 2025-03-07T22:01:16Z

packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.stories.tsx

+    return (
+      <AvatarAccount {...args} address={SAMPLE_AVATARACCOUNT_ADDRESSES[0]} />
+    );


I see the benefits of storing sample data in constants, but we should also be aware of the tradeoffs. No action items—just noting that there are some downsides.

Pros:

Reusability across stories, tests, and documentation

Single source of truth for sample data

Easier maintenance if addresses need to change

Can be used for testing

Cons:

Adds indirection—readers need to jump between files

May obscure the immediate understanding of what's being demonstrated

Could lead to overengineering with too many sample datasets

Let's keep these in mind—maybe a mixed approach would help mitigate this:

// Keep minimal examples direct in stories export const Default: Story = { render: () => ( <AvatarAccount address="0x9Cbf7c41B7787F6c621115010D3B044029FE2Ce8" /> ) }; // Use constants for complex scenarios or when reuse is valuable export const MultipleAddresses: Story = { render: () => ( <View style={{ gap: 16 }}> {SAMPLE_AVATARACCOUNT_ADDRESSES.slice(0, 3).map((address) => ( <AvatarAccount key={address} address={address} /> ))} </View> ) };

You can also do things like this without any type errors where the variant is token but the sample props are for network

export const Default: Story = { render: () => ( <AvatarGroup variant={AvatarGroupVariant.Token} avatarPropsArr={SAMPLE_AVATARGROUP_AVATARNETWORKPROPSARR} /> ), };

The same thing can be said for our tokens

georgewrmarshall · 2025-03-07T22:03:16Z

packages/design-system-react-native/src/primitives/AvatarBase/AvatarBase.types.ts

+   * For internal use only
+   * @default false
+   */
+  hasSolidBackgroundColor?: boolean;


non-blocking: Can we create a ticket or separate PR to add these props to the React component to ensure alignment across our component APIs? I think it's fine to handle the styling logic differently internally within the component.

georgewrmarshall · 2025-03-07T22:06:33Z

packages/design-system-react-native/src/components/AvatarFavicon/AvatarFavicon.stories.tsx

 type Story = StoryObj<AvatarFaviconProps>;
 const storyImageSource: ImageSourcePropType = {
-  uri: 'https://metamask.github.io/test-dapp/metamask-fox.svg',
+  uri: SAMPLE_AVATARFAVICON_URIS[0],


non-blocking: same comment here about storing sample data in constants. I think using a string here is helpful to instantly show what the value should be.

Suggested change

uri: SAMPLE_AVATARFAVICON_URIS[0],

uri: 'https://metamask.github.io/test-dapp/metamask-fox.svg',

georgewrmarshall · 2025-03-07T22:27:40Z

packages/design-system-react-native/src/components/AvatarGroup/AvatarGroup.stories.tsx

+export const Default: Story = {
+  args: {
+    variant: AvatarGroupVariant.Favicon,
+    size: DEFAULT_AVATARGROUP_PROPS.size,
+    max: DEFAULT_AVATARGROUP_PROPS.max,
+    isReverse: DEFAULT_AVATARGROUP_PROPS.isReverse,
+    twClassName: '',
+  },
+  render: (args) => <AvatarGroupStory {...args} />,
+};


non-blocking: Not sure if this is intended or needs to be fixed but when isReverse is true it aligns differently to the page

This is the result of row vs row-reverse so it's working as intended

brianacnguyen · 2025-03-11T23:28:06Z

LGTM! In the future, it would be good to break this PR into two—it's over 1000 lines, and the hasBorder and hasSolidBackgroundColor updates could have been easily separated into their own PRs.

We're also missing stories and README updates for hasBorder and hasSolidBackgroundColor, which should be added in a subsequent PR.

Checked:

Stories and controls for AvatarGroup ✅

I intentionally did not add stories and README for hasBorder and hasSolidBackgroundColor as those are for internal use only

Added temp AvatarGroup

9051ac9

brianacnguyen requested a review from a team as a code owner March 1, 2025 02:52

brianacnguyen marked this pull request as draft March 1, 2025 02:52

brianacnguyen added 3 commits March 4, 2025 20:17

Merge branch 'main' of github.com:MetaMask/metamask-design-system int…

21573aa

…o dsrn/avatar-group

Added AvatarGroup to dsrn

326fcf7

Updated indexes

dde29f4

brianacnguyen changed the title ~~[DRAFT] Added AvatarGroup~~ [DSRN] Added AvatarGroup Mar 5, 2025

brianacnguyen added the team-design-system label Mar 5, 2025

brianacnguyen self-assigned this Mar 5, 2025

brianacnguyen marked this pull request as ready for review March 5, 2025 08:34

georgewrmarshall requested changes Mar 5, 2025

View reviewed changes

brianacnguyen commented Mar 5, 2025

View reviewed changes

georgewrmarshall requested a review from Copilot March 7, 2025 21:46

Copilot AI reviewed Mar 7, 2025

View reviewed changes

georgewrmarshall approved these changes Mar 7, 2025

View reviewed changes

Merge branch 'main' into dsrn/avatar-group

bdf93d0

brianacnguyen merged commit d26405a into main Mar 11, 2025
30 checks passed

brianacnguyen deleted the dsrn/avatar-group branch March 11, 2025 23:40

	uri: SAMPLE_AVATARFAVICON_URIS[0],
	uri: 'https://metamask.github.io/test-dapp/metamask-fox.svg',

Uh oh!

[DSRN] Added AvatarGroup #462

[DSRN] Added AvatarGroup #462

Uh oh!

Conversation

brianacnguyen commented Mar 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

georgewrmarshall left a comment

Choose a reason for hiding this comment

Uh oh!

brianacnguyen commented Mar 5, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

PR Overview

Reviewed Changes

Uh oh!

Copilot AI Mar 7, 2025

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Mar 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brianacnguyen commented Mar 11, 2025

Uh oh!

Uh oh!

Uh oh!

brianacnguyen commented Mar 1, 2025 •

edited

Loading

georgewrmarshall left a comment •

edited

Loading

georgewrmarshall Mar 7, 2025 •

edited

Loading