From eafbba33b6c9630457eeb0c6d86d030ee699940f Mon Sep 17 00:00:00 2001
From: Anamika T S <47971732+anamikaanu96@users.noreply.github.com>
Date: Tue, 29 Oct 2024 11:05:24 +0530
Subject: [PATCH] fix(UserAvatar): release review fixes (#6293)

* fix(UserAvatar): release review fixes

* fix(UserAvatar): release review fixes

* fix(userAvatar): review comments
---
 .../src/components/UserAvatar/_carbon-imports.scss    |  1 +
 .../src/components/UserAvatar/_user-avatar.scss       |  4 ++++
 .../src/components/UserAvatar/UserAvatar.mdx          |  6 ++++++
 .../src/components/UserAvatar/UserAvatar.tsx          | 11 ++++++++---
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/ibm-products-styles/src/components/UserAvatar/_carbon-imports.scss b/packages/ibm-products-styles/src/components/UserAvatar/_carbon-imports.scss
index 0687b0d474..a3de276720 100644
--- a/packages/ibm-products-styles/src/components/UserAvatar/_carbon-imports.scss
+++ b/packages/ibm-products-styles/src/components/UserAvatar/_carbon-imports.scss
@@ -7,3 +7,4 @@
 
 // Import any Carbon component styles used from UserAvatar in this file.
 // UserAvatar uses the following Carbon components:
+@use '@carbon/react/scss/components/tooltip';
diff --git a/packages/ibm-products-styles/src/components/UserAvatar/_user-avatar.scss b/packages/ibm-products-styles/src/components/UserAvatar/_user-avatar.scss
index 25c5e95d47..a71d2fe7d4 100644
--- a/packages/ibm-products-styles/src/components/UserAvatar/_user-avatar.scss
+++ b/packages/ibm-products-styles/src/components/UserAvatar/_user-avatar.scss
@@ -20,6 +20,7 @@
 
 // UserAvatar uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by UserAvatar
+@use '@carbon/react/scss/components/tooltip';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 
@@ -61,6 +62,7 @@ $sizes: (
   &:focus-within .#{$block-class} {
     // stylelint-disable-next-line carbon/theme-token-use
     outline: 2px solid $focus;
+    outline-offset: 1px;
   }
 }
 
@@ -74,6 +76,7 @@ $sizes: (
   background-color: $color;
 }
 
+//this mixin allows you to set background color based on the lighter themes such as g10 and white
 @mixin setLightBg($order, $color) {
   :root .#{$block-class}--#{$order},
   .#{$carbon-prefix}--g10 .#{$block-class}--#{$order},
@@ -84,6 +87,7 @@ $sizes: (
   }
 }
 
+//this mixin allows you to set background color based on the darker themes such as g90 and g100
 @mixin setDarkBg($order, $color) {
   .#{$carbon-prefix}--g90 .#{$block-class}--#{$order},
   .#{$carbon-prefix}--g100 .#{$block-class}--#{$order},
diff --git a/packages/ibm-products/src/components/UserAvatar/UserAvatar.mdx b/packages/ibm-products/src/components/UserAvatar/UserAvatar.mdx
index 1dd6366fe4..17652accc8 100644
--- a/packages/ibm-products/src/components/UserAvatar/UserAvatar.mdx
+++ b/packages/ibm-products/src/components/UserAvatar/UserAvatar.mdx
@@ -15,6 +15,12 @@ import * as UserAvatarStories from './UserAvatar.stories';
 
 {/* TODO: Overview. */}
 
+## Note on theming
+
+The user avatar supports all the 4 theme variants from carbon (white, g10, g90 and g100).
+The backgroundColor and font color will adapt dynamically based on the lighter and darker themes.
+
+
 ## Example usage
 
 {/* TODO: One example per designed use case. */}
diff --git a/packages/ibm-products/src/components/UserAvatar/UserAvatar.tsx b/packages/ibm-products/src/components/UserAvatar/UserAvatar.tsx
index 5fcd2ccfc0..fe54787f24 100644
--- a/packages/ibm-products/src/components/UserAvatar/UserAvatar.tsx
+++ b/packages/ibm-products/src/components/UserAvatar/UserAvatar.tsx
@@ -88,7 +88,7 @@ type UserAvatarBaseProps = {
   /**
    * Provide a custom icon to use if you need to use an icon other than the default one
    */
-  renderIcon?: React.ElementType;
+  renderIcon?: React.ElementType | string;
   /**
    * Set the size of the avatar circle
    */
@@ -221,7 +221,8 @@ UserAvatar.displayName = componentName;
 // See https://www.npmjs.com/package/prop-types#usage.
 UserAvatar.propTypes = {
   /**
-   * Provide the background color need to be set for UserAvatar.
+   * Provide the background color need to be set for UserAvatar. Background color will be set based on lighter or darker theme.
+   * For example: if you select order-5-purple, it will take $purple-60 for lighter theme and $purple-50 for darker theme.
    */
   backgroundColor: PropTypes.oneOf([
     'order-1-cyan',
@@ -259,7 +260,11 @@ UserAvatar.propTypes = {
    * Provide a custom icon to use if you need to use an icon other than the default one
    */
   /**@ts-ignore */
-  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  renderIcon: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.object,
+    PropTypes.string,
+  ]),
   /**
    * Set the size of the avatar circle
    */