Skip to content

feat(Menu): Prototype#14822

Merged
msft-github-bot merged 12 commits intomicrosoft:masterfrom
assuncaocharles:feat/menu-prototype-2
Sep 7, 2020
Merged

feat(Menu): Prototype#14822
msft-github-bot merged 12 commits intomicrosoft:masterfrom
assuncaocharles:feat/menu-prototype-2

Conversation

@assuncaocharles
Copy link
Copy Markdown
Contributor

@assuncaocharles assuncaocharles commented Aug 31, 2020

Pull request checklist

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

Description of changes

As agreed this PR adds a private prototype for Menu with submenus

gLOC5mb5gx

Focus areas to test

(optional)

@msft-github-bot
Copy link
Copy Markdown
Contributor

msft-github-bot commented Aug 31, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 861 835 5000
ButtonNext mount 667 651 5000
Checkbox mount 1500 1544 5000
CheckboxBase mount 1223 1245 5000
CheckboxNext mount 1583 1586 5000
ChoiceGroup mount 4773 4771 5000
ChoiceGroupNext mount 4768 4799 5000
ComboBox mount 900 935 1000
CommandBar mount 7388 7465 1000
ContextualMenu mount 13212 12986 1000
DefaultButton mount 1103 1104 5000
DetailsRow mount 3367 3435 5000
DetailsRowFast mount 3382 3407 5000
DetailsRowNoStyles mount 3215 3320 5000
Dialog mount 1476 1436 1000
DocumentCardTitle mount 1815 1774 1000
Dropdown mount 2492 2525 5000
FocusZone mount 1802 1811 5000
IconButton mount 1678 1694 5000
Label mount 336 344 5000
Link mount 441 429 5000
LinkNext mount 462 449 5000
MenuButton mount 1463 1431 5000
MessageBar mount 1999 2044 5000
MessageBarNext mount 2019 2015 5000
Nav mount 3167 3120 1000
OverflowSet mount 1355 1391 5000
OverflowSetNext mount 1042 1029 5000
Panel mount 1388 1377 1000
Persona mount 806 849 1000
Pivot mount 1352 1355 1000
PivotNext mount 1345 1374 1000
PrimaryButton mount 1232 1226 5000
SearchBox mount 1284 1227 5000
SearchBoxNext mount 1322 1279 5000
Shimmer mount 2527 2471 5000
ShimmerNext mount 2425 2503 5000
Slider mount 1470 1437 5000
SliderNext mount 1904 1897 5000
SpinButton mount 4943 4982 5000
SpinButtonNext mount 5032 5000 5000
Spinner mount 398 410 5000
SplitButton mount 3065 3070 5000
Stack mount 497 524 5000
StackWithIntrinsicChildren mount 1898 1972 5000
StackWithTextChildren mount 4852 4876 5000
SwatchColorPicker mount 10055 9982 5000
SwatchColorPickerNext mount 9891 9963 5000
TagPicker mount 2661 2657 5000
TeachingBubble mount 49988 49677 5000
TeachingBubbleNext mount 50181 49483 5000
Text mount 425 409 5000
TextField mount 1335 1319 5000
ThemeProvider mount 4197 4399 5000
ThemeProvider virtual-rerender 452 444 5000
Toggle mount 818 804 5000
ToggleNext mount 790 786 5000
button mount 114 118 5000

Perf Analysis (Fluent)

⚠️ 6 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 1678 41 40.93:1 analysis
ButtonUseCssNestingPerf.default 1072 43 24.93:1 analysis
ButtonUseCssPerf.default 832 42 19.81:1 analysis
ChatWithPopoverPerf.default 466 452 1.03:1 analysis
ListCommonPerf.default 637 894 0.71:1 analysis
ListNestedPerf.default 575 843 0.68:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.43 0.47 0.91:1 2000 860
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 564
🔧 Checkbox.Fluent 0.61 0.35 1.74:1 1000 606
🎯 Dialog.Fluent 0.16 0.21 0.76:1 5000 777
🔧 Dropdown.Fluent 2.87 0.46 6.24:1 1000 2871
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 689
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 394
🔧 Slider.Fluent 1.58 0.33 4.79:1 1000 1583
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 387
🦄 Tooltip.Fluent 0.11 16.27 0.01:1 5000 567

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 167 118 1.42:1
RefMinimalPerf.default 252 188 1.34:1
Text.Fluent 387 312 1.24:1
FormMinimalPerf.default 434 353 1.23:1
FlexMinimalPerf.default 311 254 1.22:1
HeaderMinimalPerf.default 393 323 1.22:1
DividerMinimalPerf.default 378 312 1.21:1
AccordionMinimalPerf.default 164 137 1.2:1
LabelMinimalPerf.default 442 370 1.19:1
AnimationMinimalPerf.default 442 375 1.18:1
CardMinimalPerf.default 581 494 1.18:1
AttachmentMinimalPerf.default 162 139 1.17:1
SkeletonMinimalPerf.default 416 355 1.17:1
BoxMinimalPerf.default 371 320 1.16:1
SegmentMinimalPerf.default 371 319 1.16:1
TextMinimalPerf.default 374 323 1.16:1
GridMinimalPerf.default 346 300 1.15:1
LayoutMinimalPerf.default 425 371 1.15:1
Tooltip.Fluent 567 495 1.15:1
ButtonMinimalPerf.default 193 169 1.14:1
ChatMinimalPerf.default 638 559 1.14:1
ListMinimalPerf.default 495 435 1.14:1
RadioGroupMinimalPerf.default 442 387 1.14:1
ReactionMinimalPerf.default 407 357 1.14:1
ImageMinimalPerf.default 386 342 1.13:1
TableMinimalPerf.default 420 373 1.13:1
Image.Fluent 394 350 1.13:1
StatusMinimalPerf.default 695 620 1.12:1
Button.Fluent 564 502 1.12:1
HeaderSlotsPerf.default 805 725 1.11:1
MenuMinimalPerf.default 848 775 1.09:1
ProviderMergeThemesPerf.default 2012 1842 1.09:1
TextAreaMinimalPerf.default 485 444 1.09:1
Dialog.Fluent 777 712 1.09:1
ProviderMinimalPerf.default 969 896 1.08:1
AttachmentSlotsPerf.default 1149 1077 1.07:1
AvatarMinimalPerf.default 479 447 1.07:1
SliderMinimalPerf.default 1667 1563 1.07:1
AlertMinimalPerf.default 312 293 1.06:1
CarouselMinimalPerf.default 437 412 1.06:1
ItemLayoutMinimalPerf.default 1253 1185 1.06:1
TooltipMinimalPerf.default 801 759 1.06:1
VideoMinimalPerf.default 620 583 1.06:1
DialogMinimalPerf.default 778 739 1.05:1
MenuButtonMinimalPerf.default 1532 1453 1.05:1
SplitButtonMinimalPerf.default 3779 3617 1.04:1
CustomToolbarPrototype.default 3769 3630 1.04:1
ToolbarMinimalPerf.default 947 907 1.04:1
Icon.Fluent 689 662 1.04:1
ButtonSlotsPerf.default 590 574 1.03:1
CheckboxMinimalPerf.default 2828 2750 1.03:1
InputMinimalPerf.default 1291 1255 1.03:1
LoaderMinimalPerf.default 721 700 1.03:1
PopupMinimalPerf.default 686 668 1.03:1
DropdownMinimalPerf.default 2915 2867 1.02:1
TreeMinimalPerf.default 859 841 1.02:1
Avatar.Fluent 860 840 1.02:1
ChatDuplicateMessagesPerf.default 409 403 1.01:1
EmbedMinimalPerf.default 1881 1863 1.01:1
TreeWith60ListItems.default 220 220 1:1
Dropdown.Fluent 2871 2871 1:1
Slider.Fluent 1583 1589 1:1
DropdownManyItemsPerf.default 718 722 0.99:1
TableManyItemsPerf.default 2101 2112 0.99:1
IconMinimalPerf.default 653 668 0.98:1
Checkbox.Fluent 606 640 0.95:1
ListWith60ListItems.default 910 1032 0.88:1

@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci bot commented Aug 31, 2020

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

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@size-auditor
Copy link
Copy Markdown

size-auditor bot commented Aug 31, 2020

Asset size changes

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

Baseline commit: a6337607bf1742ce64f73eb6ddb420960919bdb9 (build)

@assuncaocharles
Copy link
Copy Markdown
Contributor Author

Anything else @layershifter ?

@assuncaocharles
Copy link
Copy Markdown
Contributor Author

@miroslavstastny , @mnajdova , @pompomon Maybe you can also check if you have any thoughts on this?

@msft-github-bot
Copy link
Copy Markdown
Contributor

Hello @assuncaocharles!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.

@msft-github-bot msft-github-bot merged commit 23f43cf into microsoft:master Sep 7, 2020
hutchcodes pushed a commit to hutchcodes/fluentui that referenced this pull request Sep 10, 2020
#### Pull request checklist

- [ ] Addresses an existing issue: Fixes #0000
- [ ] Include a change request file using `$ yarn change`

#### Description of changes

As agreed this PR adds a **private** prototype for `Menu` with submenus

![gLOC5mb5gx](https://user-images.githubusercontent.com/8545105/91737428-5d93e880-ebaf-11ea-80d2-cbeaf96f779e.gif)


#### Focus areas to test

(optional)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants