From 8548136bdb8e3a80bf7a5d0a79014d53b986d295 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 20 Dec 2020 18:47:51 +0100 Subject: [PATCH 1/3] [Collapse] Deprecate collapsedHeight --- docs/pages/api-docs/collapse.md | 5 ++-- .../components/transitions/SimpleCollapse.js | 2 +- .../components/transitions/SimpleCollapse.tsx | 2 +- .../components/transitions/transitions.md | 2 +- .../material-ui/src/Collapse/Collapse.d.ts | 5 ++++ packages/material-ui/src/Collapse/Collapse.js | 30 +++++++++++++------ .../material-ui/src/Collapse/Collapse.test.js | 14 ++++----- 7 files changed, 38 insertions(+), 22 deletions(-) diff --git a/docs/pages/api-docs/collapse.md b/docs/pages/api-docs/collapse.md index b9ef19b464f9b0..b8f578c65acafd 100644 --- a/docs/pages/api-docs/collapse.md +++ b/docs/pages/api-docs/collapse.md @@ -32,7 +32,8 @@ The `MuiCollapse` name can be used for providing [default props](/customization/ |:-----|:-----|:--------|:------------| | children | node | | The content node to be collapsed. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| collapsedHeight | number
| string | '0px' | The height of the container when collapsed. | +| ~~collapsedHeight~~ | oneOfType([PropTypes.number | | *Deprecated*. The prop was renamed to support the vertical orientation, use `collapsedSize` instead

The height of the container when collapsed. | +| collapsedSize | number
| string | '0px' | The height of the container when collapsed. | | component | elementType | 'div' | The component used for the root node. Either a string to use a HTML element or a component. | | disableStrictModeCompat | bool | false | 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`. | | in | bool | | If `true`, the component will transition in. | @@ -48,7 +49,7 @@ Any other props supplied will be provided to the root element ([Transition](http |:-----|:-------------|:------------| | root | .MuiCollapse-root | Styles applied to the root element. | entered | .MuiCollapse-entered | Styles applied to the root element when the transition has entered. -| hidden | .MuiCollapse-hidden | Styles applied to the root element when the transition has exited and `collapsedHeight` != 0px. +| hidden | .MuiCollapse-hidden | Styles applied to the root element when the transition has exited and `collapsedSize` != 0px. | wrapper | .MuiCollapse-wrapper | Styles applied to the outer wrapper element. | wrapperInner | .MuiCollapse-wrapperInner | Styles applied to the inner wrapper element. diff --git a/docs/src/pages/components/transitions/SimpleCollapse.js b/docs/src/pages/components/transitions/SimpleCollapse.js index 2f4a59c4989e49..9763fbb8b81675 100644 --- a/docs/src/pages/components/transitions/SimpleCollapse.js +++ b/docs/src/pages/components/transitions/SimpleCollapse.js @@ -48,7 +48,7 @@ export default function SimpleCollapse() { - + diff --git a/docs/src/pages/components/transitions/SimpleCollapse.tsx b/docs/src/pages/components/transitions/SimpleCollapse.tsx index 65eb578e009971..44a9d3309e2c74 100644 --- a/docs/src/pages/components/transitions/SimpleCollapse.tsx +++ b/docs/src/pages/components/transitions/SimpleCollapse.tsx @@ -50,7 +50,7 @@ export default function SimpleCollapse() { - + diff --git a/docs/src/pages/components/transitions/transitions.md b/docs/src/pages/components/transitions/transitions.md index d94967a0eaac41..050b003407c374 100644 --- a/docs/src/pages/components/transitions/transitions.md +++ b/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}} diff --git a/packages/material-ui/src/Collapse/Collapse.d.ts b/packages/material-ui/src/Collapse/Collapse.d.ts index 57b6a89e39b843..dd6ae0c03e0324 100644 --- a/packages/material-ui/src/Collapse/Collapse.d.ts +++ b/packages/material-ui/src/Collapse/Collapse.d.ts @@ -10,8 +10,13 @@ export interface CollapseProps extends StandardProps ({ 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 vertical 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. diff --git a/packages/material-ui/src/Collapse/Collapse.test.js b/packages/material-ui/src/Collapse/Collapse.test.js index 65f7a38b3b3e95..e194c126040041 100644 --- a/packages/material-ui/src/Collapse/Collapse.test.js +++ b/packages/material-ui/src/Collapse/Collapse.test.js @@ -251,25 +251,23 @@ describe('', () => { }); }); - describe('prop: collapsedHeight', () => { - const collapsedHeight = '10px'; + describe('prop: collapsedSize', () => { + const collapsedSize = '10px'; it('should work when closed', () => { - const { container } = render( - , - ); + const { container } = render(); 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( - , + , ); setProps({ in: false }); - expect(handleExiting.args[0][0].style.height).to.equal(collapsedHeight); + expect(handleExiting.args[0][0].style.height).to.equal(collapsedSize); }); }); From 751f2fedc7942892965def9eb63eb99d11d27b37 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 20 Dec 2020 23:59:16 +0100 Subject: [PATCH 2/3] Apply suggestions from code review Co-authored-by: Matt --- packages/material-ui/src/Collapse/Collapse.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Collapse/Collapse.d.ts b/packages/material-ui/src/Collapse/Collapse.d.ts index dd6ae0c03e0324..b3e8e2a1a32d36 100644 --- a/packages/material-ui/src/Collapse/Collapse.d.ts +++ b/packages/material-ui/src/Collapse/Collapse.d.ts @@ -10,7 +10,7 @@ export interface CollapseProps extends StandardProps Date: Sun, 20 Dec 2020 23:59:56 +0100 Subject: [PATCH 3/3] update --- packages/material-ui/src/Collapse/Collapse.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js index 411352065bac4c..f0aa748bcf36a2 100644 --- a/packages/material-ui/src/Collapse/Collapse.js +++ b/packages/material-ui/src/Collapse/Collapse.js @@ -255,7 +255,7 @@ Collapse.propTypes = { className: PropTypes.string, /** * The height of the container when collapsed. - * @deprecated The prop was renamed to support the vertical orientation, use `collapsedSize` instead. + * @deprecated The prop was renamed to support the addition of horizontal orientation, use `collapsedSize` instead. */ collapsedHeight: deprecatedPropType( PropTypes.oneOfType([PropTypes.number, PropTypes.string]),