Merge branch 'main' into 5.x

pagopa · Jan 15, 2025 · c287b87 · c287b87
2 parents 61fc968 + db6e796
commit c287b87
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,13 +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.6](https://github.com/pagopa/io-app-design-system/compare/v5.0.0-2...v4.4.6)
+
+- [IOAPPX-462] Fix flickering behaviour in the `SearchInput` on iOS [`#379`](https://github.com/pagopa/io-app-design-system/pull/379)
+- [IOAPPX-460] Fix `NumberButton` off-centre alignment when text is larger [`#378`](https://github.com/pagopa/io-app-design-system/pull/378)
+- Revert "Fix flickering issue when text is bolder on iOS" [`a852bea`](https://github.com/pagopa/io-app-design-system/commit/a852bea8c9519b865c93b44cf69451f387d7627d)
+- Fix flickering issue when text is bolder on iOS [`9abbcea`](https://github.com/pagopa/io-app-design-system/commit/9abbcea891a92416f6a93dae1e3ebb9080f54bea)
+- chore: release 4.4.5 [`6e4f1b6`](https://github.com/pagopa/io-app-design-system/commit/6e4f1b65b0359e6a75971eddffa500facdd65790)
+
 #### [v5.0.0-2](https://github.com/pagopa/io-app-design-system/compare/v5.0.0-1...v5.0.0-2)
 
+> 8 January 2025
+
 - [IOAPPX-415] Remove the legacy UI + Add the new `useIONewTypeface` hook to manage new and legacy typography [`#345`](https://github.com/pagopa/io-app-design-system/pull/345)
 - [IOAPPX-459] Add the new `theme` and `typeface` icons [`#377`](https://github.com/pagopa/io-app-design-system/pull/377)
 - [IOAPPX-450] Remove `title` prop from `Alert` [`#370`](https://github.com/pagopa/io-app-design-system/pull/370)
 - Remove some variants of `Badge` [`#372`](https://github.com/pagopa/io-app-design-system/pull/372)
 - [IOAPPX-449] Remove `size` prop from `Banner` [`#369`](https://github.com/pagopa/io-app-design-system/pull/369)
+- chore: release 5.0.0-2 [`61fc968`](https://github.com/pagopa/io-app-design-system/commit/61fc968f11e726d2d8f26b3bc264285504714f4e)
 
 #### [v5.0.0-1](https://github.com/pagopa/io-app-design-system/compare/v5.0.0-0...v5.0.0-1)
 
@@ -22,14 +33,21 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - chore: release 5.0.0-1 [`7eba376`](https://github.com/pagopa/io-app-design-system/commit/7eba376ab3b8b695041c46f4777ae12d3d001f43)
 - chore: release 4.4.4 [`3a52bb7`](https://github.com/pagopa/io-app-design-system/commit/3a52bb766c40e79f178685fff0b05b7eb0ccdc36)
 
-#### [v5.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v4.4.4...v5.0.0-0)
+#### [v5.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v4.4.5...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.5](https://github.com/pagopa/io-app-design-system/compare/v4.4.4...v4.4.5)
+
+> 9 January 2025
+
+- [IOAPPX-460] Fix `NumberButton` off-centre alignment when text is larger [`#378`](https://github.com/pagopa/io-app-design-system/pull/378)
+- chore: release 4.4.5 [`6e4f1b6`](https://github.com/pagopa/io-app-design-system/commit/6e4f1b65b0359e6a75971eddffa500facdd65790)
+
 #### [v4.4.4](https://github.com/pagopa/io-app-design-system/compare/v4.4.3...v4.4.4)
 
 > 7 January 2025

diff --git a/src/components/numberpad/NumberButton.tsx b/src/components/numberpad/NumberButton.tsx
@@ -5,9 +5,13 @@ import Animated, {
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
-import { IOColors, IONumberPadButtonStyles } from "../../core";
+import {
+  IOColors,
+  IONumberPadButtonStyles,
+  useIONewTypeface
+} from "../../core";
 import { useScaleAnimation } from "../../hooks";
-import { H3 } from "../typography";
+import { IOText } from "../typography";
 
 type NumberButtonVariantType = "light" | "dark";
 
@@ -57,6 +61,7 @@ export const NumberButton = memo(
     const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
       useScaleAnimation("slight");
     const reducedMotion = useReducedMotion();
+    const { newTypefaceEnabled } = useIONewTypeface();
 
     // Interpolate animation values from `isPressed` values
     const pressedAnimationStyle = useAnimatedStyle(() => ({
@@ -88,7 +93,18 @@ export const NumberButton = memo(
             !reducedMotion && scaleAnimatedStyle
           ]}
         >
-          <H3 color={colorMap[variant].foreground}>{number}</H3>
+          <IOText
+            size={22}
+            font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
+            weight="Semibold"
+            color={colorMap[variant].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",
                 },
               ]
             }

diff --git a/src/components/searchInput/SearchInput.tsx b/src/components/searchInput/SearchInput.tsx
@@ -37,8 +37,12 @@ import {
   useIOTheme
 } from "../../core";
 import { IOFontSize, makeFontStyleObject } from "../../utils/fonts";
-import { ButtonLink } from "../buttons";
-import { IOIconSizeScale, Icon } from "../icons";
+import { Icon, IOIconSizeScale } from "../icons";
+import {
+  buttonTextFontSize,
+  buttonTextLineHeight,
+  IOText
+} from "../typography";
 
 /* Component visual attributes */
 const inputPaddingHorizontal: IOSpacingScale = 12;
@@ -287,7 +291,25 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
           onLayout={getCancelButtonWidth}
           style={[styles.cancelButton, cancelButtonAnimatedStyle]}
         >
-          <ButtonLink label={cancelButtonLabel} onPress={cancel} />
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={cancelButtonLabel}
+            onPress={cancel}
+          >
+            <IOText
+              color={theme["interactiveElem-default"]}
+              font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
+              weight={"Semibold"}
+              size={buttonTextFontSize}
+              lineHeight={buttonTextLineHeight}
+              numberOfLines={1}
+              accessible={false}
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+            >
+              {cancelButtonLabel}
+            </IOText>
+          </Pressable>
         </Animated.View>
       </Animated.View>
     );