Drop usage of the deprecated SFC type (#2560)

* v10: Drop usage of deprecated React types

* Adjust test-only references to "SFC" terminology

* Tweak changesets

Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>

.changeset/wicked-ducks-rest.md

@@ -0,0 +1,8 @@
+---
+'@emotion/core': minor
+'emotion-theming': minor
+'@emotion/styled': minor
+'@emotion/styled-base': minor
+---
+
+Dropped usage of a deprecated `SFC` React type in favor of `FC`. The `FC` type has been introduced in `@types/react@16.7.2` so this version of this package is now a minimum requirement for TypeScript users.

docs/typescript.mdx

@@ -148,15 +148,15 @@ const Image3 = styled.div<ImageProps>`
 ### React Components
 
 ```tsx
-import React, { SFC } from 'react'
+import React, { FC } from 'react'
 import styled from '@emotion/styled'
 
 type ComponentProps = {
   className?: string
   label: string
 }
 
-const Component: SFC<ComponentProps> = ({
+const Component: FC<ComponentProps> = ({
   label,
   className
 }) => <div className={className}>{label}</div>
@@ -180,15 +180,15 @@ const App = () => (
 ### Passing props when styling a React component
 
 ```tsx
-import React, { SFC } from 'react'
+import React, { FC } from 'react'
 import styled from '@emotion/styled'
 
 type ComponentProps = {
   className?: string
   label: string
 }
 
-const Component: SFC<ComponentProps> = ({
+const Component: FC<ComponentProps> = ({
   label,
   className
 }) => <div className={className}>{label}</div>

packages/core/types/index.d.ts

@@ -9,7 +9,7 @@ import {
   ComponentClass,
   Context,
   Provider,
-  SFC,
+  FC,
   ReactElement,
   ReactNode,
   Ref,
@@ -30,7 +30,7 @@ export const ThemeContext: Context<object>
 export const CacheProvider: Provider<EmotionCache>
 export function withEmotionCache<Props, RefType = any>(
   func: (props: Props, context: EmotionCache, ref: Ref<RefType>) => ReactNode
-): SFC<Props & ClassAttributes<RefType>>
+): FC<Props & ClassAttributes<RefType>>
 
 export const jsx: typeof createElement
 

packages/emotion-theming/types/index.d.ts

@@ -22,11 +22,11 @@ export function useTheme<Theme>(): Theme
  */
 export function withTheme<C extends React.ComponentType<any>>(
   component: C
-): React.SFC<AddOptionalTo<PropsOf<C>, 'theme'>>
+): React.FC<AddOptionalTo<PropsOf<C>, 'theme'>>
 
 export interface EmotionTheming<Theme> {
   ThemeProvider(props: ThemeProviderProps<Theme>): React.ReactElement
   withTheme<C extends React.ComponentType<any>>(
     component: C
-  ): React.SFC<AddOptionalTo<PropsOf<C>, 'theme'>>
+  ): React.FC<AddOptionalTo<PropsOf<C>, 'theme'>>
 }

packages/emotion-theming/types/tests.tsx

@@ -13,24 +13,24 @@ interface Props {
   prop: boolean
   theme: Theme
 }
-declare const CompSFC: React.SFC<Props>
+declare const CompFC: React.FC<Props>
 declare class CompC extends React.Component<Props> {}
 
 const WrappedCompC = withTheme<typeof CompC>(CompC)
 ;<ThemeProvider theme={theme}>{WrappedCompC}</ThemeProvider>
 ;<ThemeProvider theme={() => theme} />
 ;<ThemeProvider theme={(outerTheme: Theme) => ({ ...outerTheme, ...theme })} />
 
-const ThemedSFC = withTheme(CompSFC)
-;<ThemedSFC prop />
-;<ThemedSFC prop theme={theme} />
+const ThemedFC = withTheme(CompFC)
+;<ThemedFC prop />
+;<ThemedFC prop theme={theme} />
 
 const ThemedComp = withTheme(CompC)
 ;<ThemedComp prop />
 ;<ThemedComp prop theme={theme} />
 
-const CompSFCWithDefault = ({ prop }: Props) => (prop ? <span /> : <div />)
-CompSFCWithDefault.defaultProps = { prop: false }
+const CompFCWithDefault = ({ prop }: Props) => (prop ? <span /> : <div />)
+CompFCWithDefault.defaultProps = { prop: false }
 class CompCWithDefault extends React.Component<Props> {
   static defaultProps = { prop: false }
   render() {
@@ -43,9 +43,9 @@ class CompCWithDefault extends React.Component<Props> {
   const themeFail: Theme = useTheme<number>() // $ExpectError
 }
 
-const ThemedSFCWithDefault = withTheme(CompSFCWithDefault)
-;<ThemedSFCWithDefault />
-;<ThemedSFCWithDefault theme={theme} />
+const ThemedFCWithDefault = withTheme(CompFCWithDefault)
+;<ThemedFCWithDefault />
+;<ThemedFCWithDefault theme={theme} />
 
 const ThemedCompWithDefault = withTheme(CompCWithDefault)
 ;<ThemedCompWithDefault />
@@ -59,7 +59,7 @@ const {
 // $ExpectError
 ;<TypedThemeProvider theme={{ primary: 5 }} />
 
-typedWithTheme(CompSFC)
+typedWithTheme(CompFC)
 /**
  * @todo
  * Following line should report an error.
@@ -79,7 +79,7 @@ typedWithTheme((props: { value: number }) => null)
 
   type SomethingToRead = (Book | Magazine) & { theme?: any }
 
-  const Readable: React.SFC<SomethingToRead> = props => {
+  const Readable: React.FC<SomethingToRead> = props => {
     if (props.kind === 'magazine') {
       return <div>magazine #{props.issue}</div>
     }

packages/styled-base/types/index.d.ts

@@ -39,7 +39,7 @@ export interface StyledOptions {
 }
 
 export interface StyledComponent<InnerProps, StyleProps, Theme extends object>
-  extends React.SFC<InnerProps & Omit<StyleProps, 'theme'> & { theme?: Theme }>,
+  extends React.FC<InnerProps & Omit<StyleProps, 'theme'> & { theme?: Theme }>,
     ComponentSelector {
   /**
    * @desc this method is type-unsafe

packages/styled-base/types/tests.tsx

@@ -18,20 +18,20 @@ interface ReactClassProps2 {
 declare class ReactClassComponent2 extends React.Component<ReactClassProps2> {}
 
 // tslint:disable-next-line: interface-over-type-literal
-type ReactSFCProps0 = {
+type ReactFCProps0 = {
   readonly column: boolean
 }
-declare const ReactSFC0: React.SFC<ReactSFCProps0>
+declare const ReactFC0: React.FC<ReactFCProps0>
 
-interface ReactSFCProps1 {
+interface ReactFCProps1 {
   readonly value: string
 }
-declare const ReactSFC1: React.SFC<ReactSFCProps1>
+declare const ReactFC1: React.FC<ReactFCProps1>
 
-interface ReactSFCProps2 {
+interface ReactFCProps2 {
   readonly value: number
 }
-declare const ReactSFC2: React.SFC<ReactSFCProps2>
+declare const ReactFC2: React.FC<ReactFCProps2>
 
 const Button0 = styled('button')`
   color: blue;
@@ -124,7 +124,7 @@ const Button4 = styled<typeof ReactClassComponent0, PrimaryProps>(
   fontSize: ${5}px;
   color: ${props => props.primary}
 `
-const Button5 = styled<typeof ReactSFC0, PrimaryProps>(ReactSFC0)(props => ({
+const Button5 = styled<typeof ReactFC0, PrimaryProps>(ReactFC0)(props => ({
   color: props.primary
 }))
 ;<div>
@@ -158,7 +158,7 @@ const Container1 = Container0.withComponent('span')
 // $ExpectError
 ;<Container1 contentEditable />
 
-const Container2 = Container0.withComponent(ReactSFC0)
+const Container2 = Container0.withComponent(ReactFC0)
 ;<Container2 column={true} />
 // $ExpectError
 ;<Container2 />
@@ -173,7 +173,7 @@ const Container3 = Container0.withComponent(ReactClassComponent1)
 interface ContainerProps {
   extraWidth: string
 }
-const Container4 = styled(ReactSFC2)<ContainerProps>(props => ({
+const Container4 = styled(ReactFC2)<ContainerProps>(props => ({
   borderColor: 'black',
   borderWidth: props.extraWidth,
   borderStyle: 'solid'
@@ -184,7 +184,7 @@ const Container4 = styled(ReactSFC2)<ContainerProps>(props => ({
 // $ExpectError
 ;<Container4 value="5" />
 
-const Container5 = Container3.withComponent(ReactSFC2)
+const Container5 = Container3.withComponent(ReactFC2)
 ;<Container5 column={true} value={123} />
 // $ExpectError
 ;<Container5 />
@@ -194,7 +194,7 @@ const Container5 = Container3.withComponent(ReactSFC2)
 ;<Container5 value={242} />
 
 // $ExpectError
-styled(ReactSFC2)<ReactSFCProps1>()
+styled(ReactFC2)<ReactFCProps1>()
 
 /**
  * @todo
@@ -256,7 +256,7 @@ declare const ref3_2: (element: HTMLDivElement | null) => void
 
   type SomethingToRead = Book | Magazine
 
-  const Readable: React.SFC<SomethingToRead> = props => {
+  const Readable: React.FC<SomethingToRead> = props => {
     if (props.kind === 'magazine') {
       return <div>magazine #{props.issue}</div>
     }