fix: apply awsui-visual-refresh class only to dynamic VR mode (#3365)

Author: just-boris

src/internal/hooks/use-portal-mode-classes/__tests__/helpers.tsx

@@ -0,0 +1,16 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef } from 'react';
+
+import { usePortalModeClasses } from '../../../../../lib/components/internal/hooks/use-portal-mode-classes';
+
+export function RenderTest({ refClasses }: { refClasses: string }) {
+  const ref = useRef(null);
+  const classes = usePortalModeClasses(ref);
+  return (
+    <div>
+      <div ref={ref} className={refClasses} />
+      <div data-testid="subject" className={classes} />
+    </div>
+  );
+}

src/internal/hooks/use-portal-mode-classes/__tests__/use-portal-mode-classes-vr-only.test.tsx

@@ -0,0 +1,33 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { RenderTest } from './helpers';
+
+jest.mock('../../../../../lib/components/internal/environment', () => ({
+  ...jest.requireActual('../../../../../lib/components/internal/environment'),
+  ALWAYS_VISUAL_REFRESH: true,
+}));
+
+const globalWithFlags = globalThis as any;
+
+describe('usePortalModeClasses (vr-only mode)', () => {
+  test('should not add any classes by default', () => {
+    render(<RenderTest refClasses="" />);
+    expect(screen.getByTestId('subject')).toHaveClass('', { exact: true });
+  });
+
+  test('should detect dark mode', () => {
+    render(<RenderTest refClasses="awsui-polaris-dark-mode" />);
+    expect(screen.getByTestId('subject')).toHaveClass('awsui-polaris-dark-mode awsui-dark-mode', { exact: true });
+  });
+
+  test('should not render awsui-visual-refresh class', () => {
+    globalWithFlags[Symbol.for('awsui-visual-refresh-flag')] = () => true;
+
+    render(<RenderTest refClasses="" />);
+    expect(document.body).not.toHaveClass('awsui-visual-refresh', { exact: true });
+    expect(screen.getByTestId('subject')).not.toHaveClass('awsui-visual-refresh', { exact: true });
+  });
+});

src/internal/hooks/use-portal-mode-classes/__tests__/use-portal-mode-classes.test.tsx

@@ -1,35 +1,20 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 
+import { clearVisualRefreshState } from '@cloudscape-design/component-toolkit/internal/testing';
+
 import VisualContext from '../../../../../lib/components/internal/components/visual-context';
-import { usePortalModeClasses } from '../../../../../lib/components/internal/hooks/use-portal-mode-classes';
-import { useVisualRefresh } from '../../../../../lib/components/internal/hooks/use-visual-mode';
+import { RenderTest } from './helpers';
 
-jest.mock('../../../../../lib/components/internal/hooks/use-visual-mode', () => {
-  const original = jest.requireActual('../../../../../lib/components/internal/hooks/use-visual-mode');
-  return { ...original, useVisualRefresh: jest.fn() };
-});
-
-afterEach(() => {
-  (useVisualRefresh as jest.Mock).mockReset();
-});
+const globalWithFlags = globalThis as any;
 
 describe('usePortalModeClasses', () => {
-  function RenderTest({ refClasses }: { refClasses: string }) {
-    const ref = useRef(null);
-    const classes = usePortalModeClasses(ref);
-    return (
-      <div>
-        <div ref={ref} className={refClasses} />
-        <div data-testid="subject" className={classes} />
-      </div>
-    );
-  }
-
   afterEach(() => {
     jest.clearAllMocks();
+    delete globalWithFlags[Symbol.for('awsui-visual-refresh-flag')];
+    clearVisualRefreshState();
   });
 
   test('should not add any classes by default', () => {
@@ -49,6 +34,14 @@ describe('usePortalModeClasses', () => {
     expect(screen.getByTestId('subject')).toHaveClass('awsui-polaris-compact-mode awsui-compact-mode', { exact: true });
   });
 
+  test('should detect visual refresh mode', () => {
+    globalWithFlags[Symbol.for('awsui-visual-refresh-flag')] = () => true;
+
+    render(<RenderTest refClasses="" />);
+    expect(document.body).toHaveClass('awsui-visual-refresh', { exact: true });
+    expect(screen.getByTestId('subject')).toHaveClass('awsui-visual-refresh', { exact: true });
+  });
+
   test('should detect contexts', () => {
     render(
       <VisualContext contextName="content-header">

src/internal/hooks/use-portal-mode-classes/index.ts

@@ -6,14 +6,19 @@ import clsx from 'clsx';
 import { useCurrentMode, useDensityMode } from '@cloudscape-design/component-toolkit/internal';
 
 import { useVisualContext } from '../../components/visual-context';
+import { ALWAYS_VISUAL_REFRESH } from '../../environment';
+import { useVisualRefresh } from '../use-visual-mode';
 
 export function usePortalModeClasses(ref: React.RefObject<HTMLElement>) {
   const colorMode = useCurrentMode(ref);
   const densityMode = useDensityMode(ref);
   const context = useVisualContext(ref);
+  const visualRefreshWithClass = useVisualRefresh() && !ALWAYS_VISUAL_REFRESH;
+
   return clsx({
     'awsui-polaris-dark-mode awsui-dark-mode': colorMode === 'dark',
     'awsui-polaris-compact-mode awsui-compact-mode': densityMode === 'compact',
+    'awsui-visual-refresh': visualRefreshWithClass,
     [`awsui-context-${context}`]: context,
   });
 }