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

Persona: Move persona to react-internal #15386

Merged
merged 6 commits into from
Oct 7, 2020

Conversation

joschect
Copy link
Contributor

@joschect joschect commented Oct 6, 2020

Pull request checklist

Description of changes

Moving function component conversion changes from #13645 back to the main package.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 6, 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 e27c4a3:

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 6, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 869 912 5000
BaseButton mount 988 992 5000
Breadcrumb mount 42617 42286 5000
ButtonNext mount 584 596 5000
Checkbox mount 1656 1622 5000
CheckboxBase mount 1356 1359 5000
CheckboxNext mount 1646 1685 5000
ChoiceGroup mount 5343 5233 5000
ChoiceGroupNext mount 9905 9942 5000
ComboBox mount 975 945 1000
CommandBar mount 7870 7885 1000
ContextualMenu mount 13083 13697 1000
DefaultButton mount 1218 1207 5000
DetailsRow mount 3876 3829 5000
DetailsRowFast mount 3835 3873 5000
DetailsRowNoStyles mount 3734 3750 5000
Dialog mount 1570 1558 1000
DocumentCardTitle mount 1835 1867 1000
Dropdown mount 2711 2787 5000
FocusTrapZone mount 1760 1729 5000
FocusTrapZoneNext mount 1866 1908 5000
FocusZone mount 1826 1856 5000
IconButton mount 1910 1964 5000
Label mount 346 355 5000
Layer mount 2026 2030 5000
LayerNext mount 2010 2028 5000
Link mount 502 498 5000
LinkNext mount 491 495 5000
MenuButton mount 1609 1616 5000
MessageBar mount 2162 2187 5000
MessageBarNext mount 2079 2101 5000
Nav mount 3476 3455 1000
OverflowSet mount 1473 1493 5000
OverflowSetNext mount 1138 1084 5000
Panel mount 1540 1534 1000
Persona mount 877 935 1000
Pivot mount 1540 1493 1000
PivotNext mount 1489 1464 1000
PrimaryButton mount 1402 1369 5000
Rating mount 8185 8127 5000
RatingNext mount 8052 8118 5000
SearchBox mount 1331 1386 5000
SearchBoxNext mount 1407 1418 5000
Shimmer mount 2786 2809 5000
ShimmerNext mount 2809 2744 5000
Slider mount 1995 2036 5000
SliderNext mount 2051 2054 5000
SpinButton mount 5331 5323 5000
SpinButtonNext mount 5328 5361 5000
Spinner mount 429 428 5000
SplitButton mount 3353 3406 5000
Stack mount 572 558 5000
StackWithIntrinsicChildren mount 2143 2133 5000
StackWithTextChildren mount 5494 5402 5000
SwatchColorPicker mount 11051 10918 5000
SwatchColorPickerNext mount 10928 10937 5000
TagPicker mount 2875 2890 5000
TeachingBubble mount 51983 51367 5000
TeachingBubbleNext mount 11958 11824 5000
Text mount 460 450 5000
TextField mount 1405 1485 5000
ThemeProvider mount 1699 1679 5000
ThemeProvider virtual-rerender 636 631 5000
Toggle mount 855 827 5000
ToggleNext mount 870 845 5000
button mount 114 122 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.5 0.55 0.91:1 2000 996
🦄 Button.Fluent 0.13 0.21 0.62:1 5000 633
🔧 Checkbox.Fluent 0.7 0.38 1.84:1 1000 703
🎯 Dialog.Fluent 0.18 0.23 0.78:1 5000 884
🔧 Dropdown.Fluent 3.09 0.49 6.31:1 1000 3093
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 781
🦄 Image.Fluent 0.09 0.14 0.64:1 5000 445
🔧 Slider.Fluent 1.67 0.46 3.63:1 1000 1672
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 421
🦄 Tooltip.Fluent 0.12 15.98 0.01:1 5000 611

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AlertMinimalPerf.default 374 333 1.12:1
BoxMinimalPerf.default 439 397 1.11:1
DividerMinimalPerf.default 457 417 1.1:1
TextAreaMinimalPerf.default 613 561 1.09:1
ButtonMinimalPerf.default 214 198 1.08:1
PortalMinimalPerf.default 180 167 1.08:1
SegmentMinimalPerf.default 420 392 1.07:1
AnimationMinimalPerf.default 462 437 1.06:1
ImageMinimalPerf.default 463 435 1.06:1
SkeletonMinimalPerf.default 502 473 1.06:1
VideoMinimalPerf.default 733 692 1.06:1
AttachmentMinimalPerf.default 197 187 1.05:1
ButtonUseCssNestingPerf.default 1198 1140 1.05:1
AvatarMinimalPerf.default 530 510 1.04:1
FormMinimalPerf.default 498 478 1.04:1
InputMinimalPerf.default 1411 1356 1.04:1
ListMinimalPerf.default 574 554 1.04:1
ListWith60ListItems.default 1038 1000 1.04:1
ReactionMinimalPerf.default 467 448 1.04:1
RefMinimalPerf.default 264 255 1.04:1
Image.Fluent 445 427 1.04:1
DialogMinimalPerf.default 908 882 1.03:1
HeaderSlotsPerf.default 904 874 1.03:1
ItemLayoutMinimalPerf.default 1446 1406 1.03:1
ListCommonPerf.default 754 733 1.03:1
LoaderMinimalPerf.default 800 776 1.03:1
RadioGroupMinimalPerf.default 506 491 1.03:1
ToolbarMinimalPerf.default 1091 1062 1.03:1
Dialog.Fluent 884 862 1.03:1
AttachmentSlotsPerf.default 1237 1216 1.02:1
ButtonUseCssPerf.default 917 896 1.02:1
CarouselMinimalPerf.default 502 493 1.02:1
ChatDuplicateMessagesPerf.default 462 454 1.02:1
EmbedMinimalPerf.default 2143 2104 1.02:1
FlexMinimalPerf.default 351 343 1.02:1
MenuMinimalPerf.default 975 957 1.02:1
ProviderMergeThemesPerf.default 2136 2103 1.02:1
TableMinimalPerf.default 483 472 1.02:1
TextMinimalPerf.default 419 411 1.02:1
TooltipMinimalPerf.default 915 900 1.02:1
Checkbox.Fluent 703 688 1.02:1
Slider.Fluent 1672 1635 1.02:1
Text.Fluent 421 411 1.02:1
ButtonOverridesMissPerf.default 1849 1836 1.01:1
ButtonSlotsPerf.default 644 638 1.01:1
PopupMinimalPerf.default 753 744 1.01:1
SplitButtonMinimalPerf.default 4098 4058 1.01:1
CustomToolbarPrototype.default 4187 4166 1.01:1
TreeMinimalPerf.default 1026 1016 1.01:1
Avatar.Fluent 996 982 1.01:1
Button.Fluent 633 627 1.01:1
Dropdown.Fluent 3093 3070 1.01:1
ChatMinimalPerf.default 687 688 1:1
CheckboxMinimalPerf.default 3075 3078 1:1
LabelMinimalPerf.default 480 479 1:1
LayoutMinimalPerf.default 466 465 1:1
ListNestedPerf.default 673 673 1:1
MenuButtonMinimalPerf.default 1728 1723 1:1
DropdownManyItemsPerf.default 831 842 0.99:1
HeaderMinimalPerf.default 426 430 0.99:1
ProviderMinimalPerf.default 1095 1103 0.99:1
SliderMinimalPerf.default 1749 1771 0.99:1
Tooltip.Fluent 611 620 0.99:1
DropdownMinimalPerf.default 3074 3138 0.98:1
StatusMinimalPerf.default 821 834 0.98:1
TableManyItemsPerf.default 2509 2561 0.98:1
ChatWithPopoverPerf.default 510 526 0.97:1
Icon.Fluent 781 803 0.97:1
CardMinimalPerf.default 635 663 0.96:1
IconMinimalPerf.default 765 797 0.96:1
TreeWith60ListItems.default 217 225 0.96:1
GridMinimalPerf.default 393 416 0.94:1
AccordionMinimalPerf.default 172 184 0.93:1

@joschect joschect closed this Oct 6, 2020
@joschect joschect reopened this Oct 6, 2020
@joschect joschect requested review from ecraig12345, dzearing and Markionium and removed request for ecraig12345 and dzearing October 6, 2020 22:16
@size-auditor
Copy link

size-auditor bot commented Oct 6, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-next-FloatingPicker 242.672 kB 242.67 kB BelowBaseline     -2 bytes
office-ui-fabric-react fluentui-react-PersonaPresence 53.915 kB 53.779 kB BelowBaseline     -136 bytes
office-ui-fabric-react fluentui-react-ActivityItem 66.796 kB 66.343 kB BelowBaseline     -453 bytes
office-ui-fabric-react fluentui-react-DocumentCard 206.504 kB 206.051 kB BelowBaseline     -453 bytes
office-ui-fabric-react fluentui-react-Facepile 201.675 kB 200.788 kB BelowBaseline     -887 bytes
office-ui-fabric-react fluentui-react-FloatingPicker 231.383 kB 230.496 kB BelowBaseline     -887 bytes
office-ui-fabric-react fluentui-react-Persona 110.597 kB 109.71 kB BelowBaseline     -887 bytes
office-ui-fabric-react fluentui-react-PersonaCoin 110.597 kB 109.71 kB BelowBaseline     -887 bytes
office-ui-fabric-react fluentui-react-Pickers 274.534 kB 273.647 kB BelowBaseline     -887 bytes
office-ui-fabric-react fluentui-react-SelectedItemsList 220.838 kB 219.951 kB BelowBaseline     -887 bytes
office-ui-fabric-react fluentui-react-next-Persona 109.762 kB  Deleted       BelowBaseline     -109.762 kB

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

Baseline commit: 02a94bd839b1b96f4b86bccdddd50cc8973ce3e0 (build)

Copy link
Member

@ecraig12345 ecraig12345 left a comment

Choose a reason for hiding this comment

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

Mostly looks good but can you also update the examples?

Usually what I've been doing is:

  1. Delete react-examples/src/react/ComponentName
  2. Move react-examples/src/react-next/ComponentName to the path in 1
  3. Look at the changes and see if there are any real changes which need to be preserved.
    • Any files with just import path changes can be reverted
    • All changes under docs should be ignored (the react version is authoritative)
    • In any files with real changes, be sure to update the imports to be from react not react-next.

You'll probably also need to run update-snapshots in react-internal and react-examples.

Copy link
Member

@ecraig12345 ecraig12345 left a comment

Choose a reason for hiding this comment

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

I went ahead and removed the examples to keep things moving, so this should be good to go now.

@ecraig12345 ecraig12345 merged commit 8677503 into microsoft:master Oct 7, 2020
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.

4 participants