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

MenuButton: Creating component using compose #13812

Merged
merged 21 commits into from Jul 8, 2020

Conversation

khmakoto
Copy link
Member

@khmakoto khmakoto commented Jun 26, 2020

Pull request checklist

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

Description of changes

This is a first stab at a MenuButton component using compose. At the moment I'm making using of ContextualMenu to build this but only on the opinionated version and we can swap it for whatever once we have a more refined new Menu component.

MenuButton

Focus areas to test

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jun 26, 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 e8270ad:

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

@size-auditor
Copy link

size-auditor bot commented Jun 26, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-next-ToggleButton 21.955 kB 21.998 kB ExceedsBaseline     43 bytes
office-ui-fabric-react fluentui-react-next-Button 20.747 kB 20.713 kB BelowBaseline     -34 bytes

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

Baseline commit: 5622cd353f0dc368f8ffe4d59af2ee40c60f5053 (build)

import { ButtonProps, ButtonTokens } from '../Button/Button.types';

export interface MenuButtonProps extends Omit<ButtonProps, 'icon' | 'iconPosition' | 'loader'> {
/**
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Out of curiosity, why can't a menu button have an icon to the left?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted to omit extra icons when having a MenuButton besides the menuIcon itself.

This brings a good point of discussion though:

  • Should we allow the menuIcon to be on the left as well?
  • Should we allow for an icon besides the menuIcon?
  • If so, should we allow that icon to be able to exist before and after the content or just before?

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Jun 27, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 892 921 5000
ButtonNext mount 568 602 5000
Checkbox mount 1637 1602 5000
CheckboxBase mount 1304 1300 5000
CheckboxNext mount 1585 1593 5000
ChoiceGroup mount 5064 4932 5000
ComboBox mount 961 898 1000
CommandBar mount 7739 7673 1000
ContextualMenu mount 13656 13635 1000
DefaultButton mount 1118 1121 5000
DetailsRow mount 3652 3607 5000
DetailsRowFast mount 3792 3706 5000
DetailsRowNoStyles mount 3428 3412 5000
Dialog mount 1507 1573 1000
DocumentCardTitle mount 1823 1826 1000
Dropdown mount 2567 2579 5000
FocusZone mount 1842 1861 5000
IconButton mount 1707 1787 5000
Label mount 339 333 5000
Link mount 436 441 5000
LinkNext mount 457 454 5000
MenuButton mount 1568 1483 5000
Nav mount 3201 3359 1000
Panel mount 1456 1488 1000
Persona mount 855 845 1000
Pivot mount 1396 1407 1000
PivotNext mount 1396 1420 1000
PrimaryButton mount 1282 1295 5000
SearchBox mount 1269 1258 5000
SearchBoxNext mount 1266 1359 5000
Slider mount 1557 1502 5000
SliderNext mount 1930 1958 5000
Spinner mount 417 432 5000
SplitButton mount 3208 3200 5000
Stack mount 541 516 5000
StackWithIntrinsicChildren mount 2055 2041 5000
StackWithTextChildren mount 5187 5085 5000
TagPicker mount 2769 2872 5000
Text mount 447 449 5000
TextField mount 1422 1380 5000
ThemeProvider mount 3058 3001 5000
ThemeProvider virtual-rerender 534 518 5000
Toggle mount 885 862 5000
ToggleNext mount 815 823 5000
button mount 114 108 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.44 0.46 0.96:1 2000 886
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 556
🔧 Checkbox.Fluent 0.64 0.35 1.83:1 1000 640
🦄 Dialog.Fluent 0.15 0.22 0.68:1 5000 743
🔧 Dropdown.Fluent 3.46 0.46 7.52:1 1000 3464
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 682
🦄 Image.Fluent 0.07 0.11 0.64:1 5000 341
🔧 Slider.Fluent 1.64 0.36 4.56:1 1000 1636
🔧 Text.Fluent 0.06 0.03 2:1 5000 321
🦄 Tooltip.Fluent 0.1 18.61 0.01:1 5000 503

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
BoxMinimalPerf.default 331 301 1.1:1
SegmentMinimalPerf.default 358 327 1.09:1
Button.Fluent 556 514 1.08:1
GridMinimalPerf.default 319 299 1.07:1
AnimationMinimalPerf.default 380 357 1.06:1
CardMinimalPerf.default 531 502 1.06:1
ChatDuplicateMessagesPerf.default 412 393 1.05:1
ChatWithPopoverPerf.default 468 444 1.05:1
IconMinimalPerf.default 678 643 1.05:1
ImageMinimalPerf.default 349 335 1.04:1
PopupMinimalPerf.default 648 623 1.04:1
ReactionMinimalPerf.default 392 377 1.04:1
TextAreaMinimalPerf.default 486 466 1.04:1
AlertMinimalPerf.default 269 260 1.03:1
ProviderMinimalPerf.default 891 862 1.03:1
TableManyItemsPerf.default 2277 2215 1.03:1
TooltipMinimalPerf.default 769 748 1.03:1
Checkbox.Fluent 640 622 1.03:1
Dropdown.Fluent 3464 3370 1.03:1
AttachmentSlotsPerf.default 1191 1162 1.02:1
AvatarMinimalPerf.default 461 452 1.02:1
CarouselMinimalPerf.default 448 439 1.02:1
CheckboxMinimalPerf.default 2756 2690 1.02:1
DialogMinimalPerf.default 732 717 1.02:1
HeaderMinimalPerf.default 339 333 1.02:1
VideoMinimalPerf.default 637 624 1.02:1
Slider.Fluent 1636 1607 1.02:1
DividerMinimalPerf.default 334 332 1.01:1
ListMinimalPerf.default 472 468 1.01:1
MenuButtonMinimalPerf.default 1500 1478 1.01:1
RadioGroupMinimalPerf.default 400 397 1.01:1
SliderMinimalPerf.default 1602 1585 1.01:1
TableMinimalPerf.default 411 407 1.01:1
TextMinimalPerf.default 336 332 1.01:1
CustomToolbarPrototype.default 3745 3691 1.01:1
TreeMinimalPerf.default 862 856 1.01:1
Avatar.Fluent 886 878 1.01:1
Text.Fluent 321 318 1.01:1
ChatMinimalPerf.default 582 582 1:1
LayoutMinimalPerf.default 378 379 1:1
ListCommonPerf.default 922 918 1:1
ListWith60ListItems.default 1081 1082 1:1
MenuMinimalPerf.default 844 847 1:1
SplitButtonMinimalPerf.default 3738 3724 1:1
StatusMinimalPerf.default 670 671 1:1
Dialog.Fluent 743 741 1:1
Tooltip.Fluent 503 503 1:1
AttachmentMinimalPerf.default 152 154 0.99:1
InputMinimalPerf.default 1008 1015 0.99:1
ListNestedPerf.default 884 891 0.99:1
LoaderMinimalPerf.default 739 748 0.99:1
Icon.Fluent 682 692 0.99:1
TreeWith60ListItems.default 218 223 0.98:1
ButtonSlotsPerf.default 573 588 0.97:1
DropdownManyItemsPerf.default 1322 1360 0.97:1
DropdownMinimalPerf.default 3245 3340 0.97:1
ItemLayoutMinimalPerf.default 1144 1181 0.97:1
LabelMinimalPerf.default 376 388 0.97:1
Image.Fluent 341 351 0.97:1
HierarchicalTreeMinimalPerf.default 386 401 0.96:1
PortalMinimalPerf.default 116 121 0.96:1
RefMinimalPerf.default 196 205 0.96:1
ProviderMergeThemesPerf.default 1862 1966 0.95:1
FormMinimalPerf.default 350 373 0.94:1
HeaderSlotsPerf.default 711 768 0.93:1
ToolbarMinimalPerf.default 923 995 0.93:1
EmbedMinimalPerf.default 1887 2043 0.92:1
FlexMinimalPerf.default 246 268 0.92:1
AccordionMinimalPerf.default 124 141 0.88:1
ButtonMinimalPerf.default 134 182 0.74:1

@msft-github-bot
Copy link
Contributor

Hello @khmakoto!

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 2091028 into microsoft:master Jul 8, 2020
@khmakoto khmakoto deleted the menuButton branch July 8, 2020 22:55
@msft-github-bot
Copy link
Contributor

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

Handy links:

@msft-github-bot
Copy link
Contributor

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

Handy links:

@msft-github-bot
Copy link
Contributor

🎉office-ui-fabric-react@v7.121.12 has been released which incorporates this pull request.:tada:

Handy links:

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

Successfully merging this pull request may close these issues.

None yet

6 participants