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](pagopa/io-app#6561 (review))) ## 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
pagopa · Jan 7, 2025 · 08f56c9 · 08f56c9
1 parent 58ea9e9
commit 08f56c9
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 15 deletions.
diff --git a/example/src/pages/Buttons.tsx b/example/src/pages/Buttons.tsx
@@ -477,12 +477,25 @@ export const Buttons = () => {
 
         <View style={{ alignSelf: "center" }}>
           <ButtonLink
+            textAlign="center"
             accessibilityHint="Tap to trigger test alert"
             label={"Primary button (centered)"}
             onPress={onButtonPress}
           />
         </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

diff --git a/src/components/buttons/ButtonLink.tsx b/src/components/buttons/ButtonLink.tsx
@@ -1,5 +1,10 @@
 import React, { forwardRef, useMemo } from "react";
-import { GestureResponderEvent, Pressable, View } from "react-native";
+import {
+  GestureResponderEvent,
+  Pressable,
+  View,
+  TextStyle
+} from "react-native";
 import Animated, {
   interpolateColor,
   useAnimatedStyle,
@@ -20,7 +25,11 @@ import {
   IOIcons,
   IconClassComponent
 } from "../icons";
-import { IOText, buttonTextFontSize } from "../typography";
+import {
+  IOText,
+  buttonTextFontSize,
+  buttonTextLineHeight
+} from "../typography";
 
 export type ColorButtonLink = "primary" | "contrast";
 
@@ -34,6 +43,8 @@ export type ButtonLinkProps = WithTestID<{
   // Accessibility
   accessibilityLabel?: string;
   accessibilityHint?: string;
+  numberOfLines?: number;
+  textAlign?: TextStyle["textAlign"];
   // Events
   onPress: (event: GestureResponderEvent) => void;
 }>;
@@ -103,6 +114,8 @@ export const ButtonLink = forwardRef<View, ButtonLinkProps>(
       onPress,
       accessibilityLabel,
       accessibilityHint,
+      numberOfLines = 1,
+      textAlign = "auto",
       testID
     },
     ref
@@ -187,12 +200,14 @@ export const ButtonLink = forwardRef<View, ButtonLinkProps>(
             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
@@ -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
@@ -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<View, TypographicStyleProps>(
       font: isExperimental ? fontName : legacyFontName,
       weight: "Semibold",
       size: buttonTextFontSize,
-      lineHeight: 20,
+      lineHeight: buttonTextLineHeight,
       color: customColor ?? defaultColor
     };