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.

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

feat(Animation): update animations for Teams theme #13046

Merged
merged 16 commits into from
May 20, 2020

Conversation

mnajdova
Copy link
Contributor

@mnajdova mnajdova commented May 7, 2020

BREAKING CHANGES

Animations duration/timing functions and names were updated. If there were some usages, the best advice is to contact the motion team for guidance on which durations/timing functions should be used.

@msft-github-bot
Copy link
Contributor

msft-github-bot commented May 7, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 824 859 5000
Checkbox 1626 1692 5000
CheckboxBase 1301 1343 5000
CheckboxNext 1581 1581 5000
ChoiceGroup 5094 5080 5000
ComboBox 923 916 1000
CommandBar 7525 7406 1000
ContextualMenu 13857 14000 1000
DefaultButton 1062 1121 5000
DetailsRow 3399 3395 5000
DetailsRow (fast icons) 3459 3499 5000
DetailsRow without styles 3209 3257 5000
Dialog 1475 1429 1000
DocumentCardTitle with truncation 1560 1563 1000
Dropdown 2519 2484 5000
FocusZone 1546 1596 5000
IconButton 1688 1690 5000
Label 310 314 5000
Link 442 437 5000
LinkNext 433 425 5000
MenuButton 1448 1525 5000
Nav 3082 3119 1000
Panel 1417 1417 1000
Persona 865 863 1000
Pivot 1339 1331 1000
PrimaryButton 1193 1232 5000
SearchBox 1304 1308 5000
Slider 1556 1548 5000
SliderNext 1516 1485 5000
Spinner 374 388 5000
SplitButton 3092 3088 5000
Stack 518 491 5000
Stack with Intrinsic children 1103 1146 5000
Stack with Text children 4394 4295 5000
TagPicker 2721 2734 5000
Text 386 374 5000
TextField 1366 1486 5000
Toggle 937 855 5000
ToggleNext 889 920 5000
button 69 65 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.46 0.47 0.98:1 2000 920
🦄 Button.Fluent 0.12 0.19 0.63:1 5000 594
🔧 Checkbox.Fluent 0.64 0.36 1.78:1 1000 640
🔧 Dialog.Fluent 0.32 0.21 1.52:1 5000 1579
🔧 Dropdown.Fluent 3.28 0.44 7.45:1 1000 3282
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 705
🎯 Image.Fluent 0.08 0.11 0.73:1 5000 394
🔧 Slider.Fluent 1.31 0.38 3.45:1 1000 1312
🔧 Text.Fluent 0.08 0.02 4:1 5000 395
🦄 Tooltip.Fluent 0.09 16.35 0.01:1 5000 470

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AlertMinimalPerf.default 328 294 1.12:1
PopupMinimalPerf.default 271 242 1.12:1
DialogMinimalPerf.default 1779 1626 1.09:1
Text.Fluent 395 365 1.08:1
RefMinimalPerf.default 209 195 1.07:1
IconMinimalPerf.default 726 678 1.07:1
ButtonMinimalPerf.default 181 170 1.06:1
FormMinimalPerf.default 444 420 1.06:1
HeaderMinimalPerf.default 545 516 1.06:1
ListCommonPerf.default 1098 1037 1.06:1
MenuButtonMinimalPerf.default 1711 1614 1.06:1
Button.Fluent 594 559 1.06:1
ReactionMinimalPerf.default 423 401 1.05:1
StatusMinimalPerf.default 732 699 1.05:1
Tooltip.Fluent 470 449 1.05:1
DividerMinimalPerf.default 382 368 1.04:1
HeaderSlotsPerf.default 1569 1512 1.04:1
ListNestedPerf.default 969 936 1.04:1
MenuMinimalPerf.default 760 732 1.04:1
PortalMinimalPerf.default 106 102 1.04:1
ProviderMinimalPerf.default 695 671 1.04:1
TreeMinimalPerf.default 1308 1256 1.04:1
CardMinimalPerf.default 593 577 1.03:1
CheckboxMinimalPerf.default 3058 2957 1.03:1
HierarchicalTreeMinimalPerf.default 432 418 1.03:1
SegmentMinimalPerf.default 366 356 1.03:1
CarouselMinimalPerf.default 513 501 1.02:1
ChatMinimalPerf.default 656 641 1.02:1
FlexMinimalPerf.default 296 289 1.02:1
GridMinimalPerf.default 755 739 1.02:1
LoaderMinimalPerf.default 787 770 1.02:1
TableMinimalPerf.default 412 403 1.02:1
TreeWith60ListItems.default 227 223 1.02:1
Dialog.Fluent 1579 1542 1.02:1
ChatWithPopoverPerf.default 525 521 1.01:1
ProviderMergeThemesPerf.default 1838 1826 1.01:1
SplitButtonMinimalPerf.default 3481 3443 1.01:1
TextMinimalPerf.default 362 357 1.01:1
VideoMinimalPerf.default 626 620 1.01:1
AnimationMinimalPerf.default 671 673 1:1
ListWith60ListItems.default 1170 1167 1:1
RadioGroupMinimalPerf.default 615 617 1:1
Dropdown.Fluent 3282 3278 1:1
AttachmentMinimalPerf.default 152 154 0.99:1
BoxMinimalPerf.default 366 368 0.99:1
ImageMinimalPerf.default 403 409 0.99:1
ItemLayoutMinimalPerf.default 1755 1770 0.99:1
LayoutMinimalPerf.default 602 607 0.99:1
AttachmentSlotsPerf.default 1175 1204 0.98:1
ButtonSlotsPerf.default 619 632 0.98:1
EmbedMinimalPerf.default 2079 2120 0.98:1
ListMinimalPerf.default 498 508 0.98:1
SliderMinimalPerf.default 1364 1392 0.98:1
TextAreaMinimalPerf.default 509 520 0.98:1
ToolbarMinimalPerf.default 854 869 0.98:1
Icon.Fluent 705 722 0.98:1
AccordionMinimalPerf.default 143 148 0.97:1
AvatarMinimalPerf.default 520 537 0.97:1
DropdownMinimalPerf.default 3121 3211 0.97:1
InputMinimalPerf.default 941 972 0.97:1
TooltipMinimalPerf.default 753 778 0.97:1
Checkbox.Fluent 640 657 0.97:1
Image.Fluent 394 407 0.97:1
LabelMinimalPerf.default 417 436 0.96:1
CustomToolbarPrototype.default 3610 3767 0.96:1
Slider.Fluent 1312 1370 0.96:1
DropdownManyItemsPerf.default 1361 1437 0.95:1
ChatDuplicateMessagesPerf.default 390 418 0.93:1
Avatar.Fluent 920 984 0.93:1

@size-auditor
Copy link

size-auditor bot commented May 7, 2020

Asset size changes

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

Baseline commit: d369a0b09170eeae92a2e494ba471dbe42dca87c (build)

'carousel-slide-to-next-enter': slideAnimations.slideLeftEnterMedium,
'carousel-slide-to-next-exit': slideAnimations.slideLeftExitMedium,
'carousel-slide-to-previous-enter': slideAnimations.slideRightEnterMedium,
'carousel-slide-to-previous-exit': slideAnimations.slideRightExitMedium,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

These are not used anymore

@ecraig12345
Copy link
Member

@mnajdova This has merge conflicts now.

# Conflicts:
#	packages/fluentui/CHANGELOG.md
@mnajdova mnajdova merged commit 5c42e7f into microsoft:master May 20, 2020
miroslavstastny pushed a commit to levithomason/fluentui that referenced this pull request Jun 8, 2020
* -animation updates

* fixed names

* -fixed Carousel

* -ts errors

* -reverted changes

* -reverted changes

* reverted changes

* -updated changelog

* reverted changes

* -button animations fixes

* Update packages/fluentui/react-northstar/src/themes/teams/components/Button/buttonStyles.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants