react-card: Migrate to new DX by tringakrasniqi · Pull Request #19036 · microsoft/fluentui

tringakrasniqi · 2021-07-21T09:16:24Z

Pull request checklist

Addresses an existing issue: Fixes partially migration: migrate converged packages to new DX (1st stage) #18579, fixes react-card has dependencies on v8, blocks migration to new DX #19050
~~- [ ] Include a change request file using $ yarn change~~

Description of changes

Migration to new DX for react-card

ling1726 · 2021-07-21T09:17:23Z

Please include the pkg name in the PR title :)

tringakrasniqi · 2021-07-21T09:18:15Z

Please include the pkg name in the PR title :)

Just did, thank you ^_^

codesandbox-ci · 2021-07-21T09:25:14Z

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 2dd52cb:

Sandbox	Source
Fluent UI React Starter	Configuration

size-auditor · 2021-07-21T09:27:47Z

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: ed20885

Possible causes

The baseline build ed20885 is broken
The Size Auditor run for the baseline build ed20885 was not triggered

Recommendations

Please merge your branch for this Pull request with the latest master build and commit your changes once again

fabricteam · 2021-07-21T09:32:02Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`78.403 kB` `23.179 kB`
`react-avatar` Avatar	`54.293 kB` `14.665 kB`
`react-badge` Badge	`24.393 kB` `7.174 kB`
`react-badge` CounterBadge	`27.206 kB` `7.862 kB`
`react-badge` PresenseBadge	`237 B` `177 B`
`react-button` Button	`25.967 kB` `8.231 kB`
`react-button` CompoundButton	`31.409 kB` `9.107 kB`
`react-button` MenuButton	`27.552 kB` `8.732 kB`
`react-button` ToggleButton	`36.393 kB` `8.907 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`197.875 kB` `57.818 kB`
`react-components` react-components: FluentProvider & webLightTheme	`35.513 kB` `11.437 kB`
`react-divider` Divider	`15.889 kB` `5.747 kB`
`react-image` Image	`10.642 kB` `4.264 kB`
`react-label` Label	`28.622 kB` `10.654 kB`
`react-link` Link	`14.715 kB` `6.012 kB`
`react-make-styles` makeStaticStyles (runtime)	`7.59 kB` `3.321 kB`
`react-make-styles` makeStyles + mergeClasses (runtime)	`22.135 kB` `8.356 kB`
`react-make-styles` makeStyles + mergeClasses (build time)	`2.557 kB` `1.202 kB`
`react-menu` Menu (including children components)	`113.933 kB` `34.39 kB`
`react-menu` Menu (including selectable components)	`115.945 kB` `34.65 kB`
`react-popover` Popover	`140.924 kB` `41.969 kB`
`react-portal` Portal	`7.78 kB` `2.672 kB`
`react-positioning` usePopper	`23.141 kB` `7.931 kB`
`react-provider` FluentProvider	`16.235 kB` `5.972 kB`
`react-theme` Teams: all themes	`31.935 kB` `6.49 kB`
`react-theme` Teams: Light theme	`19.527 kB` `5.504 kB`
`react-tooltip` Tooltip	`44.61 kB` `15.257 kB`
`react-utilities` SSRProvider	`213 B` `170 B`

_{🤖 This report was generated against ed20885c9edd64bc3429c6b580d610c59aa88ae7}

Hotell

🙌

fabricteam · 2021-07-21T09:43:18Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	784	771	5000
BaseButton	mount	907	891	5000
Breadcrumb	mount	2635	2636	1000
ButtonNext	mount	540	512	5000
Checkbox	mount	1493	1516	5000
CheckboxBase	mount	1287	1241	5000
ChoiceGroup	mount	4715	4773	5000
ComboBox	mount	972	969	1000
CommandBar	mount	10113	10174	1000
ContextualMenu	mount	6175	6335	1000
DefaultButton	mount	1143	1106	5000
DetailsRow	mount	3787	3743	5000
DetailsRowFast	mount	3681	3677	5000
DetailsRowNoStyles	mount	3533	3490	5000
Dialog	mount	2121	2149	1000
DocumentCardTitle	mount	144	138	1000
Dropdown	mount	3283	3215	5000
FluentProviderNext	mount	7368	7243	5000
FocusTrapZone	mount	1782	1806	5000
FocusZone	mount	1829	1817	5000
IconButton	mount	1712	1763	5000
Label	mount	336	344	5000
Layer	mount	1777	1771	5000
Link	mount	464	472	5000
MakeStyles	mount	1803	1793	50000
MenuButton	mount	1468	1462	5000
MessageBar	mount	2079	1999	5000
Nav	mount	3239	3321	1000
OverflowSet	mount	1061	1049	5000
Panel	mount	2033	2067	1000
Persona	mount	825	813	1000
Pivot	mount	1438	1413	1000
PrimaryButton	mount	1294	1305	5000
Rating	mount	7610	7665	5000
SearchBox	mount	1313	1315	5000
Shimmer	mount	2535	2496	5000
Slider	mount	1954	1964	5000
SpinButton	mount	4953	4980	5000
Spinner	mount	428	433	5000
SplitButton	mount	3152	3096	5000
Stack	mount	490	498	5000
StackWithIntrinsicChildren	mount	1572	1537	5000
StackWithTextChildren	mount	4515	4449	5000
SwatchColorPicker	mount	10180	10095	5000
Tabs	mount	1402	1433	1000
TagPicker	mount	2451	2436	5000
TeachingBubble	mount	11826	11854	5000
Text	mount	403	430	5000
TextField	mount	1403	1378	5000
ThemeProvider	mount	1145	1192	5000
ThemeProvider	virtual-rerender	595	584	5000
Toggle	mount	785	801	5000
buttonNative	mount	116	121	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonMinimalPerf.default	177	157	1.13:1
AlertMinimalPerf.default	278	254	1.09:1
AvatarMinimalPerf.default	205	188	1.09:1
TableMinimalPerf.default	414	385	1.08:1
ListCommonPerf.default	655	618	1.06:1
CardMinimalPerf.default	565	538	1.05:1
ChatWithPopoverPerf.default	360	343	1.05:1
ListWith60ListItems.default	652	621	1.05:1
TreeWith60ListItems.default	176	167	1.05:1
DropdownManyItemsPerf.default	701	672	1.04:1
GridMinimalPerf.default	341	328	1.04:1
AttachmentMinimalPerf.default	158	153	1.03:1
CarouselMinimalPerf.default	478	464	1.03:1
ChatMinimalPerf.default	652	633	1.03:1
ItemLayoutMinimalPerf.default	1204	1166	1.03:1
PopupMinimalPerf.default	588	572	1.03:1
LabelMinimalPerf.default	385	378	1.02:1
PortalMinimalPerf.default	184	180	1.02:1
ProviderMergeThemesPerf.default	1709	1682	1.02:1
ReactionMinimalPerf.default	373	364	1.02:1
TextAreaMinimalPerf.default	499	487	1.02:1
TooltipMinimalPerf.default	998	978	1.02:1
ChatDuplicateMessagesPerf.default	284	282	1.01:1
CheckboxMinimalPerf.default	2751	2723	1.01:1
DatepickerMinimalPerf.default	5413	5345	1.01:1
DialogMinimalPerf.default	752	743	1.01:1
DividerMinimalPerf.default	354	352	1.01:1
EmbedMinimalPerf.default	4164	4142	1.01:1
LayoutMinimalPerf.default	369	365	1.01:1
ProviderMinimalPerf.default	1006	1000	1.01:1
SegmentMinimalPerf.default	349	344	1.01:1
SliderMinimalPerf.default	1584	1576	1.01:1
StatusMinimalPerf.default	676	670	1.01:1
CustomToolbarPrototype.default	3874	3838	1.01:1
AttachmentSlotsPerf.default	1058	1060	1:1
BoxMinimalPerf.default	336	336	1:1
ButtonSlotsPerf.default	521	520	1:1
DropdownMinimalPerf.default	3123	3114	1:1
FlexMinimalPerf.default	288	287	1:1
ImageMinimalPerf.default	371	371	1:1
InputMinimalPerf.default	1269	1268	1:1
ListMinimalPerf.default	508	510	1:1
MenuMinimalPerf.default	852	848	1:1
SkeletonMinimalPerf.default	354	353	1:1
ToolbarMinimalPerf.default	929	927	1:1
AnimationMinimalPerf.default	405	409	0.99:1
FormMinimalPerf.default	394	399	0.99:1
ListNestedPerf.default	544	551	0.99:1
SplitButtonMinimalPerf.default	3836	3867	0.99:1
TextMinimalPerf.default	324	328	0.99:1
TreeMinimalPerf.default	791	796	0.99:1
VideoMinimalPerf.default	610	618	0.99:1
ButtonOverridesMissPerf.default	1703	1729	0.98:1
HeaderMinimalPerf.default	350	356	0.98:1
LoaderMinimalPerf.default	680	695	0.98:1
TableManyItemsPerf.default	1871	1908	0.98:1
HeaderSlotsPerf.default	734	757	0.97:1
RefMinimalPerf.default	221	227	0.97:1
AccordionMinimalPerf.default	148	154	0.96:1
RosterPerf.default	1101	1148	0.96:1
RadioGroupMinimalPerf.default	427	445	0.96:1
IconMinimalPerf.default	600	628	0.96:1
MenuButtonMinimalPerf.default	1583	1679	0.94:1

msft-fluent-ui-bot · 2021-07-21T23:09:44Z

Hello @khmakoto!

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.

#### Pull request checklist - [x] Addresses an existing issue: Fixes partially microsoft#18579, fixes microsoft#19050 - [ ] Include a change request file using `$ yarn change` #### Description of changes Migration to new DX for react-card

Migrate to new DX

040c743

tringakrasniqi requested review from a team and khmakoto as code owners July 21, 2021 09:16

msft-fluent-ui-bot assigned ling1726 Jul 21, 2021

tringakrasniqi added Area: Build System Component: Card labels Jul 21, 2021

tringakrasniqi added this to the July Project Cycle Q2 2021 milestone Jul 21, 2021

tringakrasniqi changed the title ~~Migrate to new DX~~ react-card: Migrate to new DX Jul 21, 2021

tringakrasniqi mentioned this pull request Jul 21, 2021

migration: migrate converged packages to new DX (1st stage) #18579

Closed

32 tasks

Hotell approved these changes Jul 21, 2021

View reviewed changes

tringakrasniqi mentioned this pull request Jul 21, 2021

react-card has dependencies on v8, blocks migration to new DX #19050

Closed

khmakoto added 2 commits July 21, 2021 13:37

Fixing tests and removing v8 dependencies.

55af615

Updating API.

2dd52cb

khmakoto approved these changes Jul 21, 2021

View reviewed changes

khmakoto added the AutoMerge label Jul 21, 2021

msft-fluent-ui-bot merged commit 37b972a into microsoft:master Jul 21, 2021

tringakrasniqi deleted the dx-migration-card branch July 22, 2021 08:17

tringakrasniqi mentioned this pull request Jul 22, 2021

react-checkbox: Migration to new DX #19063

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

react-card: Migrate to new DX#19036

react-card: Migrate to new DX#19036
msft-fluent-ui-bot merged 3 commits intomicrosoft:masterfrom
tringakrasniqi:dx-migration-card

tringakrasniqi commented Jul 21, 2021 •

edited

Loading

Uh oh!

ling1726 commented Jul 21, 2021

Uh oh!

tringakrasniqi commented Jul 21, 2021

Uh oh!

codesandbox-ci bot commented Jul 21, 2021 •

edited

Loading

Uh oh!

size-auditor bot commented Jul 21, 2021 •

edited

Loading

Uh oh!

fabricteam commented Jul 21, 2021 •

edited

Loading

Uh oh!

Hotell left a comment

Uh oh!

fabricteam commented Jul 21, 2021 •

edited

Loading

Uh oh!

msft-fluent-ui-bot commented Jul 21, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

tringakrasniqi commented Jul 21, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull request checklist

Description of changes

Uh oh!

ling1726 commented Jul 21, 2021

Uh oh!

tringakrasniqi commented Jul 21, 2021

Uh oh!

codesandbox-ci bot commented Jul 21, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor bot commented Jul 21, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Jul 21, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

Hotell left a comment

Choose a reason for hiding this comment

Uh oh!

fabricteam commented Jul 21, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Uh oh!

msft-fluent-ui-bot commented Jul 21, 2021

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.

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

tringakrasniqi commented Jul 21, 2021 •

edited

Loading

codesandbox-ci bot commented Jul 21, 2021 •

edited

Loading

size-auditor bot commented Jul 21, 2021 •

edited

Loading

fabricteam commented Jul 21, 2021 •

edited

Loading

fabricteam commented Jul 21, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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

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.