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/Button.dev.stories.tsx

@@ -1,6 +1,6 @@
 import {SearchIcon, TriangleDownIcon, EyeIcon} from '@primer/octicons-react'
 import React from 'react'
-import {Button} from '.'
+import {Button2 as Button} from '.'
 
 export default {
   title: 'Drafts/Components/Button/DevOnly',

src/drafts/Button2/Button.features.stories.tsx

@@ -1,6 +1,6 @@
 import {EyeIcon, TriangleDownIcon, HeartIcon} from '@primer/octicons-react'
 import React, {useState} from 'react'
-import {Button} from '.'
+import {Button2 as Button} from '.'
 
 export default {
   title: 'Drafts/Components/Button/Features',

src/drafts/Button2/Button.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, HeartIcon} from '@primer/octicons-react'
 import {Meta, StoryFn} from '@storybook/react'
-import {Button} from '.'
+import {Button2 as Button} from '.'
 import {OcticonArgType} from '../../utils/story-helpers'
 
 export default {

src/drafts/Button2/index.ts

@@ -2,6 +2,6 @@ import {ButtonComponent} from './Button'
 import {Counter} from './ButtonCounter'
 export type {ButtonProps, IconButtonProps} from './types'
 
-export const Button = Object.assign(ButtonComponent, {
+export const Button2 = Object.assign(ButtonComponent, {
   Counter,
 })

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/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 '../../Button'
 import {MarkdownEditorContext} from './_MarkdownEditorContext'
 import {useSlots} from '../../hooks/useSlots'
 

src/drafts/MarkdownEditor/MarkdownEditor.stories.tsx

@@ -342,7 +342,7 @@ export const CustomFooter = ({
           <MarkdownEditor.FooterButton
             variant="invisible"
             onClick={onFooterClick}
-            leadingIcon={PlusIcon}
+            leadingVisual={PlusIcon}
             sx={{borderRadius: '14px', color: 'fg.muted', borderColor: 'border.muted'}}
           >
             Add Button

src/drafts/MarkdownEditor/_MarkdownEditorContext.ts

@@ -1,6 +1,6 @@
 import {createContext, RefObject} from 'react'
 import {FormattingTools} from './_FormattingTools'
-import {ButtonProps} from '../Button2'
+import {ButtonProps} from '../../Button'
 
 // For performance, the properties in context MUST NOT be values that change often - every time
 // any of the properties change, all components including memoized ones will be re-rendered

src/drafts/index.ts

@@ -54,4 +54,4 @@ export * from '../SplitPageLayout'
 
 // CSS Experiment
 export * from './CSSComponent'
-export * from './Button2'
+// export * from './Button2'

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'