CI TEST - Fix type errors in next-major

.changeset/few-rocks-run.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixes type errors that appeared during v36 development. Likely caused by Button updates

src/Token/TokenBase.tsx

@@ -128,22 +128,25 @@ const StyledTokenBase = styled.span<
   ${sx}
 `
 
-const TokenBase = React.forwardRef(({onRemove, onKeyDown, id, size = defaultTokenSize, ...rest}, forwardedRef) => {
-  return (
-    <StyledTokenBase
-      onKeyDown={(event: KeyboardEvent<HTMLSpanElement & HTMLAnchorElement & HTMLButtonElement>) => {
-        onKeyDown && onKeyDown(event)
+const TokenBase = React.forwardRef<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement | undefined, TokenBaseProps>(
+  ({onRemove, onKeyDown, id, size = defaultTokenSize, ...rest}, forwardedRef) => {
+    return (
+      <StyledTokenBase
+        onKeyDown={(event: KeyboardEvent<HTMLSpanElement & HTMLAnchorElement & HTMLButtonElement>) => {
+          onKeyDown && onKeyDown(event)
 
-        if ((event.key === 'Backspace' || event.key === 'Delete') && onRemove) {
-          onRemove()
-        }
-      }}
-      id={id?.toString()}
-      size={size}
-      {...rest}
-      ref={forwardedRef}
-    />
-  )
-}) as PolymorphicForwardRefComponent<'span' | 'a' | 'button', TokenBaseProps & SxProp>
+          if ((event.key === 'Backspace' || event.key === 'Delete') && onRemove) {
+            onRemove()
+          }
+        }}
+        id={id?.toString()}
+        size={size}
+        {...rest}
+        // @ts-expect-error TokenBase wants Anchor, Button, and Span refs
+        ref={forwardedRef}
+      />
+    )
+  },
+) as PolymorphicForwardRefComponent<'span' | 'a' | 'button', TokenBaseProps & SxProp>
 
 export default TokenBase

src/drafts/Button2/types.ts

@@ -20,7 +20,7 @@ type ButtonA11yProps =
 
 export type ButtonBaseProps = {
   /**
-   * Determine's the styles on a button one of 'default' | 'primary' | 'invisible' | 'danger'
+   * Determine's the styles on a button one of 'default' | 'primary' | 'invisible' | 'danger' | 'outline'
    */
   variant?: VariantType
   /**

src/drafts/MarkdownEditor/Actions.tsx

@@ -1,5 +1,5 @@
 import React, {forwardRef, useContext} from 'react'
-import {Button, ButtonProps} from '../../Button'
+import {Button, ButtonProps} from '../Button2'
 import {MarkdownEditorContext} from './_MarkdownEditorContext'
 
 export const Actions = ({children}: {children?: React.ReactNode}) => <>{children}</>

src/drafts/MarkdownEditor/Footer.tsx

@@ -1,7 +1,8 @@
 import React, {memo, forwardRef, useContext} from 'react'
 import {AlertIcon, ImageIcon, MarkdownIcon} from '@primer/octicons-react'
 
-import {Spinner, Button, ButtonProps, LinkButton, Box, Text} from '../..'
+import {Spinner, LinkButton, Box, Text} from '../..'
+import {Button, ButtonProps} from '../Button2'
 import {MarkdownEditorContext} from './_MarkdownEditorContext'
 import {useSlots} from '../../hooks/useSlots'
 
@@ -80,7 +81,7 @@ const FileUploadButton = memo(({fileDraggedOver, ...props}: Partial<ButtonProps>
   return (
     <Button
       variant="invisible"
-      leadingVisual={ImageIcon}
+      leadingIcon={ImageIcon}
       size="small"
       sx={{color: 'fg.default', fontWeight: fileDraggedOver ? 'bold' : 'normal', px: 2}}
       onMouseDown={(e: React.MouseEvent) => {

src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx

@@ -7,6 +7,7 @@ import {useSSRSafeId} from '../../../utils/ssr'
 import CheckboxOrRadioGroupCaption from './CheckboxOrRadioGroupCaption'
 import CheckboxOrRadioGroupLabel from './CheckboxOrRadioGroupLabel'
 import CheckboxOrRadioGroupValidation from './CheckboxOrRadioGroupValidation'
+import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext'
 import VisuallyHidden from '../../../_VisuallyHidden'
 import {useSlots} from '../../../hooks/useSlots'
 import {SxProp} from '../../../sx'
@@ -31,13 +32,6 @@ export type CheckboxOrRadioGroupProps = {
   required?: boolean
 } & SxProp
 
-export type CheckboxOrRadioGroupContext = {
-  validationMessageId?: string
-  captionId?: string
-} & CheckboxOrRadioGroupProps
-
-export const CheckboxOrRadioGroupContext = React.createContext<CheckboxOrRadioGroupContext>({})
-
 const Body = styled.div`
   display: flex;
   flex-direction: column;

src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Text from '../../../Text'
 import {SxProp} from '../../../sx'
-import {CheckboxOrRadioGroupContext} from './CheckboxOrRadioGroup'
+import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext'
 
 const CheckboxOrRadioGroupCaption: React.FC<React.PropsWithChildren<SxProp>> = ({children, sx}) => {
   const {disabled, captionId} = React.useContext(CheckboxOrRadioGroupContext)

src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import {CheckboxOrRadioGroupProps} from './CheckboxOrRadioGroup'
+
+export type CheckboxOrRadioGroupContext = {
+  validationMessageId?: string
+  captionId?: string
+} & CheckboxOrRadioGroupProps
+
+const CheckboxOrRadioGroupContext = React.createContext<CheckboxOrRadioGroupContext>({})
+
+export default CheckboxOrRadioGroupContext

src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Box from '../../../Box'
 import VisuallyHidden from '../../../_VisuallyHidden'
 import {SxProp} from '../../../sx'
-import {CheckboxOrRadioGroupContext} from './CheckboxOrRadioGroup'
+import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext'
 
 export type CheckboxOrRadioGroupLabelProps = {
   /**

src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import InputValidation from '../InputValidation'
 import {SxProp} from '../../../sx'
 import {FormValidationStatus} from '../../../utils/types/FormValidationStatus'
-import {CheckboxOrRadioGroupContext} from './CheckboxOrRadioGroup'
+import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext'
 
 export type CheckboxOrRadioGroupValidationProps = {
   /** Changes the visual style to match the validation status */

src/internal/components/CheckboxOrRadioGroup/index.ts

@@ -1,2 +1,3 @@
-export {default, CheckboxOrRadioGroupContext} from './CheckboxOrRadioGroup'
+export {default} from './CheckboxOrRadioGroup'
 export type {CheckboxOrRadioGroupProps} from './CheckboxOrRadioGroup'
+export {default as CheckboxOrRadioGroupContext} from './CheckboxOrRadioGroupContext'