Adding makeStyles interim v7 hook factory to get classes as a function of the theme

[dzearing]

Pull request checklist

• Addresses an existing issue: Fixes React Hooks for styles and theming  #14622
• Include a change request file using $ yarn change

Description of changes

Adding a makeStyles hook factory to the @uifabric/styling package as an interim solution for customers to get styles as a function of the theme.

Using styling with Fluent UI v7 React components

Themed styling can be created using the makeStyles hook. This hook abstracts rendering css given the theme object:

import { makeStyles } from '@fluentui/react';

const useStyles = makeStyles(theme => ({
  root: {
    background: theme.semanticColors.bodyBackground,
    ':hover': {
      background: theme.semanticColors.bodyBackgroundHovered
    }
  }
 });

const Foo = props => {
  const classes = useStyles();

  return <div className={classes.root} />;
};

[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 f1dae65:

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]

Hello @dzearing!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

Do note that I've been instructed to only help merge pull requests of this repository that have been opened for at least 8 hours, a condition that will be fulfilled in about 7 hours 46 minutes. No worries though, I will be back when the time is right! 😉

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.

[msft-github-bot]

Perf Analysis

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	897	889	5000
ButtonNext	mount	577	569	5000
Checkbox	mount	1607	1608	5000
CheckboxBase	mount	1350	1339	5000
CheckboxNext	mount	1734	1711	5000
ChoiceGroup	mount	5054	4999	5000
ChoiceGroupNext	mount	5077	5058	5000
ComboBox	mount	938	922	1000
CommandBar	mount	7371	7361	1000
ContextualMenu	mount	12420	12426	1000
DefaultButton	mount	1130	1120	5000
DetailsRow	mount	3493	3612	5000
DetailsRowFast	mount	3555	3603	5000
DetailsRowNoStyles	mount	3408	3425	5000
Dialog	mount	1497	1486	1000
DocumentCardTitle	mount	1725	1697	1000
Dropdown	mount	2610	2637	5000
FocusZone	mount	1705	1763	5000
IconButton	mount	1815	1798	5000
Label	mount	342	345	5000
Link	mount	441	439	5000
LinkNext	mount	486	472	5000
MenuButton	mount	1450	1490	5000
Nav	mount	3307	3210	1000
OverflowSet	mount	1424	1366	5000
OverflowSetNext	mount	1021	1026	5000
Panel	mount	1434	1447	1000
Persona	mount	844	813	1000
Pivot	mount	1425	1385	1000
PivotNext	mount	1358	1397	1000
PrimaryButton	mount	1289	1278	5000
SearchBox	mount	1330	1304	5000
SearchBoxNext	mount	1352	1349	5000
Slider	mount	1522	1565	5000
SliderNext	mount	1928	1924	5000
SpinButton	mount	4974	4993	5000
SpinButtonNext	mount	4996	5057	5000
Spinner	mount	419	400	5000
SplitButton	mount	3136	3087	5000
Stack	mount	519	534	5000
StackWithIntrinsicChildren	mount	1923	1924	5000
StackWithTextChildren	mount	5124	5129	5000
TagPicker	mount	2760	2756	5000
Text	mount	434	445	5000
TextField	mount	1347	1405	5000
ThemeProvider	mount	3584	3648	5000
ThemeProvider	virtual-rerender	436	437	5000
Toggle	mount	851	844	5000
ToggleNext	mount	857	836	5000
button	mount	105	112	5000

Perf Analysis (Fluent)

⚠️ 4 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
ButtonOverridesMissPerf.default	143	41	3.49:1	analysis
ButtonUseCssPerf.default	63	44	1.43:1	analysis
ButtonUseCssNestingPerf.default	56	48	1.17:1	analysis
ListNestedPerf.default	627	856	0.73:1	analysis

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.45	0.47	0.96:1	2000	909
🦄	Button.Fluent	0.12	0.19	0.63:1	5000	578
🔧	Checkbox.Fluent	0.63	0.35	1.8:1	1000	631
🎯	Dialog.Fluent	0.16	0.22	0.73:1	5000	785
🔧	Dropdown.Fluent	2.88	0.47	6.13:1	1000	2876
🔧	Icon.Fluent	0.14	0.06	2.33:1	5000	720
🎯	Image.Fluent	0.08	0.11	0.73:1	5000	402
🔧	Slider.Fluent	1.6	0.37	4.32:1	1000	1598
🔧	Text.Fluent	0.07	0.03	2.33:1	5000	366
🦄	Tooltip.Fluent	0.11	15.14	0.01:1	5000	525

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	132	115	1.15:1
AttachmentMinimalPerf.default	171	150	1.14:1
ButtonMinimalPerf.default	188	168	1.12:1
Image.Fluent	402	359	1.12:1
ChatDuplicateMessagesPerf.default	451	413	1.09:1
FlexMinimalPerf.default	296	271	1.09:1
Text.Fluent	366	337	1.09:1
AlertMinimalPerf.default	333	309	1.08:1
ReactionMinimalPerf.default	414	382	1.08:1
TreeWith60ListItems.default	222	205	1.08:1
AvatarMinimalPerf.default	512	480	1.07:1
GridMinimalPerf.default	362	338	1.07:1
ListMinimalPerf.default	504	473	1.07:1
DropdownManyItemsPerf.default	810	766	1.06:1
LabelMinimalPerf.default	427	403	1.06:1
TreeMinimalPerf.default	908	853	1.06:1
DividerMinimalPerf.default	384	366	1.05:1
ProviderMinimalPerf.default	927	886	1.05:1
Button.Fluent	578	553	1.05:1
AnimationMinimalPerf.default	399	383	1.04:1
ItemLayoutMinimalPerf.default	1290	1241	1.04:1
LayoutMinimalPerf.default	395	381	1.04:1
MenuMinimalPerf.default	877	847	1.04:1
MenuButtonMinimalPerf.default	1609	1551	1.04:1
ProviderMergeThemesPerf.default	1868	1796	1.04:1
RadioGroupMinimalPerf.default	439	424	1.04:1
RefMinimalPerf.default	201	193	1.04:1
SkeletonMinimalPerf.default	434	418	1.04:1
CustomToolbarPrototype.default	3734	3597	1.04:1
ToolbarMinimalPerf.default	977	943	1.04:1
AttachmentSlotsPerf.default	1212	1173	1.03:1
ButtonSlotsPerf.default	618	598	1.03:1
CarouselMinimalPerf.default	464	450	1.03:1
TableManyItemsPerf.default	2312	2254	1.03:1
TableMinimalPerf.default	413	402	1.03:1
TextMinimalPerf.default	349	339	1.03:1
TooltipMinimalPerf.default	780	760	1.03:1
Tooltip.Fluent	525	509	1.03:1
CardMinimalPerf.default	584	572	1.02:1
ChatMinimalPerf.default	634	620	1.02:1
ChatWithPopoverPerf.default	481	470	1.02:1
CheckboxMinimalPerf.default	2861	2803	1.02:1
EmbedMinimalPerf.default	1982	1942	1.02:1
FormMinimalPerf.default	433	423	1.02:1
HeaderMinimalPerf.default	358	351	1.02:1
HeaderSlotsPerf.default	815	801	1.02:1
InputMinimalPerf.default	1311	1289	1.02:1
LoaderMinimalPerf.default	755	741	1.02:1
SegmentMinimalPerf.default	359	353	1.02:1
SliderMinimalPerf.default	1590	1559	1.02:1
StatusMinimalPerf.default	722	705	1.02:1
VideoMinimalPerf.default	644	630	1.02:1
Dialog.Fluent	785	769	1.02:1
BoxMinimalPerf.default	365	361	1.01:1
DialogMinimalPerf.default	778	774	1.01:1
DropdownMinimalPerf.default	2886	2847	1.01:1
PopupMinimalPerf.default	679	669	1.01:1
SplitButtonMinimalPerf.default	3866	3814	1.01:1
TextAreaMinimalPerf.default	501	494	1.01:1
Avatar.Fluent	909	897	1.01:1
Checkbox.Fluent	631	623	1.01:1
Slider.Fluent	1598	1581	1.01:1
Dropdown.Fluent	2876	2886	1:1
ImageMinimalPerf.default	370	373	0.99:1
Icon.Fluent	720	735	0.98:1
AccordionMinimalPerf.default	160	165	0.97:1
IconMinimalPerf.default	666	690	0.97:1
ListWith60ListItems.default	959	1087	0.88:1
ListCommonPerf.default	721	954	0.76:1

[size-auditor]

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-next-Styling	54.571 kB	55.135 kB	564 bytes

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

Baseline commit: 535f95642c0f616c18791ed72548932595d0456a (build)

[msft-github-bot]

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

Handy links:

• Release Notes
• Official NPM Release