Repository navigation
fix(react-nav): show selection indicator on selected NavSubItem - #36778
Open
Geervan (Geervan) wants to merge 3 commits into
Open
Geervan (Geervan) wants to merge 3 commits into
Geervan (Geervan) wants to merge 3 commits into
Conversation
Geervan (Geervan)
requested review from
a team and
Victor Genaev (mainframev)
as code owners
September 22, 2026 13:08
Author
|
@microsoft-github-policy-service agree |
Geervan (Geervan)
force-pushed
the
fix/nav-sub-item-indicator
branch
from
October 9, 2026 15:08
006f38b to
3ea8491
Compare
Author
|
Paul Mardling (@PaulGMardling) Thanks for catching that! Updated both the class merge order and the indicator offsets as suggested:
|
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The tests do not cover the visual regression, and the implemented offsets conflict with the PR description.
2 open findings
What changed in this PR
Fixes selected NavSubItem indicators being clipped inside expanded categories.
Changes:
- Adjusts density-specific indicator positioning.
- Removes clipping styles from subitem groups.
- Adds style-hook tests and a patch change file.
| File | Description |
|---|---|
useNavSubItemGroupStyles.styles.ts |
Removes indicator-clipping styles. |
useNavSubItemStyles.styles.ts |
Adds small-density indicator positioning. |
NavSubItem.test.tsx |
Adds density and selection style tests. |
@fluentui-react-nav-indicator-fix.json |
Records the patch release. |
🧠 Review effort: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Nav Converged 4 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Nav Converged.selected item and sub item - Dark Mode.normal.chromium.png | 0 | Added |
| vr-tests-react-components/Nav Converged.selected item and sub item - High Contrast.normal.chromium.png | 0 | Added |
| vr-tests-react-components/Nav Converged.selected item and sub item - RTL.normal.chromium.png | 0 | Added |
| vr-tests-react-components/Nav Converged.selected item and sub item.normal.chromium.png | 0 | Added |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 163 | Changed |
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 499 | Changed |
vr-tests-react-components/ProgressBar converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png | 92 | Changed |
Geervan (Geervan)
force-pushed
the
fix/nav-sub-item-indicator
branch
from
October 9, 2026 18:45
3ea8491 to
05c8e2d
Compare
Author
|
Updated the PR with the following:
|
Geervan (Geervan)
force-pushed
the
fix/nav-sub-item-indicator
branch
from
October 9, 2026 18:57
05c8e2d to
b452348
Compare
…or positioning and unclipped rendering
| }, | ||
| smallSelectedIndicator: { | ||
| '::after': { | ||
| marginInlineStart: `calc(-1 * (${tokens.spacingHorizontalMNudge} + ${subItemSmallIndent} + ${tokens.spacingHorizontalSNudge}))`, |
Contributor
There was a problem hiding this comment.
Could we keep both margins tied to the shared navItemTokens.indicatorOffset? For example:
<FluentProvider
theme={{ ...webLightTheme, spacingHorizontalSNudge: '8px' }}
>
{/* Nav containing top-level items and an expanded sub-item group */}
</FluentProvider>Top-level indicators remain at 10px - 16px = -6px, but these expressions cancel the sub-item padding and leave -spacingHorizontalSNudge = -8px in both densities. That moves the selection rail 2px outward when selecting a sub-item.
An illustrative adjustment for the two values is:
// Medium
marginInlineStart: `calc(-1 * (${subItemMediumIndent} + ${navItemTokens.indicatorOffset}px))`,
// Small
marginInlineStart: `calc(-1 * (${subItemSmallIndent} + ${navItemTokens.indicatorOffset}px))`,This preserves the same spacingHorizontalMNudge - indicatorOffset position as top-level items. Could we also cover the override above in a regression test for both densities?
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #36754
Description
Fixes an issue where the selection indicator on a
NavSubIteminside an expandedNavCategorywas invisible or misaligned when selected.Changes
baseandsmallBaseinmergeClassessosmallBase(paddingInlineStart: 40px) correctly overridesbase(paddingInlineStart: 46px) whendensity === 'small'.46pxpadding): Set indicator margin to-(indicatorOffset + 36)px(-52px), netting to-6px(40pxpadding): AddedsmallSelectedIndicatorwith margin-(indicatorOffset + 30)px(-46px), netting to-6px(NavItemselection indicator line at-6px.overflow: hiddenandtransform: translateZ(0)fromNavSubItemGrouproot styles so child selection indicators are not clipped.NavSubItem.test.tsxverifying density classes and selection indicator behavior.Validation
Navstories (Basic,Controlled,Variable Density Items).yarn nx run react-nav:test), lint (yarn nx run react-nav:lint), and type-checking (yarn nx run react-nav:type-check) all pass.