[Accordion] Migrate to emotion

docs/pages/api-docs/accordion.json

@@ -7,6 +7,7 @@
     "expanded": { "type": { "name": "bool" } },
     "onChange": { "type": { "name": "func" } },
     "square": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } },
     "TransitionComponent": { "type": { "name": "elementType" }, "default": "Collapse" },
     "TransitionProps": { "type": { "name": "object" } }
   },
@@ -21,5 +22,5 @@
   "filename": "/packages/material-ui/src/Accordion/Accordion.js",
   "inheritance": { "component": "Paper", "pathname": "/api/paper/" },
   "demos": "<ul><li><a href=\"/components/accordion/\">Accordion</a></li></ul>",
-  "styledComponent": false
+  "styledComponent": true
 }

docs/translations/api-docs/accordion/accordion.json

@@ -8,6 +8,7 @@
     "expanded": "If <code>true</code>, expands the accordion, otherwise collapse it. Setting this prop enables control over the accordion.",
     "onChange": "Callback fired when the expand/collapse state is changed.<br><br><strong>Signature:</strong><br><code>function(event: object, expanded: boolean) =&gt; void</code><br><em>event:</em> The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.<br><em>expanded:</em> The <code>expanded</code> state of the accordion.",
     "square": "If <code>true</code>, rounded corners are disabled.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",
     "TransitionComponent": "The component used for the transition. <a href=\"/components/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component.",
     "TransitionProps": "Props applied to the transition element. By default, the element is based on this <a href=\"http://reactcommunity.org/react-transition-group/transition\"><code>Transition</code></a> component."
   },

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { InternalStandardProps as StandardProps } from '..';
+import { SxProps } from '@material-ui/system';
+import { InternalStandardProps as StandardProps, Theme } from '..';
 import { TransitionProps } from '../transitions/transition';
 import { PaperProps } from '../Paper';
 
@@ -45,6 +46,10 @@ export interface AccordionProps extends StandardProps<PaperProps, 'onChange'> {
    * @param {boolean} expanded The `expanded` state of the accordion.
    */
   onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
   /**
    * The component used for the transition.
    * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.

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

@@ -2,21 +2,53 @@ import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { chainPropTypes } from '@material-ui/utils';
+import { deepmerge, chainPropTypes } from '@material-ui/utils';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import experimentalStyled from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
 import Collapse from '../Collapse';
 import Paper from '../Paper';
-import withStyles from '../styles/withStyles';
 import AccordionContext from './AccordionContext';
 import useControlled from '../utils/useControlled';
+import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
 
-export const styles = (theme) => {
-  const transition = {
-    duration: theme.transitions.duration.shortest,
+const overridesResolver = (props, styles) => {
+  const { styleProps } = props;
+
+  return deepmerge(styles.root || {}, {
+    ...(!styleProps.square && styles.rounded),
+    ...(styleProps.expanded && { [`&.${accordionClasses.expanded}`]: styles.expanded }),
+    ...(styleProps.disabled && { [`&.${accordionClasses.disabled}`]: styles.disabled }),
+    [`& .${accordionClasses.region}`]: styles.region,
+  });
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes, square, expanded, disabled } = styleProps;
+
+  const slots = {
+    root: ['root', !square && 'rounded', expanded && 'expanded', disabled && 'disabled'],
   };
 
-  return {
-    /* Styles applied to the root element. */
-    root: {
+  return composeClasses(slots, getAccordionUtilityClass, classes);
+};
+
+const AccordionRoot = experimentalStyled(
+  Paper,
+  {},
+  {
+    name: 'MuiAccordion',
+    slot: 'Root',
+    overridesResolver,
+  },
+)(
+  ({ theme }) => {
+    const transition = {
+      duration: theme.transitions.duration.shortest,
+    };
+
+    return {
+      /* Styles applied to the root element. */
       position: 'relative',
       transition: theme.transitions.create(['margin'], transition),
       overflowAnchor: 'none', // Keep the same scrolling position
@@ -31,40 +63,44 @@ export const styles = (theme) => {
         backgroundColor: theme.palette.divider,
         transition: theme.transitions.create(['opacity', 'background-color'], transition),
       },
-      '&:first-child': {
+      '&:first-of-type': {
         '&:before': {
           display: 'none',
         },
       },
-      '&$expanded': {
+      /* Styles applied to the root element if `expanded={true}`. */
+      [`&.${accordionClasses.expanded}`]: {
         margin: '16px 0',
-        '&:first-child': {
+        '&:before': {
+          opacity: 0,
+        },
+        '&:first-of-type': {
           marginTop: 0,
         },
-        '&:last-child': {
+        '&:last-of-type': {
           marginBottom: 0,
         },
-        '&:before': {
-          opacity: 0,
-        },
-      },
-      '&$expanded + &': {
-        '&:before': {
-          display: 'none',
+        '& + &': {
+          '&:before': {
+            display: 'none',
+          },
         },
       },
-      '&$disabled': {
+      /* Styles applied to the root element if `disabled={true}`. */
+      [`&.${accordionClasses.disabled}`]: {
         backgroundColor: theme.palette.action.disabledBackground,
       },
-    },
+    };
+  },
+  ({ theme, styleProps }) => ({
     /* Styles applied to the root element unless `square={true}`. */
-    rounded: {
+    ...(!styleProps.square && {
       borderRadius: 0,
-      '&:first-child': {
+      '&:first-of-type': {
         borderTopLeftRadius: theme.shape.borderRadius,
         borderTopRightRadius: theme.shape.borderRadius,
       },
-      '&:last-child': {
+      '&:last-of-type': {
         borderBottomLeftRadius: theme.shape.borderRadius,
         borderBottomRightRadius: theme.shape.borderRadius,
         // Fix a rendering issue on Edge
@@ -73,20 +109,14 @@ export const styles = (theme) => {
           borderBottomRightRadius: 0,
         },
       },
-    },
-    /* Pseudo-class applied to the root element if `expanded={true}`. */
-    expanded: {},
-    /* Pseudo-class applied to the root element if `disabled={true}`. */
-    disabled: {},
-    /* Styles applied to the region element, the container of the children. */
-    region: {},
-  };
-};
+    }),
+  }),
+);
 
-const Accordion = React.forwardRef(function Accordion(props, ref) {
+const Accordion = React.forwardRef(function Accordion(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiAccordion' });
   const {
     children: childrenProp,
-    classes,
     className,
     defaultExpanded = false,
     disabled = false,
@@ -123,18 +153,20 @@ const Accordion = React.forwardRef(function Accordion(props, ref) {
     handleChange,
   ]);
 
+  const styleProps = {
+    ...props,
+    square,
+    disabled,
+    expanded,
+  };
+
+  const classes = useUtilityClasses(styleProps);
+
   return (
-    <Paper
-      className={clsx(
-        classes.root,
-        {
-          [classes.expanded]: expanded,
-          [classes.disabled]: disabled,
-          [classes.rounded]: !square,
-        },
-        className,
-      )}
+    <AccordionRoot
+      className={clsx(classes.root, className)}
       ref={ref}
+      styleProps={styleProps}
       square={square}
       {...other}
     >
@@ -149,7 +181,7 @@ const Accordion = React.forwardRef(function Accordion(props, ref) {
           {children}
         </div>
       </TransitionComponent>
-    </Paper>
+    </AccordionRoot>
   );
 });
 
@@ -211,6 +243,10 @@ Accordion.propTypes = {
    * @default false
    */
   square: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
   /**
    * The component used for the transition.
    * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
@@ -224,4 +260,4 @@ Accordion.propTypes = {
   TransitionProps: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiAccordion' })(Accordion);
+export default Accordion;

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

@@ -2,33 +2,25 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import {
-  createMount,
-  describeConformance,
-  getClasses,
-  createClientRender,
-  fireEvent,
-} from 'test/utils';
+import { createMount, describeConformanceV5, createClientRender, fireEvent } from 'test/utils';
 import Paper from '../Paper';
 import Accordion from './Accordion';
 import AccordionSummary from '../AccordionSummary';
+import classes from './accordionClasses';
 
 describe('<Accordion />', () => {
   const render = createClientRender();
   const mount = createMount({ strict: true });
-  let classes;
   const minimalChildren = [<AccordionSummary key="header">Header</AccordionSummary>];
 
-  before(() => {
-    classes = getClasses(<Accordion>{minimalChildren}</Accordion>);
-  });
-
-  describeConformance(<Accordion>{minimalChildren}</Accordion>, () => ({
+  describeConformanceV5(<Accordion>{minimalChildren}</Accordion>, () => ({
     classes,
     inheritComponent: Paper,
     mount,
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp'],
+    muiName: 'MuiAccordion',
+    testVariantProps: { variant: 'rounded' },
+    skip: ['componentProp', 'componentsProp'],
   }));
 
   it('should render and not be controlled', () => {
@@ -130,7 +122,7 @@ describe('<Accordion />', () => {
       it('requires at least one child', () => {
         expect(() => {
           PropTypes.checkPropTypes(
-            Accordion.Naked.propTypes,
+            Accordion.propTypes,
             { classes: {}, children: [] },
             'prop',
             'MockedName',
@@ -141,7 +133,7 @@ describe('<Accordion />', () => {
       it('needs a valid element as the first child', () => {
         expect(() => {
           PropTypes.checkPropTypes(
-            Accordion.Naked.propTypes,
+            Accordion.propTypes,
             { classes: {}, children: <React.Fragment /> },
             'prop',
             'MockedName',

packages/material-ui/src/Accordion/accordionClasses.d.ts

@@ -0,0 +1,13 @@
+export interface AccordionClasses {
+  root: string;
+  rounded: string;
+  expanded: string;
+  disabled: string;
+  region: string;
+}
+
+declare const accordionClasses: AccordionClasses;
+
+export function getAccordionUtilityClass(slot: string): string;
+
+export default accordionClasses;

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

@@ -0,0 +1,15 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getAccordionUtilityClass(slot) {
+  return generateUtilityClass('MuiAccordion', slot);
+}
+
+const accordionClasses = generateUtilityClasses('MuiAccordion', [
+  'root',
+  'rounded',
+  'expanded',
+  'disabled',
+  'region',
+]);
+
+export default accordionClasses;