refactor: remove @fluentui/react-theme-provider by layershifter · Pull Request #18710 · microsoft/fluentui

layershifter · 2021-06-24T14:47:05Z

BREAKING CHANGES

This PR merges @fluentui/react-theme-provider with @fluentui/react-provider components.

Initially, we were thinking that it will be useful to have a ThemeProvider that will provide only theme tokens. But in reality we received duplication and confusion from customers as converged components still require FluentProvider to wrap their apps. In the same time FluentProvider embeds ThemeProvider...

A conversation below is an example of confusion:

What provider component should I use in my app?
FluentProvider 🙌
But do we need to have ThemeProvider in my app?
¯_(ツ)_/¯

Another one was related to usages in apps when both providers were used:

import { FluentProvider, webLightTheme } from "@fluentui/react-components";

function App() {
  return (
    <>
      {/* ❌ an actual usage */}
      <FluentProvider targetDocument={document}>
        {/* 👆 Even before these changes "ThemeProvider" was embedded into "FluentProvider" */}
        <ThemeProvider theme={webLightTheme} />
        {/* 👆 "ThemeProvider" is redundant there, "theme" could be also passed to "FluentProvider" */}
      </FluentProvider>

      {/* ✅ how it should be used */}
      <FluentProvider targetDocument={document} theme={webLightTheme} />
    </>
  );
}

Migration guide

We didn't recommend to use ThemeProvider anywhere for converged packages, but if you have them in your code please replace them with FluentProvider. See an example below.

Before

import { ThemeProvider, webLightTheme } from "@fluentui/react-components";
import { useTheme } from "@fluentui/react-theme-provider";

function App() {
  const parentTheme = useTheme();

  return <ThemeProvider theme={webLightTheme} targetDocument={document} />;
}

After

import { FluentProvider, webLightTheme, useTheme } from "@fluentui/react-components";
// useTheme() can be also imported from "@fluentui/react-shared-contexts", but it's not recommended 

function App() {
  const parentTheme = useTheme();

  return <FluentProvider theme={webLightTheme} targetDocument={document} />;
}

size-auditor · 2021-06-24T15:07:35Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-components-FluentProvider	16.815 kB	16.34 kB	-475 bytes

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

Baseline commit: cc979d76b9c15148302ba7f39bb683746ff33d2d (build)

fabricteam · 2021-06-24T16:05:48Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
ThemeProviderNext	mount	6559	6979	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	835	824	5000
BaseButton	mount	942	951	5000
Breadcrumb	mount	2599	2556	1000
ButtonNext	mount	532	529	5000
Checkbox	mount	1602	1562	5000
CheckboxBase	mount	1416	1353	5000
ChoiceGroup	mount	4927	4898	5000
ComboBox	mount	966	990	1000
CommandBar	mount	9854	9908	1000
ContextualMenu	mount	6075	6222	1000
DefaultButton	mount	1137	1175	5000
DetailsRow	mount	3764	3803	5000
DetailsRowFast	mount	3759	3733	5000
DetailsRowNoStyles	mount	3492	3545	5000
Dialog	mount	2119	2183	1000
DocumentCardTitle	mount	142	151	1000
Dropdown	mount	3332	3279	5000
FocusTrapZone	mount	1783	1757	5000
FocusZone	mount	1721	1777	5000
IconButton	mount	1815	1779	5000
Label	mount	328	364	5000
Layer	mount	1812	1811	5000
Link	mount	476	458	5000
MakeStyles	mount	1731	1730	50000
MenuButton	mount	1546	1504	5000
MessageBar	mount	2060	1973	5000
Nav	mount	3311	3337	1000
OverflowSet	mount	1009	1022	5000
Panel	mount	1993	2079	1000
Persona	mount	844	832	1000
Pivot	mount	1456	1460	1000
PrimaryButton	mount	1344	1340	5000
Rating	mount	7938	7958	5000
SearchBox	mount	1389	1364	5000
Shimmer	mount	2602	2653	5000
Slider	mount	1981	1983	5000
SpinButton	mount	5016	5025	5000
Spinner	mount	415	434	5000
SplitButton	mount	3243	3222	5000
Stack	mount	493	504	5000
StackWithIntrinsicChildren	mount	1594	1654	5000
StackWithTextChildren	mount	4898	4799	5000
SwatchColorPicker	mount	10785	10803	5000
Tabs	mount	1494	1476	1000
TagPicker	mount	2522	2588	5000
TeachingBubble	mount	11983	12034	5000
Text	mount	471	435	5000
TextField	mount	1579	1457	5000
ThemeProvider	mount	1200	1309	5000
ThemeProvider	virtual-rerender	604	644	5000
ThemeProviderNext	mount	6559	6979	5000	Possible regression
Toggle	mount	806	801	5000
buttonNative	mount	96	100	5000

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ChatDuplicateMessagesPerf.default	349	303	1.15:1
AttachmentMinimalPerf.default	183	166	1.1:1
RefMinimalPerf.default	240	222	1.08:1
ListWith60ListItems.default	708	659	1.07:1
SkeletonMinimalPerf.default	385	364	1.06:1
TextMinimalPerf.default	375	355	1.06:1
ButtonMinimalPerf.default	181	173	1.05:1
ChatMinimalPerf.default	706	672	1.05:1
LabelMinimalPerf.default	427	408	1.05:1
DividerMinimalPerf.default	397	381	1.04:1
FormMinimalPerf.default	462	445	1.04:1
HeaderMinimalPerf.default	408	391	1.04:1
ImageMinimalPerf.default	400	383	1.04:1
LayoutMinimalPerf.default	384	368	1.04:1
MenuButtonMinimalPerf.default	1708	1638	1.04:1
AlertMinimalPerf.default	296	288	1.03:1
BoxMinimalPerf.default	376	365	1.03:1
ButtonSlotsPerf.default	574	556	1.03:1
ProviderMinimalPerf.default	1019	992	1.03:1
SegmentMinimalPerf.default	369	359	1.03:1
SliderMinimalPerf.default	1619	1576	1.03:1
GridMinimalPerf.default	359	353	1.02:1
InputMinimalPerf.default	1287	1267	1.02:1
ListCommonPerf.default	682	670	1.02:1
LoaderMinimalPerf.default	711	694	1.02:1
TableManyItemsPerf.default	2045	1996	1.02:1
CustomToolbarPrototype.default	3809	3724	1.02:1
ToolbarMinimalPerf.default	979	959	1.02:1
VideoMinimalPerf.default	661	649	1.02:1
AvatarMinimalPerf.default	206	204	1.01:1
DropdownMinimalPerf.default	3067	3040	1.01:1
EmbedMinimalPerf.default	4202	4175	1.01:1
FlexMinimalPerf.default	301	298	1.01:1
ItemLayoutMinimalPerf.default	1273	1261	1.01:1
MenuMinimalPerf.default	888	882	1.01:1
PopupMinimalPerf.default	580	573	1.01:1
SplitButtonMinimalPerf.default	3905	3851	1.01:1
TreeMinimalPerf.default	816	804	1.01:1
AttachmentSlotsPerf.default	1122	1120	1:1
CheckboxMinimalPerf.default	2754	2743	1:1
DatepickerMinimalPerf.default	5526	5544	1:1
ListMinimalPerf.default	542	544	1:1
ListNestedPerf.default	578	577	1:1
PortalMinimalPerf.default	177	177	1:1
RadioGroupMinimalPerf.default	484	483	1:1
IconMinimalPerf.default	622	619	1:1
TextAreaMinimalPerf.default	536	538	1:1
ButtonOverridesMissPerf.default	1738	1752	0.99:1
DialogMinimalPerf.default	771	776	0.99:1
DropdownManyItemsPerf.default	705	714	0.99:1
HeaderSlotsPerf.default	808	813	0.99:1
TableMinimalPerf.default	414	419	0.99:1
TooltipMinimalPerf.default	1010	1025	0.99:1
ProviderMergeThemesPerf.default	1595	1635	0.98:1
ReactionMinimalPerf.default	401	410	0.98:1
StatusMinimalPerf.default	724	736	0.98:1
AnimationMinimalPerf.default	427	442	0.97:1
CardMinimalPerf.default	599	620	0.97:1
ChatWithPopoverPerf.default	355	366	0.97:1
RosterPerf.default	1251	1290	0.97:1
TreeWith60ListItems.default	179	184	0.97:1
AccordionMinimalPerf.default	159	169	0.94:1
CarouselMinimalPerf.default	458	498	0.92:1

…hore/remove-theme-provider � Conflicts: � .github/CODEOWNERS

bsunderhus

LGTM, amazing 🙌🏼, this is a long waited change IMO. Thx!

Hotell · 2021-06-25T10:48:18Z

chore: remove @fluentui/react-theme-provider

I'd say this is refactor or feat

This is a breaking change - can you please provide before/after usage for consumers

--

Initially, we were thinking that it will be useful to have a ThemeProvider that will provide only tokens, but in reality we received duplication and confusion from customers as components still require FluentProvider to wrap their apps.

Can you please elaborate on this for better transparency for others ? (written form/post-mortem etc)

thx!

layershifter · 2021-06-25T11:10:01Z

chore: remove @fluentui/react-theme-provider

I'd say this is refactor or feat

This is a breaking change - can you please provide before/after usage for consumers

--

Initially, we were thinking that it will be useful to have a ThemeProvider that will provide only tokens, but in reality we received duplication and confusion from customers as components still require FluentProvider to wrap their apps.

Can you please elaborate on this for better transparency for others ? (written form/post-mortem etc)

thx!

I updated PR's description to include the migration guide and examples when ThemeProvider produced confusion.

apps/perf-test/src/scenarios/ThemeProviderNext.tsx

miroslavstastny · 2021-06-25T11:39:49Z

packages/react-tooltip/src/components/Tooltip/useTooltip.tsx

 import { usePopper } from '@fluentui/react-positioning';
-import { TooltipContext, useFluent } from '@fluentui/react-shared-contexts';
-import { useTheme } from '@fluentui/react-theme-provider';
+import { TooltipContext, useFluent, useTheme } from '@fluentui/react-shared-contexts';


This is technically a breaking change as well as useTheme moved to a different package. Let's hope everybody imports from react-components but would it make sense to add this to breaking changes description?

Good catch, I added PR's description 👍

…hore/remove-theme-provider � Conflicts: � apps/perf-test/package.json � apps/vr-tests/package.json � packages/react-accordion/package.json � packages/react-components/package.json � packages/react-examples/package.json � packages/react-provider/package.json � packages/react-theme-provider/CHANGELOG.json � packages/react-theme-provider/CHANGELOG.md � packages/react-theme-provider/package.json � packages/react-tooltip/package.json

codesandbox-ci · 2021-06-30T08:56:07Z

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 283f378:

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

Hotell

ty!

msft-fluent-ui-bot · 2021-07-01T07:38:01Z

🎉@fluentui/react-tooltip@v9.0.0-alpha.50 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-01T07:38:28Z

🎉@fluentui/react-provider@v9.0.0-alpha.50 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-01T07:39:22Z

🎉@fluentui/react-components@v9.0.0-alpha.72 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-01T07:39:55Z

🎉@fluentui/react-accordion@v9.0.0-alpha.45 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-01T07:40:01Z

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

Handy links:

layershifter added 2 commits June 24, 2021 16:42

chore: remove @fluentui/react-theme-provider

777dee2

Change files

dc71ba9

msft-fluent-ui-bot assigned miroslavstastny Jun 24, 2021

layershifter added 2 commits June 24, 2021 16:55

fix API.md file

b3fc218

fix deps

ea6c776

layershifter added 3 commits June 24, 2021 17:24

fix tests

9656cdf

add babel config

1f92ef1

add babel config

0a944f4

layershifter added 2 commits June 25, 2021 10:33

Merge branch 'master' of https://github.com/microsoft/fluentui into c…

8e09f3a

…hore/remove-theme-provider � Conflicts: � .github/CODEOWNERS

fix useThemeStyleTag usage

2534213

layershifter marked this pull request as ready for review June 25, 2021 09:16

layershifter requested review from a team, JustSlone, behowell, jurokapsiar and miroslavstastny as code owners June 25, 2021 09:16

bsunderhus approved these changes Jun 25, 2021

View reviewed changes

layershifter changed the title ~~chore: remove @fluentui/react-theme-provider~~ refactor: remove @fluentui/react-theme-provider Jun 25, 2021

ling1726 reviewed Jun 25, 2021

View reviewed changes

apps/perf-test/src/scenarios/ThemeProviderNext.tsx Show resolved Hide resolved

ling1726 reviewed Jun 25, 2021

View reviewed changes

apps/perf-test/src/scenarios/ThemeProviderNext.tsx Show resolved Hide resolved

ling1726 approved these changes Jun 25, 2021

View reviewed changes

rename perf test

f9d94c9

layershifter mentioned this pull request Jun 25, 2021

migration: migrate converged packages to new DX (1st stage) #18579

Closed

32 tasks

miroslavstastny reviewed Jun 25, 2021

View reviewed changes

miroslavstastny approved these changes Jun 25, 2021

View reviewed changes

JustSlone approved these changes Jun 25, 2021

View reviewed changes

layershifter added the Fluent UI react-components (v9) label Jun 28, 2021

khmakoto approved these changes Jun 29, 2021

View reviewed changes

Hotell approved these changes Jun 30, 2021

View reviewed changes

fix version mismatch

283f378

layershifter merged commit 76680e0 into master Jun 30, 2021

layershifter deleted the chore/remove-theme-provider branch June 30, 2021 14:47

layershifter mentioned this pull request Nov 29, 2021

ThemeProvider from react-theme-provider: Object is not a function #18531

Closed

Conversation

layershifter commented Jun 24, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

BREAKING CHANGES

Migration guide

Before

After

Uh oh!

size-auditor bot commented Jun 24, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Jun 24, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Uh oh!

bsunderhus left a comment

Choose a reason for hiding this comment

Uh oh!

Hotell commented Jun 25, 2021

Uh oh!

layershifter commented Jun 25, 2021

Uh oh!

Uh oh!

Uh oh!

miroslavstastny Jun 25, 2021

Choose a reason for hiding this comment

Uh oh!

layershifter Jun 25, 2021

Choose a reason for hiding this comment

Uh oh!

codesandbox-ci bot commented Jun 30, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Hotell left a comment

Choose a reason for hiding this comment

Uh oh!

msft-fluent-ui-bot commented Jul 1, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 1, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 1, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 1, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 1, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

layershifter commented Jun 24, 2021 •

edited

Loading

size-auditor bot commented Jun 24, 2021 •

edited

Loading

fabricteam commented Jun 24, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)

codesandbox-ci bot commented Jun 30, 2021 •

edited

Loading