(react-switch) - Removing react-toggle and adding the react-switch package #19420

czearing · 2021-08-17T18:02:03Z

Pull request checklist

Addresses an existing issue: Switch Convergence #19409
Include a change request file using $ yarn change

Description of changes

This pull request:

Deletes the react-toggle package.
Creates the react-switch package by:

Running yarn create-package
Running yarn nx workspace-generator migrate-converged-pkg --name='@fluentui/react-switch'
Running yarn create-component

codesandbox-ci · 2021-08-17T18:09:33Z

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

Sandbox	Source
Fluent UI React Starter	Configuration

ecraig12345

Looks like you missed some references to @fluentui/react-toggle. Can you do a search of the repo and make sure you've removed them all?

(To go with this, I just ran npm deprecate @fluentui/react-toggle to help keep people from using the old version.)

.github/CODEOWNERS

packages/react-examples/.storybook/preview.js

size-auditor · 2021-08-17T18:11:34Z

Asset size changes

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

Baseline commit: f5ea93b0c0b9905c078b7ace1511b5a78ec8346d (build)

.github/CODEOWNERS

nx.json

packages/react-examples/package.json

packages/react-examples/src/react-switch/Switch/Switch.stories.tsx

workspace.json

yarn.lock

fabricteam · 2021-08-17T18:17:20Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`75.666 kB` `22.328 kB`
`react-avatar` Avatar	`56.558 kB` `15.66 kB`
`react-badge` Badge	`24.343 kB` `7.165 kB`
`react-badge` CounterBadge	`27.156 kB` `7.851 kB`
`react-badge` PresenseBadge	`237 B` `177 B`
`react-button` Button	`25.016 kB` `8.035 kB`
`react-button` CompoundButton	`30.308 kB` `8.911 kB`
`react-button` MenuButton	`26.603 kB` `8.543 kB`
`react-button` ToggleButton	`34.613 kB` `8.671 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`177.523 kB` `50.236 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.288 kB` `11.615 kB`
`react-divider` Divider	`15.889 kB` `5.747 kB`
`react-image` Image	`10.642 kB` `4.264 kB`
`react-label` Label	`9.397 kB` `3.839 kB`
`react-link` Link	`14.715 kB` `6.012 kB`
`react-make-styles` makeStaticStyles (runtime)	`7.59 kB` `3.321 kB`
`react-make-styles` makeStyles + mergeClasses (runtime)	`22.135 kB` `8.356 kB`
`react-make-styles` makeStyles + mergeClasses (build time)	`2.557 kB` `1.202 kB`
`react-menu` Menu (including children components)	`115.082 kB` `34.631 kB`
`react-menu` Menu (including selectable components)	`117.764 kB` `35.173 kB`
`react-popover` Popover	`124.599 kB` `36.198 kB`
`react-portal` Portal	`7.78 kB` `2.672 kB`
`react-positioning` usePopper	`23.145 kB` `7.942 kB`
`react-provider` FluentProvider	`16.286 kB` `5.991 kB`
`react-text` Text - Default	`11.798 kB` `4.452 kB`
`react-text` Text - Wrappers	`15.414 kB` `4.734 kB`
`react-theme` Teams: all themes	`32.941 kB` `6.674 kB`
`react-theme` Teams: Light theme	`20.247 kB` `5.662 kB`
`react-tooltip` Tooltip	`46.054 kB` `15.658 kB`
`react-utilities` SSRProvider	`213 B` `170 B`

_{🤖 This report was generated against f5ea93b0c0b9905c078b7ace1511b5a78ec8346d}

fabricteam · 2021-08-17T18:27:49Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	957	966	5000
BaseButton	mount	972	980	5000
Breadcrumb	mount	2765	2803	1000
ButtonNext	mount	460	456	5000
Checkbox	mount	1662	1676	5000
CheckboxBase	mount	1465	1433	5000
ChoiceGroup	mount	5172	5177	5000
ComboBox	mount	1058	1060	1000
CommandBar	mount	10704	10884	1000
ContextualMenu	mount	6541	6486	1000
DefaultButton	mount	1251	1258	5000
DetailsRow	mount	3895	4011	5000
DetailsRowFast	mount	4021	3996	5000
DetailsRowNoStyles	mount	3961	3903	5000
Dialog	mount	2300	2317	1000
DocumentCardTitle	mount	144	149	1000
Dropdown	mount	3478	3612	5000
FluentProviderNext	mount	7159	7165	5000
FocusTrapZone	mount	1882	1837	5000
FocusZone	mount	1840	1848	5000
IconButton	mount	1866	1890	5000
Label	mount	348	343	5000
Layer	mount	1910	1906	5000
Link	mount	502	495	5000
MakeStyles	mount	1959	2013	50000
MenuButton	mount	1613	1658	5000
MessageBar	mount	2156	2138	5000
Nav	mount	3578	3642	1000
OverflowSet	mount	1161	1160	5000
Panel	mount	2151	2240	1000
Persona	mount	876	854	1000
Pivot	mount	1484	1483	1000
PrimaryButton	mount	1371	1407	5000
Rating	mount	8368	8736	5000
SearchBox	mount	1451	1415	5000
Shimmer	mount	2783	2796	5000
Slider	mount	2142	2194	5000
SpinButton	mount	5511	5471	5000
Spinner	mount	459	435	5000
SplitButton	mount	3456	3415	5000
Stack	mount	540	543	5000
StackWithIntrinsicChildren	mount	1811	1746	5000
StackWithTextChildren	mount	5024	5176	5000
SwatchColorPicker	mount	11041	10768	5000
Tabs	mount	1486	1540	1000
TagPicker	mount	2841	2812	5000
TeachingBubble	mount	12548	12810	5000
Text	mount	432	466	5000
TextField	mount	1513	1491	5000
ThemeProvider	mount	1255	1219	5000
ThemeProvider	virtual-rerender	618	615	5000
Toggle	mount	885	850	5000
buttonNative	mount	117	122	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
GridMinimalPerf.default	389	348	1.12:1
SegmentMinimalPerf.default	406	370	1.1:1
AttachmentMinimalPerf.default	185	170	1.09:1
RefMinimalPerf.default	257	239	1.08:1
FlexMinimalPerf.default	311	290	1.07:1
LayoutMinimalPerf.default	473	443	1.07:1
CustomToolbarPrototype.default	4621	4330	1.07:1
CarouselMinimalPerf.default	528	501	1.05:1
ChatMinimalPerf.default	726	691	1.05:1
DropdownManyItemsPerf.default	789	750	1.05:1
StatusMinimalPerf.default	789	755	1.05:1
TableManyItemsPerf.default	2259	2158	1.05:1
TreeWith60ListItems.default	207	198	1.05:1
MenuMinimalPerf.default	947	911	1.04:1
ToolbarMinimalPerf.default	1079	1037	1.04:1
ImageMinimalPerf.default	416	402	1.03:1
PortalMinimalPerf.default	198	193	1.03:1
ReactionMinimalPerf.default	423	409	1.03:1
VideoMinimalPerf.default	724	701	1.03:1
AnimationMinimalPerf.default	462	455	1.02:1
AttachmentSlotsPerf.default	1191	1173	1.02:1
ButtonSlotsPerf.default	598	586	1.02:1
ChatWithPopoverPerf.default	398	390	1.02:1
DatepickerMinimalPerf.default	5882	5782	1.02:1
ListMinimalPerf.default	577	563	1.02:1
ListNestedPerf.default	639	625	1.02:1
LoaderMinimalPerf.default	747	735	1.02:1
BoxMinimalPerf.default	388	386	1.01:1
ButtonMinimalPerf.default	199	197	1.01:1
DropdownMinimalPerf.default	3243	3213	1.01:1
ItemLayoutMinimalPerf.default	1379	1372	1.01:1
ListWith60ListItems.default	714	706	1.01:1
SplitButtonMinimalPerf.default	4306	4282	1.01:1
TableMinimalPerf.default	453	448	1.01:1
TextAreaMinimalPerf.default	638	632	1.01:1
TooltipMinimalPerf.default	1123	1110	1.01:1
AvatarMinimalPerf.default	212	213	1:1
CheckboxMinimalPerf.default	2975	2966	1:1
DialogMinimalPerf.default	830	832	1:1
DividerMinimalPerf.default	411	410	1:1
EmbedMinimalPerf.default	4430	4440	1:1
FormMinimalPerf.default	458	457	1:1
ListCommonPerf.default	712	715	1:1
MenuButtonMinimalPerf.default	1850	1847	1:1
PopupMinimalPerf.default	679	680	1:1
AlertMinimalPerf.default	306	310	0.99:1
ChatDuplicateMessagesPerf.default	315	318	0.99:1
HeaderSlotsPerf.default	819	829	0.99:1
InputMinimalPerf.default	1341	1357	0.99:1
ProviderMergeThemesPerf.default	1767	1790	0.99:1
ProviderMinimalPerf.default	1091	1101	0.99:1
SkeletonMinimalPerf.default	385	388	0.99:1
ButtonOverridesMissPerf.default	1847	1877	0.98:1
HeaderMinimalPerf.default	389	397	0.98:1
TreeMinimalPerf.default	878	893	0.98:1
RadioGroupMinimalPerf.default	491	504	0.97:1
IconMinimalPerf.default	664	682	0.97:1
AccordionMinimalPerf.default	173	180	0.96:1
CardMinimalPerf.default	619	647	0.96:1
RosterPerf.default	1343	1418	0.95:1
LabelMinimalPerf.default	420	449	0.94:1
SliderMinimalPerf.default	1672	1775	0.94:1
TextMinimalPerf.default	388	415	0.93:1

ecraig12345 · 2021-08-17T19:14:54Z

.github/CODEOWNERS

 packages/react-tooltip/ @microsoft/cxe-red @behowell
+packages/react-switch/ @microsoft/cxe-red @behowell


It's probably okay to put yourself as the second owner for now.

…eat/react-switch-package-setup

czearing added 7 commits August 17, 2021 10:24

Removing toggle package

420b6a3

Removing examples

0fcace6

Creating the Switch component package

caf02ad

Running migration generator

c7fa5be

Creating the component

634bde6

Cleaning up package

a35bfd6

Updating snapshots

8baac12

czearing requested a review from khmakoto August 17, 2021 18:02

czearing requested review from behowell, jurokapsiar, JustSlone and a team as code owners August 17, 2021 18:02

msft-fluent-ui-bot assigned smhigley Aug 17, 2021

ecraig12345 requested changes Aug 17, 2021

View reviewed changes

.github/CODEOWNERS Show resolved Hide resolved

packages/react-examples/.storybook/preview.js Show resolved Hide resolved

msft-fluent-ui-bot added the Needs: Author Feedback label Aug 17, 2021

khmakoto reviewed Aug 17, 2021

View reviewed changes

Updating CODEOWNERS and removing examples

99c0966

msft-fluent-ui-bot removed the Needs: Author Feedback label Aug 17, 2021

Reverting change to react-examples and building packages

7ddfade

ecraig12345 approved these changes Aug 17, 2021

View reviewed changes

ecraig12345 reviewed Aug 17, 2021

View reviewed changes

czearing added 4 commits August 17, 2021 12:45

Updating CODEOWNERS and building package

db69394

Removing Switch.test

793e79c

Adding a snapshot test

1f8d949

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

5f1b607

…eat/react-switch-package-setup

Removing tests and adding "test": "jest --passWithNoTests",

e684860

khmakoto approved these changes Aug 17, 2021

View reviewed changes

czearing merged commit 74edc9e into microsoft:master Aug 17, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(react-switch) - Removing react-toggle and adding the react-switch package #19420

(react-switch) - Removing react-toggle and adding the react-switch package #19420

czearing commented Aug 17, 2021

codesandbox-ci bot commented Aug 17, 2021 •

edited

Loading

ecraig12345 left a comment

size-auditor bot commented Aug 17, 2021 •

edited

Loading

fabricteam commented Aug 17, 2021 •

edited

Loading

fabricteam commented Aug 17, 2021 •

edited

Loading

ecraig12345 Aug 17, 2021

		packages/react-tooltip/ @microsoft/cxe-red @behowell
		packages/react-switch/ @microsoft/cxe-red @behowell

(react-switch) - Removing react-toggle and adding the react-switch package #19420

(react-switch) - Removing react-toggle and adding the react-switch package #19420

Conversation

czearing commented Aug 17, 2021

Pull request checklist

Description of changes

codesandbox-ci bot commented Aug 17, 2021 • edited Loading

ecraig12345 left a comment

Choose a reason for hiding this comment

size-auditor bot commented Aug 17, 2021 • edited Loading

Asset size changes

fabricteam commented Aug 17, 2021 • edited Loading

📊 Bundle size report

fabricteam commented Aug 17, 2021 • edited Loading

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

ecraig12345 Aug 17, 2021

Choose a reason for hiding this comment

codesandbox-ci bot commented Aug 17, 2021 •

edited

Loading

size-auditor bot commented Aug 17, 2021 •

edited

Loading

fabricteam commented Aug 17, 2021 •

edited

Loading

fabricteam commented Aug 17, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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