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

package/src/components/listitems/ListItemRadioWithAmount.tsx

@@ -1,12 +1,13 @@
 import * as React from "react";
 import { View } from "react-native";
 import RNReactNativeHapticFeedback from "react-native-haptic-feedback";
-import { IOColors, useIOTheme } from "../../core";
+import { IOColors, IOSelectionTickVisualParams, useIOTheme } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { Icon } from "../icons";
 import { AnimatedRadio } from "../radio/AnimatedRadio";
 import { HStack } from "../stack";
 import { BodySmall, H6 } from "../typography";
-import { PressableListItemBase } from "./PressableListItemsBase";
+import { PressableListItemBase } from "./PressableListItemBase";
 
 export type ListItemRadioWithAmountProps = {
   onValueChange?: (newValue: boolean) => void;
@@ -33,7 +34,9 @@ export const ListItemRadioWithAmount = ({
   suggestReason,
   formattedAmountString
 }: ListItemRadioWithAmountProps) => {
+  const { dynamicFontScale } = useIOFontDynamicScale();
   const [toggleValue, setToggleValue] = React.useState(selected ?? false);
+
   const pressHandler = () => {
     RNReactNativeHapticFeedback.trigger("impactLight");
     setToggleValue(val => !val);
@@ -76,7 +79,10 @@ export const ListItemRadioWithAmount = ({
         <H6 color={theme["interactiveElem-default"]}>
           {formattedAmountString}
         </H6>
-        <AnimatedRadio checked={selected ?? toggleValue} />
+        <AnimatedRadio
+          size={IOSelectionTickVisualParams.size * dynamicFontScale}
+          checked={selected ?? toggleValue}
+        />
       </HStack>
     </PressableListItemBase>
   );

package/src/components/listitems/ListItemSwitch.tsx

@@ -1,10 +1,11 @@
-import React, { useMemo } from "react";
+import React, { ComponentProps, useMemo } from "react";
 import { GestureResponderEvent, Platform, Switch, View } from "react-native";
 import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
   useIOTheme
 } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
@@ -42,7 +43,7 @@ const ESTIMATED_SWITCH_HEIGHT: number = 32;
 
 export type ListItemSwitchProps = PartialProps &
   ListItemSwitchGraphicProps &
-  Pick<React.ComponentProps<typeof Switch>, "value" | "disabled">;
+  Pick<ComponentProps<typeof Switch>, "value" | "disabled">;
 
 export const ListItemSwitch = React.memo(
   ({
@@ -60,6 +61,8 @@ export const ListItemSwitch = React.memo(
     testID
   }: ListItemSwitchProps) => {
     const theme = useIOTheme();
+    const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
+      useIOFontDynamicScale();
 
     // If we have a badge or we are loading, we can't render the switch
     // this affects the accessibility tree and the rendering of the component
@@ -92,7 +95,11 @@ export const ListItemSwitch = React.memo(
             style={{
               flex: 1,
               flexDirection: "row",
-              alignItems: "center"
+              alignItems: icon ? "flex-start" : "center",
+              columnGap:
+                IOSelectionListItemVisualParams.iconMargin *
+                dynamicFontScale *
+                spacingScaleMultiplier
             }}
             accessible={!canRenderSwitch}
             {...Platform.select({
@@ -104,32 +111,19 @@ export const ListItemSwitch = React.memo(
             })}
             accessibilityState={{ disabled }}
           >
-            {icon && (
-              <View
-                style={{
-                  marginRight: IOSelectionListItemVisualParams.iconMargin,
-                  alignSelf: "flex-start"
-                }}
-              >
-                <Icon
-                  name={icon}
-                  color="grey-300"
-                  size={IOSelectionListItemVisualParams.iconSize}
-                />
-              </View>
+            {icon && !hugeFontEnabled && (
+              <Icon
+                allowFontScaling
+                name={icon}
+                color="grey-300"
+                size={IOSelectionListItemVisualParams.iconSize}
+              />
             )}
             {paymentLogo && (
-              <View
-                style={{
-                  marginRight: IOSelectionListItemVisualParams.iconMargin,
-                  alignSelf: "center"
-                }}
-              >
-                <LogoPayment
-                  name={paymentLogo}
-                  size={IOSelectionListItemVisualParams.iconSize}
-                />
-              </View>
+              <LogoPayment
+                name={paymentLogo}
+                size={IOSelectionListItemVisualParams.iconSize}
+              />
             )}
 
             <H6

package/src/components/listitems/ListItemTransaction.tsx

@@ -12,6 +12,7 @@ import {
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
+
 import { WithTestID } from "../../utils/types";
 import { isImageUri } from "../../utils/url";
 import { Avatar } from "../avatar/Avatar";
@@ -25,7 +26,7 @@ import { H6, BodySmall } from "../typography";
 import {
   PressableBaseProps,
   PressableListItemBase
-} from "./PressableListItemsBase";
+} from "./PressableListItemBase";
 
 export type ListItemTransactionBadge = {
   text: string;
@@ -132,6 +133,7 @@ export const ListItemTransaction = ({
   const ListItemTransactionContent = () => (
     <>
       <HStack
+        allowScaleSpacing
         space={IOListItemLogoMargin}
         style={{ alignItems: "center", flexShrink: 1 }}
       >
@@ -168,6 +170,7 @@ export const ListItemTransaction = ({
         )}
         {showChevron && (
           <Icon
+            allowFontScaling
             name="chevronRightListItem"
             color={interactiveColor}
             size={IOListItemVisualParams.chevronSize}

package/src/components/listitems/{PressableListItemsBase.tsx → PressableListItemBase.tsx}

@@ -1,9 +1,10 @@
 import * as React from "react";
+import { PropsWithChildren } from "react";
 import { Pressable } from "react-native";
 import Animated from "react-native-reanimated";
 import { IOListItemStyles, IOListItemVisualParams } from "../../core";
 import { WithTestID } from "../../utils/types";
-import { useListItemSpringAnimation } from "./hooks/useListItemSpringAnimation";
+import { useListItemAnimation } from "../../hooks";
 
 export type PressableBaseProps = WithTestID<
   Pick<
@@ -22,9 +23,9 @@ export const PressableListItemBase = ({
   children,
   accessibilityRole,
   ...props
-}: React.PropsWithChildren<PressableBaseProps>) => {
-  const { onPressIn, onPressOut, animatedScaleStyle, animatedBackgroundStyle } =
-    useListItemSpringAnimation();
+}: PropsWithChildren<PressableBaseProps>) => {
+  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
+    useListItemAnimation();
   return (
     <Pressable
       onPress={onPress}
@@ -37,13 +38,13 @@ export const PressableListItemBase = ({
       {...props}
     >
       <Animated.View
-        style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+        style={[IOListItemStyles.listItem, backgroundAnimatedStyle]}
       >
         <Animated.View
           style={[
             IOListItemStyles.listItemInner,
             { columnGap: IOListItemVisualParams.iconMargin },
-            animatedScaleStyle
+            scaleAnimatedStyle
           ]}
         >
           {children}