Skip to content
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

feat: adding avatar network to design system react #409

Merged
merged 3 commits into from
Feb 5, 2025

Conversation

georgewrmarshall
Copy link
Contributor

@georgewrmarshall georgewrmarshall commented Jan 30, 2025

Description

This PR adds the initial AvatarNetwork component to design system react

Key features:

  1. Supports image display with fallback text
  2. Configurable sizes (xs, sm, md, lg, xl) with appropriate text scaling
  3. Customizable styling through className and imageProps
  4. Built on top of the existing AvatarBase component
  5. Fully tested and documented

Related issues

Fixes: #366

Manual testing steps

  1. Run Storybook and navigate to React Components/AvatarNetwork
  2. Test different sizes using the size control
  3. Test image display by providing a valid src URL
  4. Test fallback text by removing the src URL
  5. Test custom styling using className and imageProps
  6. Verify accessibility by checking alt text and ARIA attributes

Screenshots/Recordings

Before

N/A - New component

After

after.network720.mov

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 for the AvatarNetwork component
  • I've documented my code using JSDoc format
  • I've applied the right labels on the PR

Pre-merge reviewer checklist

  • I've manually tested the PR
  • I confirm that this PR addresses all acceptance criteria and includes the necessary testing evidence

Comment on lines 11 to 12
[AvatarBaseSize.Xs]: TextVariant.BodyXs,
[AvatarBaseSize.Sm]: TextVariant.BodyXs,
[AvatarBaseSize.Md]: TextVariant.BodySm,
[AvatarBaseSize.Lg]: TextVariant.BodyMd,
[AvatarBaseSize.Xl]: TextVariant.BodyMd,
Copy link
Contributor Author

@georgewrmarshall georgewrmarshall Jan 30, 2025

Choose a reason for hiding this comment

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

To prevent a circular dependency we export AvatarBaseSize as AvatarNetworkSize but use AvatarBaseSize internally.

@georgewrmarshall georgewrmarshall force-pushed the feat/366/dsr-avatar-network branch from 35ece8d to 6a0edfb Compare January 30, 2025 23:57
@georgewrmarshall georgewrmarshall force-pushed the feat/366/dsr-avatar-network branch 2 times, most recently from befddee to e52f356 Compare January 31, 2025 00:09
@georgewrmarshall georgewrmarshall force-pushed the feat/366/dsr-avatar-network branch 4 times, most recently from 142579e to d4e6d7d Compare January 31, 2025 01:27
@georgewrmarshall georgewrmarshall self-assigned this Jan 31, 2025
@georgewrmarshall georgewrmarshall force-pushed the feat/366/dsr-avatar-network branch 2 times, most recently from 821a131 to ce739f3 Compare February 3, 2025 21:32
@georgewrmarshall georgewrmarshall force-pushed the feat/366/dsr-avatar-network branch 2 times, most recently from b9010a5 to 3b84693 Compare February 4, 2025 17:13
@georgewrmarshall georgewrmarshall marked this pull request as ready for review February 4, 2025 17:15
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner February 4, 2025 17:15
ref,
) => {
const displayText = fallbackText || (name ? name[0] : '');
const altText = name || 'Network logo'; // TBC: Add localization for default text
Copy link
Contributor

Choose a reason for hiding this comment

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

nice

brianacnguyen
brianacnguyen previously approved these changes Feb 5, 2025
@georgewrmarshall georgewrmarshall merged commit 8a707a9 into main Feb 5, 2025
30 checks passed
@georgewrmarshall georgewrmarshall deleted the feat/366/dsr-avatar-network branch February 5, 2025 18:47
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]: Create AvatarNetwork component in shared UI component library
2 participants