move defaultProps to function defaults (#2759)

I'm updating all non-deprecated components that use `defaultProps` to stop using it and using function defaults instead.
As described in the issue below, `defaultProps` is going to be deprecated so it'd be nice to be clear of it before the new React version is released.

Closes #2758

Author: manuelpuyol

.changeset/witty-camels-relate.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update defaultProps to be JS function defaults

src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -99,8 +99,8 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   overlayProps,
   focusTrapSettings,
   focusZoneSettings,
-  side,
-  align,
+  side = 'outside-bottom',
+  align = 'start',
 }) => {
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
   const [overlayRef, updateOverlayRef] = useRenderForcingRef<HTMLDivElement>()
@@ -194,8 +194,3 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
 }
 
 AnchoredOverlay.displayName = 'AnchoredOverlay'
-
-AnchoredOverlay.defaultProps = {
-  side: 'outside-bottom',
-  align: 'start',
-}

src/Autocomplete/AutocompleteMenu.tsx

@@ -133,10 +133,10 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
     items,
     selectedItemIds,
     sortOnCloseFn,
-    emptyStateText,
+    emptyStateText = 'No selectable options',
     addNewItem,
     loading,
-    selectionVariant,
+    selectionVariant = 'single',
     filterFn,
     'aria-labelledby': ariaLabelledBy,
     onOpenChange,
@@ -326,11 +326,6 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
   )
 }
 
-AutocompleteMenu.defaultProps = {
-  emptyStateText: 'No selectable options',
-  selectionVariant: 'single',
-}
-
 AutocompleteMenu.displayName = 'AutocompleteMenu'
 
 export type AutocompleteMenuProps = ComponentProps<typeof AutocompleteMenu>

src/Avatar.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import styled from 'styled-components'
 import {get} from './constants'
 import sx, {SxProp} from './sx'
@@ -22,7 +23,7 @@ function getBorderRadius({size, square}: StyledAvatarProps) {
   }
 }
 
-const Avatar = styled.img.attrs<StyledAvatarProps>(props => ({
+const StyledAvatar = styled.img.attrs<StyledAvatarProps>(props => ({
   height: props.size,
   width: props.size,
 }))<StyledAvatarProps>`
@@ -34,11 +35,8 @@ const Avatar = styled.img.attrs<StyledAvatarProps>(props => ({
   box-shadow: 0 0 0 1px ${get('colors.avatar.border')};
   ${sx}
 `
-Avatar.defaultProps = {
-  size: 20,
-  alt: '',
-  square: false,
-}
+
+const Avatar = ({size = 20, alt = '', ...rest}: StyledAvatarProps) => <StyledAvatar alt={alt} size={size} {...rest} />
 
 export type AvatarProps = ComponentProps<typeof Avatar>
 export default Avatar

src/BaseStyles.tsx

@@ -36,21 +36,16 @@ const Base = styled.div<SystemTypographyProps & SystemCommonProps>`
 export type BaseStylesProps = ComponentProps<typeof Base>
 
 function BaseStyles(props: BaseStylesProps) {
-  const {children, ...rest} = props
+  const {children, color = 'fg.default', fontFamily = 'normal', lineHeight = 'default', ...rest} = props
+
   const {colorScheme} = useTheme()
 
   return (
-    <Base {...rest} data-portal-root>
+    <Base {...rest} color={color} fontFamily={fontFamily} lineHeight={lineHeight} data-portal-root>
       <GlobalStyle colorScheme={colorScheme?.includes('dark') ? 'dark' : 'light'} />
       {children}
     </Base>
   )
 }
 
-BaseStyles.defaultProps = {
-  color: 'fg.default',
-  fontFamily: 'normal',
-  lineHeight: 'default',
-}
-
 export default BaseStyles

src/Caret.tsx

@@ -62,7 +62,13 @@ export type CaretProps = {
 
 function Caret(props: CaretProps) {
   const theme = React.useContext(ThemeContext)
-  const propsWithTheme = {...props, theme: props.theme ?? theme}
+  const propsWithTheme = {
+    ...props,
+    bg: props.bg || 'canvas.default',
+    borderColor: props.borderColor || 'border.default',
+    borderWidth: props.borderWidth || 1,
+    theme: props.theme ?? theme,
+  }
   const {bg} = getBg(propsWithTheme)
   const {borderColor} = getBorderColor(propsWithTheme)
   const {borderWidth} = getBorderWidth(propsWithTheme)
@@ -124,10 +130,4 @@ Caret.locations = [
   'left-bottom',
 ]
 
-Caret.defaultProps = {
-  bg: 'canvas.default',
-  borderColor: 'border.default',
-  borderWidth: 1,
-}
-
 export default Caret

src/CircleBadge.tsx

@@ -26,7 +26,7 @@ const sizeStyles = ({size, variant = 'medium'}: StyledCircleBadgeProps) => {
 }
 
 const CircleBadge = styled.div<StyledCircleBadgeProps>`
-  display: ${props => (props.inline ? 'inline-flex' : 'flex')};
+  display: ${({inline = false}) => (inline ? 'inline-flex' : 'flex')};
   align-items: center;
   justify-content: center;
   background-color: ${get('colors.canvas.default')};
@@ -42,10 +42,6 @@ const CircleBadgeIcon = styled(StyledOcticon)`
   max-height: 55%;
 `
 
-CircleBadge.defaultProps = {
-  inline: false,
-}
-
 CircleBadgeIcon.displayName = 'CircleBadge.Icon'
 
 export type CircleBadgeProps = ComponentProps<typeof CircleBadge>

src/CircleOcticon.tsx

@@ -9,8 +9,7 @@ export type CircleOcticonProps = {
 } & BoxProps
 
 function CircleOcticon(props: CircleOcticonProps) {
-  const {size, as} = props
-  const {icon: IconComponent, bg, ...rest} = props
+  const {size = 32, as, icon: IconComponent, bg, ...rest} = props
   return (
     <Box
       as={as}
@@ -22,16 +21,11 @@ function CircleOcticon(props: CircleOcticonProps) {
       borderStyle="solid"
       borderColor="border.default"
     >
-      <Box display="flex" {...rest} alignItems="center" justifyContent="center">
+      <Box display="flex" as={as} size={size} {...rest} alignItems="center" justifyContent="center">
         <IconComponent size={size} />
       </Box>
     </Box>
   )
 }
 
-CircleOcticon.defaultProps = {
-  ...Box.defaultProps,
-  size: 32,
-}
-
 export default CircleOcticon

src/Dialog.tsx

@@ -53,7 +53,7 @@ const DialogHeaderBase = styled(Box)<SxProp>`
 `
 export type DialogHeaderProps = ComponentProps<typeof DialogHeaderBase>
 
-function DialogHeader({theme, children, backgroundColor = 'gray.1', ...rest}: DialogHeaderProps) {
+function DialogHeader({theme, children, backgroundColor = 'canvas.subtle', ...rest}: DialogHeaderProps) {
   if (React.Children.toArray(children).every(ch => typeof ch === 'string')) {
     children = (
       <Text theme={theme} color="fg.default" fontSize={1} fontWeight="bold" fontFamily="sans-serif">
@@ -131,10 +131,6 @@ const Dialog = forwardRef<HTMLDivElement, InternalDialogProps>(
   },
 )
 
-DialogHeader.defaultProps = {
-  backgroundColor: 'canvas.subtle',
-}
-
 DialogHeader.propTypes = {
   ...Box.propTypes,
 }

src/Flash.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import styled from 'styled-components'
 import {variant} from 'styled-system'
 import {get} from './constants'
@@ -41,12 +42,12 @@ const variants = variant({
   },
 })
 
-const Flash = styled.div<
-  {
-    variant?: 'default' | 'warning' | 'success' | 'danger'
-    full?: boolean
-  } & SxProp
->`
+type StyledFlashProps = {
+  variant?: 'default' | 'warning' | 'success' | 'danger'
+  full?: boolean
+} & SxProp
+
+const StyledFlash = styled.div<StyledFlashProps>`
   position: relative;
   color: ${get('colors.fg.default')};
   padding: ${get('space.3')};
@@ -67,9 +68,7 @@ const Flash = styled.div<
   ${sx};
 `
 
-Flash.defaultProps = {
-  variant: 'default',
-}
+export type FlashProps = ComponentProps<typeof StyledFlash>
+const Flash = ({variant = 'default', ...rest}: FlashProps) => <StyledFlash variant={variant} {...rest} />
 
-export type FlashProps = ComponentProps<typeof Flash>
 export default Flash