[Accordion] Add new classes key (#21920)

docs/pages/api-docs/accordion.md

@@ -48,8 +48,9 @@ Any other props supplied will be provided to the root element ([Paper](/api/pape
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiAccordion-root</span> | Styles applied to the root element.
 | <span class="prop-name">rounded</span> | <span class="prop-name">.MuiAccordion-rounded</span> | Styles applied to the root element if `square={false}`.
-| <span class="prop-name">expanded</span> | <span class="prop-name">.Mui-expanded</span> | Styles applied to the root element if `expanded={true}`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
+| <span class="prop-name">expanded</span> | <span class="prop-name">.Mui-expanded</span> | Pseudo-class applied to the root element if `expanded={true}`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">region</span> | <span class="prop-name">.MuiAccordion-region</span> | Styles applied to the region element, the container of the children.
 
 You can override the style of the component thanks to one of these customization points:
 

docs/pages/api-docs/collapse.md

@@ -46,10 +46,10 @@ 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">root</span> | <span class="prop-name">.MuiCollapse-root</span> | Styles applied to the root 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 `collapsedSize` != 0px.
+| <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.
 

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

@@ -79,6 +79,13 @@ This change affects almost all components where you're using the `component` pro
   +<Collapse collapsedSize={40}>
   ```
 
+- The `classes.container` key was changed to match the convention of the other components.
+
+  ```diff
+  -<Collapse classes={{ container: 'collapse' }}>
+  +<Collapse classes={{ root: 'collapse' }}>
+  ```
+
 ### 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/Accordion/Accordion.d.ts

@@ -41,7 +41,7 @@ export interface AccordionProps extends StandardProps<PaperProps, AccordionClass
   TransitionProps?: TransitionProps;
 }
 
-export type AccordionClassKey = 'root' | 'rounded' | 'expanded' | 'disabled';
+export type AccordionClassKey = 'root' | 'rounded' | 'expanded' | 'disabled' | 'region';
 
 /**
  *

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

@@ -73,10 +73,12 @@ export const styles = (theme) => {
         },
       },
     },
-    /* Styles applied to the root element if `expanded={true}`. */
+    /* Pseudo-class applied to the root element if `expanded={true}`. */
     expanded: {},
-    /* Styles applied to the root element if `disabled={true}`. */
+    /* Pseudo-class applied to the root element if `disabled={true}`. */
     disabled: {},
+    /* Styles applied to the region element, the container of the children. */
+    region: {},
   };
 };
 
@@ -137,7 +139,12 @@ const Accordion = React.forwardRef(function Accordion(props, ref) {
     >
       <AccordionContext.Provider value={contextValue}>{summary}</AccordionContext.Provider>
       <TransitionComponent in={expanded} timeout="auto" {...TransitionProps}>
-        <div aria-labelledby={summary.props.id} id={summary.props['aria-controls']} role="region">
+        <div
+          aria-labelledby={summary.props.id}
+          id={summary.props['aria-controls']}
+          role="region"
+          className={classes.region}
+        >
           {children}
         </div>
       </TransitionComponent>

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

@@ -33,7 +33,13 @@ export interface CollapseProps extends StandardProps<TransitionProps, CollapseCl
   timeout?: TransitionProps['timeout'] | 'auto';
 }
 
-export type CollapseClassKey = 'container' | 'entered' | 'hidden' | 'wrapper' | 'wrapperInner';
+export type CollapseClassKey =
+  | 'root'
+  | 'horizontal'
+  | 'entered'
+  | 'hidden'
+  | 'wrapper'
+  | 'wrapperInner';
 
 /**
  * The Collapse transition is used by the

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

@@ -10,8 +10,8 @@ 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'),
@@ -23,15 +23,15 @@ export const styles = (theme) => ({
   },
   /* Pseudo-class applied to the root element if `orientation="horizontal"`. */
   horizontal: {},
-  /* 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',
     '&$horizontal': {
       width: 'auto',
     },
   },
-  /* Styles applied to the container element when the transition has exited and `collapsedSize` != 0px. */
+  /* Styles applied to the root element when the transition has exited and `collapsedSize` != 0px. */
   hidden: {
     visibility: 'hidden',
   },
@@ -226,7 +226,7 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
       {(state, childProps) => (
         <Component
           className={clsx(
-            classes.container,
+            classes.root,
             {
               [classes.horizontal]: isHorizontal,
               [classes.entered]: state === 'entered',

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

@@ -29,11 +29,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');
   });
 

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

@@ -43,7 +43,7 @@ describe('<StepContent />', () => {
       </Stepper>,
     );
 
-    const collapse = container.querySelector(`.${collapseClasses.container}`);
+    const collapse = container.querySelector(`.${collapseClasses.root}`);
     const innerDiv = container.querySelector(`.test-content`);
 
     expect(collapse).to.not.equal(null);
@@ -63,7 +63,7 @@ describe('<StepContent />', () => {
         </Stepper>,
       );
 
-      const collapse = container.querySelector(`.${collapseClasses.container}`);
+      const collapse = container.querySelector(`.${collapseClasses.root}`);
       expect(collapse).to.not.equal(null);
     });