fix(Link): Do not pass through hoverColor prop in Link (#5319)

primer · Nov 20, 2024 · 37c4e97 · 37c4e97
1 parent 56ff1c0
commit 37c4e97
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/.changeset/quiet-garlics-compare.md b/.changeset/quiet-garlics-compare.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Do not pass through hoverColor prop into DOM element
diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx
@@ -17,7 +17,7 @@ type StyledLinkProps = {
   inline?: boolean
 } & SxProp
 
-const Link = forwardRef(({as: Component = 'a', className, inline, underline, ...props}, forwardedRef) => {
+const Link = forwardRef(({as: Component = 'a', className, inline, underline, hoverColor, ...props}, forwardedRef) => {
   const innerRef = React.useRef<HTMLAnchorElement>(null)
   useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
@@ -53,6 +53,7 @@ const Link = forwardRef(({as: Component = 'a', className, inline, underline, ...
         data-muted={props.muted}
         data-inline={inline}
         data-underline={underline}
+        data-hover-color={hoverColor}
         {...props}
         // @ts-ignore shh
         ref={innerRef}
@@ -66,6 +67,7 @@ const Link = forwardRef(({as: Component = 'a', className, inline, underline, ...
       data-muted={props.muted}
       data-inline={inline}
       data-underline={underline}
+      data-hover-color={hoverColor}
       {...props}
       // @ts-ignore shh
       ref={innerRef}

diff --git a/packages/react/src/Link/__tests__/__snapshots__/Link.test.tsx.snap b/packages/react/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`Link passes href down to link element 1`] = `
 exports[`Link respects hoverColor prop 1`] = `
 <a
   className="Link"
-  hoverColor="accent.fg"
+  data-hover-color="accent.fg"
 />
 `;