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

package/src/components/radio/RadioButtonLabel.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { useState } from "react";
+import { ComponentProps, useState } from "react";
 import { Pressable, View } from "react-native";
-import { useIOTheme } from "../../core";
+import { IOSelectionTickVisualParams, useIOTheme } from "../../core";
 import { IOStyles } from "../../core/IOStyles";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
-import { HSpacer } from "../spacer/Spacer";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { H6 } from "../typography/H6";
 import { AnimatedRadio } from "./AnimatedRadio";
 
@@ -17,9 +17,9 @@ type Props = {
 const DISABLED_OPACITY = 0.5;
 
 type RadioButtonLabelProps = Props &
-  Pick<React.ComponentProps<typeof AnimatedRadio>, "disabled" | "checked"> &
+  Pick<ComponentProps<typeof AnimatedRadio>, "disabled" | "checked"> &
   Pick<
-    React.ComponentProps<typeof Pressable>,
+    ComponentProps<typeof Pressable>,
     "onPress" | "accessibilityLabel" | "accessibilityHint"
   >;
 
@@ -38,6 +38,7 @@ export const RadioButtonLabel = ({
   accessibilityLabel,
   accessibilityHint
 }: RadioButtonLabelProps) => {
+  const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
   const theme = useIOTheme();
 
   const [toggleValue, setToggleValue] = useState(checked ?? false);
@@ -70,7 +71,12 @@ export const RadioButtonLabel = ({
       <View
         style={[
           IOStyles.row,
-          { alignItems: "flex-start", flexShrink: 1, width: "100%" }
+          {
+            alignItems: "flex-start",
+            flexShrink: 1,
+            width: "100%",
+            columnGap: 8 * dynamicFontScale * spacingScaleMultiplier
+          }
         ]}
       >
         <View
@@ -78,9 +84,11 @@ export const RadioButtonLabel = ({
           accessibilityElementsHidden
           importantForAccessibility="no-hide-descendants"
         >
-          <AnimatedRadio checked={checked ?? toggleValue} />
+          <AnimatedRadio
+            size={IOSelectionTickVisualParams.size * dynamicFontScale}
+            checked={checked ?? toggleValue}
+          />
         </View>
-        <HSpacer size={8} />
         <H6 style={{ flexShrink: 1 }} color={theme["textBody-default"]}>
           {label}
         </H6>

package/src/components/searchInput/SearchInput.tsx

@@ -21,7 +21,7 @@ import {
 } from "react-native";
 import Animated, {
   Easing,
-  Extrapolate,
+  Extrapolation,
   interpolate,
   interpolateColor,
   useAnimatedStyle,
@@ -173,7 +173,7 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
               showCancelButton,
               [0, 1],
               [cancelButtonWidth + IOVisualCostants.appMarginDefault, 0],
-              Extrapolate.CLAMP
+              Extrapolation.CLAMP
             )
           }
         ],
@@ -235,7 +235,12 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
           pointerEvents={pressable ? "none" : "auto"}
         >
           <View style={styles.iconContainer}>
-            <Icon name="search" size={iconSize} color={iconColor} />
+            <Icon
+              allowFontScaling
+              name="search"
+              size={iconSize}
+              color={iconColor}
+            />
           </View>
           <AnimatedTextInput
             testID={testID}
@@ -328,7 +333,7 @@ const styles = StyleSheet.create({
       inputFontSizePlaceholder,
       "Titillio",
       undefined,
-      "Regular"
+      "Medium"
     )
   },
   placeholderLegacy: {
@@ -336,7 +341,7 @@ const styles = StyleSheet.create({
       inputFontSizePlaceholder,
       "TitilliumSansPro",
       undefined,
-      "Regular"
+      "Semibold"
     )
   },
   cancelButton: {

package/src/components/spacer/Spacer.tsx

@@ -1,14 +1,17 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
 import { hexToRgba, IOColors, IOSpacer } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 
 type BaseSpacerProps = {
   orientation: "vertical" | "horizontal";
   size: IOSpacer;
+  allowScaleSpacing?: boolean;
 };
 
 type SpacerProps = {
   size?: IOSpacer;
+  allowScaleSpacing?: boolean;
 };
 
 const DEFAULT_SIZE: IOSpacer = 16;
@@ -22,20 +25,32 @@ Native `Spacer` component
 @param  {string} orientation
 @param {IOSpacer} size
  */
-const Spacer = ({ orientation, size }: BaseSpacerProps) => {
-  const style = React.useMemo(
+const Spacer = ({ allowScaleSpacing, orientation, size }: BaseSpacerProps) => {
+  const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
+
+  const style = useMemo(
     () => ({
       ...(orientation === "vertical" && {
-        height: size
+        height: allowScaleSpacing
+          ? size * dynamicFontScale * spacingScaleMultiplier
+          : size
       }),
       ...(orientation === "horizontal" && {
-        width: size
+        width: allowScaleSpacing
+          ? size * dynamicFontScale * spacingScaleMultiplier
+          : size
       }),
       ...((debugMode as boolean) && {
         backgroundColor: debugBg
       })
     }),
-    [orientation, size]
+    [
+      allowScaleSpacing,
+      dynamicFontScale,
+      orientation,
+      size,
+      spacingScaleMultiplier
+    ]
   );
 
   return <View style={style} />;

package/src/components/stack/Stack.tsx

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren } from "react";
 import { View, ViewProps, ViewStyle } from "react-native";
 import { IOSpacer } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 
 type AllowedStyleProps = Pick<
   ViewStyle,
@@ -15,6 +16,7 @@ type A11YRelatedProps = Pick<
 type Stack = PropsWithChildren<{
   space?: IOSpacer;
   style?: AllowedStyleProps;
+  allowScaleSpacing?: boolean;
 }> &
   A11YRelatedProps;
 
@@ -22,30 +24,39 @@ type BaseStack = Stack & {
   orientation: "vertical" | "horizontal";
 };
 
+const DEFAULT_SPACING_VALUE: IOSpacer = 16;
+
 /**
 Horizontal Stack component
 @param {IOSpacer} space
  */
 
 const Stack = ({
-  space,
+  space = DEFAULT_SPACING_VALUE,
   style,
   orientation = "vertical",
+  allowScaleSpacing,
   children,
   ...props
-}: BaseStack) => (
-  <View
-    {...props}
-    style={{
-      display: "flex",
-      flexDirection: orientation === "horizontal" ? "row" : "column",
-      gap: space,
-      ...style
-    }}
-  >
-    {children}
-  </View>
-);
+}: BaseStack) => {
+  const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
+
+  return (
+    <View
+      {...props}
+      style={{
+        display: "flex",
+        flexDirection: orientation === "horizontal" ? "row" : "column",
+        gap: allowScaleSpacing
+          ? space * dynamicFontScale * spacingScaleMultiplier
+          : space,
+        ...style
+      }}
+    >
+      {children}
+    </View>
+  );
+};
 
 export const HStack = ({ children, ...props }: Stack) => (
   <Stack orientation="horizontal" {...props}>

package/src/components/tabs/TabItem.tsx

@@ -1,25 +1,23 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
 import Animated, {
-  Extrapolate,
-  interpolate,
+  SharedValue,
   interpolateColor,
   useAnimatedStyle,
   useDerivedValue,
+  useReducedMotion,
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
 import {
   IOColors,
-  IOScaleValues,
   IOSpringValues,
   hexToRgba,
   useIOExperimentalDesign
 } from "../../core";
-import { useSpringPressProgressValue } from "../../utils/hooks/useSpringPressProgressValue";
+import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
-import { HSpacer } from "../spacer";
 import { BodySmall } from "../typography";
 
 type ColorMode = "light" | "dark";
@@ -148,11 +146,9 @@ const TabItem = ({
   icon,
   iconSelected
 }: TabItem) => {
-  const {
-    progress: progressPressed,
-    onPressIn,
-    onPressOut
-  } = useSpringPressProgressValue(IOSpringValues.selection);
+  const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
+    useScaleAnimation();
+  const reducedMotion = useReducedMotion();
 
   const { isExperimental } = useIOExperimentalDesign();
   const colors = useMemo(
@@ -180,12 +176,12 @@ const TabItem = ({
     0.1
   );
 
-  const isSelected: Animated.SharedValue<number> = useSharedValue(0);
+  const isSelected: SharedValue<number> = useSharedValue(0);
   const progressSelected = useDerivedValue(() =>
     withSpring(isSelected.value, IOSpringValues.selection)
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     // eslint-disable-next-line functional/immutable-data
     isSelected.value = selected ? 1 : 0;
   }, [isSelected, selected]);
@@ -194,7 +190,7 @@ const TabItem = ({
   const animatedStyle = useAnimatedStyle(() => {
     // Link color states to the pressed states
     const pressedBackgroundColor = interpolateColor(
-      progressPressed.value,
+      progress.value,
       [0, 1],
       [colors.background.default, opaquePressedBackgroundColor]
     );
@@ -211,22 +207,13 @@ const TabItem = ({
       [colors.border.default, colors.border.selected]
     );
 
-    // Scale down button slightly when pressed
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, IOScaleValues?.basicButton?.pressedState],
-      Extrapolate.CLAMP
-    );
-
     return {
       backgroundColor: selected
         ? selectedBackgroundColor
         : pressedBackgroundColor,
-      borderColor: selected ? selectedBorderColor : borderColor,
-      transform: [{ scale }]
+      borderColor: selected ? selectedBorderColor : borderColor
     };
-  }, [progressPressed, progressSelected, selected]);
+  }, [progress, progressSelected, selected]);
 
   const activeIcon = selected ? iconSelected ?? icon : icon;
 
@@ -246,16 +233,15 @@ const TabItem = ({
       <Animated.View
         style={[
           styles.container,
+          { columnGap: 4 },
+          !reducedMotion && scaleAnimatedStyle,
           animatedStyle,
           fullWidth && styles.fullWidth,
           disabled && styles.disabled
         ]}
       >
         {activeIcon && (
-          <>
-            <Icon name={activeIcon} color={foregroundColor} size={16} />
-            <HSpacer size={4} />
-          </>
+          <Icon name={activeIcon} color={foregroundColor} size={16} />
         )}
         <BodySmall weight="Semibold" color={foregroundColor}>
           {label}

package/src/components/tag/Tag.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Platform, StyleSheet, View } from "react-native";
+import { Platform, StyleSheet, View, ViewStyle } from "react-native";
 import {
   IOColors,
   IOTagRadius,
@@ -13,6 +13,7 @@ import {
   IOTagHSpacing,
   IOTagVSpacing
 } from "../../core/IOSpacing";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { IOText } from "../typography";
@@ -62,7 +63,9 @@ export type Tag = TextProps & { forceLightMode?: boolean } & WithTestID<
         variant: "custom";
         icon: VariantProps;
       }
-  >;
+  > & {
+    allowFontScaling?: boolean;
+  };
 
 const IOTagIconMargin: IOSpacingScale = 6;
 const IOTagIconSize: IOIconSizeScale = 16;
@@ -79,16 +82,17 @@ const styles = StyleSheet.create({
       }
     }),
     borderWidth: 1,
+    borderCurve: "continuous"
+  },
+  tagStatic: {
     borderRadius: IOTagRadius,
     borderCurve: "continuous",
     paddingHorizontal: IOTagHSpacing,
-    paddingVertical: IOTagVSpacing
+    paddingVertical: IOTagVSpacing,
+    columnGap: IOTagIconMargin
   },
   iconWrapper: {
     flexShrink: 1
-  },
-  spacer: {
-    width: IOTagIconMargin
   }
 });
 
@@ -151,9 +155,11 @@ export const Tag = ({
   testID,
   icon,
   iconAccessibilityLabel,
+  allowFontScaling = true,
   forceLightMode = false
 }: Tag) => {
   const theme = useIOTheme();
+  const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
   const { isExperimental } = useIOExperimentalDesign();
 
   const variantProps = getVariantProps(variant, icon);
@@ -166,14 +172,26 @@ export const Tag = ({
     ? IOColors[IOThemeLight["appBackground-primary"]]
     : IOColors[theme["appBackground-primary"]];
 
+  const tagDynamic: ViewStyle = {
+    paddingHorizontal: IOTagHSpacing * dynamicFontScale,
+    paddingVertical: IOTagVSpacing * dynamicFontScale,
+    columnGap: IOTagIconMargin * dynamicFontScale * spacingScaleMultiplier,
+    borderRadius: IOTagRadius * dynamicFontScale
+  };
+
   return (
     <View
       testID={testID}
-      style={[styles.tag, { borderColor, backgroundColor }]}
+      style={[
+        styles.tag,
+        allowFontScaling ? tagDynamic : styles.tagStatic,
+        { borderColor, backgroundColor }
+      ]}
     >
       {variantProps && (
         <View style={styles.iconWrapper}>
           <Icon
+            allowFontScaling={allowFontScaling}
             name={variantProps.name}
             color={
               forceLightMode
@@ -186,9 +204,9 @@ export const Tag = ({
           />
         </View>
       )}
-      {variantProps && text && <View style={styles.spacer} />}
       {text && (
         <IOText
+          allowFontScaling={allowFontScaling}
           font={isExperimental ? "Titillio" : "TitilliumSansPro"}
           weight={"Semibold"}
           size={12}

package/src/components/textInput/TextInput.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
+import { ComponentProps } from "react";
 import { TextInputBase } from "./TextInputBase";
 
 type TextInputProps = Omit<
-  React.ComponentProps<typeof TextInputBase>,
+  ComponentProps<typeof TextInputBase>,
   | "rightElement"
   | "status"
   | "bottomMessageColor"

package/src/components/textInput/TextInputBase.tsx

@@ -26,6 +26,7 @@ import {
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { IOFontSize, makeFontStyleObject } from "../../utils/fonts";
 import { RNTextInputProps, getInputPropsByType } from "../../utils/textInput";
 import { InputType, WithTestID } from "../../utils/types";
@@ -78,8 +79,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     height: inputHeight,
-    paddingVertical: inputPaddingVertical,
-    paddingHorizontal: inputPaddingHorizontal
+    paddingVertical: inputPaddingVertical
   },
   textInputOuterBorder: {
     ...StyleSheet.absoluteFillObject,
@@ -107,7 +107,7 @@ const styles = StyleSheet.create({
     ...(Platform.OS === "android" && { marginLeft: -4 })
   },
   textInputStyleFont: {
-    ...makeFontStyleObject(inputLabelFontSize, "Titillio", undefined, "Regular")
+    ...makeFontStyleObject(inputLabelFontSize, "Titillio", undefined, "Medium")
   },
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
   textInputStyleLegacyFont: {
@@ -120,20 +120,23 @@ const styles = StyleSheet.create({
   },
   textInputLabelWrapper: {
     position: "absolute",
-    paddingHorizontal: inputPaddingHorizontal,
     zIndex: 10,
     bottom: 0,
     top: 0,
     justifyContent: "center"
   },
   textInputLabel: {
+    color: inputLabelColor,
+    ...makeFontStyleObject(inputLabelFontSize, "Titillio", undefined, "Regular")
+  },
+  textInputLabelLegacyFont: {
+    color: inputLabelColor,
     ...makeFontStyleObject(
       inputLabelFontSize,
       "TitilliumSansPro",
       undefined,
       "Regular"
-    ),
-    color: inputLabelColor
+    )
   }
 });
 
@@ -227,6 +230,9 @@ export const TextInputBase = ({
     disabled ? "disabled" : "initial"
   );
   const focusedState = useSharedValue<number>(0);
+
+  const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
+
   const theme = useIOTheme();
 
   /* Get the label width to enable the correct translation */
@@ -361,7 +367,11 @@ export const TextInputBase = ({
         onPress={onTextInputPress}
         style={[
           inputStatus === "disabled" ? { opacity: inputDisabledOpacity } : {},
-          styles.textInput
+          styles.textInput,
+          {
+            paddingHorizontal:
+              inputPaddingHorizontal * dynamicFontScale * spacingScaleMultiplier
+          }
         ]}
         accessible={false}
         accessibilityRole={"none"}
@@ -384,8 +394,13 @@ export const TextInputBase = ({
 
         {icon && (
           <>
-            <Icon name={icon} color={iconColor} size={iconSize} />
-            <HSpacer size={iconMargin} />
+            <Icon
+              allowFontScaling
+              name={icon}
+              color={iconColor}
+              size={iconSize}
+            />
+            <HSpacer allowScaleSpacing size={iconMargin} />
           </>
         )}
         <TextInput
@@ -428,14 +443,32 @@ export const TextInputBase = ({
           pointerEvents={"none"}
           style={[
             styles.textInputLabelWrapper,
-            icon ? { left: iconSize + iconMargin } : {}
+            {
+              paddingHorizontal:
+                inputPaddingHorizontal *
+                dynamicFontScale *
+                spacingScaleMultiplier
+            },
+            icon
+              ? {
+                  left:
+                    (iconSize + iconMargin) *
+                    dynamicFontScale *
+                    spacingScaleMultiplier
+                }
+              : {}
           ]}
         >
           <Animated.Text
             onLayout={getLabelWidth}
             numberOfLines={1}
             accessible={false}
-            style={[styles.textInputLabel, animatedLabelStyle]}
+            style={[
+              isExperimental
+                ? styles.textInputLabel
+                : styles.textInputLabelLegacyFont,
+              animatedLabelStyle
+            ]}
           >
             {placeholder}
           </Animated.Text>

package/src/components/typography/IOText.tsx

@@ -6,10 +6,11 @@ import {
   TextStyle,
   View
 } from "react-native";
-import { IOColors, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOColors, useIOTheme } from "../../core";
 import { useBoldTextEnabled } from "../../utils/accessibility";
 import {
   IOFontFamily,
+  IOFontSizeMultiplier,
   IOFontWeight,
   makeFontStyleObject
 } from "../../utils/fonts";
@@ -94,7 +95,7 @@ export const IOText = forwardRef<View, IOTextProps>(
       textStyle,
       style,
       children,
-      allowFontScaling,
+      allowFontScaling = true,
       maxFontSizeMultiplier,
       ...props
     },
@@ -103,8 +104,6 @@ export const IOText = forwardRef<View, IOTextProps>(
     const theme = useIOTheme();
     const boldEnabled = useBoldTextEnabled();
 
-    const { isExperimental } = useIOExperimentalDesign();
-
     const computedStyleObj = useMemo(
       () =>
         calculateTextStyle(
@@ -142,8 +141,8 @@ export const IOText = forwardRef<View, IOTextProps>(
 
     /* Accessible typography based on the `fontScale` parameter */
     const accessibleFontSizeProps: ComponentProps<typeof Text> = {
-      allowFontScaling: allowFontScaling ?? isExperimental,
-      maxFontSizeMultiplier: maxFontSizeMultiplier ?? 1.25
+      allowFontScaling,
+      maxFontSizeMultiplier: maxFontSizeMultiplier ?? IOFontSizeMultiplier
     };
 
     return (