diff --git a/src/internal/global-flags/index.ts b/src/internal/global-flags/index.ts index feee136..78ed706 100644 --- a/src/internal/global-flags/index.ts +++ b/src/internal/global-flags/index.ts @@ -8,6 +8,7 @@ interface GlobalFlags { appLayoutWidget?: boolean; appLayoutToolbar?: boolean; analyticsMetadata?: boolean; + oneTheme?: boolean; } export interface FlagsHolder { diff --git a/src/internal/visual-mode/__tests__/use-runtime-visual-refresh.test.tsx b/src/internal/visual-mode/__tests__/use-runtime-visual-refresh.test.tsx index 1a56b5b..e6aef54 100644 --- a/src/internal/visual-mode/__tests__/use-runtime-visual-refresh.test.tsx +++ b/src/internal/visual-mode/__tests__/use-runtime-visual-refresh.test.tsx @@ -21,6 +21,7 @@ describe('useVisualRefresh', () => { afterEach(() => { clearVisualRefreshState(); expect(document.querySelector('.awsui-visual-refresh')).toBeFalsy(); + expect(document.querySelector('.awsui-one-theme')).toBeFalsy(); }); afterEach(() => { clearMessageCache(); @@ -38,6 +39,12 @@ describe('useVisualRefresh', () => { expect(screen.getByTestId('current-mode')).toHaveTextContent('true'); }); + test('should return true when awsui-one-theme class name is present', () => { + document.body.classList.add('awsui-one-theme'); + render(); + expect(screen.getByTestId('current-mode')).toHaveTextContent('true'); + }); + test('should print a warning when late visual refresh class name was detected', () => { jest.spyOn(console, 'warn').mockImplementation(() => {}); const { rerender } = render(); @@ -83,4 +90,18 @@ describe('useVisualRefresh', () => { expect(screen.getByTestId('current-mode')).toHaveTextContent('true'); }); }); + + describe('oneTheme global flag', () => { + const awsuiGlobalFlagsSymbol = Symbol.for('awsui-global-flags'); + + afterEach(() => { + delete (window as any)[awsuiGlobalFlagsSymbol]; + }); + + test('should return true when oneTheme global flag is set', () => { + (window as any)[awsuiGlobalFlagsSymbol] = { oneTheme: true }; + render(); + expect(screen.getByTestId('current-mode')).toHaveTextContent('true'); + }); + }); }); diff --git a/src/internal/visual-mode/index.ts b/src/internal/visual-mode/index.ts index 0d0438c..ccdf069 100644 --- a/src/internal/visual-mode/index.ts +++ b/src/internal/visual-mode/index.ts @@ -7,7 +7,7 @@ import { createSingletonHandler } from '../singleton-handler/index.js'; import { useStableCallback } from '../stable-callback/index.js'; import { isDevelopment } from '../is-development.js'; import { warnOnce } from '../logging.js'; -import { awsuiVisualRefreshFlag, getGlobal } from '../global-flags/index.js'; +import { awsuiVisualRefreshFlag, getGlobal, getGlobalFlag } from '../global-flags/index.js'; import { safeMatchMedia } from '../utils/safe-match-media.js'; export function isMotionDisabled(element: HTMLElement): boolean { @@ -100,16 +100,17 @@ export function clearVisualRefreshState() { visualRefreshState = undefined; if (typeof document !== 'undefined') { document.body.classList.remove('awsui-visual-refresh'); + document.body.classList.remove('awsui-one-theme'); } } function detectVisualRefreshClassName() { - return typeof document !== 'undefined' && !!document.querySelector('.awsui-visual-refresh'); + return typeof document !== 'undefined' && !!document.querySelector('.awsui-visual-refresh, .awsui-one-theme'); } function detectVisualRefreshFlag() { const global = getGlobal(); - return global?.[awsuiVisualRefreshFlag]?.() ?? false; + return global?.[awsuiVisualRefreshFlag]?.() ?? !!getGlobalFlag('oneTheme'); } export function useRuntimeVisualRefresh() {