cozy-ui 121.1.0 → 121.1.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [121.1.1](https://github.com/cozy/cozy-ui/compare/v121.1.0...v121.1.1) (2025-03-17)
+
+
+### Bug Fixes
+
+* **Avatar:** Style wasn't correct ([932b3ec](https://github.com/cozy/cozy-ui/commit/932b3ec))
+
 # [121.1.0](https://github.com/cozy/cozy-ui/compare/v121.0.0...v121.1.0) (2025-03-17)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "121.1.0",
+  "version": "121.1.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Avatar/Readme.md

@@ -8,24 +8,41 @@ import { supportedColors } from 'cozy-ui/transpiled/react/Avatar/helpers'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import LinkIcon from "cozy-ui/transpiled/react/Icons/Link"
 import cozyLogo from '../../docs/cozy-logo_white_128.png'
+import Variants from 'cozy-ui/docs/components/Variants'
 
 const sizes = ['xs', 's', 'm', 'l', 'xl']
+const initialVariants = [{ disabled: false }]
 
 ;
 
-sizes.map(size => (
-  <AvatarGroup className="u-mb-half" key={size} max={5} size={size}>
-    <Avatar size={size} color={supportedColors[0]}>AB</Avatar>
-    <Avatar size={size} color={supportedColors[1]}>BC</Avatar>
-    <Avatar size={size} color={supportedColors[2]}><Icon icon={LinkIcon} /></Avatar>
-    <Avatar size={size} src={cozyLogo} />
-    <Avatar size={size} color={supportedColors[4]}>EF</Avatar>
-    <Avatar size={size} color={supportedColors[5]}>FG</Avatar>
-  </AvatarGroup>
-))
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    sizes.map(size => (
+      <div className="u-mb-half u-flex u-flex-items-center" key={size}>
+        <AvatarGroup style={{ zIndex: 2 }} max={4} size={size}>
+          <Avatar size={size} color={supportedColors[0]} disabled={variant.disabled}>AB</Avatar>
+          <Avatar size={size} color={supportedColors[1]} disabled={variant.disabled}>BC</Avatar>
+          <Avatar size={size} src={cozyLogo} disabled={variant.disabled} />
+          <Avatar size={size} color={supportedColors[4]} disabled={variant.disabled}>EF</Avatar>
+          <Avatar size={size} color={supportedColors[5]} disabled={variant.disabled}>FG</Avatar>
+        </AvatarGroup>
+        <Avatar
+          style={{ marginLeft: `-${spacingByAvatarSize[size]}px`, zIndex: 1 }}
+          size={size} color={supportedColors[2]}
+          color="none"
+          border
+          innerBorder
+          disabled={variant.disabled}
+        >
+          <Icon icon={LinkIcon} />
+        </Avatar>
+      </div>
+    ))
+  )}
+</Variants>
 ```
 
-### Mui
+### Solo
 
 ```jsx
 import cozyLogo from '../../docs/cozy-logo_white_128.png'
@@ -40,7 +57,7 @@ import Variants from 'cozy-ui/docs/components/Variants'
 
 const sizes = ['xs', 's', 'm', 'l', 'xl']
 
-const initialVariants = [{ disabled: false }]
+const initialVariants = [{ disabled: false, border: false, innerBorder: false }]
 
 ;
 
@@ -51,20 +68,23 @@ const initialVariants = [{ disabled: false }]
         <div key={color} className="u-flex u-flex-items-center u-mb-half" style={{ gap: '0.5rem' }}>
           {sizes.map(size => (
             <React.Fragment key={size}>
-              <Avatar size={size} color={color} disabled={variant.disabled} />
-              <Avatar size={size} color={color} disabled={variant.disabled}>AB</Avatar>
-              <Avatar size={size} color={color} disabled={variant.disabled}><Icon icon={LinkIcon} /></Avatar>
+              <Avatar size={size} color={color} disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder} />
+              <Avatar size={size} color={color} disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}>AB</Avatar>
+              <Avatar size={size} color={color} disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}><Icon icon={LinkIcon} /></Avatar>
             </React.Fragment>
           ))}
         </div>
       ))}
       <div className="u-flex u-flex-items-center u-mb-half" style={{ gap: '0.5rem' }}>
-        {sizes.map(size => (
-          <React.Fragment key={size}>
-            <Avatar size={size} src={cozyLogo} disabled={variant.disabled} />
-            <Avatar size={size} disabled={variant.disabled} />
-          </React.Fragment>
-        ))}
+        <Avatar src={cozyLogo} disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder} />
+        <Avatar color="none" src={cozyLogo} disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder} />
+        <Avatar color="sunrise" src={cozyLogo} disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder} />
+        <Avatar disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder} />
+        <Avatar color="none" disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder} />
+        <Avatar color="sunrise" disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder} />
+        <Avatar disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}>AB</Avatar>
+        <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>
       </div>
     </>
   )}

package/react/Avatar/helpers.js

@@ -40,6 +40,17 @@ export const colorMapping = {
   pluviophile: 'linear-gradient(136deg, #A1D6F4 14.84%, #52CEC2 96.03%)',
   cornflower: 'linear-gradient(135deg, #86D9D3 0%, #1CCFB4 100%)',
   paleGreen: 'linear-gradient(135deg, #E2FA17 0%, #75D8CB 100%)',
-  moonBlue: 'linear-gradient(136deg, #6DCFFF 14.84%, #3D88F8 96.03%)',
-  undefined: ''
+  moonBlue: 'linear-gradient(136deg, #6DCFFF 14.84%, #3D88F8 96.03%)'
+}
+
+const colors = Object.values(supportedColors).filter(Boolean)
+
+const makeKey = (colors, name) =>
+  Array.from(name.toUpperCase())
+    .map(letter => letter.charCodeAt(0))
+    .reduce((sum, number) => sum + number, 0) % colors.length
+
+export const nameToColor = (name = '') => {
+  const key = makeKey(colors, name)
+  return colors[key]
 }

package/react/Avatar/index.jsx

@@ -3,7 +3,7 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { colorMapping } from './helpers'
+import { colorMapping, supportedColors, nameToColor } from './helpers'
 import { makeStyles } from '../styles'
 
 const useStyles = makeStyles(theme => ({
@@ -13,13 +13,34 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-const Avatar = ({ className, color, size, disabled, ...props }) => {
-  const classes = useStyles({ color })
+const Avatar = ({
+  className,
+  color,
+  size,
+  border,
+  innerBorder,
+  disabled,
+  ...props
+}) => {
+  const defaultColor =
+    typeof props.children === 'string' ? nameToColor(props.children) : undefined
+  const classes = useStyles({
+    color:
+      color === 'none'
+        ? undefined
+        : supportedColors.includes(color)
+        ? color
+        : defaultColor
+  })
 
   return (
     <AvatarMui
       classes={classes}
-      className={cx(className, `size-${size}`, { disabled: !!disabled })}
+      className={cx(className, `size-${size}`, {
+        disabled: !!disabled,
+        border: !!border,
+        innerBorder: !!innerBorder
+      })}
       {...props}
     />
   )
@@ -31,7 +52,7 @@ Avatar.propTypes = {
     PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl']),
     PropTypes.number
   ]),
-  color: PropTypes.string,
+  color: PropTypes.oneOf([...supportedColors, 'none']),
   disabled: PropTypes.bool
 }
 

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -701,6 +701,77 @@ export const makeLightNormalOverrides = theme => ({
       }
     }
   },
+  MuiAvatarGroup: {
+    avatar: {
+      border: `2px solid ${theme.palette.background.paper}`
+    }
+  },
+  MuiAvatar: {
+    root: {
+      fontWeight: 600,
+      '&.size': {
+        '&-xs': {
+          width: 16,
+          height: 16,
+          fontSize: 8,
+          '& svg': {
+            width: 8,
+            height: 8
+          }
+        },
+        '&-s': {
+          width: 24,
+          height: 24,
+          fontSize: 12,
+          '& svg': {
+            width: 12,
+            height: 12
+          }
+        },
+        '&-m': {
+          width: 32,
+          height: 32,
+          fontSize: 16,
+          '& svg': {
+            width: 16,
+            height: 16
+          }
+        },
+        '&-l': {
+          width: 48,
+          height: 48,
+          fontSize: 24,
+          '& svg': {
+            width: 24,
+            height: 24
+          }
+        },
+        '&-xl': {
+          width: 64,
+          height: 64,
+          fontSize: 32,
+          '& svg': {
+            width: 32,
+            height: 32
+          }
+        }
+      },
+      '&.disabled': {
+        color: theme.palette.primary.contrastText,
+        background: 'var(--silver)', // should be semantic but used legacy component color for now
+        '& img': {
+          filter: 'grayscale(1) brightness(2)',
+          opacity: 0.5
+        }
+      },
+      '&.border': {
+        border: `2px solid ${theme.palette.background.paper}`
+      },
+      '&.innerBorder': {
+        boxShadow: `inset 0px 0px 0px 1px ${theme.palette.border.main}`
+      }
+    }
+  },
   MuiCheckbox: {
     colorSecondary: {
       '&$checked': {

package/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.js

@@ -171,22 +171,23 @@ export const makeLightNormalTwakeOverrides = theme => {
         height: 56
       }
     },
+    MuiAvatarGroup: {
+      root: {
+        '& > div:last-child': {
+          boxShadow: `inset 0px 0px 0px 1px ${theme.palette.border.main}`
+        }
+      }
+    },
     MuiAvatar: {
       root: {
-        fontWeight: 600,
         '&.size': {
           '&-xs': {
-            width: 16,
-            height: 16,
-            fontSize: 8,
             '& svg': {
               width: 10,
               height: 10
             }
           },
           '&-s': {
-            width: 24,
-            height: 24,
             fontSize: 11,
             '& svg': {
               width: 16,
@@ -194,36 +195,23 @@ export const makeLightNormalTwakeOverrides = theme => {
             }
           },
           '&-m': {
-            width: 32,
-            height: 32,
-            fontSize: 16,
             '& svg': {
               width: 20,
               height: 20
             }
           },
           '&-l': {
-            width: 48,
-            height: 48,
-            fontSize: 24,
             '& svg': {
               width: 28,
               height: 28
             }
           },
           '&-xl': {
-            width: 64,
-            height: 64,
-            fontSize: 32,
             '& svg': {
               width: 36,
               height: 36
             }
           }
-        },
-        '&.disabled': {
-          color: theme.palette.primary.contrastText,
-          background: theme.palette.action.disabledBackground
         }
       },
       colorDefault: {

package/transpiled/react/Avatar/helpers.d.ts

@@ -30,5 +30,5 @@ export namespace colorMapping {
     const cornflower: string;
     const paleGreen: string;
     const moonBlue: string;
-    const undefined: string;
 }
+export function nameToColor(name?: string): string;

package/transpiled/react/Avatar/helpers.js

@@ -25,6 +25,20 @@ export var colorMapping = {
   pluviophile: 'linear-gradient(136deg, #A1D6F4 14.84%, #52CEC2 96.03%)',
   cornflower: 'linear-gradient(135deg, #86D9D3 0%, #1CCFB4 100%)',
   paleGreen: 'linear-gradient(135deg, #E2FA17 0%, #75D8CB 100%)',
-  moonBlue: 'linear-gradient(136deg, #6DCFFF 14.84%, #3D88F8 96.03%)',
-  undefined: ''
+  moonBlue: 'linear-gradient(136deg, #6DCFFF 14.84%, #3D88F8 96.03%)'
+};
+var colors = Object.values(supportedColors).filter(Boolean);
+
+var makeKey = function makeKey(colors, name) {
+  return Array.from(name.toUpperCase()).map(function (letter) {
+    return letter.charCodeAt(0);
+  }).reduce(function (sum, number) {
+    return sum + number;
+  }, 0) % colors.length;
+};
+
+export var nameToColor = function nameToColor() {
+  var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var key = makeKey(colors, name);
+  return colors[key];
 };

package/transpiled/react/Avatar/index.js

@@ -1,11 +1,12 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "color", "size", "disabled"];
+var _excluded = ["className", "color", "size", "border", "innerBorder", "disabled"];
 import AvatarMui from '@material-ui/core/Avatar';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { colorMapping } from "cozy-ui/transpiled/react/Avatar/helpers";
+import { colorMapping, supportedColors, nameToColor } from "cozy-ui/transpiled/react/Avatar/helpers";
 import { makeStyles } from "cozy-ui/transpiled/react/styles";
 var useStyles = makeStyles(function (theme) {
   return {
@@ -26,16 +27,21 @@ var Avatar = function Avatar(_ref3) {
   var className = _ref3.className,
       color = _ref3.color,
       size = _ref3.size,
+      border = _ref3.border,
+      innerBorder = _ref3.innerBorder,
       disabled = _ref3.disabled,
       props = _objectWithoutProperties(_ref3, _excluded);
 
+  var defaultColor = typeof props.children === 'string' ? nameToColor(props.children) : undefined;
   var classes = useStyles({
-    color: color
+    color: color === 'none' ? undefined : supportedColors.includes(color) ? color : defaultColor
   });
   return /*#__PURE__*/React.createElement(AvatarMui, _extends({
     classes: classes,
     className: cx(className, "size-".concat(size), {
-      disabled: !!disabled
+      disabled: !!disabled,
+      border: !!border,
+      innerBorder: !!innerBorder
     })
   }, props));
 };
@@ -43,7 +49,7 @@ var Avatar = function Avatar(_ref3) {
 Avatar.propTypes = {
   className: PropTypes.string,
   size: PropTypes.oneOfType([PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl']), PropTypes.number]),
-  color: PropTypes.string,
+  color: PropTypes.oneOf([].concat(_toConsumableArray(supportedColors), ['none'])),
   disabled: PropTypes.bool
 };
 Avatar.defaultProps = {

package/transpiled/react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts

@@ -728,6 +728,77 @@ export function makeDarkInvertedOverrides(theme: any): {
             };
         };
     };
+    MuiAvatarGroup: {
+        avatar: {
+            border: string;
+        };
+    };
+    MuiAvatar: {
+        root: {
+            fontWeight: number;
+            '&.size': {
+                '&-xs': {
+                    width: number;
+                    height: number;
+                    fontSize: number;
+                    '& svg': {
+                        width: number;
+                        height: number;
+                    };
+                };
+                '&-s': {
+                    width: number;
+                    height: number;
+                    fontSize: number;
+                    '& svg': {
+                        width: number;
+                        height: number;
+                    };
+                };
+                '&-m': {
+                    width: number;
+                    height: number;
+                    fontSize: number;
+                    '& svg': {
+                        width: number;
+                        height: number;
+                    };
+                };
+                '&-l': {
+                    width: number;
+                    height: number;
+                    fontSize: number;
+                    '& svg': {
+                        width: number;
+                        height: number;
+                    };
+                };
+                '&-xl': {
+                    width: number;
+                    height: number;
+                    fontSize: number;
+                    '& svg': {
+                        width: number;
+                        height: number;
+                    };
+                };
+            };
+            '&.disabled': {
+                color: any;
+                background: string;
+                '& img': {
+                    filter: string;
+                    opacity: number;
+                };
+            };
+            '&.border': {
+                border: string;
+            };
+            '&.innerBorder': {
+                boxShadow: string;
+            };
+        };
+    };
     MuiCheckbox: {
         colorSecondary: {
             '&$checked': {

package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts

@@ -728,6 +728,77 @@ export function makeDarkNormalOverrides(theme: any): {
             };
         };
     };
+    MuiAvatarGroup: {
+        avatar: {
+            border: string;
+        };
+    };
+    MuiAvatar: {
+        root: {
+            fontWeight: number;
+            '&.size': {
+                '&-xs': {
+                    width: number;
+                    height: number;
+                    fontSize: number;
+                    '& svg': {
+                        width: number;
+                        height: number;
+                    };
+                };
+                '&-s': {
+                    width: number;
+                    height: number;
+                    fontSize: number;
+                    '& svg': {
+                        width: number;
+                        height: number;
+                    };
+                };
+                '&-m': {
+                    width: number;
+                    height: number;
+                    fontSize: number;
+                    '& svg': {
+                        width: number;
+                        height: number;
+                    };
+                };
+                '&-l': {
+                    width: number;
+                    height: number;
+                    fontSize: number;
+                    '& svg': {
+                        width: number;
+                        height: number;
+                    };
+                };
+                '&-xl': {
+                    width: number;
+                    height: number;
+                    fontSize: number;
+                    '& svg': {
+                        width: number;
+                        height: number;
+                    };
+                };
+            };
+            '&.disabled': {
+                color: any;
+                background: string;
+                '& img': {
+                    filter: string;
+                    opacity: number;
+                };
+            };
+            '&.border': {
+                border: string;
+            };
+            '&.innerBorder': {
+                boxShadow: string;
+            };
+        };
+    };
     MuiCheckbox: {
         colorSecondary: {
             '&$checked': {

package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts

@@ -728,6 +728,77 @@ export function makeLightInvertedOverrides(theme: any): {
             };
         };
     };
+    MuiAvatarGroup: {
+        avatar: {
+            border: string;
+        };
+    };
+    MuiAvatar: {
+        root: {
+            fontWeight: number;
+            '&.size': {
+                '&-xs': {
+                    width: number;
+                    height: number;
+                    fontSize: number;
+                    '& svg': {
+                        width: number;
+                        height: number;
+                    };
+                };
+                '&-s': {
+                    width: number;
+                    height: number;
+                    fontSize: number;
+                    '& svg': {
+                        width: number;
+                        height: number;
+                    };
+                };
+                '&-m': {
+                    width: number;
+                    height: number;
+                    fontSize: number;
+                    '& svg': {
+                        width: number;
+                        height: number;
+                    };
+                };
+                '&-l': {
+                    width: number;
+                    height: number;
+                    fontSize: number;
+                    '& svg': {
+                        width: number;
+                        height: number;
+                    };
+                };
+                '&-xl': {
+                    width: number;
+                    height: number;
+                    fontSize: number;
+                    '& svg': {
+                        width: number;
+                        height: number;
+                    };
+                };
+            };
+            '&.disabled': {
+                color: any;
+                background: string;
+                '& img': {
+                    filter: string;
+                    opacity: number;
+                };
+            };
+            '&.border': {
+                border: string;
+            };
+            '&.innerBorder': {
+                boxShadow: string;
+            };
+        };
+    };
     MuiCheckbox: {
         colorSecondary: {
             '&$checked': {