Skip to content

Fixed Toolbar menu#16141

Merged
TanelVari merged 3 commits into
microsoft:masterfrom
TanelVari:TanelVari/menu-item-height
Dec 15, 2020
Merged

Fixed Toolbar menu#16141
TanelVari merged 3 commits into
microsoft:masterfrom
TanelVari:TanelVari/menu-item-height

Conversation

@TanelVari
Copy link
Copy Markdown
Contributor

@TanelVari TanelVari commented Dec 4, 2020 •
edited by ecraig12345
Loading

Pull request checklist

Description of changes

Modified Toolbar menu styles to match visuals for Menu in Teams theme

@msft-github-bot msft-github-bot added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label Dec 4, 2020
@TanelVari
Copy link
Copy Markdown
Contributor Author

TanelVari commented Dec 4, 2020

Before:
image

After:
image

@TanelVari TanelVari requested a review from codepretty December 4, 2020 08:22
@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci Bot commented Dec 4, 2020 •
edited
Loading

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

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration
fluent-ui-example (forked) Issue #15877

@msft-github-bot
Copy link
Copy Markdown
Contributor

msft-github-bot commented Dec 4, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 896 871 5000
BaseButtonCompat mount 1011 1004 5000
Breadcrumb mount 42621 43919 5000
Checkbox mount 1635 1611 5000
CheckboxBase mount 1383 1393 5000
ChoiceGroup mount 5134 5184 5000
ComboBox mount 1015 1003 1000
CommandBar mount 10250 10124 1000
ContextualMenu mount 6181 6306 1000
DefaultButtonCompat mount 1197 1225 5000
DetailsRow mount 3812 3826 5000
DetailsRowFast mount 3888 3839 5000
DetailsRowNoStyles mount 3581 3568 5000
Dialog mount 1508 1507 1000
DocumentCardTitle mount 1765 1746 1000
Dropdown mount 3488 3506 5000
FocusTrapZone mount 1840 1936 5000
FocusZone mount 1812 1938 5000
IconButtonCompat mount 1917 2001 5000
Label mount 332 372 5000
Layer mount 1871 1911 5000
Link mount 496 477 5000
MenuButtonCompat mount 1538 1585 5000
MessageBar mount 1946 1986 5000
Nav mount 3249 3328 1000
OverflowSet mount 1035 1050 5000
Panel mount 1464 1469 1000
Persona mount 892 868 1000
Pivot mount 1456 1422 1000
PrimaryButtonCompat mount 1299 1327 5000
Rating mount 7742 7801 5000
SearchBox mount 1321 1395 5000
Shimmer mount 2650 2615 5000
Slider mount 1973 1956 5000
SpinButton mount 5090 5059 5000
Spinner mount 411 415 5000
SplitButtonCompat mount 3340 3238 5000
Stack mount 540 538 5000
StackWithIntrinsicChildren mount 1677 1659 5000
StackWithTextChildren mount 4821 4932 5000
SwatchColorPicker mount 10221 10476 5000
Tabs mount 1420 1381 1000
TagPicker mount 2876 2866 5000
TeachingBubble mount 11567 11675 5000
Text mount 422 432 5000
TextField mount 1466 1463 5000
ThemeProvider mount 2139 2156 5000
ThemeProvider virtual-rerender 633 644 5000
Toggle mount 808 805 5000
button mount 663 712 5000
buttonNative mount 112 118 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.52 0.55 0.95:1 2000 1030
🦄 Button.Fluent 0.13 0.25 0.52:1 5000 654
🔧 Checkbox.Fluent 0.7 0.39 1.79:1 1000 703
🎯 Dialog.Fluent 0.18 0.24 0.75:1 5000 886
🔧 Dropdown.Fluent 3.21 0.49 6.55:1 1000 3207
🔧 Icon.Fluent 0.17 0.07 2.43:1 5000 848
🦄 Image.Fluent 0.09 0.14 0.64:1 5000 448
🔧 Slider.Fluent 1.69 0.49 3.45:1 1000 1685
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 411
🦄 Tooltip.Fluent 0.12 0.92 0.13:1 5000 619

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 184 155 1.19:1
ButtonMinimalPerf.default 205 186 1.1:1
AccordionMinimalPerf.default 184 169 1.09:1
TreeWith60ListItems.default 254 236 1.08:1
VideoMinimalPerf.default 801 740 1.08:1
GridMinimalPerf.default 415 389 1.07:1
ImageMinimalPerf.default 459 427 1.07:1
ListWith60ListItems.default 1082 1015 1.07:1
PopupMinimalPerf.default 772 723 1.07:1
FlexMinimalPerf.default 345 325 1.06:1
ItemLayoutMinimalPerf.default 1465 1383 1.06:1
LayoutMinimalPerf.default 497 469 1.06:1
AnimationMinimalPerf.default 450 428 1.05:1
Icon.Fluent 848 806 1.05:1
AttachmentMinimalPerf.default 193 185 1.04:1
ChatWithPopoverPerf.default 503 483 1.04:1
DropdownManyItemsPerf.default 816 787 1.04:1
HeaderMinimalPerf.default 433 415 1.04:1
LabelMinimalPerf.default 488 468 1.04:1
ProviderMergeThemesPerf.default 2116 2036 1.04:1
Text.Fluent 411 396 1.04:1
Tooltip.Fluent 619 597 1.04:1
ButtonUseCssNestingPerf.default 1145 1111 1.03:1
CarouselMinimalPerf.default 499 484 1.03:1
DialogMinimalPerf.default 843 821 1.03:1
LoaderMinimalPerf.default 821 796 1.03:1
SkeletonMinimalPerf.default 502 489 1.03:1
StatusMinimalPerf.default 818 792 1.03:1
Avatar.Fluent 1030 1004 1.03:1
ButtonOverridesMissPerf.default 1796 1766 1.02:1
ButtonUseCssPerf.default 884 866 1.02:1
ChatMinimalPerf.default 678 664 1.02:1
CheckboxMinimalPerf.default 2968 2905 1.02:1
DatepickerMinimalPerf.default 49023 47885 1.02:1
InputMinimalPerf.default 1402 1371 1.02:1
MenuMinimalPerf.default 968 945 1.02:1
SliderMinimalPerf.default 1674 1635 1.02:1
SplitButtonMinimalPerf.default 4056 3964 1.02:1
TableMinimalPerf.default 472 464 1.02:1
CustomToolbarPrototype.default 4289 4193 1.02:1
ToolbarMinimalPerf.default 1078 1053 1.02:1
Dropdown.Fluent 3207 3148 1.02:1
AttachmentSlotsPerf.default 1218 1203 1.01:1
AvatarMinimalPerf.default 514 507 1.01:1
DividerMinimalPerf.default 423 418 1.01:1
DropdownMinimalPerf.default 3046 3002 1.01:1
ListCommonPerf.default 750 745 1.01:1
ListMinimalPerf.default 556 552 1.01:1
MenuButtonMinimalPerf.default 1688 1669 1.01:1
RadioGroupMinimalPerf.default 498 493 1.01:1
IconMinimalPerf.default 747 741 1.01:1
TableManyItemsPerf.default 2410 2389 1.01:1
ChatDuplicateMessagesPerf.default 449 447 1:1
EmbedMinimalPerf.default 4293 4297 1:1
HeaderSlotsPerf.default 876 880 1:1
Checkbox.Fluent 703 705 1:1
CardMinimalPerf.default 618 625 0.99:1
FormMinimalPerf.default 474 479 0.99:1
Button.Fluent 654 658 0.99:1
Dialog.Fluent 886 891 0.99:1
AlertMinimalPerf.default 326 334 0.98:1
ButtonSlotsPerf.default 630 644 0.98:1
ListNestedPerf.default 634 650 0.98:1
Image.Fluent 448 456 0.98:1
Slider.Fluent 1685 1724 0.98:1
TextMinimalPerf.default 408 422 0.97:1
BoxMinimalPerf.default 394 409 0.96:1
ProviderMinimalPerf.default 1106 1150 0.96:1
TextAreaMinimalPerf.default 577 598 0.96:1
TooltipMinimalPerf.default 891 932 0.96:1
SegmentMinimalPerf.default 426 449 0.95:1
ReactionMinimalPerf.default 481 515 0.93:1
TreeMinimalPerf.default 877 951 0.92:1
RefMinimalPerf.default 240 265 0.91:1

@size-auditor
Copy link
Copy Markdown

size-auditor Bot commented Dec 4, 2020 •
edited
Loading

Asset size changes

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

Baseline commit: 4c7225a448dd80954e3eb63658732acf6cad0dcc (build)

@codepretty
Copy link
Copy Markdown
Contributor

codepretty commented Dec 4, 2020

@TanelVari can you also attach a screenshot of the focus state of a toolbar menu list item?

@TanelVari
Copy link
Copy Markdown
Contributor Author

TanelVari commented Dec 7, 2020

image
image
image
image
image
image

@TanelVari TanelVari merged commit ff49873 into microsoft:master Dec 15, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@miroslavstastny miroslavstastny miroslavstastny approved these changes

@assuncaocharles assuncaocharles Awaiting requested review from assuncaocharles

@dzearing dzearing Awaiting requested review from dzearing

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar

@layershifter layershifter Awaiting requested review from layershifter

@ling1726 ling1726 Awaiting requested review from ling1726

@pompomon pompomon Awaiting requested review from pompomon

@codepretty codepretty Awaiting requested review from codepretty

Assignees

@ecraig12345 ecraig12345

Labels

Component: Toolbar Fluent UI react-northstar (v0) Work related to Fluent UI V0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Toolbar menu has incorrect styles in Fluent UI react-northstar

5 participants

@TanelVari @msft-github-bot @codepretty @miroslavstastny @ecraig12345