fix web components webpack integration docs

[chrisdholt]

Pull request checklist

• Addresses an existing issue: Fixes #0000
• Include a change request file using $ yarn change

Description of changes

Fixes web component integration docs to accommodate a breaking change they made in a minor version and updates the package to latest FAST packages.

Focus areas to test

(optional)

[size-auditor]

Asset size changes

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

Baseline commit: 42315bf9bdc7810cd0fba0cc77ecb975d95ea86e (build)

[codesandbox-ci]

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 04f870b:

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

[fabricteam]

📊 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 42315bf9bdc7810cd0fba0cc77ecb975d95ea86e}

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1028	1059	5000
BaseButton	mount	1061	1034	5000
Breadcrumb	mount	2889	2890	1000
ButtonNext	mount	574	565	5000
Checkbox	mount	1757	1868	5000
CheckboxBase	mount	1508	1518	5000
ChoiceGroup	mount	5393	5401	5000
ComboBox	mount	1090	1111	1000
CommandBar	mount	11138	11094	1000
ContextualMenu	mount	6960	7028	1000
DefaultButton	mount	1262	1278	5000
DetailsRow	mount	4239	4110	5000
DetailsRowFast	mount	4135	4140	5000
DetailsRowNoStyles	mount	3903	3972	5000
Dialog	mount	2819	2808	1000
DocumentCardTitle	mount	173	194	1000
Dropdown	mount	3593	3569	5000
FluentProviderNext	mount	3381	3424	5000
FluentProviderWithTheme	mount	207	217	10
FluentProviderWithTheme	virtual-rerender	112	109	10
FluentProviderWithTheme	virtual-rerender-with-unmount	256	260	10
FocusTrapZone	mount	1998	1925	5000
FocusZone	mount	1897	1920	5000
IconButton	mount	1995	1990	5000
Label	mount	364	386	5000
Layer	mount	3274	3287	5000
Link	mount	538	527	5000
MakeStyles	mount	1921	1943	50000
MenuButton	mount	1639	1651	5000
MessageBar	mount	2158	2227	5000
Nav	mount	3651	3702	1000
OverflowSet	mount	1222	1249	5000
Panel	mount	2670	2649	1000
Persona	mount	921	953	1000
Pivot	mount	1557	1572	1000
PrimaryButton	mount	1437	1467	5000
Rating	mount	8759	8825	5000
SearchBox	mount	1533	1536	5000
Shimmer	mount	2817	2879	5000
Slider	mount	2153	2184	5000
SpinButton	mount	5557	5572	5000
Spinner	mount	476	473	5000
SplitButton	mount	3496	3480	5000
Stack	mount	587	588	5000
StackWithIntrinsicChildren	mount	1972	1965	5000
StackWithTextChildren	mount	5367	5382	5000
SwatchColorPicker	mount	11896	11640	5000
TagPicker	mount	2953	3049	5000
TeachingBubble	mount	14151	14209	5000
Text	mount	498	484	5000
TextField	mount	1552	1635	5000
ThemeProvider	mount	1309	1312	5000
ThemeProvider	virtual-rerender	675	682	5000
ThemeProvider	virtual-rerender-with-unmount	2144	2118	5000
Toggle	mount	973	952	5000
buttonNative	mount	139	166	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeWith60ListItems.default	234	199	1.18:1
AttachmentMinimalPerf.default	203	179	1.13:1
ChatMinimalPerf.default	800	705	1.13:1
ChatDuplicateMessagesPerf.default	375	342	1.1:1
TableMinimalPerf.default	490	446	1.1:1
GridMinimalPerf.default	400	366	1.09:1
AnimationMinimalPerf.default	470	441	1.07:1
BoxMinimalPerf.default	423	394	1.07:1
ListWith60ListItems.default	742	694	1.07:1
AvatarMinimalPerf.default	232	219	1.06:1
ButtonMinimalPerf.default	219	206	1.06:1
ChatWithPopoverPerf.default	454	427	1.06:1
ToolbarMinimalPerf.default	1111	1047	1.06:1
DropdownManyItemsPerf.default	807	768	1.05:1
FormMinimalPerf.default	490	468	1.05:1
ListCommonPerf.default	735	701	1.05:1
TextMinimalPerf.default	433	413	1.05:1
TextAreaMinimalPerf.default	604	574	1.05:1
TreeMinimalPerf.default	921	877	1.05:1
CardMinimalPerf.default	658	635	1.04:1
CheckboxMinimalPerf.default	3023	2909	1.04:1
FlexMinimalPerf.default	332	319	1.04:1
ImageMinimalPerf.default	447	429	1.04:1
SplitButtonMinimalPerf.default	5137	4936	1.04:1
IconMinimalPerf.default	745	717	1.04:1
TableManyItemsPerf.default	2295	2207	1.04:1
VideoMinimalPerf.default	731	706	1.04:1
AttachmentSlotsPerf.default	1180	1143	1.03:1
CarouselMinimalPerf.default	540	525	1.03:1
InputMinimalPerf.default	1443	1402	1.03:1
LayoutMinimalPerf.default	403	392	1.03:1
ListMinimalPerf.default	584	565	1.03:1
ProviderMinimalPerf.default	1288	1253	1.03:1
ReactionMinimalPerf.default	438	424	1.03:1
DialogMinimalPerf.default	835	819	1.02:1
DividerMinimalPerf.default	399	393	1.02:1
DropdownMinimalPerf.default	3412	3352	1.02:1
LabelMinimalPerf.default	438	430	1.02:1
ListNestedPerf.default	633	619	1.02:1
MenuMinimalPerf.default	972	951	1.02:1
PopupMinimalPerf.default	654	642	1.02:1
RadioGroupMinimalPerf.default	510	502	1.02:1
HeaderSlotsPerf.default	862	853	1.01:1
ItemLayoutMinimalPerf.default	1342	1333	1.01:1
PortalMinimalPerf.default	196	195	1.01:1
RefMinimalPerf.default	260	257	1.01:1
SegmentMinimalPerf.default	389	386	1.01:1
TooltipMinimalPerf.default	1155	1146	1.01:1
DatepickerMinimalPerf.default	6044	6031	1:1
EmbedMinimalPerf.default	4705	4691	1:1
SkeletonMinimalPerf.default	394	393	1:1
CustomToolbarPrototype.default	4499	4495	1:1
HeaderMinimalPerf.default	406	409	0.99:1
LoaderMinimalPerf.default	755	766	0.99:1
SliderMinimalPerf.default	1852	1879	0.99:1
AccordionMinimalPerf.default	182	185	0.98:1
ButtonOverridesMissPerf.default	1977	2010	0.98:1
ButtonSlotsPerf.default	626	636	0.98:1
MenuButtonMinimalPerf.default	1804	1835	0.98:1
ProviderMergeThemesPerf.default	1858	1891	0.98:1
StatusMinimalPerf.default	787	805	0.98:1
AlertMinimalPerf.default	318	327	0.97:1
RosterPerf.default	1317	1372	0.96:1

[chrisdholt]

@Hotell are you able to sign-off on this for Fluent Build? We need to get this in for the release tonight ideally. Thanks!