feat: List - boilerplate code #29771

george-cz · 2023-11-06T21:51:42Z

This is just generated with yarn create-package and create-component, so that its easier to do the actual code review of List.

fabricteam · 2023-11-06T22:02:03Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	638	654	5000
Button	mount	315	330	5000
Field	mount	1172	1120	5000
FluentProvider	mount	717	708	5000
FluentProviderWithTheme	mount	78	81	10
FluentProviderWithTheme	virtual-rerender	70	66	10
FluentProviderWithTheme	virtual-rerender-with-unmount	80	77	10
MakeStyles	mount	847	858	50000
Persona	mount	1761	1709	5000
SpinButton	mount	1362	1389	5000

fabricteam · 2023-11-06T22:15:01Z

🕵 fluentuiv9 No visual regressions between this PR and main

weird CI breaks

ling1726 · 2023-11-07T09:00:43Z

Please try to generate the create-package boilerplate again - you're missing an entry in tsconfig.base.json which is causing the current CI break

…_boilerplate

fabricteam · 2023-11-07T09:31:30Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `330 B`
`global-context` createContextSelector	`537 B` `342 B`
`priority-overflow` createOverflowManager	`4.341 kB` `1.81 kB`
`react-accordion` Accordion (including children components)	`92.983 kB` `28.418 kB`
`react-alert` Alert	`84.293 kB` `23.456 kB`
`react-avatar` Avatar	`50.534 kB` `15.923 kB`
`react-avatar` AvatarGroup	`20.064 kB` `7.894 kB`
`react-avatar` AvatarGroupItem	`65.19 kB` `20.259 kB`
`react-badge` Badge	`27.264 kB` `8.808 kB`
`react-badge` CounterBadge	`28.165 kB` `9.101 kB`
`react-badge` PresenceBadge	`25.67 kB` `9.313 kB`
`react-button` Button	`40.074 kB` `11.292 kB`
`react-button` CompoundButton	`47.43 kB` `12.787 kB`
`react-button` MenuButton	`44.848 kB` `12.668 kB`
`react-button` SplitButton	`52.862 kB` `14.254 kB`
`react-button` ToggleButton	`57.122 kB` `13.194 kB`
`react-calendar-compat` Calendar Compat	`141.364 kB` `36.841 kB`
`react-card` Card - All	`92.955 kB` `26.977 kB`
`react-card` Card	`87.781 kB` `25.462 kB`
`react-card` CardFooter	`13.423 kB` `5.481 kB`
`react-card` CardHeader	`15.666 kB` `6.235 kB`
`react-card` CardPreview	`14.374 kB` `5.854 kB`
`react-checkbox` Checkbox	`37.505 kB` `12.327 kB`
`react-combobox` Combobox (including child components)	`92.033 kB` `30.008 kB`
`react-combobox` Dropdown (including child components)	`90.475 kB` `29.668 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`70.013 kB` `20.17 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`207.423 kB` `59.298 kB`
`react-components` react-components: FluentProvider & webLightTheme	`42.297 kB` `14.008 kB`
`react-datepicker-compat` DatePicker Compat	`212.534 kB` `59.345 kB`
`react-dialog` Dialog (including children components)	`94.473 kB` `28.28 kB`
`react-divider` Divider	`21.179 kB` `7.839 kB`
`react-field` Field	`22.788 kB` `8.639 kB`
`react-image` Image	`16.096 kB` `6.317 kB`
`react-infobutton` InfoButton	`130.729 kB` `41.194 kB`
`react-infobutton` InfoLabel	`134.413 kB` `42.351 kB`
`react-input` Input	`27.247 kB` `9.194 kB`
`react-jsx-runtime` Classic Pragma	`1.049 kB` `531 B`
`react-jsx-runtime` JSX Dev Runtime	`4.14 kB` `1.741 kB`
`react-jsx-runtime` JSX Runtime	`4.734 kB` `1.983 kB`
`react-label` Label	`14.508 kB` `5.857 kB`
`react-link` Link	`17.4 kB` `6.977 kB`
`react-menu` Menu (including children components)	`140.176 kB` `43.004 kB`
`react-menu` Menu (including selectable components)	`142.862 kB` `43.51 kB`
`react-message-bar` MessageBar (all components)	`25.54 kB` `9.102 kB`
`react-overflow` hooks only	`12.598 kB` `4.754 kB`
`react-persona` Persona	`57.425 kB` `17.798 kB`
`react-popover` Popover	`119.46 kB` `37.714 kB`
`react-portal` Portal	`12.4 kB` `4.541 kB`
`react-portal-compat` PortalCompatProvider	`6.651 kB` `2.252 kB`
`react-positioning` usePositioning	`25.305 kB` `9.162 kB`
`react-progress` ProgressBar	`17.788 kB` `6.986 kB`
`react-provider` FluentProvider	`22.837 kB` `8.434 kB`
`react-radio` Radio	`31.266 kB` `10.267 kB`
`react-radio` RadioGroup	`15.704 kB` `6.35 kB`
`react-select` Select	`28.968 kB` `10.269 kB`
`react-slider` Slider	`38.349 kB` `12.595 kB`
`react-spinbutton` SpinButton	`37.133 kB` `11.856 kB`
`react-spinner` Spinner	`23.762 kB` `8.556 kB`
`react-switch` Switch	`33.731 kB` `10.899 kB`
`react-table` DataGrid	`157.084 kB` `43.906 kB`
`react-table` Table (Primitives only)	`43.941 kB` `13.76 kB`
`react-table` Table as DataGrid	`130.165 kB` `35.174 kB`
`react-table` Table (Selection only)	`75.777 kB` `20.477 kB`
`react-table` Table (Sort only)	`74.384 kB` `20.075 kB`
`react-tags` InteractionTag	`15.618 kB` `6.152 kB`
`react-tags` Tag	`30.341 kB` `9.505 kB`
`react-tags` TagGroup	`73.816 kB` `22.097 kB`
`react-text` Text - Default	`17.065 kB` `6.645 kB`
`react-text` Text - Wrappers	`20.237 kB` `6.965 kB`
`react-textarea` Textarea	`31.306 kB` `10.549 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`34.616 kB` `7.299 kB`
`react-theme` Teams: Light theme	`19.287 kB` `5.49 kB`
`react-timepicker-compat-preview` TimePicker	`93.434 kB` `31.284 kB`
`react-toast` Toast (including Toaster)	`92.725 kB` `27.876 kB`
`react-tooltip` Tooltip	`52.466 kB` `18.466 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 1bdefbaf82fde7c0cfb7a7da3cc505fcc35e5ef5}

fabricteam · 2023-11-07T09:36:07Z

Perf Analysis (`@fluentui/react-northstar`)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
PortalMinimalPerf.default	89	86	1.03:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
RefMinimalPerf.default	116	103	1.13:1
TreeWith60ListItems.default	90	80	1.13:1
CarouselMinimalPerf.default	261	240	1.09:1
ChatDuplicateMessagesPerf.default	158	145	1.09:1
ButtonSlotsPerf.default	326	305	1.07:1
FormMinimalPerf.default	223	209	1.07:1
BoxMinimalPerf.default	195	184	1.06:1
ChatWithPopoverPerf.default	196	185	1.06:1
CheckboxMinimalPerf.default	1159	1095	1.06:1
ReactionMinimalPerf.default	216	203	1.06:1
IconMinimalPerf.default	388	366	1.06:1
FlexMinimalPerf.default	155	148	1.05:1
ProviderMergeThemesPerf.default	671	640	1.05:1
RadioGroupMinimalPerf.default	270	258	1.05:1
SegmentMinimalPerf.default	199	189	1.05:1
SliderMinimalPerf.default	752	717	1.05:1
StatusMinimalPerf.default	409	390	1.05:1
DropdownManyItemsPerf.default	399	382	1.04:1
LabelMinimalPerf.default	233	224	1.04:1
ListNestedPerf.default	328	315	1.04:1
MenuMinimalPerf.default	505	487	1.04:1
DialogMinimalPerf.default	448	435	1.03:1
LoaderMinimalPerf.default	186	180	1.03:1
AttachmentSlotsPerf.default	652	640	1.02:1
ChatMinimalPerf.default	437	430	1.02:1
DatepickerMinimalPerf.default	3567	3488	1.02:1
DropdownMinimalPerf.default	1439	1412	1.02:1
HeaderMinimalPerf.default	207	203	1.02:1
ListWith60ListItems.default	369	362	1.02:1
SkeletonMinimalPerf.default	204	200	1.02:1
TextMinimalPerf.default	197	194	1.02:1
ItemLayoutMinimalPerf.default	690	686	1.01:1
PopupMinimalPerf.default	349	347	1.01:1
SplitButtonMinimalPerf.default	2243	2231	1.01:1
ToolbarMinimalPerf.default	537	531	1.01:1
TooltipMinimalPerf.default	1280	1262	1.01:1
VideoMinimalPerf.default	446	443	1.01:1
AnimationMinimalPerf.default	306	305	1:1
ImageMinimalPerf.default	232	232	1:1
LayoutMinimalPerf.default	197	197	1:1
ListMinimalPerf.default	307	306	1:1
MenuButtonMinimalPerf.default	931	927	1:1
ProviderMinimalPerf.default	205	204	1:1
TableManyItemsPerf.default	1119	1116	1:1
CustomToolbarPrototype.default	1458	1465	1:1
ButtonOverridesMissPerf.default	637	644	0.99:1
CardMinimalPerf.default	305	308	0.99:1
DividerMinimalPerf.default	201	204	0.99:1
EmbedMinimalPerf.default	1831	1856	0.99:1
HeaderSlotsPerf.default	457	461	0.99:1
RosterPerf.default	1573	1581	0.99:1
AccordionMinimalPerf.default	78	80	0.98:1
ButtonMinimalPerf.default	86	88	0.98:1
TableMinimalPerf.default	230	234	0.98:1
InputMinimalPerf.default	531	546	0.97:1
ListCommonPerf.default	385	396	0.97:1
TreeMinimalPerf.default	473	489	0.97:1
AttachmentMinimalPerf.default	88	92	0.96:1
GridMinimalPerf.default	186	193	0.96:1
AlertMinimalPerf.default	152	163	0.93:1
AvatarMinimalPerf.default	100	109	0.92:1
TextAreaMinimalPerf.default	274	298	0.92:1

fabricteam · 2023-11-07T09:45:15Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2023-11-07T09:48:26Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	613	624	5000
Breadcrumb	mount	1658	1667	1000
Checkbox	mount	1718	1692	5000
CheckboxBase	mount	1487	1480	5000
ChoiceGroup	mount	3015	3006	5000
ComboBox	mount	629	638	1000
CommandBar	mount	6197	6125	1000
ContextualMenu	mount	12492	12064	1000
DefaultButton	mount	753	741	5000
DetailsRow	mount	2174	2172	5000
DetailsRowFast	mount	2223	2168	5000
DetailsRowNoStyles	mount	1995	2023	5000
Dialog	mount	2808	2806	1000
DocumentCardTitle	mount	224	229	1000
Dropdown	mount	2001	1966	5000
FocusTrapZone	mount	1155	1155	5000
FocusZone	mount	1073	1057	5000
GroupedList	mount	41556	41730	2
GroupedList	virtual-rerender	19808	20037	2
GroupedList	virtual-rerender-with-unmount	50731	50463	2
GroupedListV2	mount	229	221	2
GroupedListV2	virtual-rerender	213	213	2
GroupedListV2	virtual-rerender-with-unmount	222	217	2
IconButton	mount	1071	1058	5000
Label	mount	337	344	5000
Layer	mount	2784	2755	5000
Link	mount	401	391	5000
MenuButton	mount	946	949	5000
MessageBar	mount	21278	21312	5000
Nav	mount	1956	1948	1000
OverflowSet	mount	793	754	5000
Panel	mount	1804	1743	1000
Persona	mount	743	742	1000
Pivot	mount	857	873	1000
PrimaryButton	mount	824	851	5000
Rating	mount	4661	4506	5000
SearchBox	mount	904	906	5000
Shimmer	mount	1867	1878	5000
Slider	mount	1330	1312	5000
SpinButton	mount	2902	2878	5000
Spinner	mount	379	379	5000
SplitButton	mount	1851	1818	5000
Stack	mount	405	406	5000
StackWithIntrinsicChildren	mount	866	852	5000
StackWithTextChildren	mount	2566	2608	5000
SwatchColorPicker	mount	6149	6128	5000
TagPicker	mount	1454	1463	5000
Text	mount	367	367	5000
TextField	mount	939	936	5000
ThemeProvider	mount	841	835	5000
ThemeProvider	virtual-rerender	585	575	5000
ThemeProvider	virtual-rerender-with-unmount	1291	1291	5000
Toggle	mount	592	619	5000
buttonNative	mount	192	191	5000

fabricteam · 2023-11-07T09:49:24Z

🕵 FluentUIV0 No visual regressions between this PR and main

codesandbox-ci · 2023-11-07T10:12:40Z

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 09e823f:

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

size-auditor · 2023-11-07T10:19:56Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 1bdefbaf82fde7c0cfb7a7da3cc505fcc35e5ef5 (build)

george-cz added 2 commits November 6, 2023 22:41

feat: List - boilerplate

56b12ee

how was this reverted?

ac487cc

george-cz requested review from a team as code owners November 6, 2023 21:51

george-cz mentioned this pull request Nov 6, 2023

List - initial implementation #29760

Merged

ling1726 previously approved these changes Nov 7, 2023

View reviewed changes

george-cz added 4 commits November 7, 2023 10:17

Merge remote-tracking branch 'upstream/master' into jirivyhnalek/list…

ff4da5f

…_boilerplate

api, tsconfig

e627de8

changelog

c018445

tsconfig.base

f5478c4

react-provider api

bfade78

changelog

09e823f

ling1726 approved these changes Nov 7, 2023

View reviewed changes

micahgodbolt approved these changes Nov 7, 2023

View reviewed changes

smhigley approved these changes Nov 7, 2023

View reviewed changes

george-cz merged commit 9343f29 into microsoft:master Nov 8, 2023

Hotell mentioned this pull request Nov 8, 2023

fix(react-list-preview): update package setup to be compliant with our standards #29792

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: List - boilerplate code #29771

feat: List - boilerplate code #29771

Uh oh!

george-cz commented Nov 6, 2023

Uh oh!

fabricteam commented Nov 6, 2023 •

edited

Loading

Uh oh!

fabricteam commented Nov 6, 2023 •

edited

Loading

Uh oh!

ling1726 commented Nov 7, 2023

Uh oh!

fabricteam commented Nov 7, 2023 •

edited

Loading

Uh oh!

fabricteam commented Nov 7, 2023 •

edited

Loading

Uh oh!

fabricteam commented Nov 7, 2023 •

edited

Loading

Uh oh!

fabricteam commented Nov 7, 2023 •

edited

Loading

Uh oh!

fabricteam commented Nov 7, 2023 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Nov 7, 2023

Uh oh!

size-auditor bot commented Nov 7, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

feat: List - boilerplate code #29771

feat: List - boilerplate code #29771

Uh oh!

Conversation

george-cz commented Nov 6, 2023

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

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

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

ling1726 commented Nov 7, 2023

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Potential regressions comparing to master

Uh oh!

fabricteam commented Nov 7, 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 Nov 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

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

Uh oh!

🕵 FluentUIV0 No visual regressions between this PR and main

Uh oh!

codesandbox-ci bot commented Nov 7, 2023

Uh oh!

size-auditor bot commented Nov 7, 2023

Asset size changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

fabricteam commented Nov 6, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

fabricteam commented Nov 6, 2023 •

edited

Loading

fabricteam commented Nov 7, 2023 •

edited

Loading

fabricteam commented Nov 7, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)

fabricteam commented Nov 7, 2023 •

edited

Loading

fabricteam commented Nov 7, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Nov 7, 2023 •

edited

Loading