Move component in iframe by drag and drop

[vyhnalekl]

Pull request checklist

• Addresses an existing issue: Fixes #0000
• Include a change request file using $ yarn change

Description of changes

Now you can move selected component in iframe by drag and drop.

[codesandbox-ci]

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 80f95dd:

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]

Perf Analysis

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	926	945	5000
ButtonNext	mount	596	604	5000
Checkbox	mount	1650	1655	5000
CheckboxBase	mount	1359	1394	5000
CheckboxNext	mount	1807	1738	5000
ChoiceGroup	mount	5236	5128	5000
ComboBox	mount	961	954	1000
CommandBar	mount	7816	7903	1000
ContextualMenu	mount	14637	14307	1000
DefaultButton	mount	1147	1167	5000
DetailsRow	mount	3750	3682	5000
DetailsRowFast	mount	3814	3649	5000
DetailsRowNoStyles	mount	3485	3548	5000
Dialog	mount	1561	1570	1000
DocumentCardTitle	mount	1895	1909	1000
Dropdown	mount	2681	2732	5000
FocusZone	mount	1977	1879	5000
IconButton	mount	1766	1756	5000
Label	mount	363	356	5000
Link	mount	449	472	5000
LinkNext	mount	508	501	5000
MenuButton	mount	1522	1497	5000
Nav	mount	3379	3355	1000
Panel	mount	1474	1516	1000
Persona	mount	844	859	1000
Pivot	mount	1452	1510	1000
PivotNext	mount	1411	1412	1000
PrimaryButton	mount	1290	1294	5000
SearchBox	mount	1284	1270	5000
SearchBoxNext	mount	1332	1342	5000
Slider	mount	1558	1572	5000
SliderNext	mount	2011	1972	5000
SpinButton	mount	5214	5080	5000
SpinButtonNext	mount	5223	5220	5000
Spinner	mount	422	433	5000
SplitButton	mount	3227	3368	5000
Stack	mount	528	540	5000
StackWithIntrinsicChildren	mount	2125	2114	5000
StackWithTextChildren	mount	5285	5223	5000
TagPicker	mount	2817	2904	5000
Text	mount	438	438	5000
TextField	mount	1435	1431	5000
ThemeProvider	mount	3157	3023	5000
ThemeProvider	virtual-rerender	453	466	5000
Toggle	mount	865	879	5000
ToggleNext	mount	857	878	5000
button	mount	120	114	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.44	0.5	0.88:1	2000	881
🦄	Button.Fluent	0.11	0.19	0.58:1	5000	560
🔧	Checkbox.Fluent	0.67	0.35	1.91:1	1000	667
🦄	Dialog.Fluent	0.15	0.22	0.68:1	5000	766
🔧	Dropdown.Fluent	3.05	0.48	6.35:1	1000	3053
🔧	Icon.Fluent	0.15	0.05	3:1	5000	749
🎯	Image.Fluent	0.08	0.11	0.73:1	5000	376
🔧	Slider.Fluent	1.73	0.38	4.55:1	1000	1733
🔧	Text.Fluent	0.07	0.03	2.33:1	5000	340
🦄	Tooltip.Fluent	0.11	18.5	0.01:1	5000	541

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AnimationMinimalPerf.default	440	390	1.13:1
ButtonSlotsPerf.default	639	578	1.11:1
TextMinimalPerf.default	356	322	1.11:1
PortalMinimalPerf.default	137	124	1.1:1
ListMinimalPerf.default	509	466	1.09:1
Icon.Fluent	749	703	1.07:1
Image.Fluent	376	351	1.07:1
BoxMinimalPerf.default	356	337	1.06:1
ImageMinimalPerf.default	364	342	1.06:1
ReactionMinimalPerf.default	405	381	1.06:1
RefMinimalPerf.default	220	207	1.06:1
IconMinimalPerf.default	699	658	1.06:1
AlertMinimalPerf.default	316	300	1.05:1
CarouselMinimalPerf.default	480	457	1.05:1
TreeWith60ListItems.default	244	232	1.05:1
ProviderMinimalPerf.default	1000	966	1.04:1
SegmentMinimalPerf.default	351	336	1.04:1
AvatarMinimalPerf.default	478	466	1.03:1
HeaderMinimalPerf.default	360	349	1.03:1
TableMinimalPerf.default	415	402	1.03:1
ChatDuplicateMessagesPerf.default	439	430	1.02:1
DropdownManyItemsPerf.default	775	757	1.02:1
LabelMinimalPerf.default	398	391	1.02:1
MenuButtonMinimalPerf.default	1582	1553	1.02:1
Slider.Fluent	1733	1692	1.02:1
Tooltip.Fluent	541	531	1.02:1
AttachmentSlotsPerf.default	1181	1174	1.01:1
LayoutMinimalPerf.default	397	394	1.01:1
ListNestedPerf.default	893	884	1.01:1
SplitButtonMinimalPerf.default	3898	3845	1.01:1
CustomToolbarPrototype.default	3974	3921	1.01:1
VideoMinimalPerf.default	622	617	1.01:1
Button.Fluent	560	553	1.01:1
AccordionMinimalPerf.default	145	145	1:1
ChatMinimalPerf.default	604	604	1:1
FormMinimalPerf.default	404	404	1:1
HeaderSlotsPerf.default	802	801	1:1
ItemLayoutMinimalPerf.default	1276	1278	1:1
ListCommonPerf.default	968	968	1:1
LoaderMinimalPerf.default	766	767	1:1
ProviderMergeThemesPerf.default	1999	1996	1:1
SkeletonMinimalPerf.default	417	419	1:1
SliderMinimalPerf.default	1703	1702	1:1
StatusMinimalPerf.default	674	671	1:1
TreeMinimalPerf.default	886	887	1:1
Avatar.Fluent	881	881	1:1
Checkbox.Fluent	667	667	1:1
Dialog.Fluent	766	765	1:1
Dropdown.Fluent	3053	3061	1:1
Text.Fluent	340	340	1:1
ChatWithPopoverPerf.default	490	494	0.99:1
DialogMinimalPerf.default	773	782	0.99:1
EmbedMinimalPerf.default	1951	1975	0.99:1
FlexMinimalPerf.default	280	283	0.99:1
InputMinimalPerf.default	1336	1344	0.99:1
TableManyItemsPerf.default	2224	2242	0.99:1
ToolbarMinimalPerf.default	949	958	0.99:1
TooltipMinimalPerf.default	797	806	0.99:1
CardMinimalPerf.default	548	559	0.98:1
CheckboxMinimalPerf.default	2920	2965	0.98:1
DividerMinimalPerf.default	336	343	0.98:1
GridMinimalPerf.default	325	333	0.98:1
ListWith60ListItems.default	1144	1185	0.97:1
MenuMinimalPerf.default	846	872	0.97:1
PopupMinimalPerf.default	651	672	0.97:1
TextAreaMinimalPerf.default	454	466	0.97:1
AttachmentMinimalPerf.default	157	163	0.96:1
ButtonMinimalPerf.default	165	172	0.96:1
DropdownMinimalPerf.default	3093	3242	0.95:1
RadioGroupMinimalPerf.default	410	430	0.95:1

[size-auditor]

Asset size changes

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

Baseline commit: 6b42f1e5cf881aed517b67bf2d0b87bf1248365b (build)