chore(react-theme): Generate theme tokens using token pipeline #22457

miroslavstastny · 2022-04-11T19:07:14Z

Part of react-theme is generated using token pipeline from microsoft/fluentui-design-tokens.

This PR adds a script which runs the pipeline to update the generated files:

clones the microsoft/fluentui-design-tokens repo,
runs npm install to install dependencies,
runs the pipeline for all themes,
copies the files to the correct location in react-theme
runs prettier to format the generated files.

The script is currently not executed automatically anywhere.

codesandbox-ci · 2022-04-11T19:12:58Z

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 e86df5e:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

fabricteam · 2022-04-11T19:19:29Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	924	865	5000
Button	mount	530	594	5000
FluentProvider	mount	1804	1807	5000
FluentProviderWithTheme	mount	273	286	10
FluentProviderWithTheme	virtual-rerender	225	209	10
FluentProviderWithTheme	virtual-rerender-with-unmount	311	299	10
MakeStyles	mount	1464	1526	50000

size-auditor · 2022-04-11T19:20:52Z

Asset size changes

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

Baseline commit: 65f94192ed3b2cde7e52b9c7e12d6f38b81965dd (build)

fabricteam · 2022-04-11T19:26:23Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
SegmentMinimalPerf.default	865	273	3.17:1
MenuButtonMinimalPerf.default	1393	1287	1.08:1
TableMinimalPerf.default	345	323	1.07:1
AvatarMinimalPerf.default	168	158	1.06:1
PortalMinimalPerf.default	146	138	1.06:1
BoxMinimalPerf.default	290	276	1.05:1
ButtonMinimalPerf.default	141	134	1.05:1
DropdownManyItemsPerf.default	575	549	1.05:1
GridMinimalPerf.default	285	272	1.05:1
HeaderSlotsPerf.default	634	611	1.04:1
ImageMinimalPerf.default	302	291	1.04:1
RosterPerf.default	919	881	1.04:1
RadioGroupMinimalPerf.default	375	362	1.04:1
RefMinimalPerf.default	619	596	1.04:1
TextMinimalPerf.default	289	277	1.04:1
TreeWith60ListItems.default	145	140	1.04:1
ButtonOverridesMissPerf.default	1264	1223	1.03:1
ChatDuplicateMessagesPerf.default	251	244	1.03:1
DialogMinimalPerf.default	636	619	1.03:1
DividerMinimalPerf.default	304	294	1.03:1
DropdownMinimalPerf.default	2575	2506	1.03:1
FormMinimalPerf.default	346	336	1.03:1
ListMinimalPerf.default	436	423	1.03:1
IconMinimalPerf.default	515	501	1.03:1
AccordionMinimalPerf.default	111	109	1.02:1
AttachmentMinimalPerf.default	130	128	1.02:1
AttachmentSlotsPerf.default	927	913	1.02:1
EmbedMinimalPerf.default	3474	3407	1.02:1
ItemLayoutMinimalPerf.default	997	977	1.02:1
ListWith60ListItems.default	554	544	1.02:1
PopupMinimalPerf.default	534	523	1.02:1
ProviderMinimalPerf.default	340	334	1.02:1
SplitButtonMinimalPerf.default	3694	3629	1.02:1
CardMinimalPerf.default	464	461	1.01:1
CarouselMinimalPerf.default	399	397	1.01:1
LabelMinimalPerf.default	313	309	1.01:1
LayoutMinimalPerf.default	300	296	1.01:1
ListCommonPerf.default	542	535	1.01:1
MenuMinimalPerf.default	710	705	1.01:1
ProviderMergeThemesPerf.default	1065	1057	1.01:1
SkeletonMinimalPerf.default	873	865	1.01:1
SliderMinimalPerf.default	1425	1414	1.01:1
StatusMinimalPerf.default	557	553	1.01:1
TableManyItemsPerf.default	1611	1597	1.01:1
TextAreaMinimalPerf.default	406	402	1.01:1
TooltipMinimalPerf.default	912	901	1.01:1
TreeMinimalPerf.default	684	679	1.01:1
AnimationMinimalPerf.default	458	459	1:1
ChatMinimalPerf.default	607	610	1:1
DatepickerMinimalPerf.default	4954	4953	1:1
ReactionMinimalPerf.default	307	306	1:1
CustomToolbarPrototype.default	2320	2321	1:1
ButtonSlotsPerf.default	451	454	0.99:1
ChatWithPopoverPerf.default	319	323	0.99:1
CheckboxMinimalPerf.default	2226	2259	0.99:1
FlexMinimalPerf.default	238	240	0.99:1
ToolbarMinimalPerf.default	789	797	0.99:1
VideoMinimalPerf.default	542	550	0.99:1
InputMinimalPerf.default	1062	1091	0.97:1
LoaderMinimalPerf.default	547	566	0.97:1
HeaderMinimalPerf.default	265	297	0.89:1
ListNestedPerf.default	404	471	0.86:1
AlertMinimalPerf.default	198	681	0.29:1

fabricteam · 2022-04-11T19:28:24Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`73.754 kB` `22.494 kB`
`react-badge` Badge	`20.965 kB` `6.605 kB`
`react-badge` CounterBadge	`21.918 kB` `6.919 kB`
`react-badge` PresenceBadge	`22.005 kB` `6.582 kB`
`react-combobox` Combobox	`60.564 kB` `20.751 kB`
`react-divider` Divider	`15.455 kB` `5.57 kB`
`react-radio` Radio	`29.382 kB` `10.047 kB`
`react-radio` RadioGroup	`13.61 kB` `5.462 kB`
`react-switch` Switch	`25.312 kB` `8.202 kB`
`react-textarea` Textarea	`20.672 kB` `7.07 kB`

_{🤖 This report was generated against 65f94192ed3b2cde7e52b9c7e12d6f38b81965dd}

fabricteam · 2022-04-11T19:40:20Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	774	798	5000
Breadcrumb	mount	2370	2372	1000
Checkbox	mount	1289	1268	5000
CheckboxBase	mount	1081	1089	5000
ChoiceGroup	mount	4097	4038	5000
ComboBox	mount	869	839	1000
CommandBar	mount	9135	9151	1000
ContextualMenu	mount	9907	10033	1000
DefaultButton	mount	969	973	5000
DetailsRow	mount	3343	3280	5000
DetailsRowFast	mount	3318	3370	5000
DetailsRowNoStyles	mount	3152	3144	5000
Dialog	mount	1960	1956	1000
DocumentCardTitle	mount	145	151	1000
Dropdown	mount	2855	2845	5000
FocusTrapZone	mount	1626	1571	5000
FocusZone	mount	1581	1581	5000
IconButton	mount	1507	1539	5000
Label	mount	303	305	5000
Layer	mount	2544	2524	5000
Link	mount	414	386	5000
MenuButton	mount	1278	1266	5000
MessageBar	mount	1843	1827	5000
Nav	mount	2877	2836	1000
OverflowSet	mount	953	929	5000
Panel	mount	1844	1872	1000
Persona	mount	860	861	1000
Pivot	mount	1252	1266	1000
PrimaryButton	mount	1130	1136	5000
Rating	mount	6735	6720	5000
SearchBox	mount	1122	1143	5000
Shimmer	mount	2137	2172	5000
Slider	mount	1691	1669	5000
SpinButton	mount	4342	4344	5000
Spinner	mount	389	372	5000
SplitButton	mount	2749	2747	5000
Stack	mount	443	458	5000
StackWithIntrinsicChildren	mount	2004	2013	5000
StackWithTextChildren	mount	4559	4555	5000
SwatchColorPicker	mount	10133	10066	5000
TagPicker	mount	2323	2371	5000
TeachingBubble	mount	83779	83298	5000
Text	mount	370	370	5000
TextField	mount	1216	1239	5000
ThemeProvider	mount	1012	1027	5000
ThemeProvider	virtual-rerender	560	550	5000
ThemeProvider	virtual-rerender-with-unmount	1630	1605	5000
Toggle	mount	699	694	5000
buttonNative	mount	117	124	5000

…ine-script

scripts/tasks/token-pipeline.ts

Hotell · 2022-04-26T14:13:46Z

scripts/tasks/token-pipeline.ts

+  const tmpDir = createTempDir('theme');
+
+  execSync('git clone https://github.com/microsoft/fluentui-design-tokens.git', 'Clone design tokens repo', tmpDir);
+  execSync('npm install', 'Install dependencies', path.join(tmpDir, 'fluentui-design-tokens'));


they do use npm ? asking because if we invoked this via yarn it would be significantly faster

on the other hand, do we actually need to install anything ? we can run that tool directly via npx without any install

npx @fluentui/token-pipeline --in src/global.json --in src/${_.kebabCase(theme)}.json --out ${outDir}/${theme}

Yes, npm.

The reason why I install before running the pipeline is to use the correct version of the @fluentui/token-pipeline. npx searches for the script in node_modules first -> correct version is used.

But running npx directly would install latest, correct?

^ correct. we can always do the trick we do within our github actions to fetch the version used, but at this stage I think that would be way too much overhead.

what I'd like to see in general is if that the repo could provide apis being shipped to npm so we don't need to go through such a hassle on our side.

scripts/tasks/token-pipeline.ts

ghost · 2022-04-29T15:04:32Z

All CLA requirements met.

…ine-script

Hotell

🚀

…ine-script

apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Input.stories.mdx

…soft#22457) * chore(react-theme): Generate theme tokens using token pipeline * update type * Address PR comments * Do not register the script as just task * Update paths to reflect the new location of react-theme * Change file

chore(react-theme): Generate theme tokens using token pipeline

229f7e9

miroslavstastny requested a review from a team as a code owner April 11, 2022 19:07

msft-fluent-ui-bot added the Area: Build System label Apr 11, 2022

msft-fluent-ui-bot assigned micahgodbolt Apr 11, 2022

miroslavstastny assigned miroslavstastny and unassigned micahgodbolt Apr 11, 2022

update type

ed60124

miroslavstastny requested a review from Hotell April 13, 2022 09:26

Merge remote-tracking branch 'upstream/master' into chore/token-pipel…

04443a2

…ine-script

Hotell reviewed Apr 26, 2022

View reviewed changes

Address PR comments

fd98616

miroslavstastny requested a review from Hotell April 29, 2022 15:07

Merge remote-tracking branch 'upstream/master' into chore/token-pipel…

abbf1c2

…ine-script

Hotell approved these changes May 3, 2022

View reviewed changes

miroslavstastny added 3 commits May 4, 2022 13:04

Do not register the script as just task

999df2f

Merge remote-tracking branch 'upstream/master' into chore/token-pipel…

80a73ed

…ine-script

Update paths to reflect the new location of react-theme

3522b70

miroslavstastny requested review from a team as code owners May 4, 2022 11:58

Change file

e86df5e

miroslavstastny enabled auto-merge (squash) May 4, 2022 12:32

spmonahan approved these changes May 4, 2022

View reviewed changes

apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/Input.stories.mdx Show resolved Hide resolved

ling1726 approved these changes May 5, 2022

View reviewed changes

miroslavstastny merged commit 00a4a1d into microsoft:master May 5, 2022

miroslavstastny deleted the chore/token-pipeline-script branch May 5, 2022 08:41

chore(react-theme): Generate theme tokens using token pipeline #22457

chore(react-theme): Generate theme tokens using token pipeline #22457

Uh oh!

Conversation

miroslavstastny commented Apr 11, 2022

Uh oh!

codesandbox-ci bot commented Apr 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

size-auditor bot commented Apr 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Hotell Apr 26, 2022

Choose a reason for hiding this comment

Uh oh!

Hotell Apr 26, 2022

Choose a reason for hiding this comment

Uh oh!

miroslavstastny Apr 29, 2022

Choose a reason for hiding this comment

Uh oh!

Hotell May 3, 2022

Choose a reason for hiding this comment

Uh oh!

Hotell May 3, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ghost commented Apr 29, 2022 • edited by ghost 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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

codesandbox-ci bot commented Apr 11, 2022 •

edited

Loading

fabricteam commented Apr 11, 2022 •

edited

Loading

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

size-auditor bot commented Apr 11, 2022 •

edited

Loading

fabricteam commented Apr 11, 2022 •

edited

Loading

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

fabricteam commented Apr 11, 2022 •

edited

Loading

fabricteam commented Apr 11, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)

ghost commented Apr 29, 2022 •

edited by ghost

Loading