Extending the avatar helper function

nxta

What I want to do is change its markup, so I have more freedom styling avatars

Add a data-attribute containing the letter for non-image avatars. This way I can use content: attr() in a CSS pseudo-element
Wrap the innerHTML in a span, so I have more freedom styling it
Remove .toUpperCase(), and use text-transform: uppercase instead since it's more of a style choice

I noticed avatars are not a Component, but they are generated in a helper function. The data-attribute is something I can already pass to the helper function.

I've already looked at this extension. Is it possible to change all avatars sidewide though?

clarkwinkelmann

nxta I have tried in the past, without success.

I don't if there's any way to extend the helper functions. Maybe with some direct access into Webpack tree of dependencies.

nxta

clarkwinkelmann Would it make sense to make these changes to core? I can do a PR introducing an Avatar component, keeping the helper. It would be non breaking

clarkwinkelmann

nxta I was thinking of something like that yes. But of course it applies to all helper and utils function as well, so it would be best to find a general solution. We have not discussed this in depth with the team yet.

I'm not sure a PR is the best solution at this point. @datitisev is working on the massive frontend rewrite and it might be best if he takes care of this at the same time. David you might have some input on this?