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

Partial theme merging fixes (for ThemeProvider) and update createTheme to use Theme/PartialTheme (7.0) #15452

Merged
merged 12 commits into from Oct 9, 2020

Conversation

xugao
Copy link
Contributor

@xugao xugao commented Oct 9, 2020

Pull request checklist

Description of changes

  • Update createTheme to use Theme/PartialTheme instead of ITheme/IPartialTheme
  • Marked tokens in Theme as internal and updated its typing to be partial. This is because when createdTheme returns the full Theme. We don't necessarily have to create full Tokens in that case, we can just pass tokens through.
  • Fix a bug where user provided tokens get overwritten by mapped tokens from legacy theme during getTokens. This is causing nested ThemeProvider not working for react-button (modified screener tests to cover this case).
  • Added typing FunctionComponent<ThemeProviderProps> to ThemeProvider. This is to have cleaner public API, instead of relying of React.forwardRef typing.
  • Fix react-theme-provider does not style Fluent UI components correctly with imported theme #15280: root cause here
    • Changed mergeThemes implementation to merge partial/full theme on top of a full theme. And use that in both createTheme and useThemeProviderState. (Note: this is a breaking change. however, I think it's safe to make since this is recently moved from react-theme-provider to theme and I don't think anyone but our code is using this)

Focus areas to test

(optional)

@msft-github-bot msft-github-bot added Area: Theming Component: Theme needs cherry-pick Temporary label for PRs which may need to be cherry-picked to master labels Oct 9, 2020
@xugao xugao requested a review from dzearing October 9, 2020 20:30
@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 9, 2020

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 503044a:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type 7.0 Ticks PR Ticks Iterations Status
Avatar mount 907 914 5000
BaseButton mount 1009 985 5000
Breadcrumb mount 42008 42083 5000
ButtonNext mount 620 638 5000
Checkbox mount 1701 1693 5000
CheckboxBase mount 1457 1396 5000
ChoiceGroup mount 5304 5433 5000
ComboBox mount 999 993 1000
CommandBar mount 7899 7900 1000
ContextualMenu mount 13678 13513 1000
DefaultButton mount 1239 1217 5000
DetailsRow mount 3957 3970 5000
DetailsRowFast mount 3899 3946 5000
DetailsRowNoStyles mount 3626 3665 5000
Dialog mount 1575 1563 1000
DocumentCardTitle mount 1790 1845 1000
Dropdown mount 2748 2769 5000
FocusTrapZone mount 1767 1793 5000
FocusZone mount 1876 1845 5000
IconButton mount 1903 1966 5000
Label mount 371 363 5000
Layer mount 2083 2095 5000
Link mount 493 494 5000
MenuButton mount 1612 1605 5000
MessageBar mount 2159 2162 5000
Nav mount 3479 3501 1000
OverflowSet mount 1528 1491 5000
Panel mount 1470 1551 1000
Persona mount 875 870 1000
Pivot mount 1506 1528 1000
PrimaryButton mount 1403 1352 5000
Rating mount 8254 8331 5000
SearchBox mount 1398 1407 5000
Shimmer mount 2776 2814 5000
Slider mount 1603 1610 5000
SpinButton mount 5337 5232 5000
Spinner mount 448 433 5000
SplitButton mount 3484 3466 5000
Stack mount 595 560 5000
StackWithIntrinsicChildren mount 2028 2019 5000
StackWithTextChildren mount 5421 5400 5000
SwatchColorPicker mount 10710 10806 5000
TagPicker mount 2943 2891 5000
TeachingBubble mount 50644 50775 5000
Text mount 462 456 5000
TextField mount 1502 1533 5000
ThemeProvider mount 1713 1749 5000
ThemeProvider virtual-rerender 633 633 5000
Toggle mount 851 906 5000
button mount 113 110 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.48 0.51 0.94:1 2000 959
🦄 Button.Fluent 0.13 0.21 0.62:1 5000 631
🔧 Checkbox.Fluent 0.69 0.38 1.82:1 1000 690
🎯 Dialog.Fluent 0.18 0.24 0.75:1 5000 877
🔧 Dropdown.Fluent 3 0.52 5.77:1 1000 2998
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 818
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 437
🔧 Slider.Fluent 1.59 0.36 4.42:1 1000 1588
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 398
🦄 Tooltip.Fluent 0.12 16.34 0.01:1 5000 597

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 176 0 Infinity:1
AlertMinimalPerf.default 340 0 Infinity:1
AnimationMinimalPerf.default 458 0 Infinity:1
AttachmentMinimalPerf.default 194 0 Infinity:1
AttachmentSlotsPerf.default 1236 0 Infinity:1
AvatarMinimalPerf.default 519 0 Infinity:1
BoxMinimalPerf.default 417 0 Infinity:1
ButtonMinimalPerf.default 199 0 Infinity:1
ButtonOverridesMissPerf.default 1820 0 Infinity:1
ButtonSlotsPerf.default 681 0 Infinity:1
ButtonUseCssPerf.default 893 0 Infinity:1
ButtonUseCssNestingPerf.default 1172 0 Infinity:1
CardMinimalPerf.default 648 0 Infinity:1
CarouselMinimalPerf.default 498 0 Infinity:1
ChatDuplicateMessagesPerf.default 447 0 Infinity:1
ChatMinimalPerf.default 706 0 Infinity:1
ChatWithPopoverPerf.default 525 0 Infinity:1
CheckboxMinimalPerf.default 3020 0 Infinity:1
DividerMinimalPerf.default 433 0 Infinity:1
DropdownManyItemsPerf.default 826 0 Infinity:1
DropdownMinimalPerf.default 3058 0 Infinity:1
EmbedMinimalPerf.default 2099 0 Infinity:1
FlexMinimalPerf.default 328 0 Infinity:1
FormMinimalPerf.default 496 0 Infinity:1
GridMinimalPerf.default 427 0 Infinity:1
HeaderMinimalPerf.default 429 0 Infinity:1
ImageMinimalPerf.default 459 0 Infinity:1
InputMinimalPerf.default 1392 0 Infinity:1
ItemLayoutMinimalPerf.default 1424 0 Infinity:1
LabelMinimalPerf.default 485 0 Infinity:1
LayoutMinimalPerf.default 464 0 Infinity:1
ListCommonPerf.default 782 0 Infinity:1
ListMinimalPerf.default 563 0 Infinity:1
ListNestedPerf.default 654 0 Infinity:1
ListWith60ListItems.default 996 0 Infinity:1
LoaderMinimalPerf.default 831 0 Infinity:1
MenuButtonMinimalPerf.default 1751 0 Infinity:1
PopupMinimalPerf.default 744 0 Infinity:1
PortalMinimalPerf.default 171 0 Infinity:1
ProviderMergeThemesPerf.default 2097 0 Infinity:1
ProviderMinimalPerf.default 1079 0 Infinity:1
RadioGroupMinimalPerf.default 497 0 Infinity:1
ReactionMinimalPerf.default 473 0 Infinity:1
RefMinimalPerf.default 259 0 Infinity:1
SkeletonMinimalPerf.default 482 0 Infinity:1
SliderMinimalPerf.default 1629 0 Infinity:1
SplitButtonMinimalPerf.default 4074 0 Infinity:1
IconMinimalPerf.default 772 0 Infinity:1
TableManyItemsPerf.default 2453 0 Infinity:1
TextMinimalPerf.default 404 0 Infinity:1
TextAreaMinimalPerf.default 598 0 Infinity:1
ToolbarMinimalPerf.default 1040 0 Infinity:1
TreeMinimalPerf.default 997 0 Infinity:1
TreeWith60ListItems.default 234 0 Infinity:1
VideoMinimalPerf.default 723 0 Infinity:1
Checkbox.Fluent 690 0 Infinity:1
Dialog.Fluent 877 0 Infinity:1
Dropdown.Fluent 2998 0 Infinity:1
Icon.Fluent 818 0 Infinity:1
Image.Fluent 437 0 Infinity:1
Slider.Fluent 1588 0 Infinity:1
Text.Fluent 398 0 Infinity:1
Tooltip.Fluent 597 0 Infinity:1
CustomToolbarPrototype.default 4000 1 4000:1
Avatar.Fluent 959 1 959:1
MenuMinimalPerf.default 947 1 947:1
HeaderSlotsPerf.default 895 1 895:1
DialogMinimalPerf.default 877 1 877:1
TooltipMinimalPerf.default 876 1 876:1
StatusMinimalPerf.default 823 1 823:1
Button.Fluent 631 1 631:1
TableMinimalPerf.default 493 1 493:1
SegmentMinimalPerf.default 432 1 432:1

@size-auditor
Copy link

size-auditor bot commented Oct 9, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react office-ui-fabric-react-Styling 42.977 kB 43.007 kB ExceedsBaseline     30 bytes
office-ui-fabric-react office-ui-fabric-react-Layer 45.101 kB 45.127 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Image 44.106 kB 44.132 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Keytip 78.38 kB 78.406 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Checkbox 63.87 kB 63.896 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-KeytipLayer 98.762 kB 98.788 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Keytips 101.869 kB 101.895 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Tooltip 83.673 kB 83.699 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Label 35.245 kB 35.271 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Icon 47.969 kB 47.995 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Link 43.234 kB 43.26 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Check 49.262 kB 49.288 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-MarqueeSelection 67.229 kB 67.255 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-MessageBar 182.133 kB 182.159 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Modal 93.503 kB 93.529 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Nav 181.235 kB 181.261 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-ChoiceGroup 60.558 kB 60.584 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-HoverCard 96.429 kB 96.455 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-ContextualMenu 151.068 kB 151.094 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-GroupedList 121.473 kB 121.499 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Grid 173.734 kB 173.76 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-ChoiceGroupOption 55.847 kB 55.873 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Coachmark 92.292 kB 92.318 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-FloatingPicker 232.395 kB 232.421 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Facepile 202.689 kB 202.715 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Fabric 39.318 kB 39.344 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-ColorPicker 86.283 kB 86.309 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Dropdown 225.14 kB 225.166 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-ComboBox 237.914 kB 237.94 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-DocumentCard 207.918 kB 207.944 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-CommandBar 194.328 kB 194.354 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Dialog 203.087 kB 203.113 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-DetailsList 215.025 kB 215.051 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Callout 83.688 kB 83.714 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Overlay 37.604 kB 37.63 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Panel 193.394 kB 193.42 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Breadcrumb 191.971 kB 191.997 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Toggle 49.911 kB 49.937 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-TextField 75.947 kB 75.973 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-TeachingBubble 198.14 kB 198.166 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-SwatchColorPicker 184.116 kB 184.142 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Spinner 38.503 kB 38.529 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-SpinButton 186.083 kB 186.109 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Slider 56.158 kB 56.184 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-ShimmeredDetailsList 225.433 kB 225.459 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Shimmer 50.592 kB 50.618 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Announced 35.323 kB 35.349 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Persona 111.505 kB 111.531 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-DatePicker 204.482 kB 204.508 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-SearchBox 180.018 kB 180.044 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Button 186.666 kB 186.692 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Rating 74.134 kB 74.16 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-ProgressIndicator 35.764 kB 35.79 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-PositioningContainer 70.866 kB 70.892 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-PersonaCoin 111.505 kB 111.531 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-ButtonGrid 173.734 kB 173.76 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-PersonaPresence 54.334 kB 54.36 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Pivot 178.933 kB 178.959 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-Pickers 275.55 kB 275.576 kB ExceedsBaseline     26 bytes
office-ui-fabric-react office-ui-fabric-react-ActivityItem 67.211 kB 67.235 kB ExceedsBaseline     24 bytes
office-ui-fabric-react office-ui-fabric-react-Stack 38.479 kB 38.503 kB ExceedsBaseline     24 bytes
office-ui-fabric-react office-ui-fabric-react-ScrollablePane 52.122 kB 52.145 kB ExceedsBaseline     23 bytes
office-ui-fabric-react office-ui-fabric-react-Text 34.14 kB 34.162 kB ExceedsBaseline     22 bytes
office-ui-fabric-react office-ui-fabric-react-Calendar 138.097 kB 138.119 kB ExceedsBaseline     22 bytes
office-ui-fabric-react office-ui-fabric-react-SelectedItemsList 221.848 kB 221.87 kB ExceedsBaseline     22 bytes
office-ui-fabric-react office-ui-fabric-react-Sticky 30.726 kB 30.728 kB ExceedsBaseline     2 bytes
office-ui-fabric-react office-ui-fabric-react-Foundation 34.951 kB 34.935 kB BelowBaseline     -16 bytes
office-ui-fabric-react office-ui-fabric-react-Icons 63.939 kB 63.922 kB BelowBaseline     -17 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 40edbe0aa78c0d1a56a3609318431fb4ceb4abe5 (build)

@xugao xugao merged commit 5b99c2f into microsoft:7.0 Oct 9, 2020
xugao added a commit to xugao/office-ui-fabric-react that referenced this pull request Oct 9, 2020
…e to use Theme/PartialTheme (7.0) (microsoft#15452)

* Update theme package

* update theme-provider

* tweak vr test to improve test coverage

* Change files

* fixes

* more fixes, remove deprecated semantic slots

* fix perf

* fixes and cleanups

* resolve comments

* unmake breaking change

* Change files

* fix snapshots
xugao added a commit that referenced this pull request Oct 9, 2020
…e to use Theme/PartialTheme (7.0) (#15452) (#15326)

* Update theme package

* update theme-provider

* tweak vr test to improve test coverage

* Change files

* fixes

* more fixes, remove deprecated semantic slots

* fix perf

* fixes and cleanups

* resolve comments

* unmake breaking change

* Change files

* fix snapshots
@xugao xugao removed the needs cherry-pick Temporary label for PRs which may need to be cherry-picked to master label Oct 10, 2020
@msft-github-bot
Copy link
Contributor

🎉@fluentui/theme@v1.4.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

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

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/react-examples@v0.6.3 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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants