ButtonToggle: Fix VR scale animation (#3810)

pinterest · Oct 18, 2024 · 123a661 · 123a661
1 parent 34792de
commit 123a661
Showing 1 changed file with 20 additions and 24 deletions.
diff --git a/packages/gestalt/src/ButtonToggle.tsx b/packages/gestalt/src/ButtonToggle.tsx
@@ -308,30 +308,26 @@ const ButtonToggleWithForwardRef = forwardRef<HTMLButtonElement, Props>(function
     );
   }
 
-  const childrenDivClasses = classnames(
-    sharedTypeClasses,
-    touchableStyles.tapTransition,
-    sizeStyles,
-    styles.childrenDiv,
-    {
-      [styles.compact]: text.length === 0,
-      [styles.disabled]: disabled && (color !== 'red' || selected),
-      [styles.disabledRed]: disabled && color === 'red' && !selected,
-      [styles.disabledTransparent]: disabled && color === 'transparent' && !selected,
-      [styles.enabled]: !disabled,
-      [borderStyles.noBorder]: color === 'red' && !selected,
-      [styles.selected]: !disabled && selected,
-      [styles.selectedDisabled]: disabled && selected,
-      [styles.thumbnailDark]: graphicSrc && isDarkMode !== selected,
-      [styles.thumbnailDisabled]: graphicSrc && disabled,
-      [styles.thumbnailLg]: size === 'lg' && graphicSrc,
-      [styles.thumbnailMd]: size === 'md' && graphicSrc,
-      [styles.thumbnailSm]: size === 'sm' && graphicSrc,
-      [styles[color]]: !disabled && !selected,
-      [styles.interactiveBorder]:
-        !disabled && !selected && !isFocused && color === 'transparent' && isInVRExperiment,
-    },
-  );
+  const childrenDivClasses = classnames(sharedTypeClasses, sizeStyles, styles.childrenDiv, {
+    [buttonToggleAnimation.classes]: isInVRExperiment,
+    [touchableStyles.tapTransition]: !isInVRExperiment,
+    [styles.compact]: text.length === 0,
+    [styles.disabled]: disabled && (color !== 'red' || selected),
+    [styles.disabledRed]: disabled && color === 'red' && !selected,
+    [styles.disabledTransparent]: disabled && color === 'transparent' && !selected,
+    [styles.enabled]: !disabled,
+    [borderStyles.noBorder]: color === 'red' && !selected,
+    [styles.selected]: !disabled && selected,
+    [styles.selectedDisabled]: disabled && selected,
+    [styles.thumbnailDark]: graphicSrc && isDarkMode !== selected,
+    [styles.thumbnailDisabled]: graphicSrc && disabled,
+    [styles.thumbnailLg]: size === 'lg' && graphicSrc,
+    [styles.thumbnailMd]: size === 'md' && graphicSrc,
+    [styles.thumbnailSm]: size === 'sm' && graphicSrc,
+    [styles[color]]: !disabled && !selected,
+    [styles.interactiveBorder]:
+      !disabled && !selected && !isFocused && color === 'transparent' && isInVRExperiment,
+  });
 
   const textColor =
     (disabled && 'disabled') ||