cozy-ui 146.3.1 → 146.5.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [146.5.0](https://github.com/cozy/cozy-ui/compare/v146.4.0...v146.5.0) (2026-11-04)
+
+
+### Features
+
+* **ColorList:** Name the colors ([886abac](https://github.com/cozy/cozy-ui/commit/886abac))
+
+# [146.4.0](https://github.com/cozy/cozy-ui/compare/v146.3.1...v146.4.0) (2026-11-04)
+
+
+### Features
+
+* **EditBadge:** Add componentsProps to customize the badge button ([8248bc7](https://github.com/cozy/cozy-ui/commit/8248bc7))
+
 ## [146.3.1](https://github.com/cozy/cozy-ui/compare/v146.3.0...v146.3.1) (2026-11-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "146.3.1",
+  "version": "146.5.0",
   "description": "Cozy apps UI SDK",
   "engines": {
     "node": "24.x"

package/react/ColorList/Readme.md

@@ -15,8 +15,10 @@ const ColorPickerDemo = ({ variant }) => {
     <div style={{ width: (variant.medium || isMobile) ? '100%' : 200 }}>
       <ColorList
         size={variant.medium ? 'medium' : undefined}
+        getColorLabel={color => `Color ${color}`}
         customColorProps={{
           enabled: true,
+          'aria-label': 'Custom color',
           onClick: () => {}
         }}
         selectedColor={selectedColor}

package/react/ColorList/index.jsx

@@ -15,7 +15,15 @@ const sizeToPx = {
   medium: 41
 }
 
-const ColorList = ({ size, selectedColor, customColorProps, onClick }) => {
+const ColorList = ({
+  size,
+  selectedColor,
+  getColorLabel,
+  customColorProps,
+  onClick
+}) => {
+  const { enabled: isCustomEnabled, ...customButtonProps } =
+    customColorProps ?? {}
   const { isMobile } = useBreakpoints()
 
   const _size = size || (isMobile ? 'medium' : 'small')
@@ -37,6 +45,8 @@ const ColorList = ({ size, selectedColor, customColorProps, onClick }) => {
           <ButtonBase
             className="u-bdrs-circle"
             component="div"
+            aria-label={getColorLabel?.(color) ?? color}
+            aria-pressed={selectedColor?.toUpperCase() === color}
             onClick={() => onClick?.(color)}
           >
             <Avatar color={color} size={avatarSize}>
@@ -49,12 +59,13 @@ const ColorList = ({ size, selectedColor, customColorProps, onClick }) => {
           </ButtonBase>
         </ImageListItem>
       ))}
-      {customColorProps?.enabled && (
+      {isCustomEnabled && (
         <ImageListItem
           className="u-ta-center"
           classes={{ item: 'u-ov-visible' }}
         >
           <Button
+            {...customButtonProps}
             className="u-miw-auto u-mih-auto u-p-0 u-bdrs-circle"
             variant="ghost"
             style={{
@@ -68,7 +79,6 @@ const ColorList = ({ size, selectedColor, customColorProps, onClick }) => {
             }}
             classes={{ label: 'u-flex u-w-auto' }}
             label={<Icon icon={Palette} size={iconSize} color="#000" />}
-            onClick={ev => customColorProps?.onClick(ev)}
           />
         </ImageListItem>
       )}
@@ -79,9 +89,14 @@ const ColorList = ({ size, selectedColor, customColorProps, onClick }) => {
 ColorList.propTypes = {
   size: propTypes.oneOf(['small', 'medium']),
   selectedColor: propTypes.string,
+  /** Accessible name of a color. Defaults to its hexadecimal code */
+  getColorLabel: propTypes.func,
   customColorProps: propTypes.shape({
     enabled: propTypes.bool,
-    onClick: propTypes.func
+    onClick: propTypes.func,
+    'aria-label': propTypes.string,
+    'aria-pressed': propTypes.bool,
+    'data-testid': propTypes.string
   }),
   onClick: propTypes.func
 }

package/react/ColorList/index.spec.jsx

@@ -0,0 +1,56 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+
+import ColorList from '.'
+import { BreakpointsProvider } from '../providers/Breakpoints'
+
+const setup = props =>
+  render(
+    <BreakpointsProvider>
+      <ColorList {...props} />
+    </BreakpointsProvider>
+  )
+
+describe('ColorList', () => {
+  it('lets a keyboard reach and pick a color', () => {
+    const onClick = jest.fn()
+    setup({ onClick })
+
+    const color = screen.getByRole('button', { name: '#273891' })
+    expect(color.tabIndex).toBe(0)
+    fireEvent.keyDown(color, { key: 'Enter' })
+    expect(onClick).toHaveBeenCalledWith('#273891')
+  })
+
+  it('names its colors and tells the selected one, whatever its case', () => {
+    setup({
+      selectedColor: '#7e57e3',
+      getColorLabel: color => (color === '#7E57E3' ? 'Purple' : color)
+    })
+
+    expect(screen.getByRole('button', { name: 'Purple' })).toHaveAttribute(
+      'aria-pressed',
+      'true'
+    )
+    expect(screen.getByRole('button', { name: '#273891' })).toHaveAttribute(
+      'aria-pressed',
+      'false'
+    )
+  })
+
+  it('passes its props to the custom color button', () => {
+    const onClick = jest.fn()
+    setup({
+      customColorProps: {
+        enabled: true,
+        onClick,
+        'aria-label': 'Custom color',
+        'data-testid': 'custom'
+      }
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Custom color' }))
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(screen.queryByTestId('custom')).toBeInTheDocument()
+  })
+})

package/react/EditBadge/Readme.md

@@ -14,6 +14,7 @@ import Avatar from 'cozy-ui/transpiled/react/Avatar'
       src={timestamp => ""}
       onUpload={file => {}}
       onDelete={() => {}}
+      componentsProps={{ button: { 'aria-label': 'Edit avatar' } }}
     >
       <Avatar size={94} alt="Avatar" />
     </EditBadge>

package/react/EditBadge/index.jsx

@@ -1,4 +1,5 @@
 import { Icon, Pen } from '@linagora/twake-icons'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useState, useRef } from 'react'
 
@@ -12,6 +13,7 @@ const EditBadge = ({
   onUpload,
   onDelete,
   anchorOrigin,
+  componentsProps,
   children,
   ...props
 }) => {
@@ -28,9 +30,13 @@ const EditBadge = ({
       badgeContent={
         <>
           <Button
+            {...componentsProps?.button}
             ref={menuAnchorRef}
             component="div"
-            className="u-miw-auto u-w-2-half u-h-2-half u-bdrs-circle"
+            className={cx(
+              'u-miw-auto u-w-2-half u-h-2-half u-bdrs-circle',
+              componentsProps?.button?.className
+            )}
             classes={{ label: 'u-flex u-w-auto' }}
             style={{
               outline: '4px solid var(--paperBackgroundColor)'
@@ -74,7 +80,11 @@ EditBadge.defaultProps = {
 EditBadge.propTypes = {
   src: PropTypes.func.isRequired,
   onUpload: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired
+  onDelete: PropTypes.func.isRequired,
+  componentsProps: PropTypes.shape({
+    /** Props spread to the badge button */
+    button: PropTypes.object
+  })
 }
 
 export default EditBadge

package/transpiled/react/ColorList/index.d.ts

@@ -1,9 +1,10 @@
 export { COLORS };
 export default ColorList;
 import { COLORS } from "./helpers";
-declare function ColorList({ size, selectedColor, customColorProps, onClick }: {
+declare function ColorList({ size, selectedColor, getColorLabel, customColorProps, onClick }: {
     size: any;
     selectedColor: any;
+    getColorLabel: any;
     customColorProps: any;
     onClick: any;
 }): JSX.Element;
@@ -11,9 +12,13 @@ declare namespace ColorList {
     namespace propTypes {
         const size: propTypes.Requireable<string>;
         const selectedColor: propTypes.Requireable<string>;
+        const getColorLabel: propTypes.Requireable<(...args: any[]) => any>;
         const customColorProps: propTypes.Requireable<propTypes.InferProps<{
             enabled: propTypes.Requireable<boolean>;
             onClick: propTypes.Requireable<(...args: any[]) => any>;
+            'aria-label': propTypes.Requireable<string>;
+            'aria-pressed': propTypes.Requireable<boolean>;
+            'data-testid': propTypes.Requireable<string>;
         }>>;
         const onClick: propTypes.Requireable<(...args: any[]) => any>;
     }

package/transpiled/react/ColorList/index.js

@@ -1,3 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["enabled"];
 import { Icon, Check, Palette } from '@linagora/twake-icons';
 import propTypes from 'prop-types';
 import React from 'react';
@@ -16,9 +19,14 @@ var sizeToPx = {
 var ColorList = function ColorList(_ref) {
   var size = _ref.size,
       selectedColor = _ref.selectedColor,
+      getColorLabel = _ref.getColorLabel,
       customColorProps = _ref.customColorProps,
       _onClick = _ref.onClick;
 
+  var _ref2 = customColorProps !== null && customColorProps !== void 0 ? customColorProps : {},
+      isCustomEnabled = _ref2.enabled,
+      customButtonProps = _objectWithoutProperties(_ref2, _excluded);
+
   var _useBreakpoints = useBreakpoints(),
       isMobile = _useBreakpoints.isMobile;
 
@@ -31,6 +39,8 @@ var ColorList = function ColorList(_ref) {
     rowHeight: avatarSize,
     gap: _size === 'medium' ? 16 : 5
   }, COLORS.map(function (color) {
+    var _getColorLabel;
+
     return /*#__PURE__*/React.createElement(ImageListItem, {
       key: color,
       className: "u-ta-center",
@@ -40,6 +50,8 @@ var ColorList = function ColorList(_ref) {
     }, /*#__PURE__*/React.createElement(ButtonBase, {
       className: "u-bdrs-circle",
       component: "div",
+      "aria-label": (_getColorLabel = getColorLabel === null || getColorLabel === void 0 ? void 0 : getColorLabel(color)) !== null && _getColorLabel !== void 0 ? _getColorLabel : color,
+      "aria-pressed": (selectedColor === null || selectedColor === void 0 ? void 0 : selectedColor.toUpperCase()) === color,
       onClick: function onClick() {
         return _onClick === null || _onClick === void 0 ? void 0 : _onClick(color);
       }
@@ -50,12 +62,12 @@ var ColorList = function ColorList(_ref) {
       icon: Check,
       size: iconSize
     }) : ' ')));
-  }), (customColorProps === null || customColorProps === void 0 ? void 0 : customColorProps.enabled) && /*#__PURE__*/React.createElement(ImageListItem, {
+  }), isCustomEnabled && /*#__PURE__*/React.createElement(ImageListItem, {
     className: "u-ta-center",
     classes: {
       item: 'u-ov-visible'
     }
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button, _extends({}, customButtonProps, {
     className: "u-miw-auto u-mih-auto u-p-0 u-bdrs-circle",
     variant: "ghost",
     style: {
@@ -73,19 +85,22 @@ var ColorList = function ColorList(_ref) {
       icon: Palette,
       size: iconSize,
       color: "#000"
-    }),
-    onClick: function onClick(ev) {
-      return customColorProps === null || customColorProps === void 0 ? void 0 : customColorProps.onClick(ev);
-    }
-  })));
+    })
+  }))));
 };
 
 ColorList.propTypes = {
   size: propTypes.oneOf(['small', 'medium']),
   selectedColor: propTypes.string,
+
+  /** Accessible name of a color. Defaults to its hexadecimal code */
+  getColorLabel: propTypes.func,
   customColorProps: propTypes.shape({
     enabled: propTypes.bool,
-    onClick: propTypes.func
+    onClick: propTypes.func,
+    'aria-label': propTypes.string,
+    'aria-pressed': propTypes.bool,
+    'data-testid': propTypes.string
   }),
   onClick: propTypes.func
 };

package/transpiled/react/ColorList/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/transpiled/react/EditBadge/index.d.ts

@@ -1,10 +1,11 @@
 export default EditBadge;
-declare function EditBadge({ src, onUpload, onDelete, anchorOrigin, children, ...props }: {
+declare function EditBadge({ src, onUpload, onDelete, anchorOrigin, componentsProps, children, ...props }: {
     [x: string]: any;
     src: any;
     onUpload: any;
     onDelete: any;
     anchorOrigin: any;
+    componentsProps: any;
     children: any;
 }): JSX.Element;
 declare namespace EditBadge {
@@ -18,6 +19,10 @@ declare namespace EditBadge {
         const src: PropTypes.Validator<(...args: any[]) => any>;
         const onUpload: PropTypes.Validator<(...args: any[]) => any>;
         const onDelete: PropTypes.Validator<(...args: any[]) => any>;
+        const componentsProps: PropTypes.Requireable<PropTypes.InferProps<{
+            /** Props spread to the badge button */
+            button: PropTypes.Requireable<object>;
+        }>>;
     }
 }
 import PropTypes from "prop-types";

package/transpiled/react/EditBadge/index.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["src", "onUpload", "onDelete", "anchorOrigin", "children"];
+var _excluded = ["src", "onUpload", "onDelete", "anchorOrigin", "componentsProps", "children"];
 import { Icon, Pen } from '@linagora/twake-icons';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useState, useRef } from 'react';
 import EditMenu from "cozy-ui/transpiled/react/EditBadge/EditMenu";
@@ -11,10 +12,13 @@ import Badge from "cozy-ui/transpiled/react/Badge";
 import Button from "cozy-ui/transpiled/react/Buttons";
 
 var EditBadge = function EditBadge(_ref) {
+  var _componentsProps$butt;
+
   var src = _ref.src,
       onUpload = _ref.onUpload,
       onDelete = _ref.onDelete,
       anchorOrigin = _ref.anchorOrigin,
+      componentsProps = _ref.componentsProps,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -37,10 +41,10 @@ var EditBadge = function EditBadge(_ref) {
   var menuAnchorRef = useRef(null);
   return /*#__PURE__*/React.createElement(Badge, _extends({}, props, {
     anchorOrigin: anchorOrigin,
-    badgeContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    badgeContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.button, {
       ref: menuAnchorRef,
       component: "div",
-      className: "u-miw-auto u-w-2-half u-h-2-half u-bdrs-circle",
+      className: cx('u-miw-auto u-w-2-half u-h-2-half u-bdrs-circle', componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$butt = componentsProps.button) === null || _componentsProps$butt === void 0 ? void 0 : _componentsProps$butt.className),
       classes: {
         label: 'u-flex u-w-auto'
       },
@@ -56,7 +60,7 @@ var EditBadge = function EditBadge(_ref) {
           return !v;
         });
       }
-    }), /*#__PURE__*/React.createElement(EditMenu, {
+    })), /*#__PURE__*/React.createElement(EditMenu, {
       anchorRef: menuAnchorRef.current,
       status: status,
       showMenu: showMenu,
@@ -83,6 +87,10 @@ EditBadge.defaultProps = {
 EditBadge.propTypes = {
   src: PropTypes.func.isRequired,
   onUpload: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired
+  onDelete: PropTypes.func.isRequired,
+  componentsProps: PropTypes.shape({
+    /** Props spread to the badge button */
+    button: PropTypes.object
+  })
 };
 export default EditBadge;