[Avatar] Add shape parameter

[clarkjennings]

WHY are these changes introduced?

Add a way to create a square shaped Avatar for plus stores in Plus Admin Migration
Related to Businesses issues #1391 and #1392.

WHAT is this pull request doing?

Add an optional parameter "shape" to the Avatar component. Defaults to round for no change in behavior or appearance. If square is supplied instead, the Avatar will have a 2px border-radius instead of 50%, resulting in a square shape with slightly rounded corners.

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
       <Page title="Playground">
      {/* Add the code you want to test in here */}
      <Avatar
        name={"Shop 1"}
        initials={"S1"}
        shape='square'
      />
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	196.83 KB (+0.04% 🔺)
polaris-react-esm	132.14 KB (+0.05% 🔺)
polaris-react-esnext	187.81 KB (+0.05% 🔺)
polaris-react-css	42.16 KB (+0.04% 🔺)

[kyledurand]

Comparing this to the screenshot from slack it looks like there's some additional type treatment that's missing here:

[clarkjennings]

Comparing this to the screenshot from slack it looks like there's some additional type treatment that's missing here:

Great eye! I think i've got it fixed. Thanks!

[kyledurand]

Looking good 👍 Just watch out for the spacing issue I pointed out. I'm thinking this could use a test as well. Something like:

describe('shape', () => {
  it('renders a square background when square is passed to shape', () => {
    const avatar = mountWithApp(<Avatar initials="DL" shape="square" />);

    expect(avatar).toContainReactComponent('span', {
      className: expect.stringContaining('shapeSquare'),
    });
  });
});

[kyledurand]

Suggested change

	shape && styles[variationName('shape',shape)],
	shape && styles[variationName('shape',shape)],

[chloerice]

This looks great @clarkjennings!! 🙌🏽 Just had a question of the recommended context to use square vs round in the Admin. Thank you for contributing!! 🎉

[chloerice]

Is this the shape we want avatars to be going forward when representing all merchants (and their staff?) once unified Admin launches? Or is this just for Plus merchants?

Suggested change

	Use to present a square shaped for a merchant, customer, or business.
	Use a `square` `shape` when the avatar represents the merchant.

[ghost]

🎉 Thanks for your contribution to Polaris!