fix: GroupedListV2 scrollToIndex now works correctly by spmonahan · Pull Request #29332 · microsoft/fluentui

spmonahan · 2023-09-28T17:09:36Z

Previous Behavior

GroupedListV2 would not scroll to the correct index when using scrollToIndex().

New Behavior

GroupedListV2 flattens the list of items to better support virtualization. This means that we need to map the index passed into scrollToIndex() to the flattened list.

Additionally, to properly measure heights for virtualization we need to be able to account for group headers and footers so APIs have been updated to provide this information to users.

Finally, a new example has been added to demonstrate how to use this feature.

Related Issue(s)

Fixes [Bug]: GroupedList (and grouped DetailsList) do not scrollToIndex() #29169

GroupedListV2 flattens the list of items to better support virtualization. This means that we need to make the `index` passed into `scrollToIndex()` to the flattened list. Additionally, to properly measure heights for virtualization we need to be able to account for group headers and footers so APIs have been updated to provide this information to users. Finally, a new example has been added to demonstrate how to use this feature.

codesandbox-ci · 2023-09-28T17:22:09Z

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 4980650:

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

fabricteam · 2023-09-28T17:24:01Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2023-09-28T17:24:44Z

📊 Bundle size report

_{🤖 This report was generated against e0d871e6236b9ef86b8566daf7c8ba61a7325b1f}

size-auditor · 2023-09-28T17:30:38Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-GroupedListV2	118.234 kB	118.849 kB	615 bytes
office-ui-fabric-react	fluentui-react-GroupedList	130.546 kB	131.161 kB	615 bytes
office-ui-fabric-react	fluentui-react-ComboBox	243.061 kB	243.086 kB	25 bytes
office-ui-fabric-react	fluentui-react-List	37.733 kB	37.758 kB	25 bytes
office-ui-fabric-react	fluentui-react-DetailsList	224.963 kB	224.988 kB	25 bytes
office-ui-fabric-react	fluentui-react-ShimmeredDetailsList	235.715 kB	235.74 kB	25 bytes

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

Baseline commit: e0d871e6236b9ef86b8566daf7c8ba61a7325b1f (build)

fabricteam · 2023-09-28T17:35:52Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	620	619	5000
Breadcrumb	mount	1689	1687	1000
Checkbox	mount	1645	1641	5000
CheckboxBase	mount	1482	1470	5000
ChoiceGroup	mount	2917	2906	5000
ComboBox	mount	625	644	1000
CommandBar	mount	6167	6178	1000
ContextualMenu	mount	11548	11723	1000
DefaultButton	mount	725	728	5000
DetailsRow	mount	2157	2175	5000
DetailsRowFast	mount	2137	2130	5000
DetailsRowNoStyles	mount	2025	1961	5000
Dialog	mount	2587	2631	1000
DocumentCardTitle	mount	226	234	1000
Dropdown	mount	1965	1999	5000
FocusTrapZone	mount	1086	1137	5000
FocusZone	mount	1056	1048	5000
GroupedList	mount	40392	40838	2
GroupedList	virtual-rerender	17293	19545	2
GroupedList	virtual-rerender-with-unmount	50869	49883	2
GroupedListV2	mount	220	222	2
GroupedListV2	virtual-rerender	216	211	2
GroupedListV2	virtual-rerender-with-unmount	224	237	2
IconButton	mount	1106	1073	5000
Label	mount	335	337	5000
Layer	mount	2754	2755	5000
Link	mount	393	396	5000
MenuButton	mount	936	943	5000
MessageBar	mount	21558	21755	5000
Nav	mount	1921	1950	1000
OverflowSet	mount	797	777	5000
Panel	mount	1777	1821	1000
Persona	mount	738	704	1000
Pivot	mount	839	859	1000
PrimaryButton	mount	844	848	5000
Rating	mount	4585	4603	5000
SearchBox	mount	884	909	5000
Shimmer	mount	1899	1862	5000
Slider	mount	1320	1318	5000
SpinButton	mount	2803	2872	5000
Spinner	mount	381	399	5000
SplitButton	mount	1841	1819	5000
Stack	mount	397	410	5000
StackWithIntrinsicChildren	mount	863	853	5000
StackWithTextChildren	mount	2612	2578	5000
SwatchColorPicker	mount	6132	6041	5000
TagPicker	mount	1472	1461	5000
Text	mount	379	370	5000
TextField	mount	937	938	5000
ThemeProvider	mount	846	842	5000
ThemeProvider	virtual-rerender	590	600	5000
ThemeProvider	virtual-rerender-with-unmount	1289	1315	5000
Toggle	mount	602	606	5000
buttonNative	mount	184	186	5000

sopranopillow

Other than the two comments, looks great!

packages/react-examples/src/react/DetailsList/DetailsList.GroupedV2.ScrollToIndex.Example.tsx

packages/react/etc/react.api.md

packages/react/src/components/GroupedList/GroupedListV2.types.ts

packages/react/etc/react.api.md

packages/react/src/components/GroupedList/GroupedListV2.base.tsx

packages/react/src/index.ts

packages/react/src/components/GroupedList/GroupedListV2.base.tsx

Co-authored-by: Esteban Munoz Facusse <estebanmu@microsoft.com> Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

* master: (35 commits) bugfix(react-dialog): removes context hooks invocations from styles hook (microsoft#29396) chore(react-dialog): exports DialogSurface context types and hooks (microsoft#29397) Minimum height feature for bar chart (microsoft#29359) (feat) Breadcrumb - register items via context (microsoft#29393) fix: Consider all parents as scroll parents (microsoft#29378) Changes to enable charting on fluent docsite (microsoft#29210) bugfix: ensure TreeItem emits events properly (microsoft#29390) chore(deps): bump get-func-name from 2.0.0 to 2.0.2 (microsoft#29320) chore: migrate from getNativeElementProps to getIntrinsicElementProps (microsoft#29387) applying package updates applying package updates fix: Icon in disabled Button shouldn't change color on hover or pressed (microsoft#29342) Squish changes for rebase (microsoft#28705) fix: GroupedListV2 scrollToIndex now works correctly (microsoft#29332) Fix 27482: ProgressBar has an optional state variable (microsoft#29366) remove a11y test ux from theme designer (microsoft#29379) feat: preview release (microsoft#29377) Fixed divider in the tooltip (microsoft#29357) fix (microsoft#29376) docs: Initial documentation pass (microsoft#29372) ...

spmonahan requested review from a team and ThomasMichon as code owners September 28, 2023 17:09

github-actions bot added this to the September Project Cycle Q4 2023 milestone Sep 28, 2023

spmonahan mentioned this pull request Sep 28, 2023

fix: GroupedList.scrollToIndex() now targets group index #29173

Closed

microsoft-github-policy-service bot added Component: DetailsList Component: GroupedList labels Sep 28, 2023

Merge branch 'master' into grouped-list-v2/scroll-to-index

158e41f

github-actions bot modified the milestones: September Project Cycle Q4 2023, October Project Cycle Q4 2023 Oct 2, 2023

sopranopillow approved these changes Oct 3, 2023

View reviewed changes

packages/react-examples/src/react/DetailsList/DetailsList.GroupedV2.ScrollToIndex.Example.tsx Outdated Show resolved Hide resolved

packages/react/etc/react.api.md Show resolved Hide resolved

khmakoto approved these changes Oct 3, 2023

View reviewed changes

spmonahan and others added 2 commits October 3, 2023 10:54

Apply suggestions from code review

3bd5995

Co-authored-by: Esteban Munoz Facusse <estebanmu@microsoft.com> Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

update API snapshot

4980650

spmonahan merged commit ae69683 into microsoft:master Oct 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: GroupedListV2 scrollToIndex now works correctly#29332

fix: GroupedListV2 scrollToIndex now works correctly#29332
spmonahan merged 4 commits intomicrosoft:masterfrom
spmonahan:grouped-list-v2/scroll-to-index

spmonahan commented Sep 28, 2023

Uh oh!

codesandbox-ci bot commented Sep 28, 2023 •

edited

Loading

Uh oh!

fabricteam commented Sep 28, 2023 •

edited

Loading

Uh oh!

fabricteam commented Sep 28, 2023 •

edited

Loading

Uh oh!

size-auditor bot commented Sep 28, 2023 •

edited

Loading

Uh oh!

fabricteam commented Sep 28, 2023 •

edited

Loading

Uh oh!

sopranopillow left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

spmonahan commented Sep 28, 2023

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

codesandbox-ci bot commented Sep 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Sep 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

fabricteam commented Sep 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

size-auditor bot commented Sep 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Sep 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

sopranopillow left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codesandbox-ci bot commented Sep 28, 2023 •

edited

Loading

fabricteam commented Sep 28, 2023 •

edited

Loading

fabricteam commented Sep 28, 2023 •

edited

Loading

size-auditor bot commented Sep 28, 2023 •

edited

Loading

fabricteam commented Sep 28, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)