[IOAPPX-419] Adjust the size of Icon, Pictogram and some components based on the value of fontScale

example/src/pages/Badges.tsx

@@ -142,5 +142,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

@@ -3,9 +3,7 @@ import {
   ColorValue,
   GestureResponderEvent,
   NativeSyntheticEvent,
-  PixelRatio,
   Pressable,
-  StyleSheet,
   TextLayoutEventData,
   View
 } from "react-native";
@@ -22,33 +20,18 @@ import { IOVisualCostants, useIOThemeContext } from "../../core";
 import { IOScaleValues, IOSpringValues } from "../../core/IOAnimations";
 import { IOColors, hexToRgba } 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 { Body, ButtonText } from "../typography";
 import { H4 } from "../typography/H4";
 
 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
-  }
-});
-
 type AlertProps = WithTestID<{
   variant: "error" | "warning" | "info" | "success";
   title?: string;
@@ -148,6 +131,8 @@ export const Alert = React.forwardRef<View, AlertType>(
   ): JSX.Element => {
     const { themeType } = useIOThemeContext();
     const isPressed: SharedValue<number> = useSharedValue(0);
+    const { dynamicFontScale, spacingScaleMultiplier } =
+      useIOFontDynamicScale();
 
     const [isMultiline, setIsMultiline] = useState(false);
 
@@ -158,6 +143,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;
 
@@ -196,67 +187,59 @@ export const Alert = React.forwardRef<View, AlertType>(
         : mapVariantStatesDarkMode;
 
     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} />
-            </>
-          )}
-          <Body
-            color={mapVariantStates[variant].foreground}
-            weight={"Regular"}
-            accessibilityRole="text"
-            onTextLayout={onTextLayout}
-          >
-            {content}
-          </Body>
-          {action && (
-            <>
-              <VSpacer size={8} />
+            )}
+            <Body
+              color={mapVariantStates[variant].foreground}
+              weight={"Regular"}
+              accessibilityRole="text"
+              onTextLayout={onTextLayout}
+            >
+              {content}
+            </Body>
+            {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 ? { padding: spacingFullWidth } : spacingDefaultVariant,
           { backgroundColor: mapVariantStates[variant].background }
         ]}
         testID={testID}
@@ -283,8 +266,7 @@ export const Alert = React.forwardRef<View, AlertType>(
       >
         <Animated.View
           style={[
-            styles.container,
-            fullWidth ? styles.spacingFullWidth : styles.spacingDefault,
+            fullWidth ? { padding: spacingFullWidth } : spacingDefaultVariant,
             { backgroundColor: mapVariantStates[variant].background },
             // Disable pressed animation when component is full width
             !fullWidth && pressedAnimationStyle

src/components/badge/Badge.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { ColorValue, Platform, StyleSheet, View } from "react-native";
+import {
+  ColorValue,
+  Platform,
+  StyleSheet,
+  View,
+  ViewStyle
+} from "react-native";
 import {
   hexToRgba,
   IOBadgeHSpacing,
@@ -10,12 +16,14 @@ import {
   useIOTheme,
   useIOThemeContext
 } 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"
@@ -44,12 +52,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
@@ -59,9 +69,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 { themeType } = useIOThemeContext();
 
   const bgOpacityDarkMode = 0.2;
@@ -237,12 +254,19 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
 
   const { background, foreground } = variantMap[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,
@@ -254,6 +278,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}

src/components/banner/Banner.tsx

@@ -233,8 +233,6 @@ export const Banner = ({
       >
         {title && (
           <>
-            {/* Once we get 'gap' property, we can get rid of
-          these <VSpacer> components */}
             <H6 color={colorTitle}>{title}</H6>
             <VSpacer size={4} />
           </>
@@ -249,7 +247,7 @@ export const Banner = ({
         )}
         {action && (
           /* Disable pointer events to avoid
-                      pressed state on the button */
+             pressed state on the button */
           <View
             pointerEvents="none"
             accessibilityElementsHidden
@@ -258,7 +256,7 @@ export const Banner = ({
             <VSpacer size={4} />
             <IOText
               font={isExperimental ? "Titillio" : "TitilliumSansPro"}
-              weight={isExperimental ? "Regular" : "Bold"}
+              weight={"Semibold"}
               color={colorMainButton}
               size={buttonTextFontSize}
               numberOfLines={1}

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

@@ -124,7 +124,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
                 "fontFamily": "Titillio",
                 "fontSize": 16,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
                 "lineHeight": undefined,
               },
             ]
@@ -397,7 +397,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
                 "fontFamily": "Titillium Sans Pro",
                 "fontSize": 16,
                 "fontStyle": "normal",
-                "fontWeight": "700",
+                "fontWeight": "600",
                 "lineHeight": undefined,
               },
             ]