feat(core): Add helper to get theme if ThemeProvider doesn't exist

Workday · Oct 22, 2019 · 9b2086f · 9b2086f
1 parent c2cacc6
commit 9b2086f
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 18 deletions.
diff --git a/modules/avatar/react/lib/Test.tsx b/modules/avatar/react/lib/Test.tsx
@@ -1,17 +1,20 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import {Themeable, defaultCanvasTheme} from '@workday/canvas-kit-react-core';
+import {Themeable, getTheme} from '@workday/canvas-kit-react-core';
 
 export interface TestProps extends Themeable {}
 
 const SomeText = styled('div')<TestProps>(
   {
     boxSizing: 'border-box',
   },
-  ({theme}) => ({
-    background: theme.palette.primary.main,
-    color: theme.palette.primary.contrast,
-  })
+  ({theme}) => {
+    theme = getTheme(theme); // eslint-disable-line no-param-reassign
+    return {
+      background: theme.palette.primary.main,
+      color: theme.palette.primary.contrast,
+    };
+  }
 );
 
 class Test extends React.Component<TestProps> {

diff --git a/modules/banner/react/lib/Banner.tsx b/modules/banner/react/lib/Banner.tsx
@@ -1,6 +1,13 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import {colors, spacing, borderRadius, type, Themeable} from '@workday/canvas-kit-react-core';
+import {
+  colors,
+  spacing,
+  borderRadius,
+  type,
+  Themeable,
+  getTheme,
+} from '@workday/canvas-kit-react-core';
 import {SystemIcon} from '@workday/canvas-kit-react-icon';
 import {exclamationCircleIcon, exclamationTriangleIcon} from '@workday/canvas-system-icons-web';
 import {ErrorType, focusRing} from '@workday/canvas-kit-react-common';
@@ -51,19 +58,22 @@ const BannerWrapper = styled('button')<BannerProps>(
       cursor: 'pointer',
     },
   },
-  ({error, theme}) => ({
-    backgroundColor:
-      error === ErrorType.Error ? theme.palette.error.main : theme.palette.alert.main,
-    color: error === ErrorType.Error ? theme.palette.error.contrast : colors.blackPepper400,
-    '&:hover': {
+  ({error, theme}) => {
+    theme = getTheme(theme); // eslint-disable-line no-param-reassign
+    return {
       backgroundColor:
-        error === ErrorType.Error ? theme.palette.error.dark : theme.palette.alert.dark,
-    },
-    '&:focus': {
-      outline: 'none',
-      ...focusRing(2, 2, undefined, undefined, undefined, theme.palette.common.focusOutline),
-    },
-  }),
+        error === ErrorType.Error ? theme.palette.error.main : theme.palette.alert.main,
+      color: error === ErrorType.Error ? theme.palette.error.contrast : colors.blackPepper400,
+      '&:hover': {
+        backgroundColor:
+          error === ErrorType.Error ? theme.palette.error.dark : theme.palette.alert.dark,
+      },
+      '&:focus': {
+        outline: 'none',
+        ...focusRing(2, 2, undefined, undefined, undefined, theme.palette.common.focusOutline),
+      },
+    };
+  },
   ({variant}) => ({
     borderRadius:
       variant === BannerVariant.Sticky ? `${borderRadius.m} 0 0 ${borderRadius.m}` : borderRadius.m,

diff --git a/modules/core/react/lib/theming/theme.ts b/modules/core/react/lib/theming/theme.ts
@@ -46,6 +46,17 @@ export const defaultCanvasTheme: CanvasTheme = {
   // Depth?
 };
 
+/**
+ * Currently a work around for a default theme if no ThemeProvider exists.
+ * Tracked on https://github.com/emotion-js/emotion/issues/1193.
+ */
+export function getTheme(theme: Object): CanvasTheme {
+  if (Object.entries(theme).length === 0) {
+    return defaultCanvasTheme;
+  }
+  return theme as CanvasTheme;
+}
+
 // TODO: Should we use PartialCanvasTheme here?
 export function createCanvasTheme(partialTheme: Object): CanvasTheme {
   return deepmerge(defaultCanvasTheme, partialTheme);