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
primer · Jan 23, 2023 · 693ce68 · 693ce68
1 parent 9e8d0e9
commit 693ce68
Show file tree

Hide file tree

Showing 39 changed files with 148 additions and 271 deletions.
diff --git a/.changeset/witty-camels-relate.md b/.changeset/witty-camels-relate.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update defaultProps to be JS function defaults
diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/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',
-}
diff --git a/src/Autocomplete/AutocompleteMenu.tsx b/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>

diff --git a/src/Avatar.tsx b/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
diff --git a/src/BaseStyles.tsx b/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
diff --git a/src/Caret.tsx b/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
diff --git a/src/CircleBadge.tsx b/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>

diff --git a/src/CircleOcticon.tsx b/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
diff --git a/src/Dialog.tsx b/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,
 }

diff --git a/src/Flash.tsx b/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
diff --git a/src/FormControl/FormControl.tsx b/src/FormControl/FormControl.tsx
@@ -46,7 +46,7 @@ export interface FormControlContext extends Pick<FormControlProps, 'disabled' |
 }
 
 const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
-  ({children, disabled: disabledProp, layout, id: idProp, required, sx}, ref) => {
+  ({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, sx}, ref) => {
     const expectedInputComponents = [
       Autocomplete,
       Checkbox,
@@ -233,10 +233,6 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
   },
 )
 
-FormControl.defaultProps = {
-  layout: 'vertical',
-}
-
 export default Object.assign(FormControl, {
   Caption: FormControlCaption,
   Label: FormControlLabel,

diff --git a/src/Label.tsx b/src/Label.tsx
@@ -1,7 +1,9 @@
+import React from 'react'
 import styled from 'styled-components'
 import {variant} from 'styled-system'
 import sx, {SxProp, BetterSystemStyleObject} from './sx'
 import {get} from './constants'
+import {ComponentProps} from './utils/types'
 
 export type LabelProps = {
   /** The color of the label */
@@ -76,7 +78,7 @@ const sizes: Record<LabelSizeKeys, BetterSystemStyleObject> = {
   },
 }
 
-const Label = styled.span<LabelProps>`
+const StyledLabel = styled.span<LabelProps>`
   align-items: center;
   background-color: transparent;
   border-width: 1px;
@@ -92,9 +94,7 @@ const Label = styled.span<LabelProps>`
   ${sx};
 `
 
-Label.defaultProps = {
-  size: 'small',
-  variant: 'default',
-}
-
+const Label = ({size = 'small', variant = 'default', ...rest}: ComponentProps<typeof StyledLabel>) => (
+  <StyledLabel size={size} variant={variant} {...rest} />
+)
 export default Label
diff --git a/src/Overlay.tsx b/src/Overlay.tsx
@@ -131,7 +131,8 @@ const Overlay = React.forwardRef<HTMLDivElement, OwnOverlayProps>(
       ignoreClickRefs,
       onEscape,
       visibility = 'visible',
-      height,
+      height = 'auto',
+      width = 'auto',
       top,
       left,
       anchorSide,
@@ -183,6 +184,7 @@ const Overlay = React.forwardRef<HTMLDivElement, OwnOverlayProps>(
       <Portal containerName={portalContainerName}>
         <StyledOverlay
           height={height}
+          width={width}
           role={role}
           {...rest}
           ref={overlayRef}
@@ -201,9 +203,4 @@ const Overlay = React.forwardRef<HTMLDivElement, OwnOverlayProps>(
 
 export type OverlayProps = ComponentPropsWithRef<typeof Overlay>
 
-Overlay.defaultProps = {
-  height: 'auto',
-  width: 'auto',
-}
-
 export default Overlay
diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx
@@ -162,7 +162,7 @@ export type PaginationProps = {
   currentPage: number
   onPageChange?: (e: React.MouseEvent, n: number) => void
   hrefBuilder?: (n: number) => string
-  marginPageCount: number
+  marginPageCount?: number
   showPages?: boolean
   surroundingPageCount?: number
 }
@@ -203,12 +203,4 @@ function defaultHrefBuilder(pageNum: number) {
 
 function noop() {}
 
-Pagination.defaultProps = {
-  hrefBuilder: defaultHrefBuilder,
-  marginPageCount: 1,
-  onPageChange: noop,
-  showPages: true,
-  surroundingPageCount: 2,
-}
-
 export default Pagination
diff --git a/src/Popover.tsx b/src/Popover.tsx
@@ -24,7 +24,7 @@ type StyledPopoverProps = {
   open?: boolean
 } & SxProp
 
-const Popover = styled.div.attrs<StyledPopoverProps>(({className, caret}) => {
+const Popover = styled.div.attrs<StyledPopoverProps>(({className, caret = 'top'}) => {
   return {
     className: classnames(className, `caret-pos--${caret}`),
   }
@@ -214,10 +214,6 @@ const PopoverContent = styled.div<SxProp>`
   ${sx};
 `
 
-Popover.defaultProps = {
-  caret: 'top',
-}
-
 PopoverContent.displayName = 'Popover.Content'
 
 export type PopoverProps = ComponentProps<typeof Popover>

diff --git a/src/ProgressBar.tsx b/src/ProgressBar.tsx
@@ -35,19 +35,14 @@ const ProgressContainer = styled.span<StyledProgressContainerProps>`
   ${sx};
 `
 
-export type ProgressBarProps = {bg: string} & StyledProgressContainerProps & ProgressProp
+export type ProgressBarProps = {bg?: string} & StyledProgressContainerProps & ProgressProp
 
-function ProgressBar({progress, bg, ...rest}: ProgressBarProps) {
+function ProgressBar({progress, bg = 'success.emphasis', barSize = 'default', ...rest}: ProgressBarProps) {
   return (
-    <ProgressContainer {...rest}>
+    <ProgressContainer barSize={barSize} {...rest}>
       <Bar progress={progress} sx={{bg}} />
     </ProgressContainer>
   )
 }
 
-ProgressBar.defaultProps = {
-  bg: 'success.emphasis',
-  barSize: 'default',
-}
-
 export default ProgressBar
diff --git a/src/SegmentedControl/SegmentedControl.tsx b/src/SegmentedControl/SegmentedControl.tsx
@@ -53,7 +53,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
   onChange,
   size,
   sx: sxProp = defaultSxProp,
-  variant,
+  variant = 'default',
   ...rest
 }) => {
   const segmentedControlContainerRef = useRef<HTMLUListElement>(null)
@@ -213,10 +213,6 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
 
 Root.displayName = 'SegmentedControl'
 
-Root.defaultProps = {
-  variant: 'default',
-}
-
 export const SegmentedControl = Object.assign(Root, {
   Button,
   IconButton: SegmentedControlIconButton,