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

feat(ToolbarItem): use compose() #13321

Merged
merged 13 commits into from
May 27, 2020

Conversation

mnajdova
Copy link
Contributor

@mnajdova mnajdova commented May 26, 2020

This PR adds compose functionality to ToolbarItem.

BREAKING CHANGES

Restructured className exports for the ToolbarItem's wrapper, which is now a component.

Before

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

console.log(toolbarItemSlotClassNames.wrapper);

After

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

console.log(toolbarItemWrapperClassName);

@@ -126,7 +127,7 @@ const ToolbarRadioGroup: React.FC<WithAsProp<ToolbarRadioGroupProps>> &
return ToolbarDivider.create(item);
}

const toolbarItem = ToolbarItem.create(item, {
const toolbarItem = createShorthand(ToolbarItem, item, {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

ToolbarItem.create was removed

@@ -186,6 +186,9 @@ ToolbarMenu.defaultProps = {
};

ToolbarMenu.create = createShorthandFactory({ Component: ToolbarMenu, mappedArrayProp: 'items' });
ToolbarMenu.shorthandConfig = {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

We need this in the ToolbarItem

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Can we removed after compose is added in ToolbarMenu

@msft-github-bot
Copy link
Contributor

msft-github-bot commented May 26, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 834 871 5000
ButtonNext 480 460 5000
Checkbox 1599 1630 5000
CheckboxBase 1328 1344 5000
CheckboxNext 1559 1631 5000
ChoiceGroup 5104 5083 5000
ComboBox 906 979 1000
CommandBar 8192 8091 1000
ContextualMenu 15887 17012 1000
DefaultButton 1067 1210 5000
DetailsRow 3512 3626 5000
DetailsRow (fast icons) 3615 3625 5000
DetailsRow without styles 3330 3336 5000
Dialog 1554 1538 1000
DocumentCardTitle with truncation 1996 2036 1000
Dropdown 2519 2492 5000
FocusZone 1766 1745 5000
IconButton 1778 1666 5000
Label 342 330 5000
Link 469 521 5000
LinkNext 458 448 5000
MenuButton 1442 1450 5000
Nav 3386 3297 1000
Panel 1532 1519 1000
Persona 849 839 1000
Pivot 1417 1421 1000
PrimaryButton 1320 1236 5000
SearchBox 1167 1312 5000
Slider 1608 1556 5000
SliderNext 1970 1991 5000
Spinner 437 439 5000
SplitButton 3107 3232 5000
Stack 504 479 5000
Stack with Intrinsic children 1943 1845 5000
Stack with Text children 4990 4975 5000
TagPicker 2855 2827 5000
Text 414 381 5000
TextField 1383 1412 5000
Toggle 896 894 5000
ToggleNext 915 885 5000
button 82 75 5000

Perf Analysis (Fluent)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
CustomToolbarPrototype.default 4878 4951 0.99:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.69 0.49 1.41:1 2000 1380
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 559
🔧 Checkbox.Fluent 1.1 0.35 3.14:1 1000 1096
🔧 Dialog.Fluent 0.56 0.22 2.55:1 5000 2808
🔧 Dropdown.Fluent 6.28 0.44 14.27:1 1000 6278
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 683
🎯 Image.Fluent 0.08 0.11 0.73:1 5000 380
🔧 Slider.Fluent 2.9 0.35 8.29:1 1000 2901
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 359
🦄 Tooltip.Fluent 0.1 21.22 0:1 5000 511

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
FormMinimalPerf.default 380 338 1.12:1
Text.Fluent 359 323 1.11:1
IconMinimalPerf.default 705 661 1.07:1
AnimationMinimalPerf.default 747 702 1.06:1
AvatarMinimalPerf.default 733 690 1.06:1
AlertMinimalPerf.default 340 325 1.05:1
FlexMinimalPerf.default 292 278 1.05:1
HierarchicalTreeMinimalPerf.default 430 410 1.05:1
ItemLayoutMinimalPerf.default 2731 2601 1.05:1
ProviderMinimalPerf.default 873 834 1.05:1
Button.Fluent 559 530 1.05:1
Image.Fluent 380 362 1.05:1
Tooltip.Fluent 511 486 1.05:1
BoxMinimalPerf.default 329 315 1.04:1
DropdownMinimalPerf.default 6508 6238 1.04:1
HeaderMinimalPerf.default 357 342 1.04:1
ButtonMinimalPerf.default 184 179 1.03:1
ListNestedPerf.default 1113 1079 1.03:1
ListWith60ListItems.default 1614 1573 1.03:1
RadioGroupMinimalPerf.default 406 393 1.03:1
TreeWith60ListItems.default 297 288 1.03:1
VideoMinimalPerf.default 591 576 1.03:1
Dialog.Fluent 2808 2738 1.03:1
ButtonSlotsPerf.default 788 771 1.02:1
DialogMinimalPerf.default 2914 2861 1.02:1
DropdownManyItemsPerf.default 2179 2139 1.02:1
InputMinimalPerf.default 1591 1556 1.02:1
LayoutMinimalPerf.default 393 387 1.02:1
ListCommonPerf.default 1155 1129 1.02:1
ListMinimalPerf.default 461 453 1.02:1
SegmentMinimalPerf.default 332 327 1.02:1
Dropdown.Fluent 6278 6148 1.02:1
ChatMinimalPerf.default 612 606 1.01:1
CheckboxMinimalPerf.default 5125 5087 1.01:1
EmbedMinimalPerf.default 3436 3388 1.01:1
LoaderMinimalPerf.default 1139 1123 1.01:1
MenuButtonMinimalPerf.default 1744 1726 1.01:1
ProviderMergeThemesPerf.default 1861 1840 1.01:1
StatusMinimalPerf.default 655 647 1.01:1
ToolbarMinimalPerf.default 822 811 1.01:1
TreeMinimalPerf.default 1304 1287 1.01:1
Avatar.Fluent 1380 1369 1.01:1
Slider.Fluent 2901 2880 1.01:1
GridMinimalPerf.default 1344 1346 1:1
MenuMinimalPerf.default 844 845 1:1
SliderMinimalPerf.default 2853 2853 1:1
SplitButtonMinimalPerf.default 3937 3920 1:1
AttachmentMinimalPerf.default 151 153 0.99:1
CarouselMinimalPerf.default 557 561 0.99:1
ChatDuplicateMessagesPerf.default 551 559 0.99:1
DividerMinimalPerf.default 340 343 0.99:1
HeaderSlotsPerf.default 759 769 0.99:1
ImageMinimalPerf.default 352 356 0.99:1
LabelMinimalPerf.default 400 404 0.99:1
ReactionMinimalPerf.default 362 367 0.99:1
TextMinimalPerf.default 333 335 0.99:1
TooltipMinimalPerf.default 746 757 0.99:1
PopupMinimalPerf.default 266 271 0.98:1
PortalMinimalPerf.default 114 116 0.98:1
TableMinimalPerf.default 365 371 0.98:1
Checkbox.Fluent 1096 1114 0.98:1
AttachmentSlotsPerf.default 1200 1234 0.97:1
CardMinimalPerf.default 583 598 0.97:1
ChatWithPopoverPerf.default 722 754 0.96:1
RefMinimalPerf.default 204 212 0.96:1
Icon.Fluent 683 711 0.96:1
TextAreaMinimalPerf.default 435 460 0.95:1
AccordionMinimalPerf.default 133 146 0.91:1

@size-auditor
Copy link

size-auditor bot commented May 26, 2020

Asset size changes

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

Baseline commit: 1dc036b4710ae47094ba6c8bd5d3f4e3a09e9ea7 (build)

layershifter and others added 10 commits May 26, 2020 17:57
…va/office-ui-fabric-react into feat/toolbar-item-compose

� Conflicts:
�	packages/fluentui/CHANGELOG.md
# Conflicts:
#	packages/fluentui/CHANGELOG.md
#	packages/fluentui/react-northstar/src/components/Toolbar/ToolbarRadioGroup.tsx
-added missing variables
# Conflicts:
#	packages/fluentui/CHANGELOG.md
#	packages/fluentui/docs/src/examples/components/Toolbar/Visual/ToolbarExampleCompose.shorthand.tsx
#	packages/fluentui/react-northstar/src/components/Toolbar/Toolbar.tsx
-expanded example
);
};
const renderOverflowItem = overflowItem =>
createShorthand(composeOptions.slots.overflowItem, overflowItem, {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oops we forgot ToolbarItem here..

@mnajdova mnajdova merged commit 4e0806c into microsoft:master May 27, 2020
miroslavstastny pushed a commit to levithomason/fluentui that referenced this pull request Jun 8, 2020
* wip

* added icon and fixed menu

* -updated changelog

* push changes related to refs

* -merge conflicts fixes

* -expanded example
-added missing variables

* -fixed e2e

* -resolved merge conflicts

* -fixed toolbar radio group
-expanded example

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
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