[IOAPPX-460] Fix NumberButton off-centre alignment when text is lar…

…ger (#378)
pagopa · Jan 9, 2025 · f401438 · f401438
1 parent 3a52bb7
commit f401438
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 22 deletions.
diff --git a/src/components/numberpad/NumberButton.tsx b/src/components/numberpad/NumberButton.tsx
@@ -12,7 +12,7 @@ import {
   useIOExperimentalDesign
 } from "../../core";
 import { useScaleAnimation } from "../../hooks";
-import { H3 } from "../typography";
+import { IOText } from "../typography";
 
 type NumberButtonVariantType = "light" | "dark";
 
@@ -111,7 +111,18 @@ export const NumberButton = memo(
             !reducedMotion && scaleAnimatedStyle
           ]}
         >
-          <H3 color={colors.foreground}>{number}</H3>
+          <IOText
+            size={22}
+            font={isExperimental ? "Titillio" : "TitilliumSansPro"}
+            weight="Semibold"
+            color={colors.foreground}
+            style={{
+              // Additional prop for Android
+              textAlignVertical: "center"
+            }}
+          >
+            {number}
+          </IOText>
         </Animated.View>
       </Pressable>
     );

diff --git a/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap b/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap
@@ -93,7 +93,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -104,7 +103,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -174,7 +176,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -185,7 +186,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -255,7 +259,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -266,7 +269,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -352,7 +358,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -363,7 +368,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -433,7 +441,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -444,7 +451,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -514,7 +524,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -525,7 +534,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -611,7 +623,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -622,7 +633,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -692,7 +706,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -703,7 +716,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -773,7 +789,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -784,7 +799,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -1011,7 +1029,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -1022,7 +1039,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }