Skip to content

feat: add visualContext prop to top navigation#4631

Open
amanabiy wants to merge 2 commits into
mainfrom
dev-v3-amanabiy-top-nav-visual-context
Open

feat: add visualContext prop to top navigation#4631
amanabiy wants to merge 2 commits into
mainfrom
dev-v3-amanabiy-top-nav-visual-context

Conversation

@amanabiy

Copy link
Copy Markdown
Member

Description

Adds a visualContext prop to TopNavigation that controls whether the dark visual context is applied.

  • "top-navigation" (default): maintains the existing dark appearance regardless of light/dark mode
  • "none": no visual context applied, the component uses the same colors as the rest of the page

Related links, issue #, if available: n/a

How has this been tested?

Unit tests, and test pages

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.


type InternalTopNavigationProps = SomeRequired<TopNavigationProps, 'utilities'> & InternalBaseComponentProps;

function wrapWithVisualContext(content: React.ReactNode, visualContext: TopNavigationProps.VisualContext) {

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

This is going to be reused for the custom-content.

@amanabiy amanabiy force-pushed the dev-v3-amanabiy-top-nav-visual-context branch 2 times, most recently from 17aaad4 to 69b8bf6 Compare June 15, 2026 09:50
@amanabiy amanabiy marked this pull request as ready for review June 15, 2026 09:51
@amanabiy amanabiy requested a review from a team as a code owner June 15, 2026 09:51
@amanabiy amanabiy requested review from pan-kot and taheramr and removed request for a team June 15, 2026 09:51
@amanabiy amanabiy force-pushed the dev-v3-amanabiy-top-nav-visual-context branch from 69b8bf6 to ef6adcc Compare June 15, 2026 09:54
@amanabiy amanabiy force-pushed the dev-v3-amanabiy-top-nav-visual-context branch from ef6adcc to b8f0439 Compare June 15, 2026 14:12
@amanabiy amanabiy force-pushed the dev-v3-amanabiy-top-nav-visual-context branch from b8f0439 to 13c89ab Compare June 15, 2026 14:17
@codecov

codecov Bot commented Jun 15, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.55%. Comparing base (f968598) to head (8a52bc0).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4631      +/-   ##
==========================================
+ Coverage   97.51%   97.55%   +0.03%     
==========================================
  Files         948      948              
  Lines       30346    30350       +4     
  Branches    11067    11069       +2     
==========================================
+ Hits        29593    29609      +16     
+ Misses        706      694      -12     
  Partials       47       47              

☔ 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.

pan-kot
pan-kot previously approved these changes Jun 15, 2026
@amanabiy amanabiy removed the request for review from taheramr June 15, 2026 21:00
(useTopNavigation as jest.Mock).mockImplementation(actualUseTopNavigation);
});

// The overflow drawer only renders once utilities are collapsed, which depends on layout

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

New addition: I have added this test with a mock to help with the test coverage.

@amanabiy amanabiy requested a review from pan-kot June 15, 2026 21:53
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