From 39d72ab2eaa0df8245faaa5f66174f94367745f7 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Thu, 28 Nov 2024 10:22:19 +0100 Subject: [PATCH 1/4] Fix text size of `ListItemRadioWithAmount` --- .../listitems/ListItemRadioWithAmount.tsx | 44 ++++++------------- src/components/stack/Stack.tsx | 10 ++++- 2 files changed, 22 insertions(+), 32 deletions(-) diff --git a/src/components/listitems/ListItemRadioWithAmount.tsx b/src/components/listitems/ListItemRadioWithAmount.tsx index 70a61025..d8c562c5 100644 --- a/src/components/listitems/ListItemRadioWithAmount.tsx +++ b/src/components/listitems/ListItemRadioWithAmount.tsx @@ -1,11 +1,11 @@ import * as React from "react"; -import { StyleSheet, View } from "react-native"; +import { View } from "react-native"; import RNReactNativeHapticFeedback from "react-native-haptic-feedback"; import { IOColors, useIOTheme } from "../../core"; import { Icon } from "../icons"; import { AnimatedRadio } from "../radio/AnimatedRadio"; -import { HSpacer, VSpacer } from "../spacer"; -import { H6, BodySmall } from "../typography"; +import { HStack } from "../stack"; +import { BodySmall, H6 } from "../typography"; import { PressableListItemBase } from "./PressableListItemsBase"; export type ListItemRadioWithAmountProps = { @@ -55,45 +55,29 @@ export const ListItemRadioWithAmount = ({ }} > - +
{label} - +
{isSuggested && ( - <> - - - - - - {suggestReason} - - - + + + + {suggestReason} + + )} -
{formattedAmountString}
- - + ); }; - -const styles = StyleSheet.create({ - rowCenter: { - flexDirection: "row", - alignItems: "center" - } -}); diff --git a/src/components/stack/Stack.tsx b/src/components/stack/Stack.tsx index 9ad2a873..5cdd6de3 100644 --- a/src/components/stack/Stack.tsx +++ b/src/components/stack/Stack.tsx @@ -1,5 +1,5 @@ import React, { PropsWithChildren } from "react"; -import { View, ViewStyle } from "react-native"; +import { View, ViewProps, ViewStyle } from "react-native"; import { IOSpacer } from "../../core"; type AllowedStyleProps = Pick< @@ -7,10 +7,16 @@ type AllowedStyleProps = Pick< "alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap" | "width" >; +type A11YRelatedProps = Pick< + ViewProps, + "pointerEvents" | "accessibilityElementsHidden" | "importantForAccessibility" +>; + type Stack = PropsWithChildren<{ space?: IOSpacer; style?: AllowedStyleProps; -}>; +}> & + A11YRelatedProps; type BaseStack = Stack & { orientation: "vertical" | "horizontal"; From e95717e4a423aa6cde5011e8972840a830b29e4b Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Thu, 28 Nov 2024 10:36:34 +0100 Subject: [PATCH 2/4] Increase text size of `ListItemTransaction` --- src/components/listitems/ListItemAction.tsx | 2 +- src/components/listitems/ListItemTransaction.tsx | 8 ++------ src/components/typography/H6.tsx | 2 +- src/utils/fonts.ts | 2 +- 4 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/listitems/ListItemAction.tsx b/src/components/listitems/ListItemAction.tsx index ee18cf5a..50b80d47 100644 --- a/src/components/listitems/ListItemAction.tsx +++ b/src/components/listitems/ListItemAction.tsx @@ -135,7 +135,7 @@ export const ListItemAction = ({ /> )} - + {label} diff --git a/src/components/listitems/ListItemTransaction.tsx b/src/components/listitems/ListItemTransaction.tsx index 30a45c34..a32904e7 100644 --- a/src/components/listitems/ListItemTransaction.tsx +++ b/src/components/listitems/ListItemTransaction.tsx @@ -146,13 +146,9 @@ export const ListItemTransaction = ({ )} - +
{title} - +
{subtitle} diff --git a/src/components/typography/H6.tsx b/src/components/typography/H6.tsx index 4bf32f64..51565ee4 100644 --- a/src/components/typography/H6.tsx +++ b/src/components/typography/H6.tsx @@ -11,7 +11,7 @@ export const h6LineHeight = 24; const fontName: IOFontFamily = "Titillio"; // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 -const legacyFontSize: IOFontSize = 18; +const legacyFontSize: IOFontSize = 17; const legacyFontName: IOFontFamily = "TitilliumSansPro"; /** diff --git a/src/utils/fonts.ts b/src/utils/fonts.ts index 0b382afa..ed015e29 100644 --- a/src/utils/fonts.ts +++ b/src/utils/fonts.ts @@ -36,7 +36,7 @@ export type IOFontFamily = keyof typeof fonts; * Font Sizes */ const fontSizes = [12, 14, 16, 20, 22, 26, 28, 32] as const; -const fontSizesLegacy = [18, 28, 31, 35] as const; +const fontSizesLegacy = [17, 28, 31, 35] as const; const allFontSizes = [...new Set([...fontSizes, ...fontSizesLegacy])]; export type IOFontSize = (typeof allFontSizes)[number]; From bde10e56bc8591413a8c572f813b6d7da68023b2 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Thu, 28 Nov 2024 10:46:53 +0100 Subject: [PATCH 3/4] Update `jest` snapshots --- .../__snapshots__/banner.test.tsx.snap | 2 +- .../__snapshots__/listitem.test.tsx.snap | 118 +++++------------- .../__snapshots__/typography.test.tsx.snap | 2 +- 3 files changed, 34 insertions(+), 88 deletions(-) diff --git a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap index 1f2ff6b2..67666360 100644 --- a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap +++ b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap @@ -355,7 +355,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = ` { "color": "#031344", "fontFamily": "Titillium Sans Pro", - "fontSize": 18, + "fontSize": 17, "fontStyle": "normal", "fontWeight": "600", "lineHeight": 24, diff --git a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap index 39780df4..84d31395 100644 --- a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +++ b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap @@ -73,6 +73,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemAction Snapsh style={ { "flexGrow": 1, + "flexShrink": 1, } } > @@ -942,7 +943,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemRadioWithAmou > label - @@ -1033,13 +1029,6 @@ exports[`Test List Item Components - Experimental Enabled ListItemRadioWithAmou /> - @@ -1092,13 +1080,6 @@ exports[`Test List Item Components - Experimental Enabled ListItemRadioWithAmou > € 1.000,00 - @@ -1376,13 +1356,6 @@ exports[`Test List Item Components - Experimental Enabled ListItemRadioWithAmou > € 1.000,00 - @@ -1949,7 +1923,7 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = ` { "color": "#0E0F13", "fontFamily": "Titillium Sans Pro", - "fontSize": 18, + "fontSize": 17, "fontStyle": "normal", "fontWeight": "600", "lineHeight": 24, @@ -2071,7 +2045,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = ` { "color": "#0073E6", "fontFamily": "Titillium Sans Pro", - "fontSize": 18, + "fontSize": 17, "fontStyle": "normal", "fontWeight": "600", "lineHeight": 24, @@ -2238,7 +2212,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = ` { "color": "#0E0F13", "fontFamily": "Titillium Sans Pro", - "fontSize": 18, + "fontSize": 17, "fontStyle": "normal", "fontWeight": "600", "lineHeight": 24, @@ -2467,7 +2441,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = ` { "color": "#0E0F13", "fontFamily": "Titillium Sans Pro", - "fontSize": 18, + "fontSize": 17, "fontStyle": "normal", "fontWeight": "600", "lineHeight": 24, @@ -2629,7 +2603,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = ` > label - @@ -2720,13 +2689,6 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = ` /> - @@ -2769,7 +2730,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = ` { "color": "#0B3EE3", "fontFamily": "Titillium Sans Pro", - "fontSize": 18, + "fontSize": 17, "fontStyle": "normal", "fontWeight": "600", "lineHeight": 24, @@ -2779,13 +2740,6 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = ` > € 1.000,00 - @@ -3053,7 +3006,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = ` { "color": "#0B3EE3", "fontFamily": "Titillium Sans Pro", - "fontSize": 18, + "fontSize": 17, "fontStyle": "normal", "fontWeight": "600", "lineHeight": 24, @@ -3063,13 +3016,6 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = ` > € 1.000,00 - Date: Thu, 28 Nov 2024 10:59:48 +0100 Subject: [PATCH 4/4] Fix not passing props in the `Stack` component --- .../__test__/__snapshots__/listitem.test.tsx.snap | 12 ++++++++++++ src/components/stack/Stack.tsx | 4 +++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap index 84d31395..4caf5acb 100644 --- a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +++ b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap @@ -1052,6 +1052,9 @@ exports[`Test List Item Components - Experimental Enabled ListItemRadioWithAmou (