react-image - Migration to new DX

[andrefcdias]

Pull request checklist

• Addresses an existing issue: partially implements migration: migrate converged packages to new DX (1st stage) #18579
• Include a change request file using $ yarn change

Description of changes

• Migration of package to new DX
• Conversion of styling from SASS to make-styles

[size-auditor]

Asset size changes

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

Baseline commit: 61661607207379f8fc1d8d9da4b6a2f9a495418d (build)

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	891	927	5000
BaseButton	mount	1057	1002	5000
Breadcrumb	mount	2768	2794	1000
ButtonNext	mount	570	547	5000
Checkbox	mount	1723	1742	5000
CheckboxBase	mount	1490	1511	5000
ChoiceGroup	mount	5378	5257	5000
ComboBox	mount	1079	1100	1000
CommandBar	mount	11020	10988	1000
ContextualMenu	mount	6845	6839	1000
DefaultButton	mount	1313	1284	5000
DetailsRow	mount	4206	4089	5000
DetailsRowFast	mount	4138	4205	5000
DetailsRowNoStyles	mount	3903	4016	5000
Dialog	mount	2391	2348	1000
DocumentCardTitle	mount	160	165	1000
Dropdown	mount	3691	3617	5000
FocusTrapZone	mount	2005	2024	5000
FocusZone	mount	2126	1984	5000
IconButton	mount	1997	2141	5000
Label	mount	354	358	5000
Layer	mount	2038	2066	5000
Link	mount	528	514	5000
MakeStyles	mount	1907	1963	50000
MenuButton	mount	1674	1673	5000
MessageBar	mount	2212	2170	5000
Nav	mount	3667	3687	1000
OverflowSet	mount	1149	1102	5000
Panel	mount	2185	2209	1000
Persona	mount	937	876	1000
Pivot	mount	1554	1536	1000
PrimaryButton	mount	1442	1376	5000
Rating	mount	8832	8701	5000
SearchBox	mount	1532	1450	5000
Shimmer	mount	2872	2898	5000
Slider	mount	2176	2168	5000
SpinButton	mount	5445	5575	5000
Spinner	mount	450	470	5000
SplitButton	mount	3523	3550	5000
Stack	mount	573	562	5000
StackWithIntrinsicChildren	mount	1779	1855	5000
StackWithTextChildren	mount	5253	5215	5000
SwatchColorPicker	mount	11295	11265	5000
Tabs	mount	1587	1571	1000
TagPicker	mount	2762	2808	5000
TeachingBubble	mount	12772	12831	5000
Text	mount	471	478	5000
TextField	mount	1582	1545	5000
ThemeProvider	mount	1264	1293	5000
ThemeProvider	virtual-rerender	660	673	5000
ThemeProviderNext	mount	7299	7225	5000
Toggle	mount	899	924	5000
buttonNative	mount	119	139	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	197	180	1.09:1
RefMinimalPerf.default	269	247	1.09:1
SegmentMinimalPerf.default	424	388	1.09:1
AttachmentMinimalPerf.default	185	171	1.08:1
AttachmentSlotsPerf.default	1365	1266	1.08:1
DropdownManyItemsPerf.default	810	759	1.07:1
HeaderMinimalPerf.default	426	402	1.06:1
LabelMinimalPerf.default	451	426	1.06:1
MenuMinimalPerf.default	1024	962	1.06:1
TreeWith60ListItems.default	203	191	1.06:1
AccordionMinimalPerf.default	191	184	1.04:1
ChatWithPopoverPerf.default	427	411	1.04:1
AvatarMinimalPerf.default	236	229	1.03:1
CarouselMinimalPerf.default	531	518	1.03:1
DividerMinimalPerf.default	425	413	1.03:1
HeaderSlotsPerf.default	907	877	1.03:1
ImageMinimalPerf.default	446	433	1.03:1
ListMinimalPerf.default	586	570	1.03:1
LoaderMinimalPerf.default	797	774	1.03:1
SplitButtonMinimalPerf.default	4278	4145	1.03:1
StatusMinimalPerf.default	789	766	1.03:1
TextMinimalPerf.default	413	400	1.03:1
BoxMinimalPerf.default	403	394	1.02:1
EmbedMinimalPerf.default	4614	4526	1.02:1
LayoutMinimalPerf.default	419	410	1.02:1
ListCommonPerf.default	740	726	1.02:1
TableManyItemsPerf.default	2229	2184	1.02:1
ButtonSlotsPerf.default	642	634	1.01:1
DatepickerMinimalPerf.default	6293	6229	1.01:1
DropdownMinimalPerf.default	3417	3389	1.01:1
FlexMinimalPerf.default	342	338	1.01:1
FormMinimalPerf.default	491	484	1.01:1
GridMinimalPerf.default	394	392	1.01:1
InputMinimalPerf.default	1363	1344	1.01:1
SliderMinimalPerf.default	1709	1688	1.01:1
IconMinimalPerf.default	714	705	1.01:1
ToolbarMinimalPerf.default	1059	1050	1.01:1
AnimationMinimalPerf.default	458	459	1:1
ProviderMinimalPerf.default	1098	1097	1:1
ReactionMinimalPerf.default	454	454	1:1
TooltipMinimalPerf.default	1094	1095	1:1
CardMinimalPerf.default	654	660	0.99:1
ChatMinimalPerf.default	716	722	0.99:1
DialogMinimalPerf.default	870	875	0.99:1
ItemLayoutMinimalPerf.default	1411	1424	0.99:1
ListNestedPerf.default	623	628	0.99:1
ListWith60ListItems.default	718	725	0.99:1
MenuButtonMinimalPerf.default	1815	1826	0.99:1
RosterPerf.default	1283	1290	0.99:1
PopupMinimalPerf.default	618	622	0.99:1
ProviderMergeThemesPerf.default	1766	1776	0.99:1
SkeletonMinimalPerf.default	428	431	0.99:1
TableMinimalPerf.default	465	469	0.99:1
TextAreaMinimalPerf.default	587	593	0.99:1
CustomToolbarPrototype.default	4128	4154	0.99:1
CheckboxMinimalPerf.default	3107	3169	0.98:1
AlertMinimalPerf.default	333	345	0.97:1
ChatDuplicateMessagesPerf.default	322	332	0.97:1
TreeMinimalPerf.default	893	918	0.97:1
RadioGroupMinimalPerf.default	501	522	0.96:1
VideoMinimalPerf.default	688	717	0.96:1
ButtonOverridesMissPerf.default	1868	2003	0.93:1
ButtonMinimalPerf.default	200	220	0.91:1

[msft-fluent-ui-bot]

Hello @andrefcdias!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-fluent-ui-bot) and give me an instruction to get started! Learn more here.