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 token to design system react #413

Merged
merged 2 commits into from
Feb 5, 2025

Conversation

georgewrmarshall
Copy link
Contributor

@georgewrmarshall georgewrmarshall commented Feb 3, 2025

Has a dependency on AvatarBase #390

Description

This PR adds the new AvatarToken component to design system react

Key features:

  • Displays token logos with consistent sizing and styling
  • Provides fallback text display when images are unavailable
  • Supports multiple size variants
  • Built on top of the AvatarBase component
  • Fully tested and documented

Related issues

Fixes: #364

Manual testing steps

  1. Run Storybook (yarn storybook)
  2. Navigate to React Components/AvatarToken
  3. Test different component variations:
    • With and without images
    • Different sizes
    • Fallback text behavior
    • Custom className application
  4. Verify responsive behavior and image handling
  5. Check accessibility features (alt text, etc.)

Screenshots/Recordings

Before

N/A (New component)

After

after720.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 comprehensive tests for the AvatarToken component
  • I've documented the code using JSDoc format
  • I've applied the right labels on the PR
  • I've ensured the component meets accessibility standards

Pre-merge reviewer checklist

  • I've manually tested the PR in Storybook
  • I confirm that this PR addresses all acceptance criteria for the AvatarToken component
  • I've verified the component works correctly with and without images
  • I've checked that the component integrates properly with the existing design system

Comment on lines 39 to 40
export { AvatarBase, AvatarBaseSize } from './avatar-base';
export type { AvatarBaseProps } from './avatar-base';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Adding missing AvatarBase exports to root index

@georgewrmarshall georgewrmarshall marked this pull request as ready for review February 4, 2025 17:17
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner February 4, 2025 17:17
brianacnguyen
brianacnguyen previously approved these changes Feb 5, 2025
brianacnguyen
brianacnguyen previously approved these changes Feb 5, 2025
@brianacnguyen brianacnguyen merged commit 4d84ec1 into main Feb 5, 2025
30 checks passed
@brianacnguyen brianacnguyen deleted the feat/364/avatar-token branch February 5, 2025 19:08
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 AvatarToken component in shared UI component library
2 participants