Merge pull request #1514 from cozy/dialog-changes

Dialog changes
cozy · Jul 31, 2020 · 952b442 · 952b442
2 parents b4aed6a + 2310811
commit 952b442
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 56 deletions.
diff --git a/react/Labs/ExperimentalDialog/Readme.md b/react/Labs/ExperimentalDialog/Readme.md
@@ -1,87 +1,108 @@
 ## Experimental Dialog
 
 ### With default Actions (mobile and desktop)
+
 ```jsx
-import ExperimentalDialog, {ExperimentalDialogTitle, ExperimentalDialogActions} from './index';
-import MuiCozyTheme from '../../MuiCozyTheme/';
+import ExperimentalDialog, {
+  ExperimentalDialogTitle,
+  ExperimentalDialogActions
+} from './index'
+import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme/'
 
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import Divider from '@material-ui/core/Divider';
-import DialogCloseButton from '../../MuiCozyTheme/Dialog/DialogCloseButton';
-import Button from '../../Button';
+import DialogContent from 'cozy-ui/transpiled/react/MuiCozyTheme/Dialog/DialogContent'
+import DialogContentText from 'cozy-ui/transpiled/react/MuiCozyTheme/Dialog/DialogContentText'
+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 })
 
-initialState = { modalOpened: isTesting()};
-<>
-<button onClick={()=>setState({ modalOpened: !state.modalOpened })}>
+initialState = { modalOpened: isTesting() }
+;<>
+  <button onClick={() => setState({ modalOpened: !state.modalOpened })}>
     Toggle modal
   </button>
-<MuiCozyTheme>
-
- <ExperimentalDialog open={state.modalOpened} onClose={() => onClose()}>
-    <DialogCloseButton onClick={() =>onClose()} />
-    <ExperimentalDialogTitle>Ada Lovelace</ExperimentalDialogTitle>
-    <Divider />
-    <DialogContent>
-      Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.
-    </DialogContent>
-    <ExperimentalDialogActions>
+  <MuiCozyTheme>
+    <ExperimentalDialog open={state.modalOpened} onClose={() => onClose()}>
+      <DialogCloseButton onClick={() => onClose()} />
+      <ExperimentalDialogTitle>Ada Lovelace</ExperimentalDialogTitle>
+      <Divider />
+      <DialogContent>
+        Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815
+        – 27 November 1852) was an English mathematician and writer, chiefly
+        known for her work on Charles Babbage's proposed mechanical
+        general-purpose computer, the Analytical Engine. She was the first to
+        recognise that the machine had applications beyond pure calculation, and
+        published the first algorithm intended to be carried out by such a
+        machine. As a result, she is often regarded as the first to recognise
+        the full potential of a "computing machine" and the first computer
+        programmer.
+      </DialogContent>
+      <ExperimentalDialogActions>
         <Button
-            theme="secondary"
-            onClick={() => onClose()}
-            label={'Close Modal'}
+          theme="secondary"
+          onClick={() => onClose()}
+          label={'Close Modal'}
         />
         <Button
-            theme="primary"
-            label={'Touch Me'}
-            onClick={() => alert('click')}
+          theme="primary"
+          label={'Touch Me'}
+          onClick={() => alert('click')}
         />
-    </ExperimentalDialogActions>
-  </ExperimentalDialog>
+      </ExperimentalDialogActions>
+    </ExperimentalDialog>
   </MuiCozyTheme>
-
-  </>
+</>
 ```
 
-
 ### With "below" Actions (mobile)
+
 ```jsx
-import ExperimentalDialog, {ExperimentalDialogTitle, ExperimentalDialogActions} from './index';
-import MuiCozyTheme from '../../MuiCozyTheme/';
+import ExperimentalDialog, {
+  ExperimentalDialogTitle,
+  ExperimentalDialogActions
+} from './index'
+import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme/'
 
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogCloseButton from '../../MuiCozyTheme/Dialog/DialogCloseButton';
-import Button from '../../Button';
+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 Button from 'cozy-ui/transpiled/react/Button'
 const onClose = () => setState({ modalOpened: !state.modalOpened })
 
-initialState = { modalOpened: isTesting()};
-<>
-<button onClick={()=>setState({ modalOpened: !state.modalOpened })}>
+initialState = { modalOpened: isTesting() }
+;<>
+  <button onClick={() => setState({ modalOpened: !state.modalOpened })}>
     Toggle modal
   </button>
-<MuiCozyTheme>
- <ExperimentalDialog open={state.modalOpened} onClose={() => onClose()}>
-    <DialogCloseButton onClick={() =>onClose()} />
-    <ExperimentalDialogTitle>Ada Lovelace</ExperimentalDialogTitle>
-    <DialogContent>
-      Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.
-    </DialogContent>
-    <ExperimentalDialogActions layout="row">
+  <MuiCozyTheme>
+    <ExperimentalDialog open={state.modalOpened} onClose={() => onClose()}>
+      <DialogCloseButton onClick={() => onClose()} />
+      <ExperimentalDialogTitle>Ada Lovelace</ExperimentalDialogTitle>
+      <DialogContent>
+        Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815
+        – 27 November 1852) was an English mathematician and writer, chiefly
+        known for her work on Charles Babbage's proposed mechanical
+        general-purpose computer, the Analytical Engine. She was the first to
+        recognise that the machine had applications beyond pure calculation, and
+        published the first algorithm intended to be carried out by such a
+        machine. As a result, she is often regarded as the first to recognise
+        the full potential of a "computing machine" and the first computer
+        programmer.
+      </DialogContent>
+      <ExperimentalDialogActions layout="row">
         <Button
-            theme="secondary"
-            onClick={() => onClose()}
-            label={'Close Modal'}
+          theme="secondary"
+          onClick={() => onClose()}
+          label={'Close Modal'}
         />
         <Button
-            theme="primary"
-            label={'Touch Me'}
-            onClick={() => alert('click')}
+          theme="primary"
+          label={'Touch Me'}
+          onClick={() => alert('click')}
         />
-    </ExperimentalDialogActions>
-  </ExperimentalDialog>
+      </ExperimentalDialogActions>
+    </ExperimentalDialog>
   </MuiCozyTheme>
 </>
 ```

diff --git a/react/MuiCozyTheme/Dialog/DialogContent.jsx b/react/MuiCozyTheme/Dialog/DialogContent.jsx
@@ -0,0 +1,3 @@
+import DialogContent from '@material-ui/core/DialogContent'
+
+export default DialogContent
diff --git a/react/MuiCozyTheme/Dialog/DialogContentText.jsx b/react/MuiCozyTheme/Dialog/DialogContentText.jsx
@@ -0,0 +1,3 @@
+import DialogContentText from '@material-ui/core/DialogContentText'
+
+export default DialogContentText
diff --git a/react/MuiCozyTheme/Divider/index.jsx b/react/MuiCozyTheme/Divider/index.jsx
@@ -0,0 +1,3 @@
+import Divider from '@material-ui/core/Divider'
+
+export default Divider
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import DialogContent from '@material-ui/core/DialogContent'

		export default DialogContent
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import DialogContentText from '@material-ui/core/DialogContentText'

		export default DialogContentText
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Divider from '@material-ui/core/Divider'

		export default Divider