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

Converged menu spec #16517

Merged
merged 45 commits into from
Feb 1, 2021
Merged

Converged menu spec #16517

merged 45 commits into from
Feb 1, 2021

Conversation

ling1726
Copy link
Member

@ling1726 ling1726 commented Jan 18, 2021

Accepting feedback of all kinds since I can't find any other specs that follow the new template. I might resolve more complicated discussions for spec review to keep the PR clean to review.

Might be easier on the eyes just to open the file not in review mode

Spec template: https://github.com/microsoft/fluentui/wiki/Spec-Template

  • Expected dom output from components
  • Get A11y champs input on spec
  • Spec behaviour of split button with A11y champs
  • Address positioning issue in spec review hours
  • Incorporate v0 submenu positioning
  • More details on menu context
  • More details on v0 and v7 mapping

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 18, 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 85c1a4d:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 19, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 860 894 5000
BaseButtonCompat mount 952 948 5000
Breadcrumb mount 44545 45085 5000
Checkbox mount 1500 1516 5000
CheckboxBase mount 1261 1267 5000
ChoiceGroup mount 4721 4784 5000
ComboBox mount 997 962 1000
CommandBar mount 10585 10545 1000
ContextualMenu mount 6373 6471 1000
DefaultButtonCompat mount 1129 1147 5000
DetailsRow mount 3690 3698 5000
DetailsRowFast mount 3740 3671 5000
DetailsRowNoStyles mount 3388 3472 5000
Dialog mount 1733 1519 1000
DocumentCardTitle mount 1833 1836 1000
Dropdown mount 3645 3731 5000
FocusTrapZone mount 1814 2086 5000
FocusZone mount 1923 1853 5000
IconButtonCompat mount 1860 1867 5000
Label mount 338 340 5000
Layer mount 1813 1763 5000
Link mount 470 465 5000
MakeStyles mount 2202 2189 50000
MenuButtonCompat mount 1451 1439 5000
MessageBar mount 2036 1999 5000
Nav mount 3279 3233 1000
OverflowSet mount 1035 1089 5000
Panel mount 1370 1493 1000
Persona mount 872 878 1000
Pivot mount 1367 1380 1000
PrimaryButtonCompat mount 1292 1308 5000
Rating mount 7749 7458 5000
SearchBox mount 1360 1329 5000
Shimmer mount 2602 2541 5000
Slider mount 1921 1883 5000
SpinButton mount 5055 5055 5000
Spinner mount 426 398 5000
SplitButtonCompat mount 3235 3147 5000
Stack mount 585 509 5000
StackWithIntrinsicChildren mount 1667 1588 5000
StackWithTextChildren mount 4954 4617 5000
SwatchColorPicker mount 10814 10781 5000
Tabs mount 1371 1556 1000
TagPicker mount 2836 2838 5000
TeachingBubble mount 11672 11786 5000
Text mount 423 442 5000
TextField mount 1371 1402 5000
ThemeProvider mount 2139 2277 5000
ThemeProvider virtual-rerender 645 659 5000
Toggle mount 786 814 5000
button mount 675 688 5000
buttonNative mount 102 123 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.17 0.51 0.33:1 2000 340
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 585
🔧 Checkbox.Fluent 0.68 0.38 1.79:1 1000 679
🎯 Dialog.Fluent 0.17 0.21 0.81:1 5000 847
🔧 Dropdown.Fluent 3.07 0.41 7.49:1 1000 3068
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 703
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 404
🔧 Slider.Fluent 1.63 0.45 3.62:1 1000 1633
🔧 Text.Fluent 0.08 0.04 2:1 5000 397
🦄 Tooltip.Fluent 0.12 0.9 0.13:1 5000 592

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
SegmentMinimalPerf.default 405 364 1.11:1
TextMinimalPerf.default 414 376 1.1:1
AlertMinimalPerf.default 335 307 1.09:1
Image.Fluent 404 372 1.09:1
ButtonSlotsPerf.default 631 597 1.06:1
ListWith60ListItems.default 702 662 1.06:1
Checkbox.Fluent 679 639 1.06:1
Dialog.Fluent 847 800 1.06:1
Text.Fluent 397 376 1.06:1
FormMinimalPerf.default 457 437 1.05:1
ListMinimalPerf.default 522 499 1.05:1
AttachmentMinimalPerf.default 172 165 1.04:1
FlexMinimalPerf.default 323 312 1.04:1
PortalMinimalPerf.default 176 170 1.04:1
ProviderMinimalPerf.default 1011 969 1.04:1
ReactionMinimalPerf.default 442 427 1.04:1
ChatMinimalPerf.default 649 632 1.03:1
HeaderMinimalPerf.default 401 389 1.03:1
StatusMinimalPerf.default 761 742 1.03:1
ToolbarMinimalPerf.default 998 972 1.03:1
Tooltip.Fluent 592 577 1.03:1
AttachmentSlotsPerf.default 1250 1224 1.02:1
DropdownManyItemsPerf.default 768 751 1.02:1
GridMinimalPerf.default 371 362 1.02:1
ItemLayoutMinimalPerf.default 1266 1243 1.02:1
LabelMinimalPerf.default 474 463 1.02:1
LoaderMinimalPerf.default 740 727 1.02:1
ProviderMergeThemesPerf.default 1683 1642 1.02:1
VideoMinimalPerf.default 663 648 1.02:1
Button.Fluent 585 573 1.02:1
CarouselMinimalPerf.default 489 484 1.01:1
DialogMinimalPerf.default 831 820 1.01:1
SliderMinimalPerf.default 1635 1621 1.01:1
Icon.Fluent 703 699 1.01:1
AvatarMinimalPerf.default 205 205 1:1
BoxMinimalPerf.default 379 380 1:1
ButtonUseCssNestingPerf.default 1136 1136 1:1
CheckboxMinimalPerf.default 2922 2913 1:1
DropdownMinimalPerf.default 3072 3058 1:1
ImageMinimalPerf.default 395 394 1:1
ListNestedPerf.default 599 600 1:1
MenuMinimalPerf.default 894 898 1:1
PopupMinimalPerf.default 717 717 1:1
RefMinimalPerf.default 256 257 1:1
SkeletonMinimalPerf.default 391 391 1:1
SplitButtonMinimalPerf.default 3822 3825 1:1
TableManyItemsPerf.default 2054 2050 1:1
TableMinimalPerf.default 437 438 1:1
CustomToolbarPrototype.default 3851 3864 1:1
Dropdown.Fluent 3068 3072 1:1
AnimationMinimalPerf.default 426 432 0.99:1
ButtonMinimalPerf.default 186 188 0.99:1
DatepickerMinimalPerf.default 49098 49594 0.99:1
DividerMinimalPerf.default 379 383 0.99:1
MenuButtonMinimalPerf.default 1607 1617 0.99:1
RadioGroupMinimalPerf.default 467 472 0.99:1
TreeMinimalPerf.default 816 823 0.99:1
ButtonOverridesMissPerf.default 1723 1755 0.98:1
ChatDuplicateMessagesPerf.default 370 377 0.98:1
EmbedMinimalPerf.default 4244 4323 0.98:1
LayoutMinimalPerf.default 434 445 0.98:1
ListCommonPerf.default 697 712 0.98:1
IconMinimalPerf.default 682 696 0.98:1
TreeWith60ListItems.default 183 186 0.98:1
ButtonUseCssPerf.default 844 871 0.97:1
CardMinimalPerf.default 578 593 0.97:1
HeaderSlotsPerf.default 790 812 0.97:1
InputMinimalPerf.default 1351 1392 0.97:1
Slider.Fluent 1633 1687 0.97:1
TooltipMinimalPerf.default 840 876 0.96:1
Avatar.Fluent 340 353 0.96:1
ChatWithPopoverPerf.default 448 470 0.95:1
RosterPerf.default 1174 1251 0.94:1
AccordionMinimalPerf.default 163 185 0.88:1
TextAreaMinimalPerf.default 510 580 0.88:1

@size-auditor
Copy link

size-auditor bot commented Jan 19, 2021

Asset size changes

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

Baseline commit: a8004b125ce874302247360efece97645dc0963a (build)

</ul>
Both will also flip appropriately when the overflow boundary is too small.

The main difference between the two is that v0 submenu's position does not expose any way to customize or override the positioning of the submenu. However v7 allows every single customization as the root menu. It is very possible to do the below:
Copy link
Contributor

Choose a reason for hiding this comment

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

I think it is possible to pass popper props to submenu. @layershifter is it correct?

Copy link
Member Author

Choose a reason for hiding this comment

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

Looking at our code I don't think so:

Copy link
Member Author

Choose a reason for hiding this comment

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

It is possible but is actually not present in our documentation, it's a hidden prop you can add menu.popper https://fluentsite.z22.web.core.windows.net/0.52.0/components/menu/props

Copy link
Member

@levithomason levithomason Feb 1, 2021

Choose a reason for hiding this comment

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

Just FYI, hidden props mean we failed. Let's ensure we don't do this moving forward. We should consider how to automate testing for these kinds of cases, no hidden props.

@ling1726 ling1726 marked this pull request as ready for review January 26, 2021 13:49
Copy link
Member

@levithomason levithomason left a comment

Choose a reason for hiding this comment

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

👍 Awesome work @ling1726, thanks much. Can't wait to see the first implementation now :D

@ling1726 ling1726 merged commit d2c9430 into microsoft:master Feb 1, 2021
@JustSlone JustSlone mentioned this pull request Feb 2, 2021
25 tasks
@JustSlone JustSlone added the Type: Spec Component spec PR label Feb 10, 2021
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.

Menu Convergence Menu convergence - January Project Cycle
9 participants