fix(Button): make children prop optional (#3661)

* fix(Button): make children prop optional

* chore: add changeset

* chore: refactor optional children type and require it in ActionMenu button

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

.changeset/cuddly-rice-press.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+Update the `children` prop for `Button` to be optional
+
+<!-- Changed components: Button, IconButton -->

src/ActionMenu.tsx

@@ -73,7 +73,9 @@ const Anchor = React.forwardRef<HTMLElement, ActionMenuAnchorProps>(({children,
 })
 
 /** this component is syntactical sugar 🍭 */
-export type ActionMenuButtonProps = ButtonProps
+export type ActionMenuButtonProps = ButtonProps & {
+  children: React.ReactNode
+}
 const MenuButton = React.forwardRef(({...props}, anchorRef) => {
   return (
     <Anchor ref={anchorRef}>

src/ActionMenu/ActionMenu.tsx

@@ -73,7 +73,9 @@ const Anchor = React.forwardRef<HTMLElement, ActionMenuAnchorProps>(({children,
 })
 
 /** this component is syntactical sugar 🍭 */
-export type ActionMenuButtonProps = ButtonProps
+export type ActionMenuButtonProps = Omit<ButtonProps, 'children'> & {
+  children: React.ReactNode
+}
 const MenuButton = React.forwardRef(({...props}, anchorRef) => {
   return (
     <Anchor ref={anchorRef}>

src/Button/__tests__/Button.types.test.tsx

@@ -69,6 +69,10 @@ export function iconButtonShouldNotAcceptOutlandishProps() {
   return <Button icon={StopIcon} aria-label="Stop icon" anOutlandshPropThatShouldNotBeAllowedOnA={'Button'} />
 }
 
+export function supportsNoChildren() {
+  return <Button />
+}
+
 export function supportsLeadingVisual() {
   return <Button leadingVisual={() => <span />}>child</Button>
 }

src/Button/types.ts

@@ -69,7 +69,7 @@ export type ButtonProps = {
    */
   trailingAction?: React.ElementType | null
 
-  children: React.ReactNode
+  children?: React.ReactNode
 
   /**
    * Content alignment for when visuals are present

src/__tests__/ActionMenu.types.test.tsx

@@ -2,7 +2,7 @@ import {ActionMenu} from '..'
 import React from 'react'
 
 export function actionButtonWithoutProps() {
-  //@ts-expect-error requires children
+  // @ts-expect-error requires children
   return <ActionMenu.Button />
 }