[Collapse] Add orientation and horizontal support

docs/pages/api-docs/collapse.md

@@ -32,10 +32,11 @@ The `MuiCollapse` name can be used for providing [default props](/customization/
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> | | The content node to be collapsed. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">collapsedHeight</span> | <span class="prop-type">number<br>&#124;&nbsp;string</span> | <span class="prop-default">'0px'</span> | The height of the container when collapsed. |
+| <span class="prop-name">collapsedSize</span> | <span class="prop-type">number<br>&#124;&nbsp;string</span> | <span class="prop-default">'0px'</span> | The width (horizontal) or height (vertical) of the container when collapsed. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
 | <span class="prop-name">disableStrictModeCompat</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Enable this prop if you encounter 'Function components cannot be given refs', use `unstable_createStrictModeTheme`, and can't forward the ref in the passed `Component`. |
 | <span class="prop-name">in</span> | <span class="prop-type">bool</span> | | If `true`, the component will transition in. |
+| <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | <span class="prop-default">'vertical'</span> | The collapse transition orientation. |
 | <span class="prop-name">timeout</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }</span> | <span class="prop-default">duration.standard</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.<br>Set to 'auto' to automatically calculate transition time based on height. |
 
 The `ref` is forwarded to the root element.
@@ -47,8 +48,9 @@ Any other props supplied will be provided to the root element ([Transition](http
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">container</span> | <span class="prop-name">.MuiCollapse-container</span> | Styles applied to the container element.
+| <span class="prop-name">horizontal</span> | <span class="prop-name">.MuiCollapse-horizontal</span> | Pseudo-class applied to the root element if `orientation="horizontal"`.
 | <span class="prop-name">entered</span> | <span class="prop-name">.MuiCollapse-entered</span> | Styles applied to the container element when the transition has entered.
-| <span class="prop-name">hidden</span> | <span class="prop-name">.MuiCollapse-hidden</span> | Styles applied to the container element when the transition has exited and `collapsedHeight` != 0px.
+| <span class="prop-name">hidden</span> | <span class="prop-name">.MuiCollapse-hidden</span> | Styles applied to the container element when the transition has exited and `collapsedSize` != 0px.
 | <span class="prop-name">wrapper</span> | <span class="prop-name">.MuiCollapse-wrapper</span> | Styles applied to the outer wrapper element.
 | <span class="prop-name">wrapperInner</span> | <span class="prop-name">.MuiCollapse-wrapperInner</span> | Styles applied to the inner wrapper element.
 

docs/src/pages/components/transitions/SimpleCollapse.js

@@ -7,10 +7,16 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 
 const useStyles = makeStyles((theme) => ({
  root: {
- height: 180,
+ height: 300,
  },
  container: {
  display: 'flex',
+ justifyContent: 'space-around',
+ height: 120,
+ width: 250,
+ },
+ halfWidth: {
+ width: '50%',
  },
  paper: {
  margin: theme.spacing(1),
@@ -51,7 +57,7 @@ export default function SimpleCollapse() {
  </svg>
  </Paper>
  </Collapse>
- <Collapse in={checked} collapsedHeight={40}>
+ <Collapse in={checked} collapsedSize={40}>
  <Paper elevation={4} className={classes.paper}>
  <svg className={classes.svg}>
  <polygon
@@ -62,6 +68,32 @@ export default function SimpleCollapse() {
  </Paper>
  </Collapse>
  </div>
+ <div className={classes.container}>
+ <div className={classes.halfWidth}>
+ <Collapse orientation="horizontal" in={checked}>
+ <Paper elevation={4} className={classes.paper}>
+ <svg className={classes.svg}>
+ <polygon
+ points="0,100 50,00, 100,100"
+ className={classes.polygon}
+ />
+ </svg>
+ </Paper>
+ </Collapse>
+ </div>
+ <div className={classes.halfWidth}>
+ <Collapse orientation="horizontal" in={checked} collapsedSize={40}>
+ <Paper elevation={4} className={classes.paper}>
+ <svg className={classes.svg}>
+ <polygon
+ points="0,100 50,00, 100,100"
+ className={classes.polygon}
+ />
+ </svg>
+ </Paper>
+ </Collapse>
+ </div>
+ </div>
  </div>
  );
 }

docs/src/pages/components/transitions/SimpleCollapse.tsx

@@ -8,10 +8,16 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
  root: {
- height: 180,
+ height: 300,
  },
  container: {
  display: 'flex',
+ justifyContent: 'space-around',
+ height: 120,
+ width: 250,
+ },
+ halfWidth: {
+ width: '50%',
  },
  paper: {
  margin: theme.spacing(1),
@@ -53,7 +59,7 @@ export default function SimpleCollapse() {
  </svg>
  </Paper>
  </Collapse>
- <Collapse in={checked} collapsedHeight={40}>
+ <Collapse in={checked} collapsedSize={40}>
  <Paper elevation={4} className={classes.paper}>
  <svg className={classes.svg}>
  <polygon
@@ -64,6 +70,32 @@ export default function SimpleCollapse() {
  </Paper>
  </Collapse>
  </div>
+ <div className={classes.container}>
+ <div className={classes.halfWidth}>
+ <Collapse orientation="horizontal" in={checked}>
+ <Paper elevation={4} className={classes.paper}>
+ <svg className={classes.svg}>
+ <polygon
+ points="0,100 50,00, 100,100"
+ className={classes.polygon}
+ />
+ </svg>
+ </Paper>
+ </Collapse>
+ </div>
+ <div className={classes.halfWidth}>
+ <Collapse orientation="horizontal" in={checked} collapsedSize={40}>
+ <Paper elevation={4} className={classes.paper}>
+ <svg className={classes.svg}>
+ <polygon
+ points="0,100 50,00, 100,100"
+ className={classes.polygon}
+ />
+ </svg>
+ </Paper>
+ </Collapse>
+ </div>
+ </div>
  </div>
  );
 }

docs/src/pages/components/transitions/transitions.md

@@ -37,8 +37,9 @@ export default Main() {
 
 ## Collapse
 
-Expand vertically from the top of the child element.
-The `collapsedHeight` property can be used to set the minimum height when not expanded.
+Expand from the start edge of the child element.
+Use the `orientation` prop if you need a horizontal collapse.
+The `collapsedSize` prop can be used to set the minimum width/height when not expanded.
 
 {{"demo": "pages/components/transitions/SimpleCollapse.js", "bg": true}}
 

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -64,6 +64,15 @@ yarn add @material-ui/core@next
  +<Button />
  ```
 
+### Collapse
+
+- The `collapsedHeight` prop was renamed `collapsedSize` to support the horizontal direction.
+
+ ```diff
+ -<Collapse collapsedHeight={40}>
+ +<Collapse collapsedSize={40}>
+ ```
+
 ### Divider
 
 - Use border instead of background color. It prevents inconsistent height on scaled screens. For people customizing the color of the border, the change requires changing the override CSS property:

packages/material-ui/src/Collapse/Collapse.d.ts

@@ -9,9 +9,9 @@ export interface CollapseProps extends StandardProps<TransitionProps, CollapseCl
  */
  children?: React.ReactNode;
  /**
- * The height of the container when collapsed.
+ * The width (horizontal) or height (vertical) of the container when collapsed.
  */
- collapsedHeight?: string | number;
+ collapsedSize?: string | number;
  /**
  * The component used for the root node.
  * Either a string to use a HTML element or a component.
@@ -27,6 +27,10 @@ export interface CollapseProps extends StandardProps<TransitionProps, CollapseCl
  * If `true`, the component will transition in.
  */
  in?: boolean;
+ /**
+ * The collapse transition orientation.
+ */
+ orientation?: 'horizontal' | 'vertical';
  /**
  * The duration for the transition, in milliseconds.
  * You may specify a single timeout for all transitions, or individually with an object.