[Avatar] Apply default background color for images (#7038)

Image avatars had the `styleOne` class applied by default giving them a
jarring yellow background color. This change defaults to surface neutral
to match our skeleton content.

Before:
![image](https://screenshot.click/26-34-zf32m-1pr31.png)

After:
![image](https://screenshot.click/26-34-zlwxl-c4hw5.png)

Author: kyledurand

.changeset/odd-plants-cry.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Applied default background color to image avatar

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

@@ -102,9 +102,11 @@ export function Avatar({
   const className = classNames(
     styles.Avatar,
     size && styles[variationName('size', size)],
-    !customer && styles[variationName('style', styleClass(nameString))],
     hasImage && status === Status.Loaded && styles.imageHasLoaded,
     shape && styles[variationName('shape', shape)],
+    !customer &&
+      !source &&
+      styles[variationName('style', styleClass(nameString))],
   );
 
   const imageClassName = classNames(

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

@@ -31,6 +31,17 @@ describe('<Avatar />', () => {
         avatar.setProps({source: 'image/new/path'});
       }).not.toThrow();
     });
+
+    it('does not apply a style background class', () => {
+      const src = 'image/path/';
+      const avatar = mountWithApp(<Avatar source={src} />);
+      expect(avatar).toContainReactComponent('span', {
+        className: 'Avatar sizeMedium shapeRound',
+      });
+      expect(avatar).toContainReactComponent('span', {
+        className: expect.not.stringContaining('styleOne'),
+      });
+    });
   });
 
   describe('customer', () => {
@@ -44,6 +55,17 @@ describe('<Avatar />', () => {
       const avatar = mountWithApp(<Avatar customer source={src} />);
       expect(avatar).not.toContainReactComponent('svg');
     });
+
+    it('does not apply a style class', () => {
+      const src = 'image/path/';
+      const avatar = mountWithApp(<Avatar customer source={src} />);
+      expect(avatar).toContainReactComponent('span', {
+        className: 'Avatar sizeMedium shapeRound',
+      });
+      expect(avatar).toContainReactComponent('span', {
+        className: expect.not.stringContaining('styleOne'),
+      });
+    });
   });
 
   describe('Initials', () => {