[Collapse] Deprecate collapsedHeight (#24079)

docs/pages/api-docs/collapse.md

@@ -32,7 +32,8 @@ 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">collapsedHeight</span>~~ | <span class="prop-type">oneOfType([PropTypes.number</span> |  | *Deprecated*. The prop was renamed to support the vertical orientation, use `collapsedSize` instead<br><br>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 height 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. |
@@ -48,7 +49,7 @@ Any other props supplied will be provided to the root element ([Transition](http
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiCollapse-root</span> | Styles applied to the root element.
 | <span class="prop-name">entered</span> | <span class="prop-name">.MuiCollapse-entered</span> | Styles applied to the root element when the transition has entered.
-| <span class="prop-name">hidden</span> | <span class="prop-name">.MuiCollapse-hidden</span> | Styles applied to the root 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 root 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

@@ -48,7 +48,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 points="0,100 50,00, 100,100" className={classes.polygon} />

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

@@ -50,7 +50,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 points="0,100 50,00, 100,100" className={classes.polygon} />

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

@@ -38,7 +38,7 @@ 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.
+The `collapsedSize` property can be used to set the minimum height when not expanded.
 
 {{"demo": "pages/components/transitions/SimpleCollapse.js", "bg": true}}
 

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

@@ -10,8 +10,13 @@ export interface CollapseProps extends StandardProps<TransitionProps, CollapseCl
   children?: React.ReactNode;
   /**
    * The height of the container when collapsed.
+   * @deprecated The prop was renamed to support the addition of horizontal orientation, use `collapsedSize` instead.
    */
   collapsedHeight?: string | number;
+  /**
+   * The height of the container when collapsed.
+   */
+  collapsedSize?: string | number;
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

packages/material-ui/src/Collapse/Collapse.js

@@ -5,6 +5,7 @@ import { chainPropTypes } from '@material-ui/utils';
 import { Transition } from 'react-transition-group';
 import withStyles from '../styles/withStyles';
 import { duration } from '../styles/transitions';
+import deprecatedPropType from '../utils/deprecatedPropType';
 import { getTransitionProps } from '../transitions/utils';
 import useTheme from '../styles/useTheme';
 import { useForkRef } from '../utils';
@@ -21,7 +22,7 @@ export const styles = (theme) => ({
     height: 'auto',
     overflow: 'visible',
   },
-  /* Styles applied to the root element when the transition has exited and `collapsedHeight` != 0px. */
+  /* Styles applied to the root element when the transition has exited and `collapsedSize` != 0px. */
   hidden: {
     visibility: 'hidden',
   },
@@ -46,7 +47,8 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
     children,
     classes,
     className,
-    collapsedHeight: collapsedHeightProp = '0px',
+    collapsedHeight,
+    collapsedSize: collapsedSizeProp = '0px',
     component: Component = 'div',
     disableStrictModeCompat = false,
     in: inProp,
@@ -66,8 +68,10 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
   const timer = React.useRef();
   const wrapperRef = React.useRef(null);
   const autoTransitionDuration = React.useRef();
-  const collapsedHeight =
-    typeof collapsedHeightProp === 'number' ? `${collapsedHeightProp}px` : collapsedHeightProp;
+  const collapsedSize =
+    typeof (collapsedHeight || collapsedSizeProp) === 'number'
+      ? `${collapsedHeight || collapsedSizeProp}px`
+      : collapsedHeight || collapsedSizeProp;
 
   React.useEffect(() => {
     return () => {
@@ -95,7 +99,7 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
   };
 
   const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
-    node.style.height = collapsedHeight;
+    node.style.height = collapsedSize;
 
     if (onEnter) {
       onEnter(node, isAppearing);
@@ -166,7 +170,7 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
         typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;
     }
 
-    node.style.height = collapsedHeight;
+    node.style.height = collapsedSize;
 
     if (onExiting) {
       onExiting(node);
@@ -201,12 +205,12 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
             classes.container,
             {
               [classes.entered]: state === 'entered',
-              [classes.hidden]: state === 'exited' && !inProp && collapsedHeight === '0px',
+              [classes.hidden]: state === 'exited' && !inProp && collapsedSize === '0px',
             },
             className,
           )}
           style={{
-            minHeight: collapsedHeight,
+            minHeight: collapsedSize,
             ...style,
           }}
           ref={handleRef}
@@ -251,8 +255,16 @@ Collapse.propTypes = {
   className: PropTypes.string,
   /**
    * The height of the container when collapsed.
+   * @deprecated The prop was renamed to support the addition of horizontal orientation, use `collapsedSize` instead.
    */
-  collapsedHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  collapsedHeight: deprecatedPropType(
+    PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    'The prop was renamed to support the vertical orientation, use `collapsedSize` instead',
+  ),
+  /**
+   * The height of the container when collapsed.
+   */
+  collapsedSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

packages/material-ui/src/Collapse/Collapse.test.js

@@ -251,25 +251,23 @@ describe('<Collapse />', () => {
     });
   });
 
-  describe('prop: collapsedHeight', () => {
-    const collapsedHeight = '10px';
+  describe('prop: collapsedSize', () => {
+    const collapsedSize = '10px';
 
     it('should work when closed', () => {
-      const { container } = render(
-        <Collapse {...defaultProps} collapsedHeight={collapsedHeight} />,
-      );
+      const { container } = render(<Collapse {...defaultProps} collapsedSize={collapsedSize} />);
       const collapse = container.firstChild;
-      expect(collapse.style.minHeight).to.equal(collapsedHeight);
+      expect(collapse.style.minHeight).to.equal(collapsedSize);
     });
 
     it('should be taken into account in handleExiting', () => {
       const handleExiting = spy();
       const { setProps } = render(
-        <Collapse {...defaultProps} collapsedHeight={collapsedHeight} onExiting={handleExiting} />,
+        <Collapse {...defaultProps} collapsedSize={collapsedSize} onExiting={handleExiting} />,
       );
       setProps({ in: false });
 
-      expect(handleExiting.args[0][0].style.height).to.equal(collapsedHeight);
+      expect(handleExiting.args[0][0].style.height).to.equal(collapsedSize);
     });
   });