cozy-ui 138.4.0 → 138.6.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [138.6.0](https://github.com/cozy/cozy-ui/compare/v138.5.0...v138.6.0) (2026-04-14)
+
+
+### Features
+
+* **Chip:** Adjust ghost style ([02758c2](https://github.com/cozy/cozy-ui/commit/02758c2))
+
+# [138.5.0](https://github.com/cozy/cozy-ui/compare/v138.4.0...v138.5.0) (2026-04-10)
+
+
+### Features
+
+* Change the CloudSync icon ([a4ad3a0](https://github.com/cozy/cozy-ui/commit/a4ad3a0))
+
 # [138.4.0](https://github.com/cozy/cozy-ui/compare/v138.3.0...v138.4.0) (2026-04-09)
 
 

package/assets/icons/illus/cloud-sync.svg

@@ -1,8 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <g>
-            <path fill="#B2D3FF" d="M8.889 27.892c-4.91 0-8.889-3.98-8.889-8.889 0-4.353 3.129-7.975 7.26-8.74.765-4.13 4.387-7.26 8.74-7.26 4.353 0 7.975 3.13 8.74 7.26 4.131.765 7.26 4.387 7.26 8.74 0 4.822-3.839 8.747-8.627 8.885l-.262.004H8.89z"/>
-            <path fill="#297EF1" d="M22.052 19.17c.44.217.621.75.405 1.19-1.201 2.435-3.707 4.032-6.457 4.032-2.103 0-4.04-.962-5.373-2.471-.091.394-.427.693-.85.693-.49 0-.888-.398-.888-.889V18.17c0-.056.014-.106.023-.158.005-.024.004-.048.01-.071.028-.106.072-.201.132-.285l.022-.024c.056-.073.124-.134.198-.186.022-.016.044-.03.068-.043.184-.104.399-.142.613-.098.024.005.047.012.07.018.077.022.149.057.22.102.024.015.048.026.071.043.01.008.021.011.031.02l2.667 2.221c.377.314.427.875.113 1.252-.166.2-.4.301-.64.313.96.832 2.198 1.34 3.513 1.34 2.065 0 3.958-1.206 4.862-3.04.217-.44.75-.621 1.19-.404zm1.031-2.589c-.003.018-.002.036-.007.053-.03.105-.077.198-.138.28-.011.016-.024.026-.035.039-.055.067-.12.124-.19.171-.023.016-.043.03-.067.043-.092.05-.191.087-.295.103-.003 0-.005.002-.007.003-.008 0-.015-.003-.023-.002-.096.012-.194.004-.292-.018-.024-.005-.046-.01-.07-.018-.077-.024-.153-.062-.225-.11-.02-.014-.042-.023-.06-.038-.007-.005-.015-.006-.02-.012l-2.668-2.223c-.376-.313-.428-.874-.113-1.251.183-.22.449-.314.713-.305-.96-.838-2.22-1.348-3.586-1.348-2.103 0-4.007 1.213-4.89 3.06-.21.444-.741.631-1.184.42-.443-.211-.631-.742-.42-1.184C10.682 11.78 13.21 10.17 16 10.17c2.127 0 4.061.93 5.385 2.412.11-.364.436-.634.837-.634.49 0 .889.398.889.888v3.556c0 .068-.014.128-.028.19z"/>
-        </g>
-    </g>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M13 9.987c-.013 0-.02 0-.033.006A2.327 2.327 0 0 0 10.667 8 2.33 2.33 0 0 0 8.56 9.347a1.992 1.992 0 0 0-1.893 1.986c0 1.107.893 2 2 2L13 13.32a1.667 1.667 0 0 0 0-3.333ZM13.007 12h-4.34A.669.669 0 0 1 8 11.333c0-.366.3-.666.667-.666H9.5V10.5c0-.647.52-1.167 1.167-1.167.646 0 1.167.52 1.167 1.167v.833h1.173a.33.33 0 0 1 .333.334.343.343 0 0 1-.333.333ZM5.334 2.84v1.393A4 4 0 0 0 2.667 8c0 1.18.52 2.227 1.333 2.96V9.333h1.333v4h-4V12h1.82a5.295 5.295 0 0 1-1.82-4 5.33 5.33 0 0 1 4-5.16ZM12 4h-1.82a5.32 5.32 0 0 1 1.774 3.333h-1.347A4.002 4.002 0 0 0 9.334 5.04v1.627H8v-4h4V4Z"/></svg>

package/package.json

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

package/react/Chips/Readme.md

@@ -166,3 +166,58 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
   )}
 </Variants>
 ```
+
+### Small size
+
+```jsx
+import Grid from 'cozy-ui/transpiled/react/Grid'
+import Chip from 'cozy-ui/transpiled/react/Chips'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import FileOutlineIcon from "cozy-ui/transpiled/react/Icons/FileOutline"
+import RightIcon from "cozy-ui/transpiled/react/Icons/Right"
+import OpenwithIcon from "cozy-ui/transpiled/react/Icons/Openwith"
+import Divider from "cozy-ui/transpiled/react/Divider"
+import Variants from 'cozy-ui/docs/components/Variants'
+
+const colors = ['success', 'error', 'warning', 'info']
+const initialVariants = [{ default: true, active: false, ghost: false }]
+
+;
+
+<Variants initialVariants={initialVariants} radio={true} screenshotAllVariants>
+  {variant => (
+    <Grid container>
+      {colors.map(color =>
+        <Grid item xs={12} sm={6} md={3} className="u-mb-1" key={JSON.stringify(color)}>
+          <Stack spacing="s">
+            <Typography>{color}</Typography>
+            <div>
+              <Chip
+                label="1 invoice"
+                onClick={() => alert('You clicked')}
+                clickable
+                color={color}
+                size="small"
+                variant={Object.keys(variant).find(key => variant[key])}
+              />
+            </div>
+            <div>
+              <Chip
+                label="1 invoice"
+                onClick={() => alert('You clicked')}
+                clickable
+                color={color}
+                size="small"
+                disabled
+                variant={Object.keys(variant).find(key => variant[key])}
+              />
+            </div>
+          </Stack>
+        </Grid>
+      )}
+    </Grid>
+  )}
+</Variants>
+```

package/react/Icons/CloudSync.jsx

@@ -3,17 +3,8 @@ import React from 'react'
 
 function SvgCloudSync(props) {
   return (
-    <svg viewBox="0 0 32 32" {...props}>
-      <g fill="none" fillRule="evenodd">
-        <path
-          fill="#B2D3FF"
-          d="M8.889 27.892A8.889 8.889 0 010 19.003a8.892 8.892 0 017.26-8.74c.765-4.13 4.387-7.26 8.74-7.26 4.353 0 7.975 3.13 8.74 7.26a8.892 8.892 0 017.26 8.74 8.888 8.888 0 01-8.627 8.885l-.262.004H8.89z"
-        />
-        <path
-          fill="#297EF1"
-          d="M22.052 19.17a.89.89 0 01.405 1.19c-1.201 2.435-3.707 4.032-6.457 4.032-2.103 0-4.04-.962-5.373-2.471a.875.875 0 01-.85.693.889.889 0 01-.888-.889V18.17c0-.056.014-.106.023-.158.005-.024.004-.048.01-.071a.866.866 0 01.132-.285l.022-.024a.896.896 0 01.879-.327c.024.005.047.012.07.018a.842.842 0 01.22.102c.024.015.048.026.071.043.01.008.021.011.031.02l2.667 2.221a.89.89 0 01.113 1.252c-.166.2-.4.301-.64.313.96.832 2.198 1.34 3.513 1.34 2.065 0 3.958-1.206 4.862-3.04a.889.889 0 011.19-.404zm1.031-2.589c-.003.018-.002.036-.007.053a.862.862 0 01-.138.28c-.011.016-.024.026-.035.039a.88.88 0 01-.19.171c-.023.016-.043.03-.067.043a.91.91 0 01-.295.103c-.003 0-.005.002-.007.003-.008 0-.015-.003-.023-.002a.85.85 0 01-.362-.036.884.884 0 01-.225-.11c-.02-.014-.042-.023-.06-.038-.007-.005-.015-.006-.02-.012l-2.668-2.223a.888.888 0 01-.113-1.251.872.872 0 01.713-.305A5.448 5.448 0 0016 11.948c-2.103 0-4.007 1.213-4.89 3.06a.887.887 0 11-1.604-.764C10.682 11.78 13.21 10.17 16 10.17c2.127 0 4.061.93 5.385 2.412a.876.876 0 01.837-.634.89.89 0 01.889.888v3.556c0 .068-.014.128-.028.19z"
-        />
-      </g>
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M13 9.987c-.013 0-.02 0-.033.006A2.327 2.327 0 0010.667 8 2.33 2.33 0 008.56 9.347a1.992 1.992 0 00-1.893 1.986c0 1.107.893 2 2 2L13 13.32a1.667 1.667 0 000-3.333zM13.007 12h-4.34A.669.669 0 018 11.333c0-.366.3-.666.667-.666H9.5V10.5c0-.647.52-1.167 1.167-1.167.646 0 1.167.52 1.167 1.167v.833h1.173a.33.33 0 01.333.334.343.343 0 01-.333.333zM5.334 2.84v1.393A4 4 0 002.667 8c0 1.18.52 2.227 1.333 2.96V9.333h1.333v4h-4V12h1.82a5.295 5.295 0 01-1.82-4 5.33 5.33 0 014-5.16zM12 4h-1.82a5.32 5.32 0 011.774 3.333h-1.347A4.002 4.002 0 009.334 5.04v1.627H8v-4h4V4z" />
     </svg>
   )
 }

package/react/MuiCozyTheme/helpers.js

@@ -111,28 +111,19 @@ export const makeChipStyleByColor = (theme, color) => ({
   },
   '&.ghost': {
     borderWidth: '1px',
-    borderStyle: 'dashed',
-    '&:not($disabled)': {
+    color: theme.palette[color].main,
+    borderColor: alpha(theme.palette[color].main, 0),
+    backgroundColor: alpha(
+      theme.palette[color].main,
+      theme.palette.action.ghostOpacity
+    ),
+    '& $icon, & $deleteIcon': {
       color: theme.palette[color].main,
-      borderColor: alpha(
-        theme.palette[color].main,
-        theme.palette.border.ghostOpacity
-      ),
-      backgroundColor: alpha(
-        theme.palette[color].main,
-        theme.palette.action.ghostOpacity
-      ),
-      '& $icon, & $deleteIcon': {
-        color: theme.palette[color].main,
-        fill: theme.palette[color].main
-      }
+      fill: theme.palette[color].main
     },
     '&$clickable, &$deletable': {
       '&:hover, &:focus': {
-        borderColor: alpha(
-          theme.palette[color].main,
-          theme.palette.border.ghostOpacity
-        ),
+        borderColor: alpha(theme.palette[color].main, 0),
         backgroundColor: alpha(
           theme.palette[color].main,
           theme.palette.action.hoverGhostOpacity

package/react/ProgressionBanner/Readme.md

@@ -1,35 +1,41 @@
 A banner with a progress bar at the bottom.
 
 ```jsx
-import useProgression from 'cozy-ui/transpiled/react/helpers/useProgression'
-import ProgressionBanner from 'cozy-ui/transpiled/react/ProgressionBanner'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import CloudSync from 'cozy-ui/transpiled/react/Icons/CloudSync'
-import Variants from 'cozy-ui/docs/components/Variants'
-import MuiButton from 'cozy-ui/transpiled/react/Button'
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import useProgression from "cozy-ui/transpiled/react/helpers/useProgression";
+import ProgressionBanner from "cozy-ui/transpiled/react/ProgressionBanner";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import CloudSync from "cozy-ui/transpiled/react/Icons/CloudSync2";
+import Variants from "cozy-ui/docs/components/Variants";
+import MuiButton from "cozy-ui/transpiled/react/Button";
+import { BreakpointsProvider } from "cozy-ui/transpiled/react/providers/Breakpoints";
 
-const { progression } = useProgression()
+const { progression } = useProgression();
 
 const initialVariants = [
-  { withValue: true, progressBar: true, withButton: false }
-]
-
-;
+  { withValue: true, progressBar: true, withButton: false },
+];
 
 <BreakpointsProvider>
   <Variants initialVariants={initialVariants}>
-    {variant => (
+    {(variant) => (
       <ProgressionBanner
         progressBar={variant.progressBar}
         value={variant.withValue && progression}
-        text={variant.withButton ? "Storage limit nearly reached" : "4 remaining items"}
+        text={
+          variant.withButton
+            ? "Storage limit nearly reached"
+            : "4 remaining items"
+        }
         icon={<Icon icon={CloudSync} />}
-        button={variant.withButton && <MuiButton color='primary' onClick={() => alert("Clicked!")}>
-            Manage your storage space
-          </MuiButton>}
+        button={
+          variant.withButton && (
+            <MuiButton color="primary" onClick={() => alert("Clicked!")}>
+              Manage your storage space
+            </MuiButton>
+          )
+        }
       />
     )}
   </Variants>
-</BreakpointsProvider>
+</BreakpointsProvider>;
 ```