diff --git a/.changeset/wicked-carrots-greet.md b/.changeset/wicked-carrots-greet.md
new file mode 100644
index 0000000000..830acf940e
--- /dev/null
+++ b/.changeset/wicked-carrots-greet.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/avatar': patch
+'@twilio-paste/core': patch
+---
+
+[Avatar] simplify logic for when to show image or icon
diff --git a/packages/paste-core/components/avatar/__tests__/avatar.test.tsx b/packages/paste-core/components/avatar/__tests__/avatar.test.tsx
index 462da8fb82..7dad9f6b35 100644
--- a/packages/paste-core/components/avatar/__tests__/avatar.test.tsx
+++ b/packages/paste-core/components/avatar/__tests__/avatar.test.tsx
@@ -127,6 +127,22 @@ describe('Avatar', () => {
);
expect(asFragment()).toMatchSnapshot();
});
+
+ it('should render an image if src and icon are passed', () => {
+ render(
+
+ );
+
+ expect(screen.getByRole('img').getAttribute('src')).toEqual('/avatars/avatar2.png');
+ expect(screen.getByRole('img').getAttribute('alt')).toEqual('avatar example');
+ expect(screen.getByTestId('avatar').querySelectorAll('svg').length).toEqual(0);
+ });
});
describe('ensure icon is a Paste Icon', () => {
diff --git a/packages/paste-core/components/avatar/src/index.tsx b/packages/paste-core/components/avatar/src/index.tsx
index 2a51aa42f2..67bce84924 100644
--- a/packages/paste-core/components/avatar/src/index.tsx
+++ b/packages/paste-core/components/avatar/src/index.tsx
@@ -11,6 +11,9 @@ const DEFAULT_SIZE = 'sizeIcon70';
const AvatarContents: React.FC = ({name, size = DEFAULT_SIZE, src, icon: Icon}) => {
const computedTokenNames = getComputedTokenNames(size);
+ if (src != null) {
+ return ;
+ }
if (Icon != null) {
if (!isValidElementType(Icon) || typeof Icon.displayName !== 'string' || !Icon.displayName.includes('Icon')) {
throw new Error('[Paste Avatar]: icon prop expected to be a Paste icon only.');
@@ -21,9 +24,6 @@ const AvatarContents: React.FC = ({name, size = DEFAULT_SIZE
);
}
- if (src != null) {
- return ;
- }
return (
(
size={size}
color="colorText"
>
- {src ? (
-
- ) : (
-
- )}
+
);
}
diff --git a/packages/paste-website/src/pages/components/avatar/index.mdx b/packages/paste-website/src/pages/components/avatar/index.mdx
index fb83e63626..e8729c03d9 100644
--- a/packages/paste-website/src/pages/components/avatar/index.mdx
+++ b/packages/paste-website/src/pages/components/avatar/index.mdx
@@ -121,7 +121,7 @@ Provide the Avatar with a source path via the `src` prop to render the Avatar as
A note about Avatar contents
The Avatar component can either display an image or an icon, but not both. If both are present, the Avatar will
- display the icon.
+ display the image.
@@ -152,7 +152,7 @@ Provide the Avatar with an `icon` prop to display an icon. You must import the i
A note about Avatar contents
The Avatar component can either display an image or an icon, but not both. If both are present, the Avatar will
- display the icon.
+ display the image.
@@ -207,7 +207,7 @@ The Avatar `size` can be set as a responsive array of sizes.
## Composition Notes
-The Avatar displays its contents in this priority: icon, then image, then initials.
+The Avatar displays its contents in this priority: image, then icon, then initials.
## Anatomy