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

Move v8 ResizeGroup changes from react-next to react #15401

Merged
merged 7 commits into from
Oct 7, 2020

Conversation

ecraig12345
Copy link
Member

@ecraig12345 ecraig12345 commented Oct 7, 2020

Pull request checklist

Description of changes

Moving ResizeGroup function component conversion from #13013 and other v8 changes from react-next back to react-internal.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 7, 2020

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 8593ed8:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Oct 7, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 823 828 5000
BaseButton mount 904 872 5000
Breadcrumb mount 155045 155671 5000
ButtonNext mount 545 543 5000
Checkbox mount 1478 1463 5000
CheckboxBase mount 1216 1239 5000
CheckboxNext mount 1484 1465 5000
ChoiceGroup mount 4515 4599 5000
ComboBox mount 920 896 1000
CommandBar mount 21399 21063 1000
ContextualMenu mount 13244 13367 1000
DefaultButton mount 1109 1103 5000
DetailsRow mount 3521 3508 5000
DetailsRowFast mount 3529 3563 5000
DetailsRowNoStyles mount 3292 3422 5000
Dialog mount 1465 1466 1000
DocumentCardTitle mount 1801 1773 1000
Dropdown mount 2455 2432 5000
FocusTrapZone mount 1680 1658 5000
FocusTrapZoneNext mount 1750 1732 5000
FocusZone mount 1785 1784 5000
IconButton mount 1708 1681 5000
Label mount 325 335 5000
Layer mount 1864 1862 5000
LayerNext mount 1808 1807 5000
Link mount 448 470 5000
LinkNext mount 444 443 5000
MenuButton mount 1460 1464 5000
MessageBar mount 1953 2021 5000
Nav mount 3087 3168 1000
OverflowSet mount 1348 1344 5000
OverflowSetNext mount 1000 1014 5000
Panel mount 1416 1419 1000
Persona mount 833 817 1000
Pivot mount 1356 1391 1000
PivotNext mount 1358 1349 1000
PrimaryButton mount 1253 1236 5000
Rating mount 7226 7322 5000
SearchBox mount 1272 1284 5000
Shimmer mount 2526 2519 5000
ShimmerNext mount 2448 2448 5000
Slider mount 1847 1838 5000
SliderNext mount 1877 1890 5000
SpinButton mount 4829 4867 5000
SpinButtonNext mount 4898 4999 5000
Spinner mount 416 425 5000
SplitButton mount 3069 3114 5000
Stack mount 522 514 5000
StackWithIntrinsicChildren mount 1845 1831 5000
StackWithTextChildren mount 4784 4783 5000
SwatchColorPicker mount 9922 9967 5000
TagPicker mount 2657 2664 5000
TeachingBubble mount 49570 48976 5000
TeachingBubbleNext mount 11479 11394 5000
Text mount 443 409 5000
TextField mount 1327 1315 5000
ThemeProvider mount 1908 1832 5000
ThemeProvider virtual-rerender 620 633 5000
Toggle mount 797 773 5000
ToggleNext mount 775 814 5000
button mount 122 124 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.44 0.49 0.9:1 2000 876
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 574
🔧 Checkbox.Fluent 0.63 0.33 1.91:1 1000 631
🎯 Dialog.Fluent 0.16 0.21 0.76:1 5000 787
🔧 Dropdown.Fluent 2.9 0.46 6.3:1 1000 2901
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 726
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 402
🔧 Slider.Fluent 1.55 0.43 3.6:1 1000 1548
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 366
🦄 Tooltip.Fluent 0.11 16.03 0.01:1 5000 566

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 213 192 1.11:1
GridMinimalPerf.default 361 339 1.06:1
TableMinimalPerf.default 426 402 1.06:1
AvatarMinimalPerf.default 475 451 1.05:1
DividerMinimalPerf.default 378 360 1.05:1
FormMinimalPerf.default 428 408 1.05:1
HeaderSlotsPerf.default 797 756 1.05:1
RadioGroupMinimalPerf.default 449 428 1.05:1
IconMinimalPerf.default 670 640 1.05:1
TextMinimalPerf.default 372 353 1.05:1
AlertMinimalPerf.default 304 292 1.04:1
AnimationMinimalPerf.default 423 407 1.04:1
CarouselMinimalPerf.default 456 440 1.04:1
LabelMinimalPerf.default 432 417 1.04:1
PortalMinimalPerf.default 163 157 1.04:1
SegmentMinimalPerf.default 365 350 1.04:1
Icon.Fluent 726 701 1.04:1
Image.Fluent 402 388 1.04:1
AttachmentSlotsPerf.default 1133 1096 1.03:1
BoxMinimalPerf.default 365 355 1.03:1
ButtonSlotsPerf.default 601 584 1.03:1
CardMinimalPerf.default 575 558 1.03:1
LayoutMinimalPerf.default 417 405 1.03:1
AccordionMinimalPerf.default 161 158 1.02:1
ButtonMinimalPerf.default 182 179 1.02:1
ListMinimalPerf.default 490 482 1.02:1
ListWith60ListItems.default 933 917 1.02:1
MenuMinimalPerf.default 851 837 1.02:1
ReactionMinimalPerf.default 401 394 1.02:1
SkeletonMinimalPerf.default 422 414 1.02:1
Button.Fluent 574 560 1.02:1
Text.Fluent 366 358 1.02:1
Tooltip.Fluent 566 557 1.02:1
ButtonUseCssPerf.default 806 800 1.01:1
CheckboxMinimalPerf.default 2824 2789 1.01:1
ItemLayoutMinimalPerf.default 1260 1249 1.01:1
ProviderMinimalPerf.default 984 977 1.01:1
SliderMinimalPerf.default 1554 1539 1.01:1
SplitButtonMinimalPerf.default 3691 3663 1.01:1
TableManyItemsPerf.default 2133 2114 1.01:1
TextAreaMinimalPerf.default 476 469 1.01:1
CustomToolbarPrototype.default 3845 3812 1.01:1
ToolbarMinimalPerf.default 949 941 1.01:1
TreeMinimalPerf.default 875 865 1.01:1
Avatar.Fluent 876 869 1.01:1
Checkbox.Fluent 631 625 1.01:1
Dialog.Fluent 787 781 1.01:1
ChatMinimalPerf.default 618 615 1:1
DialogMinimalPerf.default 778 779 1:1
DropdownMinimalPerf.default 2873 2874 1:1
InputMinimalPerf.default 1273 1279 1:1
MenuButtonMinimalPerf.default 1533 1531 1:1
TooltipMinimalPerf.default 805 803 1:1
Dropdown.Fluent 2901 2911 1:1
AttachmentMinimalPerf.default 158 159 0.99:1
ButtonOverridesMissPerf.default 1662 1672 0.99:1
ButtonUseCssNestingPerf.default 1061 1069 0.99:1
ChatDuplicateMessagesPerf.default 415 418 0.99:1
ChatWithPopoverPerf.default 450 453 0.99:1
DropdownManyItemsPerf.default 739 747 0.99:1
EmbedMinimalPerf.default 1855 1879 0.99:1
ListNestedPerf.default 562 567 0.99:1
LoaderMinimalPerf.default 729 740 0.99:1
PopupMinimalPerf.default 687 695 0.99:1
ProviderMergeThemesPerf.default 2032 2047 0.99:1
FlexMinimalPerf.default 291 296 0.98:1
HeaderMinimalPerf.default 365 374 0.98:1
ImageMinimalPerf.default 385 391 0.98:1
ListCommonPerf.default 641 653 0.98:1
StatusMinimalPerf.default 708 719 0.98:1
VideoMinimalPerf.default 627 643 0.98:1
Slider.Fluent 1548 1579 0.98:1
RefMinimalPerf.default 230 241 0.95:1

@size-auditor
Copy link

size-auditor bot commented Oct 7, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-next-ContextualMenu 142.603 kB 142.628 kB ExceedsBaseline     25 bytes
office-ui-fabric-react fluentui-react-next-SelectedItemsList 267.149 kB 267.174 kB ExceedsBaseline     25 bytes
office-ui-fabric-react fluentui-react-next-Dropdown 235.613 kB 235.633 kB ExceedsBaseline     20 bytes
office-ui-fabric-react fluentui-react-Breadcrumb 190.557 kB 190.551 kB BelowBaseline     -6 bytes
office-ui-fabric-react fluentui-react-CommandBar 193.314 kB 193.304 kB BelowBaseline     -10 bytes
office-ui-fabric-react fluentui-react-ResizeGroup 18.077 kB 13.674 kB BelowBaseline     -4.403 kB
office-ui-fabric-react fluentui-react-next-ResizeGroup 13.898 kB  Deleted       BelowBaseline     -13.898 kB

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 1eff0e0d24d99c9feaf5b4dc9e7d6d1763e19498 (build)

# Conflicts:
#	packages/react-examples/src/react/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot
@ecraig12345
Copy link
Member Author

/azp run

@azure-pipelines
Copy link

No pipelines are associated with this pull request.

@ecraig12345
Copy link
Member Author

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@ecraig12345 ecraig12345 merged commit 4ccb258 into microsoft:master Oct 7, 2020
@ecraig12345 ecraig12345 deleted the move-resizegroup branch October 7, 2020 23:46
@Gerhut
Copy link
Member

Gerhut commented Oct 13, 2020

Will this PR be merged into 7.0 and publish to npm as 8.0.0-alpha version? The current version (7.0 branch) is breaking the SSR. https://github.com/microsoft/fluentui/blob/7.0/packages/office-ui-fabric-react/src/utilities/hooks/useResponsiveMode.tsx#L18

@ecraig12345
Copy link
Member Author

@Gerhut Generally at this point we're not planning to port version 8 changes from master to 7, since we're going to start publishing @fluentui/react@8.0.0-beta out of master next week. Though if you really need the change sooner it could potentially be cherry-picked.

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

Successfully merging this pull request may close these issues.

5 participants