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

package/lib/typescript/core/IOStyles.d.ts

@@ -28,7 +28,7 @@ export declare const IOStyles: {
         alignItems: "center";
     };
     horizontalContentPadding: {
-        paddingHorizontal: 16 | 24 | 32 | 48 | 8;
+        paddingHorizontal: 16 | 8 | 24 | 32 | 48;
     };
     row: {
         flexDirection: "row";
@@ -46,7 +46,7 @@ export declare const IOStyles: {
     footer: {
         backgroundColor: string;
         paddingBottom: number;
-        paddingHorizontal: 16 | 24 | 32 | 48 | 8;
+        paddingHorizontal: 16 | 8 | 24 | 32 | 48;
         paddingTop: number;
         shadowColor: string;
         shadowOffset: {
@@ -183,8 +183,8 @@ interface IOListItemVisualParams {
 export declare const IOListItemVisualParams: IOListItemVisualParams;
 export declare const IOListItemStyles: {
     listItem: {
-        paddingVertical: 16 | 4 | 6 | 12 | 20 | 24 | 32 | 48 | 96 | 8 | 28 | 40 | 56 | 64 | 72 | 80;
-        paddingHorizontal: 16 | 24 | 32 | 48 | 8;
+        paddingVertical: 16 | 4 | 6 | 20 | 8 | 24 | 12 | 28 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96;
+        paddingHorizontal: 16 | 8 | 24 | 32 | 48;
         marginHorizontal: number;
     };
     listItemInner: {
@@ -197,7 +197,7 @@ export declare const IOModuleStyles: {
     button: {
         borderWidth: number;
         borderColor: string;
-        borderRadius: 16 | 6 | 24 | 8;
+        borderRadius: 16 | 6 | 8 | 24;
         borderCurve: string;
         flexDirection: "row";
         justifyContent: "space-between";
@@ -243,8 +243,8 @@ interface IOSelectionListItemVisualParams {
 export declare const IOSelectionListItemVisualParams: IOSelectionListItemVisualParams;
 export declare const IOSelectionListItemStyles: {
     listItem: {
-        paddingVertical: 16 | 4 | 6 | 12 | 20 | 24 | 32 | 48 | 96 | 8 | 28 | 40 | 56 | 64 | 72 | 80;
-        paddingHorizontal: 16 | 24 | 32 | 48 | 8;
+        paddingVertical: 16 | 4 | 6 | 20 | 8 | 24 | 12 | 28 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96;
+        paddingHorizontal: 16 | 8 | 24 | 32 | 48;
         marginHorizontal: number;
     };
     listItemInner: {

package/lib/typescript/utils/accessibility.d.ts

@@ -3,4 +3,14 @@
  * when bold text is enabled and false otherwise.
  */
 export declare const useBoldTextEnabled: () => boolean;
+/**
+ * Returns a font size multiplier based on the font scale of the device,
+ * but limited to the `IOFontSizeMultiplier` value.
+ * @returns number
+ */
+export declare const useIOFontDynamicScale: () => {
+    dynamicFontScale: number;
+    spacingScaleMultiplier: number;
+    hugeFontEnabled: boolean;
+};
 //# sourceMappingURL=accessibility.d.ts.map

package/lib/typescript/utils/accessibility.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../../src/utils/accessibility.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,kBAAkB,eA0B9B,CAAC"}
+{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../../src/utils/accessibility.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,eAAO,MAAM,kBAAkB,eA0B9B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,QAAO;IACvC,gBAAgB,EAAE,MAAM,CAAC;IACzB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAmB1B,CAAC"}

package/lib/typescript/utils/fonts.d.ts

@@ -13,7 +13,7 @@ declare const fonts: {
     readonly DMMono: string;
 };
 export type IOFontFamily = keyof typeof fonts;
-declare const allFontSizes: (16 | 12 | 20 | 32 | 14 | 28 | 22 | 17 | 26 | 31 | 35)[];
+declare const allFontSizes: (16 | 20 | 12 | 28 | 32 | 14 | 22 | 26 | 17 | 31 | 35)[];
 export type IOFontSize = (typeof allFontSizes)[number];
 declare const weights: readonly ["Thin", "Light", "Regular", "Medium", "Semibold", "Bold", "Black"];
 export type IOFontWeight = (typeof weights)[number];
@@ -39,6 +39,7 @@ type FontStyleObject = {
  * @param isItalic
  */
 export declare const makeFontFamilyName: (font: IOFontFamily, weight?: IOFontWeight, fontStyle?: TextStyle["fontStyle"]) => string;
+export declare const IOFontSizeMultiplier = 1.5;
 /**
  * Return a {@link FontStyleObject} with the fields filled based on the platform (iOS or Android).
  * @param size

package/lib/typescript/utils/fonts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/utils/fonts.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAC;AAEnD;;GAEG;AACH,QAAA,MAAM,KAAK;;;;CAmBD,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC;AAO9C,QAAA,MAAM,YAAY,0DAAmD,CAAC;AACtE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAMvD,QAAA,MAAM,OAAO,8EAQH,CAAC;AACX,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,QAAA,MAAM,YAAY,4DAA6D,CAAC;AAChF,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhE;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,mBAAmB,CAQjE,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,UAAU,GAAG,MAAM,CAAC;IAG9B,UAAU,EAAE,MAAM,GAAG,YAAY,CAAC;IAClC,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAeF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,SACvB,YAAY,WACV,YAAY,cACT,SAAS,CAAC,WAAW,CAAC,KAChC,MAQC,CAAC;AASL;;;;;;GAMG;AAEH,eAAO,MAAM,mBAAmB,uGAGlB,SAAS,CAAC,YAAY,CAAC,WAC3B,YAAY,cACT,SAAS,CAAC,WAAW,CAAC,gBACpB,OAAO,KACnB,eAkCF,CAAC"}
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/utils/fonts.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAC;AAEnD;;GAEG;AACH,QAAA,MAAM,KAAK;;;;CAmBD,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC;AAO9C,QAAA,MAAM,YAAY,0DAAmD,CAAC;AACtE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAMvD,QAAA,MAAM,OAAO,8EAQH,CAAC;AACX,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,QAAA,MAAM,YAAY,4DAA6D,CAAC;AAChF,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhE;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,mBAAmB,CAQjE,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,UAAU,GAAG,MAAM,CAAC;IAG9B,UAAU,EAAE,MAAM,GAAG,YAAY,CAAC;IAClC,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAeF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,SACvB,YAAY,WACV,YAAY,cACT,SAAS,CAAC,WAAW,CAAC,KAChC,MAQC,CAAC;AAQL,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC;;;;;;GAMG;AAEH,eAAO,MAAM,mBAAmB,uGAGlB,SAAS,CAAC,YAAY,CAAC,WAC3B,YAAY,cACT,SAAS,CAAC,WAAW,CAAC,gBACpB,OAAO,KACnB,eAkCF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap

@@ -86,7 +86,7 @@ exports[`Test Advice Components - Experimental Enabled Advice Snapshot 1`] = `
   <Text
     allowFontScaling={true}
     dynamicTypeRamp="body"
-    maxFontSizeMultiplier={1.25}
+    maxFontSizeMultiplier={1.5}
     style={
       [
         {},
@@ -190,9 +190,9 @@ exports[`Test Advice Components Advice Snapshot 1`] = `
     }
   />
   <Text
-    allowFontScaling={false}
+    allowFontScaling={true}
     dynamicTypeRamp="body"
-    maxFontSizeMultiplier={1.25}
+    maxFontSizeMultiplier={1.5}
     style={
       [
         {},

package/src/components/alert/Alert.tsx

@@ -3,9 +3,7 @@ import {
   ColorValue,
   GestureResponderEvent,
   NativeSyntheticEvent,
-  PixelRatio,
   Pressable,
-  StyleSheet,
   TextLayoutEventData,
   View
 } from "react-native";
@@ -13,33 +11,18 @@ import Animated from "react-native-reanimated";
 import { IOVisualCostants, useIOThemeContext } from "../../core";
 import { IOColors, hexToRgba } from "../../core/IOColors";
 import { IOAlertRadius } from "../../core/IOShapes";
-import { IOAlertSpacing } from "../../core/IOSpacing";
+import { IOAlertSpacing, IOSpacer } from "../../core/IOSpacing";
 import { useScaleAnimation } from "../../hooks";
+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 ICON_SIZE: 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
-  }
-});
+const [padding, paddingFullWidth] = IOAlertSpacing;
 
 type AlertProps = WithTestID<{
   variant: "error" | "warning" | "info" | "success";
@@ -140,6 +123,8 @@ export const Alert = forwardRef<View, AlertType>(
   ): JSX.Element => {
     const { onPressIn, onPressOut, scaleAnimatedStyle } =
       useScaleAnimation("medium");
+    const { dynamicFontScale, spacingScaleMultiplier } =
+      useIOFontDynamicScale();
     const { themeType } = useIOThemeContext();
 
     const [isMultiline, setIsMultiline] = useState(false);
@@ -151,54 +136,53 @@ export const Alert = forwardRef<View, AlertType>(
       []
     );
 
+    const paddingDefaultVariant = {
+      padding,
+      borderRadius: IOAlertRadius * dynamicFontScale * spacingScaleMultiplier,
+      borderCurve: "continuous"
+    };
+
     const mapVariantStates =
       themeType === "light"
         ? mapVariantStatesLightMode
         : 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={ICON_SIZE}
+          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}
@@ -206,18 +190,17 @@ export const Alert = forwardRef<View, AlertType>(
               >
                 {action}
               </ButtonText>
-            </>
-          )}
+            )}
+          </VStack>
         </View>
-      </>
+      </HStack>
     );
 
     const StaticComponent = () => (
       <View
         ref={viewRef}
         style={[
-          styles.container,
-          fullWidth ? styles.spacingFullWidth : styles.spacingDefault,
+          fullWidth ? { padding } : paddingDefaultVariant,
           { backgroundColor: mapVariantStates[variant].background }
         ]}
         testID={testID}
@@ -244,8 +227,7 @@ export const Alert = forwardRef<View, AlertType>(
       >
         <Animated.View
           style={[
-            styles.container,
-            fullWidth ? styles.spacingFullWidth : styles.spacingDefault,
+            fullWidth ? { padding: paddingFullWidth } : paddingDefaultVariant,
             { backgroundColor: mapVariantStates[variant].background },
             // Disable pressed animation when component is full width
             !fullWidth && scaleAnimatedStyle

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

package/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,
       },
@@ -23,7 +25,7 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
   <Text
     allowFontScaling={true}
     ellipsizeMode="tail"
-    maxFontSizeMultiplier={1.25}
+    maxFontSizeMultiplier={1.5}
     numberOfLines={1}
     style={
       [
@@ -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,9 +75,9 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
   }
 >
   <Text
-    allowFontScaling={false}
+    allowFontScaling={true}
     ellipsizeMode="tail"
-    maxFontSizeMultiplier={1.25}
+    maxFontSizeMultiplier={1.5}
     numberOfLines={1}
     style={
       [

package/src/components/banner/Banner.tsx

@@ -191,8 +191,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} />
           </>

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

@@ -75,7 +75,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
       <Text
         allowFontScaling={true}
         dynamicTypeRamp="headline"
-        maxFontSizeMultiplier={1.25}
+        maxFontSizeMultiplier={1.5}
         style={
           [
             {},
@@ -120,7 +120,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
           allowFontScaling={true}
           ellipsizeMode="tail"
           importantForAccessibility="no-hide-descendants"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           numberOfLines={1}
           style={
             [
@@ -352,9 +352,9 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
       }
     >
       <Text
-        allowFontScaling={false}
+        allowFontScaling={true}
         dynamicTypeRamp="headline"
-        maxFontSizeMultiplier={1.25}
+        maxFontSizeMultiplier={1.5}
         style={
           [
             {},
@@ -396,10 +396,10 @@ exports[`Test Banner Components Banner 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={
             [

package/src/components/buttons/ButtonLink.tsx

@@ -90,6 +90,7 @@ const mapLegacyColorStates: Record<
 };
 
 const DISABLED_OPACITY = 0.5;
+const ICON_MARGIN = 8;
 
 export const ButtonLink = forwardRef<View, ButtonLinkProps>(
   (
@@ -156,6 +157,7 @@ export const ButtonLink = forwardRef<View, ButtonLinkProps>(
             iconPosition === "end" && { flexDirection: "row-reverse" },
             { columnGap: iconMargin },
             disabled ? { opacity: DISABLED_OPACITY } : {},
+            { columnGap: ICON_MARGIN },
             /* Prevent Reanimated from overriding background colors
                     if button is disabled */
             !disabled && !reducedMotion && scaleAnimatedStyle
@@ -164,6 +166,7 @@ export const ButtonLink = forwardRef<View, ButtonLinkProps>(
           {icon &&
             (!disabled ? (
               <AnimatedIconClassComponent
+                allowFontScaling
                 name={icon}
                 animatedProps={pressedColorAnimationStyle}
                 color={colorMap[color]?.label?.default}
@@ -171,6 +174,7 @@ export const ButtonLink = forwardRef<View, ButtonLinkProps>(
               />
             ) : (
               <AnimatedIcon
+                allowFontScaling
                 name={icon}
                 color={colorMap[color]?.label?.disabled}
                 size={iconSize}

package/src/components/buttons/ButtonOutline.tsx

@@ -26,7 +26,6 @@ import {
   IOIcons,
   IconClassComponent
 } from "../icons";
-import { HSpacer } from "../spacer/Spacer";
 import { IOText, buttonTextFontSize } from "../typography";
 
 type ColorButtonOutline = "primary" | "contrast" | "danger";
@@ -185,11 +184,6 @@ const mapLegacyColorStates: Record<
   }
 };
 
-// Icon size
-const iconSize: IOIconSizeScale = 20;
-
-const DISABLED_OPACITY = 0.5;
-
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const IOButtonLegacyStylesLocal = StyleSheet.create({
   buttonWithBorder: {
@@ -197,6 +191,12 @@ const IOButtonLegacyStylesLocal = StyleSheet.create({
   }
 });
 
+// Icon size
+const iconSize: IOIconSizeScale = 20;
+
+const DISABLED_OPACITY = 0.5;
+const ICON_MARGIN = 8;
+
 const IOButtonStylesLocal = StyleSheet.create({
   buttonWithBorder: {
     borderWidth: 2
@@ -303,6 +303,7 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
             isExperimental && fullWidth && { paddingHorizontal: 16 },
             buttonStylesLocal.buttonWithBorder,
             buttonStyles.buttonSizeDefault,
+            { columnGap: ICON_MARGIN },
             iconPosition === "end" && { flexDirection: "row-reverse" },
             disabled
               ? {
@@ -320,25 +321,23 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
             !disabled && pressedAnimationStyle
           ]}
         >
-          {icon && (
-            <>
-              {!disabled ? (
-                <AnimatedIconClassComponent
-                  name={icon}
-                  animatedProps={pressedColorIconAnimationStyle}
-                  color={colorMap[color]?.label?.default}
-                  size={iconSize}
-                />
-              ) : (
-                <AnimatedIcon
-                  name={icon}
-                  color={colorMap[color]?.label?.disabled}
-                  size={iconSize}
-                />
-              )}
-              <HSpacer size={8} />
-            </>
-          )}
+          {icon &&
+            (!disabled ? (
+              <AnimatedIconClassComponent
+                allowFontScaling
+                name={icon}
+                animatedProps={pressedColorIconAnimationStyle}
+                color={colorMap[color]?.label?.default}
+                size={iconSize}
+              />
+            ) : (
+              <AnimatedIcon
+                allowFontScaling
+                name={icon}
+                color={colorMap[color]?.label?.disabled}
+                size={iconSize}
+              />
+            ))}
           <AnimatedIOText
             font={isExperimental ? "Titillio" : "TitilliumSansPro"}
             weight={"Semibold"}

package/src/components/buttons/ButtonSolid.tsx

@@ -24,7 +24,6 @@ import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
-import { HSpacer } from "../spacer/Spacer";
 import { ButtonText } from "../typography/ButtonText";
 
 export type ButtonSolidColor = "primary" | "danger" | "contrast";
@@ -48,6 +47,7 @@ const legacyStyles = StyleSheet.create({
 });
 
 const colorPrimaryButtonDisabled: IOColors = "grey-200";
+const ICON_MARGIN = 8;
 const DISABLED_OPACITY = 0.5;
 
 // Icon size
@@ -266,19 +266,20 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
             <Animated.View
               style={[
                 buttonStyles.buttonInner,
+                { columnGap: ICON_MARGIN },
+                /* If 'iconPosition' is set to 'end', we use 
+                   reverse flex property to invert the position */
                 iconPosition === "end" && { flexDirection: "row-reverse" }
               ]}
               entering={enterTransitionInnerContent}
             >
               {icon && (
-                <>
-                  {/* If 'iconPosition' is set to 'end', we use 
-            reverse flex property to invert the position */}
-                  <Icon name={icon} size={iconSize} color={foregroundColor} />
-                  {/* Once we have support for 'gap' property,
-            we can get rid of that spacer */}
-                  <HSpacer size={8} />
-                </>
+                <Icon
+                  allowFontScaling
+                  name={icon}
+                  size={iconSize}
+                  color={foregroundColor}
+                />
               )}
               <ButtonText
                 color={foregroundColor}

package/src/components/buttons/IconButton.tsx

@@ -160,6 +160,7 @@ export const IconButton = ({
       >
         {!disabled ? (
           <AnimatedIconClassComponent
+            allowFontScaling
             name={icon}
             size={iconSize}
             animatedProps={animatedColor}
@@ -167,6 +168,7 @@ export const IconButton = ({
           />
         ) : (
           <AnimatedIcon
+            allowFontScaling
             name={icon}
             size={iconSize}
             color={colorMap[color]?.icon?.disabled}