Docs(react-tree): Add drag and drop example by petdud · Pull Request #28821 · microsoft/fluentui

petdud · 2023-08-11T10:21:16Z

New Behavior

Adding drag and drop story example using @dnd-kit library
Adds new dependencies to the monorepo
- "@dnd-kit/core": "^6.0.8"
- "@dnd-kit/sortable": "^7.0.2"
- "@dnd-kit/utilities": "^3.2.1"

codesandbox-ci · 2023-08-11T10:34:02Z

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

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

bsunderhus · 2023-08-14T16:57:48Z

Let's look at this after the official release #28845

fabricteam · 2023-08-17T10:15:46Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	mount	73	81	10	Possible regression
InfoButton	mount	12	14	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	637	614	5000
Button	mount	310	323	5000
Field	mount	1144	1109	5000
FluentProvider	mount	666	683	5000
FluentProviderWithTheme	mount	73	81	10	Possible regression
FluentProviderWithTheme	virtual-rerender	69	64	10
FluentProviderWithTheme	virtual-rerender-with-unmount	74	79	10
InfoButton	mount	12	14	5000	Possible regression
MakeStyles	mount	861	859	50000
Persona	mount	1729	1652	5000
SpinButton	mount	1409	1349	5000

fabricteam · 2023-08-17T10:17:02Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	91	81	1.12:1
ButtonMinimalPerf.default	94	85	1.11:1
TreeWith60ListItems.default	93	86	1.08:1
VideoMinimalPerf.default	462	426	1.08:1
HeaderMinimalPerf.default	217	203	1.07:1
IconMinimalPerf.default	414	386	1.07:1
PortalMinimalPerf.default	92	87	1.06:1
ReactionMinimalPerf.default	222	209	1.06:1
AvatarMinimalPerf.default	111	106	1.05:1
ImageMinimalPerf.default	225	215	1.05:1
ListWith60ListItems.default	389	371	1.05:1
PopupMinimalPerf.default	363	345	1.05:1
BoxMinimalPerf.default	206	198	1.04:1
ChatWithPopoverPerf.default	204	196	1.04:1
MenuMinimalPerf.default	520	499	1.04:1
SplitButtonMinimalPerf.default	2299	2213	1.04:1
TableManyItemsPerf.default	1146	1104	1.04:1
TextAreaMinimalPerf.default	293	281	1.04:1
TreeMinimalPerf.default	489	468	1.04:1
AlertMinimalPerf.default	160	156	1.03:1
DropdownManyItemsPerf.default	406	393	1.03:1
ItemLayoutMinimalPerf.default	717	699	1.03:1
LabelMinimalPerf.default	220	214	1.03:1
ListNestedPerf.default	330	321	1.03:1
LoaderMinimalPerf.default	206	200	1.03:1
TextMinimalPerf.default	199	194	1.03:1
ButtonSlotsPerf.default	329	321	1.02:1
CheckboxMinimalPerf.default	1177	1159	1.02:1
DialogMinimalPerf.default	453	446	1.02:1
FormMinimalPerf.default	231	226	1.02:1
HeaderSlotsPerf.default	472	465	1.02:1
AnimationMinimalPerf.default	308	305	1.01:1
ButtonOverridesMissPerf.default	653	649	1.01:1
ChatDuplicateMessagesPerf.default	157	155	1.01:1
ChatMinimalPerf.default	434	429	1.01:1
DropdownMinimalPerf.default	1421	1405	1.01:1
InputMinimalPerf.default	539	533	1.01:1
ProviderMinimalPerf.default	204	201	1.01:1
SkeletonMinimalPerf.default	196	194	1.01:1
TableMinimalPerf.default	240	238	1.01:1
ToolbarMinimalPerf.default	546	541	1.01:1
TooltipMinimalPerf.default	1286	1267	1.01:1
AccordionMinimalPerf.default	85	85	1:1
DatepickerMinimalPerf.default	3775	3773	1:1
DividerMinimalPerf.default	206	207	1:1
EmbedMinimalPerf.default	1878	1887	1:1
ListMinimalPerf.default	319	318	1:1
RadioGroupMinimalPerf.default	266	266	1:1
SliderMinimalPerf.default	735	733	1:1
CardMinimalPerf.default	308	312	0.99:1
CarouselMinimalPerf.default	259	261	0.99:1
FlexMinimalPerf.default	159	160	0.99:1
ListCommonPerf.default	388	390	0.99:1
MenuButtonMinimalPerf.default	966	973	0.99:1
SegmentMinimalPerf.default	195	197	0.99:1
StatusMinimalPerf.default	398	403	0.99:1
CustomToolbarPrototype.default	1479	1489	0.99:1
ProviderMergeThemesPerf.default	674	688	0.98:1
RefMinimalPerf.default	109	111	0.98:1
AttachmentSlotsPerf.default	636	659	0.97:1
RosterPerf.default	1521	1582	0.96:1
GridMinimalPerf.default	183	192	0.95:1
LayoutMinimalPerf.default	198	208	0.95:1

fabricteam · 2023-08-17T10:17:37Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2023-08-17T10:22:28Z

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam · 2023-08-17T10:23:12Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `330 B`
`global-context` createContextSelector	`537 B` `342 B`
`priority-overflow` createOverflowManager	`4.162 kB` `1.735 kB`
`react-accordion` Accordion (including children components)	`88.592 kB` `26.885 kB`
`react-alert` Alert	`81.836 kB` `22.031 kB`
`react-avatar` Avatar	`47.01 kB` `14.502 kB`
`react-avatar` AvatarGroup	`16.116 kB` `6.431 kB`
`react-avatar` AvatarGroupItem	`61.789 kB` `18.912 kB`
`react-badge` Badge	`23.183 kB` `7.254 kB`
`react-badge` CounterBadge	`24.084 kB` `7.553 kB`
`react-badge` PresenceBadge	`22.14 kB` `7.867 kB`
`react-button` Button	`37.078 kB` `9.751 kB`
`react-button` CompoundButton	`44.427 kB` `11.234 kB`
`react-button` MenuButton	`41.464 kB` `11.001 kB`
`react-button` SplitButton	`49.499 kB` `12.555 kB`
`react-button` ToggleButton	`54.124 kB` `11.65 kB`
`react-card` Card - All	`88.335 kB` `25.271 kB`
`react-card` Card	`83.177 kB` `23.742 kB`
`react-card` CardFooter	`9.338 kB` `3.932 kB`
`react-card` CardHeader	`11.59 kB` `4.716 kB`
`react-card` CardPreview	`10.297 kB` `4.317 kB`
`react-checkbox` Checkbox	`32.872 kB` `10.652 kB`
`react-combobox` Combobox (including child components)	`87.075 kB` `28.263 kB`
`react-combobox` Dropdown (including child components)	`85.435 kB` `27.903 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`66.614 kB` `18.512 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`203.017 kB` `57.615 kB`
`react-components` react-components: FluentProvider & webLightTheme	`37.787 kB` `12.387 kB`
`react-datepicker-compat` DatePicker Compat	`207.101 kB` `57.398 kB`
`react-dialog` Dialog (including children components)	`86.738 kB` `26.341 kB`
`react-divider` Divider	`17.098 kB` `6.303 kB`
`react-field` Field	`18.295 kB` `6.978 kB`
`react-image` Image	`12.029 kB` `4.783 kB`
`react-infobutton` InfoButton	`125.224 kB` `39.235 kB`
`react-infobutton` InfoLabel	`128.894 kB` `40.413 kB`
`react-input` Input	`23.237 kB` `7.688 kB`
`react-label` Label	`10.423 kB` `4.31 kB`
`react-link` Link	`13.254 kB` `5.397 kB`
`react-menu` Menu (including children components)	`135.069 kB` `41.401 kB`
`react-menu` Menu (including selectable components)	`137.755 kB` `41.898 kB`
`react-overflow` hooks only	`12.419 kB` `4.687 kB`
`react-persona` Persona	`53.905 kB` `16.371 kB`
`react-popover` Popover	`114.577 kB` `35.925 kB`
`react-portal` Portal	`12.255 kB` `4.504 kB`
`react-portal-compat` PortalCompatProvider	`6.48 kB` `2.203 kB`
`react-positioning` usePositioning	`25.111 kB` `9.1 kB`
`react-progress` ProgressBar	`13.718 kB` `5.476 kB`
`react-provider` FluentProvider	`18.332 kB` `6.817 kB`
`react-radio` Radio	`26.617 kB` `8.601 kB`
`react-radio` RadioGroup	`11.622 kB` `4.833 kB`
`react-select` Select	`24.599 kB` `8.651 kB`
`react-slider` Slider	`34.134 kB` `11.039 kB`
`react-spinbutton` SpinButton	`32.681 kB` `10.209 kB`
`react-spinner` Spinner	`19.577 kB` `7.008 kB`
`react-switch` Switch	`29.092 kB` `9.217 kB`
`react-table` DataGrid	`152.77 kB` `42.242 kB`
`react-table` Table (Primitives only)	`39.638 kB` `12.129 kB`
`react-table` Table as DataGrid	`126.224 kB` `33.612 kB`
`react-table` Table (Selection only)	`71.594 kB` `18.91 kB`
`react-table` Table (Sort only)	`70.213 kB` `18.511 kB`
`react-tags-preview` InteractionTag	`11.031 kB` `4.528 kB`
`react-tags-preview` Tag	`25.407 kB` `8.398 kB`
`react-tags-preview` TagGroup	`69.607 kB` `20.482 kB`
`react-text` Text - Default	`13.043 kB` `5.129 kB`
`react-text` Text - Wrappers	`16.215 kB` `5.447 kB`
`react-textarea` Textarea	`27.302 kB` `9.047 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`34.611 kB` `7.295 kB`
`react-theme` Teams: Light theme	`19.282 kB` `5.486 kB`
`react-toast` Toast (including Toaster)	`87.69 kB` `26.037 kB`
`react-tooltip` Tooltip	`47.916 kB` `16.838 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against fc1172b6160e7d3bad0449286512b7c85ba31f84}

size-auditor · 2023-08-17T10:24:34Z

Asset size changes

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

Baseline commit: fc1172b6160e7d3bad0449286512b7c85ba31f84 (build)

fabricteam · 2023-08-17T10:25:13Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2023-08-17T10:33:22Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	646	655	5000
Breadcrumb	mount	1686	1685	1000
Checkbox	mount	1703	1728	5000
CheckboxBase	mount	1504	1483	5000
ChoiceGroup	mount	2999	2915	5000
ComboBox	mount	657	667	1000
CommandBar	mount	6441	6416	1000
ContextualMenu	mount	15619	15771	1000
DefaultButton	mount	749	757	5000
DetailsRow	mount	2200	2180	5000
DetailsRowFast	mount	2172	2194	5000
DetailsRowNoStyles	mount	2025	1957	5000
Dialog	mount	2613	2828	1000
DocumentCardTitle	mount	236	232	1000
Dropdown	mount	1994	2012	5000
FocusTrapZone	mount	1127	1118	5000
FocusZone	mount	1031	1028	5000
GroupedList	mount	41427	41945	2
GroupedList	virtual-rerender	19987	20127	2
GroupedList	virtual-rerender-with-unmount	51018	51428	2
GroupedListV2	mount	227	231	2
GroupedListV2	virtual-rerender	218	216	2
GroupedListV2	virtual-rerender-with-unmount	230	239	2
IconButton	mount	1121	1100	5000
Label	mount	346	338	5000
Layer	mount	2712	2736	5000
Link	mount	393	395	5000
MenuButton	mount	928	962	5000
MessageBar	mount	21630	21613	5000
Nav	mount	1931	1971	1000
OverflowSet	mount	798	790	5000
Panel	mount	2093	1787	1000
Persona	mount	751	749	1000
Pivot	mount	854	874	1000
PrimaryButton	mount	863	842	5000
Rating	mount	4555	4539	5000
SearchBox	mount	914	909	5000
Shimmer	mount	1847	1918	5000
Slider	mount	1301	1312	5000
SpinButton	mount	2953	2884	5000
Spinner	mount	386	385	5000
SplitButton	mount	1835	1867	5000
Stack	mount	411	433	5000
StackWithIntrinsicChildren	mount	846	870	5000
StackWithTextChildren	mount	2637	2605	5000
SwatchColorPicker	mount	6173	6104	5000
TagPicker	mount	1434	1458	5000
Text	mount	373	374	5000
TextField	mount	910	920	5000
ThemeProvider	mount	849	845	5000
ThemeProvider	virtual-rerender	576	588	5000
ThemeProvider	virtual-rerender-with-unmount	1251	1247	5000
Toggle	mount	631	619	5000
buttonNative	mount	193	193	5000

* master: fix(react-drawer): rename values of position prop from left/right to start/end (microsoft#28905) Breadcrumb design team fixes (microsoft#28883) applying package updates chore(react-search-preview): migrate to new slots API (microsoft#28862) docs: Updating version of CDN used and replacing usage of via.placeholder.com with SVG from CDN (microsoft#28895) fix(DatePicker, react-datepicker-compat): Make year picker react to go to today button (microsoft#28907) fix(DatePicker): readOnlyTextField styles should win over default TextField's (microsoft#28891) chore: fix lint warnings for @fluentui/react (microsoft#28888) Lint: fix fluent v9 warnings (microsoft#28889) doc: add drag & drop example (microsoft#28821)

petdud marked this pull request as ready for review August 11, 2023 10:22

petdud requested review from a team as code owners August 11, 2023 10:22

petdud added Fluent UI react-components (v9) Component: Tree labels Aug 11, 2023

petdud requested a review from bsunderhus August 11, 2023 10:23

bsunderhus assigned petdud Aug 14, 2023

marcosmoura requested a review from tudorpopams August 16, 2023 12:09

bsunderhus force-pushed the tree-drag-and-drop branch from 6781c99 to dd8cd4a Compare August 17, 2023 10:03

doc: add drag & drop example

dd9a27c

bsunderhus force-pushed the tree-drag-and-drop branch from dd8cd4a to dd9a27c Compare August 17, 2023 10:06

bsunderhus approved these changes Aug 17, 2023

View reviewed changes

jurokapsiar approved these changes Aug 17, 2023

View reviewed changes

bsunderhus enabled auto-merge (squash) August 17, 2023 12:08

tudorpopams approved these changes Aug 17, 2023

View reviewed changes

bsunderhus merged commit 40cd997 into microsoft:master Aug 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Docs(react-tree): Add drag and drop example#28821

Docs(react-tree): Add drag and drop example#28821
bsunderhus merged 1 commit intomicrosoft:masterfrom
petdud:tree-drag-and-drop

petdud commented Aug 11, 2023 •

edited by bsunderhus

Loading

Uh oh!

codesandbox-ci bot commented Aug 11, 2023 •

edited

Loading

Uh oh!

bsunderhus commented Aug 14, 2023

Uh oh!

fabricteam commented Aug 17, 2023

Uh oh!

fabricteam commented Aug 17, 2023

Uh oh!

fabricteam commented Aug 17, 2023

Uh oh!

fabricteam commented Aug 17, 2023

Uh oh!

fabricteam commented Aug 17, 2023

Uh oh!

size-auditor bot commented Aug 17, 2023

Uh oh!

fabricteam commented Aug 17, 2023

Uh oh!

fabricteam commented Aug 17, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

petdud commented Aug 11, 2023 • edited by bsunderhus Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New Behavior

Uh oh!

codesandbox-ci bot commented Aug 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bsunderhus commented Aug 14, 2023

Uh oh!

fabricteam commented Aug 17, 2023

Perf Analysis (@fluentui/react-components)

Uh oh!

fabricteam commented Aug 17, 2023

Perf Analysis (@fluentui/react-northstar)

Uh oh!

fabricteam commented Aug 17, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

fabricteam commented Aug 17, 2023

🕵 FluentUIV0 No visual regressions between this PR and main

Uh oh!

fabricteam commented Aug 17, 2023

📊 Bundle size report

Uh oh!

size-auditor bot commented Aug 17, 2023

Asset size changes

Uh oh!

fabricteam commented Aug 17, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

fabricteam commented Aug 17, 2023

Perf Analysis (@fluentui/react)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

petdud commented Aug 11, 2023 •

edited by bsunderhus

Loading

codesandbox-ci bot commented Aug 11, 2023 •

edited

Loading

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

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

Perf Analysis (`@fluentui/react`)