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

feat: add makeStaticStyles() to react-make-styles #17157

Merged
merged 2 commits into from
Feb 24, 2021
Merged

feat: add makeStaticStyles() to react-make-styles #17157

merged 2 commits into from
Feb 24, 2021

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Feb 24, 2021 •
edited

Pull request checklist

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

Description of changes

In #16880 makeStaticStyles() was introduced, but without bindings in @fluentui/react-make-styles that makes hard to properly connect things.

Also adds a re-export for createDOMRenderer() to be exported in @fluentui/react-components. Related to #17056.

@layershifter layershifter mentioned this pull request Feb 24, 2021
Closed
@codesandbox-ci
Copy link

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

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

@size-auditor
Copy link

size-auditor bot commented Feb 24, 2021 •
edited

Asset size changes

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

Baseline commit: 67ba379b70164bc88af3ff88c4c1fee5c9fe25ef (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 24, 2021 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1139 1122 5000
BaseButton mount 919 932 5000
Breadcrumb mount 40564 40534 5000
ButtonNext mount 724 709 5000
Checkbox mount 1521 1522 5000
CheckboxBase mount 1295 1289 5000
ChoiceGroup mount 4877 4857 5000
ComboBox mount 948 958 1000
CommandBar mount 9785 9842 1000
ContextualMenu mount 5938 5855 1000
DefaultButton mount 1185 1132 5000
DetailsRow mount 3597 3535 5000
DetailsRowFast mount 3665 3553 5000
DetailsRowNoStyles mount 3383 3442 5000
Dialog mount 1474 1427 1000
DocumentCardTitle mount 1795 1759 1000
Dropdown mount 3325 3350 5000
FocusTrapZone mount 1736 1740 5000
FocusZone mount 1712 1763 5000
IconButton mount 1894 1848 5000
Label mount 324 352 5000
Layer mount 1945 1853 5000
Link mount 476 474 5000
MakeStyles mount 2007 1976 50000
MenuButton mount 1655 1502 5000
MessageBar mount 2078 2089 5000
Nav mount 3283 3334 1000
OverflowSet mount 1011 1006 5000
Panel mount 1379 1439 1000
Persona mount 802 792 1000
Pivot mount 1388 1401 1000
PrimaryButton mount 1295 1320 5000
Rating mount 7660 7716 5000
SearchBox mount 1343 1358 5000
Shimmer mount 2603 2578 5000
Slider mount 2002 1979 5000
SpinButton mount 5009 5036 5000
Spinner mount 416 412 5000
SplitButton mount 3180 3177 5000
Stack mount 512 493 5000
StackWithIntrinsicChildren mount 1514 1534 5000
StackWithTextChildren mount 4677 4555 5000
SwatchColorPicker mount 10109 10111 5000
Tabs mount 1357 1385 1000
TagPicker mount 2761 2748 5000
TeachingBubble mount 11374 11426 5000
Text mount 417 423 5000
TextField mount 1380 1407 5000
ThemeProvider mount 1185 1164 5000
ThemeProvider virtual-rerender 598 593 5000
ThemeProviderNext mount 1900 2010 5000
Toggle mount 792 844 5000
buttonNative mount 113 101 5000

Perf Analysis (Fluent)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
PortalMinimalPerf.default 172 161 1.07:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.18 0.47 0.38:1 2000 360
🦄 Button.Fluent 0.12 0.21 0.57:1 5000 619
🔧 Checkbox.Fluent 0.66 0.37 1.78:1 1000 663
🎯 Dialog.Fluent 0.17 0.22 0.77:1 5000 833
🔧 Dropdown.Fluent 3.04 0.44 6.91:1 1000 3035
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 714
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 449
🔧 Slider.Fluent 1.55 0.46 3.37:1 1000 1546
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 390
🦄 Tooltip.Fluent 0.11 0.89 0.12:1 5000 556

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 194 177 1.1:1
AvatarMinimalPerf.default 233 215 1.08:1
FormMinimalPerf.default 512 474 1.08:1
GridMinimalPerf.default 400 378 1.06:1
LabelMinimalPerf.default 473 447 1.06:1
ListWith60ListItems.default 684 645 1.06:1
RadioGroupMinimalPerf.default 515 487 1.06:1
TableMinimalPerf.default 469 441 1.06:1
RefMinimalPerf.default 252 240 1.05:1
SkeletonMinimalPerf.default 434 415 1.05:1
Image.Fluent 449 426 1.05:1
CheckboxMinimalPerf.default 2902 2800 1.04:1
FlexMinimalPerf.default 344 331 1.04:1
HeaderSlotsPerf.default 896 862 1.04:1
IconMinimalPerf.default 727 702 1.04:1
Avatar.Fluent 360 347 1.04:1
AnimationMinimalPerf.default 463 451 1.03:1
CarouselMinimalPerf.default 524 508 1.03:1
ChatWithPopoverPerf.default 460 448 1.03:1
DividerMinimalPerf.default 435 421 1.03:1
Checkbox.Fluent 663 641 1.03:1
BoxMinimalPerf.default 415 408 1.02:1
ChatMinimalPerf.default 678 662 1.02:1
EmbedMinimalPerf.default 4353 4282 1.02:1
HeaderMinimalPerf.default 426 416 1.02:1
ListMinimalPerf.default 561 549 1.02:1
ReactionMinimalPerf.default 455 448 1.02:1
SliderMinimalPerf.default 1587 1556 1.02:1
TextMinimalPerf.default 407 399 1.02:1
ToolbarMinimalPerf.default 1044 1028 1.02:1
VideoMinimalPerf.default 713 699 1.02:1
Button.Fluent 619 608 1.02:1
Dropdown.Fluent 3035 2987 1.02:1
Text.Fluent 390 383 1.02:1
AttachmentSlotsPerf.default 1269 1260 1.01:1
ButtonOverridesMissPerf.default 1738 1728 1.01:1
ButtonSlotsPerf.default 614 610 1.01:1
CardMinimalPerf.default 622 615 1.01:1
DropdownMinimalPerf.default 3025 3002 1.01:1
ImageMinimalPerf.default 441 436 1.01:1
ItemLayoutMinimalPerf.default 1333 1318 1.01:1
MenuMinimalPerf.default 941 928 1.01:1
SplitButtonMinimalPerf.default 3970 3912 1.01:1
TableManyItemsPerf.default 2210 2197 1.01:1
TreeMinimalPerf.default 863 854 1.01:1
Dialog.Fluent 833 825 1.01:1
DatepickerMinimalPerf.default 47580 47806 1:1
InputMinimalPerf.default 1294 1291 1:1
LayoutMinimalPerf.default 442 443 1:1
ListCommonPerf.default 707 706 1:1
ListNestedPerf.default 625 622 1:1
MenuButtonMinimalPerf.default 1678 1685 1:1
PopupMinimalPerf.default 719 718 1:1
StatusMinimalPerf.default 794 791 1:1
TextAreaMinimalPerf.default 542 540 1:1
Icon.Fluent 714 711 1:1
ButtonUseCssNestingPerf.default 1112 1128 0.99:1
DialogMinimalPerf.default 839 850 0.99:1
LoaderMinimalPerf.default 730 737 0.99:1
ProviderMergeThemesPerf.default 1518 1532 0.99:1
SegmentMinimalPerf.default 397 403 0.99:1
TooltipMinimalPerf.default 825 837 0.99:1
TreeWith60ListItems.default 194 195 0.99:1
AlertMinimalPerf.default 309 315 0.98:1
ButtonUseCssPerf.default 849 865 0.98:1
ChatDuplicateMessagesPerf.default 378 387 0.98:1
DropdownManyItemsPerf.default 761 779 0.98:1
ProviderMinimalPerf.default 917 934 0.98:1
CustomToolbarPrototype.default 3659 3734 0.98:1
Slider.Fluent 1546 1574 0.98:1
Tooltip.Fluent 556 565 0.98:1
RosterPerf.default 1175 1285 0.91:1
ButtonMinimalPerf.default 182 203 0.9:1
AccordionMinimalPerf.default 161 181 0.89:1

@layershifter
Copy link
Member Author

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@layershifter layershifter merged commit 1d7e4a8 into master Feb 24, 2021
@layershifter layershifter deleted the chore/rmakestyle-reexport-renderer branch February 24, 2021 14:01
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-menu@v0.6.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-text@v0.2.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-make-styles@v9.0.0-alpha.2 has been released which incorporates this pull request.:tada:

Handy links:

joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Mar 25, 2021
@layershifter @joshualamusga1
feat: add makeStaticStyles() to react-make-styles (microsoft#17157)
832fa2f 
* feat: add makeStaticStyles() to react-make-styles

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

@ling1726 ling1726 ling1726 approved these changes

Assignees

@joschect joschect

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@layershifter @fabricteam @msft-fluent-ui-bot @ling1726 @joschect