Add appBarZDepth prop.

Author: leMaik

README.md

@@ -34,6 +34,7 @@ import FullscreenDialog from 'material-ui-fullscreen-dialog'
 | --- | --- | --- | --- |
 | actionButton | `node` | | A `FlatButton` or `IconButton` that is used as affirmative action button. |
 | appBarStyle | `object` | | Overrides the inline-styles of the app bar. | 
+| appBarZDepth | `number` | 1 | Overrides the z-depth of the app bar, will affect its shadow. This is ignored if immersive is set to `true`. |
 | children | `node` | | Children elements. |
 | closeIcon | `node` | Close icon | Icon element used for the dismissive action. This is hidden if `onRequestClose` is not set. |
 | containerStyle | `object` | | Overrides the inline-styles of the dialog's children container. |

src/FullscreenDialog.js

@@ -35,6 +35,7 @@ export default function FullscreenDialog (props, { muiTheme }) {
   const {
     actionButton,
     appBarStyle,
+    appBarZDepth,
     children,
     closeIcon,
     containerStyle,
@@ -62,7 +63,7 @@ export default function FullscreenDialog (props, { muiTheme }) {
         )}
         iconElementRight={actionButton}
         showMenuIconButton={onRequestClose != null}
-        zDepth={immersive ? 0 : undefined}
+        zDepth={immersive ? 0 : appBarZDepth}
       />
       <div style={{ ...styles.container, ...containerStyle }}>
         {children}
@@ -74,6 +75,7 @@ export default function FullscreenDialog (props, { muiTheme }) {
 FullscreenDialog.propTypes = {
   actionButton: PropTypes.node,
   appBarStyle: PropTypes.object,
+  appBarZDepth: PropTypes.oneOf([1, 2, 3, 4, 5]),
   children: PropTypes.node,
   closeIcon: PropTypes.node,
   containerStyle: PropTypes.object,
@@ -86,7 +88,8 @@ FullscreenDialog.propTypes = {
 }
 
 FullscreenDialog.defaultProps = {
-  immersive: false
+  immersive: false,
+  appBarZDepth: 1
 }
 
 FullscreenDialog.contextTypes = {

stories/index.js

@@ -55,3 +55,13 @@ storiesOf('FullscreenDialog', module)
       <img src='https://lorempixel.com/1920/1080/cats/' style={{ width: '100%' }} />
     </FullscreenDialog>
   ))
+  .add('with custom z-depth', () => themed(
+    <FullscreenDialog
+      open
+      title='Demo dialog'
+      onRequestClose={action('onRequestClose')}
+      appBarZDepth={2}
+    >
+      More shadow.
+    </FullscreenDialog>
+  ))