cozy-ui 85.0.2 → 85.2.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [85.2.0](https://github.com/cozy/cozy-ui/compare/v85.1.0...v85.2.0) (2023-05-23)
+
+
+### Bug Fixes
+
+* Remove usage of theme.mixin.gutters ([faa161d](https://github.com/cozy/cozy-ui/commit/faa161d))
+
+
+### Features
+
+* **MidEllipsis:** We can now spread any prop and ref to the first child ([8082cec](https://github.com/cozy/cozy-ui/commit/8082cec))
+* Move default props def from theme creation to components ([233ea87](https://github.com/cozy/cozy-ui/commit/233ea87))
+
+# [85.1.0](https://github.com/cozy/cozy-ui/compare/v85.0.2...v85.1.0) (2023-05-17)
+
+
+### Bug Fixes
+
+* FullScreenCozyDialog on flagship ([273db8e](https://github.com/cozy/cozy-ui/commit/273db8e))
+
+
+### Features
+
+* Add className in order to be able to target them ([8ead89c](https://github.com/cozy/cozy-ui/commit/8ead89c))
+
 ## [85.0.2](https://github.com/cozy/cozy-ui/compare/v85.0.1...v85.0.2) (2023-05-17)
 
 

package/package.json

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

package/react/CozyDialogs/Readme.md

@@ -201,9 +201,47 @@ const initialVariants = [{
   withBackground: false
 }]
 
+// The goal of this method is to simulate the
+// immersive mode of the flagship app. So we
+// add the flagship-app class to the body and
+// we set 2 css variables:
+// flagship-top-height
+// flagship-bottom-height
+const setFlagshipVars = () => {
+  const root = document.getElementsByTagName('body')[0]
+  root.style.setProperty('--flagship-top-height',  "40px");
+  root.style.setProperty('--flagship-bottom-height',  "40px");
+  root.classList.add('flagship-app')
+
+  const statusBarDiv = document.createElement("div");
+  statusBarDiv.style.cssText = "position:fixed;top:0;height:40px;z-index:10000000;background-color:red;width:100%"
+  // and give it some content
+  const statusBarDivContent = document.createTextNode("Top Status Bar with clock");
+
+  // add the text node to the newly created div
+  statusBarDiv.appendChild(statusBarDivContent);
+
+
+  const bottomBarDiv = document.createElement("div");
+  bottomBarDiv.style.cssText = "position:fixed;bottom:0;height:40px;z-index:10000000;background-color:red;width:100%"
+  // and give it some content
+  const bottomBarDivContent = document.createTextNode("BottomBar");
+
+  // add the text node to the newly created div
+  bottomBarDiv.appendChild(bottomBarDivContent);
+
+  // add the newly created element and its content into the DOM
+  const currentDiv = document.getElementById("rsg-root");
+  document.body.insertBefore(statusBarDiv, currentDiv);
+  document.body.insertBefore(bottomBarDiv, currentDiv);
+}
 ;
 
 <BreakpointsProvider>
+  <Button 
+    onClick={() => setFlagshipVars()}   
+    variant="secondary"        
+    label={'Simulate Immersive Flagship Mode'} />
   <Variants initialVariants={initialVariants}>
     {variant => (
       <>

package/react/CozyDialogs/useCozyDialog.js

@@ -71,15 +71,17 @@ const useCozyDialog = props => {
     id: `modal-title-${id}`,
     ref: titleRef,
     disableTypography: true,
-    className: cx(
-      {
-        'u-ellipsis': !isFluidTitle,
-        dialogTitleFluid: isFluidTitle,
-        dialogTitleWithClose: showCloseButton && !disableTitleAutoPadding,
-        dialogTitleWithBack: showBackButton && !disableTitleAutoPadding
-      },
-      componentsProps?.dialogTitle?.className
-    )
+    className:
+      'cozyDialogTitle ' +
+      cx(
+        {
+          'u-ellipsis': !isFluidTitle,
+          dialogTitleFluid: isFluidTitle,
+          dialogTitleWithClose: showCloseButton && !disableTitleAutoPadding,
+          dialogTitleWithBack: showBackButton && !disableTitleAutoPadding
+        },
+        componentsProps?.dialogTitle?.className
+      )
   }
 
   const listItemClassName = 'listItem--dialog'
@@ -108,7 +110,8 @@ const useCozyDialog = props => {
       root: cx({
         disableGutters
       })
-    }
+    },
+    className: 'cozyDialogContent'
   }
 
   return {

package/react/MidEllipsis/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 
@@ -14,32 +14,34 @@ import PropTypes from 'prop-types'
  * */
 const LRM = <>&#8206;</>
 
-const MidEllipsis = props => {
-  const { text, className, children } = props
-
-  if (text && typeof text !== 'string')
-    throw new Error('The "text" prop of MidEllipsis can only be a string')
-
-  if (children && typeof children !== 'string')
-    throw new Error('The children of MidEllipsis can only be a string')
-
-  const str = text || children
-
-  const partLength = Math.round(str.length / 2)
-  const firstPart = str.substr(0, partLength)
-  const lastPart = str.substr(partLength, str.length)
-
-  return (
-    <div className={cx('u-midellipsis', className)}>
-      <span>{firstPart}</span>
-      <span>
-        {LRM}
-        {lastPart}
-        {LRM}
-      </span>
-    </div>
-  )
-}
+const MidEllipsis = forwardRef(
+  ({ text, className, children, ...props }, ref) => {
+    if (text && typeof text !== 'string')
+      throw new Error('The "text" prop of MidEllipsis can only be a string')
+
+    if (children && typeof children !== 'string')
+      throw new Error('The children of MidEllipsis can only be a string')
+
+    const str = text || children
+
+    const partLength = Math.round(str.length / 2)
+    const firstPart = str.substr(0, partLength)
+    const lastPart = str.substr(partLength, str.length)
+
+    return (
+      <div className={cx('u-midellipsis', className)} ref={ref} {...props}>
+        <span>{firstPart}</span>
+        <span>
+          {LRM}
+          {lastPart}
+          {LRM}
+        </span>
+      </div>
+    )
+  }
+)
+
+MidEllipsis.displayName = 'MidEllipsis'
 
 MidEllipsis.propTypes = {
   text: PropTypes.string,

package/react/MuiCozyTheme/Accordion/Readme.md

@@ -1,9 +1,11 @@
 See [Material UI documentation](https://material-ui.com/demos/expansion-panels/) to learn more about Accordion.
 
 ```jsx
-import Accordion from '@material-ui/core/Accordion';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
+import Accordion from 'cozy-ui/transpiled/react/MuiCozyTheme/Accordion'
+import AccordionSummary from 'cozy-ui/transpiled/react/MuiCozyTheme/AccordionSummary'
+import AccordionDetails from 'cozy-ui/transpiled/react/MuiCozyTheme/AccordionDetails'
+
+;
 
 <>
   <Accordion>

package/react/MuiCozyTheme/AccordionSummary/index.js

@@ -1,3 +1,10 @@
+import React from 'react'
 import AccordionSummary from '@material-ui/core/AccordionSummary'
 
+import AccordionExpandIcon from '../AccordionExpandIcon'
+
+AccordionSummary.defaultProps = {
+  expandIcon: <AccordionExpandIcon />
+}
+
 export default AccordionSummary

package/react/MuiCozyTheme/helpers.js

@@ -0,0 +1,212 @@
+import { alpha, lighten, darken } from '../styles'
+
+export const makeAlertColor = (theme, color) => {
+  const themeColorByColor = {
+    primary: theme.palette[color].main,
+    secondary: theme.palette.text.primary
+  }
+
+  // same approach as Mui, see https://github.com/mui/material-ui/blob/v4.x/packages/material-ui-lab/src/Alert/Alert.js#L28
+  return {
+    '&-standard': {
+      color: darken(themeColorByColor[color], 0.6),
+      backgroundColor: lighten(themeColorByColor[color], 0.9),
+      '& $icon': {
+        color: themeColorByColor[color]
+      },
+      '& $action': {
+        '& button[title="Close"]': {
+          color: theme.palette.text.secondary
+        }
+      }
+    },
+    '&-outlined': {
+      color: darken(themeColorByColor[color], 0.6),
+      border: `1px solid ${themeColorByColor[color]}`,
+      '& $icon': {
+        color: themeColorByColor[color]
+      }
+    },
+    '&-filled': {
+      backgroundColor:
+        color === 'secondary'
+          ? theme.palette.grey[600]
+          : themeColorByColor[color]
+    }
+  }
+}
+
+export const makeAlertInvertedColor = (theme, color) => {
+  return {
+    '&-standard': {
+      color: theme.palette.primary.main,
+      backgroundColor: theme.palette.background.default,
+      '& $icon': {
+        color: theme.palette[color].main
+      }
+    },
+    '&-outlined': {
+      color: theme.palette.primary.main,
+      border: `1px solid ${theme.palette.primary.main}`,
+      '& $icon': {
+        color: theme.palette[color].main
+      }
+    },
+    '&-filled': {
+      color: theme.palette[color].contrastText,
+      backgroundColor:
+        color === 'secondary'
+          ? theme.palette.grey[200]
+          : theme.palette[color].main,
+      '& $icon': {
+        color: theme.palette[color].contrastText
+      }
+    }
+  }
+}
+
+export const makeChipStyleByColor = (theme, color) => ({
+  color: theme.palette.text[color] || theme.palette[color].main,
+  borderColor:
+    color === 'primary'
+      ? theme.palette.border.main
+      : alpha(theme.palette[color].main, theme.palette.border.opacity),
+  '&$clickable, &$deletable': {
+    '&:hover, &:focus': {
+      borderColor:
+        color === 'primary'
+          ? theme.palette.border.main
+          : alpha(theme.palette[color].main, theme.palette.border.opacity),
+      backgroundColor:
+        color === 'primary'
+          ? theme.palette.action.hover
+          : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+    }
+  },
+  '& $icon': {
+    color:
+      color === 'primary' ? theme.palette.text.icon : theme.palette[color].main,
+    fill:
+      color === 'primary' ? theme.palette.text.icon : theme.palette[color].main
+  },
+  '& $deleteIcon': {
+    color:
+      color === 'primary'
+        ? theme.palette.text.secondary
+        : theme.palette[color].main,
+    fill:
+      color === 'primary'
+        ? theme.palette.text.secondary
+        : theme.palette[color].main
+  },
+  '&$colorPrimary': {
+    padding: '0 1px',
+    color: theme.palette[color].contrastText,
+    backgroundColor: theme.palette[color].main,
+    '& $icon, & $deleteIcon': {
+      color: theme.palette[color].contrastText,
+      fill: theme.palette[color].contrastText
+    },
+    '&$disabled': {
+      opacity: 1,
+      color: theme.palette.text.disabled,
+      backgroundColor: theme.palette.action.disabledBackground,
+      '& $icon, & $deleteIcon': {
+        color: theme.palette.text.disabled,
+        fill: theme.palette.text.disabled
+      }
+    },
+    '&$clickable, &$deletable': {
+      '&:hover, &:focus': {
+        backgroundColor: theme.palette[color].dark
+      }
+    }
+  },
+  '&.ghost': {
+    borderWidth: '1px',
+    borderStyle: 'dashed',
+    '&:not($disabled)': {
+      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
+      }
+    },
+    '&$clickable, &$deletable': {
+      '&:hover, &:focus': {
+        borderColor: alpha(
+          theme.palette[color].main,
+          theme.palette.border.ghostOpacity
+        ),
+        backgroundColor: alpha(
+          theme.palette[color].main,
+          theme.palette.action.hoverGhostOpacity
+        )
+      }
+    }
+  }
+})
+
+export const makeSecondaryButtonStyle = (theme, color) => ({
+  color: theme.palette[color].main,
+  borderColor: theme.palette[color].main,
+  '&:hover': {
+    backgroundColor: alpha(
+      theme.palette[color].main,
+      theme.palette.action.hoverOpacity
+    ),
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  },
+  '&.ghost': {
+    backgroundColor: alpha(
+      theme.palette[color].main,
+      theme.palette.action.ghostOpacity
+    ),
+    '&:hover': {
+      backgroundColor: alpha(
+        theme.palette[color].main,
+        theme.palette.action.hoverGhostOpacity
+      ),
+      '@media (hover: none)': {
+        backgroundColor: alpha(
+          theme.palette[color].main,
+          theme.palette.action.ghostOpacity
+        )
+      }
+    }
+  }
+})
+
+export const makeTextButtonStyle = (theme, color) => ({
+  color: theme.palette[color].main,
+  '&:hover': {
+    backgroundColor: alpha(
+      theme.palette[color].main,
+      theme.palette.action.hoverOpacity
+    ),
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  }
+})
+
+export const makeContainedButtonStyle = (theme, color) => ({
+  color: theme.palette[color].contrastText,
+  backgroundColor: theme.palette[color].main,
+  '&:hover': {
+    backgroundColor: theme.palette[color].dark,
+    '@media (hover: none)': {
+      backgroundColor: theme.palette[color].main
+    }
+  }
+})

package/react/MuiCozyTheme/makeInvertedOverrides.js

@@ -0,0 +1,112 @@
+import merge from 'lodash/merge'
+
+import { makeAlertInvertedColor } from './helpers'
+import { makeOverrides } from './makeOverrides'
+
+export const makeInvertedOverrides = invertedTheme => {
+  const makeOverridesForInvertedTheme = invertedTheme => ({
+    MuiOutlinedInput: {
+      root: {
+        boxSizing: 'border-box',
+        '&$disabled': {
+          background: 'initial'
+        },
+        '&$focused $notchedOutline': {
+          borderColor: invertedTheme.palette.text.primary,
+          borderWidth: '0.0625rem'
+        },
+        '& $notchedOutline': {
+          borderColor: invertedTheme.palette.text.primary
+        }
+      }
+    },
+    MuiFormLabel: {
+      root: {
+        '&$focused': {
+          color: invertedTheme.palette.text.primary
+        }
+      }
+    },
+    MuiLinearProgress: {
+      colorPrimary: {
+        backgroundColor: 'rgba(255,255,255,0.2)'
+      },
+      colorSecondary: {
+        backgroundColor: 'rgba(255,255,255,0.2)'
+      }
+    },
+    MuiCheckbox: {
+      colorPrimary: {
+        '&$checked:not($disabled)': {
+          color: invertedTheme.palette.primary.light
+        }
+      },
+      colorSecondary: {
+        '&$checked:not($disabled)': {
+          color: invertedTheme.palette.error.main
+        }
+      }
+    },
+    MuiAlert: {
+      root: {
+        '&.cozyAlert': {
+          '&-primary': makeAlertInvertedColor(invertedTheme, 'primary'),
+          '&-secondary': makeAlertInvertedColor(invertedTheme, 'secondary'),
+          '&-success': makeAlertInvertedColor(invertedTheme, 'success'),
+          '&-error': makeAlertInvertedColor(invertedTheme, 'error'),
+          '&-warning': makeAlertInvertedColor(invertedTheme, 'warning'),
+          '&-info': makeAlertInvertedColor(invertedTheme, 'info')
+        }
+      }
+    },
+    MuiSnackbarContent: {
+      root: {
+        backgroundColor: invertedTheme.palette.grey[200]
+      }
+    },
+    MuiTabs: {
+      root: {
+        '&.segmented': {
+          '& $indicator': {
+            backgroundColor: invertedTheme.palette.primary.main
+          }
+        }
+      }
+    },
+    MuiTab: {
+      root: {
+        '&.segmented': {
+          '&$selected': {
+            color: invertedTheme.palette.primary.contrastText
+          }
+        }
+      }
+    },
+    MuiSwitch: {
+      switchBase: {
+        color: invertedTheme.palette.grey[100]
+      },
+      colorPrimary: {
+        '&$checked': {
+          '& + $track': {
+            backgroundColor: invertedTheme.palette.success.dark
+          }
+        }
+      },
+      colorSecondary: {
+        '&$checked': {
+          '& + $track': {
+            backgroundColor: invertedTheme.palette.success.dark
+          }
+        }
+      }
+    }
+  })
+
+  const invertedOverrides = merge(
+    makeOverrides(invertedTheme),
+    makeOverridesForInvertedTheme(invertedTheme)
+  )
+
+  return invertedOverrides
+}