From 11b695e44347190e6f6910b066a60317703b5a6a Mon Sep 17 00:00:00 2001
From: Thu Nguyen <thuminhnguyen@berkeley.edu>
Date: Thu, 14 Sep 2023 23:47:31 -0700
Subject: [PATCH 1/4] fix: Support for Non-Square Input Image for Avatar
 component

---
 modules/react/avatar/lib/Avatar.tsx      | 22 +++++++++++++++++++---
 modules/react/avatar/stories/stories.tsx | 12 ++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 4ddd43c165..ae7b3e264d 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -1,4 +1,5 @@
 import React, {useState} from 'react';
+import {Property} from 'csstype';
 import {styled, focusRing, hideMouseFocus} from '@workday/canvas-kit-react/common';
 import isPropValid from '@emotion/is-prop-valid';
 import {borderRadius, colors} from '@workday/canvas-kit-react/tokens';
@@ -35,6 +36,13 @@ export interface AvatarProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
    * Will render an `div` tag instead of a `button` when defined.
    */
   as?: 'div';
+  /**
+   * The object-fit CSS property sets how the content of a replaced element,
+   * such as an <img> or <video>, should be resized to fit its container.
+   * See [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
+   * If you image is not a square, you can use this property to ensure the image is rendered properly.
+   */
+  objectFit?: Property.ObjectFit;
 }
 
 /**
@@ -107,15 +115,16 @@ const StyledIcon = styled(SystemIconCircle)<{isImageLoaded: boolean}>(
   })
 );
 
-const StyledImage = styled('img')<{isLoaded: boolean}>(
+const StyledImage = styled('img')<{isLoaded: boolean; objectFit?: Property.ObjectFit}>(
   {
     width: '100%',
     height: '100%',
     borderRadius: borderRadius.circle,
     transition: fadeTransition,
   },
-  ({isLoaded}) => ({
+  ({isLoaded, objectFit}) => ({
     opacity: isLoaded ? 1 : 0,
+    objectFit,
   })
 );
 
@@ -127,6 +136,7 @@ export const Avatar: AvatarOverload = React.forwardRef(
       altText = 'Avatar',
       url,
       onClick,
+      objectFit,
       ...elemProps
     }: AvatarProps,
     ref: React.Ref<HTMLButtonElement>
@@ -164,7 +174,13 @@ export const Avatar: AvatarOverload = React.forwardRef(
         </StyledStack>
         {url && (
           <StyledStack size={size}>
-            <StyledImage src={url} alt={altText} onLoad={loadImage} isLoaded={imageLoaded} />
+            <StyledImage
+              src={url}
+              alt={altText}
+              onLoad={loadImage}
+              isLoaded={imageLoaded}
+              objectFit={objectFit}
+            />
           </StyledStack>
         )}
       </StyledContainer>
diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx
index 9de084d9ef..3e6ee9a767 100644
--- a/modules/react/avatar/stories/stories.tsx
+++ b/modules/react/avatar/stories/stories.tsx
@@ -57,6 +57,18 @@ storiesOf('Components/Indicators/Avatar', module)
       <h3>Extra Small</h3>
       <Avatar as="div" size={Avatar.Size.xs} url={testAvatar} />
     </div>
+  ))
+  .add('Non-Square Image', () => (
+    <div className="story">
+      <h3>Rectangle Image</h3>
+      <img alt="" src="https://placekitten.com/g/450/200" />
+      <h3>Round Image</h3>
+      <Avatar as="div" size={200} url="https://placekitten.com/g/450/200" objectFit="contain" />
+      <h3>Square Image</h3>
+      <img alt="" src="https://placekitten.com/g/450/450" />
+      <h3>Round Image</h3>
+      <Avatar as="div" size={200} url="https://placekitten.com/g/450/450" objectFit="contain" />
+    </div>
   ));
 
 storiesOf('Components/Indicators/Avatar/Avatar Button', module)

From d26ec7321ed206c3a296cf99af81915a3b5429a4 Mon Sep 17 00:00:00 2001
From: Manuel Carrera <mannycarrera4@users.noreply.github.com>
Date: Tue, 19 Sep 2023 13:48:38 -0600
Subject: [PATCH 2/4] Apply suggestions from code review

---
 modules/react/avatar/lib/Avatar.tsx      | 2 +-
 modules/react/avatar/stories/stories.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index ae7b3e264d..02866635a1 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -40,7 +40,7 @@ export interface AvatarProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
    * The object-fit CSS property sets how the content of a replaced element,
    * such as an <img> or <video>, should be resized to fit its container.
    * See [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
-   * If you image is not a square, you can use this property to ensure the image is rendered properly.
+   * If your image is not a square, you can use this property to ensure the image is rendered properly.
    */
   objectFit?: Property.ObjectFit;
 }
diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx
index 3e6ee9a767..27350ee60a 100644
--- a/modules/react/avatar/stories/stories.tsx
+++ b/modules/react/avatar/stories/stories.tsx
@@ -60,13 +60,13 @@ storiesOf('Components/Indicators/Avatar', module)
   ))
   .add('Non-Square Image', () => (
     <div className="story">
-      <h3>Rectangle Image</h3>
+      <h3>Original Rectangle Image</h3>
       <img alt="" src="https://placekitten.com/g/450/200" />
-      <h3>Round Image</h3>
+      <h3>Using Object Fit on a Rectangle Image</h3>
       <Avatar as="div" size={200} url="https://placekitten.com/g/450/200" objectFit="contain" />
-      <h3>Square Image</h3>
+      <h3>Original Square Image</h3>
       <img alt="" src="https://placekitten.com/g/450/450" />
-      <h3>Round Image</h3>
+      <h3>using Object Fit on a Square Image</h3>
       <Avatar as="div" size={200} url="https://placekitten.com/g/450/450" objectFit="contain" />
     </div>
   ));

From 1e0faa2c52137375b411b8923be903fa6a9eb826 Mon Sep 17 00:00:00 2001
From: Manuel Carrera <mannycarrera4@users.noreply.github.com>
Date: Tue, 19 Sep 2023 13:59:03 -0600
Subject: [PATCH 3/4] Update modules/react/avatar/stories/stories.tsx

---
 modules/react/avatar/stories/stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx
index 27350ee60a..bfcdb2aa7c 100644
--- a/modules/react/avatar/stories/stories.tsx
+++ b/modules/react/avatar/stories/stories.tsx
@@ -67,7 +67,7 @@ storiesOf('Components/Indicators/Avatar', module)
       <h3>Original Square Image</h3>
       <img alt="" src="https://placekitten.com/g/450/450" />
       <h3>using Object Fit on a Square Image</h3>
-      <Avatar as="div" size={200} url="https://placekitten.com/g/450/450" objectFit="contain" />
+      <Avatar as="div" size={200} url="https://placekitten.com/g/450/450" />
     </div>
   ));
 

From 01b7b0697576fba029f23bdec2ca991a908f1b3d Mon Sep 17 00:00:00 2001
From: Manuel Carrera <mannycarrera4@users.noreply.github.com>
Date: Tue, 19 Sep 2023 14:00:58 -0600
Subject: [PATCH 4/4] Update modules/react/avatar/stories/stories.tsx

---
 modules/react/avatar/stories/stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx
index bfcdb2aa7c..288a046109 100644
--- a/modules/react/avatar/stories/stories.tsx
+++ b/modules/react/avatar/stories/stories.tsx
@@ -66,7 +66,7 @@ storiesOf('Components/Indicators/Avatar', module)
       <Avatar as="div" size={200} url="https://placekitten.com/g/450/200" objectFit="contain" />
       <h3>Original Square Image</h3>
       <img alt="" src="https://placekitten.com/g/450/450" />
-      <h3>using Object Fit on a Square Image</h3>
+      <h3>Using a Square Image</h3>
       <Avatar as="div" size={200} url="https://placekitten.com/g/450/450" />
     </div>
   ));