From 1c31558a9951d2047ee225c0c062227c95d886c8 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 20 Dec 2024 11:24:28 +0100
Subject: [PATCH 1/2] [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:
* https://github.com/pagopa/io-app/pull/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
---
 example/src/pages/ListItem.tsx                | 20 +++++
 src/components/listitems/ListItemNav.tsx      | 75 +++++++++++--------
 .../listitems/ListItemTransaction.tsx         |  2 +-
 .../__snapshots__/listitem.test.tsx.snap      | 12 +--
 4 files changed, 69 insertions(+), 40 deletions(-)

diff --git a/example/src/pages/ListItem.tsx b/example/src/pages/ListItem.tsx
index e8a85a4d..62d5da1d 100644
--- 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
index 17bbc409..b89bb977 100644
--- 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,16 +176,7 @@ 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
@@ -193,28 +184,50 @@ export const ListItemNav = ({
           - 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
index df4f7ff8..395f4e3f 100644
--- 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
index f0d646ae..3b03cb38 100644
--- 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,
           }
         }
       >

From 783f4b94a1b00c75ad4da3979a091220ebbb7c69 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Fri, 20 Dec 2024 11:26:30 +0100
Subject: [PATCH 2/2] chore: release 4.4.2

---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a8e890b2..8127cba9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,9 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v4.4.2](https://github.com/pagopa/io-app-design-system/compare/v4.4.1...v4.4.2)
+
+- [IOAPPX-456] Improve `ListItemNav` and `ListItemTransaction` dynamic spacing [`#373`](https://github.com/pagopa/io-app-design-system/pull/373)
+
 #### [v4.4.1](https://github.com/pagopa/io-app-design-system/compare/v4.4.0...v4.4.1)
 
+> 18 December 2024
+
 - [IOAPPX-451] Enable dynamic component scaling in the legacy UI [`#371`](https://github.com/pagopa/io-app-design-system/pull/371)
+- chore: release 4.4.1 [`b82bd38`](https://github.com/pagopa/io-app-design-system/commit/b82bd385a9dd7ac82ff6622ed0935cb3373c5f18)
 
 #### [v4.4.0](https://github.com/pagopa/io-app-design-system/compare/v4.3.0...v4.4.0)
 
diff --git a/package.json b/package.json
index a9d61eb5..f6fa03e0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "4.4.1",
+  "version": "4.4.2",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",