[docs] Push the fixes on Next.js's Link to the examples

Use: - #27936 -
mui · Sep 5, 2021 · 8a15a4f · 8a15a4f
1 parent 8179654
commit 8a15a4f
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 28 deletions.
diff --git a/docs/src/modules/components/Link.tsx b/docs/src/modules/components/Link.tsx
@@ -2,10 +2,22 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import NextLink, { LinkProps as NextLinkProps } from 'next/link';
-import { styled } from '@mui/material/styles';
 import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
+import { styled } from '@mui/material/styles';
 import { useUserLanguage } from 'docs/src/modules/utils/i18n';
 
+/**
+ * File to keep in sync with:
+ *
+ * - /docs/src/modules/components/Link.tsx
+ * - /examples/nextjs/src/Link.tsx
+ * - /examples/nextjs-with-typescript/src/Link.tsx
+ * - /examples/nextjs-with-styled-components-typescript/src/Link.tsx
+ */
+
+// Add support for the sx prop for consistency with the other branches.
+const Anchor = styled('a')({});
+
 interface NextLinkComposedProps
   extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
     Omit<NextLinkProps, 'href' | 'as' | 'passHref'> {
@@ -14,8 +26,6 @@ interface NextLinkComposedProps
   href?: NextLinkProps['href'];
 }
 
-const Anchor = styled('a')({ cursor: 'pointer' });
-
 const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedProps>(
   function NextLinkComposed(props, ref) {
     const { to, linkAs, href, replace, scroll, shallow, prefetch, locale, ...other } = props;
@@ -70,14 +80,14 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,
 
   if (isExternal) {
     if (noLinkStyle) {
-      return <Anchor className={className} href={href as string} ref={ref as any} {...other} />;
+      return <Anchor className={className} href={href} ref={ref} {...other} />;
     }
 
-    return <MuiLink className={className} href={href as string} ref={ref} {...other} />;
+    return <MuiLink className={className} href={href} ref={ref} {...other} />;
   }
 
   if (noLinkStyle) {
-    return <NextLinkComposed className={className} ref={ref as any} to={href} {...other} />;
+    return <NextLinkComposed className={className} ref={ref} to={href} {...other} />;
   }
 
   let linkAs = linkAsProp || (href as string);

diff --git a/examples/nextjs-with-styled-components-typescript/src/Link.tsx b/examples/nextjs-with-styled-components-typescript/src/Link.tsx
@@ -1,9 +1,12 @@
-/* eslint-disable jsx-a11y/anchor-has-content */
 import * as React from 'react';
 import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import NextLink, { LinkProps as NextLinkProps } from 'next/link';
 import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
+import { styled } from '@mui/material/styles';
+
+// Add support for the sx prop for consistency with the other branches.
+const Anchor = styled('a')({});
 
 interface NextLinkComposedProps
   extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
@@ -15,8 +18,7 @@ interface NextLinkComposedProps
 
 export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedProps>(
   function NextLinkComposed(props, ref) {
-    const { to, linkAs, href, replace, scroll, passHref, shallow, prefetch, locale, ...other } =
-      props;
+    const { to, linkAs, href, replace, scroll, shallow, prefetch, locale, ...other } = props;
 
     return (
       <NextLink
@@ -26,10 +28,9 @@ export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComp
         replace={replace}
         scroll={scroll}
         shallow={shallow}
-        passHref={passHref}
         locale={locale}
       >
-        <a ref={ref} {...other} />
+        <Anchor ref={ref} {...other} />
       </NextLink>
     );
   },
@@ -67,14 +68,14 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,
 
   if (isExternal) {
     if (noLinkStyle) {
-      return <a className={className} href={href as string} ref={ref as any} {...other} />;
+      return <Anchor className={className} href={href} ref={ref} {...other} />;
     }
 
-    return <MuiLink className={className} href={href as string} ref={ref} {...other} />;
+    return <MuiLink className={className} href={href} ref={ref} {...other} />;
   }
 
   if (noLinkStyle) {
-    return <NextLinkComposed className={className} ref={ref as any} to={href} {...other} />;
+    return <NextLinkComposed className={className} ref={ref} to={href} {...other} />;
   }
 
   return (

diff --git a/examples/nextjs-with-typescript/src/Link.tsx b/examples/nextjs-with-typescript/src/Link.tsx
@@ -1,9 +1,12 @@
-/* eslint-disable jsx-a11y/anchor-has-content */
 import * as React from 'react';
 import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import NextLink, { LinkProps as NextLinkProps } from 'next/link';
 import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
+import { styled } from '@mui/material/styles';
+
+// Add support for the sx prop for consistency with the other branches.
+const Anchor = styled('a')({});
 
 interface NextLinkComposedProps
   extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
@@ -15,8 +18,7 @@ interface NextLinkComposedProps
 
 export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedProps>(
   function NextLinkComposed(props, ref) {
-    const { to, linkAs, href, replace, scroll, passHref, shallow, prefetch, locale, ...other } =
-      props;
+    const { to, linkAs, href, replace, scroll, shallow, prefetch, locale, ...other } = props;
 
     return (
       <NextLink
@@ -26,10 +28,9 @@ export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComp
         replace={replace}
         scroll={scroll}
         shallow={shallow}
-        passHref={passHref}
         locale={locale}
       >
-        <a ref={ref} {...other} />
+        <Anchor ref={ref} {...other} />
       </NextLink>
     );
   },
@@ -67,14 +68,14 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,
 
   if (isExternal) {
     if (noLinkStyle) {
-      return <a className={className} href={href as string} ref={ref as any} {...other} />;
+      return <Anchor className={className} href={href} ref={ref} {...other} />;
     }
 
-    return <MuiLink className={className} href={href as string} ref={ref} {...other} />;
+    return <MuiLink className={className} href={href} ref={ref} {...other} />;
   }
 
   if (noLinkStyle) {
-    return <NextLinkComposed className={className} ref={ref as any} to={href} {...other} />;
+    return <NextLinkComposed className={className} ref={ref} to={href} {...other} />;
   }
 
   return (

diff --git a/examples/nextjs/src/Link.js b/examples/nextjs/src/Link.js
@@ -1,14 +1,16 @@
-/* eslint-disable jsx-a11y/anchor-has-content */
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import NextLink from 'next/link';
 import MuiLink from '@mui/material/Link';
+import { styled } from '@mui/material/styles';
+
+// Add support for the sx prop for consistency with the other branches.
+const Anchor = styled('a')({});
 
 export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props, ref) {
-  const { to, linkAs, href, replace, scroll, passHref, shallow, prefetch, locale, ...other } =
-    props;
+  const { to, linkAs, href, replace, scroll, shallow, prefetch, locale, ...other } = props;
 
   return (
     <NextLink
@@ -18,10 +20,9 @@ export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props
       replace={replace}
       scroll={scroll}
       shallow={shallow}
-      passHref={passHref}
       locale={locale}
     >
-      <a ref={ref} {...other} />
+      <Anchor ref={ref} {...other} />
     </NextLink>
   );
 });
@@ -62,7 +63,7 @@ const Link = React.forwardRef(function Link(props, ref) {
 
   if (isExternal) {
     if (noLinkStyle) {
-      return <a className={className} href={href} ref={ref} {...other} />;
+      return <Anchor className={className} href={href} ref={ref} {...other} />;
     }
 
     return <MuiLink className={className} href={href} ref={ref} {...other} />;