Skip to content

makeStyles: finish up keyframes implementation#16757

Merged
xugao merged 7 commits intomicrosoft:masterfrom
xugao:makestyles-keyframes-2
Feb 3, 2021
Merged

makeStyles: finish up keyframes implementation#16757
xugao merged 7 commits intomicrosoft:masterfrom
xugao:makestyles-keyframes-2

Conversation

@xugao
Copy link
Contributor

@xugao xugao commented Feb 2, 2021

Pull request checklist

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

Description of changes

Finish up keyframes implementation in makeStyles, including:

  • Support multiple animation names (keyframes)
  • RTL
  • Prefix

Related issue: #16372

Focus areas to test

Added unit tests.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 2, 2021

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 434b0dd:

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

@size-auditor
Copy link

size-auditor bot commented Feb 2, 2021

Asset size changes

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

Baseline commit: 6adb69ffc5187cadeb9ecfdb5280fa6f027d6546 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 2, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 822 819 5000
BaseButtonCompat mount 933 907 5000
Breadcrumb mount 43436 43383 5000
Checkbox mount 1453 1480 5000
CheckboxBase mount 1237 1213 5000
ChoiceGroup mount 4656 4707 5000
ComboBox mount 978 961 1000
CommandBar mount 10119 10016 1000
ContextualMenu mount 6122 6145 1000
DefaultButtonCompat mount 1131 1101 5000
DetailsRow mount 3555 3562 5000
DetailsRowFast mount 3623 3550 5000
DetailsRowNoStyles mount 3409 3489 5000
Dialog mount 1453 1450 1000
DocumentCardTitle mount 1814 1818 1000
Dropdown mount 3266 3294 5000
FocusTrapZone mount 1770 1779 5000
FocusZone mount 1797 1805 5000
IconButtonCompat mount 1732 1722 5000
Label mount 333 342 5000
Layer mount 1765 1792 5000
Link mount 455 456 5000
MakeStyles mount 1990 2009 50000
MenuButtonCompat mount 1447 1490 5000
MessageBar mount 1993 1982 5000
Nav mount 3192 3228 1000
OverflowSet mount 1039 1029 5000
Panel mount 1417 1400 1000
Persona mount 841 856 1000
Pivot mount 1401 1405 1000
PrimaryButtonCompat mount 1269 1271 5000
Rating mount 7381 7443 5000
SearchBox mount 1300 1272 5000
Shimmer mount 2505 2549 5000
Slider mount 1868 1863 5000
SpinButton mount 4956 4962 5000
Spinner mount 418 409 5000
SplitButtonCompat mount 3115 3146 5000
Stack mount 483 492 5000
StackWithIntrinsicChildren mount 1518 1571 5000
StackWithTextChildren mount 4403 4476 5000
SwatchColorPicker mount 10205 10223 5000
Tabs mount 1385 1363 1000
TagPicker mount 2826 2848 5000
TeachingBubble mount 11604 11563 5000
Text mount 402 413 5000
TextField mount 1337 1331 5000
ThemeProvider mount 1403 1421 5000
ThemeProvider virtual-rerender 619 595 5000
ThemeProviderNext mount 2166 2197 5000
Toggle mount 796 812 5000
button mount 671 655 5000
buttonNative mount 108 103 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.17 0.51 0.33:1 2000 341
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 577
🔧 Checkbox.Fluent 0.64 0.33 1.94:1 1000 642
🎯 Dialog.Fluent 0.16 0.21 0.76:1 5000 794
🔧 Dropdown.Fluent 3.13 0.42 7.45:1 1000 3125
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 679
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 414
🔧 Slider.Fluent 1.61 0.45 3.58:1 1000 1608
🔧 Text.Fluent 0.08 0.04 2:1 5000 380
🦄 Tooltip.Fluent 0.12 0.89 0.13:1 5000 594

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ChatDuplicateMessagesPerf.default 395 360 1.1:1
ReactionMinimalPerf.default 442 404 1.09:1
ButtonMinimalPerf.default 189 180 1.05:1
GridMinimalPerf.default 378 359 1.05:1
LayoutMinimalPerf.default 448 426 1.05:1
PortalMinimalPerf.default 171 163 1.05:1
Image.Fluent 414 394 1.05:1
Text.Fluent 380 361 1.05:1
AvatarMinimalPerf.default 212 204 1.04:1
DropdownManyItemsPerf.default 753 725 1.04:1
ImageMinimalPerf.default 399 382 1.04:1
CardMinimalPerf.default 592 575 1.03:1
ListWith60ListItems.default 644 623 1.03:1
Tooltip.Fluent 594 578 1.03:1
AccordionMinimalPerf.default 175 172 1.02:1
AttachmentMinimalPerf.default 175 171 1.02:1
BoxMinimalPerf.default 394 388 1.02:1
CheckboxMinimalPerf.default 2871 2824 1.02:1
HeaderMinimalPerf.default 389 383 1.02:1
ListCommonPerf.default 667 653 1.02:1
ListMinimalPerf.default 513 505 1.02:1
StatusMinimalPerf.default 755 743 1.02:1
TreeMinimalPerf.default 812 796 1.02:1
TreeWith60ListItems.default 186 183 1.02:1
AlertMinimalPerf.default 307 303 1.01:1
ButtonSlotsPerf.default 603 599 1.01:1
ProviderMergeThemesPerf.default 1630 1619 1.01:1
ProviderMinimalPerf.default 992 980 1.01:1
SplitButtonMinimalPerf.default 3812 3765 1.01:1
TableManyItemsPerf.default 2079 2063 1.01:1
TextMinimalPerf.default 373 369 1.01:1
TextAreaMinimalPerf.default 501 496 1.01:1
CustomToolbarPrototype.default 3788 3761 1.01:1
ToolbarMinimalPerf.default 966 955 1.01:1
Button.Fluent 577 570 1.01:1
Dropdown.Fluent 3125 3082 1.01:1
AnimationMinimalPerf.default 421 420 1:1
DropdownMinimalPerf.default 3095 3109 1:1
EmbedMinimalPerf.default 4301 4307 1:1
FlexMinimalPerf.default 310 310 1:1
MenuMinimalPerf.default 872 875 1:1
MenuButtonMinimalPerf.default 1594 1588 1:1
PopupMinimalPerf.default 721 718 1:1
TableMinimalPerf.default 432 432 1:1
Avatar.Fluent 341 341 1:1
AttachmentSlotsPerf.default 1210 1225 0.99:1
ButtonUseCssPerf.default 820 831 0.99:1
CarouselMinimalPerf.default 484 489 0.99:1
DatepickerMinimalPerf.default 47714 48193 0.99:1
InputMinimalPerf.default 1303 1320 0.99:1
ItemLayoutMinimalPerf.default 1228 1237 0.99:1
LoaderMinimalPerf.default 732 737 0.99:1
SkeletonMinimalPerf.default 379 381 0.99:1
TooltipMinimalPerf.default 841 846 0.99:1
Checkbox.Fluent 642 651 0.99:1
Dialog.Fluent 794 799 0.99:1
Slider.Fluent 1608 1630 0.99:1
ButtonOverridesMissPerf.default 1689 1726 0.98:1
DialogMinimalPerf.default 798 811 0.98:1
DividerMinimalPerf.default 394 404 0.98:1
HeaderSlotsPerf.default 782 798 0.98:1
RadioGroupMinimalPerf.default 459 466 0.98:1
RefMinimalPerf.default 235 240 0.98:1
SliderMinimalPerf.default 1590 1628 0.98:1
ButtonUseCssNestingPerf.default 1081 1111 0.97:1
LabelMinimalPerf.default 432 445 0.97:1
Icon.Fluent 679 697 0.97:1
FormMinimalPerf.default 422 439 0.96:1
IconMinimalPerf.default 676 704 0.96:1
VideoMinimalPerf.default 637 662 0.96:1
ChatWithPopoverPerf.default 464 486 0.95:1
ListNestedPerf.default 567 596 0.95:1
RosterPerf.default 1114 1185 0.94:1
ChatMinimalPerf.default 608 653 0.93:1
SegmentMinimalPerf.default 361 398 0.91:1

const animationName = names.join(' ');
const animationNameRtl = namesRtl.join(' ');
result[animationName] = [undefined, keyframeCSS, keyframeRtlCSS || undefined];
resolveStyleRules({ animationName }, unstable_cssPriority, pseudo, media, support, result, animationNameRtl);
Copy link
Member

@layershifter layershifter Feb 2, 2021

Choose a reason for hiding this comment

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

I would like to have a better proposal than adding animationNameRtl as a param, but nothing simpler comes to my mind 💭

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I didn't like this either. I will think a bit more :)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I thought about this more today but couldn't come up with a better approach :/

@xugao xugao force-pushed the makestyles-keyframes-2 branch from b097cf1 to 434b0dd Compare February 3, 2021 00:58
@xugao xugao merged commit 42df0be into microsoft:master Feb 3, 2021
@layershifter layershifter deleted the makestyles-keyframes-2 branch February 3, 2021 17:10
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/make-styles@v0.5.0 has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants