cozy-ui 138.10.0 → 138.12.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [138.12.0](https://github.com/cozy/cozy-ui/compare/v138.11.0...v138.12.0) (2026-05-13)
+
+
+### Features
+
+* Allow to customize background color of ProgressionBanner component ([91b5cee](https://github.com/cozy/cozy-ui/commit/91b5cee))
+
+# [138.11.0](https://github.com/cozy/cozy-ui/compare/v138.10.0...v138.11.0) (2026-05-07)
+
+
+### Features
+
+* **makeAction:** Add props `Component` and `componentProps` ([cebb6de](https://github.com/cozy/cozy-ui/commit/cebb6de))
+
 # [138.10.0](https://github.com/cozy/cozy-ui/compare/v138.9.0...v138.10.0) (2026-05-06)
 
 

package/package.json

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

package/react/ActionsMenu/Actions/makeAction.jsx

@@ -5,14 +5,14 @@ import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
 import ActionsMenuItem from '../ActionsMenuItem'
 
-const makeComponent = ({ label, icon, name }) => {
+const makeComponent = ({ label, icon, name, componentProps }) => {
   const Component = forwardRef((props, ref) => {
     return (
       <ActionsMenuItem {...props} ref={ref}>
         <ListItemIcon>
-          <Icon icon={icon} />
+          <Icon icon={icon} {...componentProps?.Icon} />
         </ListItemIcon>
-        <ListItemText primary={label} />
+        <ListItemText primary={label} {...componentProps?.ListItemText} />
       </ActionsMenuItem>
     )
   })
@@ -28,6 +28,8 @@ export const makeAction = ({
   icon,
   disabled,
   displayCondition,
+  Component,
+  componentProps,
   action
 }) => {
   return {
@@ -37,6 +39,7 @@ export const makeAction = ({
     disabled,
     displayCondition,
     action,
-    Component: makeComponent({ label, icon, name })
+    componentProps,
+    Component: Component || makeComponent({ label, icon, name, componentProps })
   }
 }

package/react/ProgressionBanner/Readme.md

@@ -12,7 +12,7 @@ import { BreakpointsProvider } from "cozy-ui/transpiled/react/providers/Breakpoi
 const { progression } = useProgression();
 
 const initialVariants = [
-  { withValue: true, progressBar: true, withButton: false },
+  { withValue: true, progressBar: true, withButton: false, customColor: false },
 ];
 
 <BreakpointsProvider>
@@ -21,6 +21,7 @@ const initialVariants = [
       <ProgressionBanner
         progressBar={variant.progressBar}
         value={variant.withValue && progression}
+        color={variant.customColor ? 'var(--errorColorLight)': undefined}
         text={
           variant.withButton
             ? "Storage limit nearly reached"

package/react/ProgressionBanner/index.jsx

@@ -19,7 +19,7 @@ const styles = () => ({
 })
 
 const ProgressionBanner = withStyles(styles)(
-  ({ classes, value, text, icon, button, progressBar }) => {
+  ({ classes, value, text, icon, button, progressBar, color }) => {
     const variant = value ? 'determinate' : undefined
     const { isMobile } = useBreakpoints()
 
@@ -32,7 +32,7 @@ const ProgressionBanner = withStyles(styles)(
       <>
         <Alert
           icon={_icon}
-          color="var(--contrastBackgroundColor)"
+          color={color}
           square
           block={isMobile}
           action={button}
@@ -63,11 +63,14 @@ ProgressionBanner.propTypes = {
   /** Button to use in the banner */
   button: PropTypes.node,
   /** Progression bar is hidden if set to false (defaults to true) */
-  progressBar: PropTypes.bool
+  progressBar: PropTypes.bool,
+  /** Background color of the banner, css color */
+  color: PropTypes.string
 }
 
 ProgressionBanner.defaultProps = {
-  progressBar: true
+  progressBar: true,
+  color: 'var(--contrastBackgroundColor)'
 }
 
 export default ProgressionBanner

package/transpiled/react/ActionsMenu/Actions/makeAction.d.ts

@@ -1,9 +1,11 @@
-export function makeAction({ name, label, icon, disabled, displayCondition, action }: {
+export function makeAction({ name, label, icon, disabled, displayCondition, Component, componentProps, action }: {
     name: any;
     label: any;
     icon: any;
     disabled: any;
     displayCondition: any;
+    Component: any;
+    componentProps: any;
     action: any;
 }): {
     name: any;
@@ -12,6 +14,6 @@ export function makeAction({ name, label, icon, disabled, displayCondition, acti
     disabled: any;
     displayCondition: any;
     action: any;
-    Component: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+    componentProps: any;
+    Component: any;
 };
-import React from "react";

package/transpiled/react/ActionsMenu/Actions/makeAction.js

@@ -8,15 +8,16 @@ import ActionsMenuItem from "cozy-ui/transpiled/react/ActionsMenu/ActionsMenuIte
 var makeComponent = function makeComponent(_ref) {
   var label = _ref.label,
       icon = _ref.icon,
-      name = _ref.name;
+      name = _ref.name,
+      componentProps = _ref.componentProps;
   var Component = /*#__PURE__*/forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement(ActionsMenuItem, _extends({}, props, {
       ref: ref
-    }), /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Icon, {
+    }), /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Icon, _extends({
       icon: icon
-    })), /*#__PURE__*/React.createElement(ListItemText, {
+    }, componentProps === null || componentProps === void 0 ? void 0 : componentProps.Icon))), /*#__PURE__*/React.createElement(ListItemText, _extends({
       primary: label
-    }));
+    }, componentProps === null || componentProps === void 0 ? void 0 : componentProps.ListItemText)));
   });
   Component.displayName = name;
   return Component;
@@ -28,6 +29,8 @@ export var makeAction = function makeAction(_ref2) {
       icon = _ref2.icon,
       disabled = _ref2.disabled,
       displayCondition = _ref2.displayCondition,
+      Component = _ref2.Component,
+      componentProps = _ref2.componentProps,
       action = _ref2.action;
   return {
     name: name,
@@ -36,10 +39,12 @@ export var makeAction = function makeAction(_ref2) {
     disabled: disabled,
     displayCondition: displayCondition,
     action: action,
-    Component: makeComponent({
+    componentProps: componentProps,
+    Component: Component || makeComponent({
       label: label,
       icon: icon,
-      name: name
+      name: name,
+      componentProps: componentProps
     })
   };
 };

package/transpiled/react/ProgressionBanner/index.js

@@ -30,7 +30,8 @@ var ProgressionBanner = withStyles(styles)(function (_ref) {
       text = _ref.text,
       icon = _ref.icon,
       button = _ref.button,
-      progressBar = _ref.progressBar;
+      progressBar = _ref.progressBar,
+      color = _ref.color;
   var variant = value ? 'determinate' : undefined;
 
   var _useBreakpoints = useBreakpoints(),
@@ -46,7 +47,7 @@ var ProgressionBanner = withStyles(styles)(function (_ref) {
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Alert, {
     icon: _icon,
-    color: "var(--contrastBackgroundColor)",
+    color: color,
     square: true,
     block: isMobile,
     action: button
@@ -73,9 +74,13 @@ ProgressionBanner.propTypes = {
   button: PropTypes.node,
 
   /** Progression bar is hidden if set to false (defaults to true) */
-  progressBar: PropTypes.bool
+  progressBar: PropTypes.bool,
+
+  /** Background color of the banner, css color */
+  color: PropTypes.string
 };
 ProgressionBanner.defaultProps = {
-  progressBar: true
+  progressBar: true,
+  color: 'var(--contrastBackgroundColor)'
 };
 export default ProgressionBanner;