feat: FluentProvider applies style attributes defined by a renderer by layershifter · Pull Request #26046 · microsoft/fluentui

layershifter · 2022-12-20T12:35:46Z

New Behavior

FluentProvider now applies the same style attributes as Griffel does:

const renderer = createDOMRenderer(document, {
  styleElementAttributes: {
    nonce: "random"
  }
});

ReactDOM.render(
  <RendererProvider renderer={renderer}>
    <FluentProvider />
  </RendererProvider>
);

With this change we will get following in DOM:

<!-- Tags created by Griffel -->
<style nonce="random" data-make-styles-bucket="d"></style>
<!-- Tags created by FluentProvider -->
<style nonce="random" id="fui-FluentProvider1"></style>

Docs changes

Documentation page was renamed to include also a guide on how to configure nonce for CSP.

Related Issue(s)

Fixes [Bug]: styleElementAttributes doesn't apply to fui-FluentProvider style element #25421

size-auditor · 2022-12-20T12:48:03Z

Asset size changes

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

Baseline commit: 811e28547fd69f37310582352758e7d84c8be944 (build)

fabricteam · 2022-12-20T12:49:54Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: Button, FluentProvider & webLightTheme	`59.812 kB` `16.62 kB`	`59.888 kB` `16.652 kB`	`76 B` `32 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`188.779 kB` `53.034 kB`	`188.856 kB` `53.066 kB`	`77 B` `32 B`
`react-components` react-components: FluentProvider & webLightTheme	`34.276 kB` `11.309 kB`	`34.379 kB` `11.322 kB`	`103 B` `13 B`
`react-provider` FluentProvider	`16.343 kB` `6.11 kB`	`16.446 kB` `6.127 kB`	`103 B` `17 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-portal-compat` PortalCompatProvider	`6.069 kB` `2.053 kB`

_{🤖 This report was generated against 811e28547fd69f37310582352758e7d84c8be944}

codesandbox-ci · 2022-12-20T12:51:40Z

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 5bca96e:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration
flamboyant-tdd-elxq6h	Issue #25421

fabricteam · 2022-12-20T12:53:39Z

🕵 fluentuiv8 Open the Visual Regressions report to inspect the 4 screenshots

✅ There was 0 screenshots added, 4 screenshots removed, 1041 screenshots unchanged, 0 screenshots with different dimensions and 0 screenshots with visible difference.

unknown 4 screenshots

Image Name	Diff(in Pixels)	Image Type
Pivot - Overflow.Root.Narrow - Last tab selected.chromium.png	0	Removed
Pivot - Overflow.Root.Narrow - Overflow menu.chromium.png	0	Removed
Pivot - Overflow.Tabs - RTL.Narrow - Last tab selected.chromium.png	0	Removed
Pivot - Overflow.Tabs - RTL.Narrow - Overflow menu.chromium.png	0	Removed

fabricteam · 2022-12-20T12:55:02Z

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

⚠️ No perf measurements available

fabricteam · 2022-12-20T12:59:05Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2022-12-20T13:03:10Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1193	1198	5000
Breadcrumb	mount	2762	2787	1000
Checkbox	mount	2649	2681	5000
CheckboxBase	mount	2384	2366	5000
ChoiceGroup	mount	4234	4258	5000
ComboBox	mount	1183	1233	1000
CommandBar	mount	9280	9274	1000
ContextualMenu	mount	10220	10146	1000
DefaultButton	mount	1351	1360	5000
DetailsRow	mount	3418	3358	5000
DetailsRowFast	mount	3408	3368	5000
DetailsRowNoStyles	mount	3227	3206	5000
Dialog	mount	2950	2994	1000
DocumentCardTitle	mount	575	577	1000
Dropdown	mount	3161	3132	5000
FocusTrapZone	mount	1925	1935	5000
FocusZone	mount	1932	1930	5000
GroupedList	mount	1812	2018	2
GroupedList	virtual-rerender	1077	1064	2
GroupedList	virtual-rerender-with-unmount	1580	1587	2
GroupedListV2	mount	555	570	2
GroupedListV2	virtual-rerender	534	545	2
GroupedListV2	virtual-rerender-with-unmount	568	565	2
IconButton	mount	1805	1786	5000
Label	mount	748	752	5000
Layer	mount	4130	4201	5000
Link	mount	849	851	5000
MenuButton	mount	1609	1622	5000
MessageBar	mount	2347	2280	5000
Nav	mount	3019	3066	1000
OverflowSet	mount	1419	1418	5000
Panel	mount	2488	2487	1000
Persona	mount	1287	1265	1000
Pivot	mount	1508	1507	1000
PrimaryButton	mount	1470	1489	5000
Rating	mount	6932	6926	5000
SearchBox	mount	1477	1491	5000
Shimmer	mount	2918	2877	5000
Slider	mount	2104	2092	5000
SpinButton	mount	4251	4261	5000
Spinner	mount	831	831	5000
SplitButton	mount	2829	2801	5000
Stack	mount	860	856	5000
StackWithIntrinsicChildren	mount	2245	2254	5000
StackWithTextChildren	mount	4941	4956	5000
SwatchColorPicker	mount	9299	9350	5000
TagPicker	mount	2272	2341	5000
TeachingBubble	mount	76759	74037	5000
Text	mount	812	816	5000
TextField	mount	1522	1544	5000
ThemeProvider	mount	1448	1445	5000
ThemeProvider	virtual-rerender	1140	1137	5000
ThemeProvider	virtual-rerender-with-unmount	1997	2002	5000
Toggle	mount	1143	1145	5000
buttonNative	mount	535	534	5000

fabricteam · 2022-12-20T13:07:22Z

🕵 FluentUI-v0 No visual regressions between this PR and main

ling1726 · 2023-01-03T17:34:08Z

+```js
+import { createDOMRenderer } from '@fluentui/react-components';
+
+const renderer = createDOMRenderer(document, {


I would also add the usage of the renderer with the provider in this example

fabricteam · 2023-01-03T17:38:58Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1279	1294	5000
Button	mount	920	908	5000
FluentProvider	mount	1485	1498	5000
FluentProviderWithTheme	mount	574	586	10
FluentProviderWithTheme	virtual-rerender	530	545	10
FluentProviderWithTheme	virtual-rerender-with-unmount	578	582	10
MakeStyles	mount	1973	1960	50000
Persona	mount	2823	2773	5000
SpinButton	mount	2357	2350	5000

…icrosoft#26046)

msft-fluent-ui-bot assigned bsunderhus Dec 20, 2022

msft-fluent-ui-bot added the Component: FluentProvider label Dec 20, 2022

github-actions Bot added this to the October Project Cycle Q4 2022 milestone Dec 20, 2022

layershifter force-pushed the fix/provider-attrs branch 5 times, most recently from 0ddf294 to 7febd10 Compare January 3, 2023 17:23

layershifter unassigned bsunderhus Jan 3, 2023

layershifter marked this pull request as ready for review January 3, 2023 17:24

layershifter requested review from a team as code owners January 3, 2023 17:24

ling1726 reviewed Jan 3, 2023

View reviewed changes

ling1726 approved these changes Jan 3, 2023

View reviewed changes

feat: FluentProvider applies styleAttributes defined by a renderer

5bca96e

layershifter force-pushed the fix/provider-attrs branch from 7febd10 to 5bca96e Compare January 3, 2023 18:20

github-actions Bot modified the milestones: October Project Cycle Q4 2022, November Project Cycle Q4 2022 Jan 3, 2023

layershifter enabled auto-merge (squash) January 3, 2023 18:22

layershifter merged commit 5b9042f into microsoft:master Jan 3, 2023

layershifter deleted the fix/provider-attrs branch January 3, 2023 21:03

q1b pushed a commit to q1b/fluentui that referenced this pull request Jan 24, 2023

feat: FluentProvider applies styleAttributes defined by a renderer (m…

d868690

…icrosoft#26046)

Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023

feat: FluentProvider applies styleAttributes defined by a renderer (m…

a88ee30

…icrosoft#26046)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: FluentProvider applies style attributes defined by a renderer#26046

feat: FluentProvider applies style attributes defined by a renderer#26046
layershifter merged 1 commit into
microsoft:masterfrom
layershifter:fix/provider-attrs

layershifter commented Dec 20, 2022 •

edited

Loading

Uh oh!

size-auditor Bot commented Dec 20, 2022 •

edited

Loading

Uh oh!

fabricteam commented Dec 20, 2022 •

edited

Loading

Uh oh!

codesandbox-ci Bot commented Dec 20, 2022 •

edited

Loading

Uh oh!

fabricteam commented Dec 20, 2022

Uh oh!

fabricteam commented Dec 20, 2022

Uh oh!

fabricteam commented Dec 20, 2022 •

edited

Loading

Uh oh!

fabricteam commented Dec 20, 2022

Uh oh!

fabricteam commented Dec 20, 2022

Uh oh!

ling1726 Jan 3, 2023

Uh oh!

layershifter Jan 3, 2023

Uh oh!

fabricteam commented Jan 3, 2023 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

layershifter commented Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New Behavior

Docs changes

Related Issue(s)

Uh oh!

size-auditor Bot commented Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

codesandbox-ci Bot commented Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Dec 20, 2022

🕵 fluentuiv8 Open the Visual Regressions report to inspect the 4 screenshots

Uh oh!

fabricteam commented Dec 20, 2022

Perf Analysis (@fluentui/react-northstar)

Uh oh!

fabricteam commented Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

fabricteam commented Dec 20, 2022

Perf Analysis (@fluentui/react)

Uh oh!

fabricteam commented Dec 20, 2022

🕵 FluentUI-v0 No visual regressions between this PR and main

Uh oh!

ling1726 Jan 3, 2023

Choose a reason for hiding this comment

Uh oh!

layershifter Jan 3, 2023

Choose a reason for hiding this comment

Uh oh!

fabricteam commented Jan 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

layershifter commented Dec 20, 2022 •

edited

Loading

size-auditor Bot commented Dec 20, 2022 •

edited

Loading

fabricteam commented Dec 20, 2022 •

edited

Loading

codesandbox-ci Bot commented Dec 20, 2022 •

edited

Loading

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

fabricteam commented Dec 20, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Jan 3, 2023 •

edited

Loading

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