cozy-ui 53.0.0 → 54.0.0

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# [54.0.0](https://github.com/cozy/cozy-ui/compare/v53.0.0...v54.0.0) (2021-09-28)
+
+
+### Bug Fixes
+
+* Add missing config properties to inverted theme ([85c9026](https://github.com/cozy/cozy-ui/commit/85c9026))
+* Correctly override DialogTitle's className in `ContactsListModal` ([69e0fa6](https://github.com/cozy/cozy-ui/commit/69e0fa6))
+
+
+### Features
+
+* Add `isFluidTitle` prop to `useCozyDialog` ([2d4f8b7](https://github.com/cozy/cozy-ui/commit/2d4f8b7))
+* Add plain background to dialogs buttons ([82a4b78](https://github.com/cozy/cozy-ui/commit/82a4b78))
+* Add tests for Dialog ([ec468db](https://github.com/cozy/cozy-ui/commit/ec468db))
+* Handle `onBack` prop on CozyDialogs ([eb86578](https://github.com/cozy/cozy-ui/commit/eb86578))
+* Rework CozyDialogs style to fit latest UI specs ([8ff3766](https://github.com/cozy/cozy-ui/commit/8ff3766))
+* Set DialogBackButton's position to absolute ([98fe795](https://github.com/cozy/cozy-ui/commit/98fe795))
+
+
+### BREAKING CHANGES
+
+* `<DialogBackButton>` is now using absolute positioning. To prevent
+`<DialogTitle>` to overlap with this button, `useCozyDialog()` handles
+its positioning with `dialogTitleProps`.
+If you use `cozy-ui/transpiled/react/Dialog` with `useCozyDialog()` but
+without `<DialogBackButton>` then you may be impacted as a left margin
+will be applied on `<DialogTitle>` on mobile, which would leave a blank
+space if no `<DialogBackButton>` is present.
+In this case, please add `disableTitleAutoPadding` to
+`useCozyDialog()` props. Then title will take all available space and
+you will be able to handle its positionning by yourself.
+```js
+const {
+  dialogTitleProps
+} = useCozyDialog({ ...props, disableTitleAutoPadding: true })
+```
+
 # [53.0.0](https://github.com/cozy/cozy-ui/compare/v52.0.1...v53.0.0) (2021-09-28)
 
 

package/package.json

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

package/react/ContactsListModal/index.jsx

@@ -27,6 +27,8 @@ import Icon from '../Icon'
 import AddContactButton from './AddContactButton'
 import EmptyMessage from './EmptyMessage'
 
+import cx from 'classnames'
+
 const thirtySeconds = 30000
 const olderThan30s = fetchPolicies.olderThan(thirtySeconds)
 
@@ -115,7 +117,9 @@ const ContactsListModal = props => {
       </CozyTheme>
       <DialogTitle
         {...dialogTitleProps}
-        className={isMobile ? 'u-p-0 u-w-100' : undefined}
+        className={cx(dialogTitleProps.className, {
+          'u-p-0 u-w-100': isMobile
+        })}
       >
         {isMobile ? (
           <>

package/react/CozyDialogs/ConfirmDialog.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import cx from 'classnames'
+import cx from 'classnames/dedupe'
 
 import useCozyDialog from './useCozyDialog'
 import Dialog, { DialogTitle, DialogActions, DialogContent } from '../Dialog'
@@ -9,14 +9,17 @@ import DialogBackButton from './DialogBackButton'
 import DialogCloseButton from './DialogCloseButton'
 
 const ConfirmDialog = props => {
-  const { onClose, title, content, actions, actionsLayout } = props
+  const { onClose, onBack, title, content, actions, actionsLayout } = props
   const {
     dialogProps,
     dialogTitleProps,
     fullScreen,
     id,
     dialogActionsProps
-  } = useCozyDialog(props)
+  } = useCozyDialog({ ...props, isFluidTitle: true })
+
+  const onBackOrClose = onBack || onClose
+
   return (
     <Dialog {...dialogProps}>
       {!fullScreen && onClose && (
@@ -25,12 +28,23 @@ const ConfirmDialog = props => {
           data-test-id={`modal-close-button-${id}`}
         />
       )}
+      {!fullScreen && onBack && (
+        <DialogBackButton
+          data-test-id={`modal-back-button-${id}`}
+          onClick={onBack}
+        />
+      )}
+      {fullScreen && onBackOrClose && (
+        <DialogBackButton
+          data-test-id={`modal-backclose-button-${id}`}
+          onClick={onBackOrClose}
+        />
+      )}
       <DialogContent>
         <div className="dialogContentInner withFluidActions">
-          <DialogTitle {...dialogTitleProps} className="dialogTitleFluid">
-            {fullScreen && onClose && <DialogBackButton onClick={onClose} />}
-            {title}
-          </DialogTitle>
+          <div className="dialogTitleFluidContainer">
+            <DialogTitle {...dialogTitleProps}>{title}</DialogTitle>
+          </div>
           {content}
           {actions && (
             <DialogActions

package/react/CozyDialogs/Dialog.jsx

@@ -10,7 +10,7 @@ import DialogBackButton from './DialogBackButton'
 import DialogCloseButton from './DialogCloseButton'
 
 const Dialog = props => {
-  const { onClose, title, content, actions, actionsLayout } = props
+  const { onClose, onBack, title, content, actions, actionsLayout } = props
   const {
     dialogProps,
     dialogTitleProps,
@@ -19,6 +19,8 @@ const Dialog = props => {
     dialogActionsProps
   } = useCozyDialog(props)
 
+  const onBackOrClose = onBack || onClose
+
   return (
     <MUIDialog {...dialogProps}>
       {!fullScreen && onClose && (
@@ -27,13 +29,19 @@ const Dialog = props => {
           data-test-id={`modal-close-button-${id}`}
         />
       )}
-      <DialogTitle
-        {...dialogTitleProps}
-        className={cx('u-ellipsis', { dialogTitleFull: !onClose })}
-      >
-        {fullScreen && onClose && <DialogBackButton onClick={onClose} />}
-        {title}
-      </DialogTitle>
+      {!fullScreen && onBack && (
+        <DialogBackButton
+          onClick={onBack}
+          data-test-id={`modal-back-button-${id}`}
+        />
+      )}
+      {fullScreen && onBackOrClose && (
+        <DialogBackButton
+          data-test-id={`modal-backclose-button-${id}`}
+          onClick={onBackOrClose}
+        />
+      )}
+      <DialogTitle {...dialogTitleProps}>{title}</DialogTitle>
       <Divider />
       <DialogContent>
         <div className="dialogContentInner withFluidActions">

package/react/CozyDialogs/DialogBackButton.jsx

@@ -1,23 +1,30 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { withStyles } from '@material-ui/core/styles'
 
 import IconButton from '../IconButton'
 import Icon from '../Icon'
 
 import PreviousIcon from '../Icons/Previous'
 
-const customStyles = () => ({
-  root: {
-    margin: '-1.1rem 0.25rem -0.9rem -0.5rem'
-  }
-})
+import styles from './styles.styl'
+import locales from './locales'
+import { createUseI18n } from '../I18n'
 
-const DialogBackButton = ({ classes, onClick }) => {
+const useI18n = createUseI18n(locales)
+
+const DialogBackButton = ({ onClick, ...props }) => {
+  const { t } = useI18n()
   return (
-    <IconButton className={classes.root} onClick={onClick}>
-      <Icon icon={PreviousIcon} />
-    </IconButton>
+    <div className={styles.DialogBackButton}>
+      <IconButton
+        onClick={onClick}
+        {...props}
+        aria-label={t('backButton')}
+        className="dialogIconButton"
+      >
+        <Icon icon={PreviousIcon} />
+      </IconButton>
+    </div>
   )
 }
 
@@ -25,4 +32,4 @@ DialogBackButton.propTypes = {
   onClick: PropTypes.func.isRequired
 }
 
-export default withStyles(customStyles)(DialogBackButton)
+export default DialogBackButton

package/react/CozyDialogs/DialogCloseButton.jsx

@@ -15,7 +15,12 @@ const CloseButton = ({ onClick, ...props }) => {
   const { t } = useI18n()
   return (
     <div className={styles.DialogCloseButton}>
-      <IconButton onClick={onClick} {...props} aria-label={t('closeButton')}>
+      <IconButton
+        onClick={onClick}
+        {...props}
+        aria-label={t('closeButton')}
+        className="dialogIconButton"
+      >
         <Icon icon={CrossMediumIcon} />
       </IconButton>
     </div>

package/react/CozyDialogs/FixedActionsDialog.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import cx from 'classnames'
+import cx from 'classnames/dedupe'
 
 import useCozyDialog from './useCozyDialog'
 import Dialog, { DialogTitle, DialogActions, DialogContent } from '../Dialog'
@@ -10,14 +10,16 @@ import DialogBackButton from './DialogBackButton'
 import DialogCloseButton from './DialogCloseButton'
 
 const FixedActionsDialog = props => {
-  const { onClose, title, content, actions, actionsLayout } = props
+  const { onClose, onBack, title, content, actions, actionsLayout } = props
   const {
     dialogProps,
     dialogTitleProps,
     fullScreen,
     id,
     dialogActionsProps
-  } = useCozyDialog(props)
+  } = useCozyDialog({ ...props, isFluidTitle: true })
+
+  const onBackOrClose = onBack || onClose
 
   return (
     <Dialog {...dialogProps}>
@@ -27,12 +29,23 @@ const FixedActionsDialog = props => {
           onClick={onClose}
         />
       )}
+      {!fullScreen && onBack && (
+        <DialogBackButton
+          data-test-id={`modal-back-button-${id}`}
+          onClick={onBack}
+        />
+      )}
+      {fullScreen && onBackOrClose && (
+        <DialogBackButton
+          data-test-id={`modal-backclose-button-${id}`}
+          onClick={onBackOrClose}
+        />
+      )}
       <DialogContent>
         <div className="dialogContentInner">
-          <DialogTitle {...dialogTitleProps} className="dialogTitleFluid">
-            {fullScreen && onClose && <DialogBackButton onClick={onClose} />}
-            {title}
-          </DialogTitle>
+          <div className="dialogTitleFluidContainer">
+            <DialogTitle {...dialogTitleProps}>{title}</DialogTitle>
+          </div>
           {content}
         </div>
       </DialogContent>

package/react/CozyDialogs/FixedDialog.jsx

@@ -10,7 +10,7 @@ import DialogBackButton from './DialogBackButton'
 import DialogCloseButton from './DialogCloseButton'
 
 const FixedDialog = props => {
-  const { onClose, title, content, actions, actionsLayout } = props
+  const { onClose, onBack, title, content, actions, actionsLayout } = props
   const {
     dialogProps,
     dialogTitleProps,
@@ -19,6 +19,8 @@ const FixedDialog = props => {
     dialogActionsProps
   } = useCozyDialog(props)
 
+  const onBackOrClose = onBack || onClose
+
   return (
     <Dialog {...dialogProps}>
       {!fullScreen && onClose && (
@@ -27,13 +29,19 @@ const FixedDialog = props => {
           onClick={onClose}
         />
       )}
-      <DialogTitle
-        {...dialogTitleProps}
-        className={cx('u-ellipsis', { dialogTitleFull: !onClose })}
-      >
-        {fullScreen && onClose && <DialogBackButton onClick={onClose} />}
-        {title}
-      </DialogTitle>
+      {!fullScreen && onBack && (
+        <DialogBackButton
+          data-test-id={`modal-back-button-${id}`}
+          onClick={onBack}
+        />
+      )}
+      {fullScreen && onBackOrClose && (
+        <DialogBackButton
+          data-test-id={`modal-backclose-button-${id}`}
+          onClick={onBackOrClose}
+        />
+      )}
+      <DialogTitle {...dialogTitleProps}>{title}</DialogTitle>
       <Divider />
       <DialogContent>
         <div className="dialogContentInner">{content}</div>

package/react/CozyDialogs/IllustrationDialog.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import cx from 'classnames'
+import cx from 'classnames/dedupe'
 
 import useCozyDialog from './useCozyDialog'
 import Dialog, { DialogTitle, DialogActions, DialogContent } from '../Dialog'
@@ -9,14 +9,16 @@ import DialogBackButton from './DialogBackButton'
 import DialogCloseButton from './DialogCloseButton'
 
 const IllustrationDialog = props => {
-  const { onClose, title, content, actions, actionsLayout } = props
+  const { onClose, onBack, title, content, actions, actionsLayout } = props
   const {
     dialogProps,
     dialogTitleProps,
     id,
     fullScreen,
     dialogActionsProps
-  } = useCozyDialog(props)
+  } = useCozyDialog({ ...props, isFluidTitle: true })
+
+  const onBackOrClose = onBack || onClose
 
   return (
     <Dialog {...dialogProps}>
@@ -26,10 +28,21 @@ const IllustrationDialog = props => {
           onClick={onClose}
         />
       )}
+      {!fullScreen && onBack && (
+        <DialogBackButton
+          onClick={onBack}
+          data-test-id={`modal-back-button-${id}`}
+        />
+      )}
+      {fullScreen && onBackOrClose && (
+        <DialogBackButton
+          data-test-id={`modal-backclose-button-${id}`}
+          onClick={onBackOrClose}
+        />
+      )}
       <DialogContent>
         <div className="dialogContentInner withFluidActions">
-          <DialogTitle {...dialogTitleProps} className="dialogTitleFluid">
-            {fullScreen && onClose && <DialogBackButton onClick={onClose} />}
+          <DialogTitle {...dialogTitleProps}>
             <div className="u-flex u-flex-justify-center">{title}</div>
           </DialogTitle>
           {content}

package/react/CozyDialogs/Readme.md

@@ -16,6 +16,13 @@ Will automatically:
 * 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
+  * 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
+  * 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
@@ -42,6 +49,10 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 import CloudIcon from "cozy-ui/transpiled/react/Icons/Cloud";
 
 const handleClose = () => setState({ modalOpened: !state.modalOpened })
+const handleBack = () => {
+  Alerter.success('Back button has been pressed', { duration: 5000 })
+  setState({ modalOpened: !state.modalOpened })
+}
 
 const DialogComponent = state.modal
 
@@ -134,7 +145,9 @@ initialState = {
   size: 'medium',
   actionsLayout: 'row',
   title: 'short',
+  disableTitleAutoPadding: false,
   withCloseButton: true,
+  withBackButton: false,
   content: 'default',
   theme: 'normal',
   align: 'middle',
@@ -147,6 +160,14 @@ initialState = {
       <StateRadio value={true} name='withCloseButton' /> yes{' '}
       <StateRadio value={false} name='withCloseButton' /> no
     </p>
+    <p>With back button:
+      <StateRadio value={true} name='withBackButton' /> yes{' '}
+      <StateRadio value={false} name='withBackButton' /> no
+    </p>
+    <p>Disable Title auto-positionning:
+      <StateRadio value={true} name='disableTitleAutoPadding' /> yes{' '}
+      <StateRadio value={false} name='disableTitleAutoPadding' /> no
+    </p>
     <p>Title:
       <StateRadio value='short' name='title' /> short{' '}
       <StateRadio value='long' name='title' /> long
@@ -177,6 +198,8 @@ initialState = {
       size={DialogComponent !== ConfirmDialog ? state.size : undefined}
       open={state.modalOpened}
       onClose={state.withCloseButton ? handleClose : undefined}
+      onBack={state.withBackButton ? handleBack : undefined}
+      disableTitleAutoPadding={state.disableTitleAutoPadding}
       align={state.align}
       title={DialogComponent !== IllustrationDialog && state.title === "long"
         ? `${dialogTitles[DialogComponent.name]} - ${content.ada.short}`

package/react/CozyDialogs/dialogPropTypes.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 export default {
   open: PropTypes.bool.isRequired,
   onClose: PropTypes.func,
+  onBack: PropTypes.func,
+  disableTitleAutoPadding: PropTypes.bool,
   title: PropTypes.node,
   content: PropTypes.node,
   actions: PropTypes.node,

package/react/CozyDialogs/locales.js

@@ -1,11 +1,14 @@
 export default {
   en: {
-    closeButton: 'Close'
+    closeButton: 'Close',
+    backButton: 'Back'
   },
   fr: {
-    closeButton: 'Fermer'
+    closeButton: 'Fermer',
+    backButton: 'Retour'
   },
   es: {
-    closeButton: 'Cerrar'
+    closeButton: 'Cerrar',
+    backButton: 'Atrás'
   }
 }

package/react/CozyDialogs/styles.styl

@@ -2,9 +2,18 @@
 
 .DialogCloseButton
     position absolute
-    top 0.75rem
-    right 0.75rem
+    top 1.15rem
+    right 1.15rem
     z-index var(--zIndex-modal) //needed for an iOS bug https://github.com/cozy/cozy-ui/pull/1790
     +small-screen()
         top 0.25rem
         right 0.25rem
+
+.DialogBackButton
+    position absolute
+    top 1.15rem
+    left 1.15rem
+    z-index var(--zIndex-modal) //needed for an iOS bug https://github.com/cozy/cozy-ui/pull/1790
+    +small-screen()
+        top 0.25rem
+        left 0.25rem

package/react/CozyDialogs/testing.js

@@ -23,3 +23,17 @@ export const getCloseButton = dialogRoot => {
     x => x.dataset.testId && x.dataset.testId.includes('modal-close-button')
   )
 }
+
+export const getBackButton = dialogRoot => {
+  const buttons = within(dialogRoot).getAllByRole('button')
+  return buttons.find(
+    x => x.dataset.testId && x.dataset.testId.includes('modal-back-button')
+  )
+}
+
+export const getBackCloseButton = dialogRoot => {
+  const buttons = within(dialogRoot).getAllByRole('button')
+  return buttons.find(
+    x => x.dataset.testId && x.dataset.testId.includes('modal-backclose-button')
+  )
+}

package/react/CozyDialogs/testing.spec.jsx

@@ -3,14 +3,33 @@ import { render, fireEvent } from '@testing-library/react'
 
 import Dialog from './Dialog'
 
-import { getDialog, getCloseButton } from './testing'
-import { BreakpointsProvider } from '../hooks/useBreakpoints'
+import {
+  getDialog,
+  getCloseButton,
+  getBackButton,
+  getBackCloseButton
+} from './testing'
+import useBreakpoints, { BreakpointsProvider } from '../hooks/useBreakpoints'
+
+jest.mock('../hooks/useBreakpoints', () => ({
+  ...jest.requireActual('../hooks/useBreakpoints'),
+  __esModule: true,
+  default: jest.fn(),
+  useBreakpoints: jest.fn()
+}))
 
 describe('testing utils for dialog', () => {
-  const setup = ({ onClose } = {}) => {
+  const setup = ({ isMobile = false, onClose, onBack } = {}) => {
+    useBreakpoints.mockReturnValue({ isMobile })
     const root = render(
       <BreakpointsProvider>
-        <Dialog open title="Title" content="Content" onClose={onClose} />
+        <Dialog
+          open
+          title="Title"
+          content="Content"
+          onClose={onClose}
+          onBack={onBack}
+        />
       </BreakpointsProvider>
     )
     return { root }
@@ -30,4 +49,69 @@ describe('testing utils for dialog', () => {
     fireEvent.click(closeBtn)
     expect(onClose).toHaveBeenCalled()
   })
+
+  it('should call onBack', () => {
+    const onBack = jest.fn()
+    const { root } = setup({ onBack })
+    const dialog = getDialog(root)
+    const backBtn = getBackButton(dialog)
+    fireEvent.click(backBtn)
+    expect(onBack).toHaveBeenCalled()
+  })
+
+  it('should call onBack when back and close are defined on mobile', () => {
+    const onClose = jest.fn()
+    const onBack = jest.fn()
+    const { root } = setup({ onBack, onClose, isMobile: true })
+    const dialog = getDialog(root)
+
+    const backCloseBtn = getBackCloseButton(dialog)
+    const backBtn = getBackButton(dialog)
+    const closeBtn = getCloseButton(dialog)
+
+    expect(backCloseBtn).toBeDefined()
+    expect(backBtn).toBeUndefined()
+    expect(closeBtn).toBeUndefined()
+
+    fireEvent.click(backCloseBtn)
+    expect(onBack).toHaveBeenCalled()
+  })
+
+  it('should call onClose when only close is defined on mobile', () => {
+    const onClose = jest.fn()
+    const { root } = setup({ onClose, isMobile: true })
+    const dialog = getDialog(root)
+
+    const backCloseBtn = getBackCloseButton(dialog)
+    const backBtn = getBackButton(dialog)
+    const closeBtn = getCloseButton(dialog)
+
+    expect(backCloseBtn).toBeDefined()
+    expect(backBtn).toBeUndefined()
+    expect(closeBtn).toBeUndefined()
+
+    fireEvent.click(backCloseBtn)
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  it('should be able to call onBack or onClose when back and close are defined on desktop', () => {
+    const onClose = jest.fn()
+    const onBack = jest.fn()
+    const { root } = setup({ onBack, onClose })
+    const dialog = getDialog(root)
+
+    const backCloseBtn = getBackCloseButton(dialog)
+    const backBtn = getBackButton(dialog)
+    const closeBtn = getCloseButton(dialog)
+
+    expect(backCloseBtn).toBeUndefined()
+    expect(backBtn).toBeDefined()
+    expect(closeBtn).toBeDefined()
+
+    fireEvent.click(backBtn)
+    expect(onBack).toHaveBeenCalled()
+
+    fireEvent.click(closeBtn)
+    expect(onClose).toHaveBeenCalled()
+  })
 })

package/react/CozyDialogs/useCozyDialog.js

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import useBreakpoints from '../hooks/useBreakpoints'
 import DialogTransition from './DialogTransition'
+import cx from 'classnames'
 
 let globalId = 0
 
@@ -21,8 +22,11 @@ const useCozyDialog = props => {
     content, // eslint-disable-line no-unused-vars
     open,
     opened,
+    onBack,
     onClose,
     align,
+    disableTitleAutoPadding,
+    isFluidTitle,
     ...otherProps
   } = props
   const { isMobile } = useBreakpoints()
@@ -52,10 +56,18 @@ const useCozyDialog = props => {
     }
   }
 
+  const showCloseButton = !fullScreen && onClose
+  const showBackButton = onBack || (fullScreen && onClose) // back and close buttons are merged in fullScreen
+
   const dialogTitleProps = {
     id: `modal-title-${id}`,
     disableTypography: true,
-    className: 'u-ellipsis'
+    className: cx({
+      'u-ellipsis': !isFluidTitle,
+      dialogTitleFluid: isFluidTitle,
+      dialogTitleWithClose: showCloseButton && !disableTitleAutoPadding,
+      dialogTitleWithBack: showBackButton && !disableTitleAutoPadding
+    })
   }
 
   const listItemClassName = 'listItem--dialog'