feat(Avatar): Prop color accept custom colors

JF-Cozy · JF-Cozy · commit 6ebe6253879e · 2026-03-24T09:08:49.000+01:00
diff --git a/react/Avatar/Readme.md b/react/Avatar/Readme.md
@@ -86,6 +86,7 @@ const initialVariants = [{ disabled: false, border: false, innerBorder: false }]
         <Avatar color="none" disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}>BC</Avatar>
         <Avatar color="sunrise" disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}>CD</Avatar>
         <Avatar color="sunrise" size={94} disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}>DE</Avatar>
+        <Avatar color="#0000ff" disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}>EF</Avatar>
       </div>
     </>
   )}
diff --git a/react/Avatar/index.jsx b/react/Avatar/index.jsx
@@ -15,7 +15,8 @@ const useStyles = makeStyles(theme => ({
   },
   colorDefault: {
     color: ({ color }) => (color ? theme.palette.primary.contrastText : ''),
-    background: ({ color }) => colorMapping[color]
+    background: ({ color }) =>
+      supportedColors.includes(color) ? colorMapping[color] : color
   }
 }))
 
@@ -34,12 +35,7 @@ const Avatar = ({
     typeof props.children === 'string' ? nameToColor(props.children) : undefined
   const classes = useStyles({
     size: isCustomSize ? size : undefined,
-    color:
-      color === 'none'
-        ? undefined
-        : supportedColors.includes(color)
-        ? color
-        : defaultColor
+    color: color === 'none' ? undefined : color || defaultColor
   })
 
   return (
@@ -63,7 +59,10 @@ Avatar.propTypes = {
     PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl']),
     PropTypes.number
   ]),
-  color: PropTypes.oneOf([...supportedColors, 'none']),
+  color: PropTypes.oneOfType([
+    PropTypes.oneOf([...supportedColors, 'none']),
+    PropTypes.string
+  ]),
   /** Controls the display type */
   display: PropTypes.oneOf(['initial', 'inline']),
   disabled: PropTypes.bool
