[IOAPPX-426] Adjust SearchInput and TextInputBase spacing based o…

…n the `fontScale` value (#356)

> [!caution]
> This PR depends on:
> * #348

## Short description
This PR enables dynamic size on the `SearchInput` and `TextInputBase`
components

## List of changes proposed in this pull request
- Add `allowFontScaling` prop to the icons contained in the both
components
- Add `allowScaleSpacing` prop to `VSpacer` and `HSpacer` components

## How to test
Go to the **Text Inputs** and **Search Input** screens in the example
app

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,15 +333,15 @@ const styles = StyleSheet.create({
       inputFontSizePlaceholder,
       "Titillio",
       undefined,
-      "Regular"
+      "Medium"
     )
   },
   placeholderLegacy: {
     ...makeFontStyleObject(
       inputFontSizePlaceholder,
       "TitilliumSansPro",
       undefined,
-      "Regular"
+      "Semibold"
     )
   },
   cancelButton: {

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} />;

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"

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>