(react-switch) - Adding dragging functionality

change/@fluentui-react-switch-2ebc9b1d-fc4e-4a14-b966-db3604af7a99.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adding dragging to the Switch component.",
+  "packageName": "@fluentui/react-switch",
+  "email": "czearing@outlook.com",
+  "dependentChangeType": "patch"
+}

packages/react-switch/etc/react-switch.api.md

@@ -20,7 +20,7 @@ export interface SwitchCommons {
     checked?: boolean;
     defaultChecked?: boolean;
     disabled?: boolean;
-    onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: {
+    onChange?: (ev: React_2.PointerEvent<HTMLDivElement> | React_2.KeyboardEvent<HTMLDivElement>, data: {
         checked: boolean;
     }) => void;
 }
@@ -39,6 +39,7 @@ export type SwitchSlots = {
     thumbWrapper: IntrinsicShorthandProps<'div'>;
     thumb: IntrinsicShorthandProps<'div'>;
     input: IntrinsicShorthandProps<'input'>;
+    activeRail: IntrinsicShorthandProps<'div'>;
 };
 
 // @public (undocumented)

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

@@ -20,25 +20,35 @@ const useIosStyles = makeStyles({
     height: '30px',
 
     ':hover .ms-Switch-thumb': {
-      background: 'white',
+      ':before': {
+        background: 'white',
+      },
     },
 
     ':active .ms-Switch-thumb': {
-      background: 'white',
+      ':before': {
+        background: 'white',
+      },
     },
 
     ':hover .ms-Switch-track': {
-      borderColor: 'none',
-    },
+      // Unchecked
+      ':before': {
+        borderColor: 'none',
+      },
 
-    '&.checked': {
-      ':hover .ms-Switch-track': {
+      // Checked
+      ':after': {
         background: '#4cd964',
       },
+    },
 
-      '& .ms-Switch-track': {
+    ':active .ms-Switch-track': {
+      ':before': {
+        borderColor: 'none',
+      },
+      ':after': {
         background: '#4cd964',
-        border: 'none',
       },
     },
   },
@@ -51,16 +61,29 @@ const useIosStyles = makeStyles({
   thumb: {
     width: '27px',
     height: '27px',
-    background: 'white',
     boxShadow: `
       0px 3px 8px 0px rgba(0, 0, 0, 0.15),
       0px 3px 1px 0px rgba(0, 0, 0, 0.06)
     `,
+    ':before': {
+      opacity: 1,
+      background: 'white',
+    },
+    ':after': {
+      opacity: 1,
+      background: 'white',
+    },
   },
 
   track: {
-    background: 'white',
-    border: '1px solid #e0e0e0',
+    ':after': {
+      background: '#4cd964',
+      border: 'none',
+    },
+    ':before': {
+      background: 'white',
+      border: '1px solid #e0e0e0',
+    },
   },
 });
 
@@ -70,28 +93,29 @@ const useMaterialStyles = makeStyles({
     height: '14px',
 
     ':hover .ms-Switch-thumb': {
-      background: 'white',
-    },
-
-    ':hover .ms-Switch-track': {
-      background: '#9f9f9f',
-    },
-
-    '&.checked': {
-      '& .ms-Switch-thumb': {
-        background: '#f50057',
+      ':before': {
+        background: 'white',
       },
-
-      ':hover .ms-Switch-thumb': {
+      ':after': {
         background: '#f50057',
       },
+    },
 
-      '& .ms-Switch-track': {
+    ':hover .ms-Switch-track': {
+      ':before': {
+        background: '#9f9f9f',
+      },
+      ':after': {
         background: '#fa80ab',
         border: 'none',
       },
+    },
 
-      ':hover .ms-Switch-track': {
+    ':active .ms-Switch-track': {
+      ':before': {
+        background: '#9f9f9f',
+      },
+      ':after': {
         background: '#fa80ab',
         border: 'none',
       },
@@ -107,23 +131,35 @@ const useMaterialStyles = makeStyles({
   thumb: {
     width: '20px',
     height: '20px',
-    background: 'white',
     boxShadow: '0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)',
+    ':before': {
+      background: 'white',
+    },
+    ':after': {
+      background: '#f50057',
+    },
   },
 
   track: {
-    background: '#9f9f9f',
-    border: 'none',
+    ':before': {
+      background: '#9f9f9f',
+      border: 'none',
+    },
+    ':after': {
+      background: '#fa80ab',
+      border: 'none',
+    },
   },
 });
 
 export const BasicSwitchExample = (props: SwitchProps) => {
   const styles = useStyles();
   const [switchValue, setSwitchValue] = React.useState(false);
 
-  const switchOnChange = (ev: React.ChangeEvent<HTMLInputElement>, data: { checked: boolean }) => {
-    setSwitchValue(data.checked);
-  };
+  const switchOnChange = (
+    ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
+    data: { checked: boolean },
+  ) => setSwitchValue(data.checked);
 
   return (
     <div className={styles.root}>

packages/react-switch/src/components/Switch/Switch.test.tsx

@@ -59,10 +59,11 @@ describe('Switch', () => {
       const inputRef = React.createRef<HTMLInputElement>();
       const eventHandler = jest.fn();
 
-      render(<Switch checked={false} onChange={eventHandler} input={{ ref: inputRef }} />);
-      const inputElement = screen.getByRole('switch');
+      render(<Switch data-testid="root-element" checked={false} onChange={eventHandler} input={{ ref: inputRef }} />);
+      const rootElement = screen.getByTestId('root-element');
 
-      fireEvent.click(inputElement);
+      fireEvent.pointerDown(rootElement);
+      fireEvent.pointerUp(rootElement);
 
       expect(eventHandler).toBeCalledTimes(1);
       expect(eventHandler.mock.calls[0][1]).toEqual({ checked: true });
@@ -72,14 +73,17 @@ describe('Switch', () => {
     it('calls onChange with the correct value', () => {
       const eventHandler = jest.fn();
 
-      render(<Switch onChange={eventHandler} />);
+      render(<Switch data-testid="root-element" onChange={eventHandler} />);
 
-      const input = screen.getByRole('switch');
+      const rootElement = screen.getByTestId('root-element');
       expect(eventHandler).toBeCalledTimes(0);
 
-      fireEvent.click(input);
-      fireEvent.click(input);
-      fireEvent.click(input);
+      fireEvent.pointerDown(rootElement);
+      fireEvent.pointerUp(rootElement);
+      fireEvent.pointerDown(rootElement);
+      fireEvent.pointerUp(rootElement);
+      fireEvent.pointerDown(rootElement);
+      fireEvent.pointerUp(rootElement);
 
       expect(eventHandler).toBeCalledTimes(3);
       expect(eventHandler.mock.calls[2][1]).toEqual({ checked: true });

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

@@ -26,6 +26,11 @@ export type SwitchSlots = {
    * The hidden input that handles the Switch's internal functionality.
    */
   input: IntrinsicShorthandProps<'input'>;
+
+  /**
+   * The area in which the Switch's rail allows for the thumb to be dragged.
+   */
+  activeRail: IntrinsicShorthandProps<'div'>;
 };
 
 export interface SwitchCommons {
@@ -54,7 +59,7 @@ export interface SwitchCommons {
    * Callback to be called when the `checked` value changes.
    */
   onChange?: (
-    ev: React.ChangeEvent<HTMLInputElement>,
+    ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
     data: {
       checked: boolean;
     },

packages/react-switch/src/components/Switch/__snapshots__/Switch.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`Switch Snapshot Tests renders a basic Switch checked 1`] = `
     />
     <div
       class=""
-      style="transform: translate(100%);"
+      style="transform: translate(100%); transition: transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), opacity .1s cubic-bezier(0.33, 0.0, 0.67, 1);"
     >
       <div
         class="ms-Switch-thumb"
@@ -20,9 +20,13 @@ exports[`Switch Snapshot Tests renders a basic Switch checked 1`] = `
     <input
       checked=""
       class=""
+      readonly=""
       role="switch"
       type="checkbox"
     />
+    <div
+      class=""
+    />
   </div>
 </div>
 `;
@@ -38,17 +42,21 @@ exports[`Switch Snapshot Tests renders a basic Switch unchecked 1`] = `
     />
     <div
       class=""
-      style="transform: translate(0%);"
+      style="transform: translate(0%); transition: transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), opacity .1s cubic-bezier(0.33, 0.0, 0.67, 1);"
     >
       <div
         class="ms-Switch-thumb"
       />
     </div>
     <input
       class=""
+      readonly=""
       role="switch"
       type="checkbox"
     />
+    <div
+      class=""
+    />
   </div>
 </div>
 `;
@@ -64,7 +72,7 @@ exports[`Switch Snapshot Tests renders a disabled Switch checked 1`] = `
     />
     <div
       class=""
-      style="transform: translate(100%);"
+      style="transform: translate(100%); transition: transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), opacity .1s cubic-bezier(0.33, 0.0, 0.67, 1);"
     >
       <div
         class="ms-Switch-thumb"
@@ -73,9 +81,13 @@ exports[`Switch Snapshot Tests renders a disabled Switch checked 1`] = `
     <input
       checked=""
       class=""
+      readonly=""
       role="switch"
       type="checkbox"
     />
+    <div
+      class=""
+    />
   </div>
 </div>
 `;
@@ -91,17 +103,21 @@ exports[`Switch Snapshot Tests renders a disabled Switch unchecked 1`] = `
     />
     <div
       class=""
-      style="transform: translate(0%);"
+      style="transform: translate(0%); transition: transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), opacity .1s cubic-bezier(0.33, 0.0, 0.67, 1);"
     >
       <div
         class="ms-Switch-thumb"
       />
     </div>
     <input
       class=""
+      readonly=""
       role="switch"
       type="checkbox"
     />
+    <div
+      class=""
+    />
   </div>
 </div>
 `;

packages/react-switch/src/components/Switch/renderSwitch.tsx

@@ -16,6 +16,7 @@ export const renderSwitch = (state: SwitchState) => {
         <slots.thumb {...slotProps.thumb} />
       </slots.thumbWrapper>
       <slots.input {...slotProps.input} />
+      <slots.activeRail {...slotProps.activeRail} />
     </slots.root>
   );
 };

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

@@ -6,13 +6,20 @@ import type { SwitchProps, SwitchSlots, SwitchState } from './Switch.types';
 /**
  * Array of all shorthand properties listed in SwitchSlots
  */
-export const switchShorthandProps: (keyof SwitchSlots)[] = ['root', 'track', 'thumbWrapper', 'thumb', 'input'];
+export const switchShorthandProps: (keyof SwitchSlots)[] = [
+  'root',
+  'track',
+  'thumbWrapper',
+  'thumb',
+  'activeRail',
+  'input',
+];
 
 /**
  * Given user props, returns state and render function for a Switch.
  */
 export const useSwitch = (props: SwitchProps, ref: React.Ref<HTMLElement>): SwitchState => {
-  const { track, thumbWrapper, thumb, input, defaultChecked, checked, disabled, onChange } = props;
+  const { track, thumbWrapper, thumb, activeRail, input, defaultChecked, checked, disabled, onChange } = props;
   const state: SwitchState = {
     defaultChecked,
     checked,
@@ -28,11 +35,13 @@ export const useSwitch = (props: SwitchProps, ref: React.Ref<HTMLElement>): Swit
       track: 'div',
       thumbWrapper: 'div',
       thumb: 'div',
+      activeRail: 'div',
       input: 'input',
     },
     track: resolveShorthand(track, { required: true }),
     thumbWrapper: resolveShorthand(thumbWrapper, { required: true }),
     thumb: resolveShorthand(thumb, { required: true }),
+    activeRail: resolveShorthand(activeRail, { required: true }),
     input: resolveShorthand(input, {
       required: true,
       defaultProps: {