Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

chore(Animation): move to function component, styles in theme are not required #2258

Merged
merged 8 commits into from
Feb 12, 2020

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Jan 17, 2020

BREAKING CHANGES

Utility styles from the Animation component where moved to the component itself. No upgrade path there as there should no be any custom styles for Animation component as custom animations are defined in the theme.


Fixes #2247.

Also affect affects performance improvements as styles now be recomputed only on demand.

@jurokapsiar
Copy link
Contributor

@layershifter is this related to #2247?

@layershifter
Copy link
Member Author

@jurokapsiar Yes, it will fix it 👍

disableAnimations: context.disableAnimations,
renderer: context.renderer,
rtl: context.rtl,
saveDebug: _.noop,
Copy link
Member Author

Choose a reason for hiding this comment

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

Should we have debug for Animation component?

Copy link
Contributor

Choose a reason for hiding this comment

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

No 👍

@DustyTheBot
Copy link
Collaborator

DustyTheBot commented Feb 10, 2020

Warnings
⚠️ 1 perf regressions detected

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.48 0.41 1.17:1 2000 961
🦄 Button.Fluent 0.12 0.21 0.57:1 1000 124
🔧 Checkbox.Fluent 0.77 0.27 2.85:1 1000 767
🔧 Dialog.Fluent 0.31 0.16 1.94:1 5000 1569
🔧 Dropdown.Fluent 3.39 0.37 9.16:1 1000 3386
🔧 Icon.Fluent 0.13 0.03 4.33:1 5000 632
🦄 Image.Fluent 0.05 0.08 0.63:1 5000 243
🔧 Slider.Fluent 1.5 0.32 4.69:1 1000 1499
🔧 Text.Fluent 0.06 0.02 3:1 5000 320
🦄 Tooltip.Fluent 0.18 17.96 0.01:1 5000 892

🔧 Needs work     🎯 On target     🦄 Amazing

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio
AnimationMinimalPerf.default 477 482 0.99:1
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 268 201 1.33:1
LayoutMinimalPerf.default 770 603 1.28:1
HeaderMinimalPerf.default 545 431 1.26:1
RefMinimalPerf.default 195 155 1.26:1
Button.Fluent 124 104 1.19:1
ChatDuplicateMessagesPerf.default 821 700 1.17:1
ListCommonPerf.default 915 840 1.09:1
DialogMinimalPerf.default 1911 1766 1.08:1
MenuButtonMinimalPerf.default 1549 1435 1.08:1
SplitButtonMinimalPerf.default 13642 12617 1.08:1
TooltipMinimalPerf.default 1202 1128 1.07:1
ListMinimalPerf.default 324 305 1.06:1
TableMinimalPerf.default 615 579 1.06:1
Image.Fluent 243 229 1.06:1
Tooltip.Fluent 892 842 1.06:1
FormMinimalPerf.default 808 770 1.05:1
Icon.Fluent 632 600 1.05:1
MenuMinimalPerf.default 2234 2155 1.04:1
AttachmentSlotsPerf.default 3652 3544 1.03:1
ChatMinimalPerf.default 1701 1653 1.03:1
Dropdown.Fluent 3386 3295 1.03:1
ChatWithPopoverPerf.default 602 588 1.02:1
GridMinimalPerf.default 1015 996 1.02:1
ItemLayoutMinimalPerf.default 1935 1904 1.02:1
VideoMinimalPerf.default 648 633 1.02:1
TreeMinimalPerf.default 832 827 1.01:1
Dialog.Fluent 1569 1559 1.01:1
Slider.Fluent 1499 1477 1.01:1
ButtonSlotsPerf.default 640 643 1:1
DividerMinimalPerf.default 895 895 1:1
PopupMinimalPerf.default 314 313 1:1
SegmentMinimalPerf.default 1354 1351 1:1
HierarchicalTreeMinimalPerf.default 937 943 0.99:1
ReactionMinimalPerf.default 2623 2657 0.99:1
TextAreaMinimalPerf.default 2863 2904 0.99:1
ToolbarMinimalPerf.default 730 735 0.99:1
AvatarMinimalPerf.default 526 539 0.98:1
DropdownMinimalPerf.default 3437 3490 0.98:1
ProviderMergeThemesPerf.default 1165 1189 0.98:1
StatusMinimalPerf.default 240 245 0.98:1
TextMinimalPerf.default 295 300 0.98:1
IconMinimalPerf.default 290 299 0.97:1
Avatar.Fluent 961 991 0.97:1
Checkbox.Fluent 767 790 0.97:1
BoxMinimalPerf.default 231 241 0.96:1
CarouselMinimalPerf.default 1826 1900 0.96:1
DropdownManyItemsPerf.default 427 443 0.96:1
EmbedMinimalPerf.default 6273 6550 0.96:1
CustomToolbarPrototype.default 3705 3858 0.96:1
CheckboxMinimalPerf.default 3566 3772 0.95:1
FlexMinimalPerf.default 360 378 0.95:1
ImageMinimalPerf.default 224 236 0.95:1
SliderMinimalPerf.default 1672 1753 0.95:1
HeaderSlotsPerf.default 1285 1363 0.94:1
Text.Fluent 320 340 0.94:1
ButtonMinimalPerf.default 120 131 0.92:1
LabelMinimalPerf.default 928 1004 0.92:1
ProviderMinimalPerf.default 597 673 0.89:1
RadioGroupMinimalPerf.default 447 502 0.89:1
LoaderMinimalPerf.default 2327 2634 0.88:1
AlertMinimalPerf.default 546 633 0.86:1
AttachmentMinimalPerf.default 925 1112 0.83:1
PortalMinimalPerf.default 215 272 0.79:1
InputMinimalPerf.default 1012 1303 0.78:1

Generated by 🚫 dangerJS

(React.Children.only(children) as React.ReactElement)

const element = (
<>
Copy link
Contributor

Choose a reason for hiding this comment

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

Remove <>

Copy link
Member Author

Choose a reason for hiding this comment

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

Good catch, done 👍

rtl: context.rtl,
saveDebug: _.noop,
theme: context.theme,
_internal_resolvedComponentVariables: context._internal_resolvedComponentVariables,
Copy link
Contributor

Choose a reason for hiding this comment

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

This is removed. Please update your branch

})
}, [
className,
context,
Copy link
Contributor

Choose a reason for hiding this comment

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

Are we using everything from the context? Should we maybe list the things used from the context

Copy link
Member Author

Choose a reason for hiding this comment

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

     disableAnimations: context.disableAnimations,
      renderer: context.renderer,
      rtl: context.rtl,
      theme: context.theme,

Almost everything... So I don't see any benefits in destructing it...

@layershifter layershifter merged commit 8c31810 into master Feb 12, 2020
@layershifter layershifter deleted the chore/move-animation-to-fc branch February 12, 2020 16:35
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Animation component depends on theme styles
4 participants