Repository: mui/material-ui (TypeScript)
Date: 2019-01-23 06:01:14+00:00
Task type: Bug Fix

Issue:
[Accordion] square prop not working
As tittle says when i want to set square property to true on ExpansionPanel, nothing changes. Panel is still rounded.

| Tech         | Version |
|--------------|---------|
| Material-UI  | v3.9.0  |
| React        |  16.7.0  |
| Browser      |   Chrome   |




Issue discussion:
@rpkRED Yes, you are right, the square property is ignored. We should be able to change the expansion panel implementation a bit to make it work. What do you think of these changes?

```diff
--- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
+++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
@@ -43,23 +43,28 @@ export const styles = theme => {
         transition: theme.transitions.create(['opacity', 'background-color'], transition),
       },
       '&:first-child': {
-        borderTopLeftRadius: theme.shape.borderRadius,
-        borderTopRightRadius: theme.shape.borderRadius,
         '&:before': {
           display: 'none',
         },
       },
-      '&:last-child': {
-        borderBottomLeftRadius: theme.shape.borderRadius,
-        borderBottomRightRadius: theme.shape.borderRadius,
-        ...edgeFix,
-      },
       '&$expanded + &': {
         '&:before': {
           display: 'none',
         },
       },
     },
+    rounded: {
+      borderRadius: 0,
+      '&:first-child': {
+        borderTopLeftRadius: theme.shape.borderRadius,
+        borderTopRightRadius: theme.shape.borderRadius,
+      },
+      '&:last-child': {
+        borderBottomLeftRadius: theme.shape.borderRadius,
+        borderBottomRightRadius: theme.shape.borderRadius,
+        ...edgeFix,
+      },
+    },
     /* Styles applied to the root element if `expanded={true}`. */
     expanded: {
       margin: '16px 0',
@@ -113,19 +118,11 @@ class ExpansionPanel extends React.Component {
       disabled,
       expanded: expandedProp,
       onChange,
+      square,
       ...other
     } = this.props;
     const expanded = this.isControlled ? expandedProp : this.state.expanded;

-    const className = classNames(
-      classes.root,
-      {
-        [classes.expanded]: expanded,
-        [classes.disabled]: disabled,
-      },
-      classNameProp,
-    );
-
     let summary = null;

     const children = React.Children.map(childrenProp, child => {
@@ -160,7 +157,20 @@ class ExpansionPanel extends React.Component {
       : null;

     return (
-      <Paper className={className} elevation={1} square {...other}>
+      <Paper
+        className={classNames(
+          classes.root,
+          {
+            [classes.expanded]: expanded,
+            [classes.disabled]: disabled,
+            [classes.rounded]: !square,
+          },
+          classNameProp,
+        )}
+        elevation={1}
+        square={square}
+        {...other}
+      >
         {summary}
         <Collapse in={expanded} timeout="auto" {...CollapseProps} {...CollapsePropsProp}>
           {children}
```
Do you want to work on the problem? :)
Sure why not, and changes seems good to me. Can i get some hints on what is procedure, because I never collaborated on online project?
You can read our [CONTRIBUTING.md](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) :).

Solution patch:
diff --git a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js
--- a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js
+++ b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js
@@ -62,7 +62,11 @@ class CustomizedExpansionPanel extends React.Component {
     const { expanded } = this.state;
     return (
       <div>
-        <ExpansionPanel expanded={expanded === 'panel1'} onChange={this.handleChange('panel1')}>
+        <ExpansionPanel
+          square
+          expanded={expanded === 'panel1'}
+          onChange={this.handleChange('panel1')}
+        >
           <ExpansionPanelSummary>
             <Typography>Collapsible Group Item #1</Typography>
           </ExpansionPanelSummary>
@@ -74,7 +78,11 @@ class CustomizedExpansionPanel extends React.Component {
             </Typography>
           </ExpansionPanelDetails>
         </ExpansionPanel>
-        <ExpansionPanel expanded={expanded === 'panel2'} onChange={this.handleChange('panel2')}>
+        <ExpansionPanel
+          square
+          expanded={expanded === 'panel2'}
+          onChange={this.handleChange('panel2')}
+        >
           <ExpansionPanelSummary>
             <Typography>Collapsible Group Item #2</Typography>
           </ExpansionPanelSummary>
@@ -86,7 +94,11 @@ class CustomizedExpansionPanel extends React.Component {
             </Typography>
           </ExpansionPanelDetails>
         </ExpansionPanel>
-        <ExpansionPanel expanded={expanded === 'panel3'} onChange={this.handleChange('panel3')}>
+        <ExpansionPanel
+          square
+          expanded={expanded === 'panel3'}
+          onChange={this.handleChange('panel3')}
+        >
           <ExpansionPanelSummary>
             <Typography>Collapsible Group Item #3</Typography>
           </ExpansionPanelSummary>
diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.d.ts b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.d.ts
--- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.d.ts
+++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.d.ts
@@ -12,7 +12,7 @@ export interface ExpansionPanelProps
   onChange?: (event: React.ChangeEvent<{}>, expanded: boolean) => void;
 }
 
-export type ExpansionPanelClassKey = 'root' | 'expanded' | 'disabled';
+export type ExpansionPanelClassKey = 'root' | 'rounded' | 'expanded' | 'disabled';
 
 declare const ExpansionPanel: React.ComponentType<ExpansionPanelProps>;
 
diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
--- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
+++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
@@ -43,23 +43,29 @@ export const styles = theme => {
         transition: theme.transitions.create(['opacity', 'background-color'], transition),
       },
       '&:first-child': {
-        borderTopLeftRadius: theme.shape.borderRadius,
-        borderTopRightRadius: theme.shape.borderRadius,
         '&:before': {
           display: 'none',
         },
       },
-      '&:last-child': {
-        borderBottomLeftRadius: theme.shape.borderRadius,
-        borderBottomRightRadius: theme.shape.borderRadius,
-        ...edgeFix,
-      },
       '&$expanded + &': {
         '&:before': {
           display: 'none',
         },
       },
     },
+    /* Styles applied to the root element if `square={false}`. */
+    rounded: {
+      borderRadius: 0,
+      '&:first-child': {
+        borderTopLeftRadius: theme.shape.borderRadius,
+        borderTopRightRadius: theme.shape.borderRadius,
+      },
+      '&:last-child': {
+        borderBottomLeftRadius: theme.shape.borderRadius,
+        borderBottomRightRadius: theme.shape.borderRadius,
+        ...edgeFix,
+      },
+    },
     /* Styles applied to the root element if `expanded={true}`. */
     expanded: {
       margin: '16px 0',
@@ -113,19 +119,11 @@ class ExpansionPanel extends React.Component {
       disabled,
       expanded: expandedProp,
       onChange,
+      square,
       ...other
     } = this.props;
     const expanded = this.isControlled ? expandedProp : this.state.expanded;
 
-    const className = classNames(
-      classes.root,
-      {
-        [classes.expanded]: expanded,
-        [classes.disabled]: disabled,
-      },
-      classNameProp,
-    );
-
     let summary = null;
 
     const children = React.Children.map(childrenProp, child => {
@@ -160,7 +158,20 @@ class ExpansionPanel extends React.Component {
       : null;
 
     return (
-      <Paper className={className} elevation={1} square {...other}>
+      <Paper
+        className={classNames(
+          classes.root,
+          {
+            [classes.expanded]: expanded,
+            [classes.disabled]: disabled,
+            [classes.rounded]: !square,
+          },
+          classNameProp,
+        )}
+        elevation={1}
+        square={square}
+        {...other}
+      >
         {summary}
         <Collapse in={expanded} timeout="auto" {...CollapseProps} {...CollapsePropsProp}>
           {children}
@@ -208,11 +219,16 @@ ExpansionPanel.propTypes = {
    * @param {boolean} expanded The `expanded` state of the panel
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  square: PropTypes.bool,
 };
 
 ExpansionPanel.defaultProps = {
   defaultExpanded: false,
   disabled: false,
+  square: false,
 };
 
 export default withStyles(styles, { name: 'MuiExpansionPanel' })(ExpansionPanel);
diff --git a/packages/material-ui/src/Popper/Popper.d.ts b/packages/material-ui/src/Popper/Popper.d.ts
--- a/packages/material-ui/src/Popper/Popper.d.ts
+++ b/packages/material-ui/src/Popper/Popper.d.ts
@@ -22,12 +22,10 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
   anchorEl?: null | HTMLElement | ReferenceObject | ((element: HTMLElement) => HTMLElement);
   children:
     | React.ReactNode
-    | ((
-        props: {
-          placement: PopperPlacementType;
-          TransitionProps?: TransitionProps;
-        },
-      ) => React.ReactNode);
+    | ((props: {
+        placement: PopperPlacementType;
+        TransitionProps?: TransitionProps;
+      }) => React.ReactNode);
   container?: PortalProps['container'];
   disablePortal?: PortalProps['disablePortal'];
   keepMounted?: boolean;
diff --git a/pages/api/expansion-panel.md b/pages/api/expansion-panel.md
--- a/pages/api/expansion-panel.md
+++ b/pages/api/expansion-panel.md
@@ -37,6 +37,7 @@ This property accepts the following keys:
 | Name | Description |
 |:-----|:------------|
 | <span class="prop-name">root</span> | Styles applied to the root element.
+| <span class="prop-name">rounded</span> | Styles applied to the root element if `square={false}`.
 | <span class="prop-name">expanded</span> | Styles applied to the root element if `expanded={true}`.
 | <span class="prop-name">disabled</span> | Styles applied to the root element if `disabled={true}`.
 


Test patch:
diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.test.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.test.js
--- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.test.js
+++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.test.js
@@ -26,7 +26,7 @@ describe('<ExpansionPanel />', () => {
     const wrapper = shallow(<ExpansionPanel>foo</ExpansionPanel>);
     assert.strictEqual(wrapper.type(), Paper);
     assert.strictEqual(wrapper.props().elevation, 1);
-    assert.strictEqual(wrapper.props().square, true);
+    assert.strictEqual(wrapper.props().square, false);
     assert.strictEqual(wrapper.instance().isControlled, false);
 
     const collapse = wrapper.find(Collapse);