diff --git a/.changeset/slick-books-sleep.md b/.changeset/slick-books-sleep.md index b1deab67ba..4f84c4e682 100644 --- a/.changeset/slick-books-sleep.md +++ b/.changeset/slick-books-sleep.md @@ -3,4 +3,4 @@ '@backstage/theme': patch --- -Added support for the `data-theme-name` attribute to dynamically update based on the active theme. Previously, this attribute was statically set to `backstage` and did not reflect theme changes. +Added `themeName` props to `UnifiedThemeProvider` to allow setting Backstage UI `data-theme-name`CSS attribute dynamically based on the active theme. diff --git a/packages/core-app-api/package.json b/packages/core-app-api/package.json index e7f9455392..46f1dc04c4 100644 --- a/packages/core-app-api/package.json +++ b/packages/core-app-api/package.json @@ -48,7 +48,6 @@ "dependencies": { "@backstage/config": "workspace:^", "@backstage/core-plugin-api": "workspace:^", - "@backstage/theme": "workspace:^", "@backstage/types": "workspace:^", "@backstage/version-bridge": "workspace:^", "@types/prop-types": "^15.7.3", diff --git a/packages/core-app-api/src/app/AppThemeProvider.tsx b/packages/core-app-api/src/app/AppThemeProvider.tsx index 93c76eeba0..eb6903133d 100644 --- a/packages/core-app-api/src/app/AppThemeProvider.tsx +++ b/packages/core-app-api/src/app/AppThemeProvider.tsx @@ -16,7 +16,6 @@ import { useMemo, useEffect, useState, PropsWithChildren } from 'react'; import { useApi, appThemeApiRef, AppTheme } from '@backstage/core-plugin-api'; -import { AppThemeIdContext } from '@backstage/theme'; import useObservable from 'react-use/esm/useObservable'; // This tries to find the most accurate match, but also falls back to less @@ -89,9 +88,5 @@ export function AppThemeProvider({ children }: PropsWithChildren<{}>) { throw new Error('App has no themes'); } - return ( - - - - ); + return {children}; } diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx index e50e87e67f..f628075fb6 100644 --- a/packages/test-utils/src/testUtils/appWrappers.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.tsx @@ -167,7 +167,7 @@ export function createTestAppWrapper( title: 'Test App Theme', variant: 'light', Provider: ({ children }) => ( - + {children} ), diff --git a/packages/theme/report.api.md b/packages/theme/report.api.md index e083011ae1..f4e31db8e9 100644 --- a/packages/theme/report.api.md +++ b/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; - // @public @deprecated export type BackstagePalette = Palette & BackstagePaletteAdditions; @@ -464,5 +460,6 @@ export interface UnifiedThemeProviderProps { children: ReactNode; // (undocumented) theme: UnifiedTheme; + themeName?: string; } ``` diff --git a/packages/theme/src/unified/UnifiedThemeProvider.test.tsx b/packages/theme/src/unified/UnifiedThemeProvider.test.tsx index 83482eb3f6..52769b65a3 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.test.tsx +++ b/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( - - - theme - - , + + theme + , ); await waitFor(() => diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 49ac5bb69d..69d843ed3e 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/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(undefined); - /** * Props for {@link UnifiedThemeProvider}. * @@ -43,6 +37,8 @@ export const AppThemeIdContext = createContext(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; diff --git a/packages/theme/src/unified/index.ts b/packages/theme/src/unified/index.ts index 6bb5ba46de..747662e195 100644 --- a/packages/theme/src/unified/index.ts +++ b/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'; diff --git a/yarn.lock b/yarn.lock index b4da68e144..04970afcde 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3493,7 +3493,6 @@ __metadata: "@backstage/config": "workspace:^" "@backstage/core-plugin-api": "workspace:^" "@backstage/test-utils": "workspace:^" - "@backstage/theme": "workspace:^" "@backstage/types": "workspace:^" "@backstage/version-bridge": "workspace:^" "@testing-library/dom": "npm:^10.0.0"