[IOAPPX-456] Improve ListItemNav and ListItemTransaction dynamic …

…spacing (#373) ## Short description This PR improves `ListItemNav` and `ListItemTransaction` dynamic spacing after testing the components with larger text in the following PR: * pagopa/io-app#6561 ## List of changes proposed in this pull request - Remove extra space before chevron in the `ListItemNav` - Disable dynamic spacing in the `ListItemTransaction` between amount and chevron ## How to test N/A
pagopa · Dec 20, 2024 · 1c31558 · 1c31558
1 parent b82bd38
commit 1c31558
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 40 deletions.
diff --git a/example/src/pages/ListItem.tsx b/example/src/pages/ListItem.tsx
@@ -1,7 +1,9 @@
 import {
   Divider,
   H2,
+  H6,
   Icon,
+  Badge,
   ListItemAction,
   ListItemAmount,
   ListItemHeader,
@@ -134,6 +136,24 @@ const renderListItemNav = () => (
           }}
           loading
         />
+        <ListItemNav
+          icon={"categLearning"}
+          value={
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center"
+              }}
+            >
+              <H6>Nome del valoreeeeee eeeeeeeeee</H6>
+              <Badge text={"3"} variant="purple" />
+            </View>
+          }
+          onPress={() => {
+            alert("Action triggered");
+          }}
+        />
         <ListItemNav
           avatarProps={{
             logoUri: {

diff --git a/src/components/listitems/ListItemNav.tsx b/src/components/listitems/ListItemNav.tsx
@@ -6,7 +6,8 @@ import {
   IOListItemStyles,
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
-  IOStyles,
+  IOSpacer,
+  IOVisualCostants,
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
@@ -95,8 +96,7 @@ export const ListItemNav = ({
     useListItemAnimation();
   const theme = useIOTheme();
 
-  const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
-    useIOFontDynamicScale();
+  const { dynamicFontScale, hugeFontEnabled } = useIOFontDynamicScale();
 
   const listItemNavContent = (
     <>
@@ -176,45 +176,58 @@ export const ListItemNav = ({
         style={[IOListItemStyles.listItem, backgroundAnimatedStyle]}
       >
         <Animated.View
-          style={[
-            IOListItemStyles.listItemInner,
-            {
-              columnGap:
-                IOListItemVisualParams.iconMargin *
-                dynamicFontScale *
-                spacingScaleMultiplier
-            },
-            scaleAnimatedStyle
-          ]}
+          style={[IOListItemStyles.listItemInner, scaleAnimatedStyle]}
         >
           {/* Possibile graphical assets
           - Icon
           - Image URL (for payment logos)
           - Avatar
           */}
           {icon && !hugeFontEnabled && (
-            <Icon
-              allowFontScaling
-              name={icon}
-              color={iconColor}
-              size={IOListItemVisualParams.iconSize}
-            />
+            <>
+              <Icon
+                allowFontScaling
+                name={icon}
+                color={iconColor}
+                size={IOListItemVisualParams.iconSize}
+              />
+              <HSpacer
+                allowScaleSpacing
+                size={IOVisualCostants.iconMargin as IOSpacer}
+              />
+            </>
           )}
           {paymentLogoUri && (
-            <Image
-              accessibilityIgnoresInvertColors
-              source={{ uri: paymentLogoUri }}
-              style={{
-                width:
-                  IOSelectionListItemVisualParams.iconSize * dynamicFontScale,
-                height:
-                  IOSelectionListItemVisualParams.iconSize * dynamicFontScale
-              }}
-            />
+            <>
+              <Image
+                accessibilityIgnoresInvertColors
+                source={{ uri: paymentLogoUri }}
+                style={{
+                  width:
+                    IOSelectionListItemVisualParams.iconSize * dynamicFontScale,
+                  height:
+                    IOSelectionListItemVisualParams.iconSize * dynamicFontScale
+                }}
+              />
+              <HSpacer
+                allowScaleSpacing
+                size={IOVisualCostants.iconMargin as IOSpacer}
+              />
+            </>
+          )}
+          {avatar && (
+            <>
+              <Avatar size="small" {...avatar} />
+              <HSpacer
+                allowScaleSpacing
+                size={IOVisualCostants.iconMargin as IOSpacer}
+              />
+            </>
           )}
-          {avatar && <Avatar size="small" {...avatar} />}
 
-          <View style={IOStyles.flex}>{listItemNavContent}</View>
+          <View style={{ flexGrow: 1, flexShrink: 1 }}>
+            {listItemNavContent}
+          </View>
           {loading && <LoadingSpinner color={interactiveColor} />}
           {!loading && !hideChevron && (
             <Icon

diff --git a/src/components/listitems/ListItemTransaction.tsx b/src/components/listitems/ListItemTransaction.tsx
@@ -156,7 +156,7 @@ export const ListItemTransaction = ({
           </BodySmall>
         </View>
       </HStack>
-      <HStack style={{ alignItems: "center" }}>
+      <HStack space={4} style={{ alignItems: "center" }}>
         {badge ? (
           <Badge variant={badge?.variant} text={badge?.text} />
         ) : (

diff --git a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap
@@ -530,9 +530,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
-          {
-            "columnGap": 12,
-          },
           {
             "transform": [
               {
@@ -546,7 +543,8 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
       <View
         style={
           {
-            "flex": 1,
+            "flexGrow": 1,
+            "flexShrink": 1,
           }
         }
       >
@@ -2202,9 +2200,6 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
-          {
-            "columnGap": 12,
-          },
           {
             "transform": [
               {
@@ -2218,7 +2213,8 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
       <View
         style={
           {
-            "flex": 1,
+            "flexGrow": 1,
+            "flexShrink": 1,
           }
         }
       >