Merge branch 'main' into IOAPPX-449-remove-size-prop-banner

pagopa · Jan 7, 2025 · be13c5e · be13c5e
2 parents 8c5fbbe + 58ea9e9
commit be13c5e
Show file tree

Hide file tree

Showing 21 changed files with 316 additions and 187 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,10 +4,48 @@ 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)
+
+> 17 December 2024
+
+- [IOAPPX-429] Enable `allowFontScaling` by default in the `IOText` component [`#359`](https://github.com/pagopa/io-app-design-system/pull/359)
+- [IOAPPX-426] Adjust `SearchInput` and `TextInputBase` spacing based on the `fontScale` value [`#356`](https://github.com/pagopa/io-app-design-system/pull/356)
+- [IOAPPX-419] Adjust the size of `Icon`, `Pictogram` and some components based on the value of `fontScale` [`#348`](https://github.com/pagopa/io-app-design-system/pull/348)
+- chore: release 4.4.0 [`cc3abfd`](https://github.com/pagopa/io-app-design-system/commit/cc3abfdd5ae8af6e9747feae4b9918e17c22e80e)
+
 #### [v4.3.0](https://github.com/pagopa/io-app-design-system/compare/v4.2.1...v4.3.0)
 
+> 11 December 2024
+
 - [IOAPPX-428] Add the new `useScaleAnimation` and `useListItemAnimation` hooks + Add support for the `reducedMotion` a11y setting [`#358`](https://github.com/pagopa/io-app-design-system/pull/358)
 - [IOAPPX-446] Remove `FooterWithButtons` [`#366`](https://github.com/pagopa/io-app-design-system/pull/366)
+- chore: release 4.3.0 [`03950e8`](https://github.com/pagopa/io-app-design-system/commit/03950e8b64109843af4c843702fda9b36b3cb00d)
 
 #### [v4.2.1](https://github.com/pagopa/io-app-design-system/compare/v4.2.0...v4.2.1)
 

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.3.0",
+  "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/Advice/__test__/__snapshots__/advice.test.tsx.snap b/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap
@@ -190,7 +190,7 @@ exports[`Test Advice Components Advice Snapshot 1`] = `
     }
   />
   <Text
-    allowFontScaling={false}
+    allowFontScaling={true}
     dynamicTypeRamp="body"
     maxFontSizeMultiplier={1.5}
     style={

diff --git a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
@@ -350,7 +350,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
       }
     >
       <Text
-        allowFontScaling={false}
+        allowFontScaling={true}
         dynamicTypeRamp="headline"
         maxFontSizeMultiplier={1.5}
         style={
@@ -394,7 +394,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
         <Text
           accessibilityElementsHidden={true}
           accessible={false}
-          allowFontScaling={false}
+          allowFontScaling={true}
           ellipsizeMode="tail"
           importantForAccessibility="no-hide-descendants"
           maxFontSizeMultiplier={1.5}

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={
         [
           {
@@ -819,7 +818,7 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
     <Text
       accessibilityElementsHidden={true}
       accessible={false}
-      allowFontScaling={false}
+      allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
       maxFontSizeMultiplier={1.5}
@@ -930,7 +929,7 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
     <Text
       accessibilityElementsHidden={true}
       accessible={false}
-      allowFontScaling={false}
+      allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
       maxFontSizeMultiplier={1.5}
@@ -1038,7 +1037,6 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
     }
   >
     <View
-      entering={[Function]}
       style={
         [
           {
@@ -1056,7 +1054,7 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
       <Text
         accessibilityElementsHidden={true}
         accessible={false}
-        allowFontScaling={false}
+        allowFontScaling={true}
         ellipsizeMode="tail"
         importantForAccessibility="no-hide-descendants"
         maxFontSizeMultiplier={1.5}

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} />
         ) : (