Merge branch 'main' into IOAPPX-452-remove-some-variants-badge

pagopa · Jan 7, 2025 · 3da8e59 · 3da8e59
2 parents f72c7a1 + 58ea9e9
commit 3da8e59
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,9 +4,31 @@ 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.3](https://github.com/pagopa/io-app-design-system/compare/v5.0.0-0...v4.4.3)
+
+- Skip the `entering` transition on the first render of `ButtonSolid` [`#374`](https://github.com/pagopa/io-app-design-system/pull/374)
+
+#### [v5.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v4.4.2...v5.0.0-0)
+
+> 20 December 2024
+
+- Remove legacy styles from buttons [`d0ca275`](https://github.com/pagopa/io-app-design-system/commit/d0ca275ea9f1ec810d5afabde2392413791e3a9c)
+- Update `jest` snapshots [`47d1f88`](https://github.com/pagopa/io-app-design-system/commit/47d1f88c017bc69b245c6996f61884e396bb8dc5)
+- Update `jest` snapshots [`30076b9`](https://github.com/pagopa/io-app-design-system/commit/30076b93887ccf211ad03a02e4ed2700997b1300)
+
+#### [v4.4.2](https://github.com/pagopa/io-app-design-system/compare/v4.4.1...v4.4.2)
+
+> 20 December 2024
+
+- [IOAPPX-456] Improve `ListItemNav` and `ListItemTransaction` dynamic spacing [`#373`](https://github.com/pagopa/io-app-design-system/pull/373)
+- chore: release 4.4.2 [`783f4b9`](https://github.com/pagopa/io-app-design-system/commit/783f4b94a1b00c75ad4da3979a091220ebbb7c69)
+
 #### [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/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/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "4.4.1",
+  "version": "4.4.3",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentProps, useCallback } from "react";
+import React, { ComponentProps, useCallback, useEffect, useRef } from "react";
 import {
   GestureResponderEvent,
   Pressable,
@@ -186,6 +186,17 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
       [isExperimental]
     );
 
+    /* Prevent the component from triggering the `isEntering' transition
+       on the on the first render. Solution from this discussion:
+       https://github.com/software-mansion/react-native-reanimated/discussions/2513
+    */
+    const isMounted = useRef(false);
+
+    useEffect(() => {
+      // eslint-disable-next-line functional/immutable-data
+      isMounted.current = true;
+    }, []);
+
     // Interpolate animation values from `isPressed` values
     const pressedAnimationStyle = useAnimatedStyle(() => {
       // Link color states to the pressed states
@@ -255,7 +266,9 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
           {loading && (
             <Animated.View
               style={buttonStyles.buttonInner}
-              entering={enterTransitionInnerContentSmall}
+              entering={
+                isMounted.current ? enterTransitionInnerContentSmall : undefined
+              }
               exiting={exitTransitionInnerContent}
             >
               <LoadingSpinner color={foregroundColor} />
@@ -271,7 +284,9 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
                    reverse flex property to invert the position */
                 iconPosition === "end" && { flexDirection: "row-reverse" }
               ]}
-              entering={enterTransitionInnerContent}
+              entering={
+                isMounted.current ? enterTransitionInnerContent : undefined
+              }
             >
               {icon && (
                 <Icon

diff --git a/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap b/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap
@@ -300,7 +300,6 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
     }
   >
     <View
-      entering={[Function]}
       style={
         [
           {
@@ -1038,7 +1037,6 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
     }
   >
     <View
-      entering={[Function]}
       style={
         [
           {

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,
           }
         }
       >
-Original file line number
+Diff line change
@@ Expand Up @@
         }
       >
         <View
-          entering={[Function]}
           style={
             [
               {
@@ Expand Down Expand Up @@
         }
       >
         <View
-          entering={[Function]}
           style={
             [
               {
@@ Expand Down @@