[Card] Migrate CardActionArea to emotion (#24636)

docs/pages/api-docs/card-action-area.json

@@ -1,7 +1,8 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } }
+    "classes": { "type": { "name": "object" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "CardActionArea",
   "styles": {
@@ -14,6 +15,6 @@
   "filename": "/packages/material-ui/src/CardActionArea/CardActionArea.js",
   "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" },
   "demos": "<ul><li><a href=\"/components/cards/\">Cards</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

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

@@ -2,7 +2,8 @@
   "componentDescription": "",
   "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."
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "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/CardActionArea/CardActionArea.d.ts

@@ -1,3 +1,5 @@
+import { SxProps } from '@material-ui/system';
+import { Theme } from '..';
 import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 
@@ -15,6 +17,10 @@ export type CardActionAreaTypeMap<P, D extends React.ElementType> = ExtendButton
       focusHighlight?: string;
     };
     focusVisibleClassName?: string;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
   };
   defaultComponent: D;
 }>;

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

@@ -1,58 +1,98 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import { deepmerge } from '@material-ui/utils';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import useThemeProps from '../styles/useThemeProps';
+import experimentalStyled from '../styles/experimentalStyled';
+import cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActionAreaClasses';
 import ButtonBase from '../ButtonBase';
 
-export const styles = (theme) => ({
+const overridesResolver = (props, styles) => {
+  return deepmerge(styles.root || {}, {
+    [`& .${cardActionAreaClasses.focusHighlight}`]: styles.focusHighlight,
+  });
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes } = styleProps;
+
+  const slots = {
+    root: ['root'],
+    focusHighlight: ['focusHighlight'],
+  };
+
+  return composeClasses(slots, getCardActionAreaUtilityClass, classes);
+};
+
+const CardActionAreaRoot = experimentalStyled(
+  ButtonBase,
+  {},
+  {
+    name: 'MuiCardActionArea',
+    slot: 'Root',
+    overridesResolver,
+  },
+)(({ theme }) => ({
   /* Styles applied to the root element. */
-  root: {
-    display: 'block',
-    textAlign: 'inherit',
-    width: '100%',
-    '&:hover $focusHighlight': {
-      opacity: theme.palette.action.hoverOpacity,
-      '@media (hover: none)': {
-        opacity: 0,
-      },
-    },
-    '&$focusVisible $focusHighlight': {
-      opacity: theme.palette.action.focusOpacity,
+  display: 'block',
+  textAlign: 'inherit',
+  width: '100%',
+  [`&:hover .${cardActionAreaClasses.focusHighlight}`]: {
+    opacity: theme.palette.action.hoverOpacity,
+    '@media (hover: none)': {
+      opacity: 0,
     },
   },
-  /* Pseudo-class applied to the ButtonBase root element if the action area is keyboard focused. */
-  focusVisible: {},
-  /* Styles applied to the overlay that covers the action area when it is keyboard focused. */
-  focusHighlight: {
-    overflow: 'hidden',
-    pointerEvents: 'none',
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    borderRadius: 'inherit',
-    opacity: 0,
-    backgroundColor: 'currentcolor',
-    transition: theme.transitions.create('opacity', {
-      duration: theme.transitions.duration.short,
-    }),
+  [`&.Mui-focusVisible .${cardActionAreaClasses.focusHighlight}`]: {
+    opacity: theme.palette.action.focusOpacity,
   },
-});
+}));
+
+const CardActionAreaFocusHighlight = experimentalStyled(
+  'span',
+  {},
+  {
+    name: 'MuiCardActionArea',
+    slot: 'FocusHighlight',
+  },
+)(({ theme }) => ({
+  /* Styles applied to the overlay that covers the action area when it is keyboard focused. */
+  overflow: 'hidden',
+  pointerEvents: 'none',
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  borderRadius: 'inherit',
+  opacity: 0,
+  backgroundColor: 'currentcolor',
+  transition: theme.transitions.create('opacity', {
+    duration: theme.transitions.duration.short,
+  }),
+}));
 
-const CardActionArea = React.forwardRef(function CardActionArea(props, ref) {
-  const { children, classes, className, focusVisibleClassName, ...other } = props;
+const CardActionArea = React.forwardRef(function CardActionArea(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiCardActionArea' });
+  const { children, className, focusVisibleClassName, ...other } = props;
+
+  // TODO: convert to simple assignment after the type error in defaultPropsHandler.js:60:6 is fixed
+  const styleProps = { ...props };
+
+  const classes = useUtilityClasses(styleProps);
 
   return (
-    <ButtonBase
+    <CardActionAreaRoot
       className={clsx(classes.root, className)}
       focusVisibleClassName={clsx(focusVisibleClassName, classes.focusVisible)}
       ref={ref}
+      styleProps={styleProps}
       {...other}
     >
       {children}
-      <span className={classes.focusHighlight} />
-    </ButtonBase>
+      <CardActionAreaFocusHighlight className={classes.focusHighlight} styleProps={styleProps} />
+    </CardActionAreaRoot>
   );
 });
 
@@ -77,6 +117,10 @@ CardActionArea.propTypes = {
    * @ignore
    */
   focusVisibleClassName: PropTypes.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiCardActionArea' })(CardActionArea);
+export default CardActionArea;

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

@@ -1,21 +1,20 @@
 import * as React from 'react';
-import { getClasses, createMount, describeConformance } from 'test/utils';
+import { createMount, describeConformanceV5 } from 'test/utils';
 import ButtonBase from '../ButtonBase';
 import CardActionArea from './CardActionArea';
+import classes from './cardActionAreaClasses';
 
 describe('<CardActionArea />', () => {
   const mount = createMount();
-  let classes;
 
-  before(() => {
-    classes = getClasses(<CardActionArea />);
-  });
-
-  describeConformance(<CardActionArea />, () => ({
+  describeConformanceV5(<CardActionArea />, () => ({
     classes,
     inheritComponent: ButtonBase,
     mount,
+    muiName: 'MuiCardActionArea',
+    testDeepOverrides: { slotName: 'focusHighlight', slotClassName: classes.focusHighlight },
+    testVariantProps: { variant: 'foo' },
     refInstanceof: window.HTMLButtonElement,
-    skip: ['componentProp'],
+    skip: ['componentProp', 'componentsProp'],
   }));
 });

packages/material-ui/src/CardActionArea/cardActionAreaClasses.d.ts

@@ -0,0 +1,11 @@
+export interface CardActionAreaClasses {
+  root: string;
+  focusVisible: string;
+  focusHighlight: string;
+}
+
+declare const cardActionAreaClasses: CardActionAreaClasses;
+
+export function getCardActionAreaUtilityClass(slot: string): string;
+
+export default cardActionAreaClasses;

packages/material-ui/src/CardActionArea/cardActionAreaClasses.js

@@ -0,0 +1,13 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getCardActionAreaUtilityClass(slot) {
+  return generateUtilityClass('MuiCardActionArea', slot);
+}
+
+const cardActionAreaClasses = generateUtilityClasses('MuiCardActionArea', [
+  'root',
+  'focusVisible',
+  'focusHighlight',
+]);
+
+export default cardActionAreaClasses;

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

@@ -1,2 +1,5 @@
 export { default } from './CardActionArea';
 export * from './CardActionArea';
+
+export { default as cardActionAreaClasses } from './cardActionAreaClasses';
+export * from './cardActionAreaClasses';

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

@@ -1 +1,4 @@
 export { default } from './CardActionArea';
+
+export { default as cardActionAreaClasses } from './cardActionAreaClasses';
+export * from './cardActionAreaClasses';