Create public-website-v9 from old migration package, import react-component stories #22578

micahgodbolt · 2022-04-20T23:41:52Z

This is the start of a new public facing v9 doc site built with storybook. All the component docs will continue to live in their own packages, and we'll continue to look at react-components package.json to determine which components to add.

Eventually we'll be able to pull most everything storybook related out of the react-components package, and keep that dev loop focused on the controls it re-exports.

All the files below are copied from react-components. We'll eventually remove them from the old package once this is ready for public release.

…-component content

codesandbox-ci · 2022-04-20T23:47:15Z

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 90112c6:

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

fabricteam · 2022-04-20T23:52:28Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`priority-overflow` createOverflowManager	`2.936 kB` `1.212 kB`
`react-accordion` Accordion (including children components)	`73.754 kB` `22.494 kB`
`react-avatar` Avatar	`45.196 kB` `13.126 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-button` Button	`28.083 kB` `8.09 kB`
`react-button` CompoundButton	`33.578 kB` `9.126 kB`
`react-button` MenuButton	`29.85 kB` `8.684 kB`
`react-button` SplitButton	`36.322 kB` `9.878 kB`
`react-button` ToggleButton	`37.465 kB` `8.717 kB`
`react-card` Card - All	`57.884 kB` `16.524 kB`
`react-card` Card	`53.169 kB` `15.238 kB`
`react-card` CardFooter	`7.756 kB` `3.299 kB`
`react-card` CardHeader	`9.321 kB` `3.816 kB`
`react-card` CardPreview	`7.728 kB` `3.323 kB`
`react-combobox` Combobox	`60.564 kB` `20.751 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`174.881 kB` `49.118 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.671 kB` `10.696 kB`
`react-divider` Divider	`15.455 kB` `5.57 kB`
`react-image` Image	`10.179 kB` `3.995 kB`
`react-input` Input	`21.731 kB` `7.219 kB`
`react-label` Label	`8.441 kB` `3.541 kB`
`react-link` Link	`11.176 kB` `4.545 kB`
`react-menu` Menu (including children components)	`110.192 kB` `33.528 kB`
`react-menu` Menu (including selectable components)	`113.367 kB` `33.991 kB`
`react-popover` Popover	`100.693 kB` `30.67 kB`
`react-portal` Portal	`6.272 kB` `2.17 kB`
`react-positioning` usePopper	`23.21 kB` `8.084 kB`
`react-priority-overflow` hooks only	`10.792 kB` `4.125 kB`
`react-provider` FluentProvider	`14.079 kB` `5.274 kB`
`react-select` Select	`16.616 kB` `6.281 kB`
`react-slider` Slider	`25.619 kB` `8.287 kB`
`react-spinbutton` SpinButton	`41.957 kB` `11.877 kB`
`react-spinner` Spinner	`17.224 kB` `5.856 kB`
`react-switch` Switch	`24.333 kB` `8.019 kB`
`react-text` Text - Default	`10.867 kB` `4.269 kB`
`react-text` Text - Wrappers	`14.183 kB` `4.61 kB`
`react-textarea` Textarea	`20.672 kB` `7.07 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.676 kB` `6.61 kB`
`react-theme` Teams: Light theme	`18.492 kB` `5.3 kB`
`react-tooltip` Tooltip	`42.907 kB` `14.761 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against 57b8f7fefa13e99ef47f3a63cf845f364e635f77}

size-auditor · 2022-04-20T23:53:17Z

Asset size changes

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

Baseline commit: 57b8f7fefa13e99ef47f3a63cf845f364e635f77 (build)

fabricteam · 2022-04-20T23:56:09Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	mount	312	353	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	915	945	5000
Button	mount	552	560	5000
FluentProvider	mount	1931	1880	5000
FluentProviderWithTheme	mount	312	353	10	Possible regression
FluentProviderWithTheme	virtual-rerender	233	245	10
FluentProviderWithTheme	virtual-rerender-with-unmount	358	248	10
MakeStyles	mount	1584	1589	50000

fabricteam · 2022-04-21T00:00:46Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ListCommonPerf.default	657	608	1.08:1
AttachmentMinimalPerf.default	163	154	1.06:1
TreeWith60ListItems.default	171	162	1.06:1
ProviderMinimalPerf.default	432	411	1.05:1
TextAreaMinimalPerf.default	495	473	1.05:1
AlertMinimalPerf.default	282	271	1.04:1
BoxMinimalPerf.default	350	338	1.04:1
MenuButtonMinimalPerf.default	1746	1681	1.04:1
ToolbarMinimalPerf.default	974	933	1.04:1
ItemLayoutMinimalPerf.default	1192	1162	1.03:1
ProviderMergeThemesPerf.default	1338	1295	1.03:1
StatusMinimalPerf.default	683	666	1.03:1
ImageMinimalPerf.default	360	353	1.02:1
InputMinimalPerf.default	1326	1298	1.02:1
LayoutMinimalPerf.default	342	334	1.02:1
PopupMinimalPerf.default	663	648	1.02:1
TreeMinimalPerf.default	819	804	1.02:1
ButtonOverridesMissPerf.default	1493	1481	1.01:1
CarouselMinimalPerf.default	461	455	1.01:1
ChatMinimalPerf.default	760	751	1.01:1
CheckboxMinimalPerf.default	2724	2692	1.01:1
EmbedMinimalPerf.default	4128	4072	1.01:1
FormMinimalPerf.default	395	393	1.01:1
HeaderSlotsPerf.default	749	742	1.01:1
ReactionMinimalPerf.default	380	377	1.01:1
TableMinimalPerf.default	391	389	1.01:1
CustomToolbarPrototype.default	2802	2763	1.01:1
AnimationMinimalPerf.default	571	570	1:1
AttachmentSlotsPerf.default	1115	1111	1:1
ButtonSlotsPerf.default	539	540	1:1
MenuMinimalPerf.default	838	839	1:1
RosterPerf.default	1096	1100	1:1
SplitButtonMinimalPerf.default	4363	4348	1:1
TableManyItemsPerf.default	1940	1946	1:1
CardMinimalPerf.default	548	551	0.99:1
ChatWithPopoverPerf.default	396	401	0.99:1
DropdownMinimalPerf.default	3062	3082	0.99:1
ListWith60ListItems.default	636	641	0.99:1
LoaderMinimalPerf.default	677	682	0.99:1
RadioGroupMinimalPerf.default	457	461	0.99:1
SliderMinimalPerf.default	1663	1679	0.99:1
TextMinimalPerf.default	335	340	0.99:1
VideoMinimalPerf.default	643	647	0.99:1
DatepickerMinimalPerf.default	5858	5974	0.98:1
GridMinimalPerf.default	327	335	0.98:1
SegmentMinimalPerf.default	355	364	0.98:1
AvatarMinimalPerf.default	202	208	0.97:1
ChatDuplicateMessagesPerf.default	278	287	0.97:1
DividerMinimalPerf.default	335	346	0.97:1
PortalMinimalPerf.default	178	183	0.97:1
RefMinimalPerf.default	238	246	0.97:1
SkeletonMinimalPerf.default	342	351	0.97:1
ButtonMinimalPerf.default	157	164	0.96:1
IconMinimalPerf.default	592	614	0.96:1
DropdownManyItemsPerf.default	646	681	0.95:1
ListMinimalPerf.default	505	534	0.95:1
TooltipMinimalPerf.default	1039	1097	0.95:1
DialogMinimalPerf.default	755	803	0.94:1
LabelMinimalPerf.default	368	393	0.94:1
ListNestedPerf.default	543	586	0.93:1
HeaderMinimalPerf.default	338	369	0.92:1
FlexMinimalPerf.default	263	288	0.91:1
AccordionMinimalPerf.default	142	157	0.9:1

fabricteam · 2022-04-21T00:10:52Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	915	952	5000
Breadcrumb	mount	2781	2868	1000
Checkbox	mount	1592	1499	5000
CheckboxBase	mount	1347	1309	5000
ChoiceGroup	mount	4799	4998	5000
ComboBox	mount	1059	1045	1000
CommandBar	mount	10802	10949	1000
ContextualMenu	mount	13450	12415	1000
DefaultButton	mount	1170	1228	5000
DetailsRow	mount	3999	3989	5000
DetailsRowFast	mount	4104	4000	5000
DetailsRowNoStyles	mount	3784	3804	5000
Dialog	mount	2343	2259	1000
DocumentCardTitle	mount	169	172	1000
Dropdown	mount	3413	3383	5000
FocusTrapZone	mount	1863	1859	5000
FocusZone	mount	1874	1932	5000
IconButton	mount	1794	1784	5000
Label	mount	338	370	5000
Layer	mount	3094	3159	5000
Link	mount	495	471	5000
MenuButton	mount	1521	1544	5000
MessageBar	mount	2172	2318	5000
Nav	mount	3491	3422	1000
OverflowSet	mount	1121	1166	5000
Panel	mount	2261	2234	1000
Persona	mount	1012	1068	1000
Pivot	mount	1521	1521	1000
PrimaryButton	mount	1388	1381	5000
Rating	mount	7951	7980	5000
SearchBox	mount	1336	1354	5000
Shimmer	mount	2505	2630	5000
Slider	mount	2008	1952	5000
SpinButton	mount	5235	5138	5000
Spinner	mount	457	458	5000
SplitButton	mount	3236	3266	5000
Stack	mount	557	541	5000
StackWithIntrinsicChildren	mount	2502	2328	5000
StackWithTextChildren	mount	5412	5478	5000
SwatchColorPicker	mount	12100	11905	5000
TagPicker	mount	2846	2751	5000
TeachingBubble	mount	100415	104917	5000
Text	mount	425	429	5000
TextField	mount	1485	1486	5000
ThemeProvider	mount	1210	1190	5000
ThemeProvider	virtual-rerender	717	681	5000
ThemeProvider	virtual-rerender-with-unmount	1921	1892	5000
Toggle	mount	837	836	5000
buttonNative	mount	147	151	5000

Hotell · 2022-04-21T09:47:10Z

@micahgodbolt to better understand and align v-build goals and tooling goals in general, we'd appreciate if you could share RFC or some kind of roadmap document for work you wanna do in terms of website etc.

looking forward and ty

micahgodbolt · 2022-04-21T14:40:37Z

I'll join the v-build meeting today and we can discuss it. I'll write up a proposal after that discussion.

apps/public-docsite-v9/.storybook/preview.js

apps/public-docsite-v9/src/AccessibilityScenarios/Accordion1.stories.tsx

apps/public-docsite-v9/.storybook/main.utils.js

micahgodbolt · 2022-04-21T18:39:43Z

apps/public-docsite-v9/.storybook/main.utils.js

+
+  const dependencies = /** @type {Record<string,string>} */ (packageJson.dependencies);
+
+  return Object.keys({ ...dependencies, '@fluentui/react-components': '' })


add the actual react-components repo to dep list so that stories in that package are imported. Hope to move all those stories somewhere else eventually

apps/public-docsite-v9/package.json

…ponent stories (microsoft#22578) * changed upgrade v9 to public docsite v9, pulled in all existing react-component content * remove comments * revert back to minimal move * remove moved mdx files

Addresses microsoft#22578

Addresses #22578

changed upgrade v9 to public docsite v9, pulled in all existing react…

6f7199f

…-component content

micahgodbolt requested review from a team, JustSlone and jurokapsiar as code owners April 20, 2022 23:41

msft-fluent-ui-bot assigned miroslavstastny Apr 20, 2022

Merge branch 'master' into public-docsite-v9

ce4a065

Hotell reviewed Apr 21, 2022

View reviewed changes

apps/public-docsite-v9/.storybook/preview.js Outdated Show resolved Hide resolved

apps/public-docsite-v9/src/AccessibilityScenarios/Accordion1.stories.tsx Outdated Show resolved Hide resolved

apps/public-docsite-v9/.storybook/main.utils.js Show resolved Hide resolved

remove comments

e13714d

micahgodbolt requested a review from a team as a code owner April 21, 2022 16:36

micahgodbolt added 2 commits April 21, 2022 10:53

revert back to minimal move

b02d76b

remove moved mdx files

90112c6

micahgodbolt force-pushed the public-docsite-v9 branch from b98bd65 to 90112c6 Compare April 21, 2022 17:54

micahgodbolt changed the title ~~Create public-website-v9 from old migration package, copy react-components over~~ Create public-website-v9 from old migration package, import react-component stories Apr 21, 2022

micahgodbolt added the React 18 label Apr 21, 2022

Hotell approved these changes Apr 21, 2022

View reviewed changes

micahgodbolt removed the React 18 label Apr 21, 2022

micahgodbolt commented Apr 21, 2022

View reviewed changes

TristanWatanabe approved these changes Apr 21, 2022

View reviewed changes

apps/public-docsite-v9/package.json Show resolved Hide resolved

GeoffCoxMSFT approved these changes Apr 21, 2022

View reviewed changes

micahgodbolt merged commit 831cbbd into microsoft:master Apr 21, 2022

micahgodbolt deleted the public-docsite-v9 branch April 21, 2022 20:40

ling1726 added a commit to ling1726/fluentui that referenced this pull request Oct 5, 2023

chore: Adds VR tests for MessageBar

fe05d18

Addresses microsoft#22578

ling1726 mentioned this pull request Oct 5, 2023

chore: Adds VR tests for MessageBar #29405

Merged

ling1726 added a commit that referenced this pull request Oct 5, 2023

chore: Adds VR tests for MessageBar (#29405)

7abd27c

Addresses #22578

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Create public-website-v9 from old migration package, import react-component stories #22578

Create public-website-v9 from old migration package, import react-component stories #22578

Uh oh!

micahgodbolt commented Apr 20, 2022

Uh oh!

codesandbox-ci bot commented Apr 20, 2022 •

edited

Loading

Uh oh!

fabricteam commented Apr 20, 2022 •

edited

Loading

Uh oh!

size-auditor bot commented Apr 20, 2022 •

edited

Loading

Uh oh!

fabricteam commented Apr 20, 2022 •

edited

Loading

Uh oh!

fabricteam commented Apr 21, 2022 •

edited

Loading

Uh oh!

fabricteam commented Apr 21, 2022 •

edited

Loading

Uh oh!

Hotell commented Apr 21, 2022

Uh oh!

micahgodbolt commented Apr 21, 2022

Uh oh!

Uh oh!

Uh oh!

Uh oh!

micahgodbolt Apr 21, 2022

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants


		const dependencies = /** @type {Record<string,string>} */ (packageJson.dependencies);

		return Object.keys({ ...dependencies, '@fluentui/react-components': '' })

Create public-website-v9 from old migration package, import react-component stories #22578

Create public-website-v9 from old migration package, import react-component stories #22578

Uh oh!

Conversation

micahgodbolt commented Apr 20, 2022

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

size-auditor bot commented Apr 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 Apr 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

fabricteam commented Apr 21, 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 21, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

Hotell commented Apr 21, 2022

Uh oh!

micahgodbolt commented Apr 21, 2022

Uh oh!

Uh oh!

Uh oh!

Uh oh!

micahgodbolt Apr 21, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

codesandbox-ci bot commented Apr 20, 2022 •

edited

Loading

fabricteam commented Apr 20, 2022 •

edited

Loading

size-auditor bot commented Apr 20, 2022 •

edited

Loading

fabricteam commented Apr 20, 2022 •

edited

Loading

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

fabricteam commented Apr 21, 2022 •

edited

Loading

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

fabricteam commented Apr 21, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)