From 3798f9838a1fb86c68bf886380f9df73daff943f Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 17 Dec 2024 15:57:21 +0100 Subject: [PATCH 1/9] [IOAPPX-426] Adjust `SearchInput` and `TextInputBase` spacing based on the `fontScale` value (#356) > [!caution] > This PR depends on: > * https://github.com/pagopa/io-app-design-system/pull/348 ## Short description This PR enables dynamic size on the `SearchInput` and `TextInputBase` components ## List of changes proposed in this pull request - Add `allowFontScaling` prop to the icons contained in the both components - Add `allowScaleSpacing` prop to `VSpacer` and `HSpacer` components ## How to test Go to the **Text Inputs** and **Search Input** screens in the example app --- src/components/searchInput/SearchInput.tsx | 15 ++++-- src/components/spacer/Spacer.tsx | 27 ++++++++--- src/components/textInput/TextInput.tsx | 3 +- src/components/textInput/TextInputBase.tsx | 55 +++++++++++++++++----- 4 files changed, 77 insertions(+), 23 deletions(-) diff --git a/src/components/searchInput/SearchInput.tsx b/src/components/searchInput/SearchInput.tsx index df36e761..5e6b6d62 100644 --- a/src/components/searchInput/SearchInput.tsx +++ b/src/components/searchInput/SearchInput.tsx @@ -21,7 +21,7 @@ import { } from "react-native"; import Animated, { Easing, - Extrapolate, + Extrapolation, interpolate, interpolateColor, useAnimatedStyle, @@ -173,7 +173,7 @@ export const SearchInput = forwardRef( showCancelButton, [0, 1], [cancelButtonWidth + IOVisualCostants.appMarginDefault, 0], - Extrapolate.CLAMP + Extrapolation.CLAMP ) } ], @@ -235,7 +235,12 @@ export const SearchInput = forwardRef( pointerEvents={pressable ? "none" : "auto"} > - + { - const style = React.useMemo( +const Spacer = ({ allowScaleSpacing, orientation, size }: BaseSpacerProps) => { + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + + const style = useMemo( () => ({ ...(orientation === "vertical" && { - height: size + height: allowScaleSpacing + ? size * dynamicFontScale * spacingScaleMultiplier + : size }), ...(orientation === "horizontal" && { - width: size + width: allowScaleSpacing + ? size * dynamicFontScale * spacingScaleMultiplier + : size }), ...((debugMode as boolean) && { backgroundColor: debugBg }) }), - [orientation, size] + [ + allowScaleSpacing, + dynamicFontScale, + orientation, + size, + spacingScaleMultiplier + ] ); return ; diff --git a/src/components/textInput/TextInput.tsx b/src/components/textInput/TextInput.tsx index 1a21a25e..f6567024 100644 --- a/src/components/textInput/TextInput.tsx +++ b/src/components/textInput/TextInput.tsx @@ -1,8 +1,9 @@ import * as React from "react"; +import { ComponentProps } from "react"; import { TextInputBase } from "./TextInputBase"; type TextInputProps = Omit< - React.ComponentProps, + ComponentProps, | "rightElement" | "status" | "bottomMessageColor" diff --git a/src/components/textInput/TextInputBase.tsx b/src/components/textInput/TextInputBase.tsx index b2616031..2339b0aa 100644 --- a/src/components/textInput/TextInputBase.tsx +++ b/src/components/textInput/TextInputBase.tsx @@ -26,6 +26,7 @@ import { useIOExperimentalDesign, useIOTheme } from "../../core"; +import { useIOFontDynamicScale } from "../../utils/accessibility"; import { IOFontSize, makeFontStyleObject } from "../../utils/fonts"; import { RNTextInputProps, getInputPropsByType } from "../../utils/textInput"; import { InputType, WithTestID } from "../../utils/types"; @@ -78,8 +79,7 @@ const styles = StyleSheet.create({ flexDirection: "row", alignItems: "center", height: inputHeight, - paddingVertical: inputPaddingVertical, - paddingHorizontal: inputPaddingHorizontal + paddingVertical: inputPaddingVertical }, textInputOuterBorder: { ...StyleSheet.absoluteFillObject, @@ -107,7 +107,7 @@ const styles = StyleSheet.create({ ...(Platform.OS === "android" && { marginLeft: -4 }) }, textInputStyleFont: { - ...makeFontStyleObject(inputLabelFontSize, "Titillio", undefined, "Regular") + ...makeFontStyleObject(inputLabelFontSize, "Titillio", undefined, "Medium") }, // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 textInputStyleLegacyFont: { @@ -120,20 +120,23 @@ const styles = StyleSheet.create({ }, textInputLabelWrapper: { position: "absolute", - paddingHorizontal: inputPaddingHorizontal, zIndex: 10, bottom: 0, top: 0, justifyContent: "center" }, textInputLabel: { + color: inputLabelColor, + ...makeFontStyleObject(inputLabelFontSize, "Titillio", undefined, "Regular") + }, + textInputLabelLegacyFont: { + color: inputLabelColor, ...makeFontStyleObject( inputLabelFontSize, "TitilliumSansPro", undefined, "Regular" - ), - color: inputLabelColor + ) } }); @@ -227,6 +230,9 @@ export const TextInputBase = ({ disabled ? "disabled" : "initial" ); const focusedState = useSharedValue(0); + + const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale(); + const theme = useIOTheme(); /* Get the label width to enable the correct translation */ @@ -361,7 +367,11 @@ export const TextInputBase = ({ onPress={onTextInputPress} style={[ inputStatus === "disabled" ? { opacity: inputDisabledOpacity } : {}, - styles.textInput + styles.textInput, + { + paddingHorizontal: + inputPaddingHorizontal * dynamicFontScale * spacingScaleMultiplier + } ]} accessible={false} accessibilityRole={"none"} @@ -384,8 +394,13 @@ export const TextInputBase = ({ {icon && ( <> - - + + )} {placeholder} From b56e04c704460d49159fc300d85068cbd732825f Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 17 Dec 2024 16:05:32 +0100 Subject: [PATCH 2/9] [IOAPPX-429] Enable `allowFontScaling` by default in the `IOText` component (#359) ## Short description This PR enables `allowFontScaling` by default in the `IOText` component. Previously the default was tied to the state of the `isExperimental` value, so it was only enabled if you enabled the experimental DS. ## List of changes proposed in this pull request - Set `allowFontScaling` fallback value to `true` in the `IOText` component ## How to test Set larger text on your device and check that the text is dynamic in both standard and experimental views. --- .../__snapshots__/advice.test.tsx.snap | 2 +- .../__snapshots__/banner.test.tsx.snap | 4 +- .../__snapshots__/button.test.tsx.snap | 6 +- .../__snapshots__/listitem.test.tsx.snap | 26 +++--- .../__snapshots__/NumberPad.test.tsx.snap | 20 ++--- .../ToastNotification.test.tsx.snap | 12 +-- src/components/typography/IOText.tsx | 10 +-- .../ComposedBodyFromArray.test.tsx.snap | 84 +++++++++---------- .../__snapshots__/typography.test.tsx.snap | 50 +++++------ 9 files changed, 106 insertions(+), 108 deletions(-) diff --git a/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap b/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap index 54566b3c..6e6e26f7 100644 --- 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`] = ` } /> ( textStyle, style, children, - allowFontScaling, + allowFontScaling = true, maxFontSizeMultiplier, ...props }, @@ -104,8 +104,6 @@ export const IOText = forwardRef( const theme = useIOTheme(); const boldEnabled = useBoldTextEnabled(); - const { isExperimental } = useIOExperimentalDesign(); - const computedStyleObj = useMemo( () => calculateTextStyle( @@ -143,7 +141,7 @@ export const IOText = forwardRef( /* Accessible typography based on the `fontScale` parameter */ const accessibleFontSizeProps: ComponentProps = { - allowFontScaling: allowFontScaling ?? isExperimental, + allowFontScaling, maxFontSizeMultiplier: maxFontSizeMultiplier ?? IOFontSizeMultiplier }; diff --git a/src/components/typography/__test__/__snapshots__/ComposedBodyFromArray.test.tsx.snap b/src/components/typography/__test__/__snapshots__/ComposedBodyFromArray.test.tsx.snap index dae775fc..6f3bd3bb 100644 --- a/src/components/typography/__test__/__snapshots__/ComposedBodyFromArray.test.tsx.snap +++ b/src/components/typography/__test__/__snapshots__/ComposedBodyFromArray.test.tsx.snap @@ -2,7 +2,7 @@ exports[`ComposedBodyFromArray should match snapshot, empty body, auto text align 1`] = ` Date: Tue, 17 Dec 2024 16:16:48 +0100 Subject: [PATCH 3/9] chore: release 4.4.0 --- CHANGELOG.md | 9 +++++++++ package.json | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2d69c9d7..2f6cfca5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,10 +4,19 @@ 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.0](https://github.com/pagopa/io-app-design-system/compare/v4.3.0...v4.4.0) + +- [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) + #### [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/package.json b/package.json index 94493a17..e43c93f4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@pagopa/io-app-design-system", - "version": "4.3.0", + "version": "4.4.0", "description": "The library defining the core components of the design system of @pagopa/io-app", "main": "lib/commonjs/index", "module": "lib/module/index", From 52d08c1d7f052daa2e9c01e00f350e5b1c69c351 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Wed, 18 Dec 2024 14:57:11 +0100 Subject: [PATCH 4/9] [IOAPPX-451] Enable dynamic component scaling in the legacy UI (#371) ## Short description This PR enables dynamic component scaling in the legacy UI, as well. ## List of changes proposed in this pull request - Remove `isExperimental` condition ## How to test Check if **Selection** components have scaled sizes in the legacy UI (new DS disabled) --- src/components/typography/IOText.tsx | 4 ++-- src/utils/accessibility.ts | 13 +++++-------- src/utils/fonts.ts | 2 +- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/components/typography/IOText.tsx b/src/components/typography/IOText.tsx index 2dc36ab3..f73e5198 100644 --- a/src/components/typography/IOText.tsx +++ b/src/components/typography/IOText.tsx @@ -10,8 +10,8 @@ import { IOColors, useIOTheme } from "../../core"; import { useBoldTextEnabled } from "../../utils/accessibility"; import { IOFontFamily, - IOFontSizeMultiplier, IOFontWeight, + IOMaxFontSizeMultiplier, makeFontStyleObject } from "../../utils/fonts"; @@ -142,7 +142,7 @@ export const IOText = forwardRef( /* Accessible typography based on the `fontScale` parameter */ const accessibleFontSizeProps: ComponentProps = { allowFontScaling, - maxFontSizeMultiplier: maxFontSizeMultiplier ?? IOFontSizeMultiplier + maxFontSizeMultiplier: maxFontSizeMultiplier ?? IOMaxFontSizeMultiplier }; return ( diff --git a/src/utils/accessibility.ts b/src/utils/accessibility.ts index c2c89179..0214e9da 100644 --- a/src/utils/accessibility.ts +++ b/src/utils/accessibility.ts @@ -1,7 +1,6 @@ import { useEffect, useState } from "react"; import { AccessibilityInfo, Platform, useWindowDimensions } from "react-native"; -import { useIOExperimentalDesign } from "../core"; -import { IOFontSizeMultiplier } from "./fonts"; +import { IOMaxFontSizeMultiplier } from "./fonts"; /** * Query whether a bold text is currently enabled. The result is true @@ -37,7 +36,7 @@ export const useBoldTextEnabled = () => { /** * Returns a font size multiplier based on the font scale of the device, - * but limited to the `IOFontSizeMultiplier` value. + * but limited to the `IOMaxFontSizeMultiplier` value. * @returns number */ export const useIOFontDynamicScale = (): { @@ -45,17 +44,15 @@ export const useIOFontDynamicScale = (): { spacingScaleMultiplier: number; hugeFontEnabled: boolean; } => { - const { isExperimental } = useIOExperimentalDesign(); const { fontScale } = useWindowDimensions(); - const deviceFontScale = isExperimental ? fontScale : 1; - const hugeFontEnabled = deviceFontScale >= 1.35; + const hugeFontEnabled = fontScale >= 1.35; - const dynamicFontScale = Math.min(deviceFontScale, IOFontSizeMultiplier); + const dynamicFontScale = Math.min(fontScale, IOMaxFontSizeMultiplier); /* We make the spacing dynamic based on the font scale, but we multiply this value to limit the amount of scaling applied to the spacing */ const spacingScaleMultiplier = - dynamicFontScale <= IOFontSizeMultiplier ? 1 : 0.8; + dynamicFontScale <= IOMaxFontSizeMultiplier ? 1 : 0.8; return { hugeFontEnabled, diff --git a/src/utils/fonts.ts b/src/utils/fonts.ts index b6216b79..734aa7ae 100644 --- a/src/utils/fonts.ts +++ b/src/utils/fonts.ts @@ -122,7 +122,7 @@ export const makeFontFamilyName = ( const defaultFont: IOFontFamily = "TitilliumSansPro"; const defaultWeight: IOFontWeight = "Regular"; const defaultFontSize: IOFontSize = 16; -export const IOFontSizeMultiplier = 1.5; +export const IOMaxFontSizeMultiplier = 1.5; /** * Return a {@link FontStyleObject} with the fields filled based on the platform (iOS or Android). From b82bd385a9dd7ac82ff6622ed0935cb3373c5f18 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Wed, 18 Dec 2024 14:59:28 +0100 Subject: [PATCH 5/9] chore: release 4.4.1 --- CHANGELOG.md | 7 +++++++ package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2f6cfca5..a8e890b2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,11 +4,18 @@ 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.1](https://github.com/pagopa/io-app-design-system/compare/v4.4.0...v4.4.1) + +- [IOAPPX-451] Enable dynamic component scaling in the legacy UI [`#371`](https://github.com/pagopa/io-app-design-system/pull/371) + #### [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) diff --git a/package.json b/package.json index e43c93f4..a9d61eb5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@pagopa/io-app-design-system", - "version": "4.4.0", + "version": "4.4.1", "description": "The library defining the core components of the design system of @pagopa/io-app", "main": "lib/commonjs/index", "module": "lib/module/index", From 1c31558a9951d2047ee225c0c062227c95d886c8 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 20 Dec 2024 11:24:28 +0100 Subject: [PATCH 6/9] [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 7/9] 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 8/9] 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 9/9] 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",