Adding padding for images passed to the Avatar component

[mschasz]

Hi,

Per this thread, I'd like to see if it's possible to add some padding to the image passed to an Avatar component. As we migrate to Paste, the images in the Avatar look more zoomed in than before, making the Avatars for sources and destinations look a bit off. The avatars on the left are in Evergreen and those on the right are in Paste.

Thanks!

[TheSisb]

Hi @mschasz,

Interesting question, this hasn't come up before. I notice in your example screenshot, the images on the left are different from the ones on the right. Do you have a true comparison image using the same avatar images?

There is currently no way to provide padding to Avatar for images at this time. Avatar images are sized to fit flush to the Avatar container, usually because the provided images are either too big or too small, and need to be sized correctly. On the other hand, icons and text are centered within the Avatar, as can be seen on the docs.

An option if the images are not user generated is you could edit the image so it fits the way you would like.

[mschasz]

Gotcha, here are the same avatar images below (you can see some weird cropping going on).
Evergreen:

Paste:

[TheSisb]

Hi @mschasz,

Just following up that we're still looking into this. Will report back when we conclude on a direction. Thanks in advance for your patience!

[serifluous]

Hey @mschasz ! @ceyerkes is going to work on standardizing the images used for sources and destinations in Segment, so you can sync up with her on moving forward with this.

[lnamba]

Hi @serifluous and all, wanted to check in on what the outcome of this was? I have a design which requires padding for Avatars as well and I'm not seeing a way to add it. For reference, here is the design:

Here is how it looks with the actual components:

cc: @ceyerkes