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

[ShadCN]: Migrate Avatar to ShadCN #14749

Open
wants to merge 7 commits into
base: dev
Choose a base branch
from

Conversation

TylerAPfledderer
Copy link
Contributor

@TylerAPfledderer TylerAPfledderer commented Jan 26, 2025

Description

Migrates Avatar to ShadCN in the design system.

Important:

IssuesList, FileContributors, and Leaderboard components all use Avatar directly from Chakra, not from the custom component. This usage is missing the use of the avatar as a link (no href prop used).

In addition, the general usage of the avatar in prod does not match intent from the design system.

  • In IssuesList, the avatar is accompanied by static text of the contributor's name, and not served as a link to the contributor's profile
  • In Leaderboard, the design of the list item is too complex to be able to use the avatar from the design system.
  • In FileContributors it is also a little too complex for the avatar from the design system, as it adds static text around the contributor link

Would need some direction on how to further proceed with this PR to address the above use cases, or resolve them in a separate PR.

Related Issue

#13946

@github-actions github-actions bot added the dependencies 📦 Changes related to project dependencies label Jan 26, 2025
Copy link

netlify bot commented Jan 26, 2025

Deploy Preview for ethereumorg ready!

Name Link
🔨 Latest commit b3ffefb
🔍 Latest deploy log https://app.netlify.com/sites/ethereumorg/deploys/6796d717b2c51300082e6629
😎 Deploy Preview https://deploy-preview-14749--ethereumorg.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
7 paths audited
Performance: 52 (🟢 up 4 from production)
Accessibility: 92 (no change from production)
Best Practices: 89 (🔴 down 9 from production)
SEO: 98 (no change from production)
PWA: 59 (no change from production)
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@TylerAPfledderer TylerAPfledderer marked this pull request as ready for review January 27, 2025 01:41
@TylerAPfledderer TylerAPfledderer changed the title [WIP][ShadCN]: Migrate Avatar to ShadCN [ShadCN]: Migrate Avatar to ShadCN Jan 27, 2025
Copy link
Member

@pettinarip pettinarip left a comment

Choose a reason for hiding this comment

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

Amazing. LGTM @TylerAPfledderer

ref={ref}
style={
{
"--avatar-base-shadow-color": "hsl(var(--primary-low-contrast))",
Copy link
Member

Choose a reason for hiding this comment

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

Can't we just use shadow-primary-low-contrast? or define it in the theme shadow-avatar?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies 📦 Changes related to project dependencies
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants