fix(avatar): Combine Avatar & AvatarButton and provide fallback image

[vibdev]

Summary

If the link for the avatar fails, eg 404 etc, we are currently showing a broken link. This could be made a bit nicer by rendering the default icon instead.

Not sure the best way to test this, should I just add an item to the storybook for avatar image?

Also open question if the icon should have a label with the altText passed in on failure?

Closes #613

BREAKING CHANGES

• <AvatarButton> has been removed. By default <Avatar> will now be a button. If you need the old plain div version you can pass the prop as="div".

• The component is now a functional component instead of a class. If you are using ref on the class version it will not be pointing to the same thing. buttonRef has changed to ref since it could now reference a button or a div

• Visual change: Avatar images appear once they are load. While loading or if they fail to load the default icon will be shown. So you may want to check which variant you are using even in the image case.

Checklist

• branch has been rebased on the latest master commit
• tests are changed or added
• yarn test passes
• code has been documented and, if applicable, usage described in README.md
• design approved final implementation
• a11y approved final implementation
• code adheres to the API & Pattern guidelines

Example

[cypress]

---

Test summary

343 • 0 • 1 • 0

---

Run details

Project	canvas-kit
Status	Passed
Commit	6856d42 ℹ️
Started	May 14, 2020 5:17 AM
Ended	May 14, 2020 5:21 AM
Duration	03:43 💡
OS	Linux Ubuntu Linux - 18.04
Browser	Electron 80

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[NicholasBoll]

Overall, I like the idea. A few questions on the implementation to make it a better experience.

[vibdev]

@anicholls @NicholasBoll Updated and unified as a single functional component, let me know what you think.

[anicholls]

Can you rebase this onto prerelease/v4 and change the base branch as well?

Also, can you summarize the breaking changes in the PR description?

[anicholls]

Looks great - thank you! 🎉

[NicholasBoll]

I don't think this will work. Let me test it out.

[vibdev]

I considered adding the ref in the Avatar overload but wasn't sure if it was needed since in Alex's example it wasn't split up.

[NicholasBoll]

I have confirmed this will not work and React will throw the following warning:

react.development.js:167 Warning: Avatar: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop.

I think ref is the correct prop, but we'll have to use forwardRef for the component to make that work. Some more details here: #548

[anicholls]

Good catch 👍 We should make sure we have a test for this as well.