Repository navigation
fix(react-nav): show selection indicator on selected NavSubItem - #36778
Open
Geervan (Geervan) wants to merge 1 commit into
Open
Geervan (Geervan) wants to merge 1 commit into
Geervan (Geervan) wants to merge 1 commit 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 |
Comment on lines
+33
to
+35
| smallSelectedIndicator: { | ||
| '::after': { | ||
| marginInlineStart: `-${navItemTokens.indicatorOffset + 32}px`, |
Contributor
There was a problem hiding this comment.
Could we update both the padding class order in mergeClasses and the indicator offsets for the two densities together? smallBase currently comes before base, so both densities retain 46px start padding. The new −48px small-density margin therefore positions the indicator at −2px, while the −54px medium-density margin positions it at −8px. Top-level indicators sit at −6px, so neither density aligns with them.
Making smallBase override base would give small-density items the intended 40px padding. With that corrected, margins of −46px for small and −52px for medium would align both indicators at −6px. Could we also add a regression check for alignment with top-level items in both densities?
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:
|
Copilot started reviewing on behalf of
Paul Mardling (PaulGMardling)
October 9, 2026 16:25
View session
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.
Comment on lines
+38
to
+40
| it('applies medium density and indicator styles when selected in medium density', () => { | ||
| const state = createBaseState({ selected: true, density: 'medium' }); | ||
| const { result } = renderHook(() => useNavSubItemStyles_unstable(state)); |
Comment on lines
+33
to
+35
| smallSelectedIndicator: { | ||
| '::after': { | ||
| marginInlineStart: `-${navItemTokens.indicatorOffset + 30}px`, |
📊 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/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 620 | Changed |
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 17 | Changed |
vr-tests-react-components/ProgressBar converged 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png | 1 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png | 69 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png | 78 | Changed |
vr-tests-react-components/TagPicker 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png | 635 | Changed |
| vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png | 677 | Changed |
There were 2 duplicate changes discarded. Check the build logs for more information.
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:
|
Comment on lines
+43
to
+44
| const { result } = renderHook(() => useNavSubItemGroupStyles_unstable(state)); | ||
| expect(result.current.root.className).toContain(navSubItemGroupClassNames.root); |
Comment on lines
+33
to
+36
| smallSelectedIndicator: { | ||
| '::after': { | ||
| marginInlineStart: `-${navItemTokens.indicatorOffset + 30}px`, | ||
| }, |
Geervan (Geervan)
force-pushed
the
fix/nav-sub-item-indicator
branch
from
October 9, 2026 18:57
05c8e2d to
b452348
Compare
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.