fix(Cross): [IOAPPX-326] Fix bug on Android when using SemiBold fon…

…t weight (#5878) > [!warning] > This PR depends on: > * pagopa/io-app-design-system#293 ## Short description This PR fixes a **critical** UI bug on Android when using the `SemiBold` font weight. The new _**Titillium Sans Pro**_ uses `Semibold` as a font attribute, while the previous _**Titillium Web**_ fonts used `SemiBold`. Android didn't handle this edge case and rendered everything with the fallback system font. ## List of changes proposed in this pull request - Replace `SemiBold` font weight attribute with `Semibold` in all the typographic styles ## How to test 1. Launch the app with an Android physical or virtual device 2. Check **Typography** screen or everything else in the app --------- Co-authored-by: Cristiano Tofani <[email protected]>
pagopa · Jun 20, 2024 · 169813a · 169813a
1 parent 4b00fd0
commit 169813a
Show file tree

Hide file tree

Showing 181 changed files with 4,697 additions and 4,559 deletions.
diff --git a/package.json b/package.json
@@ -100,7 +100,7 @@
   "dependencies": {
     "@babel/plugin-transform-regenerator": "^7.18.6",
     "@gorhom/bottom-sheet": "^4.1.5",
-    "@pagopa/io-app-design-system": "1.39.2",
+    "@pagopa/io-app-design-system": "1.39.4",
     "@pagopa/io-pagopa-commons": "^3.1.0",
     "@pagopa/io-react-native-crypto": "^0.3.0",
     "@pagopa/io-react-native-http-client": "1.0.2",

diff --git a/ts/components/AppVersion.tsx b/ts/components/AppVersion.tsx
@@ -33,7 +33,7 @@ const AppVersion = ({ onPress, testID }: AppVersion) => {
       accessibilityLabel={appVersionText}
     >
       <View style={[styles.versionButton, IOStyles.row, IOStyles.alignCenter]}>
-        <LabelSmall numberOfLines={1} weight="SemiBold" color="grey-650">
+        <LabelSmall numberOfLines={1} weight="Semibold" color="grey-650">
           {appVersionText}
         </LabelSmall>
       </View>

diff --git a/ts/components/DebugInfoOverlay.tsx b/ts/components/DebugInfoOverlay.tsx
@@ -1,5 +1,12 @@
 import * as React from "react";
-import { StyleSheet, Pressable, SafeAreaView, View, Text } from "react-native";
+import {
+  StyleSheet,
+  Pressable,
+  SafeAreaView,
+  View,
+  Text,
+  Platform
+} from "react-native";
 import { connect } from "react-redux";
 import { useState } from "react";
 import { widthPercentageToDP } from "react-native-responsive-screen";
@@ -27,15 +34,15 @@ const debugItemBorderColor = hexToRgba(IOColors.black, 0.1);
 const styles = StyleSheet.create({
   versionContainer: {
     ...StyleSheet.absoluteFillObject,
-    top: -8,
+    top: Platform.OS === "android" ? 0 : -8,
     justifyContent: "flex-start",
     alignItems: "center",
     zIndex: 1000
   },
   versionText: {
     fontSize: 12,
     color: IOColors["grey-850"],
-    ...makeFontStyleObject("SemiBold")
+    ...makeFontStyleObject("Semibold")
   },
   screenDebugText: {
     fontSize: 12,

diff --git a/ts/components/PagoPATestIndicator.tsx b/ts/components/PagoPATestIndicator.tsx
@@ -28,7 +28,7 @@ const styles = StyleSheet.create({
     fontSize: 9,
     textTransform: "uppercase",
     color: IOColors["grey-850"],
-    ...makeFontStyleObject("SemiBold")
+    ...makeFontStyleObject("Semibold")
   }
 });
 

diff --git a/ts/components/__tests__/__snapshots__/OrganizationHeader.test.tsx.snap b/ts/components/__tests__/__snapshots__/OrganizationHeader.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`OrganizationHeader should match the snapshot 1`] = `
       allowFontScaling={false}
       color="bluegreyDark"
       defaultColor="bluegreyDark"
-      defaultWeight="SemiBold"
+      defaultWeight="Semibold"
       font="TitilliumSansPro"
       fontStyle={
         Object {
@@ -43,7 +43,7 @@ exports[`OrganizationHeader should match the snapshot 1`] = `
           },
         ]
       }
-      weight="SemiBold"
+      weight="Semibold"
     >
       Universala Esperanto-Asocio
     </Text>

diff --git a/ts/components/core/IOBadge.tsx b/ts/components/core/IOBadge.tsx
@@ -92,7 +92,7 @@ const styles = StyleSheet.create({
   },
   label: {
     alignSelf: "center",
-    ...makeFontStyleObject("SemiBold")
+    ...makeFontStyleObject("Semibold")
   },
   labelSizeDefault: {
     fontSize: 14,

diff --git a/ts/components/core/README.md b/ts/components/core/README.md
@@ -5,11 +5,11 @@
 
 ## Fonts
 
-The application uses the font _Titillium Sans Pro_. Fonts are handled differently than Android and iOS. To use the font, `TitilliumSansPro-SemiBoldItalic` example, you must apply the following properties for Android:
+The application uses the font _Titillium Sans Pro_. Fonts are handled differently than Android and iOS. To use the font, `TitilliumSansPro-SemiboldItalic` example, you must apply the following properties for Android:
 
 ```css
 {
-  fontFamily: 'TitilliumSansPro-SemiBoldItalic'
+  fontFamily: 'TitilliumSansPro-SemiboldItalic'
 }
 ```
 

diff --git a/ts/components/core/__mock__/fontMocks.ts b/ts/components/core/__mock__/fontMocks.ts
@@ -2,7 +2,7 @@ import { IOFontWeight } from "../fonts";
 
 export const fontWeightsMocks: ReadonlyArray<IOFontWeight> = [
   "Bold",
-  "SemiBold",
+  "Semibold",
   "Regular",
   "Light"
 ];

diff --git a/ts/components/core/fonts.ts b/ts/components/core/fonts.ts
@@ -8,7 +8,7 @@ import { Platform } from "react-native";
 
 export type IOFontFamily = keyof typeof fonts;
 
-const weights = ["Light", "Regular", "SemiBold", "Bold"] as const;
+const weights = ["Light", "Regular", "Semibold", "Bold"] as const;
 export type IOFontWeight = (typeof weights)[number];
 
 const weightValues = ["300", "400", "600", "700"] as const;
@@ -49,7 +49,7 @@ const fonts = {
 export const fontWeights: Record<IOFontWeight, FontWeightValue> = {
   Light: "300",
   Regular: "400",
-  SemiBold: "600",
+  Semibold: "600",
   Bold: "700"
 };
 

diff --git a/ts/components/core/typography/Body.tsx b/ts/components/core/typography/Body.tsx
@@ -9,7 +9,7 @@ type PartialAllowedColors = Extract<
   "bluegreyDark" | "white" | "blue" | "bluegrey" | "bluegreyLight"
 >;
 type AllowedColors = PartialAllowedColors | IOTheme["textBody-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold">;
+type AllowedWeight = Extract<IOFontWeight, "Regular" | "Semibold">;
 
 type OwnProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>

diff --git a/ts/components/core/typography/ComposedBodyFromArray.tsx b/ts/components/core/typography/ComposedBodyFromArray.tsx
@@ -13,7 +13,7 @@ type PartialAllowedColors = Extract<
   "bluegreyDark" | "white" | "blue" | "bluegrey" | "bluegreyLight"
 >;
 type AllowedColors = PartialAllowedColors | IOTheme["textBody-default"];
-type AllowedWeight = IOFontWeight | "Regular" | "SemiBold";
+type AllowedWeight = IOFontWeight | "Regular" | "Semibold";
 
 export type BodyProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors> & {

diff --git a/ts/components/core/typography/H2.tsx b/ts/components/core/typography/H2.tsx
@@ -16,7 +16,7 @@ type AllowedColors =
   | PartialAllowedColors
   | IOColorsStatusForeground
   | IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "SemiBold">;
+type AllowedWeight = Extract<IOFontWeight, "Bold" | "Semibold">;
 
 type OwnProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>

diff --git a/ts/components/core/typography/H3.tsx b/ts/components/core/typography/H3.tsx
@@ -4,8 +4,8 @@ import { IOFontFamily, IOFontWeight } from "../fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, RequiredTypographyProps } from "./common";
 
-// these colors are allowed only when the weight is SemiBold
-type AllowedSemiBoldColors = Extract<
+// these colors are allowed only when the weight is Semibold
+type AllowedSemiboldColors = Extract<
   IOColors,
   | "bluegreyDark"
   | "bluegreyLight"
@@ -31,16 +31,16 @@ type AllowedBoldColors = Extract<
 // all the possible colors
 type AllowedColors =
   | AllowedBoldColors
-  | AllowedSemiBoldColors
+  | AllowedSemiboldColors
   | IOTheme["textHeading-default"];
 
 // all the possible weight
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "SemiBold">;
+type AllowedWeight = Extract<IOFontWeight, "Bold" | "Semibold">;
 
-// these are the properties allowed only if weight is undefined or SemiBold
-type SemiBoldProps = {
-  weight?: Extract<IOFontWeight, "SemiBold">;
-  color?: AllowedSemiBoldColors | IOTheme["textHeading-default"];
+// these are the properties allowed only if weight is undefined or Semibold
+type SemiboldProps = {
+  weight?: Extract<IOFontWeight, "Semibold">;
+  color?: AllowedSemiboldColors | IOTheme["textHeading-default"];
 };
 
 // these are the properties allowed only if weight is Bold
@@ -49,7 +49,7 @@ type BoldProps = {
   color?: AllowedBoldColors | IOTheme["textHeading-default"];
 };
 
-type BoldKindProps = SemiBoldProps | BoldProps;
+type BoldKindProps = SemiboldProps | BoldProps;
 
 type OwnProps = ExternalTypographyProps<BoldKindProps>;
 
@@ -68,11 +68,11 @@ export const calculateH3WeightColor = (
   weight?: AllowedWeight,
   color?: AllowedColors
 ): RequiredTypographyProps<AllowedWeight, AllowedColors> => {
-  const newWeight = weight ?? "SemiBold";
+  const newWeight = weight ?? "Semibold";
   const newColor =
     color !== undefined
       ? color
-      : newWeight === "SemiBold"
+      : newWeight === "Semibold"
       ? "bluegreyDark"
       : "white";
   return {
@@ -83,7 +83,7 @@ export const calculateH3WeightColor = (
 
 /**
  * Typography component to render `H3` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `SemiBold`, color: `bluegreyDark`
+ * default values(if not defined) are weight: `Semibold`, color: `bluegreyDark`
  * @param props
  * @constructor
  */

diff --git a/ts/components/core/typography/H4.tsx b/ts/components/core/typography/H4.tsx
@@ -10,8 +10,8 @@ type AllowedBoldColors = Extract<
   "bluegreyDark" | "blue" | "white" | "greenLight"
 >;
 
-// these colors are allowed only when the weight is SemiBold
-type AllowedSemiBoldColors = Extract<
+// these colors are allowed only when the weight is Semibold
+type AllowedSemiboldColors = Extract<
   IOColors,
   "white" | "bluegreyDark" | "blue" | "bluegreyLight"
 >;
@@ -25,31 +25,31 @@ type AllowedRegularColors = Extract<
 // all the possible colors
 type AllowedColors =
   | AllowedBoldColors
-  | AllowedSemiBoldColors
+  | AllowedSemiboldColors
   | AllowedRegularColors;
 
 // all the possible weight
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "SemiBold" | "Regular">;
+type AllowedWeight = Extract<IOFontWeight, "Bold" | "Semibold" | "Regular">;
 
 // these are the properties allowed only if weight is Bold or undefined
 type BoldProps = {
   weight?: Extract<IOFontWeight, "Bold">;
   color?: AllowedBoldColors;
 };
 
-// these are the properties allowed only if weight is undefined or SemiBold
-type SemiBoldProps = {
-  weight: Extract<IOFontWeight, "SemiBold">;
-  color?: AllowedSemiBoldColors;
+// these are the properties allowed only if weight is undefined or Semibold
+type SemiboldProps = {
+  weight: Extract<IOFontWeight, "Semibold">;
+  color?: AllowedSemiboldColors;
 };
 
-// these are the properties allowed only if weight is undefined or SemiBold
+// these are the properties allowed only if weight is undefined or Semibold
 type RegularProps = {
   weight: Extract<IOFontWeight, "Regular">;
   color?: AllowedRegularColors;
 };
 
-type BoldKindProps = SemiBoldProps | BoldProps | RegularProps;
+type BoldKindProps = SemiboldProps | BoldProps | RegularProps;
 
 export type OwnProps = ExternalTypographyProps<BoldKindProps>;
 
@@ -74,7 +74,7 @@ export const calculateH4WeightColor = (
       ? color
       : newWeight === "Bold"
       ? "bluegreyDark"
-      : newWeight === "SemiBold"
+      : newWeight === "Semibold"
       ? "white"
       : "bluegreyDark";
   return {

diff --git a/ts/components/core/typography/H5.tsx b/ts/components/core/typography/H5.tsx
@@ -4,8 +4,8 @@ import { IOFontFamily, IOFontWeight } from "../fonts";
 import { ExternalTypographyProps } from "./common";
 import { useTypographyFactory } from "./Factory";
 
-// these colors are allowed only when the weight is SemiBold
-type AllowedSemiBoldColors = Extract<
+// these colors are allowed only when the weight is Semibold
+type AllowedSemiboldColors = Extract<
   IOColors,
   "bluegreyDark" | "bluegrey" | "bluegreyLight" | "blue" | "white" | "red"
 >;
@@ -23,15 +23,15 @@ type AllowedRegularColors = Extract<
 >;
 
 // all the possible colors
-type AllowedColors = AllowedSemiBoldColors | AllowedRegularColors;
+type AllowedColors = AllowedSemiboldColors | AllowedRegularColors;
 
 // all the possible weight
-type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
+type AllowedWeight = Extract<IOFontWeight, "Semibold" | "Regular">;
 
-// these are the properties allowed only if weight is undefined or SemiBold
-type SemiBoldProps = {
-  weight?: Extract<IOFontWeight, "SemiBold">;
-  color?: AllowedSemiBoldColors;
+// these are the properties allowed only if weight is undefined or Semibold
+type SemiboldProps = {
+  weight?: Extract<IOFontWeight, "Semibold">;
+  color?: AllowedSemiboldColors;
 };
 
 // these are the properties allowed only if weight is Bold
@@ -40,18 +40,18 @@ type RegularProps = {
   color?: AllowedRegularColors;
 };
 
-type BoldKindProps = SemiBoldProps | RegularProps;
+type BoldKindProps = SemiboldProps | RegularProps;
 
 type OwnProps = ExternalTypographyProps<BoldKindProps>;
 
 const fontName: IOFontFamily = "TitilliumSansPro";
 export const h5FontSize = 14;
 export const h5DefaultColor: AllowedColors = "bluegreyDark";
-export const h5DefaultWeight: AllowedWeight = "SemiBold";
+export const h5DefaultWeight: AllowedWeight = "Semibold";
 
 /**
  * Typography component to render `H5` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `SemiBold`, color: `bluegreyDark`
+ * default values(if not defined) are weight: `Semibold`, color: `bluegreyDark`
  * @param props
  * @constructor
  */

diff --git a/ts/components/core/typography/Label.tsx b/ts/components/core/typography/Label.tsx
@@ -13,7 +13,7 @@ type PartialAllowedColors = Extract<
   "blue" | "bluegrey" | "bluegreyDark" | "white" | "red"
 >;
 type AllowedColors = PartialAllowedColors | IOColorsStatusForeground;
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "SemiBold">;
+type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "Semibold">;
 type LabelProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 > & { fontSize?: FontSize };

diff --git a/ts/components/core/typography/LabelSmall.tsx b/ts/components/core/typography/LabelSmall.tsx
@@ -15,7 +15,7 @@ type PartialAllowedColors = Extract<
   | "grey-200"
 >;
 type AllowedColors = PartialAllowedColors | IOTheme["textBody-tertiary"];
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "SemiBold">;
+type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "Semibold">;
 type FontSize = "regular" | "small";
 type AllowedFontSize = { fontSize?: FontSize };
 type OwnProps = ExternalTypographyProps<

diff --git a/ts/components/core/typography/Link.tsx b/ts/components/core/typography/Link.tsx
@@ -5,7 +5,7 @@ import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type AllowedColors = IOColors;
-type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Bold">;
+type AllowedWeight = Extract<IOFontWeight, "Semibold" | "Bold">;
 
 type OwnProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
@@ -14,11 +14,11 @@ type OwnProps = ExternalTypographyProps<
 const fontName: IOFontFamily = "TitilliumSansPro";
 const fontSize = 16;
 export const linkDefaultColor: AllowedColors = "blue";
-export const linkDefaultWeight: AllowedWeight = "SemiBold";
+export const linkDefaultWeight: AllowedWeight = "Semibold";
 
 /**
  * Typography component to render `Link` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `SemiBold`, color: `blue`
+ * default values(if not defined) are weight: `Semibold`, color: `blue`
  * @param props`
  * @constructor
  */

diff --git a/ts/components/core/typography/Monospace.tsx b/ts/components/core/typography/Monospace.tsx
@@ -5,7 +5,7 @@ import { ExternalTypographyProps, TypographyProps } from "./common";
 import { useTypographyFactory } from "./Factory";
 
 type AllowedColors = Extract<IOColors, "bluegreyDark" | "bluegrey">;
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold" | "Bold">;
+type AllowedWeight = Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
 
 type OwnProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>

diff --git a/ts/components/core/typography/__test__/ComposedBodyFromArray.test.tsx b/ts/components/core/typography/__test__/ComposedBodyFromArray.test.tsx
@@ -93,7 +93,7 @@ describe("ComposedBodyFromArray", () => {
     },
     {
       text: " weights",
-      weight: "SemiBold"
+      weight: "Semibold"
     }
   ] as Array<BodyProps>;
 });