diff --git a/docs/pages/api-docs/collapse.md b/docs/pages/api-docs/collapse.md index 1a98c40cff3d69..22adc3d01ed3e8 100644 --- a/docs/pages/api-docs/collapse.md +++ b/docs/pages/api-docs/collapse.md @@ -46,9 +46,9 @@ Any other props supplied will be provided to the root element ([Transition](http | Rule name | Global class | Description | |:-----|:-------------|:------------| -| container | .MuiCollapse-container | Styles applied to the container element. -| entered | .MuiCollapse-entered | Styles applied to the container element when the transition has entered. -| hidden | .MuiCollapse-hidden | Styles applied to the container element when the transition has exited and `collapsedHeight` != 0px. +| 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 `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/packages/material-ui/src/Collapse/Collapse.d.ts b/packages/material-ui/src/Collapse/Collapse.d.ts index 42ffc952e5f946..174e5ea00bb196 100644 --- a/packages/material-ui/src/Collapse/Collapse.d.ts +++ b/packages/material-ui/src/Collapse/Collapse.d.ts @@ -36,7 +36,12 @@ export interface CollapseProps extends StandardProps ({ - /* Styles applied to the container element. */ - container: { + /* Styles applied to the root element. */ + root: { height: 0, overflow: 'hidden', transition: theme.transitions.create('height'), }, - /* Styles applied to the container element when the transition has entered. */ + /* Styles applied to the root element when the transition has entered. */ entered: { height: 'auto', overflow: 'visible', }, - /* Styles applied to the container 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', }, @@ -196,6 +197,7 @@ const Collapse = React.forwardRef(function Collapse(props, ref) { {(state, childProps) => ( { + if (props.classes && props.classes.container) { + throw new Error([ + 'Material-UI: the classes.container key is deprecated.', + 'Use `classes.root` instead', + 'The name of the pseudo-class was changed for consistency.', + ]).join('\n'); + } + + return null; + }), /** * @ignore */ diff --git a/packages/material-ui/src/Collapse/Collapse.test.js b/packages/material-ui/src/Collapse/Collapse.test.js index c4530917536f02..65f7a38b3b3e95 100644 --- a/packages/material-ui/src/Collapse/Collapse.test.js +++ b/packages/material-ui/src/Collapse/Collapse.test.js @@ -37,11 +37,11 @@ describe('', () => { it('should render a container around the wrapper', () => { const { container } = render( - , + , ); const collapse = container.firstChild; expect(collapse.tagName).to.equal('DIV'); - expect(collapse).to.have.class(classes.container); + expect(collapse).to.have.class(classes.root); expect(collapse).to.have.class('woofCollapse1'); });