From 24974988bdf1221ba19bd8fea2c91c93859db35a Mon Sep 17 00:00:00 2001
From: leMaik <an@maik.tk>
Date: Sat, 16 Dec 2017 15:35:07 +0100
Subject: [PATCH] Add documentation for the styleguide.

---
 src/FullscreenDialog.js | 43 +++++++++++++++++++++++++++++++++---
 src/FullscreenDialog.md | 49 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 89 insertions(+), 3 deletions(-)
 create mode 100644 src/FullscreenDialog.md

diff --git a/src/FullscreenDialog.js b/src/FullscreenDialog.js
index de8fdb3..8c0d14b 100644
--- a/src/FullscreenDialog.js
+++ b/src/FullscreenDialog.js
@@ -58,7 +58,7 @@ export default function FullscreenDialog (props, { muiTheme }) {
         style={{ ...styles.appBar, ...appBarStyle }}
         iconElementLeft={(
           <IconButton onClick={onRequestClose}>
-            {closeIcon || <NavigationCloseIcon />}
+            {closeIcon}
           </IconButton>
         )}
         iconElementRight={actionButton}
@@ -73,23 +73,60 @@ export default function FullscreenDialog (props, { muiTheme }) {
 }
 
 FullscreenDialog.propTypes = {
+  /**
+   * A `FlatButton` or `IconButton` that is used as affirmative action button.
+   */
   actionButton: PropTypes.node,
+  /**
+   * Overrides the inline-styles of the app bar.
+   */
   appBarStyle: PropTypes.object,
+  /**
+   * Overrides the z-depth of the app bar, will affect its shadow. This is ignored if immersive is set to `true`.
+   */
   appBarZDepth: PropTypes.oneOf([0, 1, 2, 3, 4, 5]),
+  /**
+   * Children elements.
+   */
   children: PropTypes.node,
+  /**
+   * Icon element used for the dismissive action. This is hidden if `onRequestClose` is not set.
+   */
   closeIcon: PropTypes.node,
+  /**
+   * Overrides the inline-styles of the dialog's children container.
+   */
   containerStyle: PropTypes.object,
+  /**
+   *  Toggles the immersive mode. If set to `true`, the app bar has a semi-transparent gradient and overlays the content.
+   */
   immersive: PropTypes.bool,
+  /**
+   * Callback that is invoked when the dismissive action button is touched.
+   */
   onRequestClose: PropTypes.func,
+  /**
+   * Controls whether the dialog is opened or not.
+   */
   open: PropTypes.bool.isRequired,
+  /**
+   * Overrides the inline-styles of the dialog's root element.
+   */
   style: PropTypes.object,
+  /**
+   * The title of the dialog.
+   */
   title: PropTypes.string,
+  /**
+   * Overrides the inline-styles of the app bar's title element.
+   */
   titleStyle: PropTypes.object
 }
 
 FullscreenDialog.defaultProps = {
-  immersive: false,
-  appBarZDepth: 1
+  appBarZDepth: 1,
+  closeIcon: <NavigationCloseIcon />,
+  immersive: false
 }
 
 FullscreenDialog.contextTypes = {
diff --git a/src/FullscreenDialog.md b/src/FullscreenDialog.md
new file mode 100644
index 0000000..592fdd4
--- /dev/null
+++ b/src/FullscreenDialog.md
@@ -0,0 +1,49 @@
+This is a fullscreen dialog with a button on the right.
+
+```
+const RaisedButton = require('material-ui/RaisedButton').default;
+const FlatButton = require('material-ui/FlatButton').default;
+
+<div>
+  <FullscreenDialog
+    open={state.open}
+    onRequestClose={(...args) => {
+      setState({ open: false })
+    }}
+    title='Demo dialog'
+    actionButton={<FlatButton
+      label='Done'
+      onClick={() => setState({ open: false })}
+    />}
+  />
+
+  <RaisedButton
+    onClick={() => setState({ open: true })}
+    label='Open dialog'
+  />
+</div>
+```
+
+The fullscreen dialog also supports an _immersive mode_ that makes the app bar transparent.
+
+```
+const RaisedButton = require('material-ui/RaisedButton').default;
+
+<div>
+  <FullscreenDialog
+    open={state.open}
+    onRequestClose={(...args) => {
+      setState({ open: false })
+    }}
+    title='Picture of a cat'
+    immersive
+  >
+    <div style={{ width: '100%', height: '100%', background: 'url(https://lorempixel.com/1920/1080/cats/)', backgroundSize: 'cover' }} />
+  </FullscreenDialog>
+
+  <RaisedButton
+    onClick={() => setState({ open: true })}
+    label='Show cat'
+  />
+</div>
+```
\ No newline at end of file