Update types for IconButton, ActionMenu.Button, TabNav.Link and internal consumers

src/Button/types.ts

@@ -1,6 +1,5 @@
 import React from 'react'
 import styled from 'styled-components'
-import {IconProps} from '@primer/octicons-react'
 import sx, {SxProp} from '../sx'
 import getGlobalFocusStyles from '../_getGlobalFocusStyles'
 
@@ -37,16 +36,16 @@ export type ButtonProps = {
   /**
    * The leading icon comes before button content
    */
-  leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | null | undefined
+  leadingIcon?: React.ComponentType | null | undefined
   /**
    * The trailing icon comes after button content
    */
-  trailingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | null | undefined
+  trailingIcon?: React.ComponentType | null | undefined
   children: React.ReactNode
 } & ButtonBaseProps
 
 export type IconButtonProps = ButtonA11yProps & {
-  icon: React.FunctionComponent<React.PropsWithChildren<IconProps>>
+  icon: React.ComponentType
 } & Omit<ButtonBaseProps, 'aria-label' | 'aria-labelledby'>
 
 // adopted from React.AnchorHTMLAttributes

src/TabNav.tsx

@@ -1,3 +1,4 @@
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic'
 import classnames from 'classnames'
 import {To} from 'history'
 import React, {useRef, useState} from 'react'
@@ -67,18 +68,18 @@ function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
   )
 }
 
-type StyledTabNavLinkProps = {
+export type TabNavLinkProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & {
   to?: To
   selected?: boolean
 } & SxProp
 
-const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
+const TabNavLink = styled.a.attrs<TabNavLinkProps>(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className),
   role: 'tab',
   'aria-selected': !!props.selected,
   tabIndex: -1,
-}))<StyledTabNavLinkProps>`
+}))<TabNavLinkProps>`
   padding: 8px 12px;
   font-size: ${get('fontSizes.1')};
   line-height: 20px;
@@ -105,9 +106,8 @@ const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
   }
 
   ${sx};
-`
+` as PolymorphicForwardRefComponent<'a', TabNavLinkProps>
 
 TabNavLink.displayName = 'TabNav.Link'
 
-export type TabNavLinkProps = ComponentProps<typeof TabNavLink>
 export default Object.assign(TabNav, {Link: TabNavLink})

src/__tests__/TabNav.types.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import TabNav from '../TabNav'
+import {Button} from '../Button'
 
 export function shouldAcceptCallWithNoProps() {
   return (
@@ -20,3 +21,11 @@ export function shouldNotAcceptSystemProps() {
     </>
   )
 }
+
+export function shouldAcceptButtonAsProps() {
+  return <TabNav.Link as={Button} />
+}
+
+export function shouldAcceptTabNavLinkprops() {
+  return <TabNav.Link to="to something" selected as={Button} />
+}