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

Improve menu controlling with onOpenChange #17712

Merged
merged 8 commits into from Apr 6, 2021

Conversation

ling1726
Copy link
Member

@ling1726 ling1726 commented Apr 6, 2021

Pull request checklist

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

Description of changes

Adds onOpenChange callback to the Menu which is called when the internals of the menu component request a change to the open state of the menu.

When the menu is not controlled (i.e. no open) prop, this callback can be used to watch the changes of the menu internal state.

When the menu is controlled, allows the consumer to benefit from the popup edge cases that are used internally.

Adds `onOpenChange` callback to the `Menu` which is called when the
internals of the menu component request a change to the open state of
the menu.

When the menu is not controlled (i.e. no `open`) prop, this callback can
be used to watch the changes of the menu internal state.

When the menu is controlled, allows the consumer to benefit from the
popup edge cases that are used internally.
@ling1726 ling1726 changed the title Improve menu controlling Improve menu controlling with onOpenChange Apr 6, 2021
@size-auditor
Copy link

size-auditor bot commented Apr 6, 2021

Asset size changes

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

Baseline commit: a265b97604609b3f3b1f972aad63ab58859e6e3b (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Apr 6, 2021

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 be151dd:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 6, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1022 1056 5000
BaseButton mount 988 1014 5000
Breadcrumb mount 46085 45621 5000
ButtonNext mount 629 646 5000
Checkbox mount 1756 1709 5000
CheckboxBase mount 1542 1481 5000
ChoiceGroup mount 5269 5410 5000
ComboBox mount 1094 1134 1000
CommandBar mount 10715 10988 1000
ContextualMenu mount 6623 6701 1000
DefaultButton mount 1240 1264 5000
DetailsRow mount 4007 4053 5000
DetailsRowFast mount 3978 4028 5000
DetailsRowNoStyles mount 3795 3779 5000
Dialog mount 1613 1645 1000
DocumentCardTitle mount 1891 1929 1000
Dropdown mount 3536 3552 5000
FocusTrapZone mount 1877 1910 5000
FocusZone mount 1879 1877 5000
IconButton mount 1966 1940 5000
Label mount 366 368 5000
Layer mount 2042 2002 5000
Link mount 514 510 5000
MakeStyles mount 1882 1895 50000
MenuButton mount 1624 1591 5000
MessageBar mount 2141 2146 5000
Nav mount 3630 3558 1000
OverflowSet mount 1091 1091 5000
Panel mount 1463 1537 1000
Persona mount 891 931 1000
Pivot mount 1529 1546 1000
PrimaryButton mount 1426 1453 5000
Rating mount 8550 8515 5000
SearchBox mount 1510 1474 5000
Shimmer mount 2847 2852 5000
Slider mount 2153 2094 5000
SpinButton mount 5366 5376 5000
Spinner mount 452 454 5000
SplitButton mount 3460 3460 5000
Stack mount 550 548 5000
StackWithIntrinsicChildren mount 1739 1710 5000
StackWithTextChildren mount 5060 5048 5000
SwatchColorPicker mount 11088 11087 5000
Tabs mount 1537 1542 1000
TagPicker mount 3088 3125 5000
TeachingBubble mount 12469 12432 5000
Text mount 476 453 5000
TextField mount 1563 1576 5000
ThemeProvider mount 1297 1288 5000
ThemeProvider virtual-rerender 632 652 5000
ThemeProviderNext mount 16340 16528 5000
Toggle mount 869 904 5000
buttonNative mount 124 119 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.19 0.53 0.36:1 2000 385
🦄 Button.Fluent 0.12 0.23 0.52:1 5000 624
🔧 Checkbox.Fluent 0.67 0.41 1.63:1 1000 671
🦄 Dialog.Fluent 0.16 0.25 0.64:1 5000 822
🔧 Dropdown.Fluent 3.27 0.45 7.27:1 1000 3272
🔧 Icon.Fluent 0.14 0.07 2:1 5000 714
🦄 Image.Fluent 0.09 0.14 0.64:1 5000 453
🔧 Slider.Fluent 1.66 0.51 3.25:1 1000 1660
🔧 Text.Fluent 0.08 0.04 2:1 5000 420
🦄 Tooltip.Fluent 0.16 0.96 0.17:1 5000 798

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AvatarMinimalPerf.default 256 230 1.11:1
HeaderMinimalPerf.default 436 403 1.08:1
AlertMinimalPerf.default 349 326 1.07:1
VideoMinimalPerf.default 758 706 1.07:1
Text.Fluent 420 392 1.07:1
RadioGroupMinimalPerf.default 515 487 1.06:1
ReactionMinimalPerf.default 450 423 1.06:1
AttachmentMinimalPerf.default 185 176 1.05:1
ButtonMinimalPerf.default 208 198 1.05:1
DialogMinimalPerf.default 837 797 1.05:1
ImageMinimalPerf.default 464 444 1.05:1
PopupMinimalPerf.default 819 777 1.05:1
SkeletonMinimalPerf.default 425 404 1.05:1
TreeWith60ListItems.default 219 209 1.05:1
Avatar.Fluent 385 368 1.05:1
AnimationMinimalPerf.default 477 459 1.04:1
BoxMinimalPerf.default 419 404 1.04:1
ButtonUseCssPerf.default 914 883 1.04:1
ChatDuplicateMessagesPerf.default 335 322 1.04:1
ChatMinimalPerf.default 705 678 1.04:1
DividerMinimalPerf.default 433 415 1.04:1
LabelMinimalPerf.default 476 457 1.04:1
ProviderMinimalPerf.default 1097 1052 1.04:1
TextMinimalPerf.default 401 387 1.04:1
Tooltip.Fluent 798 768 1.04:1
ButtonSlotsPerf.default 652 636 1.03:1
LayoutMinimalPerf.default 437 424 1.03:1
ToolbarMinimalPerf.default 1096 1061 1.03:1
Image.Fluent 453 438 1.03:1
ButtonUseCssNestingPerf.default 1185 1164 1.02:1
DropdownMinimalPerf.default 3335 3278 1.02:1
FlexMinimalPerf.default 336 328 1.02:1
GridMinimalPerf.default 412 402 1.02:1
LoaderMinimalPerf.default 784 768 1.02:1
MenuButtonMinimalPerf.default 1777 1746 1.02:1
RefMinimalPerf.default 257 253 1.02:1
SplitButtonMinimalPerf.default 4176 4108 1.02:1
CarouselMinimalPerf.default 529 522 1.01:1
CheckboxMinimalPerf.default 3013 2998 1.01:1
DropdownManyItemsPerf.default 788 777 1.01:1
EmbedMinimalPerf.default 4554 4493 1.01:1
HeaderSlotsPerf.default 893 880 1.01:1
ListMinimalPerf.default 570 563 1.01:1
RosterPerf.default 1329 1322 1.01:1
TooltipMinimalPerf.default 1061 1055 1.01:1
Icon.Fluent 714 705 1.01:1
ButtonOverridesMissPerf.default 1866 1860 1:1
ChatWithPopoverPerf.default 443 442 1:1
ListCommonPerf.default 731 729 1:1
ListWith60ListItems.default 717 719 1:1
SegmentMinimalPerf.default 407 405 1:1
SliderMinimalPerf.default 1661 1669 1:1
TableManyItemsPerf.default 2232 2221 1:1
CustomToolbarPrototype.default 4092 4085 1:1
Dropdown.Fluent 3272 3258 1:1
AttachmentSlotsPerf.default 1255 1268 0.99:1
CardMinimalPerf.default 642 647 0.99:1
DatepickerMinimalPerf.default 50604 50885 0.99:1
ItemLayoutMinimalPerf.default 1415 1429 0.99:1
ProviderMergeThemesPerf.default 1755 1770 0.99:1
StatusMinimalPerf.default 772 781 0.99:1
IconMinimalPerf.default 711 720 0.99:1
TextAreaMinimalPerf.default 589 594 0.99:1
TreeMinimalPerf.default 912 921 0.99:1
Checkbox.Fluent 671 675 0.99:1
Slider.Fluent 1660 1679 0.99:1
FormMinimalPerf.default 483 495 0.98:1
InputMinimalPerf.default 1341 1362 0.98:1
PortalMinimalPerf.default 180 184 0.98:1
Dialog.Fluent 822 841 0.98:1
MenuMinimalPerf.default 980 1006 0.97:1
TableMinimalPerf.default 456 469 0.97:1
Button.Fluent 624 643 0.97:1
ListNestedPerf.default 629 677 0.93:1
AccordionMinimalPerf.default 178 193 0.92:1

@ling1726 ling1726 enabled auto-merge (squash) April 6, 2021 19:41
@ling1726 ling1726 disabled auto-merge April 6, 2021 19:41
@ling1726 ling1726 merged commit a89fc0a into microsoft:master Apr 6, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-components@v9.0.0-alpha.23 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.2 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
* Improve menu controlling

Adds `onOpenChange` callback to the `Menu` which is called when the
internals of the menu component request a change to the open state of
the menu.

When the menu is not controlled (i.e. no `open`) prop, this callback can
be used to watch the changes of the menu internal state.

When the menu is controlled, allows the consumer to benefit from the
popup edge cases that are used internally.

* remove console

* useEventCallback

* remove console

* improve types

* Change files

* add tests
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants