cozy-ui 130.9.0 → 130.11.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [130.11.0](https://github.com/cozy/cozy-ui/compare/v130.10.0...v130.11.0) (2025-10-21)
+
+
+### Bug Fixes
+
+* **Checkbox:** Now `label` type also accept `node` in addition to `string` ([caf3de5](https://github.com/cozy/cozy-ui/commit/caf3de5))
+* **Switch:** Adjust spacing to better deal with `start` label's position ([528834b](https://github.com/cozy/cozy-ui/commit/528834b))
+
+
+### Features
+
+* **Checkbox:** Add `labelPlacement` prop ([24c884d](https://github.com/cozy/cozy-ui/commit/24c884d))
+
+# [130.10.0](https://github.com/cozy/cozy-ui/compare/v130.9.0...v130.10.0) (2025-10-16)
+
+
+### Features
+
+* Add EditBadge component ([47e98d2](https://github.com/cozy/cozy-ui/commit/47e98d2))
+* **EditBadge:** We can now pass props to the main Badge component ([98eb169](https://github.com/cozy/cozy-ui/commit/98eb169))
+* **Utils/React:** Add `AddPropsToChildren` function ([1724619](https://github.com/cozy/cozy-ui/commit/1724619))
+
 # [130.9.0](https://github.com/cozy/cozy-ui/compare/v130.8.1...v130.9.0) (2025-10-16)
 
 

package/package.json

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

package/react/Checkbox/Readme.md

@@ -3,49 +3,54 @@
 ```jsx
 import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
 import Grid from 'cozy-ui/transpiled/react/Grid'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+const initialVariants = [{ before: false }]
 
 ;
 
-<>
-  <Grid container>
-    <Grid item xs={6} sm={3}>
-      <div><Checkbox label="Checkbox" /></div>
-      <div><Checkbox label="Small Checked" size="small" /></div>
-      <div><Checkbox label="Checked checkbox" checked /></div>
-      <div><Checkbox label="Mixed checkbox" mixed /></div>
-      <div><Checkbox label="Mixed checked checkbox" checked mixed /></div>
-      <div><Checkbox label="No effect" disableEffect /></div>
-      <div><Checkbox label="Small no effect" size="small" disableEffect /></div>
-    </Grid>
-    <Grid item xs={6} sm={3}>
-      <div><Checkbox label="Disabled checkbox" disabled /></div>
-      <div><Checkbox label="Small disabled checkbox" size="small" disabled /></div>
-      <div><Checkbox label="Disabled checked checkbox" checked disabled /></div>
-      <div><Checkbox label="Disabled mixed checkbox" mixed disabled /></div>
-      <div><Checkbox label="Disabled mixed checked checkbox" checked mixed disabled /></div>
-      <div><Checkbox label="Disabled no effect" disableEffect disabled /></div>
-      <div><Checkbox label="Small disabled no effect" size="small" disableEffect disabled /></div>
-    </Grid>
-    <Grid item xs={6} sm={3}>
-      <div><Checkbox label="Error checkbox" error /></div>
-      <div><Checkbox label="Small error checkbox" size="small" error /></div>
-      <div><Checkbox label="Error checked checkbox" error checked /></div>
-      <div><Checkbox label="Error mixed checkbox" error mixed /></div>
-      <div><Checkbox label="Error mixed checked checkbox" error checked mixed /></div>
-      <div><Checkbox label="Error no effect" error disableEffect /></div>
-      <div><Checkbox label="Small error no effect" size="small" error disableEffect /></div>
-    </Grid>
-    <Grid item xs={6} sm={3}>
-      <div><Checkbox label="Error disabled checkbox" error disabled /></div>
-      <div><Checkbox label="Small error disabled checkbox" size="small" error disabled /></div>
-      <div><Checkbox label="Error disabled checked checkbox" error checked disabled /></div>
-      <div><Checkbox label="Error disabled mixed checkbox" error mixed disabled /></div>
-      <div><Checkbox label="Error disabled mixed checked checkbox" error checked mixed disabled /></div>
-      <div><Checkbox label="Error disabled no effect" error disableEffect disabled /></div>
-      <div><Checkbox label="Small error disabled no effect" size="small" error disableEffect disabled /></div>
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <Grid container>
+      <Grid item xs={6} sm={3}>
+        <div><Checkbox label="Checkbox" labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Small Checked" size="small" labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Checked checkbox" checked labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Mixed checkbox" mixed labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Mixed checked checkbox" checked mixed labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="No effect" disableEffect labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Small no effect" size="small" disableEffect labelPlacement={variant.before ? "start" : "end"} /></div>
+      </Grid>
+      <Grid item xs={6} sm={3}>
+        <div><Checkbox label="Disabled checkbox" disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Small disabled checkbox" size="small" disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Disabled checked checkbox" checked disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Disabled mixed checkbox" mixed disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Disabled mixed checked checkbox" checked mixed disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Disabled no effect" disableEffect disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Small disabled no effect" size="small" disableEffect disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+      </Grid>
+      <Grid item xs={6} sm={3}>
+        <div><Checkbox label="Error checkbox" error labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Small error checkbox" size="small" error labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Error checked checkbox" error checked labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Error mixed checkbox" error mixed labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Error mixed checked checkbox" error checked mixed labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Error no effect" error disableEffect labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Small error no effect" size="small" error disableEffect labelPlacement={variant.before ? "start" : "end"} /></div>
+      </Grid>
+      <Grid item xs={6} sm={3}>
+        <div><Checkbox label="Error disabled checkbox" error disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Small error disabled checkbox" size="small" error disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Error disabled checked checkbox" error checked disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Error disabled mixed checkbox" error mixed disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Error disabled mixed checked checkbox" error checked mixed disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Error disabled no effect" error disableEffect disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Small error disabled no effect" size="small" error disableEffect disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+      </Grid>
     </Grid>
-  </Grid>
-</>
+  )}
+</Variants>
 ```
 
 ### Checkbox with complex children

package/react/Checkbox/index.jsx

@@ -52,7 +52,14 @@ const DefaultCheckbox = ({
   )
 }
 
-const Checkbox = ({ className, label, onChange, children, ...props }) => {
+const Checkbox = ({
+  className,
+  label,
+  labelPlacement,
+  onChange,
+  children,
+  ...props
+}) => {
   if (children) {
     logDepecratedCheckbox(
       '<Checkbox> used with children is deprecated, please use <Checkbox label={something} /> instead of <Checkbox>something</Checkbox>'
@@ -69,6 +76,7 @@ const Checkbox = ({ className, label, onChange, children, ...props }) => {
           className
         )}
         label={label || children}
+        labelPlacement={labelPlacement}
         control={<DefaultCheckbox {...props} label={label} />}
         onChange={onChange}
       />
@@ -93,7 +101,8 @@ Checkbox.propTypes = {
   mixed: PropTypes.bool,
   disableEffect: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'medium']),
-  label: PropTypes.string
+  labelPlacement: PropTypes.oneOf(['top', 'end', 'bottom', 'start']),
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 }
 
 Checkbox.defaultProps = {
@@ -103,6 +112,7 @@ Checkbox.defaultProps = {
   mixed: false,
   disableEffect: false,
   size: 'medium',
+  labelPlacement: 'end',
   label: ''
 }
 

package/react/EditBadge/EditMenu.jsx

@@ -0,0 +1,102 @@
+import React, { useRef } from 'react'
+
+import { handleDelete, handleUpload } from './helpers'
+import { locales } from './locales'
+import Icon from '../Icon'
+import CameraIcon from '../Icons/Camera'
+import TrashIcon from '../Icons/Trash'
+import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
+import Menu from '../Menu'
+import MenuItem from '../MenuItem'
+import { useAlert } from '../providers/Alert'
+import { useI18n, useExtendI18n } from '../providers/I18n'
+
+const EditMenu = ({
+  anchorRef,
+  status,
+  showMenu,
+  setShowMenu,
+  setStatus,
+  setTimestamp,
+  onUpload,
+  onDelete
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const { showAlert } = useAlert()
+
+  const fileInputRef = useRef(null)
+
+  return (
+    <>
+      <input
+        className="u-dn"
+        type="file"
+        ref={fileInputRef}
+        accept="image/*"
+        onChange={event =>
+          handleUpload({
+            event,
+            t,
+            fileInputRef,
+            status,
+            onUpload,
+            setStatus,
+            setTimestamp,
+            setShowMenu,
+            showAlert
+          })
+        }
+      />
+      {showMenu && (
+        <Menu
+          open
+          anchorEl={anchorRef}
+          getContentAnchorEl={null}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left'
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'left'
+          }}
+          onClose={() => setShowMenu(false)}
+        >
+          <MenuItem
+            onClick={() => {
+              setShowMenu(false)
+              fileInputRef.current.click() // triggers onChange of the input
+            }}
+          >
+            <ListItemIcon>
+              <Icon icon={CameraIcon} />
+            </ListItemIcon>
+            <ListItemText primary={t('EditBadge.menu.update')} />
+          </MenuItem>
+          <MenuItem
+            onClick={() =>
+              handleDelete({
+                t,
+                status,
+                onDelete,
+                setShowMenu,
+                setStatus,
+                setTimestamp,
+                showAlert
+              })
+            }
+          >
+            <ListItemIcon>
+              <Icon icon={TrashIcon} />
+            </ListItemIcon>
+            <ListItemText primary={t('EditBadge.menu.delete')} />
+          </MenuItem>
+        </Menu>
+      )}
+    </>
+  )
+}
+
+export default EditMenu

package/react/EditBadge/Readme.md

@@ -0,0 +1,22 @@
+⚠️ Must be used within `AlertProvider`.
+
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
+import EditBadge from 'cozy-ui/transpiled/react/EditBadge'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+
+;
+
+<DemoProvider>
+  <AlertProvider>
+    <EditBadge
+      src={timestamp => ""}
+      onUpload={file => {}}
+      onDelete={() => {}}
+    >
+      <Avatar size={94} alt="Avatar" />
+    </EditBadge>
+  </AlertProvider>
+</DemoProvider>
+```

package/react/EditBadge/StatusWrapper.jsx

@@ -0,0 +1,32 @@
+import cx from 'classnames'
+import React from 'react'
+
+import Spinner from '../Spinner'
+import { AddPropsToChildren } from '../utils/react'
+
+const StatusWrapper = ({ src, status, setStatus, timestamp, children }) => {
+  if (status === 'LOADING') {
+    return (
+      <>
+        {AddPropsToChildren(children, childProps => ({
+          className: cx(childProps.className, 'u-o-50')
+        }))}
+        <Spinner className="u-m-0" middle size="large" />
+      </>
+    )
+  }
+
+  if (status === 'PRESENT') {
+    return AddPropsToChildren(children, () => ({
+      key: timestamp,
+      src,
+      onError: () => setStatus('ABSENT')
+    }))
+  }
+
+  return AddPropsToChildren(children, () => ({
+    key: timestamp
+  }))
+}
+
+export default StatusWrapper

package/react/EditBadge/helpers.js

@@ -0,0 +1,102 @@
+const MAX_FILE_SIZE = 5 * 1024 * 1024
+const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
+
+export const handleUpload = async ({
+  event,
+  t,
+  fileInputRef,
+  status,
+  onUpload,
+  setStatus,
+  setTimestamp,
+  setShowMenu,
+  showAlert
+}) => {
+  const file = event.target.files[0]
+  if (!file) return
+
+  if (file.size > MAX_FILE_SIZE) {
+    showAlert({
+      message: t('EditBadge.upload.file-size'),
+      severity: 'error'
+    })
+    return
+  }
+
+  if (!ALLOWED_TYPES.includes(file.type)) {
+    showAlert({
+      message: t('EditBadge.upload.file-type'),
+      severity: 'error'
+    })
+    return
+  }
+
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), 30000)
+
+  const previouStatus = status
+  setStatus('LOADING')
+
+  try {
+    await onUpload(file)
+    clearTimeout(timeoutId)
+
+    const newTimestamp = Date.now()
+    setStatus('PRESENT')
+    setTimestamp(newTimestamp)
+    showAlert({
+      message: t('EditBadge.upload.success'),
+      severity: 'success'
+    })
+  } catch (error) {
+    clearTimeout(timeoutId)
+    setStatus(previouStatus)
+    showAlert({
+      message: t('EditBadge.upload.error'),
+      severity: 'error'
+    })
+  } finally {
+    setShowMenu(false)
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }
+}
+
+export const handleDelete = async ({
+  t,
+  status,
+  onDelete,
+  setShowMenu,
+  setStatus,
+  setTimestamp,
+  showAlert
+}) => {
+  setShowMenu(false)
+
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), 30000)
+  const previousStatus = status
+  setStatus('LOADING')
+
+  try {
+    await onDelete()
+    clearTimeout(timeoutId)
+
+    const checkTimestamp = Date.now()
+
+    setStatus('ABSENT')
+    setTimestamp(checkTimestamp)
+    showAlert({
+      message: t('EditBadge.delete.success'),
+      severity: 'success'
+    })
+  } catch (error) {
+    clearTimeout(timeoutId)
+    setStatus(previousStatus)
+    showAlert({
+      message: t('EditBadge.delete.error'),
+      severity: 'error'
+    })
+  }
+}

package/react/EditBadge/index.jsx

@@ -0,0 +1,81 @@
+import PropTypes from 'prop-types'
+import React, { useState, useRef } from 'react'
+
+import EditMenu from './EditMenu'
+import StatusWrapper from './StatusWrapper'
+import Badge from '../Badge'
+import Button from '../Buttons'
+import Icon from '../Icon'
+import PenIcon from '../Icons/Pen'
+
+const EditBadge = ({
+  src,
+  onUpload,
+  onDelete,
+  anchorOrigin,
+  children,
+  ...props
+}) => {
+  const [showMenu, setShowMenu] = useState(false)
+  const [status, setStatus] = useState('PRESENT') // PRESENT || ABSENT || LOADING
+  const [timestamp, setTimestamp] = useState(Date.now())
+
+  const menuAnchorRef = useRef(null)
+
+  return (
+    <Badge
+      {...props}
+      anchorOrigin={anchorOrigin}
+      badgeContent={
+        <>
+          <Button
+            ref={menuAnchorRef}
+            component="div"
+            className="u-miw-auto u-w-2-half u-h-2-half u-bdrs-circle"
+            classes={{ label: 'u-flex u-w-auto' }}
+            style={{
+              outline: '4px solid var(--paperBackgroundColor)'
+            }}
+            label={<Icon icon={PenIcon} />}
+            size="small"
+            onClick={() => setShowMenu(v => !v)}
+          />
+          <EditMenu
+            anchorRef={menuAnchorRef.current}
+            status={status}
+            showMenu={showMenu}
+            setShowMenu={setShowMenu}
+            setStatus={setStatus}
+            setTimestamp={setTimestamp}
+            onUpload={onUpload}
+            onDelete={onDelete}
+          />
+        </>
+      }
+    >
+      <StatusWrapper
+        src={src(timestamp)}
+        status={status}
+        setStatus={setStatus}
+        timestamp={timestamp}
+      >
+        {children}
+      </StatusWrapper>
+    </Badge>
+  )
+}
+
+EditBadge.defaultProps = {
+  anchorOrigin: {
+    vertical: 'bottom',
+    horizontal: 'right'
+  }
+}
+
+EditBadge.propTypes = {
+  src: PropTypes.func.isRequired,
+  onUpload: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired
+}
+
+export default EditBadge

package/react/EditBadge/locales/en.json

@@ -0,0 +1,18 @@
+{
+  "EditBadge": {
+    "menu": {
+      "update": "Update",
+      "delete": "Delete"
+    },
+    "upload": {
+      "file-size": "The file size limit is 5MB.",
+      "file-type": "The file type is not supported. Please try again.",
+      "success": "Avatar updated successfully",
+      "error": "The avatar upload has failed. Please try again."
+    },
+    "delete": {
+      "success": "Avatar deleted successfully",
+      "error": "The avatar deletion has failed. Please try again."
+    }
+  }
+}

package/react/EditBadge/locales/fr.json

@@ -0,0 +1,18 @@
+{
+  "EditBadge": {
+    "menu": {
+      "update": "Mettre à jour",
+      "delete": "Supprimer"
+    },
+    "upload": {
+      "file-size": "La taille du fichier est limitée à 5Mo.",
+      "file-type": "Le type de fichier n'est pas supporté. Merci de réessayer.",
+      "success": "Avatar mis à jour avec succès",
+      "error": "La mise à jour de l'avatar a échoué. Merci de réessayer."
+    },
+    "delete": {
+      "success": "Avatar supprimé avec succès",
+      "error": "La suppression de l'avatar a échoué. Merci de réessayer."
+    }
+  }
+}

package/react/EditBadge/locales/index.js

@@ -0,0 +1,11 @@
+import en from './en.json'
+import fr from './fr.json'
+import ru from './ru.json'
+import vi from './vi.json'
+
+export const locales = {
+  en,
+  fr,
+  ru,
+  vi
+}

package/react/EditBadge/locales/ru.json

@@ -0,0 +1,18 @@
+{
+  "EditBadge": {
+    "menu": {
+      "update": "Обновить",
+      "delete": "Удалить"
+    },
+    "upload": {
+      "file-size": "Максимальный размер файла — 5 МБ.",
+      "file-type": "Тип файла не поддерживается. Пожалуйста, попробуйте снова.",
+      "success": "Аватар успешно обновлён",
+      "error": "Не удалось загрузить аватар. Пожалуйста, попробуйте снова."
+    },
+    "delete": {
+      "success": "Аватар успешно удалён",
+      "error": "Не удалось удалить аватар. Пожалуйста, попробуйте снова."
+    }
+  }
+}

package/react/EditBadge/locales/vi.json

@@ -0,0 +1,18 @@
+{
+  "EditBadge": {
+    "menu": {
+      "update": "Cập nhật",
+      "delete": "Xóa"
+    },
+    "upload": {
+      "file-size": "Giới hạn kích thước tệp là 5MB.",
+      "file-type": "Loại tệp không được hỗ trợ. Vui lòng thử lại.",
+      "success": "Cập nhật ảnh đại diện thành công",
+      "error": "Tải ảnh đại diện thất bại. Vui lòng thử lại."
+    },
+    "delete": {
+      "success": "Xóa ảnh đại diện thành công",
+      "error": "Xóa ảnh đại diện thất bại. Vui lòng thử lại."
+    }
+  }
+}

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -898,9 +898,10 @@ export const makeLightNormalOverrides = theme => ({
   },
   MuiSwitch: {
     root: {
-      width: 50,
+      width: 56,
       height: 40,
-      padding: '6px 1px'
+      padding: '6px 1px',
+      justifyContent: 'center'
     },
     checked: {
       '& + $track$track': {
@@ -910,6 +911,7 @@ export const makeLightNormalOverrides = theme => ({
     switchBase: {
       padding: 5,
       top: 5,
+      left: 5,
       color: theme.palette.text.icon,
       '& .cozySwitchThumb': {
         display: 'flex',