Remove Box usage and sx prop from Link and misc other areas (stories, etc)

.changeset/light-schools-wish.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Removes `Box` component usage and `sx` prop from the `Link` component, Storybook stories, and a .figma.tsx file

packages/react/src/Hidden/Hidden.examples.stories.tsx

@@ -61,7 +61,7 @@ export const PullRequestPage = () => (
         <StateLabel status="pullOpened">Open</StateLabel>
         <Hidden when={['narrow']}>
           <Text sx={{fontSize: 1, color: 'fg.muted'}}>
-            <Link href="#" muted sx={{fontWeight: 'bold'}}>
+            <Link href="#" muted style={{fontWeight: 'var(--base-text-weight-semibold)'}}>
               broccolinisoup
             </Link>{' '}
             wants to merge 3 commits into

packages/react/src/Link/Link.docs.json

@@ -58,11 +58,6 @@
       "name": "as",
       "type": "React.ElementType",
       "defaultValue": "\"a\""
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []

packages/react/src/Link/Link.tsx

@@ -1,25 +1,28 @@
 import {clsx} from 'clsx'
-import React, {forwardRef, useEffect} from 'react'
+import React, {useEffect, type ForwardedRef, type ElementRef} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
-import type {SxProp} from '../sx'
 import classes from './Link.module.css'
-import Box from '../Box'
 import type {ComponentProps} from '../utils/types'
-import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import {type PolymorphicProps, fixedForwardRef} from '../utils/modern-polymorphic'
 
-type StyledLinkProps = {
+type StyledLinkProps<As extends React.ElementType = 'a'> = {
+  as?: As
   /** @deprecated use CSS modules to style hover color */
   hoverColor?: string
   muted?: boolean
   /** @deprecated use `inline` to specify the type of link instead */
   underline?: boolean
   // Link inside a text block
   inline?: boolean
-} & SxProp
+}
 
-const Link = forwardRef(({as: Component = 'a', className, inline, underline, hoverColor, ...props}, forwardedRef) => {
-  const innerRef = React.useRef<HTMLAnchorElement>(null)
-  useRefObjectAsForwardedRef(forwardedRef, innerRef)
+export const UnwrappedLink = <As extends React.ElementType = 'a'>(
+  props: PolymorphicProps<As, 'a', StyledLinkProps>,
+  ref: ForwardedRef<unknown>,
+) => {
+  const {as: Component = 'a', className, inline, underline, hoverColor, ...restProps} = props
+  const innerRef = React.useRef<ElementRef<As>>(null)
+  useRefObjectAsForwardedRef(ref, innerRef)
 
   if (__DEV__) {
     /**
@@ -46,37 +49,23 @@ const Link = forwardRef(({as: Component = 'a', className, inline, underline, hov
     }, [innerRef])
   }
 
-  if (props.sx) {
-    return (
-      <Box
-        as={Component}
-        className={clsx(className, classes.Link)}
-        data-muted={props.muted}
-        data-inline={inline}
-        data-underline={underline}
-        data-hover-color={hoverColor}
-        {...props}
-        // @ts-ignore shh
-        ref={innerRef}
-      />
-    )
-  }
-
   return (
     <Component
       className={clsx(className, classes.Link)}
-      data-muted={props.muted}
+      data-muted={restProps.muted}
       data-inline={inline}
       data-underline={underline}
       data-hover-color={hoverColor}
-      {...props}
-      // @ts-ignore shh
-      ref={innerRef}
+      {...restProps}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ref={innerRef as any}
     />
   )
-}) as PolymorphicForwardRefComponent<'a', StyledLinkProps>
+}
+
+const LinkComponent = fixedForwardRef(UnwrappedLink)
 
-Link.displayName = 'Link'
+const Link = Object.assign(LinkComponent, {displayName: 'Link'})
 
 export type LinkProps = ComponentProps<typeof Link>
 export default Link

packages/react/src/Link/__tests__/Link.test.tsx

@@ -18,11 +18,6 @@ describe('Link', () => {
     expect(container.firstChild).toHaveStyle('--fgColor-accent: #0969da')
   })
 
-  it('respects the "sx" prop', () => {
-    const {container} = render(<Link sx={{fontStyle: 'italic'}} />)
-    expect(container.firstChild).toHaveStyle('font-style: italic')
-  })
-
   it('applies button styles when rendering a button element', () => {
     const {container} = render(<Link as="button" />)
     expect((container.firstChild as Element).tagName).toBe('BUTTON')
@@ -33,12 +28,6 @@ describe('Link', () => {
     expect(container.firstChild).toHaveAttribute('data-muted', 'true')
   })
 
-  it('respects the "sx" prop when "muted" prop is also passed', () => {
-    const {container} = render(<Link muted sx={{color: 'fg.onEmphasis'}} />)
-    expect(container.firstChild).toHaveAttribute('data-muted', 'true')
-    expect(container.firstChild).toHaveStyle('color: rgb(89, 99, 110)')
-  })
-
   it('logs a warning when trying to render invalid "as" prop', () => {
     const consoleSpy = vi.spyOn(globalThis.console, 'error').mockImplementation(() => {})
 

packages/react/src/Overlay/Overlay.features.stories.module.css

@@ -136,3 +136,14 @@
   right: var(--base-size-4);
   top: var(--base-size-4);
 }
+
+.IssueLink {
+  display: block;
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  padding: var(--base-size-8);
+  transition: background 0.2s;
+}
+
+.IssueLink:hover {
+  background-color: var(--bgColor-muted);
+}

packages/react/src/Overlay/Overlay.features.stories.tsx

@@ -429,15 +429,7 @@ export const MemexIssueOverlay = ({role, open}: Args) => {
           event.preventDefault()
           setOverlayOpen(true)
         }}
-        sx={{
-          display: 'block',
-          border: '1px solid',
-          borderColor: 'border.default',
-          p: 2,
-          ':hover': {
-            backgroundColor: 'canvas.subtle',
-          },
-        }}
+        className={classes.IssueLink}
       >
         <IssueDraftIcon /> {title}
       </Link>

packages/react/src/Popover/Popover.figma.tsx

@@ -24,13 +24,7 @@ figma.connect(Popover, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Prim
   example: ({caret, heading, body, action}) => (
     <Popover caret={caret}>
       <Popover.Content>
-        <Heading
-          sx={{
-            fontSize: 2,
-          }}
-        >
-          {heading}
-        </Heading>
+        <Heading style={{fontSize: 'var(--text-title-size-small)'}}>{heading}</Heading>
         <Text as="p">{body}</Text>
         {action}
       </Popover.Content>

packages/react/src/live-region/Announce.tsx

@@ -3,11 +3,11 @@ import type React from 'react'
 import {useEffect, useRef, useState, type ElementRef} from 'react'
 import {useEffectOnce} from '../internal/hooks/useEffectOnce'
 import {useEffectCallback} from '../internal/hooks/useEffectCallback'
-import type {PolymorphicProps} from '../utils/polymorphic2'
+import type {PolymorphicProps} from '../utils/modern-polymorphic'
 
 export type AnnounceProps<As extends React.ElementType> = PolymorphicProps<
-  'div',
   As,
+  'div',
   {
     /**
      * Specify if the content of the element should be announced when this

packages/react/src/live-region/AriaAlert.tsx

@@ -1,11 +1,11 @@
 import type React from 'react'
 import {type ElementType} from 'react'
 import {Announce} from './Announce'
-import type {PolymorphicProps} from '../utils/polymorphic2'
+import type {PolymorphicProps} from '../utils/modern-polymorphic'
 
 export type AriaAlertProps<As extends ElementType> = PolymorphicProps<
-  'div',
   As,
+  'div',
   {
     /**
      * Specify if the content of the element should be announced when this
@@ -22,14 +22,6 @@ export type AriaAlertProps<As extends ElementType> = PolymorphicProps<
   }
 >
 
-export function AriaAlert<As extends ElementType = 'div'>({
-  announceOnShow = true,
-  children,
-  ...rest
-}: AriaAlertProps<As>) {
-  return (
-    <Announce {...rest} announceOnShow={announceOnShow} politeness="assertive">
-      {children}
-    </Announce>
-  )
+export function AriaAlert<As extends ElementType = 'div'>(props: AriaAlertProps<As>) {
+  return <Announce {...props} announceOnShow={props.announceOnShow ?? true} politeness="assertive" />
 }

packages/react/src/live-region/AriaStatus.tsx

@@ -1,11 +1,11 @@
 import type React from 'react'
 import {type ElementType} from 'react'
 import {Announce} from './Announce'
-import type {PolymorphicProps} from '../utils/polymorphic2'
+import type {PolymorphicProps} from '../utils/modern-polymorphic'
 
-export type AriaStatusProps<As extends ElementType> = PolymorphicProps<
-  'div',
+export type AriaStatusProps<As extends ElementType = 'div'> = PolymorphicProps<
   As,
+  'div',
   {
     /**
      * Specify if the content of the element should be announced when this
@@ -27,14 +27,6 @@ export type AriaStatusProps<As extends ElementType> = PolymorphicProps<
   }
 >
 
-export function AriaStatus<As extends ElementType = 'div'>({
-  announceOnShow = false,
-  children,
-  ...rest
-}: AriaStatusProps<As>) {
-  return (
-    <Announce {...rest} announceOnShow={announceOnShow} politeness="polite">
-      {children}
-    </Announce>
-  )
+export function AriaStatus<As extends ElementType = 'div'>(props: AriaStatusProps<As>) {
+  return <Announce {...props} announceOnShow={props.announceOnShow ?? false} politeness="polite" />
 }

packages/react/src/utils/modern-polymorphic.ts

@@ -0,0 +1,35 @@
+// Mostly taken from https://github.com/total-typescript/react-typescript-tutorial/blob/main/src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx
+
+import {forwardRef} from 'react'
+import type {ComponentPropsWithRef, ElementType} from 'react'
+
+/**
+ * Distributive Omit utility type that works correctly with union types
+ */
+type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends unknown ? Omit<T, TOmitted> : never
+
+/**
+ * Fixed version of forwardRef that provides better type inference for polymorphic components
+ */
+// TODO: figure out how to change this type so we can set displayName
+// like this: `ComponentName.displayName = 'DisplayName' instead of using workarounds
+type FixedForwardRef = <T, P extends Record<string, unknown> = Record<string, unknown>>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactNode,
+) => (props: P & React.RefAttributes<T>) => React.ReactNode
+
+/**
+ * Cast forwardRef to the fixed version with better type inference
+ */
+export const fixedForwardRef = forwardRef as FixedForwardRef
+
+/**
+ * Simplified polymorphic props type that handles the common pattern of
+ * `DistributiveOmit<ComponentPropsWithRef<ElementType extends As ? DefaultElement : As>, 'as'>`
+ */
+export type PolymorphicProps<
+  TAs extends ElementType,
+  TDefaultElement extends ElementType = 'div',
+  Props extends Record<string, unknown> = Record<string, unknown>,
+> = DistributiveOmit<ComponentPropsWithRef<ElementType extends TAs ? TDefaultElement : TAs> & Props, 'as'> & {
+  as?: TAs
+}

packages/styled-react/src/components/Link.tsx

@@ -0,0 +1,12 @@
+import {Link as PrimerLink, type LinkProps as PrimerLinkProps} from '@primer/react'
+import styled from 'styled-components'
+import {sx, type SxProp} from '../sx'
+
+type LinkProps = PrimerLinkProps & SxProp
+
+const Link = styled(PrimerLink).withConfig<LinkProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
+export {Link, type LinkProps}

packages/styled-react/src/index.tsx

@@ -13,7 +13,6 @@ export {FormControl} from '@primer/react'
 export {Heading} from '@primer/react'
 export {IconButton} from '@primer/react'
 export {Label} from '@primer/react'
-export {Link} from '@primer/react'
 export {NavList} from '@primer/react'
 export {Overlay} from '@primer/react'
 export {PageLayout} from '@primer/react'
@@ -39,6 +38,7 @@ export {Checkbox, type CheckboxProps} from './components/Checkbox'
 export {CounterLabel, type CounterLabelProps} from './components/CounterLabel'
 export {Flash} from './components/Flash'
 export {Header, type HeaderProps} from './components/Header'
+export {Link, type LinkProps} from './components/Link'
 export {LinkButton, type LinkButtonProps} from './components/LinkButton'
 export {
   PageHeader,