fix: rollback ref on unstyled link (#864)

* fix: rollback ref on unstyled link Consuming LinkComponent has been a challenge downstream. We don't actually need the focus style manager to handle unstyled links as far as I can tell, so the console warnings should be resolved without having to keep drilling down into child Link components. * test: update pagination snap
d2iq · Oct 25, 2022 · 750d89d · 750d89d
1 parent 7536f5d
commit 750d89d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 16 deletions.
diff --git a/packages/button/components/ButtonBase.tsx b/packages/button/components/ButtonBase.tsx
@@ -125,7 +125,7 @@ const ButtonContent = ({ iconStart, iconEnd, isProcessing, children }) => {
   );
 };
 
-const ButtonNode = React.forwardRef(
+const ButtonNode = React.forwardRef<HTMLButtonElement, ButtonBaseProps>(
   (
     {
       appearance,
@@ -178,7 +178,6 @@ const ButtonNode = React.forwardRef(
           onClick={handleClick}
           tabIndex={enabled ? 0 : -1}
           openInNewTab={openInNewTab}
-          ref={ref}
           {...other}
         >
           <ButtonContent
@@ -199,7 +198,7 @@ const ButtonNode = React.forwardRef(
         onClick={handleClick}
         tabIndex={0}
         type={type}
-        ref={ref as React.ForwardedRef<HTMLButtonElement>}
+        ref={ref}
         aria-haspopup={ariaHaspopup}
         aria-label={ariaLabel}
         {...other}

diff --git a/packages/link/components/UnstyledLink.tsx b/packages/link/components/UnstyledLink.tsx
@@ -2,29 +2,23 @@ import React from "react";
 import { LinkComponentContext } from "../../uiKitProvider/link/context";
 import { ExpandedLinkProps } from "../types";
 
-const UnstyledLink = (props: ExpandedLinkProps, ref) => {
+const UnstyledLink = (props: ExpandedLinkProps) => {
   const { href, url, target, openInNewTab, children, ...rest } = props;
 
   // Context is used for `UIKitProvider` link delegation
   const LinkComponent = React.useContext(LinkComponentContext);
   if (LinkComponent) {
-    return <LinkComponent ref={ref} {...props} />;
+    return <LinkComponent {...props} />;
   }
 
   const rel = target === "_blank" || openInNewTab ? "noopener" : undefined;
   const blankTargetOrDefault = !target && openInNewTab ? "_blank" : target;
 
   return (
-    <a
-      ref={ref}
-      href={href || url}
-      target={blankTargetOrDefault}
-      rel={rel}
-      {...rest}
-    >
+    <a href={href || url} target={blankTargetOrDefault} rel={rel} {...rest}>
       {children}
     </a>
   );
 };
 
-export default React.forwardRef(UnstyledLink);
+export default UnstyledLink;
diff --git a/packages/link/types.ts b/packages/link/types.ts
@@ -15,6 +15,4 @@ export interface LinkProps {
 export type ExpandedLinkProps = LinkProps &
   Omit<React.HTMLProps<HTMLAnchorElement>, "ref">;
 
-export type LinkComponent = React.ComponentType<
-  LinkProps & React.HTMLProps<HTMLAnchorElement>
->;
+export type LinkComponent = React.ComponentType<ExpandedLinkProps>;
diff --git a/packages/pagination/__snapshots__/pagination.test.tsx.snap b/packages/pagination/__snapshots__/pagination.test.tsx.snap
@@ -335,6 +335,7 @@ exports[`Pagination rendering renders default 1`] = `
               class="emotion-8"
               data-cy="textInput-label"
               for="textInput-2"
+              hidden=""
             />
             <div>
               <div
@@ -701,6 +702,7 @@ exports[`Pagination rendering renders prev and next buttons as links 1`] = `
               class="emotion-8"
               data-cy="textInput-label"
               for="textInput-17"
+              hidden=""
             />
             <div>
               <div
@@ -1091,6 +1093,7 @@ exports[`Pagination rendering renders w/ custom item label 1`] = `
               class="emotion-8"
               data-cy="textInput-label"
               for="textInput-8"
+              hidden=""
             />
             <div>
               <div
@@ -1615,6 +1618,7 @@ exports[`Pagination rendering renders w/ page length menu 1`] = `
             class="emotion-4"
             data-cy="textInput-label"
             for="pageLengthMenu19"
+            hidden=""
           >
             Items per page
           </label>
@@ -1725,6 +1729,7 @@ exports[`Pagination rendering renders w/ page length menu 1`] = `
               class="emotion-4"
               data-cy="textInput-label"
               for="textInput-20"
+              hidden=""
             />
             <div>
               <div
@@ -2118,6 +2123,7 @@ exports[`Pagination rendering renders w/ totalItems set 1`] = `
               class="emotion-8"
               data-cy="textInput-label"
               for="textInput-11"
+              hidden=""
             />
             <div>
               <div
@@ -2513,6 +2519,7 @@ exports[`Pagination rendering renders w/ totalPages, pageLength, and totalItems
               class="emotion-8"
               data-cy="textInput-label"
               for="textInput-14"
+              hidden=""
             />
             <div>
               <div
@@ -2958,6 +2965,7 @@ exports[`Pagination rendering renders wrapped in a PaginationContainer 1`] = `
                   class="emotion-10"
                   data-cy="textInput-label"
                   for="textInput-5"
+                  hidden=""
                 />
                 <div>
                   <div