use forwardedAs prop in components

Author: francinelucca

.changeset/afraid-eyes-serve.md

@@ -0,0 +1,5 @@
+---
+"@primer/styled-react": patch
+---
+
+chore: use forwardedAs prop in styled-react

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

@@ -3,6 +3,7 @@ import {
   type HeaderItemProps as PrimerHeaderItemProps,
   type HeaderLinkProps as PrimerHeaderLinkProps,
   Header as PrimerHeader,
+  type HeaderLinkProps,
 } from '@primer/react'
 import {forwardRef} from 'react'
 import {Box} from './Box'
@@ -11,20 +12,26 @@ import type {SxProp} from '../sx'
 
 type HeaderProps = PrimerHeaderProps & SxProp
 
-const HeaderImpl = forwardRef(function Header(props, ref) {
+const StyledHeader = forwardRef(function Header(props, ref) {
   return <Box as={PrimerHeader} ref={ref} {...props} />
 }) as ForwardRefComponent<'header', HeaderProps>
 
+// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
+const HeaderImpl = ({as, ...props}: HeaderProps) => <StyledHeader forwardedAs={as} {...props} />
+
 type HeaderItemProps = PrimerHeaderItemProps & SxProp
 
 const HeaderItem = forwardRef<HTMLDivElement, HeaderItemProps>(function HeaderItem(props, ref) {
   return <Box as={PrimerHeader.Item} ref={ref} {...props} />
 })
 
-const HeaderLink = forwardRef<HTMLAnchorElement, PrimerHeaderLinkProps>(function HeaderLink(props, ref) {
+const StyledHeaderLink = forwardRef<HTMLAnchorElement, PrimerHeaderLinkProps>(function HeaderLink(props, ref) {
   return <Box as={PrimerHeader.Link} ref={ref} {...props} />
 })
 
+// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
+const HeaderLink = ({as, ...props}: HeaderLinkProps) => <StyledHeaderLink forwardedAs={as} {...props} />
+
 const Header = Object.assign(HeaderImpl, {
   Item: HeaderItem,
   Link: HeaderLink,

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

@@ -10,20 +10,26 @@ import {sx, type SxProp} from '../sx'
 import type {ForwardRefComponent} from '../polymorphic'
 import {Box} from './Box'
 import type {PropsWithChildren} from 'react'
+import React from 'react'
 
 type PageHeaderProps = PrimerPageHeaderProps & SxProp
 
-const PageHeaderImpl: ForwardRefComponent<'div', PageHeaderProps> = styled(
+const StyledPageHeader: ForwardRefComponent<'div', PageHeaderProps> = styled(
   PrimerPageHeader,
 ).withConfig<PageHeaderProps>({
   shouldForwardProp: prop => prop !== 'sx',
 })`
   ${sx}
 `
 
+const PageHeaderImpl = React.forwardRef<HTMLDivElement, PageHeaderProps>(({as, ...props}, ref) => (
+  // @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
+  <StyledPageHeader forwardedAs={as} ref={ref} {...props} />
+)) as ForwardRefComponent<'div', PageHeaderProps>
+
 type PageHeaderActionsProps = PrimerPageHeaderActionsProps & SxProp
 
-function PageHeaderActions({sx, ...rest}: PageHeaderActionsProps) {
+function StyledPageHeaderActions({sx, ...rest}: PageHeaderActionsProps) {
   const style: CSSCustomProperties = {}
   if (sx) {
     // @ts-ignore sx has height attribute
@@ -37,13 +43,16 @@ function PageHeaderActions({sx, ...rest}: PageHeaderActionsProps) {
   return <Box {...rest} as={PrimerPageHeader.Actions} style={style} sx={sx} />
 }
 
+// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
+const PageHeaderActions = ({as, ...props}: PageHeaderProps) => <StyledPageHeaderActions forwardedAs={as} {...props} />
+
 type PageHeaderTitleProps = PropsWithChildren<PrimerPageHeaderTitleProps> & SxProp
 
 type CSSCustomProperties = {
   [key: `--${string}`]: string | number
 }
 
-function PageHeaderTitle({sx, ...rest}: PageHeaderTitleProps) {
+function StyledPageHeaderTitle({sx, ...rest}: PageHeaderTitleProps) {
   const style: CSSCustomProperties = {}
   if (sx) {
     // @ts-ignore sx can have color attribute
@@ -65,6 +74,9 @@ function PageHeaderTitle({sx, ...rest}: PageHeaderTitleProps) {
   return <Box {...rest} as={PrimerPageHeader.Title} style={style} sx={sx} />
 }
 
+// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
+const PageHeaderTitle = ({as, ...props}: PageHeaderTitleProps) => <StyledPageHeaderTitle forwardedAs={as} {...props} />
+
 type PageHeaderTitleAreaProps = PropsWithChildren<PrimerPageHeaderTitleAreaProps> & SxProp
 
 const PageHeaderTitleArea: ForwardRefComponent<'div', PageHeaderTitleAreaProps> = styled(
@@ -75,7 +87,7 @@ const PageHeaderTitleArea: ForwardRefComponent<'div', PageHeaderTitleAreaProps>
   ${sx}
 `
 
-type PageHeaderComponent = ForwardRefComponent<'div', PageHeaderProps> & {
+type PageHeaderComponentType = ForwardRefComponent<'div', PageHeaderProps> & {
   Actions: typeof PageHeaderActions
   ContextArea: typeof PrimerPageHeader.ContextArea
   ParentLink: typeof PrimerPageHeader.ParentLink
@@ -91,7 +103,7 @@ type PageHeaderComponent = ForwardRefComponent<'div', PageHeaderProps> & {
   TrailingAction: typeof PrimerPageHeader.TrailingAction
 }
 
-const PageHeader: PageHeaderComponent = Object.assign(PageHeaderImpl, {
+const PageHeader: PageHeaderComponentType = Object.assign(PageHeaderImpl, {
   Actions: PageHeaderActions,
   ContextArea: PrimerPageHeader.ContextArea,
   ParentLink: PrimerPageHeader.ParentLink,

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

@@ -11,19 +11,28 @@ import {sx, type SxProp} from '../sx'
 
 export type UnderlineNavProps = PrimerUnderlineNavProps & SxProp
 
-const UnderlineNavImpl = forwardRef<HTMLElement, UnderlineNavProps>(function UnderlineNav(props, ref) {
+const StyledUnderlineNav = forwardRef<HTMLElement, UnderlineNavProps>(function UnderlineNav(props, ref) {
   return <Box as={PrimerUnderlineNav} ref={ref} {...props} />
 })
 
+export const UnderlineNavImpl = ({as, ...props}: UnderlineNavProps) => (
+  // @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
+  <StyledUnderlineNav forwardedAs={as} {...props} />
+)
+
 export type UnderlineNavItemProps = PrimerUnderlineNavItemProps & SxProp
 
-const UnderlineNavItem: ForwardRefComponent<'a', UnderlineNavItemProps> = styled(
+const StyledUnderlineNavItem: ForwardRefComponent<'a', UnderlineNavItemProps> = styled(
   PrimerUnderlineNav.Item,
 ).withConfig<UnderlineNavItemProps>({
   shouldForwardProp: prop => prop !== 'sx',
 })`
   ${sx}
 `
+export const UnderlineNavItem = ({as, ...props}: UnderlineNavItemProps) => (
+  // @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
+  <StyledUnderlineNavItem forwardedAs={as} {...props} />
+)
 
 export const UnderlineNav = Object.assign(UnderlineNavImpl, {
   Item: UnderlineNavItem,