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

package/src/components/listitems/ListItemRadio.tsx

@@ -7,17 +7,19 @@ import Placeholder from "rn-placeholder";
 import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
+  IOSelectionTickVisualParams,
   IOStyles,
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { AnimatedRadio } from "../radio/AnimatedRadio";
 import { HSpacer, VSpacer } from "../spacer";
-import { H6, BodySmall } from "../typography";
 import { VStack } from "../stack";
+import { BodySmall, H6 } from "../typography";
 
 type ListItemRadioGraphicProps =
   | { icon?: never; paymentLogo: IOLogoPaymentType; uri?: never }
@@ -81,6 +83,8 @@ export const ListItemRadio = ({
   testID
 }: ListItemRadioProps) => {
   const [toggleValue, setToggleValue] = useState(selected ?? false);
+  const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
+    useIOFontDynamicScale();
   const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
     useListItemAnimation();
   const theme = useIOTheme();
@@ -139,7 +143,10 @@ export const ListItemRadio = ({
           </View>
           <HSpacer size={8} />
           <View pointerEvents="none" style={disabledStyle}>
-            <AnimatedRadio checked={toggleValue} />
+            <AnimatedRadio
+              size={IOSelectionTickVisualParams.size * dynamicFontScale}
+              checked={toggleValue}
+            />
           </View>
         </View>
       </View>
@@ -177,37 +184,41 @@ export const ListItemRadio = ({
       >
         <Animated.View style={scaleAnimatedStyle}>
           <View style={IOSelectionListItemStyles.listItemInner}>
-            <View style={[IOStyles.row, { flexShrink: 1 }]}>
-              {startImage && (
-                <View
-                  style={{
-                    marginRight: IOSelectionListItemVisualParams.iconMargin
-                  }}
-                >
-                  {/* icon or paymentLogo props are mutually exclusive */}
-                  {startImage.icon && (
-                    <Icon
-                      name={startImage.icon}
-                      color="grey-300"
-                      size={IOSelectionListItemVisualParams.iconSize}
-                    />
-                  )}
-                  {startImage.uri && (
-                    <Image
-                      accessibilityIgnoresInvertColors
-                      source={startImage}
-                      style={styles.imageSize}
-                    />
-                  )}
-                  {startImage.paymentLogo && (
-                    <LogoPayment
-                      name={startImage.paymentLogo}
-                      size={IOSelectionListItemVisualParams.iconSize}
-                    />
-                  )}
+            <View
+              style={{
+                flexDirection: "row",
+                flexShrink: 1,
+                columnGap:
+                  IOSelectionListItemVisualParams.iconMargin *
+                  dynamicFontScale *
+                  spacingScaleMultiplier
+              }}
+            >
+              {startImage?.icon && !hugeFontEnabled && (
+                <Icon
+                  allowFontScaling
+                  name={startImage.icon}
+                  color="grey-300"
+                  size={IOSelectionListItemVisualParams.iconSize}
+                />
+              )}
+              {startImage?.uri && (
+                <View style={{ alignSelf: "center" }}>
+                  <Image
+                    accessibilityIgnoresInvertColors
+                    source={startImage}
+                    style={styles.imageSize}
+                  />
+                </View>
+              )}
+              {startImage?.paymentLogo && (
+                <View style={{ alignSelf: "center" }}>
+                  <LogoPayment
+                    name={startImage.paymentLogo}
+                    size={IOSelectionListItemVisualParams.iconSize}
+                  />
                 </View>
               )}
-
               <H6 color={theme["textBody-default"]} style={{ flexShrink: 1 }}>
                 {value}
               </H6>
@@ -218,7 +229,10 @@ export const ListItemRadio = ({
               accessibilityElementsHidden
               importantForAccessibility="no-hide-descendants"
             >
-              <AnimatedRadio checked={selected ?? toggleValue} />
+              <AnimatedRadio
+                size={IOSelectionTickVisualParams.size * dynamicFontScale}
+                checked={selected ?? toggleValue}
+              />
             </View>
           </View>
           {description && (

package/src/components/listitems/ListItemRadioWithAmount.tsx

@@ -1,7 +1,8 @@
 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";
@@ -33,6 +34,7 @@ export const ListItemRadioWithAmount = ({
   suggestReason,
   formattedAmountString
 }: ListItemRadioWithAmountProps) => {
+  const { dynamicFontScale } = useIOFontDynamicScale();
   const [toggleValue, setToggleValue] = React.useState(selected ?? false);
 
   const pressHandler = () => {
@@ -77,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";
@@ -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}