Repository: laboratoriobridge/bold
Pull request #457 (2019-09-03 20:37:16)

Remove withStyles annotation


Patch:
diff --git a/src/components/Button/Button/ButtonSkins.ts b/src/components/Button/Button/ButtonSkins.ts
index 8721b0d68..bfc767829 100644
--- a/src/components/Button/Button/ButtonSkins.ts
+++ b/src/components/Button/Button/ButtonSkins.ts
@@ -1,4 +1,6 @@
-import { Styles, Theme } from '../../../styles'
+import { Interpolation } from 'emotion'
+
+import { Theme } from '../../../styles'
 
 import { createStyles as createDefault } from './skins/default'
 import { createStyles as createGhost } from './skins/ghost'
@@ -26,7 +28,7 @@ export interface SkinProps {
   kind?: ButtonKind
 }
 
-export const createBaseStyles = (theme: Theme): Styles => ({
+export const createBaseStyles = (theme: Theme) => ({
   button: {
     display: 'inline-flex',
     justifyContent: 'center',
@@ -40,11 +42,11 @@ export const createBaseStyles = (theme: Theme): Styles => ({
       alignItems: 'center',
       display: 'inline-flex',
     },
-  },
+  } as Interpolation,
   disabled: {
     cursor: 'not-allowed',
     opacity: 0.5,
-  },
+  } as Interpolation,
   loading: {
     span: {
       color: 'transparent',
@@ -63,13 +65,13 @@ export const createBaseStyles = (theme: Theme): Styles => ({
       left: 'calc(50% - (1.5em / 2))',
       top: 'calc(50% - (1.5em / 2))',
     },
-  },
+  } as Interpolation,
   block: {
     width: '100%',
-  },
+  } as Interpolation,
 })
 
-export const createSizeStyles = (theme: Theme): Styles => ({
+export const createSizeStyles = (theme: Theme) => ({
   large: {
     padding: 'calc(1.25rem - 1px) 3.25rem',
     fontSize: theme.typography.sizes.button,
diff --git a/src/components/FileUploader/FileUploader.tsx b/src/components/FileUploader/FileUploader.tsx
index a19aebacf..ca8fb3388 100644
--- a/src/components/FileUploader/FileUploader.tsx
+++ b/src/components/FileUploader/FileUploader.tsx
@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react'
 import { DropzoneOptions, useDropzone } from 'react-dropzone'
 
-import { focusBoxShadow, Theme, useStyles, WithStylesProps } from '../../styles'
+import { focusBoxShadow, Theme, useStyles } from '../../styles'
 import { format } from '../../util/byte'
 import { HFlow } from '../HFlow'
 import { Icon } from '../Icon/Icon'
@@ -45,7 +45,7 @@ export function FileUploader(props: FileUploaderProps) {
   )
 }
 
-export interface FileDetailsProps extends WithStylesProps {
+export interface FileDetailsProps {
   file: FileProps
 }
 
diff --git a/src/components/Table/TableFooter/TableFooter.tsx b/src/components/Table/TableFooter/TableFooter.tsx
index 4aa24b86c..dcb7c6615 100644
--- a/src/components/Table/TableFooter/TableFooter.tsx
+++ b/src/components/Table/TableFooter/TableFooter.tsx
@@ -1,6 +1,6 @@
 import React, { CSSProperties } from 'react'
 
-import { ExternalStyles, Theme, useStyles, WithStylesProps } from '../../../styles'
+import { ExternalStyles, Theme, useStyles } from '../../../styles'
 import { HFlow } from '../../HFlow'
 import { Number } from '../../Number'
 import { Paginator } from '../../Paginator/Paginator'
@@ -8,7 +8,7 @@ import { Text } from '../../Text'
 
 import { TableSizeDropdown } from './TableSizeDropdown'
 
-export interface TableFooterProps extends WithStylesProps {
+export interface TableFooterProps {
   page: number
   totalPages: number
   totalElements: number
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 94121325c..a97c31ffc 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -6,7 +6,6 @@ export { DefaultGlobalCss, GlobalCss } from './global/GlobalCss'
 export * from './hooks'
 export * from './theme'
 export * from './utils'
-export { Styles, withStyles, WithStylesProps } from './withStyles'
 
 export const colors = palletes
 
diff --git a/src/styles/withStyles.tsx b/src/styles/withStyles.tsx
deleted file mode 100644
index a904422cf..000000000
--- a/src/styles/withStyles.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { css, Interpolation } from 'emotion'
-import React from 'react'
-
-import { Theme } from './theme/createTheme'
-import { ThemeContext } from './theme/ThemeContext'
-
-/**
- * @deprecated Use the `useStyles` hook instead.
- */
-export interface WithStylesProps {
-  theme?: Theme
-  css?: (...styles: Interpolation[]) => string
-}
-
-export interface Styles {
-  [key: string]: Interpolation
-}
-
-/**
- * @deprecated Use the `useStyles` hook instead.
- */
-export function withStyles<P extends WithStylesProps, T extends React.ComponentType<P>>(WrappedComponent: T): T {
-  const Cmp = WrappedComponent as React.ComponentType<P>
-
-  class WithStyles extends React.Component<P> {
-    static displayName = `${WrappedComponent.displayName || WrappedComponent.name}`
-
-    render() {
-      return <ThemeContext.Consumer>{theme => <Cmp {...this.props} css={css} theme={theme} />}</ThemeContext.Consumer>
-    }
-  }
-
-  return WithStyles as T
-}


Test patch:
diff --git a/src/__snapshots__/index.test.ts.snap b/src/__snapshots__/index.test.ts.snap
index a4eb40f5e..d4c55599a 100644
--- a/src/__snapshots__/index.test.ts.snap
+++ b/src/__snapshots__/index.test.ts.snap
@@ -122,7 +122,6 @@ Array [
   "focusBoxShadow",
   "hexToRGB",
   "invertColorScale",
-  "withStyles",
   "colors",
   "Observable",
   "__types",