fix(UserAvatar): release review fixes (carbon-design-system#6293)

* fix(UserAvatar): release review fixes * fix(UserAvatar): release review fixes * fix(userAvatar): review comments
makafsal · Oct 29, 2024 · eafbba3 · eafbba3
1 parent 44e5a8c
commit eafbba3
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
    */
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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';