[Avatar] Use inner shadow for border

[mbrookes]

• PR has tests / docs demo, and is linted.
• Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
• Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

Use an inner shadow for the border to allow the image to be an <img> not backgroundImage.

Closes #4254.

[nathanmarks]

Since it's just a single property, we may as well assign it directly instead of using Object.assign()

[mbrookes]

Good point. I know that looked wrong. :)

[nathanmarks]

@mbrookes one tiny change, looks good otherwise

[mbrookes]

On hold for a 0.16.0 branch or pre-release.

[oliviertassinari]

I have tried this path in the past. But we ended up reverting this change for painting performances reasons #1204 (comment).
I'm not sure it worth it.

[mbrookes]

Oh, interesting, I compared the current and new implementation, and couldn't see a meaningful difference, but perhaps I'm not testing correctly.

[oliviertassinari]

Are you sure about the visual impact of this property? It seems to me that it has no impact and that backgroundColor seems to be relevant here (I have no idea why).

[mbrookes]

The impact of boxShadow?

[oliviertassinari]

yes, the visual impact. I can't see any difference with or without the property on Chome v50 OSX.

[nathanmarks]

@oliviertassinari what about a border on a pseudo element? What's the perf like?

I think being able to use an img as an avatar is an important feature.

[nathanmarks]

@oliviertassinari FWIW Google don't use the border in any of their products from android contacts book to desktop inbox app. I don't mind keeping it (it looks good on white avatars etc) but I'd like to see a solution that lets us use an IMG tag

[oliviertassinari]

@nathanmarks I definitely agree with you. Using an <img /> would be much better semently speaking. We should aim for this 👍 .
I haven't benchmarked the rendering (painting) time needed for the box-shadow yet. I should do it.
I see three options:

• We keep this PR like this
• We add an extra div to get the desired border opacity
• We remove the border

Either way, we should consider performances vs the spec perfect implementation ✨.

[nathanmarks]

@oliviertassinari BTW, the border is not even detailed in the spec -- it's just visually present in the examples (perhaps why it isn't in any of the products)

[oliviertassinari]

After some quick benchmark with 30+ displayed Avatar, I couldn't notice any significant increase of the painting time.

[mbrookes]

@oliviertassinari, you're right, there's something odd going on here. The backgroundColor does seem to be bleeding out ever so slightly from behind the image (barely a single physical pixel on a retinal display.)

Also, from a bit of googling, it seems a boxshadow over an image doesn't work 'out of the box' (hoho).

However under some circumstances, boxShadow does appear to do something on an image Avatar... It's subtle, but take a look over the guy's left shoulder, and along the top of the circle:

Unless I'm imagining this, there a difference, which is what led me to believe this was working.

However, when changing the border size to something more visible, it's clear that this isn't actually working as expected as the border doesn't get bigger, and even though it sort of works here, it's unlikely to be consistent across browsers, so we need a different solution...

[nathanmarks]

@mbrookes I usually have to use a pseudo element to achieve it.

[nathanmarks]

@mbrookes at which point, for this use case, may as well have a border. But I use shadows over images often for vignetting etc

[mbrookes]

Okay, I went the overlay div route. 😢

I did try a border on the overlay (with boxModel: 'border-box'), but it didn't perfectly overlay the image when zoomed in. That might be something else I've done wrong though.

[mbrookes]

I'll fix the test after we agree on the approach.

[oliviertassinari]

I'll fix the test after we agree on the approach.

As pointed out by @nathanmarks Google isn't adding a border on their apps. On my project, I do neither. I would go with option 3 and remove the border.
What do you guys think?

[nathanmarks]

@oliviertassinari That was my gut instinct 👍

[mbrookes]

Avatar images with a white background against a white background look pretty awful (@nathanmarks posted a good example in chat), but perhaps they're not common enough to worry about.

I think the border overlay is the right design choice, but the code (and possible performance) overhead might not be worth it from an engineering standpoint.

[nathanmarks]

@mbrookes No borders lets you do this (note the non-round avatars here)

[nathanmarks]

@mbrookes @oliviertassinari

I found borders in the wild!!

[nathanmarks]

IMO, I think borderless actually looks better 99.9% of the time in that application due to the technique.

[mbrookes]

Closing in favour of #4265.