[Card] Migrate to emotion (#24597)

docs/pages/api-docs/card.json

@@ -2,7 +2,8 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
-    "raised": { "type": { "name": "bool" } }
+    "raised": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "Card",
   "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiCard" },
@@ -11,6 +12,6 @@
   "filename": "/packages/material-ui/src/Card/Card.js",
   "inheritance": { "component": "Paper", "pathname": "/api/paper/" },
   "demos": "<ul><li><a href=\"/components/cards/\">Cards</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/translations/api-docs/card/card.json

@@ -3,7 +3,8 @@
   "propDescriptions": {
     "children": "The content of the component.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
-    "raised": "If <code>true</code>, the card will use raised styling."
+    "raised": "If <code>true</code>, the card will use raised styling.",
+    "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."
   },
   "classDescriptions": { "root": { "description": "Styles applied to the root element." } }
 }

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

@@ -1,4 +1,5 @@
-import { InternalStandardProps as StandardProps } from '..';
+import { SxProps } from '@material-ui/system';
+import { InternalStandardProps as StandardProps, Theme } from '..';
 import { PaperProps } from '../Paper';
 
 export interface CardProps extends StandardProps<PaperProps> {
@@ -14,6 +15,10 @@ export interface CardProps extends StandardProps<PaperProps> {
    * @default false
    */
   raised?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
 export type CardClassKey = keyof NonNullable<CardProps['classes']>;

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

@@ -1,24 +1,57 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import experimentalStyled from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
 import Paper from '../Paper';
-import withStyles from '../styles/withStyles';
+import { getCardUtilityClass } from './cardClasses';
 
-export const styles = {
+const overridesResolver = (props, styles) => styles.root || {};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes } = styleProps;
+
+  const slots = {
+    root: ['root'],
+  };
+
+  return composeClasses(slots, getCardUtilityClass, classes);
+};
+
+const CardRoot = experimentalStyled(
+  Paper,
+  {},
+  {
+    name: 'MuiCard',
+    slot: 'Root',
+    overridesResolver,
+  },
+)(() => {
   /* Styles applied to the root element. */
-  root: {
+  return {
     overflow: 'hidden',
-  },
-};
+  };
+});
+
+const Card = React.forwardRef(function Card(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiCard',
+  });
+
+  const { className, raised = false, ...other } = props;
 
-const Card = React.forwardRef(function Card(props, ref) {
-  const { classes, className, raised = false, ...other } = props;
+  const styleProps = { ...props, raised };
+
+  const classes = useUtilityClasses(styleProps);
 
   return (
-    <Paper
+    <CardRoot
       className={clsx(classes.root, className)}
       elevation={raised ? 8 : 1}
       ref={ref}
+      styleProps={styleProps}
       {...other}
     />
   );
@@ -46,6 +79,10 @@ Card.propTypes = {
    * @default false
    */
   raised: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiCard' })(Card);
+export default Card;

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

@@ -1,23 +1,22 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
+import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
 import Card from './Card';
 import Paper from '../Paper';
+import classes from './cardClasses';
 
 describe('<Card />', () => {
   const mount = createMount();
-  let classes;
   const render = createClientRender();
-  before(() => {
-    classes = getClasses(<Card />);
-  });
 
-  describeConformance(<Card />, () => ({
+  describeConformanceV5(<Card />, () => ({
     classes,
     inheritComponent: Paper,
     mount,
+    muiName: 'MuiCard',
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp'],
+    testVariantProps: { raised: true },
+    skip: ['componentsProp'],
   }));
 
   it('when raised should render Paper with 8dp', () => {

packages/material-ui/src/Card/cardClasses.d.ts

@@ -0,0 +1,9 @@
+export interface CardClasses {
+  root: string;
+}
+
+declare const cardClasses: CardClasses;
+
+export function getCardUtilityClass(slot: string): string;
+
+export default cardClasses;

packages/material-ui/src/Card/cardClasses.js

@@ -0,0 +1,9 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getCardUtilityClass(slot) {
+  return generateUtilityClass('MuiCard', slot);
+}
+
+const cardClasses = generateUtilityClasses('MuiCard', ['root']);
+
+export default cardClasses;

packages/material-ui/src/Card/index.d.ts

@@ -1,2 +1,4 @@
 export { default } from './Card';
 export * from './Card';
+export { default as cardClasses } from './cardClasses';
+export * from './cardClasses';

packages/material-ui/src/Card/index.js

@@ -1 +1,3 @@
 export { default } from './Card';
+export { default as cardClasses } from './cardClasses';
+export * from './cardClasses';