From 1c31558a9951d2047ee225c0c062227c95d886c8 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 20 Dec 2024 11:24:28 +0100 Subject: [PATCH 1/4] [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 /> + +
Nome del valoreeeeee eeeeeeeeee
+ + + } + onPress={() => { + alert("Action triggered"); + }} + /> @@ -176,16 +176,7 @@ export const ListItemNav = ({ style={[IOListItemStyles.listItem, backgroundAnimatedStyle]} > {/* Possibile graphical assets - Icon @@ -193,28 +184,50 @@ export const ListItemNav = ({ - Avatar */} {icon && !hugeFontEnabled && ( - + <> + + + )} {paymentLogoUri && ( - + <> + + + + )} + {avatar && ( + <> + + + )} - {avatar && } - {listItemNavContent} + + {listItemNavContent} + {loading && } {!loading && !hideChevron && ( - + {badge ? ( ) : ( 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 @@ -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`] = ` From 783f4b94a1b00c75ad4da3979a091220ebbb7c69 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 20 Dec 2024 11:26:30 +0100 Subject: [PATCH 2/4] 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", From a2b813e8e540b86761c2a1e160a209a10a95cc09 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 20 Dec 2024 17:06:29 +0100 Subject: [PATCH 3/4] Skip the `entering` transition on the first render of `ButtonSolid` (#374) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Short description This PR adds a skip of the `entering` transition on the first render of `ButtonSolid` ## List of changes proposed in this pull request - Restore previous code to avoid `entering` transition ### Preview The `entering` transition in the first render we'd like to remove (play at **0.25/0.5×**) https://github.com/user-attachments/assets/b394559b-555e-455c-a4ca-37f7495bac2f ## How to test Go to the **Buttons** page in the example app and check if there's any difference between `main` and this branch --- src/components/buttons/ButtonSolid.tsx | 21 ++++++++++++++++--- .../__snapshots__/button.test.tsx.snap | 2 -- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx index 8ef9034f..31184931 100644 --- 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( [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( {loading && ( @@ -271,7 +284,9 @@ export const ButtonSolid = React.forwardRef( reverse flex property to invert the position */ iconPosition === "end" && { flexDirection: "row-reverse" } ]} - entering={enterTransitionInnerContent} + entering={ + isMounted.current ? enterTransitionInnerContent : undefined + } > {icon && ( Date: Fri, 20 Dec 2024 17:09:04 +0100 Subject: [PATCH 4/4] chore: release 4.4.3 --- CHANGELOG.md | 15 +++++++++++++++ package.json | 2 +- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8127cba9..14c46624 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,9 +4,24 @@ 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) diff --git a/package.json b/package.json index f6fa03e0..32b159fb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@pagopa/io-app-design-system", - "version": "4.4.2", + "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",