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

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 (