Merge branch 'main' into IOAPPX-428-refactor-scale-effect-reduce-motion

pagopa · Dec 6, 2024 · cdc6f47 · cdc6f47
2 parents cc0a5d6 + adf19d3
commit cdc6f47
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 118 deletions.
diff --git a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
@@ -361,7 +361,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/ListItemAction.tsx b/src/components/listitems/ListItemAction.tsx
@@ -79,7 +79,7 @@ export const ListItemAction = ({
               />
             </View>
           )}
-          <View style={{ flexGrow: 1 }}>
+          <View style={{ flexGrow: 1, flexShrink: 1 }}>
             <ButtonText color={mapForegroundColor[variant]}>{label}</ButtonText>
           </View>
         </Animated.View>

diff --git 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 "./PressableListItemBase";
 
 export type ListItemRadioWithAmountProps = {
@@ -56,45 +56,29 @@ export const ListItemRadioWithAmount = ({
       }}
     >
       <View style={{ flexShrink: 1 }}>
-        <BodySmall
-          weight="Semibold"
-          numberOfLines={1}
-          color={theme["textBody-default"]}
-        >
+        <H6 numberOfLines={1} color={theme["textBody-default"]}>
           {label}
-        </BodySmall>
+        </H6>
         {isSuggested && (
-          <>
-            <VSpacer size={4} />
-            <View style={styles.rowCenter}>
-              <Icon name="sparkles" size={16} color={suggestColor} />
-              <HSpacer size={4} />
-              <BodySmall weight="Regular" color={suggestColor}>
-                {suggestReason}
-              </BodySmall>
-            </View>
-          </>
+          <HStack space={4} style={{ alignItems: "center" }}>
+            <Icon name="sparkles" size={16} color={suggestColor} />
+            <BodySmall weight="Regular" color={suggestColor}>
+              {suggestReason}
+            </BodySmall>
+          </HStack>
         )}
       </View>
-      <View
+      <HStack
+        space={8}
         pointerEvents="none"
         accessibilityElementsHidden
         importantForAccessibility="no-hide-descendants"
-        style={{ flexDirection: "row" }}
       >
         <H6 color={theme["interactiveElem-default"]}>
           {formattedAmountString}
         </H6>
-        <HSpacer size={8} />
         <AnimatedRadio checked={selected ?? toggleValue} />
-      </View>
+      </HStack>
     </PressableListItemBase>
   );
 };
-
-const styles = StyleSheet.create({
-  rowCenter: {
-    flexDirection: "row",
-    alignItems: "center"
-  }
-});
diff --git a/src/components/listitems/ListItemTransaction.tsx b/src/components/listitems/ListItemTransaction.tsx
@@ -146,13 +146,9 @@ export const ListItemTransaction = ({
           </View>
         )}
         <View style={{ flexShrink: 1 }}>
-          <BodySmall
-            numberOfLines={numberOfLines}
-            color={theme["textBody-default"]}
-            weight="Semibold"
-          >
+          <H6 numberOfLines={numberOfLines} color={theme["textBody-default"]}>
             {title}
-          </BodySmall>
+          </H6>
           <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
             {subtitle}
           </BodySmall>