From 4af8599c5ae88548bff1059817bad960339e21b1 Mon Sep 17 00:00:00 2001 From: Thu Nguyen Date: Wed, 20 Sep 2023 07:50:09 -0700 Subject: [PATCH 1/3] fix(Avatar): Support for Non-Square Input Image for Avatar component (#2337) Fixes: #1960 Added new property to Avatar component `object-fit` to support setting the content of a image to be resized to fit its container. [category:Components] Co-authored-by: @mannycarrera4 --- 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..02866635a1 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 or