Checkbox: VR motion (#3814)

packages/gestalt-design-tokens/tests/__snapshots__/android.test.js.snap

@@ -753,6 +753,18 @@ Object {
   <color name=\\"sema_color_dataviz_08\\">#ff400387</color>
   <color name=\\"sema_color_dataviz_09\\">#fff2681f</color>
 
+  </resources>
+",
+  "dist/android/vr-theme/component/checkbox.xml": "<?xml version=\\"1.0\\" encoding=\\"UTF-8\\"?>
+
+<resources>
+  <dimen name=\\"comp_checkbox_motion_background_colorchange_easing\\">@dimen/base_motion_easing_linear</dimen>
+  <dimen name=\\"comp_checkbox_motion_background_colorchange_duration\\">@dimen/base_motion_duration_150</dimen>
+  <dimen name=\\"comp_checkbox_icon_motion_collapse_in_easing\\">@dimen/base_motion_easing_expressive</dimen>
+  <dimen name=\\"comp_checkbox_icon_motion_collapse_in_duration\\">@dimen/base_motion_duration_200</dimen>
+  <dimen name=\\"comp_checkbox_icon_motion_collapse_out_easing\\">@dimen/base_motion_easing_exit</dimen>
+  <dimen name=\\"comp_checkbox_icon_motion_collapse_out_duration\\">@dimen/base_motion_duration_150</dimen>
+
   </resources>
 ",
   "dist/android/vr-theme/component/radiogroupbutton.xml": "<?xml version=\\"1.0\\" encoding=\\"UTF-8\\"?>

packages/gestalt-design-tokens/tests/__snapshots__/dist.test.js.snap

@@ -11,6 +11,7 @@ Array [
   "dist/android/classic/space.xml",
   "dist/android/vr-theme/color-dark.xml",
   "dist/android/vr-theme/colors-light.xml",
+  "dist/android/vr-theme/component/checkbox.xml",
   "dist/android/vr-theme/component/radiogroupbutton.xml",
   "dist/android/vr-theme/component/spinner.xml",
   "dist/android/vr-theme/font-lineheight-ck.xml",
@@ -180,6 +181,7 @@ Array [
   "dist/ios-swift/vr-theme/GestaltTokensOpacityVR.swift",
   "dist/ios-swift/vr-theme/GestaltTokensRoundingVR.swift",
   "dist/ios-swift/vr-theme/GestaltTokensSpaceVR.swift",
+  "dist/ios-swift/vr-theme/components/GestaltTokensCheckbox.swift",
   "dist/ios-swift/vr-theme/components/GestaltTokensRadiogroupbutton.swift",
   "dist/ios-swift/vr-theme/components/GestaltTokensSpinner.swift",
 ]

packages/gestalt-design-tokens/tests/__snapshots__/ios.test.js.snap

@@ -1294,6 +1294,21 @@ public enum GestaltTokensSpaceVR {
     public static let sema0 = 0px
     public static let baseUnit = 4px
 }
+",
+  "dist/ios-swift/vr-theme/components/GestaltTokensCheckbox.swift": "
+
+
+
+import SwiftUI
+
+public enum GestaltTokensCheckbox {
+    public static let compIconMotionCollapseOutDuration = baseDuration150
+    public static let compIconMotionCollapseOutEasing = baseEasingExit
+    public static let compIconMotionCollapseInDuration = baseDuration200
+    public static let compIconMotionCollapseInEasing = baseEasingExpressive
+    public static let compMotionBackgroundColorchangeDuration = baseDuration150
+    public static let compMotionBackgroundColorchangeEasing = baseEasingLinear
+}
 ",
   "dist/ios-swift/vr-theme/components/GestaltTokensRadiogroupbutton.swift": "
 

packages/gestalt-design-tokens/tokens/vr-theme/comp/checkbox/default.json

@@ -0,0 +1,46 @@
+{
+  "comp": {
+    "checkbox": {
+      "motion": {
+        "background": {
+          "colorchange": {
+            "easing": {
+              "type": "other",
+              "value": "{base.motion.easing.linear}"
+            },
+            "duration": {
+              "type": "color",
+              "value": "{base.motion.duration.150}"
+            }
+          }
+        }
+      },
+      "icon": {
+        "motion": {
+          "collapse": {
+            "in": {
+              "easing": {
+                "type": "other",
+                "value": "{base.motion.easing.expressive}"
+              },
+              "duration": {
+                "type": "color",
+                "value": "{base.motion.duration.200}"
+              }
+            },
+            "out": {
+              "easing": {
+                "type": "other",
+                "value": "{base.motion.easing.exit}"
+              },
+              "duration": {
+                "type": "color",
+                "value": "{base.motion.duration.150}"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

packages/gestalt/src/Checkbox/InternalCheckbox.css

@@ -122,6 +122,36 @@
   composes: solid from "../Borders.css";
 }
 
+.vrCheckBackground {
+  transition-duration: var(
+    --comp-checkbox-motion-background-colorchange-duration
+  );
+  transition-property: background-color, border-color;
+  transition-timing-function: var(
+    --comp-checkbox-motion-background-colorchange-easing
+  );
+}
+
+.vrCheckBackground.focus,
+.vrCheckBackground:not(.checked) {
+  /* Don't animate border-color when focused or not checked  */
+  transition-property: background-color;
+}
+
+.vrCheckIconWrapper {
+  composes: overflowHidden from "../Layout.css";
+}
+
+.vrCheckIconEnterTransition {
+  transition: width var(--comp-checkbox-icon-motion-collapse-in-duration)
+    var(--comp-checkbox-icon-motion-collapse-in-easing);
+}
+
+.vrCheckIconExitTransition {
+  transition: width var(--comp-checkbox-icon-motion-collapse-out-duration)
+    var(--comp-checkbox-icon-motion-collapse-out-easing);
+}
+
 .sizeLg {
   height: var(--space-600);
   width: var(--space-600);
@@ -145,6 +175,7 @@
 
 .input {
   composes: absolute from "../Layout.css";
+  composes: top0 from "../Layout.css";
   composes: m0 from "../Whitespace.css";
   appearance: none;
   opacity: var(--opacity-0);

packages/gestalt/src/Checkbox/InternalCheckbox.tsx

@@ -11,6 +11,7 @@ import Text from '../Text';
 import useFocusVisible from '../useFocusVisible';
 import useInExperiment from '../useInExperiment';
 import useInteractiveStates from '../utils/useInteractiveStates';
+import useTapScaleAnimation from '../utils/useTapScaleAnimation';
 
 type Props = {
   checked?: boolean;
@@ -93,6 +94,7 @@ const InternalCheckboxWithForwardRef = forwardRef<HTMLInputElement, Props>(funct
     isActive,
   } = useInteractiveStates();
   const { isFocusVisible } = useFocusVisible();
+  const tapScaleAnimation = useTapScaleAnimation();
 
   let ariaDescribedby;
 
@@ -172,6 +174,8 @@ const InternalCheckboxWithForwardRef = forwardRef<HTMLInputElement, Props>(funct
         !((isFocused && isFocusVisible) || isHovered || isActive || errorMessage),
       [focusStyles.accessibilityOutlineFocus]: isFocused && isFocusVisible && !isInVRExperiment,
       [styles.focus]: isFocused && isFocusVisible && isInVRExperiment,
+      [tapScaleAnimation.classes]: isInVRExperiment,
+      [styles.vrCheckBackground]: isInVRExperiment,
     },
   );
 
@@ -180,10 +184,41 @@ const InternalCheckboxWithForwardRef = forwardRef<HTMLInputElement, Props>(funct
     [styles.readOnly]: readOnly,
   });
 
+  const iconWrapperStyles = classnames(styles.vrCheckIconWrapper, {
+    [styles.vrCheckIconEnterTransition]: !unchecked,
+    [styles.vrCheckIconExitTransition]: unchecked,
+  });
+
   return (
     <Box>
       <Box alignItems="start" display="flex" justifyContent="start" marginEnd={-1} marginStart={-1}>
         <Box paddingX={1} position="relative">
+          <div ref={tapScaleAnimation.elementRef} className={divStyles} style={style}>
+            {isInVRExperiment ? (
+              <div style={{ width: vrIconSizes[size] }}>
+                <div
+                  className={iconWrapperStyles}
+                  style={{ width: checked || indeterminate ? vrIconSizes[size] : 0 }}
+                >
+                  <Icon
+                    accessibilityLabel=""
+                    color={isInVRExperiment ? vrIconColor : 'inverse'}
+                    icon={indeterminate ? 'dash' : 'check'}
+                    size={isInVRExperiment ? vrIconSizes[size] : iconSizes[size]}
+                  />
+                </div>
+              </div>
+            ) : (
+              (checked || indeterminate) && (
+                <Icon
+                  accessibilityLabel=""
+                  color="inverse"
+                  icon={indeterminate ? 'dash' : 'check'}
+                  size={iconSizes[size]}
+                />
+              )
+            )}
+          </div>
           <input
             // checking for "focused" is not required by screenreaders but it prevents a11y integration tests to complain about missing label, as aria-describedby seems to shadow label in tests though it's a W3 accepeted pattern https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html
             ref={innerRef}
@@ -200,22 +235,18 @@ const InternalCheckboxWithForwardRef = forwardRef<HTMLInputElement, Props>(funct
             // @ts-expect-error - TS2322 - Type '(event: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'MouseEventHandler<HTMLInputElement>'.
             onClick={handleClick}
             onFocus={handleOnFocus}
-            onMouseDown={handleOnMouseDown}
+            onMouseDown={() => {
+              handleOnMouseDown();
+              if (isInVRExperiment) tapScaleAnimation.handleMouseDown();
+            }}
             onMouseEnter={handleOnMouseEnter}
             onMouseLeave={handleOnMouseLeave}
-            onMouseUp={handleOnMouseUp}
+            onMouseUp={() => {
+              handleOnMouseUp();
+              if (isInVRExperiment) tapScaleAnimation.handleMouseUp();
+            }}
             type="checkbox"
           />
-          <div className={divStyles} style={style}>
-            {(checked || indeterminate) && (
-              <Icon
-                accessibilityLabel=""
-                color={isInVRExperiment ? vrIconColor : 'inverse'}
-                icon={indeterminate ? 'dash' : 'check'}
-                size={isInVRExperiment ? vrIconSizes[size] : iconSizes[size]}
-              />
-            )}
-          </div>
         </Box>
         {Boolean(image) && <Box paddingX={1}>{image}</Box>}
         {label && (

packages/gestalt/src/Switch.css

@@ -89,7 +89,7 @@ html[dir="rtl"] .switch {
   composes: borderBox absolute from "./Layout.css";
   composes: circle from "./Borders.css";
   left: 0;
-  transition-property: transform width height background-color;
+  transition-property: transform, width, height, background-color;
 }
 
 .sliderVrOn {