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,