From f8396de15de36dd77ab94944319430a7619c9916 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Sat, 10 Dec 2022 13:23:49 +0000
Subject: [PATCH 01/14] update types for many buttony things

---
 src/ActionMenu.tsx                      |  5 ++--
 src/Button/ButtonBase.tsx               | 17 ++++++-----
 src/Button/IconButton.tsx               |  8 +++--
 src/Button/types.ts                     | 16 ++++------
 src/__tests__/ActionMenu.types.test.tsx | 20 +++++++++++++
 src/__tests__/Button.types.test.tsx     | 39 +++++++++++++++++++++++--
 src/utils/defaultSxProp.tsx             |  3 ++
 7 files changed, 83 insertions(+), 25 deletions(-)
 create mode 100644 src/__tests__/ActionMenu.types.test.tsx
 create mode 100644 src/utils/defaultSxProp.tsx

diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx
index 558ddf02abb..78a3a31e15e 100644
--- a/src/ActionMenu.tsx
+++ b/src/ActionMenu.tsx
@@ -9,6 +9,7 @@ import {ActionListContainerContext} from './ActionList/ActionListContainerContex
 import {Button, ButtonProps} from './Button'
 import {MandateProps} from './utils/types'
 import {merge, BetterSystemStyleObject} from './sx'
+import {defaultSxProp} from './utils/defaultSxProp'
 
 export type MenuContextProps = Pick<
   AnchoredOverlayProps,
@@ -76,8 +77,8 @@ const Anchor = React.forwardRef<AnchoredOverlayProps['anchorRef'], ActionMenuAnc
 
 /** this component is syntactical sugar 🍭 */
 export type ActionMenuButtonProps = ButtonProps
-const MenuButton = React.forwardRef<AnchoredOverlayProps['anchorRef'], ButtonProps>(
-  ({sx: sxProp = {}, ...props}, anchorRef) => {
+const MenuButton = React.forwardRef<AnchoredOverlayProps['anchorRef'], ActionMenuButtonProps>(
+  ({sx: sxProp = defaultSxProp, ...props}, anchorRef) => {
     return (
       <Anchor ref={anchorRef}>
         <Button
diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx
index 7e01d7a10c9..d2c292bf904 100644
--- a/src/Button/ButtonBase.tsx
+++ b/src/Button/ButtonBase.tsx
@@ -1,14 +1,14 @@
 import React, {ComponentPropsWithRef, forwardRef, useMemo} from 'react'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import Box from '../Box'
-import {merge, SxProp} from '../sx'
+import {BetterSystemStyleObject, merge} from '../sx'
 import {useTheme} from '../ThemeProvider'
 import {ButtonProps, StyledButton} from './types'
 import {getVariantStyles, getSizeStyles, getButtonStyles} from './styles'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
+import {defaultSxProp} from '../utils/defaultSxProp'
 declare let __DEV__: boolean
 
-const defaultSxProp = {}
 const iconWrapStyles = {
   display: 'inline-block',
 }
@@ -17,18 +17,18 @@ const trailingIconStyles = {
   ml: 2,
 }
 
-const ButtonBase = forwardRef<HTMLElement, ButtonProps>(
+const ButtonBase = forwardRef(
   ({children, as: Component = 'button', sx: sxProp = defaultSxProp, ...props}, forwardedRef): JSX.Element => {
     const {leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, variant = 'default', size = 'medium', ...rest} = props
-    const innerRef = React.useRef<HTMLElement>(null)
+    const innerRef = React.useRef<HTMLButtonElement>(null)
     useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
     const {theme} = useTheme()
     const baseStyles = useMemo(() => {
       return merge.all([getButtonStyles(theme), getSizeStyles(size, variant, false), getVariantStyles(variant, theme)])
     }, [theme, size, variant])
-    const sxStyles = useMemo(() => {
-      return merge(baseStyles, sxProp as SxProp)
+    const sxStyles: BetterSystemStyleObject = useMemo(() => {
+      return merge<BetterSystemStyleObject>(baseStyles, sxProp)
     }, [baseStyles, sxProp])
 
     if (__DEV__) {
@@ -40,7 +40,10 @@ const ButtonBase = forwardRef<HTMLElement, ButtonProps>(
        */
       // eslint-disable-next-line react-hooks/rules-of-hooks
       React.useEffect(() => {
-        if (!(innerRef.current instanceof HTMLButtonElement) && !(innerRef.current instanceof HTMLAnchorElement)) {
+        if (
+          !(innerRef.current instanceof HTMLButtonElement) &&
+          !((innerRef.current as unknown) instanceof HTMLAnchorElement)
+        ) {
           // eslint-disable-next-line no-console
           console.warn('This component should be an instanceof a semantic button or anchor')
         }
diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx
index 57fa37ec2b7..9c57fafba2b 100644
--- a/src/Button/IconButton.tsx
+++ b/src/Button/IconButton.tsx
@@ -4,9 +4,11 @@ import {useTheme} from '../ThemeProvider'
 import Box from '../Box'
 import {IconButtonProps, StyledButton} from './types'
 import {getBaseStyles, getSizeStyles, getVariantStyles} from './styles'
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
-const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwardedRef): JSX.Element => {
-  const {variant = 'default', size = 'medium', sx: sxProp = {}, icon: Icon, ...rest} = props
+const IconButton = forwardRef((props, forwardedRef): JSX.Element => {
+  const {variant = 'default', size = 'medium', sx: sxProp = defaultSxProp, icon: Icon, ...rest} = props
   const {theme} = useTheme()
   const sxStyles = merge.all([
     getBaseStyles(theme),
@@ -21,6 +23,6 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwar
       </Box>
     </StyledButton>
   )
-})
+}) as PolymorphicForwardRefComponent<'button' | 'a', IconButtonProps>
 
 export {IconButton}
diff --git a/src/Button/types.ts b/src/Button/types.ts
index 4072002d332..c447087f641 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -1,4 +1,4 @@
-import React, {ComponentPropsWithRef} from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import {IconProps} from '@primer/octicons-react'
 import sx, {SxProp} from '../sx'
@@ -13,14 +13,9 @@ export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outl
 
 export type Size = 'small' | 'medium' | 'large'
 
-/**
- * Remove styled-components polymorphic as prop, which conflicts with radix's
- */
-type StyledButtonProps = Omit<ComponentPropsWithRef<typeof StyledButton>, 'as'>
-
 type ButtonA11yProps =
-  | {'aria-label': string; 'aria-labelledby'?: never}
-  | {'aria-label'?: never; 'aria-labelledby': string}
+  | {'aria-label': string; 'aria-labelledby'?: undefined}
+  | {'aria-label'?: undefined; 'aria-labelledby': string}
 
 export type ButtonBaseProps = {
   /**
@@ -36,8 +31,7 @@ export type ButtonBaseProps = {
    */
   disabled?: boolean
 } & SxProp &
-  React.ButtonHTMLAttributes<HTMLButtonElement> &
-  StyledButtonProps
+  React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
 
 export type ButtonProps = {
   /**
@@ -53,7 +47,7 @@ export type ButtonProps = {
 
 export type IconButtonProps = ButtonA11yProps & {
   icon: React.FunctionComponent<React.PropsWithChildren<IconProps>>
-} & ButtonBaseProps
+} & Omit<ButtonBaseProps, 'aria-label' | 'aria-labelledby'>
 
 // adopted from React.AnchorHTMLAttributes
 export type LinkButtonProps = {
diff --git a/src/__tests__/ActionMenu.types.test.tsx b/src/__tests__/ActionMenu.types.test.tsx
new file mode 100644
index 00000000000..38e954a5754
--- /dev/null
+++ b/src/__tests__/ActionMenu.types.test.tsx
@@ -0,0 +1,20 @@
+import {ActionMenu} from '..'
+import React from 'react'
+
+export function actionButtonWithoutProps() {
+  //@ts-expect-error requires children
+  return <ActionMenu.Button />
+}
+
+export function actionButtonWithChildren() {
+  return <ActionMenu.Button>Click me!</ActionMenu.Button>
+}
+
+export function actionButtonWithOptionalProps() {
+  return <ActionMenu.Button size="small">Click me!</ActionMenu.Button>
+}
+
+export function actionButtonWithInvalidSize() {
+  //@ts-expect-error size must be one of the valid values
+  return <ActionMenu.Button size="some-unknownsize">Click me!</ActionMenu.Button>
+}
diff --git a/src/__tests__/Button.types.test.tsx b/src/__tests__/Button.types.test.tsx
index 5509e866d18..a58e486eb33 100644
--- a/src/__tests__/Button.types.test.tsx
+++ b/src/__tests__/Button.types.test.tsx
@@ -1,12 +1,13 @@
+import {StopIcon} from '@primer/octicons-react'
 import React, {useRef} from 'react'
-import {Button} from '../Button'
+import {Button, IconButton} from '../Button'
 
 export function shouldAcceptOnlyAChildProp() {
   return <Button>child</Button>
 }
 
 export function ShouldAcceptKnownButtonPropsAndDomProps() {
-  const buttonEl = useRef<HTMLButtonElement>()
+  const buttonEl = useRef<HTMLButtonElement | null>(null)
   return (
     <Button
       ref={buttonEl}
@@ -33,3 +34,37 @@ export function shouldNotAcceptOutlandishProps() {
   // @ts-expect-error system props should not be accepted
   return <Button anOutlandshPropThatShouldNotBeAllowedOnA={'Button'} />
 }
+
+export function iconButtonRequiredProps() {
+  return (
+    <>
+      <IconButton icon={StopIcon} aria-label="Stop icon" />
+      <IconButton icon={StopIcon} aria-labelledby="Stop icon" />
+    </>
+  )
+}
+
+export function iconButtonShouldNotHaveLabelAndLabelledBy() {
+  // @ts-expect-error aria-label and aria-labelledby should not be allowed together
+  return <IconButton icon={StopIcon} aria-label="Stop icon" aria-labelledby="Stop icon" />
+}
+
+export function iconButtonRequiresAnIcon() {
+  // @ts-expect-error icon is required
+  return <IconButton aria-label="Stop icon" />
+}
+
+export function iconButtonOptionalProps() {
+  return (
+    <>
+      <IconButton icon={StopIcon} aria-label="Stop icon" size="small" />
+      <IconButton icon={StopIcon} aria-label="Stop icon" variant="danger" />
+      <IconButton icon={StopIcon} aria-label="Stop icon" sx={{m: 1}} />
+    </>
+  )
+}
+
+export function iconButtonShouldNotAcceptOutlandishProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Button icon={StopIcon} aria-label="Stop icon" anOutlandshPropThatShouldNotBeAllowedOnA={'Button'} />
+}
diff --git a/src/utils/defaultSxProp.tsx b/src/utils/defaultSxProp.tsx
new file mode 100644
index 00000000000..14c7015ac5d
--- /dev/null
+++ b/src/utils/defaultSxProp.tsx
@@ -0,0 +1,3 @@
+import {BetterSystemStyleObject} from '../sx'
+
+export const defaultSxProp: BetterSystemStyleObject = {}

From 22d54d0599818f4c0047e0d7da931730cabf2ed7 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Sat, 10 Dec 2022 13:36:29 +0000
Subject: [PATCH 02/14] update anchor type

---
 src/ActionMenu.tsx | 47 ++++++++++++++++++++++------------------------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx
index 78a3a31e15e..d5ae91f9171 100644
--- a/src/ActionMenu.tsx
+++ b/src/ActionMenu.tsx
@@ -10,6 +10,7 @@ import {Button, ButtonProps} from './Button'
 import {MandateProps} from './utils/types'
 import {merge, BetterSystemStyleObject} from './sx'
 import {defaultSxProp} from './utils/defaultSxProp'
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic'
 
 export type MenuContextProps = Pick<
   AnchoredOverlayProps,
@@ -69,34 +70,30 @@ const Menu: React.FC<React.PropsWithChildren<ActionMenuProps>> = ({
 }
 
 export type ActionMenuAnchorProps = {children: React.ReactElement}
-const Anchor = React.forwardRef<AnchoredOverlayProps['anchorRef'], ActionMenuAnchorProps>(
-  ({children, ...anchorProps}, anchorRef) => {
-    return React.cloneElement(children, {...anchorProps, ref: anchorRef})
-  },
-)
+const Anchor = React.forwardRef<HTMLElement, ActionMenuAnchorProps>(({children, ...anchorProps}, anchorRef) => {
+  return React.cloneElement(children, {...anchorProps, ref: anchorRef})
+})
 
 /** this component is syntactical sugar 🍭 */
 export type ActionMenuButtonProps = ButtonProps
-const MenuButton = React.forwardRef<AnchoredOverlayProps['anchorRef'], ActionMenuButtonProps>(
-  ({sx: sxProp = defaultSxProp, ...props}, anchorRef) => {
-    return (
-      <Anchor ref={anchorRef}>
-        <Button
-          type="button"
-          trailingIcon={TriangleDownIcon}
-          sx={merge<BetterSystemStyleObject>(
-            {
-              // override the margin on caret for optical alignment
-              '[data-component=trailingIcon]': {marginX: -1},
-            },
-            sxProp,
-          )}
-          {...props}
-        />
-      </Anchor>
-    )
-  },
-)
+const MenuButton = React.forwardRef(({sx: sxProp = defaultSxProp, ...props}, anchorRef) => {
+  return (
+    <Anchor ref={anchorRef}>
+      <Button
+        type="button"
+        trailingIcon={TriangleDownIcon}
+        sx={merge<BetterSystemStyleObject>(
+          {
+            // override the margin on caret for optical alignment
+            '[data-component=trailingIcon]': {marginX: -1},
+          },
+          sxProp,
+        )}
+        {...props}
+      />
+    </Anchor>
+  )
+}) as PolymorphicForwardRefComponent<'button', ActionMenuButtonProps>
 
 type MenuOverlayProps = Partial<OverlayProps> &
   Pick<AnchoredOverlayProps, 'align'> & {

From ff81b15e9f7e6712f500f12578cd6abb51758d01 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Sat, 10 Dec 2022 13:38:10 +0000
Subject: [PATCH 03/14] changeset

---
 .changeset/cuddly-rules-taste.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/cuddly-rules-taste.md

diff --git a/.changeset/cuddly-rules-taste.md b/.changeset/cuddly-rules-taste.md
new file mode 100644
index 00000000000..26d35b61477
--- /dev/null
+++ b/.changeset/cuddly-rules-taste.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+update types for button extensions

From 821d8889379bc1bd23ef5012a809a96bbf9a9ccf Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Sat, 10 Dec 2022 13:44:03 +0000
Subject: [PATCH 04/14] avoid a type assignment for button component

---
 src/Button/Button.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index 1b974f0a8e1..97d2961fe51 100644
--- a/src/Button/Button.tsx
+++ b/src/Button/Button.tsx
@@ -3,16 +3,13 @@ import {ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
-const ButtonComponent: PolymorphicForwardRefComponent<'button', ButtonProps> = forwardRef<
-  HTMLButtonElement,
-  ButtonProps
->(({children, ...props}, forwardedRef): JSX.Element => {
+const ButtonComponent = forwardRef(({children, ...props}, forwardedRef): JSX.Element => {
   return (
     <ButtonBase ref={forwardedRef} as="button" {...props}>
       {children}
     </ButtonBase>
   )
-})
+}) as PolymorphicForwardRefComponent<'button', ButtonProps>
 
 ButtonComponent.displayName = 'Button'
 

From 4acd67277b0dfbce3b275dda4919ad2a2fde7a4b Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Sat, 10 Dec 2022 13:46:30 +0000
Subject: [PATCH 05/14] use default sx propr broader

---
 src/ActionList/Item.tsx                             | 3 ++-
 src/ActionList/List.tsx                             | 3 ++-
 src/Button/ButtonCounter.tsx                        | 3 ++-
 src/NavList/NavList.tsx                             | 7 ++++---
 src/SegmentedControl/SegmentedControl.tsx           | 3 ++-
 src/SegmentedControl/SegmentedControlButton.tsx     | 3 ++-
 src/SegmentedControl/SegmentedControlIconButton.tsx | 3 ++-
 src/Token/Token.tsx                                 | 3 ++-
 src/UnderlineNav2/UnderlineNav.tsx                  | 3 ++-
 src/UnderlineNav2/UnderlineNavItem.tsx              | 3 ++-
 10 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
index ca97e3a727a..5de4b8a1f77 100644
--- a/src/ActionList/Item.tsx
+++ b/src/ActionList/Item.tsx
@@ -10,6 +10,7 @@ import {ActionListGroupProps, GroupContext} from './Group'
 import {ActionListProps, ListContext} from './List'
 import {Selection} from './Selection'
 import {ActionListItemProps, Slots, TEXT_ROW_HEIGHT, getVariantStyles} from './shared'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 const LiBox = styled.li<SxProp>(sx)
 
@@ -21,7 +22,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       selected = undefined,
       active = false,
       onSelect,
-      sx: sxProp = {},
+      sx: sxProp = defaultSxProp,
       id,
       role,
       _PrivateItemWrapper,
diff --git a/src/ActionList/List.tsx b/src/ActionList/List.tsx
index 3a469e7d0ac..49bad483177 100644
--- a/src/ActionList/List.tsx
+++ b/src/ActionList/List.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import sx, {SxProp, merge} from '../sx'
 import {AriaRole} from '../utils/types'
 import {ActionListContainerContext} from './ActionListContainerContext'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 export type ActionListProps = {
   /**
@@ -31,7 +32,7 @@ const ListBox = styled.ul<SxProp>(sx)
 
 export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
   (
-    {variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = {}, ...props},
+    {variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = defaultSxProp, ...props},
     forwardedRef,
   ): JSX.Element => {
     const styles = {
diff --git a/src/Button/ButtonCounter.tsx b/src/Button/ButtonCounter.tsx
index bc386530d08..9afc381a6a8 100644
--- a/src/Button/ButtonCounter.tsx
+++ b/src/Button/ButtonCounter.tsx
@@ -1,12 +1,13 @@
 import React from 'react'
 import {SxProp} from '../sx'
 import CounterLabel from '../CounterLabel'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 export type CounterProps = {
   children: number
 } & SxProp
 
-const Counter = ({children, sx: sxProp = {}, ...props}: CounterProps) => {
+const Counter = ({children, sx: sxProp = defaultSxProp, ...props}: CounterProps) => {
   return (
     <CounterLabel data-component="ButtonCounter" sx={{ml: 2, ...sxProp}} {...props}>
       {children}
diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx
index 1763dd8018e..5064f279f6c 100644
--- a/src/NavList/NavList.tsx
+++ b/src/NavList/NavList.tsx
@@ -12,6 +12,7 @@ import {
 import Box from '../Box'
 import StyledOcticon from '../StyledOcticon'
 import sx, {merge, SxProp} from '../sx'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 // ----------------------------------------------------------------------------
 // NavList
@@ -43,7 +44,7 @@ export type NavListItemProps = {
 } & SxProp
 
 const Item = React.forwardRef<HTMLAnchorElement, NavListItemProps>(
-  ({'aria-current': ariaCurrent, children, sx: sxProp = {}, ...props}, ref) => {
+  ({'aria-current': ariaCurrent, children, sx: sxProp = defaultSxProp, ...props}, ref) => {
     const {depth} = React.useContext(SubNavContext)
 
     // Get SubNav from children
@@ -102,7 +103,7 @@ const ItemWithSubNavContext = React.createContext<{buttonId: string; subNavId: s
 
 // TODO: ref prop
 // TODO: Animate open/close transition
-function ItemWithSubNav({children, subNav, sx: sxProp = {}}: ItemWithSubNavProps) {
+function ItemWithSubNav({children, subNav, sx: sxProp = defaultSxProp}: ItemWithSubNavProps) {
   const buttonId = useSSRSafeId()
   const subNavId = useSSRSafeId()
   const [isOpen, setIsOpen] = React.useState(false)
@@ -167,7 +168,7 @@ const SubNavContext = React.createContext<{depth: number}>({depth: 0})
 
 // TODO: ref prop
 // NOTE: SubNav must be a direct child of an Item
-const SubNav = ({children, sx: sxProp = {}}: NavListSubNavProps) => {
+const SubNav = ({children, sx: sxProp = defaultSxProp}: NavListSubNavProps) => {
   const {buttonId, subNavId, isOpen} = React.useContext(ItemWithSubNavContext)
   const {depth} = React.useContext(SubNavContext)
 
diff --git a/src/SegmentedControl/SegmentedControl.tsx b/src/SegmentedControl/SegmentedControl.tsx
index 35bd5722bc6..ddbe0bd8b4e 100644
--- a/src/SegmentedControl/SegmentedControl.tsx
+++ b/src/SegmentedControl/SegmentedControl.tsx
@@ -8,6 +8,7 @@ import sx, {merge, SxProp} from '../sx'
 import {ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
 import {ViewportRangeKeys} from '../utils/types/ViewportRangeKeys'
 import styled from 'styled-components'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 type WidthOnlyViewportRangeKeys = Exclude<ViewportRangeKeys, 'narrowLandscape' | 'portrait' | 'landscape'>
 
@@ -51,7 +52,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
   fullWidth,
   onChange,
   size,
-  sx: sxProp = {},
+  sx: sxProp = defaultSxProp,
   variant,
   ...rest
 }) => {
diff --git a/src/SegmentedControl/SegmentedControlButton.tsx b/src/SegmentedControl/SegmentedControlButton.tsx
index e695d118e9d..263b03edb97 100644
--- a/src/SegmentedControl/SegmentedControlButton.tsx
+++ b/src/SegmentedControl/SegmentedControlButton.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import Box from '../Box'
 import sx, {merge, SxProp} from '../sx'
 import {getSegmentedControlButtonStyles, getSegmentedControlListItemStyles} from './getSegmentedControlStyles'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 export type SegmentedControlButtonProps = {
   /** The visible label rendered in the button */
@@ -25,7 +26,7 @@ const SegmentedControlButton: React.FC<React.PropsWithChildren<SegmentedControlB
   children,
   leadingIcon: LeadingIcon,
   selected,
-  sx: sxProp = {},
+  sx: sxProp = defaultSxProp,
   ...rest
 }) => {
   const mergedSx = merge(getSegmentedControlListItemStyles(), sxProp as SxProp)
diff --git a/src/SegmentedControl/SegmentedControlIconButton.tsx b/src/SegmentedControl/SegmentedControlIconButton.tsx
index 9b0dd0b8536..3ba844b6f67 100644
--- a/src/SegmentedControl/SegmentedControlIconButton.tsx
+++ b/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -5,6 +5,7 @@ import sx, {merge, SxProp} from '../sx'
 import {getSegmentedControlButtonStyles, getSegmentedControlListItemStyles} from './getSegmentedControlStyles'
 import Tooltip from '../Tooltip'
 import Box from '../Box'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 export type SegmentedControlIconButtonProps = {
   'aria-label': string
@@ -31,7 +32,7 @@ export const SegmentedControlIconButton: React.FC<React.PropsWithChildren<Segmen
   'aria-label': ariaLabel,
   icon: Icon,
   selected,
-  sx: sxProp = {},
+  sx: sxProp = defaultSxProp,
   ...rest
 }) => {
   const mergedSx = merge(
diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx
index 4305a5fe033..c6734cd733b 100644
--- a/src/Token/Token.tsx
+++ b/src/Token/Token.tsx
@@ -1,6 +1,7 @@
 import React, {forwardRef, MouseEventHandler} from 'react'
 import Box from '../Box'
 import {merge, SxProp} from '../sx'
+import {defaultSxProp} from '../utils/defaultSxProp'
 import TokenBase, {defaultTokenSize, isTokenInteractive, TokenBaseProps} from './TokenBase'
 import RemoveTokenButton from './_RemoveTokenButton'
 import TokenTextContainer from './_TokenTextContainer'
@@ -39,7 +40,7 @@ const Token = forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement
       hideRemoveButton,
       href,
       onClick,
-      sx: sxProp = {},
+      sx: sxProp = defaultSxProp,
       ...rest
     } = props
     const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton
diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
index 46f708f2e75..d6c5084afcc 100644
--- a/src/UnderlineNav2/UnderlineNav.tsx
+++ b/src/UnderlineNav2/UnderlineNav.tsx
@@ -16,6 +16,7 @@ import {useOnEscapePress} from '../hooks/useOnEscapePress'
 import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
 import {ActionList} from '../ActionList'
 import {useSSRSafeId} from '@react-aria/ssr'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 export type UnderlineNavProps = {
   'aria-label'?: React.AriaAttributes['aria-label']
@@ -134,7 +135,7 @@ export const UnderlineNav = forwardRef(
       as = 'nav',
       align,
       'aria-label': ariaLabel,
-      sx: sxProp = {},
+      sx: sxProp = defaultSxProp,
       afterSelect,
       variant = 'default',
       loadingCounters = false,
diff --git a/src/UnderlineNav2/UnderlineNavItem.tsx b/src/UnderlineNav2/UnderlineNavItem.tsx
index 14b2f25762b..75d7f6c812c 100644
--- a/src/UnderlineNav2/UnderlineNavItem.tsx
+++ b/src/UnderlineNav2/UnderlineNavItem.tsx
@@ -8,6 +8,7 @@ import CounterLabel from '../CounterLabel'
 import {getLinkStyles, wrapperStyles, iconWrapStyles, counterStyles} from './styles'
 import {LoadingCounter} from './LoadingCounter'
 import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 // adopted from React.AnchorHTMLAttributes
 type LinkProps = {
@@ -53,7 +54,7 @@ export type UnderlineNavItemProps = {
 export const UnderlineNavItem = forwardRef(
   (
     {
-      sx: sxProp = {},
+      sx: sxProp = defaultSxProp,
       as: Component = 'a',
       href = '#',
       children,

From e731b2b754c4e8a447e4980ffbd8001cef4861fb Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Sat, 10 Dec 2022 13:53:31 +0000
Subject: [PATCH 06/14] slight type tweak

---
 src/Button/LinkButton.tsx | 15 +++++++++++----
 src/Button/types.ts       |  2 +-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/Button/LinkButton.tsx b/src/Button/LinkButton.tsx
index e8aed6d4b8d..64b832de503 100644
--- a/src/Button/LinkButton.tsx
+++ b/src/Button/LinkButton.tsx
@@ -3,11 +3,12 @@ import {merge, SxProp} from '../sx'
 import {LinkButtonProps} from './types'
 import {ButtonBase, ButtonBaseProps} from './ButtonBase'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 type MyProps = LinkButtonProps & ButtonBaseProps
 
-const LinkButton = forwardRef<HTMLElement, MyProps>(
-  ({children, as: Component = 'a', sx = {}, ...props}, forwardedRef): JSX.Element => {
+const LinkButton = forwardRef(
+  ({children, as: Component = 'a', sx = defaultSxProp, ...props}, forwardedRef): JSX.Element => {
     const style = {
       width: 'fit-content',
       '&:hover:not([disabled])': {
@@ -23,11 +24,17 @@ const LinkButton = forwardRef<HTMLElement, MyProps>(
     }
     const sxStyle = merge.all([style, sx as SxProp])
     return (
-      <ButtonBase as={Component} ref={forwardedRef} sx={sxStyle} {...props}>
+      <ButtonBase
+        as={Component}
+        // @ts-expect-error ButtonBase wants both Anchor and Button refs
+        ref={forwardedRef}
+        sx={sxStyle}
+        {...props}
+      >
         {children}
       </ButtonBase>
     )
   },
-) as PolymorphicForwardRefComponent<'a', ButtonBaseProps>
+) as PolymorphicForwardRefComponent<'a', MyProps>
 
 export {LinkButton}
diff --git a/src/Button/types.ts b/src/Button/types.ts
index c447087f641..e065730a7ae 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -31,7 +31,7 @@ export type ButtonBaseProps = {
    */
   disabled?: boolean
 } & SxProp &
-  React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+  React.ButtonHTMLAttributes<HTMLButtonElement>
 
 export type ButtonProps = {
   /**

From 73b782912ba5837bd50b2d707ef1d2a81f32be8a Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Sat, 10 Dec 2022 14:10:07 +0000
Subject: [PATCH 07/14] fixup invalid types

---
 src/Button/IconButton.stories.tsx           | 10 ++++++----
 src/Button/IconButton.tsx                   |  7 ++++++-
 src/Button/types.ts                         |  4 ++--
 src/PageHeader/PageHeader.stories.tsx       |  4 ++--
 src/PageHeader/PageHeader.test.tsx          |  8 ++++----
 src/PageHeader/features.stories.tsx         |  2 +-
 src/UnderlineNav2/UnderlineNav.tsx          |  2 +-
 src/_TextInputInnerAction.tsx               |  3 ++-
 src/drafts/MarkdownEditor/_SavedReplies.tsx |  9 ++++++++-
 src/drafts/MarkdownEditor/_ViewSwitch.tsx   |  2 +-
 src/stories/ActionMenu/examples.stories.tsx |  2 +-
 src/stories/ActionMenu/fixtures.stories.tsx |  1 +
 12 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/Button/IconButton.stories.tsx b/src/Button/IconButton.stories.tsx
index 4418fac7ffc..3dbeed2c2ac 100644
--- a/src/Button/IconButton.stories.tsx
+++ b/src/Button/IconButton.stories.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
+import React, {ComponentProps} from 'react'
 import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} from '@primer/octicons-react'
 import {Story, Meta} from '@storybook/react'
 import {IconButton} from '.'
 import {OcticonArgType} from '../utils/story-helpers'
 
-export default {
+const meta: Meta<ComponentProps<typeof IconButton>> = {
   title: 'Components/IconButton',
   argTypes: {
     size: {
@@ -33,6 +33,8 @@ export default {
     'aria-label': 'Icon button description',
     icon: XIcon,
   },
-} as Meta<typeof IconButton>
+}
 
-export const Playground: Story<typeof IconButton> = args => <IconButton {...args} />
+export default meta
+
+export const Playground: Story<ComponentProps<typeof IconButton>> = args => <IconButton {...args} />
diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx
index 9c57fafba2b..09364f17f8a 100644
--- a/src/Button/IconButton.tsx
+++ b/src/Button/IconButton.tsx
@@ -17,7 +17,12 @@ const IconButton = forwardRef((props, forwardedRef): JSX.Element => {
     sxProp as SxProp,
   ])
   return (
-    <StyledButton sx={sxStyles} {...rest} ref={forwardedRef}>
+    <StyledButton
+      sx={sxStyles}
+      {...rest}
+      // @ts-expect-error StyledButton wants both Anchor and Button refs, not one or the other
+      ref={forwardedRef}
+    >
       <Box as="span" sx={{display: 'inline-block'}}>
         <Icon />
       </Box>
diff --git a/src/Button/types.ts b/src/Button/types.ts
index e065730a7ae..6a98c2de84c 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -37,11 +37,11 @@ export type ButtonProps = {
   /**
    * The leading icon comes before button content
    */
-  leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
+  leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | null | undefined
   /**
    * The trailing icon comes after button content
    */
-  trailingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
+  trailingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | null | undefined
   children: React.ReactNode
 } & ButtonBaseProps
 
diff --git a/src/PageHeader/PageHeader.stories.tsx b/src/PageHeader/PageHeader.stories.tsx
index c781473185d..63db45e443d 100644
--- a/src/PageHeader/PageHeader.stories.tsx
+++ b/src/PageHeader/PageHeader.stories.tsx
@@ -217,7 +217,7 @@ const Template: Story = args => (
         }}
       >
         <PageHeader.LeadingAction hidden={!args.hasLeadingAction}>
-          <IconButton icon={SidebarExpandIcon} variant="invisible" />{' '}
+          <IconButton aria-label="Expand" icon={SidebarExpandIcon} variant="invisible" />{' '}
         </PageHeader.LeadingAction>
         <PageHeader.LeadingVisual hidden={!args.hasLeadingVisual}>{<args.LeadingVisual />}</PageHeader.LeadingVisual>
         <PageHeader.Title as={args['Title.as']} hidden={!args.hasTitle}>
@@ -227,7 +227,7 @@ const Template: Story = args => (
           <Label>Beta</Label>
         </PageHeader.TrailingVisual>
         <PageHeader.TrailingAction hidden={!args.hasTrailingAction}>
-          <IconButton icon={PencilIcon} variant="invisible" />
+          <IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
         </PageHeader.TrailingAction>
         <PageHeader.Actions hidden={!args.hasActions}>
           <Hidden on={['narrow']}>
diff --git a/src/PageHeader/PageHeader.test.tsx b/src/PageHeader/PageHeader.test.tsx
index 81d726637a2..696ea1416fb 100644
--- a/src/PageHeader/PageHeader.test.tsx
+++ b/src/PageHeader/PageHeader.test.tsx
@@ -91,11 +91,11 @@ describe('PageHeader', () => {
         <PageHeader.ContextArea>ContextArea</PageHeader.ContextArea>
         <PageHeader.TitleArea>
           <PageHeader.LeadingAction>
-            <IconButton data-testid="LeadingAction" icon={SidebarExpandIcon} variant="invisible" />
+            <IconButton aria-label="Expand" data-testid="LeadingAction" icon={SidebarExpandIcon} variant="invisible" />
           </PageHeader.LeadingAction>
           <PageHeader.Title>Title</PageHeader.Title>
           <PageHeader.TrailingAction>
-            <IconButton data-testid="TrailingAction" icon={PencilIcon} variant="invisible" />
+            <IconButton aria-label="edit" data-testid="TrailingAction" icon={PencilIcon} variant="invisible" />
           </PageHeader.TrailingAction>
         </PageHeader.TitleArea>
         <PageHeader.Description></PageHeader.Description>
@@ -129,7 +129,7 @@ describe('PageHeader', () => {
         <PageHeader.TitleArea variant="large">
           <PageHeader.LeadingAction>
             Leading Action
-            <IconButton icon={SidebarExpandIcon} variant="invisible" />
+            <IconButton aria-label="expand" icon={SidebarExpandIcon} variant="invisible" />
           </PageHeader.LeadingAction>
           <PageHeader.LeadingVisual>
             Leading Visual
@@ -138,7 +138,7 @@ describe('PageHeader', () => {
           <PageHeader.Title>Title</PageHeader.Title>
           <PageHeader.TrailingAction>
             Trailing Action
-            <IconButton icon={PencilIcon} variant="invisible" />
+            <IconButton aria-label="edit" icon={PencilIcon} variant="invisible" />
           </PageHeader.TrailingAction>
           <PageHeader.TrailingVisual>
             Trailing Visual
diff --git a/src/PageHeader/features.stories.tsx b/src/PageHeader/features.stories.tsx
index ccd9c89a351..70838961c95 100644
--- a/src/PageHeader/features.stories.tsx
+++ b/src/PageHeader/features.stories.tsx
@@ -69,7 +69,7 @@ export const TitleWithTrailingAction = () => (
         <PageHeader.Title>Primer Backlog</PageHeader.Title>
 
         <PageHeader.TrailingAction>
-          <IconButton icon={PencilIcon} variant="invisible" label="Rename Title" />
+          <IconButton icon={PencilIcon} variant="invisible" aria-label="Rename Title" />
         </PageHeader.TrailingAction>
         <PageHeader.Actions
           hidden={{
diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
index d6c5084afcc..73f7831fde5 100644
--- a/src/UnderlineNav2/UnderlineNav.tsx
+++ b/src/UnderlineNav2/UnderlineNav.tsx
@@ -21,7 +21,7 @@ import {defaultSxProp} from '../utils/defaultSxProp'
 export type UnderlineNavProps = {
   'aria-label'?: React.AriaAttributes['aria-label']
   as?: React.ElementType
-  sx?: SxProp
+  sx?: SxProp['sx']
   // cariant and align are currently not in used. Keeping here until some design explorations are finalized.
   variant?: 'default' | 'small'
   align?: 'right'
diff --git a/src/_TextInputInnerAction.tsx b/src/_TextInputInnerAction.tsx
index 73f87603a46..fdadc436761 100644
--- a/src/_TextInputInnerAction.tsx
+++ b/src/_TextInputInnerAction.tsx
@@ -84,10 +84,11 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
               variant={variant}
               type="button"
               icon={icon}
-              aria-label={ariaLabel}
               size="small"
               sx={sx}
               {...rest}
+              aria-label={ariaLabel as unknown as string}
+              aria-labelledby={undefined}
               ref={forwardedRef}
             />
           </Tooltip>
diff --git a/src/drafts/MarkdownEditor/_SavedReplies.tsx b/src/drafts/MarkdownEditor/_SavedReplies.tsx
index 38e5f959c59..d10b4b4ee5f 100644
--- a/src/drafts/MarkdownEditor/_SavedReplies.tsx
+++ b/src/drafts/MarkdownEditor/_SavedReplies.tsx
@@ -86,7 +86,14 @@ export const SavedRepliesButton = () => {
 
   return items ? (
     <SelectPanel
-      renderAnchor={props => <ToolbarButton {...props} icon={ReplyIcon} aria-label="Add saved reply (Ctrl + .)" />}
+      renderAnchor={props => (
+        <ToolbarButton
+          {...props}
+          icon={ReplyIcon}
+          aria-label="Add saved reply (Ctrl + .)"
+          aria-labelledby={undefined}
+        />
+      )}
       open={open}
       onOpenChange={setOpen}
       items={items}
diff --git a/src/drafts/MarkdownEditor/_ViewSwitch.tsx b/src/drafts/MarkdownEditor/_ViewSwitch.tsx
index 34c4f757a63..324f5c4673a 100644
--- a/src/drafts/MarkdownEditor/_ViewSwitch.tsx
+++ b/src/drafts/MarkdownEditor/_ViewSwitch.tsx
@@ -45,7 +45,7 @@ export const ViewSwitch = ({selectedView, onViewSelect, onLoadPreview, disabled}
   return (
     <Box sx={{display: 'flex', flexDirection: 'row'}}>
       {condensed ? (
-        <IconButton {...sharedProps} disabled={disabled} icon={icon} label={label} />
+        <IconButton {...sharedProps} disabled={disabled} icon={icon} aria-label={label} />
       ) : (
         <Button {...sharedProps} leadingIcon={icon} disabled={disabled}>
           {label}
diff --git a/src/stories/ActionMenu/examples.stories.tsx b/src/stories/ActionMenu/examples.stories.tsx
index 500e9854b01..55e9628e040 100644
--- a/src/stories/ActionMenu/examples.stories.tsx
+++ b/src/stories/ActionMenu/examples.stories.tsx
@@ -313,7 +313,7 @@ export function MixedSelection(): JSX.Element {
       </p>
 
       <ActionMenu>
-        <ActionMenu.Button aria-label="Group by" leadingIcon={selectedOption && selectedOption.icon}>
+        <ActionMenu.Button aria-label="Group by" leadingIcon={selectedOption ? selectedOption.icon : undefined}>
           {selectedOption ? `Group by ${selectedOption.text}` : 'Group items by'}
         </ActionMenu.Button>
         <ActionMenu.Overlay width="medium">
diff --git a/src/stories/ActionMenu/fixtures.stories.tsx b/src/stories/ActionMenu/fixtures.stories.tsx
index 000e285b6d4..8426d5fdebd 100644
--- a/src/stories/ActionMenu/fixtures.stories.tsx
+++ b/src/stories/ActionMenu/fixtures.stories.tsx
@@ -427,6 +427,7 @@ export function MemexViewOptionsMenu(): JSX.Element {
         <ActionMenu open={open} onOpenChange={setOpen}>
           <ActionMenu.Anchor aria-label="Open View options menu">
             <IconButton
+              aria-label="Open View options menu"
               icon={TriangleDownIcon}
               sx={{
                 padding: '0 1px',

From 4c5f3eea46fd6c1fc5a8826831c6b81ce0bea281 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Mon, 12 Dec 2022 19:22:59 +0000
Subject: [PATCH 08/14] scope readonly to dev

---
 src/Button/ButtonBase.tsx         | 1 -
 src/global.d.ts                   | 2 ++
 src/hooks/useControllableState.ts | 1 -
 src/utils/defaultSxProp.tsx       | 4 +++-
 src/utils/deprecate.tsx           | 1 -
 5 files changed, 5 insertions(+), 4 deletions(-)
 create mode 100644 src/global.d.ts

diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx
index d2c292bf904..15443f7fef0 100644
--- a/src/Button/ButtonBase.tsx
+++ b/src/Button/ButtonBase.tsx
@@ -7,7 +7,6 @@ import {ButtonProps, StyledButton} from './types'
 import {getVariantStyles, getSizeStyles, getButtonStyles} from './styles'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import {defaultSxProp} from '../utils/defaultSxProp'
-declare let __DEV__: boolean
 
 const iconWrapStyles = {
   display: 'inline-block',
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 00000000000..4781b52c003
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-var
+declare var __DEV__: boolean
diff --git a/src/hooks/useControllableState.ts b/src/hooks/useControllableState.ts
index c85f253f21a..de7dcb41896 100644
--- a/src/hooks/useControllableState.ts
+++ b/src/hooks/useControllableState.ts
@@ -1,5 +1,4 @@
 import React from 'react'
-declare let __DEV__: boolean
 
 type ControllableStateOptions<T> = {
   /**
diff --git a/src/utils/defaultSxProp.tsx b/src/utils/defaultSxProp.tsx
index 14c7015ac5d..71f1e60c385 100644
--- a/src/utils/defaultSxProp.tsx
+++ b/src/utils/defaultSxProp.tsx
@@ -1,3 +1,5 @@
 import {BetterSystemStyleObject} from '../sx'
 
-export const defaultSxProp: BetterSystemStyleObject = {}
+export const defaultSxProp: Readonly<BetterSystemStyleObject> = __DEV__
+  ? Object.freeze<BetterSystemStyleObject>({})
+  : {}
diff --git a/src/utils/deprecate.tsx b/src/utils/deprecate.tsx
index 49c29205fa0..70a91ae298d 100644
--- a/src/utils/deprecate.tsx
+++ b/src/utils/deprecate.tsx
@@ -1,5 +1,4 @@
 import {useRef, useCallback} from 'react'
-declare let __DEV__: boolean
 
 type DeprecationType = {name: string; message: string; version: string}
 

From 96a6224448b283850841df032a2dfcd44359c9d1 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Sat, 17 Dec 2022 08:00:12 -0500
Subject: [PATCH 09/14] update tabnavlink to work with button props

---
 src/Button/types.ts                 |  7 +++----
 src/TabNav.tsx                      | 10 +++++-----
 src/__tests__/TabNav.types.test.tsx |  9 +++++++++
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/Button/types.ts b/src/Button/types.ts
index 6a98c2de84c..f68372b620c 100644
--- a/src/Button/types.ts
+++ b/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
diff --git a/src/TabNav.tsx b/src/TabNav.tsx
index 79b859d2518..4ed70de71ad 100644
--- a/src/TabNav.tsx
+++ b/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})
diff --git a/src/__tests__/TabNav.types.test.tsx b/src/__tests__/TabNav.types.test.tsx
index a0e3dd0b90a..f1f14d83fb4 100644
--- a/src/__tests__/TabNav.types.test.tsx
+++ b/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} />
+}

From bf1f55e24c316dad6651f1578bbed243bb8f5ceb Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Sat, 17 Dec 2022 08:04:12 -0500
Subject: [PATCH 10/14] explitly allow href, even if as doesnt support it

---
 src/TabNav.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/TabNav.tsx b/src/TabNav.tsx
index 4ed70de71ad..d77f2aa4123 100644
--- a/src/TabNav.tsx
+++ b/src/TabNav.tsx
@@ -71,6 +71,7 @@ function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
 export type TabNavLinkProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & {
   to?: To
   selected?: boolean
+  href?: string
 } & SxProp
 
 const TabNavLink = styled.a.attrs<TabNavLinkProps>(props => ({

From a324bea03763ae61a5db75882f5ef6ae294f55dc Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Tue, 27 Dec 2022 18:39:47 +0000
Subject: [PATCH 11/14] lint

---
 src/stories/ActionMenu/fixtures.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/ActionMenu/fixtures.stories.tsx b/src/stories/ActionMenu/fixtures.stories.tsx
index b2cb4a0209d..f40e78a9714 100644
--- a/src/stories/ActionMenu/fixtures.stories.tsx
+++ b/src/stories/ActionMenu/fixtures.stories.tsx
@@ -422,7 +422,7 @@ export function MemexViewOptionsMenu(): JSX.Element {
         </Text>
         <ActionMenu open={open} onOpenChange={setOpen}>
           <ActionMenu.Anchor aria-label="Open View options menu">
-            <IconButton icon={TriangleDownIcon} size="small"   aria-label="Open View options menu" />
+            <IconButton icon={TriangleDownIcon} size="small" aria-label="Open View options menu" />
           </ActionMenu.Anchor>
 
           <ActionMenu.Overlay width="medium">

From 98f7989d2e31ca46854556b415791a839d0f6594 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Tue, 27 Dec 2022 18:41:04 +0000
Subject: [PATCH 12/14] fix unused

---
 src/Button/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Button/types.ts b/src/Button/types.ts
index 9a91d0f23ab..f2ef172397c 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -50,7 +50,7 @@ export type ButtonProps = {
   /**
    * Trailing action appears to the right of the trailing visual and is always locked to the end
    */
-  trailingAction?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
+  trailingAction?: React.ComponentType | null | undefined
   children: React.ReactNode
   /**
    * Content alignment for when visuals are present

From 6db1ab634ba625538ec37f0694760c3b83f29472 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Tue, 27 Dec 2022 13:59:24 -0500
Subject: [PATCH 13/14] fix types

---
 src/Button/ButtonBase.tsx | 2 +-
 src/Button/IconButton.tsx | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx
index 14de19ff09e..d6d70870a6d 100644
--- a/src/Button/ButtonBase.tsx
+++ b/src/Button/ButtonBase.tsx
@@ -21,7 +21,7 @@ const ButtonBase = forwardRef(
       ...rest
     } = props
 
-    const innerRef = React.useRef<HTMLElement>(null)
+    const innerRef = React.useRef<HTMLButtonElement>(null)
     useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
     const {theme} = useTheme()
diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx
index 220e491cc94..c3c53ea78e8 100644
--- a/src/Button/IconButton.tsx
+++ b/src/Button/IconButton.tsx
@@ -11,7 +11,14 @@ const IconButton = forwardRef((props, forwardedRef): JSX.Element => {
   const {theme} = useTheme()
   const sxStyles = merge.all<BetterSystemStyleObject>([getBaseStyles(theme), getVariantStyles(variant, theme), sxProp])
   return (
-    <StyledButton data-component="IconButton" data-size={size} sx={sxStyles} {...rest} ref={forwardedRef}>
+    <StyledButton
+      data-component="IconButton"
+      data-size={size}
+      sx={sxStyles}
+      {...rest}
+      // @ts-expect-error StyledButton wants both Anchor and Button refs
+      ref={forwardedRef}
+    >
       <Icon />
     </StyledButton>
   )

From 4761a20f87675a595594c5fd7d4554081e4a2a95 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Tue, 27 Dec 2022 14:31:13 -0500
Subject: [PATCH 14/14] remove a prop re-added in a merge

---
 src/_TextInputInnerAction.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/_TextInputInnerAction.tsx b/src/_TextInputInnerAction.tsx
index cd4163a371b..c19ac720ef9 100644
--- a/src/_TextInputInnerAction.tsx
+++ b/src/_TextInputInnerAction.tsx
@@ -88,7 +88,6 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
               variant={variant}
               type="button"
               icon={icon}
-              size="small"
               sx={sx}
               {...rest}
               aria-label={ariaLabel as unknown as string}