Adding compat exports to v7 #15079

czearing · 2020-09-16T20:52:13Z

Pull request checklist

Addresses an existing issue: Fixes Add compat exports to v7 #14939
Include a change request file using $ yarn change

Description of changes

Adding a compat folder to @fluentui/react
Adding compat exports for :
Button, Calendar, and DatePicker.
Adding exports for Calendar and DatePicker in react-next's compat folder.

…ct compat exports.

packages/react/src/compat/index.ts

packages/react-next/src/compat/index.ts

…ub.com/czearing/fluentui into feat/implementing-compat-exports-to-v7

codesandbox-ci · 2020-09-16T21:16:03Z

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.

… and checkbox

codesandbox-ci · 2020-09-16T21:46:35Z

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 289c7ec:

Sandbox	Source
Fluent UI Button	Configuration
microsoft/fluentui: codesandbox-react-template	Configuration
microsoft/fluentui: codesandbox-react-next-template	Configuration
microsoft/fluentui: codesandbox-react-northstar-template	Configuration

codesandbox-ci · 2020-09-16T21:48:11Z

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 26d3598:

Sandbox	Source
Fluent UI Button	Configuration
microsoft/fluentui: codesandbox-react-template	Configuration
microsoft/fluentui: codesandbox-react-next-template	Configuration
microsoft/fluentui: codesandbox-react-northstar-template	Configuration

codesandbox-ci · 2020-09-16T21:54:34Z

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

Sandbox	Source
Fluent UI Button	Configuration
microsoft/fluentui: codesandbox-react-template	Configuration
microsoft/fluentui: codesandbox-react-next-template	Configuration
microsoft/fluentui: codesandbox-react-northstar-template	Configuration

codesandbox-ci · 2020-09-16T21:56:03Z

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 3f9f015:

Sandbox	Source
Fluent UI Button	Configuration
microsoft/fluentui: codesandbox-react-template	Configuration
microsoft/fluentui: codesandbox-react-next-template	Configuration
microsoft/fluentui: codesandbox-react-northstar-template	Configuration

msft-github-bot · 2020-09-16T22:06:01Z

Perf Analysis

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	817	834	5000
Breadcrumb	mount	40318	39526	5000
BreadcrumbNext	mount	152466	151244	5000
ButtonNext	mount	529	552	5000
Checkbox	mount	1473	1483	5000
CheckboxBase	mount	1225	1209	5000
CheckboxNext	mount	1414	1374	5000
ChoiceGroup	mount	4645	4616	5000
ChoiceGroupNext	mount	4748	4689	5000
ComboBox	mount	893	884	1000
CommandBar	mount	7255	7227	1000
ContextualMenu	mount	12654	12371	1000
DefaultButton	mount	1034	1046	5000
DetailsRow	mount	3341	3345	5000
DetailsRowFast	mount	3356	3373	5000
DetailsRowNoStyles	mount	3137	3143	5000
Dialog	mount	1414	1447	1000
DocumentCardTitle	mount	1711	1775	1000
Dropdown	mount	2445	2402	5000
FocusZone	mount	1751	1761	5000
IconButton	mount	1641	1662	5000
Label	mount	318	327	5000
Link	mount	425	428	5000
LinkNext	mount	437	449	5000
MenuButton	mount	1369	1393	5000
MessageBar	mount	1962	1984	5000
MessageBarNext	mount	1915	1961	5000
Nav	mount	3018	3074	1000
OverflowSet	mount	1328	1335	5000
OverflowSetNext	mount	995	987	5000
Panel	mount	1395	1390	1000
Persona	mount	793	807	1000
Pivot	mount	1360	1342	1000
PivotNext	mount	1324	1315	1000
PrimaryButton	mount	1196	1215	5000
Rating	mount	7182	7203	5000
RatingNext	mount	7131	7065	5000
SearchBox	mount	1235	1239	5000
SearchBoxNext	mount	1254	1242	5000
Shimmer	mount	2406	2493	5000
ShimmerNext	mount	2386	2435	5000
Slider	mount	1406	1413	5000
SliderNext	mount	1797	1826	5000
SpinButton	mount	4640	4749	5000
SpinButtonNext	mount	4737	4819	5000
Spinner	mount	396	414	5000
SplitButton	mount	2983	2985	5000
Stack	mount	498	484	5000
StackWithIntrinsicChildren	mount	1829	1823	5000
StackWithTextChildren	mount	4695	4694	5000
SwatchColorPicker	mount	9712	9677	5000
SwatchColorPickerNext	mount	9601	9674	5000
TagPicker	mount	2601	2564	5000
TeachingBubble	mount	47890	48232	5000
TeachingBubbleNext	mount	47896	48448	5000
Text	mount	392	415	5000
TextField	mount	1293	1315	5000
ThemeProvider	mount	4679	4688	5000
ThemeProvider	virtual-rerender	489	501	5000
Toggle	mount	783	800	5000
ToggleNext	mount	772	749	5000
button	mount	113	119	5000

Perf Analysis (Fluent)

⚠️ 5 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
ButtonOverridesMissPerf.default	1596	42	38:1	analysis
ButtonUseCssNestingPerf.default	1036	37	28:1	analysis
ButtonUseCssPerf.default	787	42	18.74:1	analysis
ChatWithPopoverPerf.default	459	441	1.04:1	analysis
ListCommonPerf.default	627	870	0.72:1	analysis

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.42	0.47	0.89:1	2000	840
🦄	Button.Fluent	0.11	0.18	0.61:1	5000	549
🔧	Checkbox.Fluent	0.61	0.33	1.85:1	1000	609
🎯	Dialog.Fluent	0.15	0.21	0.71:1	5000	745
🔧	Dropdown.Fluent	2.83	0.45	6.29:1	1000	2827
🔧	Icon.Fluent	0.14	0.06	2.33:1	5000	709
🎯	Image.Fluent	0.08	0.11	0.73:1	5000	385
🔧	Slider.Fluent	1.52	0.35	4.34:1	1000	1524
🔧	Text.Fluent	0.07	0.03	2.33:1	5000	349
🦄	Tooltip.Fluent	0.11	15.46	0.01:1	5000	539

🔧 Needs work 🎯 On target 🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	170	114	1.49:1
RefMinimalPerf.default	238	189	1.26:1
TableMinimalPerf.default	433	356	1.22:1
StatusMinimalPerf.default	721	599	1.2:1
HeaderMinimalPerf.default	378	320	1.18:1
IconMinimalPerf.default	710	601	1.18:1
ImageMinimalPerf.default	375	321	1.17:1
LabelMinimalPerf.default	425	362	1.17:1
ReactionMinimalPerf.default	403	344	1.17:1
SegmentMinimalPerf.default	366	314	1.17:1
Image.Fluent	385	329	1.17:1
DividerMinimalPerf.default	365	316	1.16:1
FlexMinimalPerf.default	299	257	1.16:1
TextAreaMinimalPerf.default	473	407	1.16:1
BoxMinimalPerf.default	354	307	1.15:1
FormMinimalPerf.default	416	361	1.15:1
ListMinimalPerf.default	493	430	1.15:1
TextMinimalPerf.default	360	313	1.15:1
AccordionMinimalPerf.default	158	138	1.14:1
ButtonMinimalPerf.default	172	151	1.14:1
LayoutMinimalPerf.default	402	353	1.14:1
SkeletonMinimalPerf.default	402	357	1.13:1
VideoMinimalPerf.default	632	558	1.13:1
Button.Fluent	549	486	1.13:1
Text.Fluent	349	309	1.13:1
AnimationMinimalPerf.default	409	364	1.12:1
Tooltip.Fluent	539	483	1.12:1
AttachmentMinimalPerf.default	156	141	1.11:1
PopupMinimalPerf.default	700	628	1.11:1
TooltipMinimalPerf.default	797	719	1.11:1
ButtonSlotsPerf.default	593	538	1.1:1
GridMinimalPerf.default	343	311	1.1:1
MenuMinimalPerf.default	835	767	1.09:1
RadioGroupMinimalPerf.default	419	386	1.09:1
ToolbarMinimalPerf.default	927	853	1.09:1
MenuButtonMinimalPerf.default	1519	1424	1.07:1
TreeMinimalPerf.default	861	804	1.07:1
Icon.Fluent	709	661	1.07:1
CardMinimalPerf.default	539	508	1.06:1
HeaderSlotsPerf.default	764	720	1.06:1
Avatar.Fluent	840	792	1.06:1
Dialog.Fluent	745	703	1.06:1
AvatarMinimalPerf.default	449	428	1.05:1
CarouselMinimalPerf.default	434	414	1.05:1
ChatMinimalPerf.default	600	570	1.05:1
LoaderMinimalPerf.default	711	677	1.05:1
ProviderMergeThemesPerf.default	1894	1810	1.05:1
ProviderMinimalPerf.default	895	850	1.05:1
DialogMinimalPerf.default	743	714	1.04:1
DropdownManyItemsPerf.default	719	690	1.04:1
EmbedMinimalPerf.default	1833	1763	1.04:1
InputMinimalPerf.default	1279	1234	1.04:1
AttachmentSlotsPerf.default	1103	1074	1.03:1
ChatDuplicateMessagesPerf.default	403	390	1.03:1
SliderMinimalPerf.default	1562	1516	1.03:1
CustomToolbarPrototype.default	3643	3543	1.03:1
Checkbox.Fluent	609	590	1.03:1
CheckboxMinimalPerf.default	2747	2688	1.02:1
ItemLayoutMinimalPerf.default	1183	1155	1.02:1
SplitButtonMinimalPerf.default	3560	3490	1.02:1
TableManyItemsPerf.default	2074	2030	1.02:1
AlertMinimalPerf.default	283	280	1.01:1
DropdownMinimalPerf.default	2812	2778	1.01:1
Dropdown.Fluent	2827	2811	1.01:1
Slider.Fluent	1524	1514	1.01:1
TreeWith60ListItems.default	193	199	0.97:1
ListWith60ListItems.default	936	1033	0.91:1
ListNestedPerf.default	549	835	0.66:1

size-auditor · 2020-09-16T22:11:33Z

Asset size changes

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

Baseline commit: a206613fdde9717a5c1f77a57368d83916a608d7 (build)

msft-github-bot · 2020-09-18T12:24:17Z

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

msft-github-bot · 2020-09-18T12:24:29Z

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

czearing added 2 commits September 16, 2020 13:48

Adding compat exports to v7

e68b594

Change files

08b752c

msft-github-bot added the Fluent UI v8 label Sep 16, 2020

czearing added 7 commits September 16, 2020 14:05

Removing toggle, slider, pivot, link, and checkbox from @fluentui/rea…

467a25f

…ct compat exports.

Delete Toggle.ts

ebe621e

Delete Slider.ts

289c7ec

Delete Pivot.ts

3f9f015

Delete Checkbox.ts

abad886

Delete Link.ts

26d3598

Reverting an unintended change.

3e33308

ecraig12345 reviewed Sep 16, 2020

View reviewed changes

packages/react/src/compat/index.ts Outdated Show resolved Hide resolved

Updating react-next compat index file

f732353

ecraig12345 reviewed Sep 16, 2020

View reviewed changes

packages/react-next/src/compat/index.ts Show resolved Hide resolved

Merge branch 'feat/implementing-compat-exports-to-v7' of https://gith…

4a67db1

…ub.com/czearing/fluentui into feat/implementing-compat-exports-to-v7

Removing react-next's compat exports for toggle, slider, pivot, link,…

7932671

… and checkbox

ecraig12345 approved these changes Sep 16, 2020

View reviewed changes

xugao approved these changes Sep 16, 2020

View reviewed changes

czearing merged commit 49b7362 into microsoft:master Sep 17, 2020

ecraig12345 mentioned this pull request Sep 17, 2020

Fix implicit merge conflict in ComboBox #15096

Merged

msft-github-bot mentioned this pull request Sep 18, 2020

Add compat exports to v7 #14939

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding compat exports to v7 #15079

Adding compat exports to v7 #15079

czearing commented Sep 16, 2020 •

edited

Loading

codesandbox-ci bot commented Sep 16, 2020 •

edited

Loading

codesandbox-ci bot commented Sep 16, 2020

codesandbox-ci bot commented Sep 16, 2020

codesandbox-ci bot commented Sep 16, 2020

codesandbox-ci bot commented Sep 16, 2020

msft-github-bot commented Sep 16, 2020

size-auditor bot commented Sep 16, 2020

msft-github-bot commented Sep 18, 2020

msft-github-bot commented Sep 18, 2020

Adding compat exports to v7 #15079

Adding compat exports to v7 #15079

Conversation

czearing commented Sep 16, 2020 • edited Loading

Pull request checklist

Description of changes

codesandbox-ci bot commented Sep 16, 2020 • edited Loading

codesandbox-ci bot commented Sep 16, 2020

codesandbox-ci bot commented Sep 16, 2020

codesandbox-ci bot commented Sep 16, 2020

codesandbox-ci bot commented Sep 16, 2020

msft-github-bot commented Sep 16, 2020

Perf Analysis

Perf Analysis (Fluent)

Potential regressions comparing to master

size-auditor bot commented Sep 16, 2020

Asset size changes

msft-github-bot commented Sep 18, 2020

msft-github-bot commented Sep 18, 2020

czearing commented Sep 16, 2020 •

edited

Loading

codesandbox-ci bot commented Sep 16, 2020 •

edited

Loading