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