react-image: Migrate to simplified slots #19745

tringakrasniqi · 2021-09-10T09:06:41Z

Pull request checklist

Addresses an existing issue: Fixes @fluentui/react-image: use simplified prop merging #19680
Include a change request file using $ yarn change

Description of changes

Implementation of the following RFC #18642 and #19068 for @fluentui/react-image.

fabricteam · 2021-09-10T09:10:09Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`164.473 kB` `46.874 kB`	`164.364 kB` `46.855 kB`	`109 B` `19 B`
`react-image` Image	`9.122 kB` `3.686 kB`	`9.882 kB` `3.975 kB`	`-760 B` `-289 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: FluentProvider & webLightTheme	`35.75 kB` `11.392 kB`

_{🤖 This report was generated against 5e2d778dba8b1a477546a4688556d844335e63af}

size-auditor · 2021-09-10T09:16:20Z

Asset size changes

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

Baseline commit: 5e2d778dba8b1a477546a4688556d844335e63af (build)

codesandbox-ci · 2021-09-10T09:25:30Z

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

Sandbox	Source
Fluent UI React Starter	Configuration

fabricteam · 2021-09-10T09:45:28Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	897	907	5000
BaseButton	mount	889	899	5000
Breadcrumb	mount	2667	2640	1000
ButtonNext	mount	442	443	5000
Checkbox	mount	1554	1526	5000
CheckboxBase	mount	1318	1324	5000
ChoiceGroup	mount	4764	4716	5000
ComboBox	mount	1007	1006	1000
CommandBar	mount	10231	10244	1000
ContextualMenu	mount	6725	6509	1000
DefaultButton	mount	1141	1138	5000
DetailsRow	mount	3772	3712	5000
DetailsRowFast	mount	3672	3723	5000
DetailsRowNoStyles	mount	3569	3479	5000
Dialog	mount	2371	2387	1000
DocumentCardTitle	mount	146	143	1000
Dropdown	mount	3355	3241	5000
FluentProviderNext	mount	7518	7543	5000
FluentProviderWithTheme	mount	322	337	10
FluentProviderWithTheme	virtual-rerender	100	85	10
FluentProviderWithTheme	virtual-rerender-with-unmount	476	483	10
FocusTrapZone	mount	1789	1862	5000
FocusZone	mount	1817	1793	5000
IconButton	mount	1725	1716	5000
Label	mount	352	349	5000
Layer	mount	3142	2983	5000
Link	mount	485	473	5000
MakeStyles	mount	1847	1763	50000
MenuButton	mount	1412	1412	5000
MessageBar	mount	2013	1991	5000
Nav	mount	3271	3274	1000
OverflowSet	mount	1095	1102	5000
Panel	mount	2372	2382	1000
Persona	mount	820	846	1000
Pivot	mount	1389	1422	1000
PrimaryButton	mount	1267	1247	5000
Rating	mount	7668	7670	5000
SearchBox	mount	1368	1375	5000
Shimmer	mount	2522	2608	5000
Slider	mount	1940	1951	5000
SpinButton	mount	4982	4905	5000
Spinner	mount	437	443	5000
SplitButton	mount	3093	3131	5000
Stack	mount	490	499	5000
StackWithIntrinsicChildren	mount	1555	1532	5000
StackWithTextChildren	mount	4588	4562	5000
SwatchColorPicker	mount	10103	10291	5000
Tabs	mount	1378	1379	1000
TagPicker	mount	2557	2542	5000
TeachingBubble	mount	13264	13114	5000
Text	mount	433	415	5000
TextField	mount	1380	1377	5000
ThemeProvider	mount	1173	1184	5000
ThemeProvider	virtual-rerender	596	595	5000
ThemeProvider	virtual-rerender-with-unmount	1887	1911	5000
Toggle	mount	792	843	5000
buttonNative	mount	116	119	5000

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

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
AvatarMinimalPerf.default	198	186	1.06:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
LayoutMinimalPerf.default	410	357	1.15:1
AttachmentMinimalPerf.default	163	145	1.12:1
AccordionMinimalPerf.default	154	143	1.08:1
RefMinimalPerf.default	253	234	1.08:1
CarouselMinimalPerf.default	487	457	1.07:1
DatepickerMinimalPerf.default	5649	5261	1.07:1
GridMinimalPerf.default	337	316	1.07:1
ListCommonPerf.default	653	609	1.07:1
ListWith60ListItems.default	668	631	1.06:1
SliderMinimalPerf.default	1666	1568	1.06:1
TreeMinimalPerf.default	816	772	1.06:1
DividerMinimalPerf.default	366	349	1.05:1
FormMinimalPerf.default	401	383	1.05:1
LabelMinimalPerf.default	382	365	1.05:1
ProviderMergeThemesPerf.default	1744	1665	1.05:1
TextAreaMinimalPerf.default	499	474	1.05:1
AlertMinimalPerf.default	268	257	1.04:1
BoxMinimalPerf.default	340	328	1.04:1
DropdownMinimalPerf.default	3219	3093	1.04:1
IconMinimalPerf.default	611	586	1.04:1
DialogMinimalPerf.default	738	718	1.03:1
HeaderMinimalPerf.default	356	345	1.03:1
InputMinimalPerf.default	1356	1313	1.03:1
TableManyItemsPerf.default	1938	1881	1.03:1
TooltipMinimalPerf.default	1040	1013	1.03:1
ButtonOverridesMissPerf.default	1742	1707	1.02:1
ChatMinimalPerf.default	643	629	1.02:1
CheckboxMinimalPerf.default	2755	2701	1.02:1
HeaderSlotsPerf.default	756	739	1.02:1
ListNestedPerf.default	551	540	1.02:1
PortalMinimalPerf.default	176	173	1.02:1
SplitButtonMinimalPerf.default	4118	4055	1.02:1
AnimationMinimalPerf.default	398	396	1.01:1
DropdownManyItemsPerf.default	663	659	1.01:1
EmbedMinimalPerf.default	4129	4108	1.01:1
ItemLayoutMinimalPerf.default	1175	1164	1.01:1
ListMinimalPerf.default	503	496	1.01:1
MenuButtonMinimalPerf.default	1653	1641	1.01:1
ProviderMinimalPerf.default	1006	999	1.01:1
TableMinimalPerf.default	418	412	1.01:1
TreeWith60ListItems.default	172	171	1.01:1
ChatDuplicateMessagesPerf.default	294	295	1:1
FlexMinimalPerf.default	278	279	1:1
LoaderMinimalPerf.default	700	703	1:1
SkeletonMinimalPerf.default	354	354	1:1
CustomToolbarPrototype.default	3905	3901	1:1
ToolbarMinimalPerf.default	961	961	1:1
AttachmentSlotsPerf.default	1051	1058	0.99:1
RadioGroupMinimalPerf.default	430	436	0.99:1
TextMinimalPerf.default	345	349	0.99:1
ChatWithPopoverPerf.default	368	376	0.98:1
ReactionMinimalPerf.default	369	377	0.98:1
StatusMinimalPerf.default	663	676	0.98:1
VideoMinimalPerf.default	608	620	0.98:1
ButtonSlotsPerf.default	537	552	0.97:1
MenuMinimalPerf.default	822	846	0.97:1
ButtonMinimalPerf.default	161	167	0.96:1
ImageMinimalPerf.default	367	383	0.96:1
PopupMinimalPerf.default	584	608	0.96:1
SegmentMinimalPerf.default	335	349	0.96:1
CardMinimalPerf.default	529	555	0.95:1
RosterPerf.default	1107	1167	0.95:1

Co-authored-by: André <[email protected]>

change/@fluentui-react-image-8016107b-e542-41f6-8df7-dd412c3bf263.json

packages/react-image/src/components/Image/useImage.ts

* Migrate to simplified slots * Fixed typo * Change files * Fixed root slot as and imageslots * Changed root type to IntrinsicShorthandProps Co-authored-by: André <[email protected]> * Updated api md * Fixed typo and change file Co-authored-by: André <[email protected]>

Migrate to simplified slots

0e53b36

msft-fluent-ui-bot assigned GeoffCoxMSFT Sep 10, 2021

tringakrasniqi added this to the September Project Cycle Q3 2021 milestone Sep 10, 2021

tringakrasniqi added the Component: Image label Sep 10, 2021

Fixed typo

fa98831

Change files

a38767c

tringakrasniqi and others added 4 commits September 10, 2021 11:55

Fixed root slot as and imageslots

a1fa032

Merge branch 'master' into image-slot-simplification

06398b6

Changed root type to IntrinsicShorthandProps

3eee696

Co-authored-by: André <[email protected]>

Updated api md

a07b060

tringakrasniqi marked this pull request as ready for review September 10, 2021 12:00

tringakrasniqi requested a review from a team as a code owner September 10, 2021 12:00

tringakrasniqi requested review from a team September 10, 2021 12:00

tringakrasniqi changed the title ~~Migrate to simplified slots~~ react-image: Migrate to simplified slots Sep 10, 2021

tringakrasniqi mentioned this pull request Sep 10, 2021

Migrates Converged component to use simplified prop merging #18844

Closed

16 tasks

layershifter approved these changes Sep 10, 2021

View reviewed changes

change/@fluentui-react-image-8016107b-e542-41f6-8df7-dd412c3bf263.json Outdated Show resolved Hide resolved

packages/react-image/src/components/Image/useImage.ts Outdated Show resolved Hide resolved

Fixed typo and change file

fdf8e06

andrefcdias approved these changes Sep 14, 2021

View reviewed changes

tringakrasniqi merged commit 5fed6eb into microsoft:master Sep 14, 2021

tringakrasniqi deleted the image-slot-simplification branch September 15, 2021 14:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

react-image: Migrate to simplified slots #19745

react-image: Migrate to simplified slots #19745

tringakrasniqi commented Sep 10, 2021 •

edited

Loading

fabricteam commented Sep 10, 2021 •

edited

Loading

size-auditor bot commented Sep 10, 2021 •

edited

Loading

codesandbox-ci bot commented Sep 10, 2021 •

edited

Loading

fabricteam commented Sep 10, 2021 •

edited

Loading

react-image: Migrate to simplified slots #19745

react-image: Migrate to simplified slots #19745

Conversation

tringakrasniqi commented Sep 10, 2021 • edited Loading

Pull request checklist

Description of changes

fabricteam commented Sep 10, 2021 • edited Loading

📊 Bundle size report

size-auditor bot commented Sep 10, 2021 • edited Loading

Asset size changes

codesandbox-ci bot commented Sep 10, 2021 • edited Loading

fabricteam commented Sep 10, 2021 • edited Loading

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Potential regressions comparing to master

tringakrasniqi commented Sep 10, 2021 •

edited

Loading

fabricteam commented Sep 10, 2021 •

edited

Loading

size-auditor bot commented Sep 10, 2021 •

edited

Loading

codesandbox-ci bot commented Sep 10, 2021 •

edited

Loading

fabricteam commented Sep 10, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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