feat(emotion): asd

Author: HerrTopi

packages/emotion/src/EmotionTypes.ts

@@ -104,7 +104,7 @@ type Overrides = {
 
 type BaseThemeOrOverride = Theme | PartialTheme | Overrides
 
-type ThemeOrOverride =
+type ThemeOrLegacyOverride =
   | BaseThemeOrOverride
   | ((theme: BaseTheme) => BaseThemeOrOverride)
 
@@ -147,7 +147,7 @@ export interface StyleObject {
 
 export type {
   BaseThemeOrOverride,
-  ThemeOrOverride,
+  ThemeOrLegacyOverride,
   Overrides,
   ComponentOverride,
   SpecificThemeOverride,

packages/emotion/src/InstUISettingsProvider/index.tsx

@@ -30,7 +30,7 @@ import { DeterministicIdContextProvider } from '@instructure/ui-react-utils'
 
 import { getTheme } from '../getTheme'
 
-import type { ThemeOrOverride } from '../EmotionTypes'
+import type { ThemeOrLegacyOverride } from '../EmotionTypes'
 import type { DeterministicIdProviderValue } from '@instructure/ui-react-utils'
 import { mergeDeep } from '@instructure/ui-utils'
 import { Theme } from '@instructure/ui-themes'
@@ -41,7 +41,7 @@ type InstUIProviderProps = {
   /**
    * A full theme or an override object
    */
-  theme?: ThemeOrOverride
+  theme?: ThemeOrLegacyOverride
 
   // TODO-theme-types: fix override typing
   /**
@@ -92,18 +92,29 @@ function InstUISettingsProvider({
     )
   }
 
-  let providedTheme = theme
-  if (typeof theme !== 'function') {
-    const override = (theme as Theme).themeOverride!
-    providedTheme = {
-      ...theme,
-      themeOverride: mergeDeep(override, themeOverride)
-    }
-  }
+  /**
+   * new pattern: if you wanna replace a theme inside an InstUISettigsProvider, provide it via the theme prop. It'll
+   * override everything, replacing the otherwise used theme.
+   * if you wanna apply an override, use the themeOverride prop.
+   */
+
+  // let providedThemeOverride = themeOverride
+  // if (typeof themeOverride === 'function') {
+  //   providedThemeOverride = themeOverride(useTheme())
+  // }
+
+  // let providedTheme = theme
+  // if (typeof theme !== 'function') {
+  //   const override = (theme as Theme).themeOverride!
+  //   providedTheme = {
+  //     ...theme,
+  //     themeOverride: mergeDeep(override, themeOverride)
+  //   }
+  // }
 
   let providers = (
     <DeterministicIdContextProvider instanceCounterMap={instanceCounterMap}>
-      <ThemeProvider theme={getTheme(providedTheme)}>
+      <ThemeProvider theme={getTheme(theme, themeOverride)}>
         <TextDirectionContext.Provider value={finalDir}>
           {children}
         </TextDirectionContext.Provider>

packages/emotion/src/__tests__/useTheme.test.tsx

@@ -29,10 +29,10 @@ import '@testing-library/jest-dom'
 
 import { useTheme } from '../useTheme'
 import { InstUISettingsProvider } from '../InstUISettingsProvider'
-import type { ThemeOrOverride } from '../EmotionTypes'
+import type { ThemeOrLegacyOverride } from '../EmotionTypes'
 
 type Props = {
-  callback(theme: ThemeOrOverride): void
+  callback(theme: ThemeOrLegacyOverride): void
 }
 
 const ExampleComponent = (props: Props) => {

packages/emotion/src/getComponentThemeOverride.ts

@@ -23,7 +23,7 @@
  */
 
 import type {
-  ThemeOrOverride,
+  ThemeOrLegacyOverride,
   Overrides,
   ComponentOverride
 } from './EmotionTypes'
@@ -48,7 +48,7 @@ type ComponentName = keyof ComponentOverride | undefined
  * @returns The calculated theme override object
  */
 const getComponentThemeOverride = (
-  theme: ThemeOrOverride,
+  theme: ThemeOrLegacyOverride,
   displayName: string,
   componentId?: string,
   // ThemeOverrideProp is the old type, ThemeOverrideValue is the new one

packages/emotion/src/getTheme.ts

@@ -28,7 +28,7 @@ import type { BaseTheme } from '@instructure/shared-types'
 
 import type {
   Overrides,
-  ThemeOrOverride,
+  ThemeOrLegacyOverride,
   SpecificThemeOverride
 } from './EmotionTypes'
 
@@ -43,13 +43,13 @@ import type {
  * If an override object is given, it returns the ancestor theme and
  * the overrides merged together.
  *
- * @param themeOrOverride - A full theme or an override object
+ * @param themeOrLegacyOverride - A full theme or an override object
  * @returns A function that returns with the theme object for the [ThemeProvider](https://emotion.sh/docs/theming#themeprovider-reactcomponenttype)
  *    This function is called by Emotion on theme provider creation, where
  *    `ancestorTheme` is a theme object from an ancestor `ThemeProvider`
  */
 const getTheme =
-  (themeOrOverride: ThemeOrOverride) =>
+  (themeOrLegacyOverride: ThemeOrLegacyOverride, themeOverride: any) =>
   (ancestorTheme = {} as BaseTheme) => {
     // we need to clone the ancestor theme not to override it
     let currentTheme
@@ -67,7 +67,7 @@ const getTheme =
       currentTheme = ancestorTheme
     }
 
-    let resolvedThemeOrOverride = themeOrOverride
+    let resolvedThemeOrOverride = themeOrLegacyOverride
 
     if (typeof resolvedThemeOrOverride === 'function') {
       resolvedThemeOrOverride = resolvedThemeOrOverride(currentTheme)