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

Moving OverflowSet to @fluentui/react-internal package #15389

Merged
merged 13 commits into from
Oct 10, 2020

Conversation

czearing
Copy link
Collaborator

@czearing czearing commented Oct 6, 2020

Pull request checklist

Description of changes

  1. Moving OverflowSet from react-next to react-internal (including function component conversion from Updating OverflowSet to a function component inside React-Next #13077).
  2. Updating imports for OverflowSet in react-internal.
  3. Updating the top level files in react-next to reference @fluentui/react/lib/OverflowSet.
  4. Deleting perf and vr tests for OverflowSetNext.
  5. Deleting react-next examples for OverflowSet.

@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 a1e715c:

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 860 846 5000
BaseButton mount 945 922 5000
Breadcrumb mount 158294 161285 5000
ButtonNext mount 549 575 5000
Checkbox mount 1539 1550 5000
CheckboxBase mount 1227 1269 5000
CheckboxNext mount 1494 1499 5000
ChoiceGroup mount 4623 4641 5000
ComboBox mount 910 956 1000
CommandBar mount 21998 22030 1000
ContextualMenu mount 5741 5779 1000
DefaultButton mount 1146 1122 5000
DetailsRow mount 3560 3702 5000
DetailsRowFast mount 3760 3639 5000
DetailsRowNoStyles mount 3488 3479 5000
Dialog mount 1528 1526 1000
DocumentCardTitle mount 1874 1829 1000
Dropdown mount 2609 2556 5000
FocusTrapZone mount 1773 1762 5000
FocusTrapZoneNext mount 1829 1845 5000
FocusZone mount 1877 1855 5000
IconButton mount 1823 1779 5000
Label mount 352 347 5000
Layer mount 1920 1929 5000
LayerNext mount 1941 1887 5000
Link mount 470 469 5000
LinkNext mount 454 488 5000
MenuButton mount 1492 1476 5000
MessageBar mount 2029 2046 5000
Nav mount 3248 3283 1000
OverflowSet mount 1430 1047 5000
Panel mount 1461 1474 1000
Persona mount 866 861 1000
Pivot mount 1385 1413 1000
PivotNext mount 1390 1412 1000
PrimaryButton mount 1291 1280 5000
Rating mount 7522 7418 5000
SearchBox mount 1328 1302 5000
Shimmer mount 2541 2503 5000
Slider mount 1958 1916 5000
SliderNext mount 1924 1974 5000
SpinButton mount 5156 5202 5000
Spinner mount 423 438 5000
SplitButton mount 3167 3196 5000
Stack mount 542 510 5000
StackWithIntrinsicChildren mount 1839 1844 5000
StackWithTextChildren mount 4940 4819 5000
SwatchColorPicker mount 10133 10257 5000
TagPicker mount 2700 2797 5000
TeachingBubble mount 50695 51582 5000
Text mount 417 421 5000
TextField mount 1358 1391 5000
ThemeProvider mount 1952 1930 5000
ThemeProvider virtual-rerender 625 637 5000
Toggle mount 799 807 5000
ToggleNext mount 806 795 5000
button mount 125 132 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.45 0.51 0.88:1 2000 892
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 587
🔧 Checkbox.Fluent 0.66 0.34 1.94:1 1000 662
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 827
🔧 Dropdown.Fluent 3 0.47 6.38:1 1000 2995
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 736
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 405
🔧 Slider.Fluent 1.59 0.44 3.61:1 1000 1587
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 381
🦄 Tooltip.Fluent 0.12 9.37 0.01:1 5000 585

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 169 160 1.06:1
DividerMinimalPerf.default 406 388 1.05:1
ItemLayoutMinimalPerf.default 1318 1264 1.04:1
Button.Fluent 587 567 1.04:1
AlertMinimalPerf.default 320 312 1.03:1
AnimationMinimalPerf.default 423 412 1.03:1
ButtonSlotsPerf.default 623 603 1.03:1
GridMinimalPerf.default 371 359 1.03:1
MenuButtonMinimalPerf.default 1603 1555 1.03:1
SkeletonMinimalPerf.default 442 431 1.03:1
TextAreaMinimalPerf.default 486 474 1.03:1
AttachmentSlotsPerf.default 1172 1149 1.02:1
ButtonOverridesMissPerf.default 1728 1690 1.02:1
CarouselMinimalPerf.default 457 446 1.02:1
ChatMinimalPerf.default 637 624 1.02:1
HeaderMinimalPerf.default 383 376 1.02:1
ImageMinimalPerf.default 425 415 1.02:1
LabelMinimalPerf.default 436 429 1.02:1
ListWith60ListItems.default 962 944 1.02:1
PortalMinimalPerf.default 177 173 1.02:1
TooltipMinimalPerf.default 828 811 1.02:1
TreeWith60ListItems.default 209 204 1.02:1
Dialog.Fluent 827 812 1.02:1
Icon.Fluent 736 725 1.02:1
ChatDuplicateMessagesPerf.default 446 442 1.01:1
ListMinimalPerf.default 506 502 1.01:1
ListNestedPerf.default 565 560 1.01:1
LoaderMinimalPerf.default 764 755 1.01:1
ProviderMinimalPerf.default 1026 1019 1.01:1
TableManyItemsPerf.default 2209 2197 1.01:1
CustomToolbarPrototype.default 3902 3880 1.01:1
Dropdown.Fluent 2995 2963 1.01:1
Slider.Fluent 1587 1567 1.01:1
Tooltip.Fluent 585 579 1.01:1
ButtonMinimalPerf.default 183 183 1:1
DropdownMinimalPerf.default 2967 2961 1:1
FlexMinimalPerf.default 313 313 1:1
HeaderSlotsPerf.default 804 808 1:1
InputMinimalPerf.default 1324 1321 1:1
ListCommonPerf.default 665 662 1:1
ProviderMergeThemesPerf.default 2123 2131 1:1
SegmentMinimalPerf.default 375 374 1:1
SliderMinimalPerf.default 1584 1584 1:1
SplitButtonMinimalPerf.default 3738 3738 1:1
IconMinimalPerf.default 699 696 1:1
ToolbarMinimalPerf.default 969 969 1:1
Avatar.Fluent 892 895 1:1
Checkbox.Fluent 662 660 1:1
Image.Fluent 405 405 1:1
Text.Fluent 381 381 1:1
BoxMinimalPerf.default 382 385 0.99:1
CheckboxMinimalPerf.default 2845 2876 0.99:1
EmbedMinimalPerf.default 1917 1933 0.99:1
PopupMinimalPerf.default 701 707 0.99:1
RadioGroupMinimalPerf.default 452 457 0.99:1
TextMinimalPerf.default 369 371 0.99:1
ButtonUseCssPerf.default 834 851 0.98:1
ChatWithPopoverPerf.default 459 466 0.98:1
DropdownManyItemsPerf.default 748 764 0.98:1
TreeMinimalPerf.default 871 891 0.98:1
AvatarMinimalPerf.default 484 500 0.97:1
ButtonUseCssNestingPerf.default 1086 1118 0.97:1
FormMinimalPerf.default 426 439 0.97:1
LayoutMinimalPerf.default 420 431 0.97:1
MenuMinimalPerf.default 877 902 0.97:1
ReactionMinimalPerf.default 414 427 0.97:1
StatusMinimalPerf.default 721 742 0.97:1
TableMinimalPerf.default 421 433 0.97:1
AttachmentMinimalPerf.default 171 178 0.96:1
DialogMinimalPerf.default 804 836 0.96:1
CardMinimalPerf.default 560 587 0.95:1
VideoMinimalPerf.default 651 688 0.95:1
RefMinimalPerf.default 246 261 0.94:1

@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-CommandBar 192.592 kB 191.426 kB BelowBaseline     -1.166 kB
office-ui-fabric-react fluentui-react-OverflowSet 50.417 kB 29.364 kB BelowBaseline     -21.053 kB
office-ui-fabric-react fluentui-react-next-OverflowSet 29.667 kB  Deleted       BelowBaseline     -29.667 kB

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

Baseline commit: 1e626b101db22df0f12bf04f42be6e94c1c5fdcb (build)

@ecraig12345
Copy link
Member

Looks like this will require some updates in the charting package to use new props.

…eat/react-internal-overflowset

# Conflicts:
#	packages/react-next/etc/react-next.api.md
@czearing czearing requested a review from Raghurk as a code owner October 7, 2020 21:24
@@ -827,10 +824,11 @@ exports[`Component Examples renders CommandBar.Basic.Example.tsx correctly 1`] =
</div>
<div
className=
ms-OverflowSet-overflowButton
ms-CommandBar-primaryCommand
Copy link
Member

Choose a reason for hiding this comment

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

Do you know why this class name change happened?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Thanks for catching this! getNativeProps was placed incorrectly in the wrapper div and was not applying the className properly.

Copy link
Member

Choose a reason for hiding this comment

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

Nice to see the snapshot tests being useful! :)

Copy link
Member

Choose a reason for hiding this comment

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

Hmm original question still stands though--why did the class name change (even after the update to native props location)?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I updated the pr and it should be good now. The snapshot change was due to ButtonGrid applying {...props} after the classNames and then applying and overwriting them.

The remaining snapshot changes for VerticalBarChart,AreaChart, OverflowSet, and ReizeGroup are due to the FocusZone removal from OverflowSet and id updates:

@czearing czearing closed this Oct 8, 2020
@czearing czearing reopened this Oct 8, 2020
@@ -197,11 +197,6 @@ export class AreaChartMultipleExample extends React.Component<{}, IAreaChartBasi
legendsOverflowText={'Overflow Items'}
yAxisTickFormat={d3.format('$,')}
legendProps={{
Copy link
Member

Choose a reason for hiding this comment

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

Just to confirm, did you check out these examples to verify that they still work as before (even without the FocusZone)? You can compare with the PR deploy site of charting in master. http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/master/

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I don't see any behavior changes in the Charting components after the FocusZone removal.

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.

Thanks for all the work on this! I'm going to push an update removing the scss file and then merge it.

@@ -1,4 +1,4 @@
@import '../../common/common';
@import '~@fluentui/common-styles/dist/sass/common';
Copy link
Member

Choose a reason for hiding this comment

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

I think we can delete this file--I don't see any references to it

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

None yet

4 participants