chore(storybook): Add theme picker to storybook toolbar by ling1726 · Pull Request #20346 · microsoft/fluentui

ling1726 · 2021-10-26T11:16:32Z

Pull request checklist

Addresses an existing issue: Fixes partially react-components docs: theme switcher #19314, Takes over feat(react-storybook-addon): implement custom sb addon #19250
Include a change request file using $ yarn change

Description of changes

Adds the theme picker to the storybook toolbar for internal development. The current withFluentProvider decorator will be replaced with a new one that is controlled by the new toolbar picker that uses storybook global state.

The global types are exported since they will be used for the docs page.

Kudos to @Hotell for his work in #19250 which this PR steals most of 💪💪

Focus areas to test

(optional)

Chromatic stores published storybooks with commits, we can simply build an azure function to keep the version -> commit mapping and integrate a picker into the docs page

Adds the theme picker to the storybook toolbar for internal development. The global types are exported since they will be used for the docs page.

codesandbox-ci · 2021-10-26T11:35:34Z

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 69f0aee:

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

size-auditor · 2021-10-26T11:36:37Z

Asset size changes

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

Baseline commit: 050f89bf004c58652909e5dfd3c814383c40e9c5 (build)

fabricteam · 2021-10-26T11:44:03Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`57.788 kB` `18.186 kB`
`react-avatar` Avatar	`54.966 kB` `15.674 kB`
`react-badge` Badge	`23.195 kB` `6.992 kB`
`react-badge` CounterBadge	`25.655 kB` `7.688 kB`
`react-badge` PresenceBadge	`30.674 kB` `8.821 kB`
`react-button` Button	`25.595 kB` `7.765 kB`
`react-button` CompoundButton	`30.852 kB` `8.715 kB`
`react-button` MenuButton	`27.62 kB` `8.44 kB`
`react-button` SplitButton	`33.731 kB` `9.623 kB`
`react-button` ToggleButton	`34.821 kB` `8.416 kB`
`react-card` Card - All	`49.008 kB` `14.564 kB`
`react-card` Card	`44.495 kB` `13.343 kB`
`react-card` CardFooter	`8.141 kB` `3.43 kB`
`react-card` CardHeader	`9.461 kB` `3.883 kB`
`react-card` CardPreview	`8.434 kB` `3.604 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`169.429 kB` `48.08 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.201 kB` `10.665 kB`
`react-divider` Divider	`15.61 kB` `5.646 kB`
`react-image` Image	`9.784 kB` `3.982 kB`
`react-input` Input	`16.751 kB` `5.533 kB`
`react-label` Label	`8.965 kB` `3.713 kB`
`react-link` Link	`11.659 kB` `4.704 kB`
`react-make-styles` makeStaticStyles (runtime)	`7.59 kB` `3.321 kB`
`react-make-styles` makeStyles + mergeClasses (runtime)	`22.235 kB` `8.408 kB`
`react-make-styles` makeStyles + mergeClasses (build time)	`2.558 kB` `1.204 kB`
`react-menu` Menu (including children components)	`105.802 kB` `32.207 kB`
`react-menu` Menu (including selectable components)	`108.078 kB` `32.58 kB`
`react-popover` Popover	`101.166 kB` `30.376 kB`
`react-portal` Portal	`6.725 kB` `2.237 kB`
`react-positioning` usePopper	`23.145 kB` `7.942 kB`
`react-provider` FluentProvider	`15.16 kB` `5.58 kB`
`react-slider` RangedSlider	`41.432 kB` `11.976 kB`
`react-slider` Slider	`34.81 kB` `10.862 kB`
`react-switch` Switch	`26.615 kB` `8.562 kB`
`react-text` Text - Default	`11.351 kB` `4.424 kB`
`react-text` Text - Wrappers	`14.42 kB` `4.729 kB`
`react-theme` Teams: all themes	`25.712 kB` `6.17 kB`
`react-theme` Teams: Light theme	`17.215 kB` `5.116 kB`
`react-tooltip` Tooltip	`45.556 kB` `15.549 kB`
`react-utilities` SSRProvider	`213 B` `170 B`

_{🤖 This report was generated against 050f89bf004c58652909e5dfd3c814383c40e9c5}

fabricteam · 2021-10-26T11:50:46Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1046	1069	5000
BaseButton	mount	1059	1046	5000
Breadcrumb	mount	2795	2790	1000
ButtonNext	mount	537	555	5000
Checkbox	mount	1765	1743	5000
CheckboxBase	mount	1477	1459	5000
ChoiceGroup	mount	5244	5281	5000
ComboBox	mount	1050	1064	1000
CommandBar	mount	10752	10720	1000
ContextualMenu	mount	6802	6929	1000
DefaultButton	mount	1232	1290	5000
DetailsRow	mount	4150	4177	5000
DetailsRowFast	mount	4142	4108	5000
DetailsRowNoStyles	mount	3995	3958	5000
Dialog	mount	2727	2693	1000
DocumentCardTitle	mount	185	187	1000
Dropdown	mount	3517	3548	5000
FluentProviderNext	mount	3447	3347	5000
FluentProviderWithTheme	mount	200	216	10
FluentProviderWithTheme	virtual-rerender	98	104	10
FluentProviderWithTheme	virtual-rerender-with-unmount	263	235	10
FocusTrapZone	mount	1960	1944	5000
FocusZone	mount	1905	1934	5000
IconButton	mount	1952	2003	5000
Label	mount	381	385	5000
Layer	mount	3247	3235	5000
Link	mount	543	532	5000
MakeStyles	mount	1911	1906	50000
MenuButton	mount	1680	1694	5000
MessageBar	mount	2141	2151	5000
Nav	mount	3616	3572	1000
OverflowSet	mount	1211	1214	5000
Panel	mount	2557	2584	1000
Persona	mount	912	926	1000
Pivot	mount	1570	1585	1000
PrimaryButton	mount	1426	1473	5000
Rating	mount	8695	8651	5000
SearchBox	mount	1518	1521	5000
Shimmer	mount	2904	2893	5000
Slider	mount	2158	2135	5000
SpinButton	mount	5443	5426	5000
Spinner	mount	465	483	5000
SplitButton	mount	3539	3522	5000
Stack	mount	577	581	5000
StackWithIntrinsicChildren	mount	2004	1978	5000
StackWithTextChildren	mount	5364	5331	5000
SwatchColorPicker	mount	11359	11400	5000
TagPicker	mount	2923	2965	5000
TeachingBubble	mount	13707	13670	5000
Text	mount	483	464	5000
TextField	mount	1522	1548	5000
ThemeProvider	mount	1284	1265	5000
ThemeProvider	virtual-rerender	623	646	5000
ThemeProvider	virtual-rerender-with-unmount	2140	2142	5000
Toggle	mount	892	930	5000
buttonNative	mount	151	145	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeWith60ListItems.default	220	193	1.14:1
PortalMinimalPerf.default	201	184	1.09:1
AccordionMinimalPerf.default	178	167	1.07:1
AttachmentMinimalPerf.default	198	185	1.07:1
SegmentMinimalPerf.default	400	375	1.07:1
AvatarMinimalPerf.default	228	216	1.06:1
BoxMinimalPerf.default	405	381	1.06:1
FormMinimalPerf.default	501	472	1.06:1
GridMinimalPerf.default	393	374	1.05:1
LabelMinimalPerf.default	456	434	1.05:1
ListMinimalPerf.default	580	551	1.05:1
ReactionMinimalPerf.default	449	428	1.05:1
ChatDuplicateMessagesPerf.default	340	327	1.04:1
HeaderMinimalPerf.default	425	408	1.04:1
ListWith60ListItems.default	745	716	1.04:1
RefMinimalPerf.default	254	244	1.04:1
AttachmentSlotsPerf.default	1232	1199	1.03:1
CardMinimalPerf.default	652	631	1.03:1
ChatMinimalPerf.default	742	721	1.03:1
ChatWithPopoverPerf.default	452	438	1.03:1
DividerMinimalPerf.default	419	408	1.03:1
ToolbarMinimalPerf.default	1069	1042	1.03:1
AnimationMinimalPerf.default	459	451	1.02:1
ButtonMinimalPerf.default	205	201	1.02:1
DatepickerMinimalPerf.default	6029	5938	1.02:1
DialogMinimalPerf.default	814	800	1.02:1
FlexMinimalPerf.default	324	318	1.02:1
ItemLayoutMinimalPerf.default	1379	1351	1.02:1
LayoutMinimalPerf.default	414	405	1.02:1
MenuMinimalPerf.default	947	927	1.02:1
RadioGroupMinimalPerf.default	504	494	1.02:1
SliderMinimalPerf.default	1858	1826	1.02:1
SplitButtonMinimalPerf.default	4699	4610	1.02:1
TableManyItemsPerf.default	2182	2139	1.02:1
TableMinimalPerf.default	482	471	1.02:1
TextAreaMinimalPerf.default	607	594	1.02:1
ButtonOverridesMissPerf.default	1959	1936	1.01:1
CheckboxMinimalPerf.default	2959	2928	1.01:1
DropdownMinimalPerf.default	3375	3354	1.01:1
ListNestedPerf.default	632	627	1.01:1
LoaderMinimalPerf.default	761	757	1.01:1
MenuButtonMinimalPerf.default	1816	1794	1.01:1
ProviderMinimalPerf.default	1240	1224	1.01:1
StatusMinimalPerf.default	775	764	1.01:1
TextMinimalPerf.default	387	385	1.01:1
TreeMinimalPerf.default	891	884	1.01:1
AlertMinimalPerf.default	312	311	1:1
HeaderSlotsPerf.default	855	853	1:1
ImageMinimalPerf.default	446	447	1:1
InputMinimalPerf.default	1424	1421	1:1
PopupMinimalPerf.default	634	633	1:1
ProviderMergeThemesPerf.default	1829	1832	1:1
CustomToolbarPrototype.default	4408	4400	1:1
CarouselMinimalPerf.default	512	519	0.99:1
DropdownManyItemsPerf.default	778	787	0.99:1
EmbedMinimalPerf.default	4687	4725	0.99:1
SkeletonMinimalPerf.default	397	400	0.99:1
TooltipMinimalPerf.default	1121	1133	0.99:1
IconMinimalPerf.default	690	705	0.98:1
RosterPerf.default	1307	1350	0.97:1
VideoMinimalPerf.default	707	727	0.97:1
ButtonSlotsPerf.default	602	630	0.96:1
ListCommonPerf.default	708	737	0.96:1

layershifter · 2021-10-26T12:55:26Z

+    fontFamily: theme.fontFamilyBase,
+    background: theme.colorNeutralBackground1,


Suggested change

fontFamily: theme.fontFamilyBase,

background: theme.colorNeutralBackground1,

This should not be required as FluentProvider injects these styles:

fluentui/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts

Lines 7 to 10 in b5b7401

backgroundColor: theme.colorNeutralBackground1,

fontFamily: theme.fontFamilyBase,

fontSize: theme.fontSizeBase300,

fontWeight: theme.fontWeightRegular,

Unfortunately the story area has already been styled with a specific hex colour value as a part of the redesign with a higher specificity.

fluentui/.storybook/preview-head-template.html

Line 113 in 1df0025

background: #faf9f8;

I can remove font family

Unfortunately the story area has already been styled with a specific hex colour value as a part of the redesign with a higher specificity.

Is it required? Just curious for what purpose, may be we can use there is a different element for that scenario?

It was a part of the work that was done in tandem with designers to make storybook 'look more Fluent' don't hve much more context apart from that

I can understand that we might want that panel to have a certain background so that's why I ended up applying the background specifically to the container for the story so theme switching would look sane in dark and HC mode

miroslavstastny

packages/react-storybook-addon/src/components/.gitkeep should be removed

ling1726 · 2021-10-26T16:37:58Z

packages/react-storybook-addon/src/components/.gitkeep should be removed

The gitkeep is already removed @miroslavstastny

Hotell · 2021-10-27T10:46:28Z

  showPanel: true,
  panelPosition: 'right',
  theme,
+  toolbar: {


why is this needed ? --docs mode will remove those by default no?

it's not necessary, it removes the current toolbar items which IMO are never used in the interal dev loop

Removed this entire file

Hotell · 2021-10-27T10:53:33Z

+import { THEME_ID } from '../constants';
+import { FluentGlobals, FluentStoryContext } from '../hooks';
+
+import { makeStyles } from '@fluentui/react-make-styles';


can we remove need for make styles ? introducing custom styling solution in storybook addon is not a good idea in general.

I'm not sure what 'in general' means here. The addon already uses FluentProvider as a dependency.

makeStyles is necessary in the FluentProvider since we need a background for stories that can be theme switched. (see #20346 (comment))

I've kept the make styles usage only for the decorator now and removed it from the toolbar

I'm not sure what 'in general' means here.

it means that storybook has its own way of styling (emotion). to follow the API of addons unified solutions should be used instead of custom one especially for public facing addons.

makeStyles is necessary in the FluentProvider since we need a background for stories that can be theme switched. (see #20346 (comment))

If I'm not wrong having this styled via emotion (storybook way) or inline would increase the specificity so there is no need for make-styles being used manually. What the Provider does under the hood is implementation detail and addon should not care about it - thus following generic addons styling solution. Obtaining the color value should be achievable directly from react-theme

Ah ok that makes sense, I fetched the direct theme value and removed makestyles in this commit

Hotell · 2021-11-02T09:38:47Z

CI is failing ^

) * experiment(storybook): Version picker Chromatic stores published storybooks with commits, we can simply build an azure function to keep the version -> commit mapping and integrate a picker into the docs page * Change files * use fluent menu * cleanup * add network fetch * use addon * remove old * update deps * update stypes * update md * remove export * chore(storybook): Add theme picker to storybook toolbar Adds the theme picker to the storybook toolbar for internal development. The global types are exported since they will be used for the docs page. * remove unnecessary changes * update change * remove font family style * pr suggestions * re-show the other items in the toolbar * revert export * update readme * remove usage of make-styles * update syncpack * update md

ling1726 added 13 commits October 21, 2021 20:27

experiment(storybook): Version picker

ec117c0

Chromatic stores published storybooks with commits, we can simply build an azure function to keep the version -> commit mapping and integrate a picker into the docs page

Change files

85e17c3

use fluent menu

a8db329

cleanup

8dcc438

add network fetch

153d565

use addon

c00b676

remove old

4afccab

update deps

f26fb4c

update stypes

5a797d9

update md

89001c0

remove export

b9e145c

Merge branch 'master' into experiment/storybook-version-picker

e046069

chore(storybook): Add theme picker to storybook toolbar

75bc101

Adds the theme picker to the storybook toolbar for internal development. The global types are exported since they will be used for the docs page.

msft-fluent-ui-bot assigned bsunderhus Oct 26, 2021

ling1726 added 2 commits October 26, 2021 13:19

remove unnecessary changes

e79117f

update change

e72aead

ling1726 changed the title ~~Chore/storybook toolbar theme~~ chore(storybook): Add theme picker to storybook toolbar Oct 26, 2021

ling1726 commented Oct 26, 2021

View reviewed changes

Comment thread packages/react-storybook-addon/src/index.ts Outdated

ling1726 marked this pull request as ready for review October 26, 2021 11:21

ling1726 requested review from a team as code owners October 26, 2021 11:21

varholak-peter assigned Hotell Oct 26, 2021

Hotell added Area: Documentation Fluent UI react-components (v9) labels Oct 26, 2021

Hotell added the Storybook label Oct 26, 2021

Hotell added this to the October Project Cycle Q4 2021 milestone Oct 26, 2021

layershifter reviewed Oct 26, 2021

View reviewed changes

miroslavstastny reviewed Oct 26, 2021

View reviewed changes

remove font family style

69f0aee

Hotell reviewed Oct 27, 2021

View reviewed changes

Hotell removed their assignment Oct 27, 2021

ling1726 mentioned this pull request Nov 2, 2021

Add strict mode plugin to storybook toolbar #20446

Closed

ling1726 requested review from Hotell, layershifter and miroslavstastny November 2, 2021 08:28

ling1726 added 5 commits November 2, 2021 10:15

pr suggestions

06b0056

merge master

1f4b141

re-show the other items in the toolbar

fe01f37

revert export

4cdce66

update readme

c98631c

remove usage of make-styles

9a54f98

Hotell approved these changes Nov 2, 2021

View reviewed changes

ling1726 added 2 commits November 2, 2021 10:56

update syncpack

dfad2c2

update md

b84dd0e

ling1726 merged commit 5caefa0 into microsoft:master Nov 2, 2021

ling1726 mentioned this pull request Nov 2, 2021

chore(react-components): Theme picker for storybook --docs mode #20448

Merged

2 tasks

Hotell mentioned this pull request Jan 12, 2022

feat(react-storybook-addon): implement custom sb addon #19250

Closed

2 tasks

		fontFamily: theme.fontFamilyBase,
		background: theme.colorNeutralBackground1,

	backgroundColor: theme.colorNeutralBackground1,
	fontFamily: theme.fontFamilyBase,
	fontSize: theme.fontSizeBase300,
	fontWeight: theme.fontWeightRegular,

Uh oh!

Conversation

ling1726 commented Oct 26, 2021 • edited by Hotell Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull request checklist

Description of changes

Focus areas to test

Uh oh!

Uh oh!

codesandbox-ci Bot commented Oct 26, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor Bot commented Oct 26, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

miroslavstastny left a comment

Choose a reason for hiding this comment

Uh oh!

ling1726 commented Oct 26, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ling1726 Nov 2, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Hotell commented Nov 2, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

ling1726 commented Oct 26, 2021 •

edited by Hotell

Loading

codesandbox-ci Bot commented Oct 26, 2021 •

edited

Loading

size-auditor Bot commented Oct 26, 2021 •

edited

Loading

fabricteam commented Oct 26, 2021 •

edited

Loading

fabricteam commented Oct 26, 2021 •

edited

Loading

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

ling1726 Nov 2, 2021 •

edited

Loading