[Link] Migrate to emotion

docs/pages/api-docs/link.json

@@ -10,6 +10,7 @@
       "default": "'primary'"
     },
     "component": { "type": { "name": "custom", "description": "element type" } },
+    "sx": { "type": { "name": "object" } },
     "TypographyClasses": { "type": { "name": "object" } },
     "underline": {
       "type": {
@@ -44,6 +45,6 @@
   "filename": "/packages/material-ui/src/Link/Link.js",
   "inheritance": { "component": "Typography", "pathname": "/api/typography/" },
   "demos": "<ul><li><a href=\"/components/breadcrumbs/\">Breadcrumbs</a></li>\n<li><a href=\"/components/links/\">Links</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true
   "cssComponent": false
 }

docs/translations/api-docs/link/link.json

@@ -5,6 +5,7 @@
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "color": "The color of the link.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.<br>⚠️ <a href=\"/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
+    "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.",
     "TypographyClasses": "<code>classes</code> prop applied to the <a href=\"/api/typography/\"><code>Typography</code></a> element.",
     "underline": "Controls when the link should have an underline.",
     "variant": "Applies the theme typography styles."

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Omit } from '@material-ui/types';
+import { SxProps } from '@material-ui/system';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { Theme } from '../styles';
 import { TypographyProps } from '../Typography';
 
 export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
@@ -32,6 +34,10 @@ export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
        * @default 'primary'
        */
       color?: TypographyProps['color'];
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps<Theme>;
       /**
        * `classes` prop applied to the [`Typography`](/api/typography/) element.
        */

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

@@ -1,62 +1,100 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { elementTypeAcceptingRef } from '@material-ui/utils';
+import { deepmerge, elementTypeAcceptingRef } from '@material-ui/utils';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
 import capitalize from '../utils/capitalize';
-import withStyles from '../styles/withStyles';
+import experimentalStyled from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useForkRef from '../utils/useForkRef';
 import Typography from '../Typography';
+import linkClasses, { getLinkUtilityClass } from './linkClasses';
 
-export const styles = {
-  /* Styles applied to the root element. */
-  root: {},
-  /* Styles applied to the root element if `underline="none"`. */
-  underlineNone: {
-    textDecoration: 'none',
+const overridesResolver = (props, styles) => {
+  const { styleProps } = props;
+
+  return deepmerge(styles.root || {}, {
+    ...styles[`underline${capitalize(styleProps.underline)}`],
+    ...(styleProps.component === 'button' && styles.button),
+    ...(styleProps.focusVisible && styles.focusVisible),
+  });
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes, component, focusVisible, underline } = styleProps;
+
+  const slots = {
+    root: [
+      'root',
+      `underline${capitalize(underline)}`,
+      component === 'button' && 'button',
+      focusVisible && 'focusVisible',
+    ],
+  };
+
+  return composeClasses(slots, getLinkUtilityClass, classes);
+};
+
+const LinkRoot = experimentalStyled(
+  Typography,
+  {},
+  {
+    name: 'MuiLink',
+    slot: 'Root',
+    overridesResolver,
   },
-  /* Styles applied to the root element if `underline="hover"`. */
-  underlineHover: {
-    textDecoration: 'none',
-    '&:hover': {
+)(({ styleProps }) => {
+  return {
+    /* Styles applied to the root element if `underline="none"`. */
+    ...(styleProps.underline === 'none' && {
+      textDecoration: 'none',
+    }),
+    /* Styles applied to the root element if `underline="hover"`. */
+    ...(styleProps.underline === 'hover' && {
+      textDecoration: 'none',
+      '&:hover': {
+        textDecoration: 'underline',
+      },
+    }),
+    /* Styles applied to the root element if `underline="always"`. */
+    ...(styleProps.underline === 'always' && {
       textDecoration: 'underline',
-    },
-  },
-  /* Styles applied to the root element if `underline="always"`. */
-  underlineAlways: {
-    textDecoration: 'underline',
-  },
-  // Same reset as ButtonBase.root
-  /* Styles applied to the root element if `component="button"`. */
-  button: {
-    position: 'relative',
-    WebkitTapHighlightColor: 'transparent',
-    backgroundColor: 'transparent', // Reset default value
-    // We disable the focus ring for mouse, touch and keyboard users.
-    outline: 0,
-    border: 0,
-    margin: 0, // Remove the margin in Safari
-    borderRadius: 0,
-    padding: 0, // Remove the padding in Firefox
-    cursor: 'pointer',
-    userSelect: 'none',
-    verticalAlign: 'middle',
-    '-moz-appearance': 'none', // Reset
-    '-webkit-appearance': 'none', // Reset
-    '&::-moz-focus-inner': {
-      borderStyle: 'none', // Remove Firefox dotted outline.
-    },
-    '&$focusVisible': {
-      outline: 'auto',
-    },
-  },
-  /* Pseudo-class applied to the root element if the link is keyboard focused. */
-  focusVisible: {},
-};
+    }),
+    // Same reset as ButtonBase.root
+    /* Styles applied to the root element if `component="button"`. */
+    ...(styleProps.component === 'button' && {
+      position: 'relative',
+      WebkitTapHighlightColor: 'transparent',
+      backgroundColor: 'transparent', // Reset default value
+      // We disable the focus ring for mouse, touch and keyboard users.
+      outline: 0,
+      border: 0,
+      margin: 0, // Remove the margin in Safari
+      borderRadius: 0,
+      padding: 0, // Remove the padding in Firefox
+      cursor: 'pointer',
+      userSelect: 'none',
+      verticalAlign: 'middle',
+      '-moz-appearance': 'none', // Reset
+      '-webkit-appearance': 'none', // Reset
+      '&::-moz-focus-inner': {
+        borderStyle: 'none', // Remove Firefox dotted outline.
+      },
+      [`&.${linkClasses.focusVisible}`]: {
+        outline: 'auto',
+      },
+    }),
+  };
+});
+
+const Link = React.forwardRef(function Link(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiLink',
+  });
 
-const Link = React.forwardRef(function Link(props, ref) {
   const {
-    classes,
     className,
     color = 'primary',
     component = 'a',
@@ -95,23 +133,27 @@ const Link = React.forwardRef(function Link(props, ref) {
     }
   };
 
+  const styleProps = {
+    ...other,
+    color,
+    component,
+    focusVisible,
+    underline,
+    variant,
+  };
+
+  const classes = useUtilityClasses(styleProps);
+
   return (
-    <Typography
-      className={clsx(
-        classes.root,
-        {
-          [classes.button]: component === 'button',
-          [classes.focusVisible]: focusVisible,
-        },
-        classes[`underline${capitalize(underline)}`],
-        className,
-      )}
+    <LinkRoot
+      className={clsx(classes.root, className)}
       classes={TypographyClasses}
       color={color}
       component={component}
       onBlur={handleBlur}
       onFocus={handleFocus}
       ref={handlerRef}
+      styleProps={styleProps}
       variant={variant}
       {...other}
     />
@@ -161,6 +203,10 @@ Link.propTypes = {
    * @ignore
    */
   onFocus: PropTypes.func,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
   /**
    * `classes` prop applied to the [`Typography`](/api/typography/) element.
    */
@@ -195,4 +241,4 @@ Link.propTypes = {
   ]),
 };
 
-export default withStyles(styles, { name: 'MuiLink' })(Link);
+export default Link;

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

@@ -1,16 +1,10 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import {
-  getClasses,
-  createMount,
-  describeConformance,
-  act,
-  createClientRender,
-  fireEvent,
-} from 'test/utils';
+import { createMount, act, createClientRender, fireEvent, describeConformanceV5 } from 'test/utils';
 import Link from './Link';
 import Typography, { typographyClasses } from '../Typography';
+import classes from './linkClasses';
 
 function focusVisible(element) {
   act(() => {
@@ -23,17 +17,16 @@ function focusVisible(element) {
 describe('<Link />', () => {
   const mount = createMount();
   const render = createClientRender();
-  let classes;
 
-  before(() => {
-    classes = getClasses(<Link href="/">Home</Link>);
-  });
-
-  describeConformance(<Link href="/">Home</Link>, () => ({
+  describeConformanceV5(<Link href="/">Home</Link>, () => ({
     classes,
     inheritComponent: Typography,
     mount,
+    muiName: 'MuiLink',
     refInstanceof: window.HTMLAnchorElement,
+    testVariantProps: { color: 'secondary', variant: 'h1' },
+    testStateOverrides: { prop: 'underline', value: 'always', styleKey: 'underlineAlways' },
+    skip: ['componentsProp'],
   }));
 
   it('should render children', () => {

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

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

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

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

packages/material-ui/src/Link/linkClasses.d.ts

@@ -0,0 +1,14 @@
+export interface LinkClasses {
+  root: string;
+  underlineNone: string;
+  underlineHover: string;
+  underlineAlways: string;
+  button: string;
+  focusVisible: string;
+}
+
+declare const linkClasses: LinkClasses;
+
+export function getLinkUtilityClass(slot: string): string;
+
+export default linkClasses;

packages/material-ui/src/Link/linkClasses.js

@@ -0,0 +1,16 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getLinkUtilityClass(slot) {
+  return generateUtilityClass('MuiLink', slot);
+}
+
+const linkClasses = generateUtilityClasses('MuiLink', [
+  'root',
+  'underlineNone',
+  'underlineHover',
+  'underlineAlways',
+  'button',
+  'focusVisible',
+]);
+
+export default linkClasses;