Merge branch 'main' into IOAPPX-415-remove-legacy-ui

pagopa · Jan 8, 2025 · 216f754 · 216f754
2 parents 6f514af + 3a52bb7
commit 216f754
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,12 +4,25 @@ 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).
 
-#### [v5.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v4.4.2...v5.0.0-0)
+#### [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)
+
+#### [v5.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v4.4.3...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.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/example/src/pages/Buttons.tsx b/example/src/pages/Buttons.tsx
@@ -466,6 +466,18 @@ export const Buttons = () => (
         />
       </View>
     </ComponentViewerBox>
+    <ComponentViewerBox name="ButtonLink · Stress test">
+      <View style={{ alignSelf: "center" }}>
+        <ButtonLink
+          textAlign="center"
+          /* Don't set limits on maximum number of lines */
+          numberOfLines={0}
+          accessibilityHint="Tap to trigger test alert"
+          label={"Primary button (centered) with a very looong text"}
+          onPress={onButtonPress}
+        />
+      </View>
+    </ComponentViewerBox>
     <ComponentViewerBox name="ButtonLink · Primary, disabled">
       <View>
         <ButtonLink
@@ -531,9 +543,8 @@ export const Buttons = () => (
           </View>
         </View>
       </ComponentViewerBox>
-
       <ComponentViewerBox
-        name="ButtonLink · Contrast, disabled"
+        name="ButtonLink · Primary, disabled"
         colorMode="dark"
         last
       >

diff --git a/src/components/buttons/ButtonLink.tsx b/src/components/buttons/ButtonLink.tsx
@@ -1,5 +1,10 @@
 import React, { forwardRef } from "react";
-import { GestureResponderEvent, Pressable, View } from "react-native";
+import {
+  GestureResponderEvent,
+  Pressable,
+  View,
+  TextStyle
+} from "react-native";
 import Animated, {
   interpolateColor,
   useAnimatedProps,
@@ -21,7 +26,11 @@ import {
   IOIcons,
   IconClassComponent
 } from "../icons";
-import { IOText, buttonTextFontSize } from "../typography";
+import {
+  IOText,
+  buttonTextFontSize,
+  buttonTextLineHeight
+} from "../typography";
 
 export type ColorButtonLink = "primary" | "contrast";
 
@@ -35,6 +44,8 @@ export type ButtonLinkProps = WithTestID<{
   // Accessibility
   accessibilityLabel?: string;
   accessibilityHint?: string;
+  numberOfLines?: number;
+  textAlign?: TextStyle["textAlign"];
   // Events
   onPress: (event: GestureResponderEvent) => void;
 }>;
@@ -82,6 +93,8 @@ export const ButtonLink = forwardRef<View, ButtonLinkProps>(
       onPress,
       accessibilityLabel,
       accessibilityHint,
+      numberOfLines = 1,
+      textAlign = "auto",
       testID
     },
     ref
@@ -184,12 +197,14 @@ export const ButtonLink = forwardRef<View, ButtonLinkProps>(
             font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
             weight={"Semibold"}
             size={buttonTextFontSize}
-            style={
+            lineHeight={buttonTextLineHeight}
+            style={[
               disabled
                 ? { color: mapColorStates[color]?.label?.disabled }
-                : { ...pressedColorLabelAnimationStyle }
-            }
-            numberOfLines={1}
+                : { ...pressedColorLabelAnimationStyle },
+              { textAlign }
+            ]}
+            numberOfLines={numberOfLines}
             ellipsizeMode="tail"
           >
             {label}

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,
@@ -130,6 +130,17 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
       useScaleAnimation();
     const reducedMotion = useReducedMotion();
 
+    /* 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
@@ -197,7 +208,9 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
           {loading && (
             <Animated.View
               style={IOButtonStyles.buttonInner}
-              entering={enterTransitionInnerContentSmall}
+              entering={
+                isMounted.current ? enterTransitionInnerContentSmall : undefined
+              }
               exiting={exitTransitionInnerContent}
             >
               <LoadingSpinner color={foregroundColor} />
@@ -213,7 +226,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
@@ -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",
+            },
+          ],
         ]
       }
     >
@@ -300,7 +305,6 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
     }
   >
     <View
-      entering={[Function]}
       style={
         [
           {
@@ -833,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",
+            },
+          ],
         ]
       }
     >
@@ -1040,7 +1049,6 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
     }
   >
     <View
-      entering={[Function]}
       style={
         [
           {

diff --git a/src/components/typography/ButtonText.tsx b/src/components/typography/ButtonText.tsx
@@ -1,12 +1,15 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface } from "../../core";
+import { IOColors, useIONewTypeface } from "../../core";
 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";
 const fontName: IOFontFamily = "Titillio";
 const legacyFontName: IOFontFamily = "TitilliumSansPro";
 
@@ -22,10 +25,10 @@ export const ButtonText = forwardRef<View, TypographicStyleProps>(
       font: newTypefaceEnabled ? fontName : legacyFontName,
       weight: "Semibold",
       size: buttonTextFontSize,
-      lineHeight: 20,
+      lineHeight: buttonTextLineHeight,
       /* Needed to render `ButtonOutline` and`ButtonLink` because they use
 `AnimatedText` for color transition through Reanimated */
-      color: customColor ?? "white"
+      color: customColor ?? defaultColor
     };
 
     return (