Skip to content

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

Merged
Harsh-Anand-Singh merged 1 commit into
mainfrom
fix/app-layout-toolbar-skeleton-one-theme-icon
Nov 6, 2026
Merged

Harsh-Anand-Singh merged 1 commit into
mainfrom
fix/app-layout-toolbar-skeleton-one-theme-icon

Conversation

@Harsh-Anand-Singh

Copy link
Copy Markdown
Member

Description

In One Theme the AppLayout toolbar renders the side-bar icon for the navigation toggle (toolbar/index.tsx: isThemeActive(Theme.OneTheme) ? 'side-bar' : 'menu'). The toolbar skeleton (ToolbarSkeletonStructure), shown while the widgetized toolbar implementation is loading and during SSR, hardcodes iconName="menu". When the widget replaces the skeleton the icon visibly flips from menu to side-bar (reported in AWS console ticket AWSUI-62419, seen on the console home page where the AppLayout widget is enabled).

This change makes the skeleton use the same theme check as the real toolbar so both render the same icon. VR and classic are unaffected (isThemeActive(Theme.OneTheme) is false there, so the icon stays menu).

How has this been tested?

Unit tests added in skeleton.test.tsx covering both icons in the loading (skeleton) state. Existing app-layout tests pass.

Note for reviewers: the skeleton lives in the host bundle, so a console gets this fix via its own Cloudscape version, not via the widget.

@codecov

codecov Bot commented Nov 6, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.83%. Comparing base (04cb6a0) to head (7454232).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #5265   +/-   ##
=======================================
  Coverage   97.83%   97.83%           
=======================================
  Files        1008     1008           
  Lines       32582    32584    +2     
  Branches    12092    12092           
=======================================
+ Hits        31878    31880    +2     
- Misses        663      698   +35     
+ Partials       41        6   -35     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Harsh-Anand-Singh
Harsh-Anand-Singh added this pull request to the merge queue Nov 6, 2026
ariaLabel={ariaLabels?.navigationToggle ?? undefined}
ariaExpanded={!drawerExpandedMode && navigationOpen}
iconName="menu"
iconName={isOneTheme ? 'side-bar' : 'menu'}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: can we make this Trigger a shared component in skeleton and toolbar, so we can avoid this discrepancy.

Merged via the queue into main with commit d25043b Nov 6, 2026
68 checks passed
@Harsh-Anand-Singh
Harsh-Anand-Singh deleted the fix/app-layout-toolbar-skeleton-one-theme-icon branch November 6, 2026 15:56

This branch was successfully deployed

3 active deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants