From cb1fbd39b38a23f749a7d96a242be9f6e4b09c31 Mon Sep 17 00:00:00 2001
From: Pavel Pomerantsev <pomerantsevp@gmail.com>
Date: Fri, 1 May 2015 23:00:00 +0300
Subject: [PATCH] Use a single div for Paper

In a conversation with Hai Nguyen (@hai-cea), he confirmed that the
only reason for creating an inner div was preserving the two shadows.
Since it's possible in CSS to apply two or more shadows to a single
element, such nested structure is in my opinion redundant.
The order of shadows matters: shadows for an element are applied
top to bottom (first one goes on top), we had to put the child's
shadows first.
---
 .../app/components/pages/components/paper.jsx | 60 +++++--------------
 src/paper.jsx                                 | 54 +++--------------
 2 files changed, 24 insertions(+), 90 deletions(-)

diff --git a/docs/src/app/components/pages/components/paper.jsx b/docs/src/app/components/pages/components/paper.jsx
index 2450fe660498be..c263b368d32128 100644
--- a/docs/src/app/components/pages/components/paper.jsx
+++ b/docs/src/app/components/pages/components/paper.jsx
@@ -68,23 +68,6 @@ class PaperPage extends React.Component {
             header: 'default: false',
             desc: 'Set to true to generate a circlular paper container.'
           },
-          {
-            name: 'innerClassName',
-            type: 'string',
-            header: 'optional',
-            desc: 'The paper container consists of an outer div and inner div. ' + 
-                  'This one done in order to achieve Material Design\'s shadows. ' + 
-                  'It\'s sometimes helpful to assign an className to the inner ' +
-                  'div for styling. This property is the className for the inner ' +
-                  'div.'
-          },
-          {
-            name: 'innerStyle',
-            type: 'string',
-            header: 'optional',
-            desc: 'Similiar to innerClassName. Overrides the inline-style of ' +
-                  'the inner div.'
-          },
           {
             name: 'rounded',
             type: 'bool',
@@ -96,8 +79,7 @@ class PaperPage extends React.Component {
             name: 'style',
             type: 'object',
             header: 'optional',
-            desc: 'Override the inline-styles of Paper\'s root element (its ' +
-                  'outer div).'
+            desc: 'Override the inline-styles of Paper\'s root element.'
           },
           {
             name: 'zDepth',
@@ -106,16 +88,6 @@ class PaperPage extends React.Component {
             desc: 'This number represents the zDepth of the paper shadow.'
           }
         ]
-      },
-      {
-        name: 'Methods',
-        infoArray: [
-          {
-            name: 'getInnerContainer',
-            header: 'Paper.getInnerContainer()',
-            desc: 'Returns a reference to the inner container div.'
-          }
-        ]
       }
     ];
 
@@ -134,55 +106,55 @@ class PaperPage extends React.Component {
 
         <div className="paper-examples">
           <div className="paper-examples-group">
-      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={1}>
+      	    <Paper style={styles} className="mui-paper-container" zDepth={1}>
       	      <p>zDepth=1</p>
       	    </Paper>
-      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={2}>
+      	    <Paper style={styles} className="mui-paper-container" zDepth={2}>
       	      <p>zDepth=2</p>
       	    </Paper>
-      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={3}>
+      	    <Paper style={styles} className="mui-paper-container" zDepth={3}>
       	      <p>zDepth=3</p>
       	    </Paper>
-      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={4}>
+      	    <Paper style={styles} className="mui-paper-container" zDepth={4}>
       	      <p>zDepth=4</p>
       	    </Paper>
-      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={5}>
+      	    <Paper style={styles} className="mui-paper-container" zDepth={5}>
       	      <p>zDepth=5</p>
       	    </Paper>
           </div>
 
           <div className="paper-examples-group">
-      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={1} rounded={false}>
+      	    <Paper style={styles} className="mui-paper-container" zDepth={1} rounded={false}>
       	      <p>rounded=false</p>
       	    </Paper>
-      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={2} rounded={false}>
+      	    <Paper style={styles} className="mui-paper-container" zDepth={2} rounded={false}>
       	      <p>rounded=false</p>
       	    </Paper>
-      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={3} rounded={false}>
+      	    <Paper style={styles} className="mui-paper-container" zDepth={3} rounded={false}>
       	      <p>rounded=false</p>
       	    </Paper>
-      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={4} rounded={false}>
+      	    <Paper style={styles} className="mui-paper-container" zDepth={4} rounded={false}>
       	      <p>rounded=false</p>
       	    </Paper>
-      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={5} rounded={false}>
+      	    <Paper style={styles} className="mui-paper-container" zDepth={5} rounded={false}>
       	      <p>rounded=false</p>
       	    </Paper>
           </div>
 
           <div className="paper-examples-group">
-      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={1} circle={true}>
+      	    <Paper style={styles} className="mui-paper-container" zDepth={1} circle={true}>
       	      <p>circle=true</p>
       	    </Paper>
-      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={2} circle={true}>
+      	    <Paper style={styles} className="mui-paper-container" zDepth={2} circle={true}>
       	      <p>circle=true</p>
       	    </Paper>
-      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={3} circle={true}>
+      	    <Paper style={styles} className="mui-paper-container" zDepth={3} circle={true}>
       	      <p>circle=true</p>
       	    </Paper>
-      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={4} circle={true}>
+      	    <Paper style={styles} className="mui-paper-container" zDepth={4} circle={true}>
       	      <p>circle=true</p>
       	    </Paper>
-      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={5} circle={true}>
+      	    <Paper style={styles} className="mui-paper-container" zDepth={5} circle={true}>
       	      <p>circle=true</p>
       	    </Paper>
           </div>
diff --git a/src/paper.jsx b/src/paper.jsx
index 397b4276d7cab8..893baf9e457d8b 100644
--- a/src/paper.jsx
+++ b/src/paper.jsx
@@ -20,7 +20,6 @@ var Paper = React.createClass({
 
   getDefaultProps: function() {
     return {
-      innerClassName: '',
       rounded: true,
       zDepth: 1
     };
@@ -34,21 +33,10 @@ var Paper = React.createClass({
         boxSizing: 'border-box',
         fontFamily: this.context.muiTheme.contentFontFamily,
         WebkitTapHighlightColor: 'rgba(0,0,0,0)', 
-        boxShadow: this._getZDepthShadows(this.props.zDepth).boxShadow,
+        boxShadow: this._getZDepthShadows(this.props.zDepth),
         borderRadius: this.props.circle ? '50%' : 
                       this.props.rounded ? '2px' :
                       '0px'
-      },
-      inner: {
-        width: '100%', 
-        height: '100%',
-        boxSizing: 'border-box',
-        fontFamily: this.context.muiTheme.contentFontFamily,
-        WebkitTapHighlightColor: 'rgba(0,0,0,0)', 
-        boxShadow: this._getZDepthShadows(this.props.zDepth).bottomBoxShadow,
-        borderRadius: this.props.circle ? '50%' : 
-                      this.props.rounded ? '2px' :
-                      '0px'       
       }
     };
     return styles;
@@ -57,9 +45,7 @@ var Paper = React.createClass({
   render: function() {
     var {
       className,
-      innerClassName,
       style,
-      innerStyle,
       circle,
       rounded,
       zDepth,
@@ -69,43 +55,19 @@ var Paper = React.createClass({
 
     return (
       <div {...other} className={this.props.className} style={this.mergeAndPrefix(styles.root, this.props.style)}>
-        <div ref="innerContainer" className={this.props.innerClassName} style={this.mergeAndPrefix(styles.inner, this.props.innerStyle)}>
-          {this.props.children}
-        </div>
+        {this.props.children}
       </div>
     );
   },
 
-  getInnerContainer: function() {
-    return this.refs.innerContainer;
-  },
-
   _getZDepthShadows: function(zDepth) {
     var shadows = [
-      {
-        boxShadow: '',
-        bottomBoxShadow: '',
-      },
-      {
-        boxShadow: '0 1px 4px rgba(0, 0, 0, 0.24)',
-        bottomBoxShadow: '0 1px 6px rgba(0, 0, 0, 0.12)',
-      },
-      {
-        boxShadow: '0 3px 10px rgba(0, 0, 0, 0.23)',
-        bottomBoxShadow: '0 3px 10px rgba(0, 0, 0, 0.16)',
-      },
-      {
-        boxShadow: '0 6px 10px rgba(0, 0, 0, 0.23)',
-        bottomBoxShadow: '0 10px 30px rgba(0, 0, 0, 0.19)',
-      },
-      {
-        boxShadow: '0 10px 18px rgba(0, 0, 0, 0.22)',
-        bottomBoxShadow: '0 14px 45px rgba(0, 0, 0, 0.25)',
-      },
-      {
-        boxShadow: '0 15px 20px rgba(0, 0, 0, 0.22)',
-        bottomBoxShadow: '0 19px 60px rgba(0, 0, 0, 0.30)',
-      },
+      '',
+      '0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24)',
+      '0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23)',
+      '0 10px 30px rgba(0, 0, 0, 0.19), 0 6px 10px rgba(0, 0, 0, 0.23)',
+      '0 14px 45px rgba(0, 0, 0, 0.25), 0 10px 18px rgba(0, 0, 0, 0.22)',
+      '0 19px 60px rgba(0, 0, 0, 0.30), 0 15px 20px rgba(0, 0, 0, 0.22)'
     ];
 
     return shadows[zDepth];