From ecf0bbab2f746aadb8f6fd926181901e10e1e138 Mon Sep 17 00:00:00 2001
From: Yannick Lohse <contact@yannick-lohse.fr>
Date: Thu, 10 Sep 2020 17:38:56 +0200
Subject: [PATCH 1/3] feat: Experimental Dialog is no longer experimental

---
 docs/styleguide.config.js                     |  2 +-
 react/Dialog/DialogActions.jsx                |  9 +++
 react/Dialog/DialogTitle.jsx                  | 13 +++++
 .../ExperimentalDialog => Dialog}/Readme.md   | 42 +++++++-------
 react/Dialog/index.jsx                        | 34 +++++++++++
 react/Labs/ExperimentalDialog/index.jsx       | 56 +++++++------------
 react/__snapshots__/examples.spec.jsx.snap    |  8 +--
 react/examples.spec.jsx                       |  2 +-
 8 files changed, 101 insertions(+), 65 deletions(-)
 create mode 100644 react/Dialog/DialogActions.jsx
 create mode 100644 react/Dialog/DialogTitle.jsx
 rename react/{Labs/ExperimentalDialog => Dialog}/Readme.md (75%)
 create mode 100644 react/Dialog/index.jsx

diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js
index eda974556a..d2106c3649 100644
--- a/docs/styleguide.config.js
+++ b/docs/styleguide.config.js
@@ -87,6 +87,7 @@ module.exports = {
         '../react/Media/Media.jsx',
         '../react/MidEllipsis/index.jsx',
         '../react/Modal/index.jsx',
+        '../react/Dialog',
         '../react/OrderedList/index.jsx',
         '../react/Table/index.jsx',
         '../react/Text/index.jsx',
@@ -154,7 +155,6 @@ module.exports = {
       name: 'Labs',
       components: () => [
         '../react/Labs/GridItem',
-        '../react/Labs/ExperimentalDialog',
         '../react/Labs/IconGrid',
         '../react/Labs/CollectionField',
         '../react/Labs/PasswordInput'
diff --git a/react/Dialog/DialogActions.jsx b/react/Dialog/DialogActions.jsx
new file mode 100644
index 0000000000..a4de090deb
--- /dev/null
+++ b/react/Dialog/DialogActions.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import MUIDialogActions from '@material-ui/core/DialogActions'
+
+const DialogActions = ({ layout, children }) => {
+  const className = layout === 'row' ? { className: 'modal_actions_row' } : {}
+  return <MUIDialogActions {...className}>{children}</MUIDialogActions>
+}
+
+export default DialogActions
diff --git a/react/Dialog/DialogTitle.jsx b/react/Dialog/DialogTitle.jsx
new file mode 100644
index 0000000000..2d074e679f
--- /dev/null
+++ b/react/Dialog/DialogTitle.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import MUIDialogTitle from '@material-ui/core/DialogTitle'
+import AppTitle from '../AppTitle'
+
+const DialogTitle = ({ children }) => {
+  return (
+    <MUIDialogTitle disableTypography>
+      <AppTitle id="dialog-title">{children}</AppTitle>
+    </MUIDialogTitle>
+  )
+}
+
+export default DialogTitle
diff --git a/react/Labs/ExperimentalDialog/Readme.md b/react/Dialog/Readme.md
similarity index 75%
rename from react/Labs/ExperimentalDialog/Readme.md
rename to react/Dialog/Readme.md
index 0187884a90..e1e1ddd95f 100644
--- a/react/Labs/ExperimentalDialog/Readme.md
+++ b/react/Dialog/Readme.md
@@ -1,12 +1,11 @@
-## Experimental Dialog
+## Dialog
 
 ### With default Actions (mobile and desktop)
 
 ```jsx
-import ExperimentalDialog, {
-  ExperimentalDialogTitle,
-  ExperimentalDialogActions
-} from './index'
+import Dialog from 'cozy-ui/transpiled/react/Dialog'
+import DialogTitle from 'cozy-ui/transpiled/react/Dialog/DialogTitle'
+import DialogActions from 'cozy-ui/transpiled/react/Dialog/DialogActions'
 import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme/'
 
 import DialogContent from 'cozy-ui/transpiled/react/MuiCozyTheme/Dialog/DialogContent'
@@ -23,9 +22,9 @@ initialState = { modalOpened: isTesting() }
     Toggle modal
   </button>
   <MuiCozyTheme>
-    <ExperimentalDialog open={state.modalOpened} onClose={() => onClose()}>
+    <Dialog open={state.modalOpened} onClose={() => onClose()}>
       <DialogCloseButton onClick={() => onClose()} />
-      <ExperimentalDialogTitle>Ada Lovelace</ExperimentalDialogTitle>
+      <DialogTitle>Ada Lovelace</DialogTitle>
       <Divider />
       <DialogContent>
         Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815
@@ -38,7 +37,7 @@ initialState = { modalOpened: isTesting() }
         the full potential of a "computing machine" and the first computer
         programmer.
       </DialogContent>
-      <ExperimentalDialogActions>
+      <DialogActions>
         <Button
           theme="secondary"
           onClick={() => onClose()}
@@ -49,8 +48,8 @@ initialState = { modalOpened: isTesting() }
           label={'Touch Me'}
           onClick={() => alert('click')}
         />
-      </ExperimentalDialogActions>
-    </ExperimentalDialog>
+      </DialogActions>
+    </Dialog>
   </MuiCozyTheme>
 </>
 ```
@@ -58,10 +57,9 @@ initialState = { modalOpened: isTesting() }
 ### With "below" Actions (mobile)
 
 ```jsx
-import ExperimentalDialog, {
-  ExperimentalDialogTitle,
-  ExperimentalDialogActions
-} from './index'
+import Dialog from 'cozy-ui/transpiled/react/Dialog'
+import DialogTitle from 'cozy-ui/transpiled/react/Dialog/DialogTitle'
+import DialogActions from 'cozy-ui/transpiled/react/Dialog/DialogActions'
 import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme/'
 
 import DialogContent from 'cozy-ui/transpiled/react/MuiCozyTheme/Dialog/DialogContent'
@@ -76,9 +74,9 @@ initialState = { modalOpened: isTesting() }
     Toggle modal
   </button>
   <MuiCozyTheme>
-    <ExperimentalDialog open={state.modalOpened} onClose={() => onClose()}>
+    <Dialog open={state.modalOpened} onClose={() => onClose()}>
       <DialogCloseButton onClick={() => onClose()} />
-      <ExperimentalDialogTitle>Ada Lovelace</ExperimentalDialogTitle>
+      <DialogTitle>Ada Lovelace</DialogTitle>
       <DialogContent>
         Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815
         – 27 November 1852) was an English mathematician and writer, chiefly
@@ -90,7 +88,7 @@ initialState = { modalOpened: isTesting() }
         the full potential of a "computing machine" and the first computer
         programmer.
       </DialogContent>
-      <ExperimentalDialogActions layout="row">
+      <DialogActions layout="row">
         <Button
           theme="secondary"
           onClick={() => onClose()}
@@ -101,12 +99,12 @@ initialState = { modalOpened: isTesting() }
           label={'Touch Me'}
           onClick={() => alert('click')}
         />
-      </ExperimentalDialogActions>
-    </ExperimentalDialog>
+      </DialogActions>
+    </Dialog>
   </MuiCozyTheme>
 </>
 ```
 
-- ExperimentalDialogs have no close button, but Cozy-UI exposes `cozy-ui/transpiled/react/MuiCozyTheme/Dialog/DialogCloseButton` that can be included as a child of `<ExperimentalDialog />`.
-- Use `<ExperimentalDialog scroll="body" />` to make the whole Dialog scrollable, instead of only the `DialogContent`.
-- Use [Divider components](https://v3.material-ui.com/api/divider/) when you need to materialize the separation between `ExperimentalDialogTitle`, `DialogContent` and `ExperimentalDialogActions`.
+- Dialogs have no close button, but Cozy-UI exposes `cozy-ui/transpiled/react/MuiCozyTheme/Dialog/DialogCloseButton` that can be included as a child of `<Dialog />`.
+- Use `<Dialog scroll="body" />` to make the whole Dialog scrollable, instead of only the `DialogContent`.
+- Use [Divider components](https://v3.material-ui.com/api/divider/) when you need to materialize the separation between `DialogTitle`, `DialogContent` and `DialogActions`.
diff --git a/react/Dialog/index.jsx b/react/Dialog/index.jsx
new file mode 100644
index 0000000000..3adba53ec8
--- /dev/null
+++ b/react/Dialog/index.jsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+import MUIDialog from '@material-ui/core/Dialog'
+import withMobileDialog from '@material-ui/core/withMobileDialog'
+import PropTypes from 'prop-types'
+
+export const Dialog = props => {
+  const { onClose, fullScreen, children, open, scroll, ...otherProps } = props
+  return (
+    <MUIDialog
+      open={open}
+      onClose={onClose}
+      fullScreen={fullScreen}
+      aria-labelledby="dialog-title"
+      scroll={scroll}
+      {...otherProps}
+    >
+      {children}
+    </MUIDialog>
+  )
+}
+Dialog.defaultProps = {
+  open: true,
+  scroll: 'paper'
+}
+
+Dialog.propTypes = {
+  onClose: PropTypes.func,
+  open: PropTypes.bool,
+  fullScreen: PropTypes.bool,
+  scroll: PropTypes.oneOf(['paper', 'body'])
+}
+
+export default withMobileDialog()(Dialog)
diff --git a/react/Labs/ExperimentalDialog/index.jsx b/react/Labs/ExperimentalDialog/index.jsx
index 9ab39f6856..6d43a329dc 100644
--- a/react/Labs/ExperimentalDialog/index.jsx
+++ b/react/Labs/ExperimentalDialog/index.jsx
@@ -1,49 +1,31 @@
 import React from 'react'
 
-import Dialog from '@material-ui/core/Dialog'
-import DialogTitle from '@material-ui/core/DialogTitle'
-import DialogActions from '@material-ui/core/DialogActions'
-import withMobileDialog from '@material-ui/core/withMobileDialog'
-import PropTypes from 'prop-types'
-import AppTitle from '../../AppTitle'
+import Dialog from '../../Dialog'
+import DialogTitle from '../../Dialog/DialogTitle'
+import DialogActions from '../../Dialog/DialogActions'
+import createDepreciationLogger from '../../helpers/createDepreciationLogger'
+
+const logDepecratedExperimentalDialog = createDepreciationLogger()
 
 export const ExperimentalDialog = props => {
-  const { onClose, fullScreen, children, open, scroll, ...otherProps } = props
-  return (
-    <Dialog
-      open={open}
-      onClose={onClose}
-      fullScreen={fullScreen}
-      aria-labelledby="dialog-title"
-      scroll={scroll}
-      {...otherProps}
-    >
-      {children}
-    </Dialog>
+  logDepecratedExperimentalDialog(
+    'ExperimentalDialog is no longer Experimental. Please change the import path to "cozy-ui/transpiled/react/Dialog"'
   )
-}
-ExperimentalDialog.defaultProps = {
-  open: true,
-  scroll: 'paper'
+  return <Dialog {...props} />
 }
 
-ExperimentalDialog.propTypes = {
-  onClose: PropTypes.func,
-  open: PropTypes.bool,
-  fullScreen: PropTypes.bool,
-  scroll: PropTypes.oneOf(['paper', 'body'])
-}
-export const ExperimentalDialogTitle = ({ children }) => {
-  return (
-    <DialogTitle disableTypography>
-      <AppTitle id="dialog-title">{children}</AppTitle>
-    </DialogTitle>
+export const ExperimentalDialogTitle = props => {
+  logDepecratedExperimentalDialog(
+    'ExperimentalDialogTitle is no longer Experimental. Please change the import path to "cozy-ui/transpiled/react/Dialog/DialogTitle"'
   )
+  return <DialogTitle {...props} />
 }
 
-export const ExperimentalDialogActions = ({ layout, children }) => {
-  const className = layout === 'row' ? { className: 'modal_actions_row' } : {}
-  return <DialogActions {...className}>{children}</DialogActions>
+export const ExperimentalDialogActions = props => {
+  logDepecratedExperimentalDialog(
+    'ExperimentalDialogActions is no longer Experimental. Please change the import path to "cozy-ui/transpiled/react/Dialog/DialogActions"'
+  )
+  return <DialogActions {...props} />
 }
 
-export default withMobileDialog()(ExperimentalDialog)
+export default ExperimentalDialog
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
index c94b7426ae..2a8a05818e 100644
--- a/react/__snapshots__/examples.spec.jsx.snap
+++ b/react/__snapshots__/examples.spec.jsx.snap
@@ -2051,6 +2051,10 @@ exports[`DateMonthPicker should render examples: DateMonthPicker 1`] = `
 </div>"
 `;
 
+exports[`Dialog should render examples: Dialog 1`] = `"<div><button>Toggle modal</button></div>"`;
+
+exports[`Dialog should render examples: Dialog 2`] = `"<div><button>Toggle modal</button></div>"`;
+
 exports[`Empty should render examples: Empty 1`] = `
 "<div>
   <div style=\\"position: relative; transform: translateZ(0); height: 500px; display: flex;\\">
@@ -5417,10 +5421,6 @@ exports[`Labs/CollectionField should render examples: Labs/CollectionField 2`] =
 </div>"
 `;
 
-exports[`Labs/ExperimentalDialog should render examples: Labs/ExperimentalDialog 1`] = `"<div><button>Toggle modal</button></div>"`;
-
-exports[`Labs/ExperimentalDialog should render examples: Labs/ExperimentalDialog 2`] = `"<div><button>Toggle modal</button></div>"`;
-
 exports[`ListItemText should render examples: ListItemText 1`] = `
 "<div>
   <div class=\\"styles__c-list-text___3kc3E\\">
diff --git a/react/examples.spec.jsx b/react/examples.spec.jsx
index 6b2d9a4c35..f2737a9520 100644
--- a/react/examples.spec.jsx
+++ b/react/examples.spec.jsx
@@ -35,6 +35,7 @@ testComponent('Checkbox')
 testComponent('ContactsList')
 testComponent('ContactsListModal')
 testComponent('DateMonthPicker')
+testComponent('Dialog')
 testComponent('Empty')
 testComponent('Field')
 testComponent('Hero')
@@ -48,7 +49,6 @@ testComponent('InlineCard')
 testComponent('InputGroup')
 testComponent('Label')
 testComponent('Labs/CollectionField')
-testComponent('Labs/ExperimentalDialog')
 testComponent('ListItemText')
 testComponent('Media')
 testComponent('Menu')

From 985be0bcd7b6faff49600a82f4cf9e44751719aa Mon Sep 17 00:00:00 2001
From: Yannick Lohse <contact@yannick-lohse.fr>
Date: Thu, 10 Sep 2020 15:41:17 +0200
Subject: [PATCH 2/3] feat: All dialog components are exported from the same
 place

---
 react/Dialog/DialogCloseButton.jsx              |  3 +++
 react/Dialog/DialogContent.jsx                  |  3 +++
 react/Dialog/DialogContentText.jsx              |  3 +++
 react/Dialog/Readme.md                          | 14 ++++++--------
 react/MuiCozyTheme/Dialog/DialogCloseButton.jsx | 15 +++++++++++++--
 react/MuiCozyTheme/Dialog/DialogContent.jsx     | 15 +++++++++++++--
 react/MuiCozyTheme/Dialog/DialogContentText.jsx | 15 +++++++++++++--
 7 files changed, 54 insertions(+), 14 deletions(-)
 create mode 100644 react/Dialog/DialogCloseButton.jsx
 create mode 100644 react/Dialog/DialogContent.jsx
 create mode 100644 react/Dialog/DialogContentText.jsx

diff --git a/react/Dialog/DialogCloseButton.jsx b/react/Dialog/DialogCloseButton.jsx
new file mode 100644
index 0000000000..9f8138253b
--- /dev/null
+++ b/react/Dialog/DialogCloseButton.jsx
@@ -0,0 +1,3 @@
+import ModalCross from '../Modal/ModalCross'
+
+export default ModalCross
diff --git a/react/Dialog/DialogContent.jsx b/react/Dialog/DialogContent.jsx
new file mode 100644
index 0000000000..084f1d7a16
--- /dev/null
+++ b/react/Dialog/DialogContent.jsx
@@ -0,0 +1,3 @@
+import DialogContent from '@material-ui/core/DialogContent'
+
+export default DialogContent
diff --git a/react/Dialog/DialogContentText.jsx b/react/Dialog/DialogContentText.jsx
new file mode 100644
index 0000000000..94a7812bca
--- /dev/null
+++ b/react/Dialog/DialogContentText.jsx
@@ -0,0 +1,3 @@
+import DialogContentText from '@material-ui/core/DialogContentText'
+
+export default DialogContentText
diff --git a/react/Dialog/Readme.md b/react/Dialog/Readme.md
index e1e1ddd95f..bbc88840ce 100644
--- a/react/Dialog/Readme.md
+++ b/react/Dialog/Readme.md
@@ -7,11 +7,10 @@ import Dialog from 'cozy-ui/transpiled/react/Dialog'
 import DialogTitle from 'cozy-ui/transpiled/react/Dialog/DialogTitle'
 import DialogActions from 'cozy-ui/transpiled/react/Dialog/DialogActions'
 import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme/'
-
-import DialogContent from 'cozy-ui/transpiled/react/MuiCozyTheme/Dialog/DialogContent'
-import DialogContentText from 'cozy-ui/transpiled/react/MuiCozyTheme/Dialog/DialogContentText'
+import DialogContent from 'cozy-ui/transpiled/react/Dialog/DialogContent'
+import DialogContentText from 'cozy-ui/transpiled/react/Dialog/DialogContentText'
+import DialogCloseButton from 'cozy-ui/transpiled/react/Dialog/DialogCloseButton'
 import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
-import DialogCloseButton from 'cozy-ui/transpiled/react/MuiCozyTheme/Dialog/DialogCloseButton'
 import Button from 'cozy-ui/transpiled/react/Button'
 
 const onClose = () => setState({ modalOpened: !state.modalOpened })
@@ -61,10 +60,9 @@ import Dialog from 'cozy-ui/transpiled/react/Dialog'
 import DialogTitle from 'cozy-ui/transpiled/react/Dialog/DialogTitle'
 import DialogActions from 'cozy-ui/transpiled/react/Dialog/DialogActions'
 import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme/'
-
-import DialogContent from 'cozy-ui/transpiled/react/MuiCozyTheme/Dialog/DialogContent'
-import DialogContentText from 'cozy-ui/transpiled/react/MuiCozyTheme/Dialog/DialogContentText'
-import DialogCloseButton from 'cozy-ui/transpiled/react/MuiCozyTheme/Dialog/DialogCloseButton'
+import DialogContent from 'cozy-ui/transpiled/react/Dialog/DialogContent'
+import DialogContentText from 'cozy-ui/transpiled/react/Dialog/DialogContentText'
+import DialogCloseButton from 'cozy-ui/transpiled/react/Dialog/DialogCloseButton'
 import Button from 'cozy-ui/transpiled/react/Button'
 const onClose = () => setState({ modalOpened: !state.modalOpened })
 
diff --git a/react/MuiCozyTheme/Dialog/DialogCloseButton.jsx b/react/MuiCozyTheme/Dialog/DialogCloseButton.jsx
index 7e64a1c67a..a6734bdfb0 100644
--- a/react/MuiCozyTheme/Dialog/DialogCloseButton.jsx
+++ b/react/MuiCozyTheme/Dialog/DialogCloseButton.jsx
@@ -1,3 +1,14 @@
-import ModalCross from '../../Modal/ModalCross'
+import React from 'react'
+import DialogCloseButton from '../../Dialog/DialogCloseButton'
+import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 
-export default ModalCross
+const logDepecratedMUIDialog = createDepreciationLogger()
+
+const DeprecatedDialogCloseButton = props => {
+  logDepecratedMUIDialog(
+    'DialogCloseButton is now exported from the cozy-ui Dialog folder. Please change the import path to "cozy-ui/transpiled/react/Dialog/DialogCloseButton"'
+  )
+  return <DialogCloseButton {...props} />
+}
+
+export default DeprecatedDialogCloseButton
diff --git a/react/MuiCozyTheme/Dialog/DialogContent.jsx b/react/MuiCozyTheme/Dialog/DialogContent.jsx
index 084f1d7a16..bcf6d26dba 100644
--- a/react/MuiCozyTheme/Dialog/DialogContent.jsx
+++ b/react/MuiCozyTheme/Dialog/DialogContent.jsx
@@ -1,3 +1,14 @@
-import DialogContent from '@material-ui/core/DialogContent'
+import React from 'react'
+import DialogContent from '../../Dialog/DialogContent'
+import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 
-export default DialogContent
+const logDepecratedMUIDialog = createDepreciationLogger()
+
+const OldDialogContent = props => {
+  logDepecratedMUIDialog(
+    'DialogContent is now exported from the cozy-ui Dialog folder. Please change the import path to "cozy-ui/transpiled/react/Dialog/DialogContent"'
+  )
+  return <DialogContent {...props} />
+}
+
+export default OldDialogContent
diff --git a/react/MuiCozyTheme/Dialog/DialogContentText.jsx b/react/MuiCozyTheme/Dialog/DialogContentText.jsx
index 94a7812bca..0294107833 100644
--- a/react/MuiCozyTheme/Dialog/DialogContentText.jsx
+++ b/react/MuiCozyTheme/Dialog/DialogContentText.jsx
@@ -1,3 +1,14 @@
-import DialogContentText from '@material-ui/core/DialogContentText'
+import React from 'react'
+import DialogContentText from '../../Dialog/DialogContentText'
+import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 
-export default DialogContentText
+const logDepecratedMUIDialog = createDepreciationLogger()
+
+const OldDialogContentText = props => {
+  logDepecratedMUIDialog(
+    'DialogContentText is now exported from the cozy-ui Dialog folder. Please change the import path to "cozy-ui/transpiled/react/Dialog/DialogContentText"'
+  )
+  return <DialogContentText {...props} />
+}
+
+export default OldDialogContentText

From 217dbeeb8575053c94047a73cb7860398d00f029 Mon Sep 17 00:00:00 2001
From: Yannick Lohse <contact@yannick-lohse.fr>
Date: Fri, 11 Sep 2020 14:58:02 +0200
Subject: [PATCH 3/3] feat: Export other dialog components from main file

---
 react/Dialog/index.jsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/react/Dialog/index.jsx b/react/Dialog/index.jsx
index 3adba53ec8..f3006e9a86 100644
--- a/react/Dialog/index.jsx
+++ b/react/Dialog/index.jsx
@@ -32,3 +32,9 @@ Dialog.propTypes = {
 }
 
 export default withMobileDialog()(Dialog)
+
+export { default as DialogActions } from './DialogActions'
+export { default as DialogCloseButton } from './DialogCloseButton'
+export { default as DialogContent } from './DialogContent'
+export { default as DialogContentText } from './DialogContentText'
+export { default as DialogTitle } from './DialogTitle'