WIP

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_linear</dimen>
+ <dimen name=\\"comp_checkbox_icon_motion_collapse_in_duration\\">@dimen/base_motion_duration_150</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 = baseDuration150
+ public static let compIconMotionCollapseInEasing = baseEasingLinear
+ 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.linear}"
+ },
+ "duration": {
+ "type": "color",
+ "value": "{base.motion.duration.150}"
+ }
+ },
+ "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={isInVRExperiment ? vrIconColor : 'inverse'}
+ icon={indeterminate ? 'dash' : 'check'}
+ size={isInVRExperiment ? vrIconSizes[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 {