RadioGroupButton: VR motion implementation

packages/gestalt-design-tokens/src/getSources.js

@@ -47,6 +47,7 @@ function getSources({ theme, modeTheme, platform, language }) {
     `tokens/vr-theme/sema/text/language/${language}.json`,
     'tokens/vr-theme/sema/motion.json',
     'tokens/vr-theme/comp/spinner.json',
+    'tokens/vr-theme/comp/radiogroupbutton.json',
     ...(theme === 'vr-theme-web-mapping'
       ? [
           `tokens/vr-theme-web-mapping/base-color-dataviz-${modeTheme}.json`,

packages/gestalt-design-tokens/tokens/vr-theme/comp/radiogroupbutton.json

@@ -0,0 +1,30 @@
+{
+  "comp": {
+    "radiogroupbutton": {
+      "motion": {
+        "border": {
+          "scale": {
+            "easing": {
+              "type": "other",
+              "value": "{base.motion.easing.bounce}"
+            },
+            "duration": {
+              "type": "color",
+              "value": "{base.motion.duration.150}"
+            }
+          },
+          "fade": {
+            "easing": {
+              "type": "other",
+              "value": "{base.motion.easing.exit}"
+            },
+            "duration": {
+              "type": "color",
+              "value": "{base.motion.duration.150}"
+            }
+          }
+        }
+      }
+    }
+  }
+}

packages/gestalt/src/ButtonToggle.tsx

@@ -4,7 +4,6 @@ import borderStyles from './Borders.css';
 import styles from './ButtonToggle.css';
 import ColorPicker, { SkinColor } from './ButtonToggle/ColorPicker';
 import LabeledThumbnail from './ButtonToggle/LabeledThumbnail';
-import useButtonToggleAnimation from './ButtonToggle/useButtonToggleAnimation';
 import { useColorScheme } from './contexts/ColorSchemeProvider';
 import { useGlobalEventsHandlerContext } from './contexts/GlobalEventsHandlerProvider';
 import Flex from './Flex';
@@ -18,6 +17,7 @@ import useFocusVisible from './useFocusVisible';
 import useInExperiment from './useInExperiment';
 import useTapFeedback from './useTapFeedback';
 import useInteractiveStates from './utils/useInteractiveStates';
+import useTapScaleAnimation from './utils/useTapScaleAnimation';
 
 const DEFAULT_TEXT_COLORS = {
   red: 'inverse',
@@ -186,7 +186,7 @@ const ButtonToggleWithForwardRef = forwardRef<HTMLButtonElement, Props>(function
   const isDarkModeRed = isDarkMode && color === 'red';
   const { isFocusVisible } = useFocusVisible();
 
-  const buttonToggleAnimation = useButtonToggleAnimation();
+  const buttonToggleAnimation = useTapScaleAnimation();
 
   const borderClasses = isInVRExperiment
     ? {

packages/gestalt/src/RadioButton.css

@@ -57,3 +57,69 @@
 .InputEnabled {
   composes: pointer from "./Cursor.css";
 }
+
+.VRRadioButton {
+  composes: borderBox from "./Layout.css";
+  composes: absolute from "./Layout.css";
+  composes: fullWidth from "./Layout.css";
+  composes: fullHeight from "./Layout.css";
+  composes: circle from "./Borders.css";
+  composes: solid from "./Borders.css";
+}
+
+.checked {
+  transition-property: border;
+  transition-duration: 0.15s;
+  transition-timing-function: cubic-bezier(0, 0.35, 0, 1.25);
+  transition-delay: 0.15s;
+}
+
+.unchecked {
+  background: var(--sema-color-background-default);
+  transition: opacity 150ms;
+}
+
+.noTransition {
+  transition: none;
+}
+
+.noTransitionDelay {
+  transition-delay: 0s;
+}
+
+.VRRadioButton {
+  composes: borderBox from "./Layout.css";
+  composes: absolute from "./Layout.css";
+  composes: fullWidth from "./Layout.css";
+  composes: fullHeight from "./Layout.css";
+  composes: circle from "./Borders.css";
+  composes: solid from "./Borders.css";
+}
+
+.checked {
+  transition-delay: var(--comp-radiogroupbutton-motion-border-scale-duration);
+  transition-duration: var(
+    --comp-radiogroupbutton-motion-border-scale-duration
+  );
+  transition-property: border;
+  transition-timing-function: var(
+    --comp-radiogroupbutton-motion-border-scale-easing
+  );
+}
+
+.unchecked {
+  background: var(--sema-color-background-default);
+  transition-duration: 150ms;
+  transition-property: opacity;
+  transition-timing-function: var(
+    --comp-radiogroupbutton-motion-border-fade-easing
+  );
+}
+
+.noTransition {
+  transition: none;
+}
+
+.noTransitionDelay {
+  transition-delay: var(--sema-motion-opacity-duration-instant);
+}

packages/gestalt/src/RadioGroupButton.tsx

@@ -1,16 +1,21 @@
-import { forwardRef, ReactNode, useState } from 'react';
+import { forwardRef, Fragment, ReactNode, useState } from 'react';
 import classnames from 'classnames';
 import Badge from './Badge';
+import borderStyles from './Borders.css';
 import Box from './Box';
+import boxStyles from './Box.css';
 import Flex from './Flex';
 import focusStyles from './Focus.css';
 import Label from './Label';
+import layoutStyles from './Layout.css';
 import styles from './RadioButton.css';
 import controlStyles from './RadioButtonCheckbox.css';
 import { useRadioGroupContext } from './RadioGroup/Context';
 import FormHelperText from './sharedSubcomponents/FormHelperText';
 import Text from './Text';
 import useFocusVisible from './useFocusVisible';
+import useInExperiment from './useInExperiment';
+import useTapScaleAnimation from './utils/useTapScaleAnimation';
 
 type BadgeType = {
   text: string;
@@ -100,6 +105,11 @@ const RadioGroupButtonWithForwardRef = forwardRef<HTMLInputElement, Props>(funct
   }: Props,
   ref,
 ) {
+  const isInVRExperiment = useInExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
   const [focused, setFocused] = useState(false);
   const [hovered, setHover] = useState(false);
 
@@ -112,13 +122,13 @@ const RadioGroupButtonWithForwardRef = forwardRef<HTMLInputElement, Props>(funct
 
   const handleHover: (isHovered: boolean) => void = (isHovered: boolean) => setHover(isHovered);
 
-  let borderStyle = styles.Border;
+  let borderColor = styles.Border;
   if (disabled && checked) {
-    borderStyle = styles.BorderDisabledChecked;
+    borderColor = styles.BorderDisabledChecked;
   } else if (!disabled && checked) {
-    borderStyle = styles.BorderSelected;
+    borderColor = styles.BorderSelected;
   } else if (!disabled && hovered) {
-    borderStyle = styles.BorderHovered;
+    borderColor = styles.BorderHovered;
   }
 
   let borderWidth = styles.BorderUnchecked;
@@ -130,27 +140,78 @@ const RadioGroupButtonWithForwardRef = forwardRef<HTMLInputElement, Props>(funct
     borderWidth = styles.BorderCheckedMd;
   }
 
+  const uncheckedBorderWidth = disabled ? styles.BorderDisabled : styles.BorderUnchecked;
+
   const styleSize = size === 'sm' ? controlStyles.sizeSm : controlStyles.sizeMd;
 
   const bgStyle = disabled && !checked ? styles.BgDisabled : styles.BgEnabled;
 
   const { isFocusVisible } = useFocusVisible();
 
   const { parentName } = useRadioGroupContext();
+
+  const tapScaleAnimation = useTapScaleAnimation();
+
   if (parentName !== 'RadioGroup') {
     throw new Error(
       `RadioGroup.RadioButton must be used within a [RadioGroup](https://gestalt.pinterest.systems/web/radiogroup).`,
     );
   }
 
+  const radioButtonStyles = isInVRExperiment
+    ? classnames(styleSize, layoutStyles.relative, borderStyles.circle, tapScaleAnimation.classes, {
+        [focusStyles.accessibilityOutlineFocus]: focused && isFocusVisible,
+      })
+    : classnames(bgStyle, borderColor, borderWidth, styleSize, styles.RadioButton, {
+        [focusStyles.accessibilityOutlineFocus]: focused && isFocusVisible,
+      });
+
+  const checkedStyles = classnames(
+    styles.VRRadioButton,
+    styles.checked,
+    borderColor,
+    borderWidth,
+    bgStyle,
+    styleSize,
+    {
+      [styles.noTransitionDelay]: checked,
+    },
+  );
+
+  const uncheckedStyles = classnames(
+    styles.VRRadioButton,
+    styles.unchecked,
+    borderColor,
+    uncheckedBorderWidth,
+    bgStyle,
+    styleSize,
+    {
+      [boxStyles.opacity0]: checked || disabled,
+      [styles.noTransition]: checked,
+    },
+  );
+
   return (
     <Box alignItems="start" display="flex" justifyContent="start" marginEnd={-1} marginStart={-1}>
       <Box paddingX={1}>
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
         <div
-          className={classnames(bgStyle, borderStyle, borderWidth, styleSize, styles.RadioButton, {
-            [focusStyles.accessibilityOutlineFocus]: focused && isFocusVisible,
-          })}
+          ref={tapScaleAnimation.elementRef}
+          className={radioButtonStyles}
+          onMouseDown={() => {
+            if (isInVRExperiment) tapScaleAnimation.handleMouseDown();
+          }}
+          onMouseUp={() => {
+            if (isInVRExperiment) tapScaleAnimation.handleMouseUp();
+          }}
         >
+          {isInVRExperiment && (
+            <Fragment>
+              <div className={checkedStyles} />
+              <div className={uncheckedStyles} />
+            </Fragment>
+          )}
+
           <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={ref}

packages/gestalt/src/__snapshots__/RadioGroup.test.tsx.snap

@@ -27,6 +27,8 @@ exports[`RadioGroup renders 1`] = `
         >
           <div
             className="BgEnabled Border BorderUnchecked sizeMd RadioButton"
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
           >
             <input
               checked={false}
@@ -84,6 +86,8 @@ exports[`RadioGroup renders a hidden legend 1`] = `
         >
           <div
             className="BgEnabled Border BorderUnchecked sizeMd RadioButton"
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
           >
             <input
               checked={false}
@@ -142,6 +146,8 @@ exports[`RadioGroup renders an error 1`] = `
         >
           <div
             className="BgEnabled Border BorderUnchecked sizeMd RadioButton"
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
           >
             <input
               checked={false}
@@ -248,6 +254,8 @@ exports[`RadioGroup renders in different direction 1`] = `
         >
           <div
             className="BgEnabled Border BorderUnchecked sizeMd RadioButton"
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
           >
             <input
               checked={false}

packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap

@@ -3065,6 +3065,10 @@ exports[`visual refresh tokens uses visual refresh dark mode theme when specifie
   --comp-spinner-color-background-pink: #d452d1;
   --comp-spinner-color-background-orange: #ff7c36;
   --comp-spinner-color-background-blue: #24ccb0;
+  --comp-radiogroupbutton-motion-border-scale-easing: cubic-bezier(0, 0.35, 0, 1.25);
+  --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
+  --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
   --color-data-visualization-10: #007a72;
   --color-data-visualization-11: #f76593;
   --color-data-visualization-12: #ffc58f;
@@ -4048,6 +4052,10 @@ exports[`visual refresh tokens uses visual refresh light mode theme when specifi
   --comp-spinner-color-background-pink: #d452d1;
   --comp-spinner-color-background-orange: #ff7c36;
   --comp-spinner-color-background-blue: #24ccb0;
+  --comp-radiogroupbutton-motion-border-scale-easing: cubic-bezier(0, 0.35, 0, 1.25);
+  --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
+  --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
   --color-data-visualization-10: #005062;
   --color-data-visualization-11: #de2c62;
   --color-data-visualization-12: #660e00;
@@ -5028,6 +5036,10 @@ exports[`visual refresh tokens uses visual refresh with ck line height 1`] = `
   --comp-spinner-color-background-pink: #d452d1;
   --comp-spinner-color-background-orange: #ff7c36;
   --comp-spinner-color-background-blue: #24ccb0;
+  --comp-radiogroupbutton-motion-border-scale-easing: cubic-bezier(0, 0.35, 0, 1.25);
+  --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
+  --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
   --color-data-visualization-10: #005062;
   --color-data-visualization-11: #de2c62;
   --color-data-visualization-12: #660e00;
@@ -6008,6 +6020,10 @@ exports[`visual refresh tokens uses visual refresh with ja line height 1`] = `
   --comp-spinner-color-background-pink: #d452d1;
   --comp-spinner-color-background-orange: #ff7c36;
   --comp-spinner-color-background-blue: #24ccb0;
+  --comp-radiogroupbutton-motion-border-scale-easing: cubic-bezier(0, 0.35, 0, 1.25);
+  --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
+  --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
   --color-data-visualization-10: #005062;
   --color-data-visualization-11: #de2c62;
   --color-data-visualization-12: #660e00;
@@ -6988,6 +7004,10 @@ exports[`visual refresh tokens uses visual refresh with tall line height 1`] = `
   --comp-spinner-color-background-pink: #d452d1;
   --comp-spinner-color-background-orange: #ff7c36;
   --comp-spinner-color-background-blue: #24ccb0;
+  --comp-radiogroupbutton-motion-border-scale-easing: cubic-bezier(0, 0.35, 0, 1.25);
+  --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
+  --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
   --color-data-visualization-10: #005062;
   --color-data-visualization-11: #de2c62;
   --color-data-visualization-12: #660e00;
@@ -7968,6 +7988,10 @@ exports[`visual refresh tokens uses visual refresh with th line height 1`] = `
   --comp-spinner-color-background-pink: #d452d1;
   --comp-spinner-color-background-orange: #ff7c36;
   --comp-spinner-color-background-blue: #24ccb0;
+  --comp-radiogroupbutton-motion-border-scale-easing: cubic-bezier(0, 0.35, 0, 1.25);
+  --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
+  --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
   --color-data-visualization-10: #005062;
   --color-data-visualization-11: #de2c62;
   --color-data-visualization-12: #660e00;
@@ -8948,6 +8972,10 @@ exports[`visual refresh tokens uses visual refresh with vi line height 1`] = `
   --comp-spinner-color-background-pink: #d452d1;
   --comp-spinner-color-background-orange: #ff7c36;
   --comp-spinner-color-background-blue: #24ccb0;
+  --comp-radiogroupbutton-motion-border-scale-easing: cubic-bezier(0, 0.35, 0, 1.25);
+  --comp-radiogroupbutton-motion-border-scale-duration: 150ms;
+  --comp-radiogroupbutton-motion-border-fade-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --comp-radiogroupbutton-motion-border-fade-duration: 150ms;
   --color-data-visualization-10: #005062;
   --color-data-visualization-11: #de2c62;
   --color-data-visualization-12: #660e00;

packages/gestalt/src/ButtonToggle/useButtonToggleAnimation.ts → packages/gestalt/src/utils/useTapScaleAnimation.ts

@@ -1,11 +1,11 @@
 import { useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
-import styles from './ButtonToggleAnimation.css';
+import styles from './tapScaleAnimation.css';
 
 const shouldKeyPressTriggerTap = (event: React.KeyboardEvent): boolean =>
   ['Space', 'Enter'].includes(event.code);
 
-export default function useButtonToggleAnimation() {
+export default function useTapScaleAnimation() {
   const elementRef = useRef<HTMLDivElement | null>(null);
   const [animatingScaleDown, setAnimatingScaleDown] = useState(false);
   const [animatingScaleUp, setAnimatingScaleUp] = useState(false);