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

Menu and MenuTrigger API #17271

Merged
merged 7 commits into from Mar 7, 2021
Merged

Menu and MenuTrigger API #17271

merged 7 commits into from Mar 7, 2021

Conversation

ling1726
Copy link
Member

@ling1726 ling1726 commented Mar 4, 2021

Adds the Menu and MenuTrigger compoenents to render popup and
trigger element to control the popup

Menu renders a wrapper slot around expected MenuList for popup
positioning

MenuTrigger renders no DOM but clones an only child with correct popup
event handling

TODO before completing - add tests

Pull request checklist

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

Description of changes

(give an overview)

Focus areas to test

(optional)

@ling1726
Menu and MenuTrigger API
20d05c2 
Adds the Menu and MenuTrigger compoenents to render popup and
trigger element to control the popup

Menu renders a wrapper slot around expected `MenuList` for popup
positioning

MenuTrigger renders no DOM but clones an only child with correct popup
event handling
@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 4, 2021 •
edited

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 9801e6f:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@size-auditor
Copy link

size-auditor bot commented Mar 4, 2021 •
edited

Asset size changes

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

Baseline commit: a8552af0ad666f77e2ba8a3aa3768611d6fed3a5 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 4, 2021 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1136 1155 5000
BaseButton mount 893 905 5000
Breadcrumb mount 43239 43395 5000
ButtonNext mount 1242 1242 5000
Checkbox mount 1511 1461 5000
CheckboxBase mount 1230 1216 5000
ChoiceGroup mount 4563 4608 5000
ComboBox mount 950 961 1000
CommandBar mount 10039 9958 1000
ContextualMenu mount 6005 6037 1000
DefaultButton mount 1127 1106 5000
DetailsRow mount 3564 3543 5000
DetailsRowFast mount 3462 3469 5000
DetailsRowNoStyles mount 3309 3298 5000
Dialog mount 1410 1423 1000
DocumentCardTitle mount 1864 1876 1000
Dropdown mount 3178 3207 5000
FocusTrapZone mount 1757 1744 5000
FocusZone mount 1776 1740 5000
IconButton mount 1678 1643 5000
Label mount 327 320 5000
Layer mount 1740 1734 5000
Link mount 453 458 5000
MakeStyles mount 2028 2003 50000
MenuButton mount 1419 1425 5000
MessageBar mount 1960 1979 5000
Nav mount 3196 3159 1000
OverflowSet mount 1034 987 5000
Panel mount 1416 1380 1000
Persona mount 804 802 1000
Pivot mount 1360 1369 1000
PrimaryButton mount 1263 1245 5000
Rating mount 7309 7291 5000
SearchBox mount 1301 1260 5000
Shimmer mount 2459 2487 5000
Slider mount 1913 1909 5000
SpinButton mount 4857 4910 5000
Spinner mount 400 398 5000
SplitButton mount 3000 3058 5000
Stack mount 493 473 5000
StackWithIntrinsicChildren mount 1457 1515 5000
StackWithTextChildren mount 4362 4346 5000
SwatchColorPicker mount 9982 9994 5000
Tabs mount 1376 1369 1000
TagPicker mount 2707 2788 5000
TeachingBubble mount 11414 11417 5000
Text mount 393 404 5000
TextField mount 1351 1316 5000
ThemeProvider mount 1152 1149 5000
ThemeProvider virtual-rerender 609 594 5000
ThemeProviderNext mount 15560 15718 5000
Toggle mount 810 789 5000
buttonNative mount 116 117 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.17 0.46 0.37:1 2000 340
🦄 Button.Fluent 0.11 0.2 0.55:1 5000 559
🔧 Checkbox.Fluent 0.62 0.32 1.94:1 1000 621
🎯 Dialog.Fluent 0.15 0.2 0.75:1 5000 766
🔧 Dropdown.Fluent 3.06 0.39 7.85:1 1000 3059
🔧 Icon.Fluent 0.13 0.06 2.17:1 5000 668
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 416
🔧 Slider.Fluent 1.58 0.46 3.43:1 1000 1576
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 368
🦄 Tooltip.Fluent 0.11 0.9 0.12:1 5000 565

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
VideoMinimalPerf.default 686 603 1.14:1
ReactionMinimalPerf.default 444 398 1.12:1
AvatarMinimalPerf.default 215 201 1.07:1
FlexMinimalPerf.default 322 302 1.07:1
ButtonMinimalPerf.default 190 180 1.06:1
GridMinimalPerf.default 380 357 1.06:1
LabelMinimalPerf.default 427 401 1.06:1
ListCommonPerf.default 646 610 1.06:1
PopupMinimalPerf.default 732 699 1.05:1
StatusMinimalPerf.default 738 705 1.05:1
TextAreaMinimalPerf.default 509 485 1.05:1
AttachmentMinimalPerf.default 174 168 1.04:1
AttachmentSlotsPerf.default 1199 1148 1.04:1
BoxMinimalPerf.default 390 374 1.04:1
PortalMinimalPerf.default 180 173 1.04:1
ProviderMinimalPerf.default 985 950 1.04:1
RadioGroupMinimalPerf.default 472 455 1.04:1
ChatDuplicateMessagesPerf.default 386 373 1.03:1
ListNestedPerf.default 593 574 1.03:1
RefMinimalPerf.default 254 247 1.03:1
IconMinimalPerf.default 668 649 1.03:1
TableManyItemsPerf.default 2025 1973 1.03:1
ToolbarMinimalPerf.default 998 973 1.03:1
Image.Fluent 416 402 1.03:1
ButtonOverridesMissPerf.default 1709 1678 1.02:1
ButtonUseCssPerf.default 830 816 1.02:1
CardMinimalPerf.default 582 570 1.02:1
DropdownManyItemsPerf.default 734 721 1.02:1
InputMinimalPerf.default 1283 1262 1.02:1
ListMinimalPerf.default 515 503 1.02:1
MenuButtonMinimalPerf.default 1594 1567 1.02:1
Tooltip.Fluent 565 552 1.02:1
AccordionMinimalPerf.default 165 163 1.01:1
ButtonSlotsPerf.default 592 585 1.01:1
DatepickerMinimalPerf.default 46557 46138 1.01:1
EmbedMinimalPerf.default 4278 4225 1.01:1
FormMinimalPerf.default 418 414 1.01:1
ProviderMergeThemesPerf.default 1631 1614 1.01:1
SegmentMinimalPerf.default 373 370 1.01:1
SplitButtonMinimalPerf.default 3684 3638 1.01:1
Icon.Fluent 668 659 1.01:1
Slider.Fluent 1576 1562 1.01:1
CheckboxMinimalPerf.default 2793 2787 1:1
LayoutMinimalPerf.default 404 404 1:1
SliderMinimalPerf.default 1585 1588 1:1
TableMinimalPerf.default 424 425 1:1
TooltipMinimalPerf.default 825 825 1:1
Dropdown.Fluent 3059 3065 1:1
AnimationMinimalPerf.default 413 416 0.99:1
ButtonUseCssNestingPerf.default 1095 1102 0.99:1
ChatMinimalPerf.default 634 640 0.99:1
DropdownMinimalPerf.default 3045 3077 0.99:1
LoaderMinimalPerf.default 719 729 0.99:1
SkeletonMinimalPerf.default 383 388 0.99:1
CustomToolbarPrototype.default 3686 3707 0.99:1
TreeWith60ListItems.default 182 184 0.99:1
Avatar.Fluent 340 344 0.99:1
Dialog.Fluent 766 773 0.99:1
Text.Fluent 368 370 0.99:1
CarouselMinimalPerf.default 497 509 0.98:1
DialogMinimalPerf.default 768 781 0.98:1
HeaderMinimalPerf.default 366 372 0.98:1
HeaderSlotsPerf.default 754 772 0.98:1
ImageMinimalPerf.default 378 384 0.98:1
ItemLayoutMinimalPerf.default 1181 1200 0.98:1
ListWith60ListItems.default 621 636 0.98:1
TextMinimalPerf.default 354 360 0.98:1
Checkbox.Fluent 621 633 0.98:1
ChatWithPopoverPerf.default 448 460 0.97:1
DividerMinimalPerf.default 383 396 0.97:1
Button.Fluent 559 574 0.97:1
MenuMinimalPerf.default 876 915 0.96:1
TreeMinimalPerf.default 786 816 0.96:1
AlertMinimalPerf.default 291 305 0.95:1
RosterPerf.default 1125 1199 0.94:1

@ling1726 ling1726 merged commit 379ec44 into microsoft:master Mar 7, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-menu@v0.8.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@ling1726 ling1726 mentioned this pull request Mar 9, 2021
Closed
25 tasks
joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Mar 25, 2021
@ling1726 @joshualamusga1
Menu and MenuTrigger API (microsoft#17271)
c6aca67 
* Menu and MenuTrigger API

Adds the Menu and MenuTrigger compoenents to render popup and
trigger element to control the popup

Menu renders a wrapper slot around expected `MenuList` for popup
positioning

MenuTrigger renders no DOM but clones an only child with correct popup
event handling

* fix types

* fixes

* useCallback

* Change files

* fix controlled example

* fix tests
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@ling1726 @miroslavstastny
Menu and MenuTrigger API (microsoft#17271)
d4a1508 
* Menu and MenuTrigger API

Adds the Menu and MenuTrigger compoenents to render popup and
trigger element to control the popup

Menu renders a wrapper slot around expected `MenuList` for popup
positioning

MenuTrigger renders no DOM but clones an only child with correct popup
event handling

* fix types

* fixes

* useCallback

* Change files

* fix controlled example

* fix tests
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@layershifter layershifter layershifter approved these changes

@behowell behowell Awaiting requested review from behowell

@khmakoto khmakoto Awaiting requested review from khmakoto

Assignees

@khmakoto khmakoto

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@ling1726 @fabricteam @msft-fluent-ui-bot @layershifter @khmakoto