chore(react-slider): properly apply nx migrate-converged-pkg to adhere to new dx setup #19517

Hotell · 2021-08-25T10:23:10Z

Pull request checklist

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

Description of changes

executed yarn nx workspace-generator migrate-converged-pkg --name=@fluentui/react-slider
Our nx migration generator was not invoked on react-slider (looks like those changes were done manually). this PR fixes it

Focus areas to test

(optional)

fabricteam · 2021-08-25T10:31:12Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-button` Button	`25.016 kB` `8.035 kB`
`react-button` CompoundButton	`30.308 kB` `8.911 kB`
`react-button` MenuButton	`26.603 kB` `8.543 kB`
`react-button` ToggleButton	`34.613 kB` `8.671 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`177.666 kB` `50.281 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.288 kB` `11.615 kB`

_{🤖 This report was generated against 28476bf50b064ba5a939371df350167d685f8e39}

codesandbox-ci · 2021-08-25T10:33:54Z

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

Sandbox	Source
Fluent UI React Starter	Configuration

size-auditor · 2021-08-25T10:39:17Z

Asset size changes

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

Baseline commit: 28476bf50b064ba5a939371df350167d685f8e39 (build)

fabricteam · 2021-08-25T10:55:54Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Dialog	mount	2161	1390	1000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	891	920	5000
BaseButton	mount	891	890	5000
Breadcrumb	mount	2643	2667	1000
ButtonNext	mount	435	438	5000
Checkbox	mount	1519	1532	5000
CheckboxBase	mount	1312	1348	5000
ChoiceGroup	mount	4791	4822	5000
ComboBox	mount	995	1010	1000
CommandBar	mount	10338	10347	1000
ContextualMenu	mount	6390	6337	1000
DefaultButton	mount	1094	1122	5000
DetailsRow	mount	3746	3742	5000
DetailsRowFast	mount	3845	3773	5000
DetailsRowNoStyles	mount	3554	3510	5000
Dialog	mount	2161	1390	1000	Possible regression
DocumentCardTitle	mount	147	157	1000
Dropdown	mount	3257	3313	5000
FluentProviderNext	mount	7595	7426	5000
FocusTrapZone	mount	1836	1799	5000
FocusZone	mount	1809	1819	5000
IconButton	mount	1737	1752	5000
Label	mount	331	354	5000
Layer	mount	1814	1816	5000
Link	mount	469	469	5000
MakeStyles	mount	1808	1846	50000
MenuButton	mount	1456	1447	5000
MessageBar	mount	2022	2048	5000
Nav	mount	3328	3300	1000
OverflowSet	mount	1119	1135	5000
Panel	mount	2155	2080	1000
Persona	mount	847	863	1000
Pivot	mount	1474	1457	1000
PrimaryButton	mount	1300	1268	5000
Rating	mount	7703	7762	5000
SearchBox	mount	1357	1314	5000
Shimmer	mount	2604	2563	5000
Slider	mount	1965	1975	5000
SpinButton	mount	5084	4951	5000
Spinner	mount	419	422	5000
SplitButton	mount	3226	3181	5000
Stack	mount	496	507	5000
StackWithIntrinsicChildren	mount	1618	1625	5000
StackWithTextChildren	mount	4540	4574	5000
SwatchColorPicker	mount	10474	10458	5000
Tabs	mount	1427	1405	1000
TagPicker	mount	2652	2668	5000
TeachingBubble	mount	12128	12001	5000
Text	mount	424	422	5000
TextField	mount	1385	1382	5000
ThemeProvider	mount	1202	1206	5000
ThemeProvider	virtual-rerender	594	602	5000
Toggle	mount	807	822	5000
buttonNative	mount	126	125	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	200	206	0.97:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	185	166	1.11:1
RefMinimalPerf.default	262	235	1.11:1
IconMinimalPerf.default	622	577	1.08:1
FlexMinimalPerf.default	297	281	1.06:1
FormMinimalPerf.default	410	388	1.06:1
AnimationMinimalPerf.default	435	416	1.05:1
StatusMinimalPerf.default	698	662	1.05:1
AlertMinimalPerf.default	282	270	1.04:1
CarouselMinimalPerf.default	466	447	1.04:1
ChatWithPopoverPerf.default	386	371	1.04:1
LoaderMinimalPerf.default	717	688	1.04:1
TooltipMinimalPerf.default	1044	1000	1.04:1
TextAreaMinimalPerf.default	502	487	1.03:1
VideoMinimalPerf.default	653	634	1.03:1
AttachmentMinimalPerf.default	156	153	1.02:1
AttachmentSlotsPerf.default	1103	1084	1.02:1
CheckboxMinimalPerf.default	2821	2757	1.02:1
InputMinimalPerf.default	1349	1320	1.02:1
LabelMinimalPerf.default	385	376	1.02:1
LayoutMinimalPerf.default	369	360	1.02:1
ListMinimalPerf.default	525	517	1.02:1
MenuButtonMinimalPerf.default	1686	1646	1.02:1
TableMinimalPerf.default	410	400	1.02:1
CustomToolbarPrototype.default	4104	4043	1.02:1
TreeMinimalPerf.default	793	777	1.02:1
BoxMinimalPerf.default	342	340	1.01:1
ButtonMinimalPerf.default	171	170	1.01:1
DropdownMinimalPerf.default	3192	3172	1.01:1
GridMinimalPerf.default	341	336	1.01:1
PopupMinimalPerf.default	606	598	1.01:1
ReactionMinimalPerf.default	379	375	1.01:1
TableManyItemsPerf.default	1925	1901	1.01:1
TextMinimalPerf.default	351	348	1.01:1
ButtonOverridesMissPerf.default	1756	1755	1:1
EmbedMinimalPerf.default	4234	4250	1:1
ListCommonPerf.default	631	628	1:1
RadioGroupMinimalPerf.default	444	444	1:1
SliderMinimalPerf.default	1650	1658	1:1
ToolbarMinimalPerf.default	941	939	1:1
CardMinimalPerf.default	543	550	0.99:1
DatepickerMinimalPerf.default	5515	5583	0.99:1
HeaderSlotsPerf.default	749	753	0.99:1
ListWith60ListItems.default	647	655	0.99:1
ProviderMergeThemesPerf.default	1730	1743	0.99:1
ProviderMinimalPerf.default	1076	1092	0.99:1
SkeletonMinimalPerf.default	358	360	0.99:1
SplitButtonMinimalPerf.default	4200	4261	0.99:1
ChatDuplicateMessagesPerf.default	291	297	0.98:1
ChatMinimalPerf.default	658	669	0.98:1
DialogMinimalPerf.default	746	761	0.98:1
DividerMinimalPerf.default	359	367	0.98:1
DropdownManyItemsPerf.default	682	699	0.98:1
HeaderMinimalPerf.default	358	364	0.98:1
ImageMinimalPerf.default	360	366	0.98:1
ListNestedPerf.default	542	551	0.98:1
MenuMinimalPerf.default	827	844	0.98:1
ButtonSlotsPerf.default	554	573	0.97:1
RosterPerf.default	1150	1180	0.97:1
TreeWith60ListItems.default	179	184	0.97:1
ItemLayoutMinimalPerf.default	1196	1240	0.96:1
AccordionMinimalPerf.default	153	161	0.95:1
SegmentMinimalPerf.default	337	365	0.92:1

…e to new dx setup

… that are stale

…devDeps that are stale

…B from devDeps that are stale

…ed in SB from devDeps that are stale

khmakoto

Approving with one super minor comment 😃

khmakoto · 2021-08-27T17:51:08Z

packages/react-slider/package.json

@@ -37,7 +38,8 @@
    "enzyme-adapter-react-16": "^1.15.0",
    "react": "16.8.6",
    "react-dom": "16.8.6",
-    "react-test-renderer": "^16.3.0"
+    "react-test-renderer": "^16.3.0",
+    "@fluentui/babel-make-styles": "^9.0.0-alpha.40"


nit: This dependency should go on line 28 to maintain alphabetical order.

note that this was added by migration generator not manually.

in general any kind of formatting/ordering should be handled by tooling automatically. for example nx already does this for tsconfig.base.json/nx.json/workspace.json -> we will implement those later on for our particular extended needs

ty!

msft-fluent-ui-bot added the Component: Slider label Aug 25, 2021

msft-fluent-ui-bot assigned smhigley Aug 25, 2021

Hotell force-pushed the hotell/build-system/properly-apply-migration-to-react-slider branch from 121be7f to 22615d1 Compare August 25, 2021 10:28

Hotell force-pushed the hotell/build-system/properly-apply-migration-to-react-slider branch from b56b844 to ef708b2 Compare August 27, 2021 14:56

Hotell added Area: Build System Component: Button labels Aug 27, 2021

Hotell marked this pull request as ready for review August 27, 2021 17:02

Hotell requested review from dzearing, khmakoto and a team as code owners August 27, 2021 17:02

Hotell added 6 commits August 27, 2021 19:03

chore(react-slider): properly apply nx migrate-converged-pkg to adher…

d62574f

…e to new dx setup

revert(react-button): remove vNext components used in SB from devDeps…

0808284

… that are stale

Change files

45b7778

fixup! revert(react-button): remove vNext components used in SB from …

1ea1558

…devDeps that are stale

fixup! fixup! revert(react-button): remove vNext components used in S…

3a82b18

…B from devDeps that are stale

fixup! fixup! fixup! revert(react-button): remove vNext components us…

bbb6379

…ed in SB from devDeps that are stale

Hotell force-pushed the hotell/build-system/properly-apply-migration-to-react-slider branch from 18f5d82 to bbb6379 Compare August 27, 2021 17:04

ecraig12345 approved these changes Aug 27, 2021

View reviewed changes

khmakoto changed the title ~~chore(react-slider): properly apply nx migrate-converged-pkg to adher…~~ chore(react-slider): properly apply nx migrate-converged-pkg to adhere to new dx setup Aug 27, 2021

khmakoto approved these changes Aug 27, 2021

View reviewed changes

Hotell merged commit 77a8622 into microsoft:master Aug 30, 2021

Hotell deleted the hotell/build-system/properly-apply-migration-to-react-slider branch August 30, 2021 18:24

Hotell mentioned this pull request Aug 30, 2021

tools: format/order particular type of files automatically #19561

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(react-slider): properly apply nx migrate-converged-pkg to adhere to new dx setup #19517

chore(react-slider): properly apply nx migrate-converged-pkg to adhere to new dx setup #19517

Hotell commented Aug 25, 2021 •

edited by khmakoto

Loading

fabricteam commented Aug 25, 2021 •

edited

Loading

codesandbox-ci bot commented Aug 25, 2021 •

edited

Loading

size-auditor bot commented Aug 25, 2021 •

edited

Loading

fabricteam commented Aug 25, 2021 •

edited

Loading

khmakoto left a comment

khmakoto Aug 27, 2021

Hotell Aug 30, 2021

Hotell Aug 30, 2021

chore(react-slider): properly apply nx migrate-converged-pkg to adhere to new dx setup #19517

chore(react-slider): properly apply nx migrate-converged-pkg to adhere to new dx setup #19517

Conversation

Hotell commented Aug 25, 2021 • edited by khmakoto Loading

Pull request checklist

Description of changes

Focus areas to test

fabricteam commented Aug 25, 2021 • edited Loading

📊 Bundle size report

codesandbox-ci bot commented Aug 25, 2021 • edited Loading

size-auditor bot commented Aug 25, 2021 • edited Loading

Asset size changes

fabricteam commented Aug 25, 2021 • edited Loading

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Potential regressions comparing to master

khmakoto left a comment

Choose a reason for hiding this comment

khmakoto Aug 27, 2021

Choose a reason for hiding this comment

Hotell Aug 30, 2021

Choose a reason for hiding this comment

Hotell Aug 30, 2021

Choose a reason for hiding this comment

Hotell commented Aug 25, 2021 •

edited by khmakoto

Loading

fabricteam commented Aug 25, 2021 •

edited

Loading

codesandbox-ci bot commented Aug 25, 2021 •

edited

Loading

size-auditor bot commented Aug 25, 2021 •

edited

Loading

fabricteam commented Aug 25, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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