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

react-image - Updates styles from makeStylesCompat to makeStyles #17441

Merged
merged 2 commits into from
Mar 18, 2021
Merged

react-image - Updates styles from makeStylesCompat to makeStyles #17441

merged 2 commits into from
Mar 18, 2021

Conversation

bsunderhus
Copy link
Contributor

Pull request checklist

  • Include a change request file using $ yarn change

Description of changes

This PR is a refactoring from makeStylesCompat to makeStyles, see #17334 for more details.

@bsunderhus bsunderhus self-assigned this Mar 16, 2021
@bsunderhus bsunderhus mentioned this pull request Mar 16, 2021
Closed
18 tasks
@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 b8abcd3:

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

@size-auditor
Copy link

size-auditor bot commented Mar 16, 2021 •
edited
Loading

Asset size changes

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

Baseline commit: 8ece115f987e0a2d6440363b8f6b14e4092b2134 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 16, 2021 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1112 1139 5000
BaseButton mount 913 877 5000
Breadcrumb mount 43281 42828 5000
ButtonNext mount 1236 1188 5000
Checkbox mount 1523 1503 5000
CheckboxBase mount 1255 1275 5000
ChoiceGroup mount 4593 4611 5000
ComboBox mount 960 938 1000
CommandBar mount 9961 9981 1000
ContextualMenu mount 6114 6295 1000
DefaultButton mount 1066 1120 5000
DetailsRow mount 3692 3567 5000
DetailsRowFast mount 3615 3571 5000
DetailsRowNoStyles mount 3340 3331 5000
Dialog mount 1428 1471 1000
DocumentCardTitle mount 1830 1842 1000
Dropdown mount 3287 3187 5000
FocusTrapZone mount 1788 1760 5000
FocusZone mount 1758 1803 5000
IconButton mount 1724 1697 5000
Label mount 339 333 5000
Layer mount 1767 1757 5000
Link mount 469 450 5000
MakeStyles mount 1922 1968 50000
MenuButton mount 1424 1440 5000
MessageBar mount 2023 1934 5000
Nav mount 3155 3307 1000
OverflowSet mount 1011 988 5000
Panel mount 1406 1401 1000
Persona mount 810 851 1000
Pivot mount 1380 1330 1000
PrimaryButton mount 1262 1256 5000
Rating mount 7447 7394 5000
SearchBox mount 1236 1320 5000
Shimmer mount 2483 2491 5000
Slider mount 1935 1884 5000
SpinButton mount 4896 4912 5000
Spinner mount 404 414 5000
SplitButton mount 3085 3151 5000
Stack mount 493 473 5000
StackWithIntrinsicChildren mount 1468 1439 5000
StackWithTextChildren mount 4413 4399 5000
SwatchColorPicker mount 10126 9910 5000
Tabs mount 1423 1393 1000
TagPicker mount 2766 2720 5000
TeachingBubble mount 11534 11514 5000
Text mount 408 417 5000
TextField mount 1342 1376 5000
ThemeProvider mount 1162 1157 5000
ThemeProvider virtual-rerender 594 586 5000
ThemeProviderNext mount 15649 15797 5000
Toggle mount 783 796 5000
buttonNative mount 106 106 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.18 0.46 0.39:1 2000 358
🦄 Button.Fluent 0.11 0.2 0.55:1 5000 564
🔧 Checkbox.Fluent 0.64 0.35 1.83:1 1000 639
🎯 Dialog.Fluent 0.16 0.21 0.76:1 5000 798
🔧 Dropdown.Fluent 3.1 0.41 7.56:1 1000 3103
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 679
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 394
🔧 Slider.Fluent 1.57 0.43 3.65:1 1000 1570
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 382
🦄 Tooltip.Fluent 0.14 0.89 0.16:1 5000 696

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ChatDuplicateMessagesPerf.default 308 280 1.1:1
Avatar.Fluent 358 325 1.1:1
AlertMinimalPerf.default 326 298 1.09:1
AvatarMinimalPerf.default 213 197 1.08:1
CarouselMinimalPerf.default 507 476 1.07:1
ChatWithPopoverPerf.default 393 372 1.06:1
ButtonSlotsPerf.default 610 580 1.05:1
Text.Fluent 382 364 1.05:1
AttachmentSlotsPerf.default 1210 1169 1.04:1
CardMinimalPerf.default 598 576 1.04:1
ProviderMergeThemesPerf.default 1639 1579 1.04:1
TableMinimalPerf.default 442 425 1.04:1
TextMinimalPerf.default 379 366 1.04:1
DropdownManyItemsPerf.default 729 705 1.03:1
EmbedMinimalPerf.default 4218 4098 1.03:1
FlexMinimalPerf.default 318 309 1.03:1
ImageMinimalPerf.default 402 391 1.03:1
ItemLayoutMinimalPerf.default 1243 1205 1.03:1
ListNestedPerf.default 578 563 1.03:1
IconMinimalPerf.default 730 710 1.03:1
TableManyItemsPerf.default 2084 2023 1.03:1
TooltipMinimalPerf.default 963 937 1.03:1
Checkbox.Fluent 639 618 1.03:1
AnimationMinimalPerf.default 437 427 1.02:1
AttachmentMinimalPerf.default 164 160 1.02:1
ButtonUseCssNestingPerf.default 1078 1058 1.02:1
GridMinimalPerf.default 350 342 1.02:1
LayoutMinimalPerf.default 434 426 1.02:1
LoaderMinimalPerf.default 748 732 1.02:1
ProviderMinimalPerf.default 938 916 1.02:1
SkeletonMinimalPerf.default 380 371 1.02:1
SplitButtonMinimalPerf.default 3822 3741 1.02:1
CustomToolbarPrototype.default 3791 3699 1.02:1
TreeMinimalPerf.default 806 794 1.02:1
Dialog.Fluent 798 782 1.02:1
Image.Fluent 394 386 1.02:1
ButtonMinimalPerf.default 190 189 1.01:1
ListCommonPerf.default 646 639 1.01:1
MenuMinimalPerf.default 884 879 1.01:1
RadioGroupMinimalPerf.default 447 444 1.01:1
SegmentMinimalPerf.default 366 361 1.01:1
ToolbarMinimalPerf.default 972 964 1.01:1
Icon.Fluent 679 670 1.01:1
AccordionMinimalPerf.default 172 172 1:1
BoxMinimalPerf.default 372 372 1:1
ButtonUseCssPerf.default 811 811 1:1
ChatMinimalPerf.default 611 609 1:1
DatepickerMinimalPerf.default 45087 44962 1:1
DropdownMinimalPerf.default 3092 3087 1:1
SliderMinimalPerf.default 1548 1552 1:1
Tooltip.Fluent 696 699 1:1
ButtonOverridesMissPerf.default 1665 1680 0.99:1
CheckboxMinimalPerf.default 2803 2824 0.99:1
FormMinimalPerf.default 419 422 0.99:1
ListWith60ListItems.default 636 644 0.99:1
RosterPerf.default 1180 1187 0.99:1
PopupMinimalPerf.default 694 701 0.99:1
StatusMinimalPerf.default 733 738 0.99:1
VideoMinimalPerf.default 642 647 0.99:1
Button.Fluent 564 572 0.99:1
Dropdown.Fluent 3103 3126 0.99:1
DividerMinimalPerf.default 365 372 0.98:1
HeaderSlotsPerf.default 771 788 0.98:1
InputMinimalPerf.default 1272 1292 0.98:1
ListMinimalPerf.default 505 517 0.98:1
ReactionMinimalPerf.default 410 420 0.98:1
RefMinimalPerf.default 233 238 0.98:1
TreeWith60ListItems.default 175 179 0.98:1
Slider.Fluent 1570 1599 0.98:1
DialogMinimalPerf.default 781 804 0.97:1
HeaderMinimalPerf.default 369 379 0.97:1
LabelMinimalPerf.default 413 426 0.97:1
MenuButtonMinimalPerf.default 1560 1604 0.97:1
TextAreaMinimalPerf.default 488 511 0.95:1
PortalMinimalPerf.default 168 179 0.94:1

@layershifter
Copy link
Member

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@layershifter layershifter reopened this Mar 18, 2021
@layershifter layershifter merged commit 5c9a326 into master Mar 18, 2021
@layershifter layershifter deleted the bsunderhus/update-make-styles-react-image branch March 18, 2021 21:12
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] 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
@bsunderhus @joshualamusga1
react-image - Updates styles from makeStylesCompat to makeStyles (mic…
6872b89 
…rosoft#17441)

* react-image - Updates styles from makeStylesCompat to makeStyles

* Change files
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@bsunderhus @miroslavstastny
react-image - Updates styles from makeStylesCompat to makeStyles (mic…
f599833 
…rosoft#17441)

* react-image - Updates styles from makeStylesCompat to makeStyles

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

@layershifter layershifter layershifter approved these changes

@kubkon kubkon Awaiting requested review from kubkon

Assignees

@bsunderhus bsunderhus

Labels
Component: Image
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@bsunderhus @fabricteam @layershifter @msft-fluent-ui-bot