cozy-ui 130.8.0 → 130.8.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [130.8.1](https://github.com/cozy/cozy-ui/compare/v130.8.0...v130.8.1) (2025-10-15)
+
+
+### Bug Fixes
+
+* **Avatar:** Now passing a `number` to `size` prop works correctly ([c8e79f2](https://github.com/cozy/cozy-ui/commit/c8e79f2))
+
 # [130.8.0](https://github.com/cozy/cozy-ui/compare/v130.7.2...v130.8.0) (2025-10-14)
 
 

package/package.json

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

package/react/Avatar/Readme.md

@@ -85,6 +85,7 @@ const initialVariants = [{ disabled: false, border: false, innerBorder: false }]
         <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>
+        <Avatar color="sunrise" size={94} disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}>DE</Avatar>
       </div>
     </>
   )}

package/react/Avatar/index.jsx

@@ -8,6 +8,11 @@ import { makeStyles } from '../styles'
 import { capitalize } from '../utils/index'
 
 const useStyles = makeStyles(theme => ({
+  root: {
+    width: ({ size }) => size,
+    height: ({ size }) => size,
+    fontSize: ({ size }) => size / 2
+  },
   colorDefault: {
     color: ({ color }) => (color ? theme.palette.primary.contrastText : ''),
     background: ({ color }) => colorMapping[color]
@@ -24,9 +29,11 @@ const Avatar = ({
   display,
   ...props
 }) => {
+  const isCustomSize = typeof size === 'number'
   const defaultColor =
     typeof props.children === 'string' ? nameToColor(props.children) : undefined
   const classes = useStyles({
+    size: isCustomSize ? size : undefined,
     color:
       color === 'none'
         ? undefined
@@ -38,7 +45,8 @@ const Avatar = ({
   return (
     <AvatarMui
       classes={classes}
-      className={cx(className, `size-${size}`, {
+      className={cx(className, {
+        [`size-${size}`]: !isCustomSize,
         disabled: !!disabled,
         border: !!border,
         [`display${capitalize(display)}`]: display !== 'initial',

package/transpiled/react/Avatar/index.js

@@ -12,41 +12,54 @@ import { makeStyles } from "cozy-ui/transpiled/react/styles";
 import { capitalize } from "cozy-ui/transpiled/react/utils/index";
 var useStyles = makeStyles(function (theme) {
   return {
+    root: {
+      width: function width(_ref) {
+        var size = _ref.size;
+        return size;
+      },
+      height: function height(_ref2) {
+        var size = _ref2.size;
+        return size;
+      },
+      fontSize: function fontSize(_ref3) {
+        var size = _ref3.size;
+        return size / 2;
+      }
+    },
     colorDefault: {
-      color: function color(_ref) {
-        var _color = _ref.color;
+      color: function color(_ref4) {
+        var _color = _ref4.color;
         return _color ? theme.palette.primary.contrastText : '';
       },
-      background: function background(_ref2) {
-        var color = _ref2.color;
+      background: function background(_ref5) {
+        var color = _ref5.color;
         return colorMapping[color];
       }
     }
   };
 });
 
-var Avatar = function Avatar(_ref3) {
+var Avatar = function Avatar(_ref6) {
   var _cx;
 
-  var className = _ref3.className,
-      color = _ref3.color,
-      size = _ref3.size,
-      border = _ref3.border,
-      innerBorder = _ref3.innerBorder,
-      disabled = _ref3.disabled,
-      display = _ref3.display,
-      props = _objectWithoutProperties(_ref3, _excluded);
+  var className = _ref6.className,
+      color = _ref6.color,
+      size = _ref6.size,
+      border = _ref6.border,
+      innerBorder = _ref6.innerBorder,
+      disabled = _ref6.disabled,
+      display = _ref6.display,
+      props = _objectWithoutProperties(_ref6, _excluded);
 
+  var isCustomSize = typeof size === 'number';
   var defaultColor = typeof props.children === 'string' ? nameToColor(props.children) : undefined;
   var classes = useStyles({
+    size: isCustomSize ? size : undefined,
     color: color === 'none' ? undefined : supportedColors.includes(color) ? color : defaultColor
   });
   return /*#__PURE__*/React.createElement(AvatarMui, _extends({
     classes: classes,
-    className: cx(className, "size-".concat(size), (_cx = {
-      disabled: !!disabled,
-      border: !!border
-    }, _defineProperty(_cx, "display".concat(capitalize(display)), display !== 'initial'), _defineProperty(_cx, "innerBorder", !!innerBorder), _cx))
+    className: cx(className, (_cx = {}, _defineProperty(_cx, "size-".concat(size), !isCustomSize), _defineProperty(_cx, "disabled", !!disabled), _defineProperty(_cx, "border", !!border), _defineProperty(_cx, "display".concat(capitalize(display)), display !== 'initial'), _defineProperty(_cx, "innerBorder", !!innerBorder), _cx))
   }, props));
 };