cozy-ui 59.2.0 → 59.3.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [59.3.0](https://github.com/cozy/cozy-ui/compare/v59.2.0...v59.3.0) (2022-01-14)
+
+
+### Bug Fixes
+
+* CozyDialogs doesn't show title block anymore if undefined ([1c7170c](https://github.com/cozy/cozy-ui/commit/1c7170c))
+
+
+### Features
+
+* Add `disableGutters` prop to CozyDialogs ([a55f5fb](https://github.com/cozy/cozy-ui/commit/a55f5fb))
+
 # [59.2.0](https://github.com/cozy/cozy-ui/compare/v59.1.0...v59.2.0) (2022-01-11)
 
 

package/package.json

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

package/react/CozyDialogs/ConfirmDialog.jsx

@@ -15,7 +15,8 @@ const ConfirmDialog = props => {
     dialogTitleProps,
     fullScreen,
     id,
-    dialogActionsProps
+    dialogActionsProps,
+    dialogContentProps
   } = useCozyDialog({ ...props, isFluidTitle: true })
 
   const onBackOrClose = onBack || onClose
@@ -40,11 +41,13 @@ const ConfirmDialog = props => {
           onClick={onBackOrClose}
         />
       )}
-      <DialogContent>
+      <DialogContent {...dialogContentProps}>
         <div className="dialogContentInner withFluidActions">
-          <div className="dialogTitleFluidContainer">
-            <DialogTitle {...dialogTitleProps}>{title}</DialogTitle>
-          </div>
+          {title && (
+            <div className="dialogTitleFluidContainer">
+              <DialogTitle {...dialogTitleProps}>{title}</DialogTitle>
+            </div>
+          )}
           {content}
           {actions && (
             <DialogActions

package/react/CozyDialogs/Dialog.jsx

@@ -16,7 +16,8 @@ const Dialog = props => {
     dialogTitleProps,
     fullScreen,
     id,
-    dialogActionsProps
+    dialogActionsProps,
+    dialogContentProps
   } = useCozyDialog(props)
 
   const onBackOrClose = onBack || onClose
@@ -41,9 +42,13 @@ const Dialog = props => {
           onClick={onBackOrClose}
         />
       )}
-      <DialogTitle {...dialogTitleProps}>{title}</DialogTitle>
-      <Divider />
-      <DialogContent>
+      {title && (
+        <>
+          <DialogTitle {...dialogTitleProps}>{title}</DialogTitle>
+          <Divider />
+        </>
+      )}
+      <DialogContent {...dialogContentProps}>
         <div className="dialogContentInner withFluidActions">
           {content}
           {actions && (

package/react/CozyDialogs/FixedActionsDialog.jsx

@@ -16,7 +16,8 @@ const FixedActionsDialog = props => {
     dialogTitleProps,
     fullScreen,
     id,
-    dialogActionsProps
+    dialogActionsProps,
+    dialogContentProps
   } = useCozyDialog({ ...props, isFluidTitle: true })
 
   const onBackOrClose = onBack || onClose
@@ -41,11 +42,13 @@ const FixedActionsDialog = props => {
           onClick={onBackOrClose}
         />
       )}
-      <DialogContent>
+      <DialogContent {...dialogContentProps}>
         <div className="dialogContentInner">
-          <div className="dialogTitleFluidContainer">
-            <DialogTitle {...dialogTitleProps}>{title}</DialogTitle>
-          </div>
+          {title && (
+            <div className="dialogTitleFluidContainer">
+              <DialogTitle {...dialogTitleProps}>{title}</DialogTitle>
+            </div>
+          )}
           {content}
         </div>
       </DialogContent>

package/react/CozyDialogs/FixedDialog.jsx

@@ -16,7 +16,8 @@ const FixedDialog = props => {
     dialogTitleProps,
     fullScreen,
     id,
-    dialogActionsProps
+    dialogActionsProps,
+    dialogContentProps
   } = useCozyDialog(props)
 
   const onBackOrClose = onBack || onClose
@@ -41,9 +42,13 @@ const FixedDialog = props => {
           onClick={onBackOrClose}
         />
       )}
-      <DialogTitle {...dialogTitleProps}>{title}</DialogTitle>
-      <Divider />
-      <DialogContent>
+      {title && (
+        <>
+          <DialogTitle {...dialogTitleProps}>{title}</DialogTitle>
+          <Divider />
+        </>
+      )}
+      <DialogContent {...dialogContentProps}>
         <div className="dialogContentInner">{content}</div>
       </DialogContent>
       <Divider />

package/react/CozyDialogs/IllustrationDialog.jsx

@@ -15,7 +15,8 @@ const IllustrationDialog = props => {
     dialogTitleProps,
     id,
     fullScreen,
-    dialogActionsProps
+    dialogActionsProps,
+    dialogContentProps
   } = useCozyDialog({ ...props, isFluidTitle: true })
 
   const onBackOrClose = onBack || onClose
@@ -40,11 +41,13 @@ const IllustrationDialog = props => {
           onClick={onBackOrClose}
         />
       )}
-      <DialogContent>
+      <DialogContent {...dialogContentProps}>
         <div className="dialogContentInner withFluidActions">
-          <DialogTitle {...dialogTitleProps}>
-            <div className="u-flex u-flex-justify-center">{title}</div>
-          </DialogTitle>
+          {title && (
+            <DialogTitle {...dialogTitleProps}>
+              <div className="u-flex u-flex-justify-center">{title}</div>
+            </DialogTitle>
+          )}
           {content}
           {actions && (
             <DialogActions

package/react/CozyDialogs/Readme.md

@@ -1,10 +1,12 @@
 Pre-built modals ready to be directly used in applications, based on MUI Dialog.
 
-* Dialog : default Cozy modal
-* ConfirmDialog : used for confirmation popups
-* IllustrationDialog : used for illustration as title
-* FixedDialog : default one but with both title/actions fixed
-* FixedActionsDialog : default one but with title fluid and actions fixed
+### Usage
+
+* **Dialog** : default Cozy modal
+* **ConfirmDialog** : used for confirmation popups
+* **IllustrationDialog** : used for illustration as title
+* **FixedDialog** : default one but with both title/actions fixed
+* **FixedActionsDialog** : default one but with title fluid and actions fixed
 
 Will automatically:
 
@@ -13,23 +15,26 @@ Will automatically:
 
 ### Props
 
-* size : `<string>` Can be "s", "m" (default) or "l"
-* opened : `<boolean>` (required) To open/close the modal
-* onClose : `<function>` (required) Triggered function on modal close action
-* onBack : `<function>` (optional) Triggered function on modal back action
+* **size** : `<string>` – Can be "s", "m" (default) or "l"
+* **open** : `<boolean>` (required) – To open/close the modal
+* **onClose** : `<function>` (required) – Triggered function on modal close action
+* **onBack** : `<function>` (optional) – Triggered function on modal back action
   * if defined and in desktop mode then a back button is shown in addition to the close button and it will trigger onBack() on click
   * if defined and in mobile mode then the back button will trigger onBack() instead of onClose()
   * if not defined and in mobile mode then the back button will trigger onClose()
-* disableTitleAutoPadding : `<boolean>` (optional) Disable title padding calculation that would prevent overlapping with close and back buttons
+* **disableTitleAutoPadding** : `<boolean>` (optional) – Disable title padding calculation that would prevent overlapping with close and back buttons
   * if set to `true` then you should handle those CSS properties by yourself or title will take 100% of width
   * if set to `false` then title will take only available space between close and back buttons regarding which of `onClose` or `onBack` props are defined or not
-* title : `<node>` Title of the modal
-* content : `<node>` Content of the modal
-* actions : `<node>` Actions of the modal
-* actionsLayout : `<string>` Can be "row" or "column"
+* **disableGutters** : `<boolean>` – To disable the margins and paddings of the inner content
+* **title** : `<node>` – Title of the modal
+* **content** : `<node>` – Content of the modal
+* **actions** : `<node>` – Actions of the modal
+* **actionsLayout** : `<string>` – Can be "row" or "column"
 
 Additionally, all the CozyDialogs support [MUI Dialog's props](https://v3.material-ui.com/api/dialog/).
 
+### Exemples
+
 ```jsx
 import {
   Dialog,
@@ -151,7 +156,9 @@ initialState = {
   content: 'default',
   theme: 'normal',
   align: 'middle',
-  showActions: true
+  showActions: true,
+  disableGutters: false,
+  hideTitle: false
 }
 
 ;
@@ -174,6 +181,10 @@ initialState = {
       <StateRadio value='short' name='title' /> short{' '}
       <StateRadio value='long' name='title' /> long
     </p>
+    <p>Hide title:
+      <StateRadio value={true} name='hideTitle' /> yes{' '}
+      <StateRadio value={false} name='hideTitle' /> no
+    </p>
     <p>Content:
       <StateRadio value='default' name='content' /> default{' '}
       <StateRadio value='short' name='content' /> short{' '}
@@ -196,6 +207,10 @@ initialState = {
       <StateRadio value='middle' name='align' /> middle
       <StateRadio value='top' name='align' /> top{' '}
     </p>
+    <p>Disable gutters (inner padding):
+      <StateRadio value={true} name='disableGutters' /> yes
+      <StateRadio value={false} name='disableGutters' /> no{' '}
+    </p>
     <DialogComponent
       size={DialogComponent !== ConfirmDialog ? state.size : undefined}
       open={state.modalOpened}
@@ -203,10 +218,13 @@ initialState = {
       onBack={state.withBackButton ? handleBack : undefined}
       disableTitleAutoPadding={state.disableTitleAutoPadding}
       align={state.align}
-      title={DialogComponent !== IllustrationDialog && state.title === "long"
-        ? `${dialogTitles[DialogComponent.name]} - ${content.ada.short}`
-        : dialogTitles[DialogComponent.name]
+      title={state.hideTitle
+        ? undefined
+        : DialogComponent !== IllustrationDialog && state.title === "long"
+          ? `${dialogTitles[DialogComponent.name]} - ${content.ada.short}`
+          : dialogTitles[DialogComponent.name]
       }
+      disableGutters={state.disableGutters}
       content={
         <Typography variant='body1' color='textPrimary'>
           { state.content == 'default'

package/react/CozyDialogs/useCozyDialog.js

@@ -27,6 +27,7 @@ const useCozyDialog = props => {
     align,
     disableTitleAutoPadding,
     isFluidTitle,
+    disableGutters,
     ...otherProps
   } = props
   const { isMobile } = useBreakpoints()
@@ -91,6 +92,14 @@ const useCozyDialog = props => {
     }
   }
 
+  const dialogContentProps = {
+    classes: {
+      root: cx({
+        disableGutters
+      })
+    }
+  }
+
   return {
     dialogProps,
     dialogTitleProps,
@@ -98,7 +107,8 @@ const useCozyDialog = props => {
     id,
     fullScreen,
     dividerProps,
-    dialogActionsProps
+    dialogActionsProps,
+    dialogContentProps
   }
 }
 

package/react/MuiCozyTheme/makeOverrides.js

@@ -442,6 +442,17 @@ const makeOverrides = theme => ({
       [theme.breakpoints.down('sm')]: {
         padding: '24px 16px 0'
       },
+      '&.disableGutters': {
+        padding: 0,
+        '& .dialogContentInner': {
+          marginBottom: 0
+        },
+        '& .dialogTitleFluidContainer': {
+          marginLeft: 0,
+          marginRight: 0,
+          marginTop: 0
+        }
+      },
       '& .dialogContentInner': {
         marginBottom: '24px',
         '&.withFluidActions': {

package/transpiled/react/CozyDialogs/ConfirmDialog.js

@@ -23,7 +23,8 @@ var ConfirmDialog = function ConfirmDialog(props) {
       dialogTitleProps = _useCozyDialog.dialogTitleProps,
       fullScreen = _useCozyDialog.fullScreen,
       id = _useCozyDialog.id,
-      dialogActionsProps = _useCozyDialog.dialogActionsProps;
+      dialogActionsProps = _useCozyDialog.dialogActionsProps,
+      dialogContentProps = _useCozyDialog.dialogContentProps;
 
   var onBackOrClose = onBack || onClose;
   return React.createElement(Dialog, dialogProps, !fullScreen && onClose && React.createElement(DialogCloseButton, {
@@ -35,9 +36,9 @@ var ConfirmDialog = function ConfirmDialog(props) {
   }), fullScreen && onBackOrClose && React.createElement(DialogBackButton, {
     "data-test-id": "modal-backclose-button-".concat(id),
     onClick: onBackOrClose
-  }), React.createElement(DialogContent, null, React.createElement("div", {
+  }), React.createElement(DialogContent, dialogContentProps, React.createElement("div", {
     className: "dialogContentInner withFluidActions"
-  }, React.createElement("div", {
+  }, title && React.createElement("div", {
     className: "dialogTitleFluidContainer"
   }, React.createElement(DialogTitle, dialogTitleProps, title)), content, actions && React.createElement(DialogActions, _extends({}, dialogActionsProps, {
     disableSpacing: true,

package/transpiled/react/CozyDialogs/Dialog.js

@@ -21,7 +21,8 @@ var Dialog = function Dialog(props) {
       dialogTitleProps = _useCozyDialog.dialogTitleProps,
       fullScreen = _useCozyDialog.fullScreen,
       id = _useCozyDialog.id,
-      dialogActionsProps = _useCozyDialog.dialogActionsProps;
+      dialogActionsProps = _useCozyDialog.dialogActionsProps,
+      dialogContentProps = _useCozyDialog.dialogContentProps;
 
   var onBackOrClose = onBack || onClose;
   return React.createElement(MUIDialog, dialogProps, !fullScreen && onClose && React.createElement(DialogCloseButton, {
@@ -33,7 +34,7 @@ var Dialog = function Dialog(props) {
   }), fullScreen && onBackOrClose && React.createElement(DialogBackButton, {
     "data-test-id": "modal-backclose-button-".concat(id),
     onClick: onBackOrClose
-  }), React.createElement(DialogTitle, dialogTitleProps, title), React.createElement(Divider, null), React.createElement(DialogContent, null, React.createElement("div", {
+  }), title && React.createElement(React.Fragment, null, React.createElement(DialogTitle, dialogTitleProps, title), React.createElement(Divider, null)), React.createElement(DialogContent, dialogContentProps, React.createElement("div", {
     className: "dialogContentInner withFluidActions"
   }, content, actions && React.createElement(DialogActions, _extends({}, dialogActionsProps, {
     disableSpacing: true,

package/transpiled/react/CozyDialogs/FixedActionsDialog.js

@@ -24,7 +24,8 @@ var FixedActionsDialog = function FixedActionsDialog(props) {
       dialogTitleProps = _useCozyDialog.dialogTitleProps,
       fullScreen = _useCozyDialog.fullScreen,
       id = _useCozyDialog.id,
-      dialogActionsProps = _useCozyDialog.dialogActionsProps;
+      dialogActionsProps = _useCozyDialog.dialogActionsProps,
+      dialogContentProps = _useCozyDialog.dialogContentProps;
 
   var onBackOrClose = onBack || onClose;
   return React.createElement(Dialog, dialogProps, !fullScreen && onClose && React.createElement(DialogCloseButton, {
@@ -36,9 +37,9 @@ var FixedActionsDialog = function FixedActionsDialog(props) {
   }), fullScreen && onBackOrClose && React.createElement(DialogBackButton, {
     "data-test-id": "modal-backclose-button-".concat(id),
     onClick: onBackOrClose
-  }), React.createElement(DialogContent, null, React.createElement("div", {
+  }), React.createElement(DialogContent, dialogContentProps, React.createElement("div", {
     className: "dialogContentInner"
-  }, React.createElement("div", {
+  }, title && React.createElement("div", {
     className: "dialogTitleFluidContainer"
   }, React.createElement(DialogTitle, dialogTitleProps, title)), content)), React.createElement(Divider, null), actions && React.createElement(DialogActions, _extends({}, dialogActionsProps, {
     disableSpacing: true,

package/transpiled/react/CozyDialogs/FixedDialog.js

@@ -21,7 +21,8 @@ var FixedDialog = function FixedDialog(props) {
       dialogTitleProps = _useCozyDialog.dialogTitleProps,
       fullScreen = _useCozyDialog.fullScreen,
       id = _useCozyDialog.id,
-      dialogActionsProps = _useCozyDialog.dialogActionsProps;
+      dialogActionsProps = _useCozyDialog.dialogActionsProps,
+      dialogContentProps = _useCozyDialog.dialogContentProps;
 
   var onBackOrClose = onBack || onClose;
   return React.createElement(Dialog, dialogProps, !fullScreen && onClose && React.createElement(DialogCloseButton, {
@@ -33,7 +34,7 @@ var FixedDialog = function FixedDialog(props) {
   }), fullScreen && onBackOrClose && React.createElement(DialogBackButton, {
     "data-test-id": "modal-backclose-button-".concat(id),
     onClick: onBackOrClose
-  }), React.createElement(DialogTitle, dialogTitleProps, title), React.createElement(Divider, null), React.createElement(DialogContent, null, React.createElement("div", {
+  }), title && React.createElement(React.Fragment, null, React.createElement(DialogTitle, dialogTitleProps, title), React.createElement(Divider, null)), React.createElement(DialogContent, dialogContentProps, React.createElement("div", {
     className: "dialogContentInner"
   }, content)), React.createElement(Divider, null), actions && React.createElement(DialogActions, _extends({}, dialogActionsProps, {
     disableSpacing: true,

package/transpiled/react/CozyDialogs/IllustrationDialog.js

@@ -23,7 +23,8 @@ var IllustrationDialog = function IllustrationDialog(props) {
       dialogTitleProps = _useCozyDialog.dialogTitleProps,
       id = _useCozyDialog.id,
       fullScreen = _useCozyDialog.fullScreen,
-      dialogActionsProps = _useCozyDialog.dialogActionsProps;
+      dialogActionsProps = _useCozyDialog.dialogActionsProps,
+      dialogContentProps = _useCozyDialog.dialogContentProps;
 
   var onBackOrClose = onBack || onClose;
   return React.createElement(Dialog, dialogProps, !fullScreen && onClose && React.createElement(DialogCloseButton, {
@@ -35,9 +36,9 @@ var IllustrationDialog = function IllustrationDialog(props) {
   }), fullScreen && onBackOrClose && React.createElement(DialogBackButton, {
     "data-test-id": "modal-backclose-button-".concat(id),
     onClick: onBackOrClose
-  }), React.createElement(DialogContent, null, React.createElement("div", {
+  }), React.createElement(DialogContent, dialogContentProps, React.createElement("div", {
     className: "dialogContentInner withFluidActions"
-  }, React.createElement(DialogTitle, dialogTitleProps, React.createElement("div", {
+  }, title && React.createElement(DialogTitle, dialogTitleProps, React.createElement("div", {
     className: "u-flex u-flex-justify-center"
   }, title)), content, actions && React.createElement(DialogActions, _extends({}, dialogActionsProps, {
     disableSpacing: true,

package/transpiled/react/CozyDialogs/useCozyDialog.js

@@ -28,7 +28,8 @@ var useCozyDialog = function useCozyDialog(props) {
       align = props.align,
       disableTitleAutoPadding = props.disableTitleAutoPadding,
       isFluidTitle = props.isFluidTitle,
-      otherProps = _objectWithoutProperties(props, ["size", "actions", "actionsLayout", "title", "content", "open", "opened", "onBack", "onClose", "align", "disableTitleAutoPadding", "isFluidTitle"]);
+      disableGutters = props.disableGutters,
+      otherProps = _objectWithoutProperties(props, ["size", "actions", "actionsLayout", "title", "content", "open", "opened", "onBack", "onClose", "align", "disableTitleAutoPadding", "isFluidTitle", "disableGutters"]);
 
   var _useBreakpoints = useBreakpoints(),
       isMobile = _useBreakpoints.isMobile;
@@ -89,6 +90,13 @@ var useCozyDialog = function useCozyDialog(props) {
       root: dialogActionsClassName
     }
   };
+  var dialogContentProps = {
+    classes: {
+      root: cx({
+        disableGutters: disableGutters
+      })
+    }
+  };
   return {
     dialogProps: dialogProps,
     dialogTitleProps: dialogTitleProps,
@@ -96,7 +104,8 @@ var useCozyDialog = function useCozyDialog(props) {
     id: id,
     fullScreen: fullScreen,
     dividerProps: dividerProps,
-    dialogActionsProps: dialogActionsProps
+    dialogActionsProps: dialogActionsProps,
+    dialogContentProps: dialogContentProps
   };
 };
 

package/transpiled/react/MuiCozyTheme/makeOverrides.js

@@ -416,6 +416,16 @@ var makeOverrides = function makeOverrides(theme) {
         padding: '24px 32px 0'
       }, _defineProperty(_root2, theme.breakpoints.down('sm'), {
         padding: '24px 16px 0'
+      }), _defineProperty(_root2, '&.disableGutters', {
+        padding: 0,
+        '& .dialogContentInner': {
+          marginBottom: 0
+        },
+        '& .dialogTitleFluidContainer': {
+          marginLeft: 0,
+          marginRight: 0,
+          marginTop: 0
+        }
       }), _defineProperty(_root2, '& .dialogContentInner', {
         marginBottom: '24px',
         '&.withFluidActions': _defineProperty({}, theme.breakpoints.down('sm'), {