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.

Sign up for GitHub

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

Jump to bottom

feat(Menu): Allow custom and virtual popover target #18565

Merged
merged 6 commits into from
Jun 15, 2021
Merged

feat(Menu): Allow custom and virtual popover target #18565

merged 6 commits into from
Jun 15, 2021

Conversation

ling1726
Copy link
Member

@ling1726 ling1726 commented Jun 15, 2021 •
edited

Pull request checklist

Description of changes

Since #18464 aligns with Popover API pattern. Leverages the pattern used in Popover to support custom targets and real context menu targets. A reusable usePopperMouseTarget hook as a util manage the state of a popper virtual element. Will convert Popover to use this in a follow up PR.

Removes current constraint that context and hover cannot be used together

Adds hoverDelay prop for open and dismiss on mouse over events. This delay has a default of 500ms as in design spec

Focus areas to test

(optional)

@ling1726 ling1726 marked this pull request as ready for review June 15, 2021 07:00
@ling1726 ling1726 requested a review from a team June 15, 2021 07:00
@size-auditor
Copy link

size-auditor bot commented Jun 15, 2021 •
edited

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-components-Menu 93.04 kB 93.691 kB ExceedsBaseline     651 bytes

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

Baseline commit: b23fd366be888411a894e41d5d8e2e788fb5b0b5 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 15, 2021 •
edited

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 823 850 5000
BaseButton mount 945 947 5000
Breadcrumb mount 2545 2558 1000
ButtonNext mount 527 521 5000
Checkbox mount 1537 1537 5000
CheckboxBase mount 1342 1350 5000
ChoiceGroup mount 4922 4894 5000
ComboBox mount 1048 987 1000
CommandBar mount 9946 9933 1000
ContextualMenu mount 6174 6183 1000
DefaultButton mount 1172 1156 5000
DetailsRow mount 3745 3752 5000
DetailsRowFast mount 3733 3763 5000
DetailsRowNoStyles mount 3625 3490 5000
Dialog mount 2142 2167 1000
DocumentCardTitle mount 146 130 1000
Dropdown mount 3291 3278 5000
FocusTrapZone mount 1743 1767 5000
FocusZone mount 1735 1761 5000
IconButton mount 1812 1789 5000
Label mount 348 335 5000
Layer mount 1811 1817 5000
Link mount 454 471 5000
MakeStyles mount 1741 1798 50000
MenuButton mount 1472 1485 5000
MessageBar mount 1957 1998 5000
Nav mount 3337 3309 1000
OverflowSet mount 998 1055 5000
Panel mount 2043 2040 1000
Persona mount 812 830 1000
Pivot mount 1411 1402 1000
PrimaryButton mount 1268 1317 5000
Rating mount 7964 7889 5000
SearchBox mount 1418 1376 5000
Shimmer mount 2610 2634 5000
Slider mount 1969 2004 5000
SpinButton mount 5032 5058 5000
Spinner mount 417 419 5000
SplitButton mount 3237 3188 5000
Stack mount 511 500 5000
StackWithIntrinsicChildren mount 1624 1635 5000
StackWithTextChildren mount 4786 4814 5000
SwatchColorPicker mount 10094 10506 5000
Tabs mount 1433 1422 1000
TagPicker mount 2468 2528 5000
TeachingBubble mount 11757 11719 5000
Text mount 438 432 5000
TextField mount 1382 1393 5000
ThemeProvider mount 1192 1155 5000
ThemeProvider virtual-rerender 598 588 5000
ThemeProviderNext mount 6561 6581 5000
Toggle mount 832 788 5000
buttonNative mount 104 113 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 182 157 1.16:1
SkeletonMinimalPerf.default 424 368 1.15:1
TreeWith60ListItems.default 197 180 1.09:1
CarouselMinimalPerf.default 504 471 1.07:1
GridMinimalPerf.default 365 342 1.07:1
AccordionMinimalPerf.default 161 152 1.06:1
TextMinimalPerf.default 376 355 1.06:1
AttachmentSlotsPerf.default 1217 1159 1.05:1
CardMinimalPerf.default 613 585 1.05:1
DropdownManyItemsPerf.default 742 710 1.05:1
FlexMinimalPerf.default 301 287 1.05:1
HeaderSlotsPerf.default 826 785 1.05:1
PopupMinimalPerf.default 568 541 1.05:1
TableMinimalPerf.default 443 423 1.05:1
AlertMinimalPerf.default 301 290 1.04:1
AnimationMinimalPerf.default 435 417 1.04:1
AvatarMinimalPerf.default 206 199 1.04:1
FormMinimalPerf.default 455 438 1.04:1
LabelMinimalPerf.default 419 401 1.04:1
ListNestedPerf.default 606 581 1.04:1
MenuMinimalPerf.default 888 856 1.04:1
VideoMinimalPerf.default 673 645 1.04:1
ImageMinimalPerf.default 411 398 1.03:1
LayoutMinimalPerf.default 399 386 1.03:1
ListCommonPerf.default 678 660 1.03:1
ListWith60ListItems.default 664 647 1.03:1
ButtonMinimalPerf.default 189 185 1.02:1
DividerMinimalPerf.default 382 376 1.02:1
HeaderMinimalPerf.default 385 377 1.02:1
ItemLayoutMinimalPerf.default 1351 1322 1.02:1
LoaderMinimalPerf.default 697 681 1.02:1
RadioGroupMinimalPerf.default 474 465 1.02:1
IconMinimalPerf.default 671 658 1.02:1
ToolbarMinimalPerf.default 986 964 1.02:1
TreeMinimalPerf.default 837 817 1.02:1
ButtonOverridesMissPerf.default 1743 1725 1.01:1
ButtonSlotsPerf.default 572 567 1.01:1
ChatDuplicateMessagesPerf.default 293 291 1.01:1
DatepickerMinimalPerf.default 5505 5434 1.01:1
ListMinimalPerf.default 532 526 1.01:1
PortalMinimalPerf.default 178 177 1.01:1
ProviderMergeThemesPerf.default 1610 1601 1.01:1
TextAreaMinimalPerf.default 544 538 1.01:1
TooltipMinimalPerf.default 1017 1003 1.01:1
BoxMinimalPerf.default 371 370 1:1
ChatMinimalPerf.default 642 641 1:1
CheckboxMinimalPerf.default 2752 2762 1:1
DialogMinimalPerf.default 773 770 1:1
DropdownMinimalPerf.default 3046 3045 1:1
EmbedMinimalPerf.default 4177 4180 1:1
MenuButtonMinimalPerf.default 1626 1628 1:1
ProviderMinimalPerf.default 1033 1029 1:1
TableManyItemsPerf.default 2024 2031 1:1
CustomToolbarPrototype.default 3837 3847 1:1
ReactionMinimalPerf.default 396 400 0.99:1
RefMinimalPerf.default 229 232 0.99:1
SliderMinimalPerf.default 1588 1598 0.99:1
SplitButtonMinimalPerf.default 3863 3887 0.99:1
ChatWithPopoverPerf.default 377 384 0.98:1
StatusMinimalPerf.default 714 730 0.98:1
InputMinimalPerf.default 1274 1311 0.97:1
RosterPerf.default 1234 1279 0.96:1
SegmentMinimalPerf.default 358 375 0.95:1

@miroslavstastny miroslavstastny added this to In progress in Teams Prague - @microsoft/teams-prg via automation Jun 15, 2021
@microsoft microsoft deleted a comment from azure-pipelines bot Jun 15, 2021
@ling1726
Copy link
Member Author

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@ling1726 ling1726 merged commit 823b75a into microsoft:master Jun 15, 2021
Teams Prague - @microsoft/teams-prg automation moved this from In progress to Done Jun 15, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-positioning@v9.0.0-alpha.29 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-popover@v9.0.0-alpha.8 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-menu@v9.0.0-alpha.37 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot msft-fluent-ui-bot mentioned this pull request Jun 16, 2021
Closed
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-examples@v8.28.4 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-tooltip@v9.0.0-alpha.45 has been released which incorporates this pull request.:tada:

Handy links:

@ling1726 ling1726 mentioned this pull request Jun 16, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bsunderhus bsunderhus bsunderhus approved these changes

Assignees

@miroslavstastny miroslavstastny

Labels
Component: Menu
Projects
Teams Prague - @microsoft/teams-prg
Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Menu: Custom target for popper
5 participants
@ling1726 @fabricteam @msft-fluent-ui-bot @bsunderhus @miroslavstastny