Skip to content

experiment: Allow MenuTrigger to be wrapped by another trigger#21128

Closed
ling1726 wants to merge 6 commits into
microsoft:masterfrom
ling1726:fix/trigger-prop-forwarding
Closed

experiment: Allow MenuTrigger to be wrapped by another trigger#21128
ling1726 wants to merge 6 commits into
microsoft:masterfrom
ling1726:fix/trigger-prop-forwarding

Conversation

@ling1726

@ling1726 ling1726 commented Dec 28, 2021 •
edited
Loading

Copy link
Copy Markdown
Contributor

Pull request checklist

Description of changes

This PR tries to show a potential solution to nested trigger composition
through prop and ref forwarding.

Pros:

  • Can nest triggers
  • event handlers are still stable
  • Generic useTriggerElement factory that can be reused

Cons:

  • Made a jquery like event dispatching callback to have stable event handlers
  • triggers can no longer read props (i.e. disabled) easily
    • refactored menu to read disabled and aria-disabled` from the event targets

Focus areas to test

(optional)

@ling1726
experiment: Allow MenuTrigger to be wrapped by another trigger
8bb6f11 
This PR tries to show a potential solution to nested trigger composition
through prop and ref forwarding.
@fabricteam

fabricteam commented Dec 28, 2021 •
edited
Loading

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 169.094 kB
47.663 kB		 169.533 kB
47.957 kB		 439 B
294 B
react-menu
Menu (including children components)		 103.639 kB
31.853 kB		 104.084 kB
32.13 kB		 445 B
277 B
react-menu
Menu (including selectable components)		 105.896 kB
32.203 kB		 106.341 kB
32.483 kB		 445 B
280 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: FluentProvider & webLightTheme		 32.184 kB
10.58 kB
🤖 This report was generated against 4035bf3526dbd1dad80111a6614503946ed622cc

@codesandbox-ci

codesandbox-ci Bot commented Dec 28, 2021 •
edited
Loading

Copy link
Copy Markdown

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

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@size-auditor

size-auditor Bot commented Dec 28, 2021 •
edited
Loading

Copy link
Copy Markdown

Asset size changes

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

Baseline commit: 4035bf3526dbd1dad80111a6614503946ed622cc (build)

@fabricteam

fabricteam commented Dec 31, 2021 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react)

Scenario Render type Master Ticks PR Ticks Iterations Status
ContextualMenu mount 8641 16941 1000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 948 937 5000
BaseButton mount 920 968 5000
Breadcrumb mount 2705 2668 1000
ButtonNext mount 548 552 5000
Checkbox mount 1558 1576 5000
CheckboxBase mount 1353 1359 5000
ChoiceGroup mount 4907 4896 5000
ComboBox mount 1007 1045 1000
CommandBar mount 10365 10428 1000
ContextualMenu mount 8641 16941 1000 Possible regression
DefaultButton mount 1188 1210 5000
DetailsRow mount 3941 3863 5000
DetailsRowFast mount 3946 3924 5000
DetailsRowNoStyles mount 3751 3661 5000
Dialog mount 2722 2652 1000
DocumentCardTitle mount 200 188 1000
Dropdown mount 3274 3218 5000
FluentProviderNext mount 1857 1844 5000
FluentProviderWithTheme mount 168 166 10
FluentProviderWithTheme virtual-rerender 113 112 10
FluentProviderWithTheme virtual-rerender-with-unmount 208 213 10
FocusTrapZone mount 1885 1838 5000
FocusZone mount 1861 1848 5000
IconButton mount 1798 1812 5000
Label mount 381 383 5000
Layer mount 3080 3093 5000
Link mount 517 509 5000
MakeStyles mount 1905 1873 50000
MenuButton mount 1532 1595 5000
MessageBar mount 2087 2043 5000
Nav mount 3445 3374 1000
OverflowSet mount 1175 1151 5000
Panel mount 2663 2513 1000
Persona mount 917 907 1000
Pivot mount 1498 1482 1000
PrimaryButton mount 1339 1362 5000
Rating mount 7897 7994 5000
SearchBox mount 1398 1361 5000
Shimmer mount 2606 2600 5000
Slider mount 2048 2032 5000
SpinButton mount 5152 5113 5000
Spinner mount 483 479 5000
SplitButton mount 3288 3329 5000
Stack mount 544 544 5000
StackWithIntrinsicChildren mount 2280 2338 5000
StackWithTextChildren mount 5305 5322 5000
SwatchColorPicker mount 11601 12681 5000
TagPicker mount 2733 2738 5000
TeachingBubble mount 13418 13302 5000
Text mount 459 476 5000
TextField mount 1517 1430 5000
ThemeProvider mount 1266 1267 5000
ThemeProvider virtual-rerender 668 634 5000
ThemeProvider virtual-rerender-with-unmount 1952 1981 5000
Toggle mount 861 855 5000
buttonNative mount 154 174 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AlertMinimalPerf.default 306 279 1.1:1
ReactionMinimalPerf.default 409 385 1.06:1
TableMinimalPerf.default 436 411 1.06:1
ChatDuplicateMessagesPerf.default 323 308 1.05:1
ChatWithPopoverPerf.default 389 369 1.05:1
ListWith60ListItems.default 703 669 1.05:1
PopupMinimalPerf.default 636 604 1.05:1
CarouselMinimalPerf.default 488 468 1.04:1
FlexMinimalPerf.default 307 296 1.04:1
SkeletonMinimalPerf.default 377 361 1.04:1
AttachmentMinimalPerf.default 171 166 1.03:1
AvatarMinimalPerf.default 206 200 1.03:1
DividerMinimalPerf.default 377 365 1.03:1
DropdownManyItemsPerf.default 720 697 1.03:1
LabelMinimalPerf.default 415 404 1.03:1
LayoutMinimalPerf.default 370 360 1.03:1
ListCommonPerf.default 664 646 1.03:1
MenuMinimalPerf.default 860 838 1.03:1
ProviderMergeThemesPerf.default 1806 1753 1.03:1
TreeMinimalPerf.default 838 816 1.03:1
AccordionMinimalPerf.default 168 164 1.02:1
ButtonMinimalPerf.default 179 175 1.02:1
CardMinimalPerf.default 563 552 1.02:1
EmbedMinimalPerf.default 4258 4193 1.02:1
HeaderSlotsPerf.default 789 773 1.02:1
PortalMinimalPerf.default 199 196 1.02:1
SegmentMinimalPerf.default 372 363 1.02:1
AttachmentSlotsPerf.default 1098 1085 1.01:1
ChatMinimalPerf.default 746 736 1.01:1
GridMinimalPerf.default 351 349 1.01:1
ImageMinimalPerf.default 399 396 1.01:1
ListMinimalPerf.default 515 511 1.01:1
ListNestedPerf.default 557 554 1.01:1
SplitButtonMinimalPerf.default 4334 4270 1.01:1
TreeWith60ListItems.default 186 184 1.01:1
BoxMinimalPerf.default 348 348 1:1
DatepickerMinimalPerf.default 5587 5603 1:1
DropdownMinimalPerf.default 3072 3059 1:1
ItemLayoutMinimalPerf.default 1205 1202 1:1
ButtonOverridesMissPerf.default 1711 1726 0.99:1
ButtonSlotsPerf.default 550 555 0.99:1
HeaderMinimalPerf.default 369 374 0.99:1
RosterPerf.default 1200 1213 0.99:1
TextMinimalPerf.default 356 358 0.99:1
TooltipMinimalPerf.default 1039 1046 0.99:1
CheckboxMinimalPerf.default 2644 2704 0.98:1
MenuButtonMinimalPerf.default 1667 1702 0.98:1
ProviderMinimalPerf.default 1142 1168 0.98:1
SliderMinimalPerf.default 1655 1691 0.98:1
TableManyItemsPerf.default 1912 1947 0.98:1
CustomToolbarPrototype.default 4086 4170 0.98:1
ToolbarMinimalPerf.default 961 984 0.98:1
AnimationMinimalPerf.default 446 460 0.97:1
InputMinimalPerf.default 1298 1332 0.97:1
LoaderMinimalPerf.default 690 719 0.96:1
StatusMinimalPerf.default 684 713 0.96:1
VideoMinimalPerf.default 606 634 0.96:1
RefMinimalPerf.default 238 251 0.95:1
TextAreaMinimalPerf.default 490 515 0.95:1
DialogMinimalPerf.default 764 817 0.94:1
IconMinimalPerf.default 588 625 0.94:1
FormMinimalPerf.default 396 424 0.93:1
RadioGroupMinimalPerf.default 454 496 0.92:1

@layershifter layershifter mentioned this pull request Jan 10, 2022
Merged
@ling1726 ling1726 closed this Jan 26, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@spmonahan spmonahan

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@ling1726 @fabricteam @spmonahan