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

feat: expose overflowBoundary & flipBoundary props from Popper #12439

Merged
merged 6 commits into from
Mar 27, 2020

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Mar 26, 2020

Pull request checklist

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

Description of changes

This PR allows exposes overflowBoundary & flipBoundary props on MenuButton, Tooltip, Popup & popper shorthands. This adds ability to manage flip/overflow settings.

Also updates Chat's overflow example to highlight changes and provide an example usage.

Before

image

After

{ flipBoundary: 'window', overflowBoundary: 'window' }

image

Microsoft Reviewers: Open in CodeFlow

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Mar 26, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Status
BaseButton 938 922
BaseButton (experiments) 1062 1113
DefaultButton 1150 1126
DefaultButton (experiments) 2026 2007
DetailsRow 3617 3723
DetailsRow (fast icons) 3756 3586
DetailsRow without styles 3387 3383
DocumentCardTitle with truncation 1669 1638
MenuButton 1569 1574
MenuButton (experiments) 3891 3721
PrimaryButton 1375 1320
PrimaryButton (experiments) 2143 2191
SplitButton 3314 3434
SplitButton (experiments) 7542 7477
Stack 546 517
Stack with Intrinsic children 1199 1216
Stack with Text children 4747 4691
Text 438 425
Toggle 923 971
Toggle (experiments) 2477 2398
button 71 73

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.64 0.55 1.16:1 2000 1276
🦄 Button.Fluent 0.12 0.21 0.57:1 5000 580
🔧 Checkbox.Fluent 0.83 0.46 1.8:1 1000 828
🔧 Dialog.Fluent 0.45 0.24 1.88:1 5000 2250
🔧 Dropdown.Fluent 3.95 0.52 7.6:1 1000 3949
🔧 Icon.Fluent 0.22 0.06 3.67:1 5000 1089
🎯 Image.Fluent 0.09 0.12 0.75:1 5000 450
🔧 Slider.Fluent 1.79 0.49 3.65:1 1000 1791
🔧 Text.Fluent 0.1 0.02 5:1 5000 517
🦄 Tooltip.Fluent 0.14 17.98 0.01:1 5000 688

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 378 340 1.11:1
TooltipMinimalPerf.default 1062 969 1.1:1
AlertMinimalPerf.default 747 683 1.09:1
HierarchicalTreeMinimalPerf.default 1322 1217 1.09:1
RefMinimalPerf.default 240 220 1.09:1
ButtonMinimalPerf.default 198 183 1.08:1
ListNestedPerf.default 1195 1108 1.08:1
BoxMinimalPerf.default 510 477 1.07:1
DialogMinimalPerf.default 2341 2185 1.07:1
ProviderMinimalPerf.default 748 702 1.07:1
Checkbox.Fluent 828 775 1.07:1
ChatMinimalPerf.default 746 712 1.05:1
ChatWithPopoverPerf.default 724 694 1.04:1
Icon.Fluent 1089 1046 1.04:1
Text.Fluent 517 498 1.04:1
AttachmentSlotsPerf.default 4218 4105 1.03:1
ImageMinimalPerf.default 482 467 1.03:1
LayoutMinimalPerf.default 806 781 1.03:1
ListWith60ListItems.default 1475 1428 1.03:1
ReactionMinimalPerf.default 2847 2761 1.03:1
SegmentMinimalPerf.default 1325 1282 1.03:1
StatusMinimalPerf.default 840 817 1.03:1
Avatar.Fluent 1276 1235 1.03:1
Slider.Fluent 1791 1738 1.03:1
AttachmentMinimalPerf.default 1037 1015 1.02:1
AvatarMinimalPerf.default 684 673 1.02:1
CarouselMinimalPerf.default 2295 2259 1.02:1
InputMinimalPerf.default 1241 1214 1.02:1
DividerMinimalPerf.default 1230 1222 1.01:1
FlexMinimalPerf.default 363 360 1.01:1
PopupMinimalPerf.default 286 283 1.01:1
SliderMinimalPerf.default 1783 1772 1.01:1
TableMinimalPerf.default 860 851 1.01:1
TextMinimalPerf.default 498 495 1.01:1
TextAreaMinimalPerf.default 3610 3590 1.01:1
CustomToolbarPrototype.default 4146 4086 1.01:1
AnimationMinimalPerf.default 789 787 1:1
CardMinimalPerf.default 461 462 1:1
EmbedMinimalPerf.default 6067 6047 1:1
GridMinimalPerf.default 1035 1031 1:1
HeaderSlotsPerf.default 2040 2038 1:1
ItemLayoutMinimalPerf.default 2453 2464 1:1
MenuButtonMinimalPerf.default 1858 1858 1:1
RadioGroupMinimalPerf.default 688 685 1:1
SplitButtonMinimalPerf.default 13990 14010 1:1
VideoMinimalPerf.default 1049 1046 1:1
CheckboxMinimalPerf.default 3693 3737 0.99:1
DropdownManyItemsPerf.default 1694 1706 0.99:1
ListCommonPerf.default 1243 1255 0.99:1
LoaderMinimalPerf.default 1212 1224 0.99:1
TreeMinimalPerf.default 1471 1486 0.99:1
Dialog.Fluent 2250 2284 0.99:1
ButtonSlotsPerf.default 733 748 0.98:1
DropdownMinimalPerf.default 4047 4149 0.98:1
LabelMinimalPerf.default 503 515 0.98:1
ListMinimalPerf.default 580 590 0.98:1
ProviderMergeThemesPerf.default 1529 1555 0.98:1
ToolbarMinimalPerf.default 1332 1360 0.98:1
TreeWith60ListItems.default 267 273 0.98:1
Dropdown.Fluent 3949 4024 0.98:1
Image.Fluent 450 458 0.98:1
MenuMinimalPerf.default 2306 2386 0.97:1
IconMinimalPerf.default 549 571 0.96:1
Tooltip.Fluent 688 717 0.96:1
FormMinimalPerf.default 1095 1168 0.94:1
AccordionMinimalPerf.default 285 306 0.93:1
HeaderMinimalPerf.default 674 736 0.92:1
Button.Fluent 580 628 0.92:1
ChatDuplicateMessagesPerf.default 468 512 0.91:1

@size-auditor
Copy link

size-auditor bot commented Mar 27, 2020

Asset size changes

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

Baseline commit: 3ccfbb72b1924d9e723c700cfd7d7d73aa853da5 (build)

@layershifter layershifter merged commit 50a6d39 into master Mar 27, 2020
@layershifter layershifter deleted the feat/more-popper-props branch March 27, 2020 09:22
miroslavstastny pushed a commit that referenced this pull request Apr 15, 2020
* feat: expose overflowBoundary & flipBoundary props from Popper

* add changelog entry

* add jsdoc

* improve screener test

* simplify typings

* remove unused prop

(cherry picked from commit 50a6d39)
DuanShaolong pushed a commit to DuanShaolong/fluentui that referenced this pull request Apr 27, 2020
…soft#12439)

* feat: expose overflowBoundary & flipBoundary props from Popper

* add changelog entry

* add jsdoc

* improve screener test

* simplify typings

* remove unused prop
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

4 participants