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

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,11 +155,12 @@ export const IconButton = ({
           IOIconButtonStyles.buttonSizeSmall,
           IOStyles.alignCenter,
           IOStyles.centerJustified,
-          !disabled && pressedAnimationStyle
+          !disabled && !reducedMotion && scaleAnimatedStyle
         ]}
       >
         {!disabled ? (
           <AnimatedIconClassComponent
+            allowFontScaling
             name={icon}
             size={iconSize}
             animatedProps={animatedColor}
@@ -204,6 +168,7 @@ export const IconButton = ({
           />
         ) : (
           <AnimatedIcon
+            allowFontScaling
             name={icon}
             size={iconSize}
             color={colorMap[color]?.icon?.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
@@ -184,6 +153,7 @@ export const IconButtonSolid = ({
         ]}
       >
         <AnimatedIcon
+          allowFontScaling
           name={icon}
           color={
             !disabled

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -59,7 +59,13 @@ exports[`Test Buttons Components - Experimental Enabled ButtonLink Snapshot 1`]
           "textAlignVertical": "center",
         },
         false,
+        {
+          "columnGap": 8,
+        },
         {},
+        {
+          "columnGap": 8,
+        },
         {
           "transform": [
             {
@@ -76,7 +82,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonLink Snapshot 1`]
       allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.25}
+      maxFontSizeMultiplier={1.5}
       numberOfLines={1}
       style={
         [
@@ -160,20 +166,25 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
         {
           "height": 48,
         },
+        {
+          "columnGap": 8,
+        },
         false,
         {
           "backgroundColor": "rgba(231,236,252,0)",
           "borderColor": "#0B3EE3",
         },
         {
-          "backgroundColor": undefined,
-          "borderColor": undefined,
           "transform": [
             {
               "scale": undefined,
             },
           ],
         },
+        {
+          "backgroundColor": undefined,
+          "borderColor": undefined,
+        },
       ]
     }
   >
@@ -183,7 +194,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
       allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.25}
+      maxFontSizeMultiplier={1.5}
       numberOfLines={1}
       style={
         [
@@ -276,17 +287,20 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
           "backgroundColor": "#0B3EE3",
         },
         {
-          "backgroundColor": undefined,
           "transform": [
             {
               "scale": undefined,
             },
           ],
         },
+        {
+          "backgroundColor": undefined,
+        },
       ]
     }
   >
     <View
+      entering={[Function]}
       style={
         [
           {
@@ -294,6 +308,9 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
             "flexDirection": "row",
             "justifyContent": "center",
           },
+          {
+            "columnGap": 8,
+          },
           false,
         ]
       }
@@ -304,7 +321,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
         allowFontScaling={true}
         ellipsizeMode="tail"
         importantForAccessibility="no-hide-descendants"
-        maxFontSizeMultiplier={1.25}
+        maxFontSizeMultiplier={1.5}
         numberOfLines={1}
         style={
           [
@@ -510,13 +527,15 @@ exports[`Test Buttons Components - Experimental Enabled IconButtonContained Snap
           "width": 48,
         },
         {
-          "backgroundColor": undefined,
           "transform": [
             {
               "scale": undefined,
             },
           ],
         },
+        {
+          "backgroundColor": undefined,
+        },
       ]
     }
   >
@@ -642,13 +661,15 @@ exports[`Test Buttons Components - Experimental Enabled IconButtonSolid Snapshot
           "width": 56,
         },
         {
-          "backgroundColor": undefined,
           "transform": [
             {
               "scale": undefined,
             },
           ],
         },
+        {
+          "backgroundColor": undefined,
+        },
         {
           "backgroundColor": "#0B3EE3",
         },
@@ -778,7 +799,13 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
           "textAlignVertical": "center",
         },
         false,
+        {
+          "columnGap": 8,
+        },
         {},
+        {
+          "columnGap": 8,
+        },
         {
           "transform": [
             {
@@ -792,10 +819,10 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
     <Text
       accessibilityElementsHidden={true}
       accessible={false}
-      allowFontScaling={false}
+      allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.25}
+      maxFontSizeMultiplier={1.5}
       numberOfLines={1}
       style={
         [
@@ -878,30 +905,35 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
         {
           "height": 40,
         },
+        {
+          "columnGap": 8,
+        },
         false,
         {
           "backgroundColor": "rgba(0,115,230,0)",
           "borderColor": "#0073E6",
         },
         {
-          "backgroundColor": undefined,
-          "borderColor": undefined,
           "transform": [
             {
               "scale": undefined,
             },
           ],
         },
+        {
+          "backgroundColor": undefined,
+          "borderColor": undefined,
+        },
       ]
     }
   >
     <Text
       accessibilityElementsHidden={true}
       accessible={false}
-      allowFontScaling={false}
+      allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.25}
+      maxFontSizeMultiplier={1.5}
       numberOfLines={1}
       style={
         [
@@ -993,17 +1025,20 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
           "backgroundColor": "#0073E6",
         },
         {
-          "backgroundColor": undefined,
           "transform": [
             {
               "scale": undefined,
             },
           ],
         },
+        {
+          "backgroundColor": undefined,
+        },
       ]
     }
   >
     <View
+      entering={[Function]}
       style={
         [
           {
@@ -1011,6 +1046,9 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
+          {
+            "columnGap": 8,
+          },
           false,
         ]
       }
@@ -1018,10 +1056,10 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
       <Text
         accessibilityElementsHidden={true}
         accessible={false}
-        allowFontScaling={false}
+        allowFontScaling={true}
         ellipsizeMode="tail"
         importantForAccessibility="no-hide-descendants"
-        maxFontSizeMultiplier={1.25}
+        maxFontSizeMultiplier={1.5}
         numberOfLines={1}
         style={
           [
@@ -1227,13 +1265,15 @@ exports[`Test Buttons Components IconButtonContained Snapshot 1`] = `
           "width": 48,
         },
         {
-          "backgroundColor": undefined,
           "transform": [
             {
               "scale": undefined,
             },
           ],
         },
+        {
+          "backgroundColor": undefined,
+        },
       ]
     }
   >
@@ -1359,13 +1399,15 @@ exports[`Test Buttons Components IconButtonSolid Snapshot 1`] = `
           "width": 56,
         },
         {
-          "backgroundColor": undefined,
           "transform": [
             {
               "scale": undefined,
             },
           ],
         },
+        {
+          "backgroundColor": undefined,
+        },
         {
           "backgroundColor": "#0073E6",
         },