Merge branch 'main' into IOAPPX-449-remove-size-prop-banner

pagopa · Jan 8, 2025 · 250873c · 250873c
2 parents be13c5e + 3a52bb7
commit 250873c
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,18 +4,27 @@ 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
 
 - 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
@@ -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/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",

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
     };