Skip to content

Cherry pick: GroupedListV2 changes#25985

Merged
spmonahan merged 21 commits intomicrosoft:7.0from
spmonahan:cherry-pick/grouped-list-v2
Dec 20, 2022
Merged

Cherry pick: GroupedListV2 changes#25985
spmonahan merged 21 commits intomicrosoft:7.0from
spmonahan:cherry-pick/grouped-list-v2

Conversation

@spmonahan
Copy link
Contributor

Previous Behavior

Fluent UI v7 did not have GroupedListV2 and the associated fixes.

New Behavior

GroupedListV2 has been cherry-picked into Fluent UI v7.

Related Issue(s)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Dec 14, 2022

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

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration

@size-auditor
Copy link

size-auditor bot commented Dec 14, 2022

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react office-ui-fabric-react-GroupedListV2 New   119.528 kB ExceedsTolerance     119.528 kB
office-ui-fabric-react office-ui-fabric-react-GroupedList 124.236 kB 131.77 kB ExceedsTolerance     7.534 kB
office-ui-fabric-react office-ui-fabric-react-DetailsList 223.77 kB 225.444 kB ExceedsTolerance     1.674 kB
office-ui-fabric-react office-ui-fabric-react-ShimmeredDetailsList 233.612 kB 235.282 kB ExceedsTolerance     1.67 kB
office-ui-fabric-react office-ui-fabric-react-ComboBox 243.797 kB 244.458 kB ExceedsBaseline     661 bytes
office-ui-fabric-react office-ui-fabric-react-List 36.936 kB 37.592 kB ExceedsBaseline     656 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 8c26b4e2c34095aa7fdbf3dee180b52b553833dd (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Dec 14, 2022

🕵 FluentUI-v7 No visual regressions between this PR and main

spmonahan and others added 11 commits December 15, 2022 09:56
…osoft#24460)

* GroupedList: add new version to address virtualization issues

Introduces a new component, GroupedListV2, that is a drop-in replacement
for GroupedList. GroupedListV2 addresses a bug with the virtualization
implementation in GroupedList. As it is a significant re-write of the
internals we've decided to make it a new component so users can opt in
to the new component/behavior as needed rather than risk significant
breakage with the existing GroupedList implementation.

---

Virtualization in GroupedList is powered by List and groups in GroupedList
are nested Lists. When nested with two or more levels of groups issues
can arise with virtualization that result in the vertical size of the
Lists being miscalculated resulting in items not rendering, the scrollbar
repeatedly resizing (causing the list to "jump" about), or both.

List does work asynchronously which contributes to the issue itself and
makes debugging practically impossible as even a simple GroupedList will
contain many Lists all of which are virtualized and rendering async.

To address this issue we are introducing GroupedListV2 which is a drop-in
replacement for GropedList (V1) as it adheres to the same API.

Internally GroupedListV2 flattens virtualization into a single List
eliminating the virtualization bug described above and making the list
easier to reason about and debug.

* List: add conditional rendering option

Adds support to conditionally render cells in List which helps when
rendering flattend GroupedLists as we don't really know if we need to
render certain parts of the list (e.g., footers) until we call the
render function.

Ensure GroupedList <--> GroupedListV2 compatibility.

* DetailsList: allow for custom GroupedList renderer

This change allows users to provide a custom GroupedList renderer like
GroupedListV2.

* Update @fluentui/react API snapshot
Add GroupedListV2 tests
Add DetailsList tests
A dd support for ungrouped lists

* add perf tests for groupedlist/groupedlistv2

* change files

* better types and refactor render functions.

* refactor grouped items

* typescript

* WIP debugging

* fix issues from tests

- Add proper `getKey()` handling.
- Remove selection dependency for "show all" and footer rendering.

* Mark GroupedListV2 as unstable

* groupedlistv2: update naming

- Rename to GroupedListV2_unstable
- Update tests to use this name

* update api snapshot

* update groupedlistv2 import for perf-test

* update snapshots

* pr feedback

* update test snapshot
…11y experience (microsoft#17591)

* GroupedDetailsList will now have correct row-index for GroupHeader and correct offset is passed to DetailsRow which accounts for GroupHeader

* DetailsRow now takes groups as a prop which  is used to determine aria-posinset for GroupedList

* updated GroupedList examples to pass groups prop to DetailsRow

* updated react api file

* updated detailsrow documentationa and minor fix

* updated react snapshots

* updated react examples snapshots

* Change files

* updated change file

* minor

* add aria-rowindex attribute to GroupedHeader.base

* updated react snapshots

* comment cleanup

* fix: build errors

* fix: build error

* added missing dependency

* fix CI error

* getItemGroup now returns the row item's exact group

* remove first for-of loop in getItemGroup

* fix CI error

* update getItemGroup to remove ! operator

* update getTotalRowCount to remove ! operator

* update DetailsRow props

* remove aria-posinset calculation from DetailsRow

* ariaPosinSet and ariaSetSize are now passed in return function of onRenderGroupCell for consumers to use

* update GroupedList examples topass ariaPosInSet & ariaSetSize to DetailsRow

* update api

* ci fix

* add useGroupedDetailsListIndexMap for O(1) lookup of helper variables to calculate correct index for GroupedDetailsList

* GroupedListSection now passes group to onRenderCell, removes ariaPosInSet and ariaSetSize

* DetailsRow now accepts group prop and calculates ariaPosInSet and ariaSetSize based on group

* update GroupedList examples to pass group prop to DetailsRow

* update API

* update DetailsRow type documentation and ci fix

* ci fix
@spmonahan spmonahan force-pushed the cherry-pick/grouped-list-v2 branch from 35d16f0 to 4a11d53 Compare December 15, 2022 17:58
@spmonahan
Copy link
Contributor Author

I've accepted the Screener change as it was Coachmark which has an animation and is known to have false positives as a result.

@spmonahan spmonahan marked this pull request as ready for review December 15, 2022 21:29
@spmonahan spmonahan requested review from a team and ThomasMichon as code owners December 15, 2022 21:29
GroupedListV2 depends on some updates to List that were not present in
the v7 branch. These List changes broke some DetailsList tests so those
have been updated as well.
@fabricteam
Copy link
Collaborator

fabricteam commented Dec 16, 2022

Perf Analysis

Scenario Render type 7.0 Ticks PR Ticks Iterations Status
BaseButton mount 764 1134 5000 Possible regression
Checkbox mount 1291 1656 5000 Possible regression
CheckboxBase mount 1067 1427 5000 Possible regression
ComboBox mount 684 1058 1000 Possible regression
DefaultButton mount 936 1290 5000 Possible regression
DetailsRowFast mount 3058 3346 5000 Possible regression
DetailsRowNoStyles mount 2826 3263 5000 Possible regression
Dialog mount 1756 2157 1000 Possible regression
DocumentCardTitle mount 1567 1918 1000 Possible regression
Dropdown mount 2037 2379 5000 Possible regression
FocusTrapZone mount 1413 1772 5000 Possible regression
FocusZone mount 1507 1886 5000 Possible regression
GroupedList mount 36 883 2 Possible regression
GroupedListV2 mount 41 501 2 Possible regression
IconButton mount 1382 1759 5000 Possible regression
Label mount 310 682 5000 Possible regression
Layer mount 1633 2007 5000 Possible regression
Link mount 395 774 5000 Possible regression
MenuButton mount 1188 1556 5000 Possible regression
MessageBar mount 1791 2116 5000 Possible regression
Nav mount 2603 2980 1000 Possible regression
OverflowSet mount 1222 1580 5000 Possible regression
Panel mount 1173 1530 1000 Possible regression
Persona mount 816 1159 1000 Possible regression
Pivot mount 1110 1483 1000 Possible regression
PrimaryButton mount 1060 1412 5000 Possible regression
SearchBox mount 1071 1443 5000 Possible regression
Shimmer mount 2262 2619 5000 Possible regression
Slider mount 1302 1666 5000 Possible regression
Spinner mount 390 753 5000 Possible regression
SplitButton mount 2451 2839 5000 Possible regression
Stack mount 461 825 5000 Possible regression
StackWithIntrinsicChildren mount 1363 1710 5000 Possible regression
TagPicker mount 2091 2464 5000 Possible regression
Text mount 393 776 5000 Possible regression
TextField mount 1140 1509 5000 Possible regression
Toggle mount 742 1106 5000 Possible regression
button mount 82 464 5000 Possible regression
All results

Scenario Render type 7.0 Ticks PR Ticks Iterations Status
BaseButton mount 764 1134 5000 Possible regression
Breadcrumb mount 35418 35584 5000
Checkbox mount 1291 1656 5000 Possible regression
CheckboxBase mount 1067 1427 5000 Possible regression
ChoiceGroup mount 4014 4393 5000
ComboBox mount 684 1058 1000 Possible regression
CommandBar mount 6534 6881 1000
ContextualMenu mount 11207 11948 1000
DefaultButton mount 936 1290 5000 Possible regression
DetailsRow mount 2998 3394 5000
DetailsRowFast mount 3058 3346 5000 Possible regression
DetailsRowNoStyles mount 2826 3263 5000 Possible regression
Dialog mount 1756 2157 1000 Possible regression
DocumentCardTitle mount 1567 1918 1000 Possible regression
Dropdown mount 2037 2379 5000 Possible regression
FocusTrapZone mount 1413 1772 5000 Possible regression
FocusZone mount 1507 1886 5000 Possible regression
GroupedList mount 36 883 2 Possible regression
GroupedListV2 mount 41 501 2 Possible regression
IconButton mount 1382 1759 5000 Possible regression
Label mount 310 682 5000 Possible regression
Layer mount 1633 2007 5000 Possible regression
Link mount 395 774 5000 Possible regression
MenuButton mount 1188 1556 5000 Possible regression
MessageBar mount 1791 2116 5000 Possible regression
Nav mount 2603 2980 1000 Possible regression
OverflowSet mount 1222 1580 5000 Possible regression
Panel mount 1173 1530 1000 Possible regression
Persona mount 816 1159 1000 Possible regression
Pivot mount 1110 1483 1000 Possible regression
PrimaryButton mount 1060 1412 5000 Possible regression
Rating mount 6666 7062 5000
SearchBox mount 1071 1443 5000 Possible regression
Shimmer mount 2262 2619 5000 Possible regression
Slider mount 1302 1666 5000 Possible regression
SpinButton mount 3919 4296 5000
Spinner mount 390 753 5000 Possible regression
SplitButton mount 2451 2839 5000 Possible regression
Stack mount 461 825 5000 Possible regression
StackWithIntrinsicChildren mount 1363 1710 5000 Possible regression
StackWithTextChildren mount 4213 4599 5000
SwatchColorPicker mount 8101 8403 5000
TagPicker mount 2091 2464 5000 Possible regression
TeachingBubble mount 41312 41884 5000
Text mount 393 776 5000 Possible regression
TextField mount 1140 1509 5000 Possible regression
Toggle mount 742 1106 5000 Possible regression
button mount 82 464 5000 Possible regression

@spmonahan spmonahan requested a review from khmakoto December 19, 2022 23:52
Comment on lines +2 to +15
import {
DetailsHeader,
DetailsList,
IColumn,
IDetailsHeaderProps,
IDetailsList,
IGroup,
IRenderFunction,
IToggleStyles,
mergeStyles,
Toggle,
GroupedListV2_unstable as GroupedListV2,
} from 'office-ui-fabric-react';
import { DefaultButton, IButtonStyles } from 'office-ui-fabric-react/lib/Button';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: You can pull all of these up into one import

Suggested change
import {
DetailsHeader,
DetailsList,
IColumn,
IDetailsHeaderProps,
IDetailsList,
IGroup,
IRenderFunction,
IToggleStyles,
mergeStyles,
Toggle,
GroupedListV2_unstable as GroupedListV2,
} from 'office-ui-fabric-react';
import { DefaultButton, IButtonStyles } from 'office-ui-fabric-react/lib/Button';
import {
DefaultButton,
DetailsHeader,
DetailsList,
IButtonStyles,
IColumn,
IDetailsHeaderProps,
IDetailsList,
IGroup,
IRenderFunction,
IToggleStyles,
mergeStyles,
Toggle,
GroupedListV2_unstable as GroupedListV2,
} from 'office-ui-fabric-react';

Comment on lines +2 to +9
import {
DetailsHeader,
DetailsList,
IColumn,
IDetailsHeaderProps,
IGroup,
} from 'office-ui-fabric-react/lib/DetailsList';
import { GroupedListV2_unstable as GroupedListV2 } from 'office-ui-fabric-react/lib/GroupedListV2';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: You can pull these up into one import statement

Suggested change
import {
DetailsHeader,
DetailsList,
IColumn,
IDetailsHeaderProps,
IGroup,
} from 'office-ui-fabric-react/lib/DetailsList';
import { GroupedListV2_unstable as GroupedListV2 } from 'office-ui-fabric-react/lib/GroupedListV2';
import {
DetailsHeader,
DetailsList,
IColumn,
IDetailsHeaderProps,
IGroup,
GroupedListV2_unstable as GroupedListV2,
} from 'office-ui-fabric-react/lib/DetailsList';

@spmonahan spmonahan merged commit f5d5ccd into microsoft:7.0 Dec 20, 2022
@spmonahan
Copy link
Contributor Author

Admin merging to override the bundle size change

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants