Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add drop to the end of the list to UPP, fix minor bugs #15428

Merged
merged 21 commits into from
Oct 21, 2020
Merged

Add drop to the end of the list to UPP, fix minor bugs #15428

merged 21 commits into from
Oct 21, 2020

Conversation

elisabethcvs
Copy link
Contributor

@elisabethcvs elisabethcvs commented Oct 8, 2020 •
edited by nebhatna
Loading

Pull request checklist

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

Description of changes

This won't be checked in until the 8 release is available

  • Add props/functionality so that users can drop over the input (making it look like the item is dropped at the end of the list or in the empty UPP
  • add a prop so consumers can disable drag drop in the UPP
  • add a compare function to the selected items list so we don't have to rely on findIndex (which does a strict compare) to find the index of a list item

Modified the examples to show the new options:

  • double UPP example has everything enabled
  • single UPP has drag drop enabled, but not drop over the input
  • UPP with edit has drag drop disabled

@msft-github-bot
Copy link
Contributor

Thanks for submitting this change, but due to work currently in progress to prepare master for our version 8 beta release, we're asking contributors to either wait a couple weeks to submit changes (if it's not urgent) or submit to the new 7.0 branch (if it's urgent). See #15222 for more details. Thank you for your contribution and understanding!

@elisabethcvs
Copy link
Contributor Author

I need a change file

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Oct 8, 2020 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 832 845 5000
BaseButtonCompat mount 941 962 5000
Breadcrumb mount 155622 157654 5000
Checkbox mount 1581 1561 5000
CheckboxBase mount 1319 1284 5000
ChoiceGroup mount 4879 4882 5000
ComboBox mount 1001 981 1000
CommandBar mount 21268 21248 1000
ContextualMenu mount 6042 5946 1000
DefaultButtonCompat mount 1169 1173 5000
DetailsRow mount 3673 3756 5000
DetailsRowFast mount 3674 3834 5000
DetailsRowNoStyles mount 3612 3507 5000
Dialog mount 1525 1532 1000
DocumentCardTitle mount 1729 1830 1000
Dropdown mount 3462 3511 5000
FocusTrapZone mount 1797 1780 5000
FocusZone mount 1768 1771 5000
IconButtonCompat mount 1860 1840 5000
Label mount 337 330 5000
Layer mount 1873 1836 5000
Link mount 466 470 5000
MenuButtonCompat mount 1502 1520 5000
MessageBar mount 1989 2027 5000
Nav mount 3377 3325 1000
OverflowSet mount 1035 1020 5000
Panel mount 1469 1430 1000
Persona mount 848 864 1000
Pivot mount 1397 1409 1000
PrimaryButtonCompat mount 1329 1314 5000
Rating mount 7791 7776 5000
SearchBox mount 1387 1347 5000
Shimmer mount 2628 2672 5000
Slider mount 1947 1922 5000
SpinButton mount 5083 4986 5000
Spinner mount 407 408 5000
SplitButtonCompat mount 3270 3275 5000
Stack mount 505 525 5000
StackWithIntrinsicChildren mount 1599 1597 5000
StackWithTextChildren mount 4905 4951 5000
SwatchColorPicker mount 10414 10463 5000
TagPicker mount 2845 2860 5000
TeachingBubble mount 11461 11702 5000
Text mount 447 435 5000
TextField mount 1467 1402 5000
ThemeProvider mount 2007 1992 5000
ThemeProvider virtual-rerender 665 636 5000
Toggle mount 838 812 5000
button mount 575 540 5000
buttonNative mount 110 129 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.5 0.54 0.93:1 2000 1001
🦄 Button.Fluent 0.14 0.26 0.54:1 5000 681
🔧 Checkbox.Fluent 0.69 0.37 1.86:1 1000 690
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 825
🔧 Dropdown.Fluent 2.92 0.42 6.95:1 1000 2924
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 766
🎯 Image.Fluent 0.09 0.12 0.75:1 5000 435
🔧 Slider.Fluent 1.64 0.45 3.64:1 1000 1638
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 408
🦄 Tooltip.Fluent 0.12 0.89 0.13:1 5000 576

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TextMinimalPerf.default 438 406 1.08:1
VideoMinimalPerf.default 733 682 1.07:1
SkeletonMinimalPerf.default 518 487 1.06:1
AttachmentMinimalPerf.default 179 171 1.05:1
ReactionMinimalPerf.default 480 457 1.05:1
Checkbox.Fluent 690 659 1.05:1
AccordionMinimalPerf.default 182 175 1.04:1
BoxMinimalPerf.default 416 399 1.04:1
CardMinimalPerf.default 641 616 1.04:1
ChatWithPopoverPerf.default 505 485 1.04:1
ItemLayoutMinimalPerf.default 1444 1387 1.04:1
PortalMinimalPerf.default 181 174 1.04:1
StatusMinimalPerf.default 832 799 1.04:1
Text.Fluent 408 391 1.04:1
AnimationMinimalPerf.default 449 437 1.03:1
AvatarMinimalPerf.default 507 494 1.03:1
ButtonUseCssPerf.default 917 887 1.03:1
ButtonUseCssNestingPerf.default 1135 1097 1.03:1
ChatDuplicateMessagesPerf.default 448 433 1.03:1
DialogMinimalPerf.default 857 836 1.03:1
DropdownManyItemsPerf.default 821 798 1.03:1
HeaderMinimalPerf.default 425 414 1.03:1
ListWith60ListItems.default 988 955 1.03:1
IconMinimalPerf.default 763 738 1.03:1
TooltipMinimalPerf.default 898 869 1.03:1
TreeMinimalPerf.default 1003 971 1.03:1
Avatar.Fluent 1001 973 1.03:1
Button.Fluent 681 660 1.03:1
Tooltip.Fluent 576 561 1.03:1
AttachmentSlotsPerf.default 1204 1179 1.02:1
ImageMinimalPerf.default 451 441 1.02:1
LayoutMinimalPerf.default 475 464 1.02:1
RefMinimalPerf.default 258 254 1.02:1
SegmentMinimalPerf.default 405 398 1.02:1
TextAreaMinimalPerf.default 573 562 1.02:1
CustomToolbarPrototype.default 4210 4147 1.02:1
Image.Fluent 435 428 1.02:1
DropdownMinimalPerf.default 3034 3000 1.01:1
EmbedMinimalPerf.default 2027 2016 1.01:1
GridMinimalPerf.default 398 396 1.01:1
PopupMinimalPerf.default 752 744 1.01:1
RadioGroupMinimalPerf.default 508 501 1.01:1
SliderMinimalPerf.default 1687 1667 1.01:1
TableManyItemsPerf.default 2507 2491 1.01:1
TableMinimalPerf.default 487 483 1.01:1
ToolbarMinimalPerf.default 1052 1045 1.01:1
Icon.Fluent 766 757 1.01:1
Slider.Fluent 1638 1614 1.01:1
ButtonSlotsPerf.default 646 647 1:1
ChatMinimalPerf.default 672 669 1:1
CheckboxMinimalPerf.default 2921 2925 1:1
DividerMinimalPerf.default 426 427 1:1
FlexMinimalPerf.default 329 329 1:1
HeaderSlotsPerf.default 871 869 1:1
LabelMinimalPerf.default 459 459 1:1
LoaderMinimalPerf.default 761 759 1:1
MenuButtonMinimalPerf.default 1703 1695 1:1
ProviderMergeThemesPerf.default 2082 2089 1:1
ProviderMinimalPerf.default 1073 1072 1:1
TreeWith60ListItems.default 226 225 1:1
Dialog.Fluent 825 826 1:1
Dropdown.Fluent 2924 2938 1:1
ButtonMinimalPerf.default 190 192 0.99:1
ButtonOverridesMissPerf.default 1757 1776 0.99:1
CarouselMinimalPerf.default 481 488 0.99:1
InputMinimalPerf.default 1342 1356 0.99:1
SplitButtonMinimalPerf.default 4105 4130 0.99:1
ListCommonPerf.default 700 716 0.98:1
ListMinimalPerf.default 531 541 0.98:1
MenuMinimalPerf.default 910 928 0.98:1
AlertMinimalPerf.default 334 353 0.95:1
ListNestedPerf.default 607 638 0.95:1
FormMinimalPerf.default 461 493 0.94:1

@size-auditor
Copy link

size-auditor bot commented Oct 8, 2020 •
edited
Loading

Asset size changes

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

Baseline commit: ac1cfd5c9000ec83a0f58f05f3ca45efd8869473 (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 8, 2020 •
edited
Loading

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 5b3ad9c:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@elisabethcvs elisabethcvs changed the title DO NOT REVIEW Add drop to the end of the list to UPP, fix minor bugs Add drop to the end of the list to UPP, fix minor bugs Oct 16, 2020
nebhatna
nebhatna suggested changes Oct 21, 2020
View reviewed changes
Copy link
Contributor

@nebhatna nebhatna left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

few minor comments

@elisabethcvs elisabethcvs merged commit 5dcd2ab into microsoft:master Oct 21, 2020
@elisabethcvs elisabethcvs mentioned this pull request Oct 21, 2020
Merged
2 tasks
SethDonohue pushed a commit to SethDonohue/fluentui that referenced this pull request Nov 2, 2020
@elisabethcvs
Add drop to the end of the list to UPP, fix minor bugs (microsoft#15428)
47c5f66 
* basic drop over input, still bugs

* check key to find index on drop instead of compare

* add compare function prop

* add indexof fallback

* fix compile problem

* add prop to disable drag drop

* fix function name

* add props for the autofill drop

* comments, fix lint failures

* fix test failures

* properly delete files

* re-add code to examples in correct location

* Change files

* fix examples after merge

* remove old change file

* Change files

* generate snapshots

* address PR comments
@elisabethcvs elisabethcvs deleted the uppdroptarget branch November 9, 2020 19:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nebhatna nebhatna nebhatna approved these changes

Assignees

@khmakoto khmakoto

@tomi-msft tomi-msft

Labels
PR: Possible Perf Regression 🐌
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@elisabethcvs @msft-github-bot @nebhatna @khmakoto @tomi-msft