refactor: remove deprecated legacyBehavior prop from Link components

apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx

@@ -62,7 +62,7 @@ export default function Page({ requestId, isRequestExpired, csrfToken }: PagePro
             <h2 className="text-emphasis text-center text-3xl font-extrabold">{t("request_is_expired")}</h2>
           </div>
           <p>{t("request_is_expired_instructions")}</p>
-          <Link href="/auth/forgot-password" passHref legacyBehavior>
+          <Link href="/auth/forgot-password">
             <button
               type="button"
               className="flex w-full justify-center px-4 py-2 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">

apps/web/modules/bookings/views/bookings-single-view.tsx

@@ -801,8 +801,7 @@ export default function Success(props: PageProps) {
                               <Link
                                 href={`/auth/login?callbackUrl=${encodeURIComponent(
                                   `/booking/${bookingInfo?.uid}`
-                                )}`}
-                                legacyBehavior>
+                                )}`}>
                                 {t("login")}
                               </Link>
                             </span>
@@ -834,8 +833,7 @@ export default function Success(props: PageProps) {
                                           currentUserEmail
                                             ? `?rescheduledBy=${encodeURIComponent(currentUserEmail)}`
                                             : ""
-                                        }`}
-                                        legacyBehavior>
+                                        }`}>
                                         {t("reschedule")}
                                       </Link>
                                     </span>

packages/app-store/_components/AppNotInstalledMessage.tsx

@@ -17,7 +17,7 @@ export default function AppNotInstalledMessage({ appName }: { appName: string })
         <p className="text-subtle px-1 leading-normal">{t("visit_our_app_store")}</p>
 
         <div className="mt-5">
-          <Link href={`/apps/${appName}`} passHref={true} legacyBehavior>
+          <Link href={`/apps/${appName}`}>
             <Button type="button" color="secondary">
               {t("go_to_app_store")}
               <Icon name="arrow-up-right" className="ml-1" size={20} />

packages/app-store/make/pages/setup/index.tsx

@@ -135,7 +135,7 @@ export default function MakeSetup({ inviteLink }: InferGetServerSidePropsType<ty
                 <li>{t("make_setup_instructions_5")}</li>
                 <li>{t("make_setup_instructions_6")}</li>
               </ol>
-              <Link href="/apps/installed/automation?hl=make" passHref={true} legacyBehavior>
+              <Link href="/apps/installed/automation?hl=make">
                 <Button color="secondary">{t("done")}</Button>
               </Link>
             </div>

packages/app-store/zapier/pages/setup/index.tsx

@@ -138,7 +138,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
                   ]}
                 />
               </ol>
-              <Link href="/apps/installed/automation?hl=zapier" passHref={true} legacyBehavior>
+              <Link href="/apps/installed/automation?hl=zapier">
                 <Button color="secondary">{t("done")}</Button>
               </Link>
             </div>

packages/ui/components/button/Button.tsx

@@ -242,13 +242,13 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
   const disabled = props.disabled || loading;
   // If pass an `href`-attr is passed it's `<a>`, otherwise it's a `<button />`
   const isLink = typeof props.href !== "undefined";
-  const elementType = isLink ? "a" : "button";
+  const elementType = "button";
   const element = React.createElement(
     elementType,
     {
       ...passThroughProps,
       disabled,
-      type: !isLink ? type : undefined,
+      type: type,
       ref: forwardedRef,
       className: classNames(buttonClasses({ color, size, loading, variant }), props.className),
       // if we click a disabled button, we prevent going through the click handler
@@ -333,7 +333,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
   );
 
   return props.href ? (
-    <Link data-testid="link-component" passHref href={props.href} shallow={shallow && shallow} legacyBehavior>
+    <Link data-testid="link-component" href={props.href} shallow={shallow && shallow}>
       {element}
     </Link>
   ) : (

packages/ui/components/dropdown/Dropdown.tsx

@@ -149,7 +149,7 @@ export function ButtonOrLink({ href, ...props }: ButtonOrLinkProps) {
 
   if (isLink) {
     return (
-      <Link href={href} legacyBehavior>
+      <Link href={href}>
         {content}
       </Link>
     );

packages/ui/components/form/step/Stepper.tsx

@@ -29,8 +29,7 @@ function Stepper<T extends DefaultStep>(props: {
                 <Link
                   href={props.disableSteps ? "#" : `${href}?step=${index + 1}`}
                   shallow
-                  replace
-                  legacyBehavior>
+                  replace>
                   {index + 1 < props.step ? (
                     <a className="hover:bg-inverted block h-2.5 w-2.5 rounded-full bg-gray-600">
                       <span className="sr-only">{mapStep.title}</span>

packages/ui/components/list/List.tsx

@@ -37,7 +37,7 @@ export type ListItemProps = { expanded?: boolean; rounded?: boolean } & ({
 export function ListItem(props: ListItemProps) {
   const { href, expanded, rounded = true, ...passThroughProps } = props;
 
-  const elementType = href ? "a" : "li";
+  const elementType = "li";
 
   const element = createElement(
     elementType,
@@ -57,7 +57,7 @@ export function ListItem(props: ListItemProps) {
   );
 
   return href ? (
-    <Link passHref href={href} legacyBehavior>
+    <Link href={href}>
       {element}
     </Link>
   ) : (