(react-switch) - Adding dragging functionality #19864

czearing · 2021-09-20T21:17:33Z

Pull request checklist

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

Description of changes

Adding dragging functionality to the converged Switch component.

Basic Example

Custom Styles

Note: The drop shadow has some visual artifacts due to the recording software.

This pull request also simplifies the way custom checked and unchecked styles are applied to the Switch. Instead of using classname selectors for unchecked and checked states:

    ':hover .ms-Switch-track': {
      background: '#9f9f9f',
    },

    '&.checked': {
      '& .ms-Switch-track': {
         background: '#fa80ab',
        border: 'none',
      },
    },

Checked and unchecked styling are applied through after and before and are toggled between by changing the opacity.

    ':hover .ms-Switch-track': {
      ':before': {
        background: '#9f9f9f',
      },
      ':after': {
        background: '#fa80ab',
        border: 'none',
      },
    },

Change

Change is fired when the thumb reaches an endpoint on the rail or pointerup is fired.

CodeSandbox Demo

https://codesandbox.io/s/draggable-switch-7w94d?file=/src/App.js

…eat/react-switch/switch-dragging # Conflicts: # packages/react-switch/src/components/Switch/useSwitchStyles.ts

czearing · 2021-09-20T21:18:45Z

This is awaiting feedback from design and will likely undergo changes in the future.

fabricteam · 2021-09-20T21:25:33Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-switch` Switch	`29.85 kB` `9.407 kB`	`24.344 kB` `7.847 kB`	`5.506 kB` `1.56 kB`

_{🤖 This report was generated against 88c9cf5919eae10665791f81a7edcd44bc23bc73}

size-auditor · 2021-09-20T21:29:26Z

Asset size changes

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

Baseline commit: 88c9cf5919eae10665791f81a7edcd44bc23bc73 (build)

codesandbox-ci · 2021-09-20T21:32:39Z

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 4947d97:

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

fabricteam · 2021-09-20T21:44:53Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	896	895	5000
BaseButton	mount	875	889	5000
Breadcrumb	mount	2597	2576	1000
ButtonNext	mount	449	437	5000
Checkbox	mount	1478	1492	5000
CheckboxBase	mount	1290	1251	5000
ChoiceGroup	mount	4672	4742	5000
ComboBox	mount	958	967	1000
CommandBar	mount	10046	9917	1000
ContextualMenu	mount	6425	6348	1000
DefaultButton	mount	1064	1062	5000
DetailsRow	mount	3622	3763	5000
DetailsRowFast	mount	3634	3717	5000
DetailsRowNoStyles	mount	3470	3553	5000
Dialog	mount	2444	2395	1000
DocumentCardTitle	mount	145	133	1000
Dropdown	mount	3219	3159	5000
FluentProviderNext	mount	7304	7351	5000
FluentProviderWithTheme	mount	351	338	10
FluentProviderWithTheme	virtual-rerender	97	95	10
FluentProviderWithTheme	virtual-rerender-with-unmount	461	507	10
FocusTrapZone	mount	1759	1752	5000
FocusZone	mount	1785	1746	5000
IconButton	mount	1700	1740	5000
Label	mount	322	342	5000
Layer	mount	2962	2992	5000
Link	mount	448	450	5000
MakeStyles	mount	1813	1784	50000
MenuButton	mount	1416	1462	5000
MessageBar	mount	1922	1960	5000
Nav	mount	3199	3238	1000
OverflowSet	mount	1070	1059	5000
Panel	mount	1316	2383	1000
Persona	mount	809	816	1000
Pivot	mount	1407	1394	1000
PrimaryButton	mount	1234	1245	5000
Rating	mount	7710	7670	5000
SearchBox	mount	1273	1264	5000
Shimmer	mount	2499	2515	5000
Slider	mount	1952	1920	5000
SpinButton	mount	5320	4932	5000
Spinner	mount	397	406	5000
SplitButton	mount	3045	3063	5000
Stack	mount	498	475	5000
StackWithIntrinsicChildren	mount	1682	1638	5000
StackWithTextChildren	mount	4590	4577	5000
SwatchColorPicker	mount	10427	10600	5000
Tabs	mount	1390	1386	1000
TagPicker	mount	2539	2585	5000
TeachingBubble	mount	12917	12854	5000
Text	mount	399	411	5000
TextField	mount	1308	1388	5000
ThemeProvider	mount	1152	1146	5000
ThemeProvider	virtual-rerender	590	584	5000
ThemeProvider	virtual-rerender-with-unmount	1855	1867	5000
Toggle	mount	769	782	5000
buttonNative	mount	114	112	5000

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

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
AvatarMinimalPerf.default	192	191	1.01:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
HeaderMinimalPerf.default	387	338	1.14:1
TreeWith60ListItems.default	193	174	1.11:1
ListWith60ListItems.default	657	609	1.08:1
ChatDuplicateMessagesPerf.default	296	278	1.06:1
LayoutMinimalPerf.default	377	355	1.06:1
AttachmentMinimalPerf.default	162	155	1.05:1
PortalMinimalPerf.default	181	172	1.05:1
ButtonMinimalPerf.default	167	160	1.04:1
ImageMinimalPerf.default	381	368	1.04:1
ItemLayoutMinimalPerf.default	1242	1191	1.04:1
LabelMinimalPerf.default	374	358	1.04:1
AttachmentSlotsPerf.default	1070	1041	1.03:1
CardMinimalPerf.default	560	542	1.03:1
FormMinimalPerf.default	407	397	1.03:1
TextMinimalPerf.default	338	327	1.03:1
ChatMinimalPerf.default	653	639	1.02:1
CheckboxMinimalPerf.default	2787	2734	1.02:1
ListCommonPerf.default	655	644	1.02:1
SliderMinimalPerf.default	1707	1667	1.02:1
IconMinimalPerf.default	592	578	1.02:1
TableManyItemsPerf.default	1920	1875	1.02:1
ButtonOverridesMissPerf.default	1746	1721	1.01:1
DatepickerMinimalPerf.default	5391	5351	1.01:1
EmbedMinimalPerf.default	4305	4251	1.01:1
InputMinimalPerf.default	1324	1312	1.01:1
ListMinimalPerf.default	497	490	1.01:1
LoaderMinimalPerf.default	686	681	1.01:1
MenuMinimalPerf.default	837	827	1.01:1
ProviderMergeThemesPerf.default	1720	1700	1.01:1
RadioGroupMinimalPerf.default	430	426	1.01:1
ReactionMinimalPerf.default	363	360	1.01:1
TableMinimalPerf.default	402	399	1.01:1
ToolbarMinimalPerf.default	915	907	1.01:1
TooltipMinimalPerf.default	1023	1017	1.01:1
VideoMinimalPerf.default	625	618	1.01:1
AlertMinimalPerf.default	270	269	1:1
FlexMinimalPerf.default	284	285	1:1
HeaderSlotsPerf.default	756	757	1:1
ListNestedPerf.default	546	544	1:1
ProviderMinimalPerf.default	1104	1099	1:1
SegmentMinimalPerf.default	344	343	1:1
SplitButtonMinimalPerf.default	4173	4172	1:1
BoxMinimalPerf.default	336	339	0.99:1
ChatWithPopoverPerf.default	369	374	0.99:1
DialogMinimalPerf.default	750	755	0.99:1
DropdownMinimalPerf.default	3173	3189	0.99:1
MenuButtonMinimalPerf.default	1595	1608	0.99:1
PopupMinimalPerf.default	595	599	0.99:1
AnimationMinimalPerf.default	397	404	0.98:1
CarouselMinimalPerf.default	456	466	0.98:1
DividerMinimalPerf.default	355	363	0.98:1
DropdownManyItemsPerf.default	670	681	0.98:1
GridMinimalPerf.default	332	339	0.98:1
StatusMinimalPerf.default	671	684	0.98:1
ButtonSlotsPerf.default	543	557	0.97:1
RosterPerf.default	1174	1211	0.97:1
SkeletonMinimalPerf.default	341	353	0.97:1
CustomToolbarPrototype.default	4025	4148	0.97:1
TextAreaMinimalPerf.default	471	489	0.96:1
TreeMinimalPerf.default	778	816	0.95:1
RefMinimalPerf.default	236	253	0.93:1
AccordionMinimalPerf.default	134	153	0.88:1

…sition.

…eat/react-switch/switch-dragging # Conflicts: # packages/react-switch/src/components/Switch/Switch.test.tsx # packages/react-switch/src/components/Switch/__snapshots__/Switch.test.tsx.snap # packages/react-switch/src/components/Switch/useSwitchState.ts

khmakoto · 2021-09-22T00:46:53Z

After conversations with design we have determined this looks good for the time being. Further investigation is needed on the design side regarding the motion aspect of it.

khmakoto · 2021-09-22T00:52:03Z

packages/react-switch/src/components/Switch/useSwitchState.ts

 import { useFluent } from '@fluentui/react-shared-contexts';
 import type { SwitchState } from './Switch.types';

+interface SwitchInternalState {


Maybe to be done as a separate PR but Geoff was working on changing all our interfaces to be types.

khmakoto · 2021-09-22T00:53:43Z

packages/react-switch/src/components/Switch/useSwitchState.ts

+/**
+ * Validates that the `value` is a number and falls between the min and max.
+ *
+ * @param value - the value to be clamped
+ * @param min - the lowest valid value
+ * @param max - the highest valid value
+ */
+const clamp = (value: number, min: number, max: number): number => Math.max(min, Math.min(max, value || 0));
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const on = (element: Element, eventName: string, callback: (ev: any) => void) => {
+  element.addEventListener(eventName, callback);
+  return () => element.removeEventListener(eventName, callback);
+};


I'm guessing we will just use the versions in react-utilities once these are moved from Slider into there?

Yeah once they are moved into react-utilities they would be used here as well.

…eat/react-switch/switch-dragging

* Adding dragging * Updating state and styles * Cleaning up code * Cleaing up custom stories * Cleaning up code * Updating API * Adding RTL support and updating snapshots * Change files * Updating a doc comment * Fixing a visual bug in controlled scenarios related to the renderedPosition. * Fixing a bug in mobile screen readers due to stacked change events. * Switching internalState interface to a type * Updating tests

czearing added 10 commits September 17, 2021 16:30

Adding dragging

7af15f8

Updating state and styles

abddbd9

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

866577e

…eat/react-switch/switch-dragging # Conflicts: # packages/react-switch/src/components/Switch/useSwitchStyles.ts

Cleaning up code

e15152f

Cleaing up custom stories

f5866d6

Cleaning up code

8ac50d4

Updating API

343a913

Adding RTL support and updating snapshots

a97ad13

Change files

83a2d6d

Updating a doc comment

22f0eb2

czearing added Status: Do Not Merge 🚫 Component: Switch labels Sep 20, 2021

czearing requested a review from khmakoto September 20, 2021 21:17

czearing requested review from behowell and a team as code owners September 20, 2021 21:17

msft-fluent-ui-bot assigned GeoffCoxMSFT Sep 20, 2021

czearing added 3 commits September 21, 2021 13:32

Fixing a visual bug in controlled scenarios related to the renderedPo…

498f6a9

…sition.

Fixing a bug in mobile screen readers due to stacked change events.

3e18bd9

czearing removed the Status: Do Not Merge 🚫 label Sep 21, 2021

khmakoto approved these changes Sep 22, 2021

View reviewed changes

czearing added 3 commits September 21, 2021 21:39

Switching internalState interface to a type

21cae51

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

abb4435

…eat/react-switch/switch-dragging

Updating tests

4947d97

czearing merged commit 047f5f2 into microsoft:master Sep 22, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(react-switch) - Adding dragging functionality #19864

(react-switch) - Adding dragging functionality #19864

czearing commented Sep 20, 2021

czearing commented Sep 20, 2021 •

edited

Loading

fabricteam commented Sep 20, 2021 •

edited

Loading

size-auditor bot commented Sep 20, 2021 •

edited

Loading

codesandbox-ci bot commented Sep 20, 2021 •

edited

Loading

fabricteam commented Sep 20, 2021 •

edited

Loading

khmakoto commented Sep 22, 2021

khmakoto Sep 22, 2021

khmakoto Sep 22, 2021

czearing Sep 22, 2021

(react-switch) - Adding dragging functionality #19864

(react-switch) - Adding dragging functionality #19864

Conversation

czearing commented Sep 20, 2021

Pull request checklist

Description of changes

Basic Example

Custom Styles

Change

CodeSandbox Demo

czearing commented Sep 20, 2021 • edited Loading

fabricteam commented Sep 20, 2021 • edited Loading

📊 Bundle size report

size-auditor bot commented Sep 20, 2021 • edited Loading

Asset size changes

codesandbox-ci bot commented Sep 20, 2021 • edited Loading

fabricteam commented Sep 20, 2021 • edited Loading

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Potential regressions comparing to master

khmakoto commented Sep 22, 2021

khmakoto Sep 22, 2021

Choose a reason for hiding this comment

khmakoto Sep 22, 2021

Choose a reason for hiding this comment

czearing Sep 22, 2021

Choose a reason for hiding this comment

czearing commented Sep 20, 2021 •

edited

Loading

fabricteam commented Sep 20, 2021 •

edited

Loading

size-auditor bot commented Sep 20, 2021 •

edited

Loading

codesandbox-ci bot commented Sep 20, 2021 •

edited

Loading

fabricteam commented Sep 20, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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