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.

Sign up for GitHub

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

Jump to bottom

feat(ToolbarMenuItem): use compose() #13350

Merged
merged 7 commits into from
May 27, 2020
Merged

feat(ToolbarMenuItem): use compose() #13350

merged 7 commits into from
May 27, 2020

Conversation

mnajdova
Copy link
Contributor

@mnajdova mnajdova commented May 27, 2020 •
edited

BREAKING CHANGES

Before:

import { toolbarMenuItemSlotClassNames } from '@fluentui/react-northstar';

console.log(toolbarMenuItemSlotClassNames.activeIndicator);
console.log(toolbarMenuItemSlotClassNames.submenuIndicator);

After:

import { toolbarMenuItemSubmenuIndicatorClassName, toolbarMenuItemActiveIndicatorClassName } from '@fluentui/react-northstar';

console.log(toolbarMenuItemActiveIndicatorClassName);
console.log(toolbarMenuItemSubmenuIndicatorClassName);

@mnajdova
-added compose in toolbar menu item
450c485
@mnajdova
Merge branch 'master' into feat/toolbar-menu-item-compose
3d3b999 
# Conflicts:
#	packages/fluentui/react-northstar/src/themes/teams-high-contrast/componentVariables.ts
@mnajdova
-expanded compose example
be57830
@mnajdova
-added todos
41ec279
@msft-github-bot msft-github-bot added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label May 27, 2020
@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 853 855 5000
ButtonNext 464 484 5000
Checkbox 1592 1608 5000
CheckboxBase 1359 1359 5000
CheckboxNext 1627 1598 5000
ChoiceGroup 5127 5106 5000
ComboBox 934 1033 1000
CommandBar 8095 8074 1000
ContextualMenu 13741 13561 1000
DefaultButton 1090 1060 5000
DetailsRow 3598 3570 5000
DetailsRow (fast icons) 3535 3523 5000
DetailsRow without styles 3372 3437 5000
Dialog 1556 1563 1000
DocumentCardTitle with truncation 2009 2021 1000
Dropdown 2461 2475 5000
FocusZone 1848 1829 5000
IconButton 1724 1709 5000
Label 323 323 5000
Link 471 469 5000
LinkNext 467 454 5000
MenuButton 1432 1457 5000
Nav 3401 3345 1000
Panel 1530 1517 1000
Persona 831 850 1000
Pivot 1440 1424 1000
PrimaryButton 1257 1241 5000
SearchBox 1262 1269 5000
Slider 1540 1518 5000
SliderNext 1923 1909 5000
Spinner 415 397 5000
SplitButton 3141 3122 5000
Stack 491 483 5000
Stack with Intrinsic children 1911 1894 5000
Stack with Text children 5023 5037 5000
TagPicker 2776 2814 5000
Text 412 384 5000
TextField 1409 1427 5000
Toggle 903 889 5000
ToggleNext 869 906 5000
button 83 70 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.72 0.5 1.44:1 2000 1449
🦄 Button.Fluent 0.11 0.2 0.55:1 5000 537
🔧 Checkbox.Fluent 1.08 0.36 3:1 1000 1082
🔧 Dialog.Fluent 0.58 0.22 2.64:1 5000 2903
🔧 Dropdown.Fluent 6.54 0.46 14.22:1 1000 6539
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 715
🦄 Image.Fluent 0.07 0.11 0.64:1 5000 350
🔧 Slider.Fluent 2.92 0.35 8.34:1 1000 2916
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 349
🦄 Tooltip.Fluent 0.1 18.68 0.01:1 5000 479

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 126 115 1.1:1
AlertMinimalPerf.default 340 314 1.08:1
HeaderMinimalPerf.default 354 328 1.08:1
ButtonMinimalPerf.default 173 161 1.07:1
DropdownManyItemsPerf.default 2350 2200 1.07:1
ChatMinimalPerf.default 613 580 1.06:1
DialogMinimalPerf.default 2938 2777 1.06:1
SegmentMinimalPerf.default 346 325 1.06:1
ListCommonPerf.default 1210 1151 1.05:1
ListMinimalPerf.default 481 460 1.05:1
RadioGroupMinimalPerf.default 411 391 1.05:1
TextAreaMinimalPerf.default 459 440 1.04:1
AttachmentSlotsPerf.default 1249 1214 1.03:1
DividerMinimalPerf.default 350 340 1.03:1
MenuButtonMinimalPerf.default 1733 1687 1.03:1
TextMinimalPerf.default 362 351 1.03:1
TooltipMinimalPerf.default 772 748 1.03:1
Avatar.Fluent 1449 1407 1.03:1
ChatDuplicateMessagesPerf.default 550 538 1.02:1
FlexMinimalPerf.default 296 289 1.02:1
HierarchicalTreeMinimalPerf.default 402 395 1.02:1
ImageMinimalPerf.default 355 349 1.02:1
ListNestedPerf.default 1118 1097 1.02:1
ProviderMergeThemesPerf.default 1926 1882 1.02:1
ReactionMinimalPerf.default 378 369 1.02:1
RefMinimalPerf.default 212 208 1.02:1
TableMinimalPerf.default 382 374 1.02:1
CustomToolbarPrototype.default 4985 4905 1.02:1
Dropdown.Fluent 6539 6405 1.02:1
AnimationMinimalPerf.default 739 735 1.01:1
BoxMinimalPerf.default 324 322 1.01:1
CardMinimalPerf.default 553 550 1.01:1
DropdownMinimalPerf.default 6403 6336 1.01:1
LabelMinimalPerf.default 395 390 1.01:1
LayoutMinimalPerf.default 400 397 1.01:1
ListWith60ListItems.default 1596 1584 1.01:1
IconMinimalPerf.default 672 663 1.01:1
TreeMinimalPerf.default 1333 1314 1.01:1
Icon.Fluent 715 705 1.01:1
CheckboxMinimalPerf.default 5238 5219 1:1
HeaderSlotsPerf.default 758 758 1:1
LoaderMinimalPerf.default 1159 1160 1:1
ProviderMinimalPerf.default 849 845 1:1
Button.Fluent 537 536 1:1
Checkbox.Fluent 1082 1081 1:1
Dialog.Fluent 2903 2903 1:1
Image.Fluent 350 350 1:1
CarouselMinimalPerf.default 540 547 0.99:1
ItemLayoutMinimalPerf.default 2674 2699 0.99:1
PopupMinimalPerf.default 274 278 0.99:1
SplitButtonMinimalPerf.default 4043 4087 0.99:1
ToolbarMinimalPerf.default 846 856 0.99:1
Slider.Fluent 2916 2950 0.99:1
Text.Fluent 349 352 0.99:1
ButtonSlotsPerf.default 745 762 0.98:1
MenuMinimalPerf.default 836 853 0.98:1
SliderMinimalPerf.default 2907 2981 0.98:1
FormMinimalPerf.default 379 391 0.97:1
GridMinimalPerf.default 1330 1367 0.97:1
InputMinimalPerf.default 1592 1634 0.97:1
ChatWithPopoverPerf.default 660 691 0.96:1
EmbedMinimalPerf.default 3392 3537 0.96:1
StatusMinimalPerf.default 650 678 0.96:1
TreeWith60ListItems.default 278 289 0.96:1
VideoMinimalPerf.default 585 608 0.96:1
Tooltip.Fluent 479 500 0.96:1
AttachmentMinimalPerf.default 147 154 0.95:1
AvatarMinimalPerf.default 719 754 0.95:1
AccordionMinimalPerf.default 130 148 0.88:1

@size-auditor
Copy link

size-auditor bot commented May 27, 2020

Asset size changes

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

Baseline commit: a562eba88ce9e1029d0aaeda9cc0e5d59a7a91df (build)

@mnajdova mnajdova merged commit 4e3ddd8 into microsoft:master May 27, 2020
miroslavstastny pushed a commit to levithomason/fluentui that referenced this pull request Jun 8, 2020
@mnajdova @miroslavstastny
feat(ToolbarMenuItem): use compose() (microsoft#13350)
a32b0ec 
* -added compose in toolbar menu item

* -expanded compose example

* -added todos

* updated changelog

* -removed todo

* -import fixes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@layershifter layershifter layershifter approved these changes

@dvdzkwsk dvdzkwsk Awaiting requested review from dvdzkwsk

@dzearing dzearing Awaiting requested review from dzearing

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar

@levithomason levithomason Awaiting requested review from levithomason

@miroslavstastny miroslavstastny Awaiting requested review from miroslavstastny

@pompomon pompomon Awaiting requested review from pompomon

Assignees

@ecraig12345 ecraig12345

Labels
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.

None yet
4 participants
@mnajdova @msft-github-bot @layershifter @ecraig12345