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

chore(MenuDivider): use compose() #13207

Merged
merged 9 commits into from
May 18, 2020
Merged

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented May 18, 2020

Pull request checklist

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

BREAKING CHANGES

Move the style for the slot's of the MenuDivider from menuItemStyles.

Before

const menuStyles = {
  divider: () => {...}, // move this to menuDivider styles
}

After

const menuDividerStyles = {
  root: () => {...}, // this is ok
}

Description of changes

This PR uses compose() in MenuDivider.

Focus areas to test

(optional)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented May 18, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 733 730 5000
Checkbox 1464 1430 5000
CheckboxBase 1158 1198 5000
CheckboxNext 1461 1415 5000
ChoiceGroup 4573 4541 5000
ComboBox 843 870 1000
CommandBar 7231 7208 1000
ContextualMenu 14874 14453 1000
DefaultButton 979 967 5000
DetailsRow 3131 3165 5000
DetailsRow (fast icons) 3129 3103 5000
DetailsRow without styles 2996 2929 5000
Dialog 1349 1356 1000
DocumentCardTitle with truncation 1579 1581 1000
Dropdown 2189 2205 5000
FocusZone 1567 1497 5000
IconButton 1551 1578 5000
Label 275 299 5000
Link 423 425 5000
LinkNext 425 412 5000
MenuButton 1263 1280 5000
Nav 2905 2934 1000
Panel 1323 1383 1000
Persona 758 763 1000
Pivot 1214 1207 1000
PrimaryButton 1100 1104 5000
SearchBox 1149 1126 5000
Slider 1375 1390 5000
Spinner 366 360 5000
SplitButton 2854 2808 5000
Stack 419 438 5000
Stack with Intrinsic children 1026 1031 5000
Stack with Text children 3790 3738 5000
TagPicker 2522 2524 5000
Text 337 356 5000
TextField 1281 1287 5000
Toggle 831 808 5000
button 61 54 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.44 0.45 0.98:1 2000 888
🦄 Button.Fluent 0.1 0.18 0.56:1 5000 483
🔧 Checkbox.Fluent 0.62 0.32 1.94:1 1000 620
🔧 Dialog.Fluent 0.33 0.19 1.74:1 5000 1629
🔧 Dropdown.Fluent 3.18 0.41 7.76:1 1000 3180
🔧 Icon.Fluent 0.13 0.04 3.25:1 5000 635
🎯 Image.Fluent 0.07 0.1 0.7:1 5000 332
🔧 Slider.Fluent 1.34 0.32 4.19:1 1000 1340
🔧 Text.Fluent 0.06 0.02 3:1 5000 315
🦄 Tooltip.Fluent 0.09 19.61 0:1 5000 440

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
DropdownMinimalPerf.default 3426 3094 1.11:1
AlertMinimalPerf.default 290 272 1.07:1
AvatarMinimalPerf.default 491 459 1.07:1
ButtonMinimalPerf.default 163 152 1.07:1
ChatDuplicateMessagesPerf.default 406 380 1.07:1
RadioGroupMinimalPerf.default 527 493 1.07:1
Text.Fluent 315 298 1.06:1
EmbedMinimalPerf.default 1917 1818 1.05:1
GridMinimalPerf.default 663 634 1.05:1
PortalMinimalPerf.default 290 277 1.05:1
Image.Fluent 332 316 1.05:1
AnimationMinimalPerf.default 598 574 1.04:1
BoxMinimalPerf.default 304 292 1.04:1
LabelMinimalPerf.default 373 357 1.04:1
ProviderMinimalPerf.default 675 649 1.04:1
AttachmentMinimalPerf.default 150 146 1.03:1
ButtonSlotsPerf.default 601 586 1.03:1
DropdownManyItemsPerf.default 1300 1257 1.03:1
HierarchicalTreeMinimalPerf.default 905 876 1.03:1
ImageMinimalPerf.default 331 322 1.03:1
MenuMinimalPerf.default 624 605 1.03:1
PopupMinimalPerf.default 248 241 1.03:1
ReactionMinimalPerf.default 347 337 1.03:1
ItemLayoutMinimalPerf.default 1542 1509 1.02:1
ListMinimalPerf.default 436 427 1.02:1
TextMinimalPerf.default 320 315 1.02:1
TooltipMinimalPerf.default 672 662 1.02:1
CarouselMinimalPerf.default 453 450 1.01:1
DividerMinimalPerf.default 307 304 1.01:1
HeaderSlotsPerf.default 1327 1316 1.01:1
MenuButtonMinimalPerf.default 1441 1420 1.01:1
ProviderMergeThemesPerf.default 1813 1800 1.01:1
SegmentMinimalPerf.default 317 313 1.01:1
StatusMinimalPerf.default 601 598 1.01:1
Avatar.Fluent 888 878 1.01:1
Button.Fluent 483 476 1.01:1
Dropdown.Fluent 3180 3136 1.01:1
CardMinimalPerf.default 505 507 1:1
ChatWithPopoverPerf.default 498 499 1:1
DialogMinimalPerf.default 1607 1613 1:1
InputMinimalPerf.default 965 966 1:1
LayoutMinimalPerf.default 511 509 1:1
ListWith60ListItems.default 1062 1064 1:1
ToolbarMinimalPerf.default 753 756 1:1
Slider.Fluent 1340 1339 1:1
Tooltip.Fluent 440 442 1:1
AttachmentSlotsPerf.default 1068 1075 0.99:1
ListCommonPerf.default 904 909 0.99:1
LoaderMinimalPerf.default 731 740 0.99:1
SplitButtonMinimalPerf.default 3160 3176 0.99:1
Checkbox.Fluent 620 628 0.99:1
Dialog.Fluent 1629 1647 0.99:1
AccordionMinimalPerf.default 134 137 0.98:1
ChatMinimalPerf.default 583 595 0.98:1
CheckboxMinimalPerf.default 2774 2817 0.98:1
FlexMinimalPerf.default 257 263 0.98:1
HeaderMinimalPerf.default 441 450 0.98:1
ListNestedPerf.default 819 837 0.98:1
RefMinimalPerf.default 188 191 0.98:1
TextAreaMinimalPerf.default 437 445 0.98:1
CustomToolbarPrototype.default 3509 3566 0.98:1
TreeMinimalPerf.default 1109 1128 0.98:1
Icon.Fluent 635 648 0.98:1
SliderMinimalPerf.default 1306 1347 0.97:1
IconMinimalPerf.default 601 620 0.97:1
FormMinimalPerf.default 340 353 0.96:1
TableMinimalPerf.default 343 369 0.93:1
TreeWith60ListItems.default 194 212 0.92:1
VideoMinimalPerf.default 563 633 0.89:1

@size-auditor
Copy link

size-auditor bot commented May 18, 2020

Asset size changes

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

Baseline commit: 27704edfdb5f6e183cd745200fc984f2d2bd13ee (build)


export type MenuDividerStylesProps = Required<Pick<MenuDividerProps, 'vertical' | 'inSubmenu' | 'primary'>> & {
export type MenuDividerStylesProps = Required<
Pick<MenuDividerProps, 'vertical' | 'inSubmenu' | 'pills' | 'primary' | 'pointing'>
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we add secondary here? I know we are not currently using it inside the theme, but if we have the prop I believe it should be added here too..

Copy link
Member Author

Choose a reason for hiding this comment

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

Yep, added

}),
}),
} as ComponentSlotStylesPrepared<MenuStylesProps, MenuVariables>;
};
Copy link
Contributor

Choose a reason for hiding this comment

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

Please add this to the PR description breaking changes

@@ -44,6 +44,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
- Update `padding` and `margin` styles for `Card` @pompomon ([#13158](https://github.com/microsoft/fluentui/pull/13158))
- Add `expandabble` prop and styles for `Card` @pompomon ([#13092](https://github.com/microsoft/fluentui/pull/13092))
- Use `compose()` in `MenuItem` and added dedicated slot's components `MenuItemIcon`, `MenuItemContent`, `MenuItemIndicator` and `MenuItemWrapper` @mnajdova ([#13117](https://github.com/microsoft/fluentui/pull/13117))
- Use `compose()` in `MenuDivider` @layershifter ([#13207](https://github.com/microsoft/fluentui/pull/13207))
Copy link
Contributor

Choose a reason for hiding this comment

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

Probably deserves also breaking changes section because of the styles being moved from Menu's divider slot to MenuDivider inside the theme. Styles overrides will be broken on client's side

Copy link
Member Author

Choose a reason for hiding this comment

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

Added

@layershifter layershifter reopened this May 18, 2020
@layershifter layershifter reopened this May 18, 2020
@layershifter layershifter reopened this May 18, 2020
@layershifter layershifter merged commit d8c9366 into master May 18, 2020
@layershifter layershifter deleted the chore/menudivider-compose branch May 18, 2020 18:27
miroslavstastny pushed a commit to levithomason/fluentui that referenced this pull request Jun 8, 2020
* chore(MenuDivider): use `compose()`

* fix exports

* fix options usage

* move styles to MenuDivider

* remove unused styles

* add secondary

* add changelog entry

* add breaking change
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants