Merge pull request #337 from JayaShakthi97/fix-avatar

fix(react): fix style inconsistency in Header component
wso2 · Feb 7, 2025 · cceb11a · cceb11a
2 parents f2e9b0e + cb18225
commit cceb11a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx
@@ -85,10 +85,18 @@ const Avatar: OverridableComponent<AvatarTypeMap<AvatarProps>> = forwardRef(
 
     const {color} = usePastelColorGenerator(colorRandomizer);
 
-    const classes: string = clsx('oxygen-avatar', className);
-
     return (
-      <MuiAvatar ref={ref} className={classes} sx={{bgcolor: randomBackgroundColor ? color : undefined}} {...rest}>
+      <MuiAvatar
+        ref={ref}
+        className={clsx(
+          /* @deprecated Use `OxygenAvatar-root` instead. https://github.com/wso2/oxygen-ui/issues/274 */
+          'oxygen-avatar',
+          'OxygenAvatar-root',
+          className,
+        )}
+        sx={{bgcolor: randomBackgroundColor ? color : undefined}}
+        {...rest}
+      >
         {children}
       </MuiAvatar>
     );

diff --git a/packages/react/src/components/Avatar/avatar.scss b/packages/react/src/components/Avatar/avatar.scss
@@ -16,6 +16,6 @@
  * under the License.
  */
 
-.oxygen-avatar {
-  /* Add Styles */
+.OxygenAvatar-root {
+  text-transform: capitalize;
 }
diff --git a/packages/react/src/components/Header/header.scss b/packages/react/src/components/Header/header.scss
@@ -92,7 +92,6 @@
     .image {
       width: 2.2rem;
       height: 2.2rem;
-      text-transform: capitalize;
     }
   }