Revert Avatar and Flash

Author: colebemis

src/Avatar.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import styled from 'styled-components'
 import {get} from './constants'
 import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
 
 type StyledAvatarProps = {
   /** Sets the width and height of the avatar. */
@@ -22,7 +22,7 @@ function getBorderRadius({size, square}: StyledAvatarProps) {
   }
 }
 
-const StyledAvatar = styled.img.attrs<StyledAvatarProps>(props => ({
+const Avatar = styled.img.attrs<StyledAvatarProps>(props => ({
   height: props.size,
   width: props.size,
 }))<StyledAvatarProps>`
@@ -35,11 +35,13 @@ const StyledAvatar = styled.img.attrs<StyledAvatarProps>(props => ({
   ${sx}
 `
 
-export type AvatarProps = StyledAvatarProps & React.ComponentPropsWithoutRef<'img'>
-const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(({size = 20, alt = '', ...rest}, ref) => (
-  <StyledAvatar ref={ref} alt={alt} size={size} {...rest} />
-))
-
-Avatar.displayName = 'Avatar'
+// TODO: Remove defaultProps to be compatible with the next major version of React
+// Reference: https://github.com/primer/react/issues/2758
+Avatar.defaultProps = {
+  size: 20,
+  alt: '',
+  square: false,
+}
 
+export type AvatarProps = ComponentProps<typeof Avatar>
 export default Avatar

src/Flash.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import styled from 'styled-components'
 import {variant} from 'styled-system'
 import {get} from './constants'
 import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
 
 const variants = variant({
   variants: {
@@ -46,7 +46,7 @@ type StyledFlashProps = {
   full?: boolean
 } & SxProp
 
-const StyledFlash = styled.div<StyledFlashProps>`
+const Flash = styled.div<StyledFlashProps>`
   position: relative;
   color: ${get('colors.fg.default')};
   padding: ${get('space.3')};
@@ -67,11 +67,11 @@ const StyledFlash = styled.div<StyledFlashProps>`
   ${sx};
 `
 
-export type FlashProps = StyledFlashProps & React.ComponentPropsWithoutRef<'div'>
-const Flash = React.forwardRef<HTMLDivElement, FlashProps>(({variant = 'default', ...rest}, ref) => (
-  <StyledFlash ref={ref} variant={variant} {...rest} />
-))
-
-Flash.displayName = 'Flash'
+// TODO: Remove defaultProps to be compatible with the next major version of React
+// Reference: https://github.com/primer/react/issues/2758
+Flash.defaultProps = {
+  variant: 'default',
+}
 
+export type FlashProps = ComponentProps<typeof Flash>
 export default Flash