[IOAPPX-426] Adjust SearchInput and TextInputBase spacing based on the fontScale value

example/src/pages/Badges.tsx

@@ -96,6 +96,17 @@ const renderBadge = () => (
         <Badge text={"Contrast"} variant="contrast" />
       </View>
     </View>
+    <VSpacer size={16} />
+    <ComponentViewerBox name={"Badge, font scaling not allowed"}>
+      <View style={IOStyles.row}>
+        <Badge
+          allowFontScaling={false}
+          outline
+          text={"Purple"}
+          variant="purple"
+        />
+      </View>
+    </ComponentViewerBox>
   </>
 );
 
@@ -139,5 +150,12 @@ const renderTag = () => (
         <Tag text={"Looooooooong string"} variant="error" />
       </View>
     </ComponentViewerBox>
+    <ComponentViewerBox name={"Tag, font scaling not allowed"}>
+      <Tag
+        text={"Entro il 30 mag"}
+        variant="warning"
+        allowFontScaling={false}
+      />
+    </ComponentViewerBox>
   </View>
 );

jestSetup.js

@@ -28,7 +28,7 @@ jest.mock("react-native-reanimated", () => {
   // The mock misses the `addWhitelistedUIProps` implementation
   // So we override it with a no-op
   // eslint-disable-next-line functional/immutable-data,@typescript-eslint/no-empty-function
-  Reanimated.default.addWhitelistedUIProps = () => {};
+  Reanimated.default.addWhitelistedUIProps = () => { };
 
   return Reanimated;
 });
@@ -46,5 +46,9 @@ global.AbortController = AbortController;
 global.__reanimatedWorkletInit = jest.fn();
 
 jest.mock("./src/utils/accessibility", () => ({
-  useBoldTextEnabled: () => false
+  useBoldTextEnabled: () => false,
+  useIOFontDynamicScale: () => ({
+    dynamicFontScale: 1,
+    spacingScaleMultiplier: 1
+  })
 }));

src/components/alert/Alert.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useState } from "react";
 import {
   GestureResponderEvent,
   NativeSyntheticEvent,
-  PixelRatio,
   Pressable,
   StyleSheet,
   TextLayoutEventData,
@@ -25,10 +24,11 @@ import {
   IOColorsStatusForeground
 } from "../../core/IOColors";
 import { IOAlertRadius } from "../../core/IOShapes";
-import { IOAlertSpacing } from "../../core/IOSpacing";
+import { IOAlertSpacing, IOSpacer } from "../../core/IOSpacing";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
-import { VSpacer } from "../spacer";
+import { HStack, VStack } from "../stack";
 import { ButtonText } from "../typography";
 import { H4 } from "../typography/H4";
 import { Label } from "../typography/Label";
@@ -38,16 +38,6 @@ const iconSize: IOIconSizeScale = 24;
 const [spacingDefault, spacingFullWidth] = IOAlertSpacing;
 
 const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    alignContent: "center"
-  },
-  spacingDefault: {
-    padding: spacingDefault,
-    borderRadius: IOAlertRadius,
-    borderCurve: "continuous"
-  },
   spacingFullWidth: {
     padding: spacingFullWidth
   }
@@ -123,6 +113,8 @@ export const Alert = React.forwardRef<View, AlertType>(
     viewRef
   ): JSX.Element => {
     const isPressed: SharedValue<number> = useSharedValue(0);
+    const { dynamicFontScale, spacingScaleMultiplier } =
+      useIOFontDynamicScale();
 
     const [isMultiline, setIsMultiline] = useState(false);
 
@@ -133,6 +125,12 @@ export const Alert = React.forwardRef<View, AlertType>(
       []
     );
 
+    const spacingDefaultVariant = {
+      padding: spacingDefault,
+      borderRadius: IOAlertRadius * dynamicFontScale * spacingScaleMultiplier,
+      borderCurve: "continuous"
+    };
+
     // Scaling transformation applied when the button is pressed
     const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
 
@@ -166,67 +164,59 @@ export const Alert = React.forwardRef<View, AlertType>(
     }, [isPressed]);
 
     const renderMainBlock = () => (
-      <>
-        <View
-          style={{
-            marginRight: IOVisualCostants.iconMargin,
-            alignSelf: "flex-start"
-          }}
-        >
-          <Icon
-            name={mapVariantStates[variant].icon}
-            size={iconSize}
-            color={mapVariantStates[variant].foreground}
-          />
-        </View>
+      <HStack
+        space={IOVisualCostants.iconMargin as IOSpacer}
+        allowScaleSpacing
+        style={{ alignItems: isMultiline ? "flex-start" : "center" }}
+      >
+        <Icon
+          allowFontScaling
+          name={mapVariantStates[variant].icon}
+          size={iconSize}
+          color={mapVariantStates[variant].foreground}
+        />
         {/* Sadly we don't have specific alignments style for text
       in React Native, like `text-box-trim` for CSS. So we
       have to put these magic numbers after manual adjustments.
       Tested on both Android and iOS. */}
         <View
           style={[
-            !title &&
-              isMultiline && { marginTop: -5 * PixelRatio.getFontScale() },
-            isMultiline && { marginBottom: -3 * PixelRatio.getFontScale() },
+            !title && isMultiline && { marginTop: -6 * dynamicFontScale },
+            isMultiline && { marginBottom: -4 * dynamicFontScale },
             { flex: 1 }
           ]}
         >
-          {title && (
-            <>
+          <VStack space={8} allowScaleSpacing>
+            {title && (
               <H4 color={mapVariantStates[variant].foreground}>{title}</H4>
-              <VSpacer size={8} />
-            </>
-          )}
-          <Label
-            color={mapVariantStates[variant].foreground}
-            weight={"Regular"}
-            accessibilityRole="text"
-            onTextLayout={onTextLayout}
-          >
-            {content}
-          </Label>
-          {action && (
-            <>
-              <VSpacer size={8} />
+            )}
+            <Label
+              color={mapVariantStates[variant].foreground}
+              weight={"Regular"}
+              accessibilityRole="text"
+              onTextLayout={onTextLayout}
+            >
+              {content}
+            </Label>
+            {action && (
               <ButtonText
                 color={mapVariantStates[variant].foreground}
                 numberOfLines={1}
                 ellipsizeMode="tail"
               >
                 {action}
               </ButtonText>
-            </>
-          )}
+            )}
+          </VStack>
         </View>
-      </>
+      </HStack>
     );
 
     const StaticComponent = () => (
       <View
         ref={viewRef}
         style={[
-          styles.container,
-          fullWidth ? styles.spacingFullWidth : styles.spacingDefault,
+          fullWidth ? styles.spacingFullWidth : spacingDefaultVariant,
           { backgroundColor: IOColors[mapVariantStates[variant].background] }
         ]}
         testID={testID}
@@ -253,8 +243,7 @@ export const Alert = React.forwardRef<View, AlertType>(
       >
         <Animated.View
           style={[
-            styles.container,
-            fullWidth ? styles.spacingFullWidth : styles.spacingDefault,
+            fullWidth ? styles.spacingFullWidth : spacingDefaultVariant,
             { backgroundColor: IOColors[mapVariantStates[variant].background] },
             // Disable pressed animation when component is full width
             !fullWidth && pressedAnimationStyle

src/components/badge/Badge.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 {
   IOBadgeHSpacing,
   IOBadgeRadius,
@@ -8,12 +8,14 @@ import {
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { IOText } from "../typography";
 
 export type Badge = WithTestID<{
   outline?: boolean;
   text: string;
+  allowFontScaling?: boolean;
   variant:
     | "default"
     | "info"
@@ -42,12 +44,14 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
+    borderCurve: "continuous",
     ...Platform.select({
       android: {
         textAlignVertical: "center"
       }
-    }),
-    borderCurve: "continuous",
+    })
+  },
+  badgeStaticStyle: {
     borderRadius: IOBadgeRadius,
     paddingHorizontal: IOBadgeHSpacing,
     paddingVertical: IOBadgeVSpacing
@@ -57,9 +61,16 @@ const styles = StyleSheet.create({
 /**
  * Official badge component
  */
-export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
+export const Badge = ({
+  text,
+  outline = false,
+  allowFontScaling = true,
+  variant,
+  testID
+}: Badge) => {
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
+  const { dynamicFontScale } = useIOFontDynamicScale();
 
   const mapVariants: Record<
     NonNullable<Badge["variant"]>,
@@ -147,12 +158,19 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
     outline ? mapOutlineVariants : mapVariants
   )[variant];
 
+  const dynamicStyle: ViewStyle = {
+    borderRadius: IOBadgeRadius * dynamicFontScale,
+    paddingHorizontal: IOBadgeHSpacing * dynamicFontScale,
+    paddingVertical: IOBadgeVSpacing * dynamicFontScale
+  };
+
   return (
     <View
       accessible={true}
       testID={testID}
       style={[
         styles.badge,
+        allowFontScaling ? dynamicStyle : styles.badgeStaticStyle,
         outline
           ? {
               borderWidth: 1,
@@ -164,6 +182,7 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
       ]}
     >
       <IOText
+        allowFontScaling={allowFontScaling}
         font={isExperimental ? "Titillio" : "TitilliumSansPro"}
         weight={"Semibold"}
         size={12}

src/components/badge/__test__/__snapshots__/badge.test.tsx.snap

@@ -8,9 +8,11 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
       {
         "alignItems": "center",
         "borderCurve": "continuous",
-        "borderRadius": 24,
         "flexDirection": "row",
         "justifyContent": "center",
+      },
+      {
+        "borderRadius": 24,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
@@ -58,9 +60,11 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
       {
         "alignItems": "center",
         "borderCurve": "continuous",
-        "borderRadius": 24,
         "flexDirection": "row",
         "justifyContent": "center",
+      },
+      {
+        "borderRadius": 24,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
@@ -71,7 +75,7 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
   }
 >
   <Text
-    allowFontScaling={false}
+    allowFontScaling={true}
     ellipsizeMode="tail"
     maxFontSizeMultiplier={1.25}
     numberOfLines={1}