ThemeProvider: Export ThemeContext

[xugao]

Pull request checklist

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

Description of changes

Export ThemeContext and add documentation in README

Focus areas to test

(optional)

[msft-github-bot]

Perf Analysis

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	996	995	5000
ButtonNext	mount	613	617	5000
Checkbox	mount	1726	1697	5000
CheckboxBase	mount	1458	1446	5000
CheckboxNext	mount	1795	1811	5000
ChoiceGroup	mount	5369	5515	5000
ChoiceGroupNext	mount	5388	5283	5000
ComboBox	mount	1004	928	1000
CommandBar	mount	7684	7658	1000
ContextualMenu	mount	12853	12909	1000
DefaultButton	mount	1125	1148	5000
DetailsRow	mount	3529	3538	5000
DetailsRowFast	mount	3612	3685	5000
DetailsRowNoStyles	mount	3407	3368	5000
Dialog	mount	1505	1527	1000
DocumentCardTitle	mount	1788	1785	1000
Dropdown	mount	2760	2705	5000
FocusZone	mount	1834	1795	5000
IconButton	mount	1894	1828	5000
Label	mount	347	357	5000
Link	mount	463	458	5000
LinkNext	mount	503	499	5000
MenuButton	mount	1513	1512	5000
MessageBar	mount	2067	2149	5000
MessageBarNext	mount	2054	2075	5000
Nav	mount	3323	3313	1000
OverflowSet	mount	1416	1406	5000
OverflowSetNext	mount	1045	1056	5000
Panel	mount	1463	1512	1000
Persona	mount	869	841	1000
Pivot	mount	1459	1440	1000
PivotNext	mount	1399	1532	1000
PrimaryButton	mount	1354	1295	5000
SearchBox	mount	1382	1394	5000
SearchBoxNext	mount	1392	1421	5000
Shimmer	mount	2701	2719	5000
ShimmerNext	mount	2774	2736	5000
Slider	mount	1541	1528	5000
SliderNext	mount	1920	1958	5000
SpinButton	mount	5082	5076	5000
SpinButtonNext	mount	5169	5223	5000
Spinner	mount	429	397	5000
SplitButton	mount	3214	3203	5000
Stack	mount	545	545	5000
StackWithIntrinsicChildren	mount	2041	1988	5000
StackWithTextChildren	mount	5185	5300	5000
TagPicker	mount	2801	2821	5000
TeachingBubble	mount	49684	49245	5000
TeachingBubbleNext	mount	49460	49387	5000
Text	mount	448	449	5000
TextField	mount	1444	1471	5000
ThemeProvider	mount	4084	4083	5000
ThemeProvider	virtual-rerender	444	457	5000
Toggle	mount	877	862	5000
ToggleNext	mount	855	861	5000
button	mount	121	130	5000

Perf Analysis (Fluent)

⚠️ 3 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
ButtonOverridesMissPerf.default	130	41	3.17:1	analysis
ButtonUseCssNestingPerf.default	62	47	1.32:1	analysis
ListCommonPerf.default	751	1006	0.75:1	analysis

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.47	0.51	0.92:1	2000	944
🦄	Button.Fluent	0.13	0.21	0.62:1	5000	642
🔧	Checkbox.Fluent	0.68	0.4	1.7:1	1000	679
🎯	Dialog.Fluent	0.17	0.23	0.74:1	5000	834
🔧	Dropdown.Fluent	3.04	0.51	5.96:1	1000	3037
🔧	Icon.Fluent	0.15	0.06	2.5:1	5000	746
🦄	Image.Fluent	0.08	0.12	0.67:1	5000	386
🔧	Slider.Fluent	1.65	0.4	4.12:1	1000	1654
🔧	Text.Fluent	0.08	0.03	2.67:1	5000	388
🦄	Tooltip.Fluent	0.11	16.9	0.01:1	5000	532

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonUseCssPerf.default	60	47	1.28:1
PortalMinimalPerf.default	142	119	1.19:1
RefMinimalPerf.default	231	199	1.16:1
FormMinimalPerf.default	477	424	1.13:1
AttachmentMinimalPerf.default	187	167	1.12:1
BoxMinimalPerf.default	374	338	1.11:1
FlexMinimalPerf.default	322	292	1.1:1
GridMinimalPerf.default	378	343	1.1:1
HeaderMinimalPerf.default	408	371	1.1:1
Button.Fluent	642	582	1.1:1
AccordionMinimalPerf.default	175	161	1.09:1
ProviderMinimalPerf.default	982	899	1.09:1
ImageMinimalPerf.default	408	379	1.08:1
SkeletonMinimalPerf.default	434	402	1.08:1
Text.Fluent	388	360	1.08:1
ChatDuplicateMessagesPerf.default	451	420	1.07:1
ReactionMinimalPerf.default	424	398	1.07:1
StatusMinimalPerf.default	784	734	1.07:1
CustomToolbarPrototype.default	4037	3762	1.07:1
CarouselMinimalPerf.default	496	469	1.06:1
SegmentMinimalPerf.default	387	364	1.06:1
IconMinimalPerf.default	765	722	1.06:1
Checkbox.Fluent	679	641	1.06:1
ProviderMergeThemesPerf.default	1953	1860	1.05:1
VideoMinimalPerf.default	690	658	1.05:1
Dialog.Fluent	834	796	1.05:1
AnimationMinimalPerf.default	418	401	1.04:1
ButtonMinimalPerf.default	189	182	1.04:1
ButtonSlotsPerf.default	648	621	1.04:1
TableManyItemsPerf.default	2500	2404	1.04:1
TableMinimalPerf.default	443	427	1.04:1
TextAreaMinimalPerf.default	535	515	1.04:1
ToolbarMinimalPerf.default	1041	997	1.04:1
AvatarMinimalPerf.default	504	488	1.03:1
CardMinimalPerf.default	622	604	1.03:1
CheckboxMinimalPerf.default	3006	2923	1.03:1
DropdownMinimalPerf.default	3083	2997	1.03:1
HeaderSlotsPerf.default	854	833	1.03:1
LabelMinimalPerf.default	453	438	1.03:1
LayoutMinimalPerf.default	421	409	1.03:1
MenuButtonMinimalPerf.default	1616	1572	1.03:1
SplitButtonMinimalPerf.default	4070	3938	1.03:1
Dropdown.Fluent	3037	2956	1.03:1
AlertMinimalPerf.default	327	322	1.02:1
ChatMinimalPerf.default	669	654	1.02:1
InputMinimalPerf.default	1370	1340	1.02:1
ListMinimalPerf.default	521	513	1.02:1
PopupMinimalPerf.default	677	661	1.02:1
TooltipMinimalPerf.default	839	819	1.02:1
TreeMinimalPerf.default	973	954	1.02:1
Avatar.Fluent	944	925	1.02:1
Icon.Fluent	746	733	1.02:1
Tooltip.Fluent	532	520	1.02:1
AttachmentSlotsPerf.default	1210	1195	1.01:1
ChatWithPopoverPerf.default	497	494	1.01:1
DialogMinimalPerf.default	816	807	1.01:1
DividerMinimalPerf.default	396	392	1.01:1
MenuMinimalPerf.default	901	890	1.01:1
Slider.Fluent	1654	1642	1.01:1
DropdownManyItemsPerf.default	810	807	1:1
EmbedMinimalPerf.default	2037	2030	1:1
ItemLayoutMinimalPerf.default	1410	1404	1:1
LoaderMinimalPerf.default	751	749	1:1
RadioGroupMinimalPerf.default	431	432	1:1
SliderMinimalPerf.default	1613	1606	1:1
Image.Fluent	386	393	0.98:1
TextMinimalPerf.default	384	406	0.95:1
TreeWith60ListItems.default	223	234	0.95:1
ListWith60ListItems.default	1007	1153	0.87:1
ListNestedPerf.default	640	925	0.69:1

[codesandbox-ci]

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 55b6d19:

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

[size-auditor]

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-next-Styling	58.054 kB	58.1 kB	46 bytes

 Over Tolerance (1024 B)  Over Baseline  Below Baseline  New   Removed 1 kB = 1000 B

Baseline commit: cf72dc9b1b66b9c5f383d4607cb4adfb80c03895 (build)

[kelseyyoung]

As per our conversation from Teams, it would be a really cool feature to programmatically define what the "default" value of ThemeContext is. Right now it's "undefined", which because we're using Typescript is always a pain to handle. We can do this manually by wrapping ThemeContext.Consumer and checking if 'theme' is undefined (aka no Provider) and then providing our own app's "default theme". It would just be a bonus to be able to tell ThemeContext to take our app's "default theme" as the default value

Not even sure this is possible with React's Context, but something to look into :)

[xugao]

@kelseyyoung - I actually need to distinguish if the context is default or it's provided using Provider (logic in useTheme). But I also agree with the pain of having undefined typing for users of ThemeContext.Customer like you. However I still lean towards having the correct typing / no default context. What do you think?

[kelseyyoung]

@xugao well like I said it's not a huge thing. I'm thinking our solution looks like this:

// User of ThemeContext.Consumer
<ThemeContext.Consumer>
  {(contextTheme: Theme | undefined) => (
    Theme theme = getAppTheme(contextTheme);
    getStyles(theme);

// getAppTheme function
const getAppTheme = (theme: Theme | undefined): Theme => { 
  if (!theme) {
    return defaultTheme; // Our app's default theme
  }
  return theme;
}

And because we're abstracting this out into a singular "component", if things change we can make that change in one place. That way the signature of getStyles can be:

const getStyles = (theme: Theme) => {

and we get rid of the "undefined". So this isn't hard for us. Having a way to programmatically say "if the consumer has no theme, fill in our own" would also be cool. But really just a nice to have

So I agree with what you have now being fine as well

[msft-github-bot]

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

Handy links:

• Release Notes
• Official NPM Release