npm - cozy-ui - Versions diffs - 119.1.0 → 119.2.0 - Mend

cozy-ui 119.1.0 → 119.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,10 @@
+# [119.2.0](https://github.com/cozy/cozy-ui/compare/v119.1.0...v119.2.0) (2025-03-12)
+### Features
+* **Switch:** Adjust style component ([4e89011](https://github.com/cozy/cozy-ui/commit/4e89011))
 # [119.1.0](https://github.com/cozy/cozy-ui/compare/v119.0.3...v119.1.0) (2025-03-12)

package/package.json CHANGED Viewed

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

package/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.js CHANGED Viewed

@@ -10,6 +10,60 @@ export const makeLightNormalTwakeOverrides = theme => {
         padding: 8
       }
     },
+    MuiSwitch: {
+      root: {
+        width: 50,
+        height: 40,
+        padding: '6px 1px'
+      },
+      switchBase: {
+        padding: 5,
+        top: 5,
+        color: theme.palette.text.icon,
+        '& .cozySwitchThumb': {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 20,
+          height: 20,
+          borderRadius: '50%',
+          boxShadow: theme.shadows[1],
+          backgroundColor: theme.palette.common.white
+        }
+      },
+      track: {
+        width: 44,
+        height: '100%',
+        borderRadius: 100
+      },
+      thumb: {
+        width: 20,
+        height: 20
+      },
+      colorPrimary: {
+        '&$disabled + $track': {
+          opacity: 1,
+          backgroundColor: theme.palette.action.disabledBackground
+        }
+      },
+      colorSecondary: {
+        '&$checked': {
+          color: theme.palette.success.main
+        },
+        '&$disabled + $track': {
+          opacity: 1,
+          backgroundColor: theme.palette.action.disabledBackground
+        }
+      },
+      disabled: {
+        '&$checked + $track': {
+          backgroundColor: theme.palette.action.disabledBackground
+        },
+        '& .cozySwitchThumb': {
+          backgroundColor: theme.palette.background.default
+        }
+      }
+    },
     MuiButton: {
       root: {
         borderRadius: 100,

package/react/Switch/Readme.md CHANGED Viewed

@@ -1,14 +1,13 @@
 Used to present a binary choice to the user.
-Uses [Material UI's Switch](https://material-ui.com/components/switches/).
 ```jsx
 import { useState, useCallback } from 'react'
-import { Media, Img } from 'cozy-ui/transpiled/react/deprecated/Media'
 import Switch from 'cozy-ui/transpiled/react/Switch'
 import Typography from "cozy-ui/transpiled/react/Typography"
 import Stack from "cozy-ui/transpiled/react/Stack"
-import Box from '@material-ui/core/Box'
+import Box from 'cozy-ui/transpiled/react/Box'
+import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
+import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
 initialState = {
   switch0: true,
@@ -22,26 +21,54 @@ const StateSwitch = ({ id, color }) => {
   return <Switch
     color={color}
     checked={checked}
+    {...(isTwakeTheme() && { icon: CheckIcon })}
     onChange={handleClick}
   />
 }
-const Switches = () => {
-  return <Stack spacing='xs'>
-    {['primary', 'secondary', 'default'].map((color, i) => {
-      return (
-        <Box display='flex' alignItems='center' key={i}>
-          <Typography variant='body1' display="inline">
-            { color }
-          </Typography>
-          <StateSwitch id={i} color={color} />
-        </Box>
-      )
-    })}
-  </Stack>
-}
 ;
-<Switches />
+<Stack spacing='xs'>
+  {['primary', 'secondary', 'default'].map((color, i) => {
+    return (
+      <Box display='flex' alignItems='center' key={i}>
+        <Typography variant='body1' display="inline">{ color }</Typography>
+        <StateSwitch id={i} color={color} />
+      </Box>
+    )
+  })}
+  <FormControlLabel control={<Switch color="primary" />} label="With label" />
+  <FormControlLabel control={<Switch color="primary" checked />} label="With label" />
+  <br />
+  <FormControlLabel control={<Switch color="primary" disabled />} label="Primary, disabled with label" />
+  <FormControlLabel control={<Switch color="primary" checked disabled />} label="Primary, checked - disabled with label" />
+  <br />
+  <FormControlLabel
+    label="Primary, disabled with label"
+    control={
+      <Switch
+        color="primary"
+        {...(isTwakeTheme() && { icon: CheckIcon })}
+        disabled
+      />
+    }
+  />
+  <FormControlLabel
+    label="Primary, checked - disabled with label"
+    control={
+      <Switch
+        color="primary"
+        {...(isTwakeTheme() && { icon: CheckIcon })}
+        checked
+        disabled
+      />
+    }
+  />
+  <br />
+  <FormControlLabel control={<Switch color="secondary" disabled />} label="Secondary, checked with label" />
+  <FormControlLabel control={<Switch color="secondary" checked disabled />} label="Secondary, checked - disabled with label" />
+  <br />
+  <FormControlLabel control={<Switch disabled />} label="Default, checked with label" />
+  <FormControlLabel control={<Switch checked disabled />} label="Default, checked - disabled with label" />
+</Stack>
 ```

package/react/Switch/index.jsx CHANGED Viewed

@@ -1,3 +1,22 @@
-import Switch from '@material-ui/core/Switch'
+import MuiSwitch from '@material-ui/core/Switch'
+import React from 'react'
+import Icon from '../Icon'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+const Switch = ({ icon, ...props }) => {
+  const _icon = (
+    <span className="cozySwitchThumb">
+      {!!icon && <Icon icon={icon} size={14} />}
+    </span>
+  )
+  return (
+    <MuiSwitch
+      {...props}
+      {...(isTwakeTheme() && { icon: _icon, checkedIcon: _icon })}
+    />
+  )
+}
 export default Switch

package/transpiled/react/MuiCozyTheme/overrides/twake/makeDarkInvertedOverrides.d.ts CHANGED Viewed

@@ -1417,6 +1417,60 @@ export function makeDarkInvertedTwakeOverrides(theme: any): {
             padding: number;
         };
     };
+    MuiSwitch: {
+        root: {
+            width: number;
+            height: number;
+            padding: string;
+        };
+        switchBase: {
+            padding: number;
+            top: number;
+            color: any;
+            '& .cozySwitchThumb': {
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                width: number;
+                height: number;
+                borderRadius: string;
+                boxShadow: any;
+                backgroundColor: any;
+            };
+        };
+        track: {
+            width: number;
+            height: string;
+            borderRadius: number;
+        };
+        thumb: {
+            width: number;
+            height: number;
+        };
+        colorPrimary: {
+            '&$disabled + $track': {
+                opacity: number;
+                backgroundColor: any;
+            };
+        };
+        colorSecondary: {
+            '&$checked': {
+                color: any;
+            };
+            '&$disabled + $track': {
+                opacity: number;
+                backgroundColor: any;
+            };
+        };
+        disabled: {
+            '&$checked + $track': {
+                backgroundColor: any;
+            };
+            '& .cozySwitchThumb': {
+                backgroundColor: any;
+            };
+        };
+    };
     MuiButton: {
         root: {
             borderRadius: number;

package/transpiled/react/MuiCozyTheme/overrides/twake/makeDarkNormalOverrides.d.ts CHANGED Viewed

@@ -1417,6 +1417,60 @@ export function makeDarkNormalTwakeOverrides(theme: any): {
             padding: number;
         };
     };
+    MuiSwitch: {
+        root: {
+            width: number;
+            height: number;
+            padding: string;
+        };
+        switchBase: {
+            padding: number;
+            top: number;
+            color: any;
+            '& .cozySwitchThumb': {
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                width: number;
+                height: number;
+                borderRadius: string;
+                boxShadow: any;
+                backgroundColor: any;
+            };
+        };
+        track: {
+            width: number;
+            height: string;
+            borderRadius: number;
+        };
+        thumb: {
+            width: number;
+            height: number;
+        };
+        colorPrimary: {
+            '&$disabled + $track': {
+                opacity: number;
+                backgroundColor: any;
+            };
+        };
+        colorSecondary: {
+            '&$checked': {
+                color: any;
+            };
+            '&$disabled + $track': {
+                opacity: number;
+                backgroundColor: any;
+            };
+        };
+        disabled: {
+            '&$checked + $track': {
+                backgroundColor: any;
+            };
+            '& .cozySwitchThumb': {
+                backgroundColor: any;
+            };
+        };
+    };
     MuiButton: {
         root: {
             borderRadius: number;

package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightInvertedOverrides.d.ts CHANGED Viewed

@@ -1417,6 +1417,60 @@ export function makeLightInvertedTwakeOverrides(theme: any): {
             padding: number;
         };
     };
+    MuiSwitch: {
+        root: {
+            width: number;
+            height: number;
+            padding: string;
+        };
+        switchBase: {
+            padding: number;
+            top: number;
+            color: any;
+            '& .cozySwitchThumb': {
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                width: number;
+                height: number;
+                borderRadius: string;
+                boxShadow: any;
+                backgroundColor: any;
+            };
+        };
+        track: {
+            width: number;
+            height: string;
+            borderRadius: number;
+        };
+        thumb: {
+            width: number;
+            height: number;
+        };
+        colorPrimary: {
+            '&$disabled + $track': {
+                opacity: number;
+                backgroundColor: any;
+            };
+        };
+        colorSecondary: {
+            '&$checked': {
+                color: any;
+            };
+            '&$disabled + $track': {
+                opacity: number;
+                backgroundColor: any;
+            };
+        };
+        disabled: {
+            '&$checked + $track': {
+                backgroundColor: any;
+            };
+            '& .cozySwitchThumb': {
+                backgroundColor: any;
+            };
+        };
+    };
     MuiButton: {
         root: {
             borderRadius: number;

package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.d.ts CHANGED Viewed

@@ -1417,6 +1417,60 @@ export function makeLightNormalTwakeOverrides(theme: any): {
             padding: number;
         };
     };
+    MuiSwitch: {
+        root: {
+            width: number;
+            height: number;
+            padding: string;
+        };
+        switchBase: {
+            padding: number;
+            top: number;
+            color: any;
+            '& .cozySwitchThumb': {
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                width: number;
+                height: number;
+                borderRadius: string;
+                boxShadow: any;
+                backgroundColor: any;
+            };
+        };
+        track: {
+            width: number;
+            height: string;
+            borderRadius: number;
+        };
+        thumb: {
+            width: number;
+            height: number;
+        };
+        colorPrimary: {
+            '&$disabled + $track': {
+                opacity: number;
+                backgroundColor: any;
+            };
+        };
+        colorSecondary: {
+            '&$checked': {
+                color: any;
+            };
+            '&$disabled + $track': {
+                opacity: number;
+                backgroundColor: any;
+            };
+        };
+        disabled: {
+            '&$checked + $track': {
+                backgroundColor: any;
+            };
+            '& .cozySwitchThumb': {
+                backgroundColor: any;
+            };
+        };
+    };
     MuiButton: {
         root: {
             borderRadius: number;

package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.js CHANGED Viewed

@@ -9,6 +9,60 @@ export var makeLightNormalTwakeOverrides = function makeLightNormalTwakeOverride
           padding: 8
         }
       },
+      MuiSwitch: {
+        root: {
+          width: 50,
+          height: 40,
+          padding: '6px 1px'
+        },
+        switchBase: {
+          padding: 5,
+          top: 5,
+          color: theme.palette.text.icon,
+          '& .cozySwitchThumb': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 20,
+            height: 20,
+            borderRadius: '50%',
+            boxShadow: theme.shadows[1],
+            backgroundColor: theme.palette.common.white
+          }
+        },
+        track: {
+          width: 44,
+          height: '100%',
+          borderRadius: 100
+        },
+        thumb: {
+          width: 20,
+          height: 20
+        },
+        colorPrimary: {
+          '&$disabled + $track': {
+            opacity: 1,
+            backgroundColor: theme.palette.action.disabledBackground
+          }
+        },
+        colorSecondary: {
+          '&$checked': {
+            color: theme.palette.success.main
+          },
+          '&$disabled + $track': {
+            opacity: 1,
+            backgroundColor: theme.palette.action.disabledBackground
+          }
+        },
+        disabled: {
+          '&$checked + $track': {
+            backgroundColor: theme.palette.action.disabledBackground
+          },
+          '& .cozySwitchThumb': {
+            backgroundColor: theme.palette.background.default
+          }
+        }
+      },
       MuiButton: {
         root: {
           borderRadius: 100,

package/transpiled/react/Switch/index.js CHANGED Viewed

@@ -1,2 +1,26 @@
-import Switch from '@material-ui/core/Switch';
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["icon"];
+import MuiSwitch from '@material-ui/core/Switch';
+import React from 'react';
+import Icon from "cozy-ui/transpiled/react/Icon";
+import { isTwakeTheme } from "cozy-ui/transpiled/react/helpers/isTwakeTheme";
+var Switch = function Switch(_ref) {
+  var icon = _ref.icon,
+      props = _objectWithoutProperties(_ref, _excluded);
+  var _icon = /*#__PURE__*/React.createElement("span", {
+    className: "cozySwitchThumb"
+  }, !!icon && /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    size: 14
+  }));
+  return /*#__PURE__*/React.createElement(MuiSwitch, _extends({}, props, isTwakeTheme() && {
+    icon: _icon,
+    checkedIcon: _icon
+  }));
+};
 export default Switch;