chore: Replace one-theme’s side navigation icon

src/app-layout/__tests__/navigation-collapsed.test.tsx

@@ -2,8 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { isThemeActive } from '@cloudscape-design/component-toolkit/internal';
+
 import AppLayout from '../../../lib/components/app-layout';
 import customCssProps from '../../../lib/components/internal/generated/custom-css-properties';
+import { getIconHTML } from '../../icon/__tests__/utils';
 import { describeEachAppLayout, renderComponent } from './utils';
 
 import navStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/navigation/styles.css.js';
@@ -15,6 +18,15 @@ jest.mock('@cloudscape-design/component-toolkit', () => ({
   useContainerQuery: () => [1300, () => {}],
 }));
 
+jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
+  ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
+  isThemeActive: jest.fn().mockReturnValue(false),
+}));
+
+afterEach(() => {
+  (isThemeActive as jest.Mock).mockReturnValue(false);
+});
+
 describeEachAppLayout({ themes: ['refresh-toolbar'], sizes: ['desktop'] }, () => {
   describe('collapsed rail visibility', () => {
     test('navigation is visible when navigationCloseBehavior="collapse" and navigationOpen=false', () => {
@@ -53,6 +65,28 @@ describeEachAppLayout({ themes: ['refresh-toolbar'], sizes: ['desktop'] }, () =>
       expect(closeButton.querySelector(`.${iconStyles['name-angle-left']}`)).not.toBeNull();
     });
 
+    test.each([true, false])(
+      'close button shows side-bar icon in One Theme when navigationCloseBehavior=collapse, navigationOpen=%s',
+      navigationOpen => {
+        (isThemeActive as jest.Mock).mockReturnValue(true);
+        const { wrapper } = renderComponent(
+          <AppLayout navigationCloseBehavior="collapse" navigationOpen={navigationOpen} navigation={<>Nav content</>} />
+        );
+        expect(wrapper.findNavigationClose().findIcon()!.getElement()).toContainHTML(getIconHTML('side-bar'));
+      }
+    );
+
+    test.each([true, false])(
+      'close button shows angle-left icon in One Theme when navigationCloseBehavior!=collapse, navigationOpen=%s',
+      navigationOpen => {
+        (isThemeActive as jest.Mock).mockReturnValue(true);
+        const { wrapper } = renderComponent(
+          <AppLayout navigationOpen={navigationOpen} navigation={<>Nav content</>} />
+        );
+        expect(wrapper.findNavigationClose().findIcon()!.getElement()).toContainHTML(getIconHTML('angle-left'));
+      }
+    );
+
     test('close button toggles navigation open and closed when collapsible', () => {
       const { wrapper } = renderComponent(
         <AppLayout navigationCloseBehavior="collapse" navigation={<>Nav content</>} />

src/app-layout/visual-refresh-toolbar/navigation/index.tsx

@@ -4,8 +4,10 @@ import React from 'react';
 import clsx from 'clsx';
 
 import { findUpUntil } from '@cloudscape-design/component-toolkit/dom';
+import { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';
 
 import { InternalButton } from '../../../button/internal';
+import { IconProps } from '../../../icon/interfaces';
 import { getDrawerStyles } from '../compute-layout';
 import { AppLayoutInternals } from '../interfaces';
 
@@ -55,6 +57,16 @@ export function AppLayoutNavigationImplementation({
     }
   };
 
+  const getNavIconName = (): IconProps.Name => {
+    if (isMobile) {
+      return 'close';
+    }
+    if (isThemeActive(Theme.OneTheme) && navigationCollapsible) {
+      return 'side-bar';
+    }
+    return navigationCollapsed ? 'angle-right' : 'angle-left';
+  };
+
   return (
     <div
       className={clsx(styles['navigation-container'], sharedStyles['with-motion-horizontal'], {
@@ -90,7 +102,7 @@ export function AppLayoutNavigationImplementation({
                 : (ariaLabels?.navigationClose ?? undefined)
             }
             ariaExpanded={navigationCollapsible && !isMobile ? navigationOpen : undefined}
-            iconName={navigationCollapsed ? 'angle-right' : isMobile ? 'close' : 'angle-left'}
+            iconName={getNavIconName()}
             onClick={() => onNavigationToggle(navigationCollapsible ? !navigationOpen : false)}
             variant="icon"
             formAction="none"