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: new withFluentProvider decorator for converged Provider #16869

Merged
merged 5 commits into from
Feb 8, 2021

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Feb 8, 2021

Description of changes

A showcase of new withFluentProvider decorator

This PR adds a new withFluentProvider() to be used with converged components and useTheme() to switch themes.

@@ -2,5 +2,5 @@ import { merge } from '@fluentui/utilities';
import { PartialTheme, Theme } from '../types';

export function mergeThemes(a: Theme, b: PartialTheme | Theme): Theme {
return merge(a, b) as Theme;
return merge({}, a, b) as Theme;
Copy link
Member Author

Choose a reason for hiding this comment

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

A small bugfix, merge() mutates the first object 😨

Copy link
Contributor

Choose a reason for hiding this comment

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

can this be covered in unit tests?

Copy link
Member Author

Choose a reason for hiding this comment

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

Oops, overlooked your comment, yes it can be

return <FluentProvider theme={theme}>{props.children}</FluentProvider>;
};

export const withFluentProvider = makeDecorator({
Copy link
Member

Choose a reason for hiding this comment

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

will you add this to react-examples in a separate PR ?

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's done per package, for react-avatar it's done in #16793.

Copy link
Member

Choose a reason for hiding this comment

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

I see the author has to explicitly enable this decorator

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 8, 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 a66ee06:

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

@size-auditor
Copy link

size-auditor bot commented Feb 8, 2021

Asset size changes

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

Baseline commit: b6e11cbb2ee4037c927927560e0e78b1e1f8e377 (build)

@layershifter layershifter merged commit e6a1c49 into master Feb 8, 2021
@layershifter layershifter deleted the feat/provider-decorator branch February 8, 2021 15:54
@fabricteam
Copy link
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 782 806 5000
BaseButtonCompat mount 894 877 5000
Breadcrumb mount 42552 42731 5000
Checkbox mount 1448 1488 5000
CheckboxBase mount 1222 1204 5000
ChoiceGroup mount 4578 4539 5000
ComboBox mount 927 928 1000
CommandBar mount 9788 9881 1000
ContextualMenu mount 5959 5967 1000
DefaultButtonCompat mount 1079 1107 5000
DetailsRow mount 3493 3566 5000
DetailsRowFast mount 3551 3510 5000
DetailsRowNoStyles mount 3335 3331 5000
Dialog mount 1439 1399 1000
DocumentCardTitle mount 1804 1804 1000
Dropdown mount 3211 3209 5000
FocusTrapZone mount 1710 1711 5000
FocusZone mount 1752 1730 5000
IconButtonCompat mount 1860 1748 5000
Label mount 329 332 5000
Layer mount 1710 1721 5000
Link mount 441 447 5000
MakeStyles mount 1916 1949 50000
MenuButtonCompat mount 1410 1417 5000
MessageBar mount 1935 1931 5000
Nav mount 3163 3124 1000
OverflowSet mount 1013 1001 5000
Panel mount 1382 1426 1000
Persona mount 825 829 1000
Pivot mount 1338 1370 1000
PrimaryButtonCompat mount 1279 1271 5000
Rating mount 7293 7297 5000
SearchBox mount 1261 1281 5000
Shimmer mount 2451 2467 5000
Slider mount 1881 1805 5000
SpinButton mount 4821 4879 5000
Spinner mount 401 412 5000
SplitButtonCompat mount 3074 3074 5000
Stack mount 497 473 5000
StackWithIntrinsicChildren mount 1533 1529 5000
StackWithTextChildren mount 4347 4398 5000
SwatchColorPicker mount 10063 9857 5000
Tabs mount 1368 1391 1000
TagPicker mount 2680 2681 5000
TeachingBubble mount 11289 11351 5000
Text mount 401 393 5000
TextField mount 1339 1303 5000
ThemeProvider mount 1383 1380 5000
ThemeProvider virtual-rerender 591 583 5000
ThemeProviderNext mount 2143 2117 5000
Toggle mount 786 781 5000
button mount 644 656 5000
buttonNative mount 101 105 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 331
🦄 Button.Fluent 0.11 0.2 0.55:1 5000 574
🔧 Checkbox.Fluent 0.63 0.34 1.85:1 1000 632
🎯 Dialog.Fluent 0.16 0.21 0.76:1 5000 775
🔧 Dropdown.Fluent 3.05 0.38 8.03:1 1000 3051
🔧 Icon.Fluent 0.13 0.06 2.17:1 5000 673
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 391
🔧 Slider.Fluent 1.57 0.43 3.65:1 1000 1571
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 357
🦄 Tooltip.Fluent 0.12 0.88 0.14:1 5000 581

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
GridMinimalPerf.default 371 347 1.07:1
AvatarMinimalPerf.default 217 204 1.06:1
CardMinimalPerf.default 581 550 1.06:1
AlertMinimalPerf.default 292 279 1.05:1
CarouselMinimalPerf.default 494 472 1.05:1
HeaderMinimalPerf.default 394 380 1.04:1
HeaderSlotsPerf.default 788 760 1.04:1
ListCommonPerf.default 677 651 1.04:1
RefMinimalPerf.default 251 241 1.04:1
ButtonMinimalPerf.default 185 179 1.03:1
ChatMinimalPerf.default 628 609 1.03:1
ListNestedPerf.default 591 575 1.03:1
MenuButtonMinimalPerf.default 1591 1538 1.03:1
ReactionMinimalPerf.default 412 399 1.03:1
ToolbarMinimalPerf.default 996 966 1.03:1
BoxMinimalPerf.default 380 374 1.02:1
ButtonOverridesMissPerf.default 1725 1695 1.02:1
ButtonSlotsPerf.default 600 589 1.02:1
FlexMinimalPerf.default 313 306 1.02:1
LoaderMinimalPerf.default 739 721 1.02:1
ProviderMergeThemesPerf.default 1615 1587 1.02:1
TooltipMinimalPerf.default 822 804 1.02:1
ChatWithPopoverPerf.default 440 434 1.01:1
DividerMinimalPerf.default 382 380 1.01:1
DropdownManyItemsPerf.default 732 727 1.01:1
DropdownMinimalPerf.default 3090 3058 1.01:1
ImageMinimalPerf.default 392 389 1.01:1
ItemLayoutMinimalPerf.default 1224 1210 1.01:1
SkeletonMinimalPerf.default 373 370 1.01:1
SplitButtonMinimalPerf.default 3720 3701 1.01:1
StatusMinimalPerf.default 730 724 1.01:1
IconMinimalPerf.default 664 660 1.01:1
TableMinimalPerf.default 423 419 1.01:1
TextMinimalPerf.default 374 370 1.01:1
TextAreaMinimalPerf.default 484 478 1.01:1
TreeMinimalPerf.default 788 783 1.01:1
VideoMinimalPerf.default 629 621 1.01:1
Button.Fluent 574 568 1.01:1
Tooltip.Fluent 581 575 1.01:1
ButtonUseCssPerf.default 834 837 1:1
ButtonUseCssNestingPerf.default 1086 1085 1:1
CheckboxMinimalPerf.default 2810 2815 1:1
DatepickerMinimalPerf.default 46456 46531 1:1
EmbedMinimalPerf.default 4192 4213 1:1
FormMinimalPerf.default 422 422 1:1
ListMinimalPerf.default 522 520 1:1
MenuMinimalPerf.default 891 889 1:1
RadioGroupMinimalPerf.default 450 448 1:1
SliderMinimalPerf.default 1607 1606 1:1
TableManyItemsPerf.default 2009 2002 1:1
Dropdown.Fluent 3051 3049 1:1
Icon.Fluent 673 671 1:1
AnimationMinimalPerf.default 414 418 0.99:1
DialogMinimalPerf.default 778 783 0.99:1
InputMinimalPerf.default 1276 1288 0.99:1
LabelMinimalPerf.default 424 430 0.99:1
ListWith60ListItems.default 634 641 0.99:1
PopupMinimalPerf.default 704 711 0.99:1
ProviderMinimalPerf.default 973 979 0.99:1
CustomToolbarPrototype.default 3727 3774 0.99:1
Checkbox.Fluent 632 638 0.99:1
Image.Fluent 391 395 0.99:1
LayoutMinimalPerf.default 420 427 0.98:1
PortalMinimalPerf.default 170 173 0.98:1
TreeWith60ListItems.default 184 187 0.98:1
Dialog.Fluent 775 788 0.98:1
Slider.Fluent 1571 1595 0.98:1
AccordionMinimalPerf.default 156 161 0.97:1
AttachmentSlotsPerf.default 1191 1226 0.97:1
SegmentMinimalPerf.default 356 369 0.96:1
Text.Fluent 357 373 0.96:1
ChatDuplicateMessagesPerf.default 359 378 0.95:1
RosterPerf.default 1128 1186 0.95:1
Avatar.Fluent 331 348 0.95:1
AttachmentMinimalPerf.default 166 178 0.93:1

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-theme-provider@v1.0.0-beta.21 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-menu@v0.2.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-theme@v0.3.1 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-provider@v0.1.3 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-make-styles@v0.2.4 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-examples@v1.1.0 has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

7 participants