Correct group controls depth

[tonyhallett]

Current Behavior

[Bug]: DetailsList and GroupedList do not calculate group nesting level correctly - misaligned

New Behavior

aligned

Related Issue(s)

Fixes #23114

Note that the group footer will need to be looked at in a similar manner

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 2420757404f54aba8e92cdbc41965a6fdbce8a3d}

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	1428	1383	5000
Breadcrumb	mount	3372	3358	1000
Checkbox	mount	3188	3159	5000
CheckboxBase	mount	2798	2833	5000
ChoiceGroup	mount	5326	5344	5000
ComboBox	mount	1478	1496	1000
CommandBar	mount	11055	11053	1000
ContextualMenu	mount	12204	12189	1000
DefaultButton	mount	1669	1682	5000
DetailsRow	mount	4320	4427	5000
DetailsRowFast	mount	4343	4291	5000
DetailsRowNoStyles	mount	4136	4144	5000
Dialog	mount	3709	3646	1000
DocumentCardTitle	mount	684	690	1000
Dropdown	mount	3938	4001	5000
FocusTrapZone	mount	2392	2366	5000
FocusZone	mount	2212	2274	5000
GroupedList	mount	64851	75686	2
GroupedList	virtual-rerender	30537	31562	2
GroupedList	virtual-rerender-with-unmount	107360	106063	2
GroupedListV2	mount	651	638	2
GroupedListV2	virtual-rerender	612	621	2
GroupedListV2	virtual-rerender-with-unmount	631	651	2
IconButton	mount	2292	2353	5000
Label	mount	849	880	5000
Layer	mount	5046	5090	5000
Link	mount	966	964	5000
MenuButton	mount	1988	2074	5000
MessageBar	mount	2618	2619	5000
Nav	mount	3958	4005	1000
OverflowSet	mount	1599	1607	5000
Panel	mount	3026	3007	1000
Persona	mount	1492	1569	1000
Pivot	mount	1942	1938	1000
PrimaryButton	mount	1783	1819	5000
Rating	mount	8907	8830	5000
SearchBox	mount	1862	1825	5000
Shimmer	mount	3430	3449	5000
Slider	mount	2474	2483	5000
SpinButton	mount	5549	5566	5000
Spinner	mount	948	941	5000
SplitButton	mount	3729	3718	5000
Stack	mount	1028	1024	5000
StackWithIntrinsicChildren	mount	2925	2993	5000
StackWithTextChildren	mount	6170	6168	5000
SwatchColorPicker	mount	12652	12701	5000
TagPicker	mount	3076	3198	5000
TeachingBubble	mount	89323	88724	5000
Text	mount	940	961	5000
TextField	mount	1895	1978	5000
ThemeProvider	mount	1793	1800	5000
ThemeProvider	virtual-rerender	1251	1259	5000
ThemeProvider	virtual-rerender-with-unmount	2528	2530	5000
Toggle	mount	1334	1308	5000
buttonNative	mount	619	623	5000

[spmonahan]

@tonyhallett The issue with API extractor is that you need to commit an updated API snapshot. You can build the snapshot with

yarn lage @fluentui/react build

Then just commit it and push it.

[tonyhallett]

I did. Commit "API update"

[tonyhallett]

This was before I pulled master so perhaps the logic has changed

[spmonahan]

This was before I pulled master so perhaps the logic has changed

Ah, you might need to regenerate the API snapshot then. Probably there are other API changes that your branch is missing.

[tonyhallett]

@spmonahan the change to the api snapshot was one that I had introduced in my first commit so I assume that api extractor config had changed. Snapshot also updated to reflect master.

If the intent agrees then the group footers will need to be changed in the same manner.

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 950786e12f6fbaf271cdd521118a94a1de7231ac:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[size-auditor[bot]]

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-ShimmeredDetailsList	232.535 kB	233.162 kB	627 bytes
office-ui-fabric-react	fluentui-react-DetailsList	222.044 kB	222.665 kB	621 bytes
office-ui-fabric-react	fluentui-react-GroupedList	128.585 kB	128.92 kB	335 bytes
office-ui-fabric-react	fluentui-react-GroupedListV2	116.357 kB	116.555 kB	198 bytes

 Over Tolerance (1024 B)  Over Baseline  Below Baseline  New   Removed 1 kB = 1000 B

Baseline commit: 2420757404f54aba8e92cdbc41965a6fdbce8a3d (build)

[spmonahan]

@tonyhallett Let's go ahead with these alignment changes.

[tonyhallett]

@spmonahan This pr now addresses #24837

I think that the code is ok but will compare the examples by eye tomorrow.

[spmonahan]

@spmonahan This pr now addresses #24837

I think that the code is ok but will compare the examples by eye tomorrow.

Sounds good! Before you do that you should probably resolve the merge conflict against master since there are changes to DetailsList. I don't think they'll affect your work but best to find out sooner rather than later :)

I'll be available to take a look next week.

[micahgodbolt]

Is this PR still in progress or should we close it?

[tonyhallett]

It is still open. There needs to be some input from the fluentui team with regards to expected behaviour of headers and footers. The associated issue has not even been tagged as a bug when it obviously is so.

[msft-fluent-ui-bot]

Because this pull request has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

The pull request will still be available for reference. If it's still relevant to merge at some point, you can reopen or make a new version based on the latest code.