From a2b813e8e540b86761c2a1e160a209a10a95cc09 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 20 Dec 2024 17:06:29 +0100 Subject: [PATCH 1/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 2/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", From 08f56c94937845015a9f0d842bc23ffc83626606 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 7 Jan 2025 11:56:25 +0100 Subject: [PATCH 3/4] Add `numberOfLines` and `textAlign` props to `ButtonLink` (#375) ## Short description This PR adds `numberOfLines` and `textAlign` props to `ButtonLink`. This change is necessary to fix some issues when text is larger and the text is truncated (e.g. `Forgot unlock code` action [in this screen](https://github.com/pagopa/io-app/pull/6561#pullrequestreview-2515040276)) ## List of changes proposed in this pull request - Add the mentioned props to `ButtonLink` - Update example app with this edge case ## How to test 1. Run the example app 2. Go to the **Buttons** screen --- example/src/pages/Buttons.tsx | 13 +++++++++ src/components/buttons/ButtonLink.tsx | 27 ++++++++++++++----- .../__snapshots__/button.test.tsx.snap | 26 ++++++++++++------ src/components/typography/ButtonText.tsx | 3 ++- 4 files changed, 54 insertions(+), 15 deletions(-) diff --git a/example/src/pages/Buttons.tsx b/example/src/pages/Buttons.tsx index 553e4259..0a40a970 100644 --- a/example/src/pages/Buttons.tsx +++ b/example/src/pages/Buttons.tsx @@ -477,12 +477,25 @@ export const Buttons = () => { + + + + + void; }>; @@ -103,6 +114,8 @@ export const ButtonLink = forwardRef( onPress, accessibilityLabel, accessibilityHint, + numberOfLines = 1, + textAlign = "auto", testID }, ref @@ -187,12 +200,14 @@ export const ButtonLink = forwardRef( font={isExperimental ? "Titillio" : "TitilliumSansPro"} weight={"Semibold"} size={buttonTextFontSize} - style={ + lineHeight={buttonTextLineHeight} + style={[ disabled ? { color: colorMap[color]?.label?.disabled } - : { ...pressedColorAnimationStyle } - } - numberOfLines={1} + : { ...pressedColorAnimationStyle }, + { textAlign } + ]} + numberOfLines={numberOfLines} ellipsizeMode="tail" > {label} diff --git a/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap b/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap index 55efc61f..9d13f517 100644 --- a/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap +++ b/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap @@ -93,11 +93,16 @@ exports[`Test Buttons Components - Experimental Enabled ButtonLink Snapshot 1`] "fontSize": 16, "fontStyle": "normal", "fontWeight": "600", - "lineHeight": undefined, - }, - { - "color": undefined, + "lineHeight": 20, }, + [ + { + "color": undefined, + }, + { + "textAlign": "auto", + }, + ], ] } > @@ -832,11 +837,16 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = ` "fontSize": 16, "fontStyle": "normal", "fontWeight": "600", - "lineHeight": undefined, - }, - { - "color": undefined, + "lineHeight": 20, }, + [ + { + "color": undefined, + }, + { + "textAlign": "auto", + }, + ], ] } > diff --git a/src/components/typography/ButtonText.tsx b/src/components/typography/ButtonText.tsx index 6aa4a101..23abf389 100644 --- a/src/components/typography/ButtonText.tsx +++ b/src/components/typography/ButtonText.tsx @@ -6,6 +6,7 @@ import { IOFontFamily, IOFontSize } from "../../utils/fonts"; import { IOText, IOTextProps, TypographicStyleProps } from "./IOText"; export const buttonTextFontSize: IOFontSize = 16; +export const buttonTextLineHeight = 20; /* Needed to render `ButtonOutline` and`ButtonLink` because they use `AnimatedText` for color transition through Reanimated */ const defaultColor: IOColors = "white"; @@ -26,7 +27,7 @@ export const ButtonText = forwardRef( font: isExperimental ? fontName : legacyFontName, weight: "Semibold", size: buttonTextFontSize, - lineHeight: 20, + lineHeight: buttonTextLineHeight, color: customColor ?? defaultColor }; From 3a52bb766c40e79f178685fff0b05b7eb0ccdc36 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 7 Jan 2025 14:08:15 +0100 Subject: [PATCH 4/4] chore: release 4.4.4 --- CHANGELOG.md | 13 +++++++++++-- package.json | 2 +- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 14c46624..b02ea02e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,11 +4,13 @@ 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) +#### [v4.4.4](https://github.com/pagopa/io-app-design-system/compare/v5.0.0-0...v4.4.4) +- Add `numberOfLines` and `textAlign` props to `ButtonLink` [`#375`](https://github.com/pagopa/io-app-design-system/pull/375) - Skip the `entering` transition on the first render of `ButtonSolid` [`#374`](https://github.com/pagopa/io-app-design-system/pull/374) +- chore: release 4.4.3 [`58ea9e9`](https://github.com/pagopa/io-app-design-system/commit/58ea9e96bd87ab4ab2b78cfabd8efc7ed357f25a) -#### [v5.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v4.4.2...v5.0.0-0) +#### [v5.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v4.4.3...v5.0.0-0) > 20 December 2024 @@ -16,6 +18,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). - 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.3](https://github.com/pagopa/io-app-design-system/compare/v4.4.2...v4.4.3) + +> 20 December 2024 + +- Skip the `entering` transition on the first render of `ButtonSolid` [`#374`](https://github.com/pagopa/io-app-design-system/pull/374) +- chore: release 4.4.3 [`58ea9e9`](https://github.com/pagopa/io-app-design-system/commit/58ea9e96bd87ab4ab2b78cfabd8efc7ed357f25a) + #### [v4.4.2](https://github.com/pagopa/io-app-design-system/compare/v4.4.1...v4.4.2) > 20 December 2024 diff --git a/package.json b/package.json index 32b159fb..48adb826 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@pagopa/io-app-design-system", - "version": "4.4.3", + "version": "4.4.4", "description": "The library defining the core components of the design system of @pagopa/io-app", "main": "lib/commonjs/index", "module": "lib/module/index",