Avatar - Bugfix shape styling (#7022)

<!--
  ☝️How to write a good PR title:
  - Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #7021

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

This resolves an issue that is present with square Avatar components. The issue is that the Avatar and Image classes were defaulting to the rounded border-radius rather than the expected border radius given the shape.

The `shape{Round || Square}` class instead sets the `border-radius` value and the Avatar and Image classes inherit the border-radius from their parent component.

| Before | After |
| - | - |
| <img width="330" alt="Screen Shot 2022-08-25 at 11 31 02 AM" src="https://user-images.githubusercontent.com/4250423/186721070-6e098933-062e-4295-b52d-774bb4a906c1.png"> | <img width="418" alt="Screen Shot 2022-08-25 at 11 31 34 AM" src="https://user-images.githubusercontent.com/4250423/186721072-b1559e34-cb37-48f7-8ebb-e37353e814ca.png"> |


<!--
  Summary of the changes committed.

  Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot.

  If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

Visit Storybook and look at the Square component with an external URL.

### 🎩 checklist

- [ ] ~Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)~ 
    - Not entirely sure this is necessary since this is a simple CSS regression. If you feel strongly against this decision I'm not opposed to including testing on mobile devices. I've tested with Chrome, Firefox, and Safari. Edge is built on Chromium 🤷 
- [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] ~Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)~ N/A
- [ ] ~Updated the component's `README.md` with documentation changes~ N/A
- [ ] ~[Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide~ N/A

Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>

Author: QuintonC

.changeset/breezy-years-sing.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed visual bug for avatar shape prop

polaris-react/src/components/Avatar/Avatar.scss

@@ -10,7 +10,6 @@
   max-width: 100%;
   background: var(--p-surface-neutral);
   color: var(--p-icon-subdued);
-  border-radius: var(--p-border-radius-half);
   user-select: none;
 
   @media (forced-colors: active) {
@@ -24,6 +23,10 @@
   }
 }
 
+.shapeRound {
+  border-radius: var(--p-border-radius-half);
+}
+
 .shapeSquare {
   border-radius: var(--p-border-radius-05);
 }
@@ -83,7 +86,7 @@
   left: 50%;
   width: 100%;
   height: 100%;
-  border-radius: var(--p-border-radius-half);
+  border-radius: inherit;
   transform: translate(-50%, -50%);
   object-fit: cover;
 }

polaris-react/src/components/Avatar/Avatar.stories.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {ActionList, Avatar, Button, Popover} from '@shopify/polaris';
+import {ActionList, Avatar, Button, Popover, Stack} from '@shopify/polaris';
 
 export default {
   component: Avatar,
@@ -44,3 +44,32 @@ export function ExtraSmall() {
 export function Square() {
   return <Avatar name="Shop One" shape="square" />;
 }
+
+export function ExternalImage() {
+  return (
+    <Avatar
+      name="External image"
+      shape="square"
+      source="https://picsum.photos/200"
+    />
+  );
+}
+
+export function Sizes() {
+  return (
+    <Stack>
+      <Stack.Item>
+        <Avatar customer name="Farrah" size="extraSmall" />
+      </Stack.Item>
+      <Stack.Item>
+        <Avatar customer name="Farrah" size="small" />
+      </Stack.Item>
+      <Stack.Item>
+        <Avatar customer name="Farrah" size="medium" />
+      </Stack.Item>
+      <Stack.Item>
+        <Avatar customer name="Farrah" size="large" />
+      </Stack.Item>
+    </Stack>
+  );
+}

polaris-react/src/components/Avatar/tests/Avatar.test.tsx

@@ -138,5 +138,13 @@ describe('<Avatar />', () => {
         className: expect.stringContaining('shapeSquare'),
       });
     });
+
+    it('renders a round background when square is not passed to shape', () => {
+      const avatar = mountWithApp(<Avatar initials="DL" />);
+
+      expect(avatar).toContainReactComponent('span', {
+        className: expect.stringContaining('shapeRound'),
+      });
+    });
   });
 });