@pagopa/io-app-design-system 4.2.1 → 4.3.1

package/src/components/buttons/ButtonOutline.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, useCallback } from "react";
+import React, { ComponentProps, forwardRef } from "react";
 import {
   GestureResponderEvent,
   Pressable,
@@ -6,24 +6,19 @@ import {
   View
 } from "react-native";
 import Animated, {
-  Extrapolate,
-  interpolate,
   interpolateColor,
   useAnimatedProps,
   useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
+  useReducedMotion
 } from "react-native-reanimated";
 import {
   IOButtonLegacyStyles,
   IOButtonStyles,
   IOColors,
-  IOScaleValues,
-  IOSpringValues,
   hexToRgba,
   useIOExperimentalDesign
 } from "../../core/";
+import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import {
   AnimatedIcon,
@@ -190,6 +185,11 @@ const mapLegacyColorStates: Record<
   }
 };
 
+// Icon size
+const iconSize: IOIconSizeScale = 20;
+
+const DISABLED_OPACITY = 0.5;
+
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const IOButtonLegacyStylesLocal = StyleSheet.create({
   buttonWithBorder: {
@@ -197,18 +197,13 @@ const IOButtonLegacyStylesLocal = StyleSheet.create({
   }
 });
 
-// Icon size
-const iconSize: IOIconSizeScale = 20;
-
-const DISABLED_OPACITY = 0.5;
-
 const IOButtonStylesLocal = StyleSheet.create({
   buttonWithBorder: {
     borderWidth: 2
   }
 });
 
-export const ButtonOutline = React.forwardRef<View, ButtonOutline>(
+export const ButtonOutline = forwardRef<View, ButtonOutline>(
   (
     {
       color = "primary",
@@ -225,7 +220,9 @@ export const ButtonOutline = React.forwardRef<View, ButtonOutline>(
     ref
   ) => {
     const { isExperimental } = useIOExperimentalDesign();
-    const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+    const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
+      useScaleAnimation();
+    const reducedMotion = useReducedMotion();
 
     const AnimatedIOText = Animated.createAnimatedComponent(IOText);
 
@@ -243,80 +240,48 @@ export const ButtonOutline = React.forwardRef<View, ButtonOutline>(
       () => (isExperimental ? IOButtonStylesLocal : IOButtonLegacyStylesLocal),
       [isExperimental]
     );
-    // Scaling transformation applied when the button is pressed
-    const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
-
-    // Using a spring-based animation for our interpolations
-    const progressPressed = useDerivedValue(() =>
-      withSpring(isPressed.value, IOSpringValues.button)
-    );
 
     // Interpolate animation values from `isPressed` values
     const pressedAnimationStyle = useAnimatedStyle(() => {
       // Link color states to the pressed states
       const backgroundColor = interpolateColor(
-        progressPressed.value,
+        progress.value,
         [0, 1],
         [colorMap[color].background.default, colorMap[color].background.pressed]
       );
 
       const borderColor = interpolateColor(
-        progressPressed.value,
+        progress.value,
         [0, 1],
         [colorMap[color].border.default, colorMap[color].border.pressed]
       );
 
-      // Scale down button slightly when pressed
-      const scale = interpolate(
-        progressPressed.value,
-        [0, 1],
-        [1, animationScaleValue],
-        Extrapolate.CLAMP
-      );
-
       return {
         borderColor,
-        backgroundColor,
-        transform: [{ scale }]
+        backgroundColor
       };
     });
 
-    const pressedColorLabelAnimationStyle = useAnimatedStyle(() => {
-      // Link color states to the pressed states
-
-      const labelColor = interpolateColor(
-        progressPressed.value,
+    const pressedColorLabelAnimationStyle = useAnimatedStyle(() => ({
+      color: interpolateColor(
+        progress.value,
         [0, 1],
         [colorMap[color].border.default, colorMap[color].border.pressed]
-      );
-
-      return {
-        color: labelColor
-      };
-    });
+      )
+    }));
 
     // Animate the <Icon> color prop
-    const pressedColorIconAnimationStyle = useAnimatedProps(() => {
-      const iconColor = interpolateColor(
-        progressPressed.value,
+    const pressedColorIconAnimationStyle = useAnimatedProps(() => ({
+      color: interpolateColor(
+        progress.value,
         [0, 1],
         [colorMap[color].label.default, colorMap[color].label.pressed]
-      );
-      return { color: iconColor };
-    });
+      )
+    }));
 
     const AnimatedIconClassComponent =
       Animated.createAnimatedComponent(IconClassComponent);
 
-    const onPressIn = useCallback(() => {
-      // eslint-disable-next-line functional/immutable-data
-      isPressed.value = 1;
-    }, [isPressed]);
-    const onPressOut = useCallback(() => {
-      // eslint-disable-next-line functional/immutable-data
-      isPressed.value = 0;
-    }, [isPressed]);
-
     return (
       <Pressable
         ref={ref}
@@ -351,6 +316,7 @@ export const ButtonOutline = React.forwardRef<View, ButtonOutline>(
                 },
             /* Prevent Reanimated from overriding background colors
                     if button is disabled */
+            !reducedMotion && !disabled && scaleAnimatedStyle,
             !disabled && pressedAnimationStyle
           ]}
         >

package/src/components/buttons/ButtonSolid.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, useCallback, useEffect, useRef } from "react";
+import React, { ComponentProps, useCallback } from "react";
 import {
   GestureResponderEvent,
   Pressable,
@@ -7,25 +7,20 @@ import {
 } from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, {
-  Extrapolate,
-  interpolate,
   interpolateColor,
   useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
+  useReducedMotion
 } from "react-native-reanimated";
 import {
   IOButtonLegacyStyles,
   IOButtonStyles,
   IOColors,
-  IOScaleValues,
-  IOSpringValues,
   enterTransitionInnerContent,
   enterTransitionInnerContentSmall,
   exitTransitionInnerContent,
   useIOExperimentalDesign
 } from "../../core";
+import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
@@ -176,21 +171,10 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
     },
     ref
   ) => {
-    const isPressed = useSharedValue(0);
     const { isExperimental } = useIOExperimentalDesign();
-    // Scaling transformation applied when the button is pressed
-    const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
-
-    /* Prevent the component from triggering the `isEntering' transition
-       on the on the first render. Solution from this discussion:
-       https://github.com/software-mansion/react-native-reanimated/discussions/2513
-    */
-    const isMounted = useRef(false);
-
-    useEffect(() => {
-      // eslint-disable-next-line functional/immutable-data
-      isMounted.current = true;
-    }, []);
+    const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
+      useScaleAnimation();
+    const reducedMotion = useReducedMotion();
 
     const colorMap = React.useMemo(
       () => (isExperimental ? mapColorStates : mapLegacyColorStates),
@@ -202,43 +186,18 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
       [isExperimental]
     );
 
-    // Using a spring-based animation for our interpolations
-    const progressPressed = useDerivedValue(() =>
-      withSpring(isPressed.value, IOSpringValues.button)
-    );
-
     // Interpolate animation values from `isPressed` values
     const pressedAnimationStyle = useAnimatedStyle(() => {
       // Link color states to the pressed states
       const backgroundColor = interpolateColor(
-        progressPressed.value,
+        progress.value,
         [0, 1],
         [colorMap[color].default, colorMap[color].pressed]
       );
 
-      // Scale down button slightly when pressed
-      const scale = interpolate(
-        progressPressed.value,
-        [0, 1],
-        [1, animationScaleValue],
-        Extrapolate.CLAMP
-      );
-
-      return {
-        backgroundColor,
-        transform: [{ scale }]
-      };
+      return { backgroundColor };
     });
 
-    const onPressIn = useCallback(() => {
-      // eslint-disable-next-line functional/immutable-data
-      isPressed.value = 1;
-    }, [isPressed]);
-    const onPressOut = useCallback(() => {
-      // eslint-disable-next-line functional/immutable-data
-      isPressed.value = 0;
-    }, [isPressed]);
-
     const handleOnPress = useCallback(
       (event: GestureResponderEvent) => {
         /* Don't call `onPress` if the button is
@@ -289,15 +248,14 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
               : { backgroundColor: colorMap[color]?.default },
             /* Prevent Reanimated from overriding background colors
               if button is disabled */
+            !disabled && !reducedMotion && scaleAnimatedStyle,
             !disabled && pressedAnimationStyle
           ]}
         >
           {loading && (
             <Animated.View
               style={buttonStyles.buttonInner}
-              entering={
-                isMounted.current ? enterTransitionInnerContentSmall : undefined
-              }
+              entering={enterTransitionInnerContentSmall}
               exiting={exitTransitionInnerContent}
             >
               <LoadingSpinner color={foregroundColor} />
@@ -310,12 +268,7 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
                 buttonStyles.buttonInner,
                 iconPosition === "end" && { flexDirection: "row-reverse" }
               ]}
-              entering={
-                isMounted.current ? enterTransitionInnerContent : undefined
-              }
-              /* Temporarily disable the exiting transition because it caused
-              a weird glitch on page exit */
-              // exiting={exitTransitionInnerContent}
+              entering={enterTransitionInnerContent}
             >
               {icon && (
                 <>

package/src/components/buttons/IconButton.tsx

@@ -1,24 +1,18 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useMemo } from "react";
 import { GestureResponderEvent, Pressable } from "react-native";
 import Animated, {
-  Extrapolate,
-  interpolate,
   interpolateColor,
   useAnimatedProps,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
+  useReducedMotion
 } from "react-native-reanimated";
 import {
   IOColors,
   IOIconButtonStyles,
-  IOScaleValues,
-  IOSpringValues,
   IOStyles,
   hexToRgba,
   useIOExperimentalDesign
 } from "../../core";
+import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import {
   AnimatedIcon,
@@ -116,7 +110,9 @@ export const IconButton = ({
   accessibilityHint,
   testID
 }: IconButton) => {
-  const isPressed = useSharedValue(0);
+  const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
+    useScaleAnimation("exaggerated");
+  const reducedMotion = useReducedMotion();
 
   const { isExperimental } = useIOExperimentalDesign();
 
@@ -125,56 +121,23 @@ export const IconButton = ({
     [isExperimental]
   );
 
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.exaggeratedButton?.pressedState;
-
-  // Using a spring-based animation for our interpolations
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Interpolate animation values from `isPressed` values
-
-  const pressedAnimationStyle = useAnimatedStyle(() => {
-    // Scale down button slightly when pressed
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      transform: [{ scale }]
-    };
-  });
-
   // Animate the <Icon> color prop
   const animatedColor = useAnimatedProps(() => {
     const iconColor = interpolateColor(
-      progressPressed.value,
+      progress.value,
       [0, 1],
       [colorMap[color].icon.default, colorMap[color].icon.pressed]
     );
     return { color: iconColor };
   });
 
-  const handlePressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const handlePressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
-
   return (
     <Pressable
       disabled={disabled}
       // Events
       onPress={onPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
       // Accessibility
       accessible={true}
       accessibilityRole={"button"}
@@ -192,7 +155,7 @@ export const IconButton = ({
           IOIconButtonStyles.buttonSizeSmall,
           IOStyles.alignCenter,
           IOStyles.centerJustified,
-          !disabled && pressedAnimationStyle
+          !disabled && !reducedMotion && scaleAnimatedStyle
         ]}
       >
         {!disabled ? (

package/src/components/buttons/IconButtonContained.tsx

@@ -1,15 +1,10 @@
 import * as React from "react";
-import { useCallback } from "react";
 import { GestureResponderEvent, Pressable } from "react-native";
 import Animated, {
-  Extrapolate,
-  interpolate,
   interpolateColor,
   useAnimatedProps,
   useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
+  useReducedMotion
 } from "react-native-reanimated";
 import {
   AnimatedIcon,
@@ -20,11 +15,10 @@ import {
   IOButtonStyles,
   IOColors,
   IOIconButtonStyles,
-  IOScaleValues,
-  IOSpringValues,
   hexToRgba,
   useIOExperimentalDesign
 } from "../../core";
+import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 
 export type IconButtonContained = WithTestID<{
@@ -151,64 +145,33 @@ export const IconButtonContained = ({
   accessibilityHint,
   testID
 }: IconButtonContained) => {
-  const isPressed = useSharedValue(0);
   const { isExperimental } = useIOExperimentalDesign();
 
+  const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
+    useScaleAnimation("exaggerated");
+  const reducedMotion = useReducedMotion();
+
   const colorMap = React.useMemo(
     () => (isExperimental ? mapColorStates : mapLegacyColorStates),
     [isExperimental]
   );
 
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.exaggeratedButton?.pressedState;
-
-  // Using a spring-based animation for our interpolations
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Interpolate animation values from `isPressed` values
-
-  const pressedAnimationStyle = useAnimatedStyle(() => {
-    // Link color states to the pressed states
-    const backgroundColor = interpolateColor(
-      progressPressed.value,
+  const backgroundColorAnimationStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      progress.value,
       [0, 1],
       [colorMap[color].background.default, colorMap[color].background.pressed]
-    );
-
-    // Scale down button slightly when pressed
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      backgroundColor,
-      transform: [{ scale }]
-    };
-  });
+    )
+  }));
 
   // Animate the <Icon> color prop
-  const animatedColor = useAnimatedProps(() => {
-    const iconColor = interpolateColor(
-      progressPressed.value,
+  const iconColorAnimationStyle = useAnimatedProps(() => ({
+    color: interpolateColor(
+      progress.value,
       [0, 1],
       [colorMap[color].icon.default, colorMap[color].icon.pressed]
-    );
-    return { color: iconColor };
-  });
-
-  const handlePressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const handlePressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
+    )
+  }));
 
   return (
     <Pressable
@@ -218,8 +181,8 @@ export const IconButtonContained = ({
       accessibilityState={{ disabled }}
       testID={testID}
       onPress={onPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
       accessible={true}
       disabled={disabled}
       style={IOButtonStyles.dimensionsDefault}
@@ -228,13 +191,14 @@ export const IconButtonContained = ({
         style={[
           IOIconButtonStyles.button,
           IOIconButtonStyles.buttonSizeDefault,
-          !disabled && pressedAnimationStyle
+          !disabled && !reducedMotion && scaleAnimatedStyle,
+          !disabled && backgroundColorAnimationStyle
         ]}
       >
         {!disabled ? (
           <AnimatedIconClassComponent
             name={icon}
-            animatedProps={animatedColor}
+            animatedProps={iconColorAnimationStyle}
             color={colorMap[color]?.icon?.default}
           />
         ) : (

package/src/components/buttons/IconButtonSolid.tsx

@@ -1,23 +1,17 @@
 import * as React from "react";
-import { useCallback } from "react";
 import { GestureResponderEvent, Pressable } from "react-native";
 import Animated, {
-  Extrapolate,
-  interpolate,
   interpolateColor,
   useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
+  useReducedMotion
 } from "react-native-reanimated";
 import {
   IOButtonStyles,
   IOIconButtonStyles,
-  IOScaleValues,
-  IOSpringValues,
   useIOExperimentalDesign
 } from "../../core";
 import { IOColors, hexToRgba } from "../../core/IOColors";
+import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import { AnimatedIcon, IOIcons } from "../icons";
 
@@ -110,50 +104,24 @@ export const IconButtonSolid = ({
   accessibilityHint,
   testID
 }: IconButtonSolid) => {
-  const isPressed = useSharedValue(0);
   const { isExperimental } = useIOExperimentalDesign();
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.exaggeratedButton?.pressedState;
 
-  // Using a spring-based animation for our interpolations
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
+  const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
+    useScaleAnimation("exaggerated");
+  const reducedMotion = useReducedMotion();
 
   const colorMap = React.useMemo(
     () => (isExperimental ? mapColorStates : mapLegacyColorStates),
     [isExperimental]
   );
-  // Interpolate animation values from `isPressed` values
-  const pressedAnimationStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [colorMap[color].background.default, colorMap[color].background.pressed]
-    );
 
-    // Scale down button slightly when pressed
-    const scale = interpolate(
-      progressPressed.value,
+  const backgroundColorAnimationStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      progress.value,
       [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      backgroundColor,
-      transform: [{ scale }]
-    };
-  });
-
-  const handlePressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const handlePressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
+      [colorMap[color].background.default, colorMap[color].background.pressed]
+    )
+  }));
 
   return (
     <Pressable
@@ -163,8 +131,8 @@ export const IconButtonSolid = ({
       accessibilityState={{ disabled }}
       testID={testID}
       onPress={onPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
       accessible={true}
       disabled={disabled}
       style={IOButtonStyles.dimensionsDefault}
@@ -173,7 +141,8 @@ export const IconButtonSolid = ({
         style={[
           IOIconButtonStyles.button,
           IOIconButtonStyles.buttonSizeLarge,
-          !disabled && pressedAnimationStyle,
+          !disabled && !reducedMotion && scaleAnimatedStyle,
+          !disabled && backgroundColorAnimationStyle,
           disabled
             ? {
                 backgroundColor: colorMap[color]?.background?.disabled