Merge pull request #11348 from jpeach/avatar-background-fix

Don't set the background color on Avatars with pictures.

.changeset/good-beans-knock.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Don't set the background color on an Avatar component that has a picture.

packages/core-components/src/components/Avatar/Avatar.test.tsx

@@ -17,6 +17,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 import { Avatar } from './Avatar';
+import { stringToColor } from './utils';
 
 describe('<Avatar />', () => {
   it('renders without exploding', async () => {
@@ -24,4 +25,24 @@ describe('<Avatar />', () => {
 
     expect(getByText('JD')).toBeInTheDocument();
   });
+
+  it('generates a background color', async () => {
+    const bgcolor = stringToColor('John Doe');
+    const { getByText } = render(<Avatar displayName="John Doe" />);
+    expect(getByText('JD')).toHaveStyle(`background-color: ${bgcolor}`);
+  });
+
+  it('does not generate a background color when a picture is given', async () => {
+    const bgcolor = stringToColor('John Doe');
+    const { getByAltText } = render(
+      <Avatar
+        displayName="John Doe"
+        picture="https://backstage.io/test/john-doe.png"
+      />,
+    );
+
+    expect(getByAltText('John Doe')).not.toHaveStyle(
+      `background-color: ${bgcolor}`,
+    );
+  });
 });

packages/core-components/src/components/Avatar/Avatar.tsx

@@ -67,15 +67,23 @@ export interface AvatarProps {
 export function Avatar(props: AvatarProps) {
   const { displayName, picture, customStyles } = props;
   const classes = useStyles();
+  let styles = { ...customStyles };
+  // We only calculate the background color if there's not an avatar
+  // picture. If there is a picture, it might have a transparent
+  // background and we don't know whether the calculated background
+  // color will clash.
+  if (!picture) {
+    styles = {
+      backgroundColor: stringToColor(displayName || ''),
+      ...customStyles,
+    };
+  }
   return (
     <MaterialAvatar
       alt={displayName}
       src={picture}
       className={classes.avatar}
-      style={{
-        backgroundColor: stringToColor(displayName || picture || ''),
-        ...customStyles,
-      }}
+      style={styles}
     >
       {displayName && extractInitials(displayName)}
     </MaterialAvatar>