[ExpansionPanel] Fix display on IE11 (#11087)

mui · Apr 21, 2018 · d2ec00d · d2ec00d
1 parent 6054e95
commit d2ec00d
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 6 deletions.
diff --git a/.size-limit b/.size-limit
@@ -9,7 +9,7 @@
     "name": "The size of all the modules of material-ui.",
     "webpack": true,
     "path": "packages/material-ui/build/index.js",
-    "limit": "101.1 KB"
+    "limit": "101.2 KB"
   },
   {
     "name": "The main bundle of the docs",

diff --git a/BACKERS.md b/BACKERS.md
@@ -117,7 +117,7 @@ Bronze Sponsors are those who have pledged $100/month to $250/month to Material-
 | Hong Yuan | Lucas Nascimento | the-noob | Thomas Hermann | Diana-Alina Olaru |
 | Daniel Faust | David Langheiter | LocalMonero | Adam Wells | Vincent Bouzeran |
 | Ashwin Hegde | Eric Schultz | Conor Dunk | Jerome Wilson | Greenlink |
-| Jolse Maginnis | asmeikal | David Auffret |
+| Jolse Maginnis | asmeikal | David Auffret | Naresh Bhatia |
 
 #### via [OpenCollective](https://opencollective.com/material-ui)
 

diff --git a/docs/src/pages/demos/expansion-panels/ControlledExpansionPanels.js b/docs/src/pages/demos/expansion-panels/ControlledExpansionPanels.js
@@ -10,7 +10,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 const styles = theme => ({
   root: {
-    flexGrow: 1,
+    width: '100%',
   },
   heading: {
     fontSize: theme.typography.pxToRem(15),
@@ -80,6 +80,17 @@ class ControlledExpansionPanels extends React.Component {
             </Typography>
           </ExpansionPanelDetails>
         </ExpansionPanel>
+        <ExpansionPanel expanded={expanded === 'panel4'} onChange={this.handleChange('panel4')}>
+          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+            <Typography className={classes.heading}>Personal data</Typography>
+          </ExpansionPanelSummary>
+          <ExpansionPanelDetails>
+            <Typography>
+              Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas
+              eros, vitae egestas augue. Duis vel est augue.
+            </Typography>
+          </ExpansionPanelDetails>
+        </ExpansionPanel>
       </div>
     );
   }

diff --git a/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js b/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js
@@ -15,7 +15,7 @@ import Divider from 'material-ui/Divider';
 
 const styles = theme => ({
   root: {
-    flexGrow: 1,
+    width: '100%',
   },
   heading: {
     fontSize: theme.typography.pxToRem(15),

diff --git a/docs/src/pages/demos/expansion-panels/SimpleExpansionPanel.js b/docs/src/pages/demos/expansion-panels/SimpleExpansionPanel.js
@@ -10,7 +10,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 const styles = theme => ({
   root: {
-    flexGrow: 1,
+    width: '100%',
   },
   heading: {
     fontSize: theme.typography.pxToRem(15),

diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
@@ -8,6 +8,18 @@ import Paper from '../Paper';
 import withStyles from '../styles/withStyles';
 import { isMuiElement } from '../utils/reactHelpers';
 
+// Workaround https://github.com/jsdom/jsdom/issues/2026
+const edgeFix =
+  typeof window !== 'undefined' && /jsdom/.test(window.navigator.userAgent)
+    ? {}
+    : {
+        // Fix a rendering issue on Edge
+        '@supports (-ms-ime-align: auto)': {
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+        },
+      };
+
 export const styles = theme => {
   const transition = {
     duration: theme.transitions.duration.shortest,
@@ -38,6 +50,7 @@ export const styles = theme => {
       '&:last-child': {
         borderBottomLeftRadius: 2,
         borderBottomRightRadius: 2,
+        ...edgeFix,
       },
       '&$expanded + &': {
         '&:before': {

diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanelDetails.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanelDetails.js
@@ -6,7 +6,6 @@ import withStyles from '../styles/withStyles';
 export const styles = theme => ({
   root: {
     display: 'flex',
-    flexGrow: 1,
     padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`,
   },
 });