cozy-ui 128.5.0 → 128.6.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [128.6.0](https://github.com/cozy/cozy-ui/compare/v128.5.0...v128.6.0) (2025-09-08)
+
+
+### Features
+
+* **DropdownText:** add color prop for Typography and update README example ([f5006b0](https://github.com/cozy/cozy-ui/commit/f5006b0))
+
 # [128.5.0](https://github.com/cozy/cozy-ui/compare/v128.4.0...v128.5.0) (2025-09-08)
 
 

package/package.json

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

package/react/DropdownText/Readme.md

@@ -22,7 +22,7 @@ const variants = [
 
 <>
   <Grid container>
-    <Grid item xs={6}>
+    <Grid item xs={6} sm={3} sd={2}>
       Default
       {variants.map((variant, index) => (
         <div key={index} className='u-mb-1'>
@@ -32,7 +32,7 @@ const variants = [
         </div>
       ))}
     </Grid>
-    <Grid item xs={6}>
+    <Grid item xs={6} sm={3} sd={2}>
       Disabled
       {variants.map((variant, index) => (
         <div key={index} className='u-mb-1'>
@@ -42,7 +42,29 @@ const variants = [
         </div>
       ))}
     </Grid>
+    <Grid item xs={6} sm={3} sd={2}>
+      Color primary
+      {variants.map((variant, index) => (
+        <div key={index} className='u-mb-1'>
+          <DropdownText variant={variant} color="primary">
+            {variant}
+          </DropdownText>
+        </div>
+      ))}
+    </Grid>
+    <Grid item xs={6} sm={3} sd={2}>
+      Color error 
+      {variants.map((variant, index) => (
+        <div key={index} className='u-mb-1'>
+          <DropdownText variant={variant} color="error">
+            {variant}
+          </DropdownText>
+        </div>
+      ))}
+    </Grid>
   </Grid>
+
+  <p>
   <div style={{ border: '1px dashed var(--borderMainColor)', marginBottom: '1rem' }}>
     <DropdownText>
       This is a long text without ellipsis without restrictive container
@@ -68,5 +90,6 @@ const variants = [
       Space between text and icon
     </DropdownText>
   </div>
+  </p>
 </>
 ```

package/react/DropdownText/index.jsx

@@ -16,14 +16,14 @@ const useStyles = makeStyles(theme => ({
   },
   typography: {
     color: ({ disabled }) =>
-      theme.palette.text[disabled ? 'disabled' : 'primary']
+      disabled ? theme.palette.text.disabled : undefined
   },
   endIcon: {
     display: 'flex',
     marginLeft: '5px',
     marginTop: ({ variant }) => (variant === 'body1' ? '3px' : undefined),
     color: ({ disabled }) =>
-      theme.palette.text[disabled ? 'disabled' : 'primary']
+      disabled ? theme.palette.text.disabled : undefined
   }
 }))
 
@@ -48,7 +48,7 @@ const DropdownText = forwardRef(
       variant = 'body1',
       disabled = false,
       noWrap = false,
-      color = 'primary',
+      color = 'initial',
       children,
       innerTextProps,
       innerIconContainerProps,
@@ -57,11 +57,12 @@ const DropdownText = forwardRef(
     },
     ref
   ) => {
-    const styles = useStyles({ spaceBetween, disabled, color, variant })
+    const styles = useStyles({ spaceBetween, disabled, variant })
 
     return (
       <div ref={ref} className={styles.container} {...props}>
         <Typography
+          color={color}
           classes={{ root: styles.typography }}
           variant={variant}
           noWrap={noWrap}
@@ -70,6 +71,7 @@ const DropdownText = forwardRef(
           {children}
         </Typography>
         <Typography
+          color={color}
           classes={{ root: styles.endIcon }}
           {...innerIconContainerProps}
         >
@@ -85,6 +87,8 @@ const DropdownText = forwardRef(
 )
 
 DropdownText.propTypes = {
+  /** Color used by Typography component */
+  color: PropTypes.string,
   /** Whether there is a space between the label and the icon */
   spaceBetween: PropTypes.bool,
   /** Variant used by Typography component */

package/transpiled/react/DropdownText/index.js

@@ -21,7 +21,7 @@ var useStyles = makeStyles(function (theme) {
     typography: {
       color: function color(_ref2) {
         var disabled = _ref2.disabled;
-        return theme.palette.text[disabled ? 'disabled' : 'primary'];
+        return disabled ? theme.palette.text.disabled : undefined;
       }
     },
     endIcon: {
@@ -33,7 +33,7 @@ var useStyles = makeStyles(function (theme) {
       },
       color: function color(_ref4) {
         var disabled = _ref4.disabled;
-        return theme.palette.text[disabled ? 'disabled' : 'primary'];
+        return disabled ? theme.palette.text.disabled : undefined;
       }
     }
   };
@@ -61,7 +61,7 @@ var DropdownText = /*#__PURE__*/forwardRef(function (_ref5, ref) {
       _ref5$noWrap = _ref5.noWrap,
       noWrap = _ref5$noWrap === void 0 ? false : _ref5$noWrap,
       _ref5$color = _ref5.color,
-      color = _ref5$color === void 0 ? 'primary' : _ref5$color,
+      color = _ref5$color === void 0 ? 'initial' : _ref5$color,
       children = _ref5.children,
       innerTextProps = _ref5.innerTextProps,
       innerIconContainerProps = _ref5.innerIconContainerProps,
@@ -71,19 +71,20 @@ var DropdownText = /*#__PURE__*/forwardRef(function (_ref5, ref) {
   var styles = useStyles({
     spaceBetween: spaceBetween,
     disabled: disabled,
-    color: color,
     variant: variant
   });
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
     className: styles.container
   }, props), /*#__PURE__*/React.createElement(Typography, _extends({
+    color: color,
     classes: {
       root: styles.typography
     },
     variant: variant,
     noWrap: noWrap
   }, innerTextProps), children), /*#__PURE__*/React.createElement(Typography, _extends({
+    color: color,
     classes: {
       root: styles.endIcon
     }
@@ -93,6 +94,9 @@ var DropdownText = /*#__PURE__*/forwardRef(function (_ref5, ref) {
   }, innerIconProps))));
 });
 DropdownText.propTypes = {
+  /** Color used by Typography component */
+  color: PropTypes.string,
+
   /** Whether there is a space between the label and the icon */
   spaceBetween: PropTypes.bool,