[Collapse] Deprecate classes.container

mui · Dec 20, 2020 · ac49692 · ac49692
1 parent 411cc61
commit ac49692
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 11 deletions.
diff --git 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 |
 |:-----|:-------------|:------------|
-| <span class="prop-name">container</span> | <span class="prop-name">.MuiCollapse-container</span> | Styles applied to the container element.
-| <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">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 `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.
 

diff --git 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<TransitionProps, CollapseCl
   timeout?: TransitionProps['timeout'] | 'auto';
 }
 
-export type CollapseClassKey = 'container' | 'entered' | 'hidden' | 'wrapper' | 'wrapperInner';
+export type CollapseClassKey =
+  | 'root'
+  | 'entered'
+  | 'hidden'
+  | 'wrapper'
+  | 'wrapperInner';
 
 /**
  * The Collapse transition is used by the

diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
+import { chainPropTypes } from '@material-ui/utils';
 import { Transition } from 'react-transition-group';
 import withStyles from '../styles/withStyles';
 import { duration } from '../styles/transitions';
@@ -9,18 +10,18 @@ import useTheme from '../styles/useTheme';
 import { useForkRef } from '../utils';
 
 export const styles = (theme) => ({
-  /* 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) => (
         <Component
           className={clsx(
+            classes.root,
             classes.container,
             {
               [classes.entered]: state === 'entered',
@@ -232,7 +234,17 @@ Collapse.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object,
+  classes: chainPropTypes(PropTypes.object, (props) => {
+    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
@@ -37,11 +37,11 @@ describe('<Collapse />', () => {
 
   it('should render a container around the wrapper', () => {
     const { container } = render(
-      <Collapse {...defaultProps} classes={{ container: 'woofCollapse1' }} />,
+      <Collapse {...defaultProps} classes={{ root: 'woofCollapse1' }} />,
     );
     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');
   });