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

chore: update Popper to v2 #12530

Merged
merged 7 commits into from
Apr 15, 2020
Merged

chore: update Popper to v2 #12530

merged 7 commits into from
Apr 15, 2020

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Apr 3, 2020

Pull request checklist

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

BREAKING CHANGES

All changes are related to all components that consume Popper.

offset can't be specified as string anymore

Previous implementation based on strings was complicated as for RTL support it required to parse strings. V2 changed this behavior and accepts a tuple or a function.

<>
  <Popup offset={[20, 20]} />
  <Popup
    offset={({ placement, reference, popper }) => {
      if (placement === "bottom") {
        return [0, popper.height / 2];
      } else {
        return [];
      }
    }}
  />
</>

The same options can be used for consumers:

<MenuItem menu={{ items: [1, 2, 3], offset: [20, 20] }} />

Before

<>
  <Popup offset="50px" />
  <Popup offset="-100%p" />
</>

After

<>
  <Popup offset={[50, 0]} />
  <Popup offset={({ popper }) => [-popper.width, 0]} />
</>

Browser support

Additional polyfills are required for IE11:

  • Array.prototype.find
  • Promise
  • Object.assign

More details: https://popper.js.org/docs/v2/browser-support/


This PR upgrades Popper's version to V2, detailed announcement. Key improvements:

Caveats 👀

padding

As V2 doesn't allow to use margins anymore , we had to use padding (thanks to @pompomon) to set an offset when Popup/Tooltip has a pointing beak. However, this means that our handing of clicks inside Popup/Tooltip content should be moved to content slot, that's why I introduced pointerEvents properties there.

image

Follow ups 💅

  • do not recreate Popper's instance as update() is support in V2
  • try to avoid useDeepMemo() hook
Microsoft Reviewers: Open in CodeFlow

@size-auditor
Copy link

size-auditor bot commented Apr 3, 2020

Asset size changes

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

Baseline commit: 68e3c8edb99faedd36069bd1911c10e9e28d80a2 (build)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Apr 3, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 856 850 5000
Checkbox 1824 1891 5000
CheckboxBase 1504 1438 5000
ChoiceGroup 5300 5296 5000
ComboBox 946 1001 1000
CommandBar 6939 6948 1000
DefaultButton 1057 1018 5000
DetailsRow 3295 3318 5000
DetailsRow (fast icons) 3401 3435 5000
DetailsRow without styles 3067 3070 5000
Dialog 1416 1459 1000
DocumentCardTitle with truncation 1483 1460 1000
Dropdown 2897 3206 5000
FocusZone 1501 1538 5000
IconButton 1660 1656 5000
Label 523 492 5000
Link 462 428 5000
MenuButton 1362 1381 5000
Nav 3109 2961 1000
Panel 1455 1325 1000
Persona 780 782 1000
Pivot 1267 1213 1000
PrimaryButton 1190 1172 5000
SearchBox 1512 1459 5000
Slider 1873 1809 5000
Spinner 364 366 5000
SplitButton 2886 2941 5000
Stack 451 470 5000
Stack with Intrinsic children 1066 1072 5000
Stack with Text children 4065 4019 5000
TagPicker 2680 2574 5000
Text 377 351 5000
TextField 1740 1676 5000
Toggle 866 821 5000
button 50 64 5000

Perf Analysis (Fluent)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ChatWithPopoverPerf.default 568 556 1.02:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.5 0.49 1.02:1 2000 997
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 553
🔧 Checkbox.Fluent 0.61 0.41 1.49:1 1000 609
🔧 Dialog.Fluent 0.34 0.2 1.7:1 5000 1710
🔧 Dropdown.Fluent 3.09 0.47 6.57:1 1000 3089
🔧 Icon.Fluent 0.13 0.05 2.6:1 5000 672
🎯 Image.Fluent 0.08 0.1 0.8:1 5000 395
🔧 Slider.Fluent 1.27 0.42 3.02:1 1000 1274
🔧 Text.Fluent 0.08 0.02 4:1 5000 389
🦄 Tooltip.Fluent 0.08 13.52 0.01:1 5000 421

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
HeaderMinimalPerf.default 519 482 1.08:1
ListMinimalPerf.default 525 485 1.08:1
TableMinimalPerf.default 591 547 1.08:1
TextMinimalPerf.default 390 362 1.08:1
Text.Fluent 389 365 1.07:1
ListCommonPerf.default 1085 1023 1.06:1
PortalMinimalPerf.default 311 293 1.06:1
TreeMinimalPerf.default 1225 1160 1.06:1
ButtonMinimalPerf.default 160 152 1.05:1
LabelMinimalPerf.default 448 425 1.05:1
MenuMinimalPerf.default 1801 1719 1.05:1
PopupMinimalPerf.default 255 243 1.05:1
TreeWith60ListItems.default 215 204 1.05:1
AvatarMinimalPerf.default 518 496 1.04:1
DividerMinimalPerf.default 759 730 1.04:1
SegmentMinimalPerf.default 938 904 1.04:1
StatusMinimalPerf.default 729 701 1.04:1
Avatar.Fluent 997 962 1.04:1
AnimationMinimalPerf.default 676 658 1.03:1
AttachmentMinimalPerf.default 145 141 1.03:1
ListNestedPerf.default 925 894 1.03:1
IconMinimalPerf.default 714 692 1.03:1
Button.Fluent 553 537 1.03:1
AccordionMinimalPerf.default 207 203 1.02:1
AttachmentSlotsPerf.default 1114 1094 1.02:1
BoxMinimalPerf.default 344 337 1.02:1
ChatMinimalPerf.default 625 612 1.02:1
FormMinimalPerf.default 765 752 1.02:1
GridMinimalPerf.default 709 697 1.02:1
SplitButtonMinimalPerf.default 3733 3650 1.02:1
AlertMinimalPerf.default 523 516 1.01:1
ButtonSlotsPerf.default 610 601 1.01:1
CardMinimalPerf.default 429 423 1.01:1
HierarchicalTreeMinimalPerf.default 1022 1016 1.01:1
ItemLayoutMinimalPerf.default 1668 1655 1.01:1
ListWith60ListItems.default 1121 1107 1.01:1
ProviderMergeThemesPerf.default 1459 1448 1.01:1
EmbedMinimalPerf.default 4113 4120 1:1
ImageMinimalPerf.default 392 393 1:1
LoaderMinimalPerf.default 750 752 1:1
RadioGroupMinimalPerf.default 591 589 1:1
ReactionMinimalPerf.default 1795 1791 1:1
Dropdown.Fluent 3089 3084 1:1
ChatDuplicateMessagesPerf.default 405 411 0.99:1
DialogMinimalPerf.default 1750 1774 0.99:1
DropdownManyItemsPerf.default 1316 1326 0.99:1
HeaderSlotsPerf.default 1533 1548 0.99:1
LayoutMinimalPerf.default 566 570 0.99:1
ProviderMinimalPerf.default 610 614 0.99:1
SliderMinimalPerf.default 1379 1398 0.99:1
TextAreaMinimalPerf.default 2582 2611 0.99:1
CustomToolbarPrototype.default 3435 3460 0.99:1
ToolbarMinimalPerf.default 1029 1039 0.99:1
CarouselMinimalPerf.default 555 568 0.98:1
CheckboxMinimalPerf.default 2824 2869 0.98:1
DropdownMinimalPerf.default 3041 3109 0.98:1
InputMinimalPerf.default 937 954 0.98:1
MenuButtonMinimalPerf.default 1559 1587 0.98:1
Checkbox.Fluent 609 624 0.98:1
Dialog.Fluent 1710 1740 0.98:1
RefMinimalPerf.default 198 204 0.97:1
Image.Fluent 395 409 0.97:1
Slider.Fluent 1274 1314 0.97:1
FlexMinimalPerf.default 306 319 0.96:1
VideoMinimalPerf.default 770 799 0.96:1
Icon.Fluent 672 741 0.91:1
TooltipMinimalPerf.default 739 900 0.82:1
Tooltip.Fluent 421 595 0.71:1

@layershifter layershifter changed the title chore: update Popper to v2 [WIP] chore: update Popper to v2 Apr 6, 2020
@layershifter layershifter added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label Apr 6, 2020
@layershifter layershifter force-pushed the chore/popper-v2 branch 3 times, most recently from 2d92731 to 47ebec7 Compare April 6, 2020 10:53
@@ -1,14 +0,0 @@
import * as PopperJs from 'popper.js';
Copy link
Member

Choose a reason for hiding this comment

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

Consumers might be using similar mock. Don't you want to describe it in breaking changes?

import * as React from 'react';
import PopperJS from 'popper.js';

// Temporary typings for modifiers
Copy link
Member

Choose a reason for hiding this comment

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

How temporary?

if (boundary === 'scrollParent') {
let boundariesNode = getScrollParent(element);

if (boundariesNode.nodeName === 'BODY') {
Copy link
Member

Choose a reason for hiding this comment

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

Why do you need to do this?
Isn't getScrollParent() doing the same?

Comment on lines 129 to 133
flipBoundary: PropTypes.oneOfType([
PropTypes.object as PropTypes.Requireable<Element>,
PropTypes.oneOf<'scrollParent' | 'window' | 'viewport'>(['scrollParent', 'window', 'viewport']),
PropTypes.object as PropTypes.Requireable<HTMLElement>,
PropTypes.arrayOf(PropTypes.object) as PropTypes.Requireable<HTMLElement[]>,
PropTypes.oneOf<'clippingParents' | 'window' | 'scrollParent'>(['clippingParents', 'window', 'scrollParent']),
]),
Copy link
Member

Choose a reason for hiding this comment

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

nit: create a separate propType? or move it to createCommon?

…icrosoft/fluentui into chore/popper-v2

� Conflicts:
�	README.md
�	packages/fluentui/CHANGELOG.md
�	packages/fluentui/react-northstar/package.json
@layershifter layershifter merged commit ba48c6a into master Apr 15, 2020
@layershifter layershifter deleted the chore/popper-v2 branch April 15, 2020 14:45
DuanShaolong pushed a commit to DuanShaolong/fluentui that referenced this pull request Apr 27, 2020
* chore: update Popper to v2

* remove console.logs

* update UTs

* update test's title

* fix proptypes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants