Add themeName prop

Signed-off-by: gaelgoth <gothuey.gael@gmail.com>

packages/theme/report.api.md

@@ -4,7 +4,6 @@
 
 ```ts
 import type { ComponentsProps } from '@material-ui/core/styles/props';
-import { Context } from 'react';
 import { Overrides } from '@material-ui/core/styles/overrides';
 import type { Palette } from '@material-ui/core/styles/createPalette';
 import type { PaletteOptions } from '@material-ui/core/styles/createPalette';
@@ -19,9 +18,6 @@ import { ThemeOptions as ThemeOptions_2 } from '@material-ui/core/styles';
 import type { ThemeOptions as ThemeOptions_3 } from '@material-ui/core/styles/createTheme';
 import { UnifiedTheme as UnifiedTheme_2 } from '@backstage/theme';
 
-// @public
-export const AppThemeIdContext: Context<string | undefined>;
-
 // @public @deprecated
 export type BackstagePalette = Palette & BackstagePaletteAdditions;
 
@@ -464,5 +460,6 @@ export interface UnifiedThemeProviderProps {
   children: ReactNode;
   // (undocumented)
   theme: UnifiedTheme;
+  themeName?: string;
 }
 ```

packages/theme/src/unified/UnifiedThemeProvider.test.tsx

@@ -21,10 +21,7 @@ import {
 import { useTheme as useV5Theme } from '@mui/material/styles';
 import { makeStyles as makeV5Styles } from '@mui/styles';
 import { render, screen, waitFor } from '@testing-library/react';
-import {
-  UnifiedThemeProvider,
-  AppThemeIdContext,
-} from './UnifiedThemeProvider';
+import { UnifiedThemeProvider } from './UnifiedThemeProvider';
 import { themes } from './themes';
 
 describe('UnifiedThemeProvider', () => {
@@ -91,13 +88,11 @@ describe('UnifiedThemeProvider', () => {
     );
   });
 
-  it('applies theme attributes based on the provided theme id', async () => {
+  it('applies theme attributes based on the provided options', async () => {
     render(
-      <AppThemeIdContext.Provider value="aperture">
-        <UnifiedThemeProvider theme={themes.light}>
-          <span>theme</span>
-        </UnifiedThemeProvider>
-      </AppThemeIdContext.Provider>,
+      <UnifiedThemeProvider theme={themes.light} themeName="aperture">
+        <span>theme</span>
+      </UnifiedThemeProvider>,
     );
 
     await waitFor(() =>

packages/theme/src/unified/UnifiedThemeProvider.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ReactNode, createContext, useContext } from 'react';
+import { ReactNode } from 'react';
 import {
   ThemeProvider,
   StylesProvider,
@@ -29,12 +29,6 @@ import {
 import { UnifiedTheme } from './types';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
 
-/**
- * React context for the current application theme ID.
- * @public
- */
-export const AppThemeIdContext = createContext<string | undefined>(undefined);
-
 /**
  * Props for {@link UnifiedThemeProvider}.
  *
@@ -43,6 +37,8 @@ export const AppThemeIdContext = createContext<string | undefined>(undefined);
 export interface UnifiedThemeProviderProps {
   children: ReactNode;
   theme: UnifiedTheme;
+  /** Optional override for the value written to the `data-theme-name` attribute. */
+  themeName?: string;
 }
 
 /**
@@ -72,15 +68,14 @@ import { useApplyThemeAttributes } from './useApplyThemeAttributes';
 export function UnifiedThemeProvider(
   props: UnifiedThemeProviderProps,
 ): JSX.Element {
-  const { children, theme } = props;
+  const { children, theme, themeName } = props;
 
   const v4Theme = theme.getTheme('v4') as Mui4Theme;
   const v5Theme = theme.getTheme('v5') as Mui5Theme;
 
   const themeMode = v4Theme ? v4Theme.palette.type : v5Theme?.palette.mode;
-  const themeId = useContext(AppThemeIdContext) ?? 'backstage';
 
-  useApplyThemeAttributes(themeMode, themeId);
+  useApplyThemeAttributes(themeMode, themeName ?? 'backstage');
 
   let result = children as JSX.Element;
 

packages/theme/src/unified/index.ts

@@ -18,9 +18,6 @@ export { transformV5ComponentThemesToV4 } from './overrides';
 export { createUnifiedTheme, createUnifiedThemeFromV4 } from './UnifiedTheme';
 export type { UnifiedThemeOptions } from './UnifiedTheme';
 export { themes } from './themes';
-export {
-  UnifiedThemeProvider,
-  AppThemeIdContext,
-} from './UnifiedThemeProvider';
+export { UnifiedThemeProvider } from './UnifiedThemeProvider';
 export type { UnifiedThemeProviderProps } from './UnifiedThemeProvider';
 export type { UnifiedTheme, SupportedThemes, SupportedVersions } from './types';