fix: Use theme-aware navigation toggle icon in AppLayout toolbar skeleton

Author: Harsh-Anand-Singh

src/app-layout/__tests__/skeleton.test.tsx

@@ -3,11 +3,14 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
+import { isThemeActive } from '@cloudscape-design/component-toolkit/internal';
+
 import AppLayout from '../../../lib/components/app-layout';
 import { BeforeMainSlotSkeleton } from '../../../lib/components/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts';
 import AppLayoutToolbar from '../../../lib/components/app-layout-toolbar';
 import BreadcrumbGroup from '../../../lib/components/breadcrumb-group';
 import { getFunnelKeySelector } from '../../../lib/components/internal/analytics/selectors';
+import { getIconHTML } from '../../icon/__tests__/utils';
 import { describeEachAppLayout, renderComponent } from './utils';
 
 import testutilStyles from '../../../lib/components/app-layout/test-classes/styles.selectors.js';
@@ -34,6 +37,15 @@ jest.mock('../../../lib/components/internal/widgets', () => ({
   createWidgetizedComponent: createWidgetizedComponentMock,
 }));
 
+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'] }, () => {
   it('renders complete component by default', () => {
     const { wrapper } = renderComponent(
@@ -61,6 +73,17 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, () => {
       widgetMockEnabled = false;
     });
 
+    it('renders the menu icon on the navigation toggle', () => {
+      const { wrapper } = renderComponent(<AppLayout navigation="test nav" />);
+      expect(wrapper.findNavigationToggle()!.findIcon()!.getElement()).toContainHTML(getIconHTML('menu'));
+    });
+
+    it('renders the side-bar icon on the navigation toggle in One Theme', () => {
+      (isThemeActive as jest.Mock).mockReturnValue(true);
+      const { wrapper } = renderComponent(<AppLayout navigation="test nav" />);
+      expect(wrapper.findNavigationToggle()!.findIcon()!.getElement()).toContainHTML(getIconHTML('side-bar'));
+    });
+
     it('renders skeleton parts only', () => {
       const { wrapper } = renderComponent(
         <AppLayout

src/app-layout/visual-refresh-toolbar/skeleton/toolbar-container.tsx

@@ -3,6 +3,8 @@
 import React from 'react';
 import clsx from 'clsx';
 
+import { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';
+
 import { AppLayoutProps } from '../../../app-layout/interfaces';
 import { BreadcrumbGroupProps } from '../../../breadcrumb-group/interfaces';
 import { BreadcrumbsSlotContextType } from '../contexts';
@@ -70,6 +72,7 @@ interface ToolbarSkeletonStructureProps {
 export const ToolbarSkeletonStructure = React.forwardRef<HTMLElement, ToolbarSkeletonStructureProps>(
   ({ ariaLabels, expandedDrawerId, hasNavigation, navigationOpen, ownBreadcrumbs, discoveredBreadcrumbs }, ref) => {
     const drawerExpandedMode = !!expandedDrawerId;
+    const isOneTheme = isThemeActive(Theme.OneTheme);
     // istanbul ignore next: not interactive during SSR
     const noop = () => {};
     return (
@@ -80,7 +83,7 @@ export const ToolbarSkeletonStructure = React.forwardRef<HTMLElement, ToolbarSke
               <TriggerButton
                 ariaLabel={ariaLabels?.navigationToggle ?? undefined}
                 ariaExpanded={!drawerExpandedMode && navigationOpen}
-                iconName="menu"
+                iconName={isOneTheme ? 'side-bar' : 'menu'}
                 className={testutilStyles['navigation-toggle']}
                 onClick={noop}
                 selected={!drawerExpandedMode && navigationOpen}