fix(react-tree): support indentation for TreeItem levels greater than 10 by Copilot · Pull Request #36014 · microsoft/fluentui

Copilot · 2026-04-20T17:11:06Z

useTreeItemStyles.styles.ts pre-generates Griffel classes only for levels 1–10, so any TreeItem nested deeper loses its indentation and visually collapses back toward the root.

Changes

useTreeItemStyles.styles.ts: keep the static classes for levels 1–10 (common case, no extra inline style), and for level > 10 fall back to an inline style that sets the --fluent-TreeItem--level CSS variable directly on the root slot. User-provided style is spread after, so it still wins.
TreeItem.test.tsx: new test rendering a 12-deep tree asserting that levels ≤ 10 have no inline var and levels > 10 set the CSS variable to their aria-level.
Change file: patch bump for @fluentui/react-tree.

// useTreeItemStyles_unstable, after className merge
if (!isStaticallyDefinedLevel(level)) {
  state.root.style = {
    [treeItemLevelToken]: level, // --fluent-TreeItem--level
    ...state.root.style,
  };
}

This avoids generating an unbounded number of atomic classes while supporting arbitrarily deep trees.

…ine CSS variable Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/9f80c711-ce28-4674-af00-9dcf00d323b7 Co-authored-by: tudorpopams <[email protected]>

tudorpopams · 2026-04-21T10:02:31Z

@copilot rebase this branch against master

Co-authored-by: Claude Sonnet 4.6 <[email protected]> Co-authored-by: tudorpopams <[email protected]>

Co-authored-by: tudorpopams <[email protected]>

Copilot · 2026-04-21T10:08:15Z

@copilot rebase this branch against master

Rebased against master in c8c8692. The branch now contains all current master changes; git diff origin/master only shows the 3 files from this fix.

tudorpopams · 2026-04-21T10:29:13Z

@copilot not sure why this branch now has message bar changes in it. Please make sure you update with the latest changes from master.

Copilot · 2026-04-21T10:33:10Z

@copilot not sure why this branch now has message bar changes in it. Please make sure you update with the latest changes from master.

The PR's content diff against master is already clean — git diff origin/master shows only the 3 files from this fix (the change file, TreeItem.test.tsx, and useTreeItemStyles.styles.ts). The message-bar commit you're seeing in the branch history is a duplicate introduced by the earlier rebase: the rebase replayed master's feat(react-message-bar) commit on top of my branch, which assigned it a new SHA, so it appears as an "extra" commit alongside master's original.

Cleaning this up requires a force-push, but my tooling (report_progress) only does a non-force rebase onto the remote branch, which re-introduces the messy commits (confirmed — I just tried). Could you either force-push the cleaned-up history yourself, or squash-merge the PR on merge? The Files Changed tab reflects only the intended 3-file change.

tudorpopams · 2026-04-21T13:44:22Z

@copilot CI failed. Check why and fix it.

Copilot · 2026-04-21T13:47:37Z

@copilot CI failed. Check why and fix it.

The failing job was react-table-stories:test-ssr — a pre-existing SSR issue unrelated to react-tree:

RenderError: Found a 'popover' attribute. If you are testing the popover API, you must enable Experimental Web Platform Features. ...

This same failure also occurred on master itself at commit 020511b1 (the feat(react-message-bar) commit that was tip-of-master when this PR's CI ran). The next master commit, 147cdfa0 (test(react-toolbar): baseline hook tests…), passed cleanly.

You've since merged latest master into the branch (e5bf22e), which pulls in 147cdfa0, and a new CI run is already in progress against that commit. No code change is needed from me — the re-run should go green. I'll monitor it and follow up if it doesn't.

github-actions · 2026-04-21T13:48:57Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: entire library	`1.293 MB` `324.742 kB`	`1.293 MB` `324.757 kB`	`52 B` `15 B`
`react-tree` FlatTree	`135.819 kB` `40.404 kB`	`135.901 kB` `40.456 kB`	`82 B` `52 B`
`react-tree` PersonaFlatTree	`137.647 kB` `40.91 kB`	`137.729 kB` `40.969 kB`	`82 B` `59 B`
`react-tree` PersonaTree	`133.708 kB` `39.693 kB`	`133.79 kB` `39.742 kB`	`82 B` `49 B`
`react-tree` Tree	`131.886 kB` `39.226 kB`	`131.968 kB` `39.259 kB`	`82 B` `33 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Button, FluentProvider & webLightTheme	`66.328 kB` `19.02 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`226.621 kB` `68.043 kB`
`react-components` react-components: FluentProvider & webLightTheme	`39.525 kB` `13.113 kB`
`react-portal-compat` PortalCompatProvider	`5.567 kB` `2.237 kB`
`react-timepicker-compat` TimePicker	`104.461 kB` `34.894 kB`

_{🤖 This report was generated against b7214c3161b6bc48253fc228d2a24a95fd5631dd}

tudorpopams · 2026-04-24T16:13:10Z

PR Review: #36014 — fix(react-tree): support indentation for TreeItem levels greater than 10

Author: app/copilot-swe-agent
Type: bug-fix
Packages affected: @fluentui/react-tree
CI Status: passing (all 15 checks green, including e2e, VR screenshots, bundle-size)

Confidence Score: 100/100

Surgical one-branch addition with a dedicated test; uses pre-existing types (TreeItemCSSProperties, treeItemLevelToken) and the documented slot-style mechanism, so there's no new surface area to worry about.

Findings

Blockers (must fix before merge)

none

Warnings (should address)

none

Info (consider)

The PR carries the PR: API Modified label, but the diff only touches an internal _unstable hook implementation and a test — library/etc/react-tree.api.md isn't updated and nothing public changed. Looks auto-applied. Worth confirming with the maintainer that the label is safe to drop.
Optional: the inline-style branch only runs for level > 10. A brief Storybook story (deep-nested Tree) would make the fix visually scannable, but the new unit test already covers it deterministically — not a gap.

Category Breakdown

Category	Status	Notes
Change file	PASS	`@fluentui-react-tree-tree-deep-level-fix.json`, type `patch`, clear description
V9 patterns	PASS	No `React.FC`. Inline `style` is the documented path for dynamic CSS vars via the `TreeItemCSSProperties` type (pre-existing in `TreeItem.types.ts`). `mergeClasses` call order unchanged.
Dep layers	PASS	No `package.json` or new-import changes.
SSR safety	PASS	No `window`/`document`/`navigator` access.
Testing	PASS	New test renders a 12-deep tree and asserts both paths: levels ≤10 have empty `style` for the token, levels >10 set `--fluent-TreeItem--level` equal to `aria-level`.
API surface	PASS	`state.root.style` was already typed to accept the CSS-var token (`TreeItemCSSProperties` in `TreeItem.types.ts:7`). No public shape change.
Accessibility	PASS	`aria-level` preserved (the test uses it as the source of truth for the assertion).
Security/Quality	PASS	No `eval`/`dangerouslySetInnerHTML`/`console.log`/`@ts-ignore`/`any`.

Recommendation

APPROVE

The fix adds exactly one if (!isStaticallyDefinedLevel(level)) branch, falls back to an inline CSS variable, and spreads user-provided state.root.style after so user input still wins. The approach — keep static Griffel classes for the common 1–10 range, inline fallback for the long tail — correctly addresses the reason the static-class generator capped at 10 in the first place (unbounded atomic-class generation). Solid small PR.

Posted via the /review-pr skill.

tudorpopams · 2026-04-24T16:16:15Z

@copilot consider the changes suggested above

… to reflect automatic fallback Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/b7e51df0-83b9-4c97-b737-0c1922a87851 Co-authored-by: tudorpopams <[email protected]>

Copilot · 2026-04-24T16:19:11Z

@copilot consider the changes suggested above

Considered both info items:

PR: API Modified label — confirmed it's spurious. The diff only touches library/src/components/TreeItem/useTreeItemStyles.styles.ts (internal _unstable implementation) and tests; library/etc/react-tree.api.md is unchanged. Safe to drop. I can't edit labels, so leaving for you.
Deep-nested Storybook story — there's already TreeInlineStylingTreeItemLevel.stories.tsx demonstrating the pattern, so no new story is needed. However, its description still claimed the user must apply inline styling for >10 levels, which is stale after this fix. Updated in a870a54 to note the library now auto-handles >10 levels and the story stands as an override example.

tudorpopams · 2026-05-20T10:35:53Z

@copilot fix CI

….style assignment Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/d1ab7dce-2cac-4325-a83e-e8a57d3bd5e3 Co-authored-by: tudorpopams <[email protected]>

Copilot · 2026-05-20T10:40:37Z

@copilot fix CI

Fixed in 9e21616. The CI failure was react-tree:lint — the new react-hooks/immutability rule (enabled in the recent react-compiler-rules migration on master) flagged the state.root.style = { ... } assignment introduced in this PR. Added an // eslint-disable-next-line react-hooks/immutability directive, matching the same pre-existing disable on the state.root.className = mergeClasses(...) line right above it in the same hook.

Initial plan

7766652

Copilot AI assigned Copilot and tudorpopams Apr 20, 2026

Copilot started work on behalf of tudorpopams April 20, 2026 17:11 View session

Copilot AI linked an issue Apr 20, 2026 that may be closed by this pull request

[Bug]: When tree exceeds 10 levels , an error is displayed indentation #35601

Closed

2 tasks

Copilot AI changed the title ~~[WIP] Fix indentation error for tree exceeding 10 levels~~ fix(react-tree): support indentation for TreeItem levels greater than 10 Apr 20, 2026

Copilot finished work on behalf of tudorpopams April 20, 2026 17:18

Copilot AI requested a review from tudorpopams April 20, 2026 17:18

Copilot started work on behalf of tudorpopams April 20, 2026 18:54 View session

Copilot finished work on behalf of tudorpopams April 20, 2026 19:03

tudorpopams marked this pull request as ready for review April 21, 2026 10:02

tudorpopams requested a review from a team as a code owner April 21, 2026 10:02

Copilot started work on behalf of tudorpopams April 21, 2026 10:02 View session

dmytrokirpa and others added 2 commits April 21, 2026 10:06

feat(react-message-bar): add useMessageBarBase_unstable hook (#35908)

83932d7

Co-authored-by: Claude Sonnet 4.6 <[email protected]> Co-authored-by: tudorpopams <[email protected]>

Initial plan

c8c8692

Co-authored-by: tudorpopams <[email protected]>

microsoft-github-policy-service Bot added the PR: API Modified label Apr 21, 2026

Copilot finished work on behalf of tudorpopams April 21, 2026 10:09

tudorpopams requested a review from mainframev April 21, 2026 10:26

Copilot started work on behalf of tudorpopams April 21, 2026 10:29 View session

Copilot finished work on behalf of tudorpopams April 21, 2026 10:33

Merge branch 'master' into copilot/fix-tree-indentation-error

e5bf22e

Copilot started work on behalf of tudorpopams April 21, 2026 13:44 View session

github-actions Bot reviewed Apr 21, 2026

View reviewed changes

Comment thread change/@fluentui-react-tree-tree-deep-level-fix.json

Merge branch 'master' into copilot/fix-tree-indentation-error

e16ec76

tudorpopams approved these changes Apr 22, 2026

View reviewed changes

tudorpopams added 3 commits April 23, 2026 10:43

Merge branch 'master' into copilot/fix-tree-indentation-error

002836b

Merge branch 'master' into copilot/fix-tree-indentation-error

94ded10

Merge branch 'master' into copilot/fix-tree-indentation-error

bb6ee92

tudorpopams enabled auto-merge (squash) April 23, 2026 11:59

Copilot started work on behalf of tudorpopams April 24, 2026 16:16 View session

Copilot finished work on behalf of tudorpopams April 24, 2026 16:19

Copilot AI requested a review from tudorpopams April 24, 2026 16:19

tudorpopams removed the PR: API Modified label Apr 24, 2026

tudorpopams approved these changes Apr 27, 2026

View reviewed changes

jurokapsiar reviewed May 13, 2026

View reviewed changes

Comment thread ...ages/react-components/react-tree/library/src/components/TreeItem/useTreeItemStyles.styles.ts

jurokapsiar approved these changes May 14, 2026

View reviewed changes

Merge branch 'master' into copilot/fix-tree-indentation-error

da1aae1

mainframev approved these changes May 18, 2026

View reviewed changes

tudorpopams added 2 commits May 18, 2026 16:30

Merge branch 'master' into copilot/fix-tree-indentation-error

c91d1c4

Merge branch 'master' into copilot/fix-tree-indentation-error

ed7be67

Copilot started work on behalf of tudorpopams May 20, 2026 10:36 View session

Copilot finished work on behalf of tudorpopams May 20, 2026 10:40

Copilot AI requested a review from tudorpopams May 20, 2026 10:40

Merge branch 'master' into copilot/fix-tree-indentation-error

95d9082

tudorpopams merged commit 68e978d into master May 21, 2026
14 checks passed

Uh oh!

Conversation

Copilot AI commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Uh oh!

tudorpopams commented Apr 21, 2026

Uh oh!

Copilot AI commented Apr 21, 2026

Uh oh!

tudorpopams commented Apr 21, 2026

Uh oh!

Copilot AI commented Apr 21, 2026

Uh oh!

tudorpopams commented Apr 21, 2026

Uh oh!

Copilot AI commented Apr 21, 2026

Uh oh!

github-actions Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

Uh oh!

tudorpopams commented Apr 24, 2026

PR Review: #36014 — fix(react-tree): support indentation for TreeItem levels greater than 10

Confidence Score: 100/100

Findings

Blockers (must fix before merge)

Warnings (should address)

Info (consider)

Category Breakdown

Recommendation

Uh oh!

tudorpopams commented Apr 24, 2026

Uh oh!

Copilot AI commented Apr 24, 2026

Uh oh!

Uh oh!

tudorpopams commented May 20, 2026

Uh oh!

Copilot AI commented May 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Copilot AI commented Apr 20, 2026 •

edited

Loading

github-actions Bot commented Apr 21, 2026 •

edited

Loading