Update Button props to ensure they correctly type check

.changeset/many-windows-hope.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+fixes types for Button

src/ActionMenu.tsx

@@ -8,7 +8,7 @@ import {Divider} from './ActionList/Divider'
 import {ActionListContainerContext} from './ActionList/ActionListContainerContext'
 import {Button, ButtonProps} from './Button'
 import {MandateProps} from './utils/types'
-import {SxProp, merge} from './sx'
+import {merge, BetterSystemStyleObject} from './sx'
 
 export type MenuContextProps = Pick<
   AnchoredOverlayProps,
@@ -83,12 +83,12 @@ const MenuButton = React.forwardRef<AnchoredOverlayProps['anchorRef'], ButtonPro
         <Button
           type="button"
           trailingIcon={TriangleDownIcon}
-          sx={merge(
+          sx={merge<BetterSystemStyleObject>(
             {
               // override the margin on caret for optical alignment
               '[data-component=trailingIcon]': {marginX: -1}
             },
-            sxProp as SxProp
+            sxProp
           )}
           {...props}
         />

src/Button/Button.tsx

@@ -1,16 +1,18 @@
 import React, {forwardRef} from 'react'
 import {ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
-const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({children, ...props}, forwardedRef): JSX.Element => {
-    return (
-      <ButtonBase ref={forwardedRef} as="button" {...props}>
-        {children}
-      </ButtonBase>
-    )
-  }
-)
+const ButtonComponent: PolymorphicForwardRefComponent<'button', ButtonProps> = forwardRef<
+  HTMLButtonElement,
+  ButtonProps
+>(({children, ...props}, forwardedRef): JSX.Element => {
+  return (
+    <ButtonBase ref={forwardedRef} as="button" {...props}>
+      {children}
+    </ButtonBase>
+  )
+})
 
 ButtonComponent.displayName = 'Button'
 

src/Button/types.ts

@@ -1,4 +1,4 @@
-import React, {HTMLAttributes, ComponentPropsWithRef} from 'react'
+import React, {ComponentPropsWithRef} from 'react'
 import styled from 'styled-components'
 import {IconProps} from '@primer/octicons-react'
 import sx, {SxProp} from '../sx'
@@ -34,7 +34,7 @@ export type ButtonBaseProps = {
    */
   disabled?: boolean
 } & SxProp &
-  HTMLAttributes<HTMLButtonElement> &
+  React.ButtonHTMLAttributes<HTMLButtonElement> &
   StyledButtonProps
 
 export type ButtonProps = {

src/SegmentedControl/SegmentedControlButton.tsx

@@ -1,4 +1,4 @@
-import React, {HTMLAttributes} from 'react'
+import React, {ButtonHTMLAttributes} from 'react'
 import {IconProps} from '@primer/octicons-react'
 import styled from 'styled-components'
 import Box from '../Box'
@@ -15,7 +15,7 @@ export type SegmentedControlButtonProps = {
   /** The leading icon comes before item label */
   leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
 } & SxProp &
-  HTMLAttributes<HTMLButtonElement | HTMLLIElement>
+  ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
 
 const SegmentedControlButtonStyled = styled.button`
   ${sx};

src/SegmentedControl/SegmentedControlIconButton.tsx

@@ -1,4 +1,4 @@
-import React, {HTMLAttributes} from 'react'
+import React, {ButtonHTMLAttributes} from 'react'
 import {IconProps} from '@primer/octicons-react'
 import styled from 'styled-components'
 import sx, {merge, SxProp} from '../sx'
@@ -15,7 +15,7 @@ export type SegmentedControlIconButtonProps = {
   /** Whether the segment is selected. This is used for uncontrolled SegmentedControls to pick one SegmentedControlButton that is selected on the initial render. */
   defaultSelected?: boolean
 } & SxProp &
-  HTMLAttributes<HTMLButtonElement | HTMLLIElement>
+  ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
 
 const SegmentedControlIconButtonStyled = styled.button`
   ${sx};

src/_TextInputInnerAction.tsx

@@ -5,7 +5,7 @@ import {Button, IconButton, ButtonProps} from './Button'
 import Tooltip from './Tooltip'
 import {BetterSystemStyleObject, merge, SxProp} from './sx'
 
-type TextInputActionProps = Omit<React.HTMLProps<HTMLButtonElement>, 'aria-label' | 'size'> & {
+type TextInputActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'size'> & {
   /** @deprecated Text input action buttons should only use icon buttons */
   children?: React.ReactNode
   /** Text that appears in a tooltip. If an icon is passed, this is also used as the label used by assistive technologies. */

src/__tests__/Button.types.test.tsx

@@ -0,0 +1,35 @@
+import React, {useRef} from 'react'
+import {Button} from '../Button'
+
+export function shouldAcceptOnlyAChildProp() {
+  return <Button>child</Button>
+}
+
+export function ShouldAcceptKnownButtonPropsAndDomProps() {
+  const buttonEl = useRef<HTMLButtonElement>()
+  return (
+    <Button
+      ref={buttonEl}
+      leadingIcon={() => <></>}
+      trailingIcon={() => <></>}
+      size="medium"
+      variant="primary"
+      disabled
+      aria-label="some label"
+      onClick={e => {
+        // current target is assignable to HTMLButtonElement
+        buttonEl.current = e.currentTarget
+      }}
+      sx={{
+        m: 1
+      }}
+    >
+      Child
+    </Button>
+  )
+}
+
+export function shouldNotAcceptOutlandishProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Button anOutlandshPropThatShouldNotBeAllowedOnA={'Button'} />
+}

src/drafts/MarkdownEditor/_ViewSwitch.tsx

@@ -23,14 +23,14 @@ export const ViewSwitch = ({selectedView, onViewSelect, onLoadPreview, disabled}
   const {label, icon, ...sharedProps} =
     selectedView === 'preview'
       ? {
-          variant: 'invisible',
+          variant: 'invisible' as const,
           sx: {color: 'fg.default', px: 2},
           onClick: () => onViewSelect?.('edit'),
           icon: PencilIcon,
           label: 'Edit'
         }
       : {
-          variant: 'invisible',
+          variant: 'invisible' as const,
           sx: {color: 'fg.default', px: 2},
           onClick: () => {
             onLoadPreview()

src/stories/ActionMenu/fixtures.stories.tsx

@@ -113,7 +113,7 @@ export function ExternalAnchor(): JSX.Element {
         <Button
           ref={anchorRef}
           onClick={() => setOpen(!open)}
-          onKeyDown={(event: KeyboardEvent) => {
+          onKeyDown={event => {
             // TODO: This should happen from AnchoredOverlay?
             if (['ArrowDown', 'ArrowUp'].includes(event.code)) setOpen(true)
           }}