[IOAPPX-293] Uniform spacing between list items, modules, and selecti…

…on components (#259) ## Short description This PR unifies the spacing between different components: list items, modules, and selection components. This change was made to avoid alignment inconsistencies when using different components on the same screen. ## List of changes proposed in this pull request - Update spacing in the `ModuleCredential` and `ModuleNavigation` components - Update spacing in all the `ListItem…` components - Update spacing in all the `Selection…` components - Update spacing in the `Alert` component ### Preview <img src="https://github.com/pagopa/io-app-design-system/assets/1255491/2e52f0c9-b1ba-452f-b992-e3da9efd1f82" width="320" /> As you can see in the screenshot above, there was a different spacing between the `ListItem...` and `Selection` components (check the spacing between the icon and the text). This PR fixes that. ## How to test 1. Launch the example app 2. Go to the relative pages: **Modules**, **List Items**, **Selection** and **Alert**
pagopa · May 10, 2024 · 1f39aae · 1f39aae
1 parent f10a7e1
commit 1f39aae
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 35 deletions.
diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx
@@ -14,7 +14,7 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import { useIOExperimentalDesign } from "../../core";
+import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
 import { IOScaleValues, IOSpringValues } from "../../core/IOAnimations";
 import {
   IOColors,
@@ -27,7 +27,7 @@ import { IOStyles } from "../../core/IOStyles";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
-import { HSpacer, VSpacer } from "../spacer";
+import { VSpacer } from "../spacer";
 import { H4 } from "../typography/H4";
 import { Label } from "../typography/Label";
 
@@ -163,12 +163,13 @@ export const Alert = ({
 
   const renderMainBlock = () => (
     <>
-      <Icon
-        name={mapVariantStates[variant].icon}
-        size={iconSize}
-        color={mapVariantStates[variant].foreground}
-      />
-      <HSpacer />
+      <View style={{ marginRight: IOVisualCostants.iconMargin }}>
+        <Icon
+          name={mapVariantStates[variant].icon}
+          size={iconSize}
+          color={mapVariantStates[variant].foreground}
+        />
+      </View>
       <View style={IOStyles.flex}>
         {title && (
           <>

diff --git a/src/components/listitems/ListItemInfo.tsx b/src/components/listitems/ListItemInfo.tsx
@@ -133,7 +133,7 @@ export const ListItemInfo = ({
     >
       <View style={IOListItemStyles.listItemInner}>
         {icon && (
-          <View style={{ marginRight: IOListItemVisualParams.actionMargin }}>
+          <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
             <Icon
               name={icon}
               color="grey-450"

diff --git a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap
@@ -437,7 +437,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
       <View
         style={
           {
-            "marginLeft": 16,
+            "marginLeft": 12,
           }
         }
       >
@@ -745,7 +745,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
       <View
         style={
           {
-            "marginRight": 16,
+            "marginRight": 12,
           }
         }
       >
@@ -851,7 +851,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
       <View
         style={
           {
-            "marginLeft": 16,
+            "marginLeft": 12,
           }
         }
       >
@@ -1605,7 +1605,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemTransaction S
     <View
       style={
         {
-          "marginRight": 16,
+          "marginRight": 12,
         }
       }
     >
@@ -1694,7 +1694,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemTransaction S
     <View
       style={
         {
-          "marginLeft": 16,
+          "marginLeft": 12,
         }
       }
     >
@@ -2232,7 +2232,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
       <View
         style={
           {
-            "marginLeft": 16,
+            "marginLeft": 12,
           }
         }
       >
@@ -2540,7 +2540,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
       <View
         style={
           {
-            "marginRight": 16,
+            "marginRight": 12,
           }
         }
       >
@@ -2646,7 +2646,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
       <View
         style={
           {
-            "marginLeft": 16,
+            "marginLeft": 12,
           }
         }
       >
@@ -3400,7 +3400,7 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
     <View
       style={
         {
-          "marginRight": 16,
+          "marginRight": 12,
         }
       }
     >
@@ -3489,7 +3489,7 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
     <View
       style={
         {
-          "marginLeft": 16,
+          "marginLeft": 12,
         }
       }
     >

diff --git a/src/components/modules/ModuleCredential.tsx b/src/components/modules/ModuleCredential.tsx
@@ -12,12 +12,12 @@ import {
   IOModuleStyles,
   IOSelectionListItemVisualParams,
   IOStyles,
+  IOVisualCostants,
   useIOTheme
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
-import { HSpacer } from "../spacer";
 import { LabelSmallAlt } from "../typography";
 import {
   PressableModuleBase,
@@ -51,7 +51,7 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
   const { icon, image, label, onPress, badge, ...pressableProps } = props;
 
   const iconComponent = (
-    <>
+    <View style={{ marginRight: IOVisualCostants.iconMargin }}>
       {icon && <Icon name={icon} size={24} color="grey-300" />}
       {image && (
         <Image
@@ -60,13 +60,13 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
           accessibilityIgnoresInvertColors={true}
         />
       )}
-    </>
+    </View>
   );
 
   return (
     <PressableModuleBase {...pressableProps} onPress={onPress}>
-      <View>{iconComponent}</View>
-      <View style={{ flexGrow: 1, flexShrink: 1, paddingHorizontal: 8 }}>
+      {(icon || image) && iconComponent}
+      <View style={{ flexGrow: 1, flexShrink: 1, paddingRight: 8 }}>
         <LabelSmallAlt
           color="blueIO-500"
           numberOfLines={2}
@@ -92,8 +92,9 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
 const ModuleCredentialSkeleton = () => (
   <View style={IOModuleStyles.button}>
     <View style={[IOStyles.row, IOStyles.alignCenter]}>
-      <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
-      <HSpacer size={8} />
+      <View style={{ marginRight: IOVisualCostants.iconMargin }}>
+        <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
+      </View>
       <Placeholder.Box animate="fade" width={96} height={19} radius={8} />
     </View>
     <Placeholder.Box animate="fade" width={64} height={22} radius={8} />

diff --git a/src/components/modules/ModuleNavigation.tsx b/src/components/modules/ModuleNavigation.tsx
@@ -12,6 +12,7 @@ import {
   IOModuleStyles,
   IOSelectionListItemVisualParams,
   IOStyles,
+  IOVisualCostants,
   useIOTheme
 } from "../../core";
 import { WithTestID } from "../../utils/types";
@@ -53,7 +54,7 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
     props;
 
   const iconComponent = (
-    <>
+    <View style={{ marginRight: IOVisualCostants.iconMargin }}>
       {icon && <Icon name={icon} size={24} color="grey-300" />}
       {image && (
         <Image
@@ -62,13 +63,13 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
           accessibilityIgnoresInvertColors={true}
         />
       )}
-    </>
+    </View>
   );
 
   return (
     <PressableModuleBase {...pressableProps} onPress={onPress}>
-      <View>{iconComponent}</View>
-      <View style={{ flexGrow: 1, flexShrink: 1, paddingHorizontal: 8 }}>
+      {(icon || image) && iconComponent}
+      <View style={{ flexGrow: 1, flexShrink: 1, paddingRight: 8 }}>
         <LabelSmallAlt
           color="blueIO-500"
           numberOfLines={2}
@@ -96,8 +97,10 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
 const ModuleNavigationSkeleton = () => (
   <View style={IOModuleStyles.button}>
     <View style={[IOStyles.row, IOStyles.alignCenter]}>
-      <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
-      <View style={{ paddingHorizontal: 8 }}>
+      <View style={{ marginRight: IOVisualCostants.iconMargin }}>
+        <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
+      </View>
+      <View style={{ paddingRight: 8 }}>
         <Placeholder.Box animate="fade" width={96} height={19} radius={8} />
         <VSpacer size={4} />
         <Placeholder.Box animate="fade" width={180} height={16} radius={8} />

diff --git a/src/core/IOStyles.ts b/src/core/IOStyles.ts
@@ -26,6 +26,7 @@ interface IOVisualCostants {
   iconContainedSizeDefault: number;
   scrollDownButtonRight: number;
   scrollDownButtonBottom: number;
+  iconMargin: IOSpacingScale;
 }
 
 export const IOVisualCostants: IOVisualCostants = {
@@ -37,7 +38,8 @@ export const IOVisualCostants: IOVisualCostants = {
   avatarRadiusSizeMedium: 12,
   iconContainedSizeDefault: 44,
   scrollDownButtonRight: 24,
-  scrollDownButtonBottom: 24
+  scrollDownButtonBottom: 24,
+  iconMargin: 12
 };
 
 export const IOStyles = StyleSheet.create({
@@ -269,7 +271,7 @@ interface IOListItemVisualParams {
 export const IOListItemVisualParams: IOListItemVisualParams = {
   paddingVertical: 12,
   paddingHorizontal: IOVisualCostants.appMarginDefault,
-  iconMargin: 16,
+  iconMargin: IOVisualCostants.iconMargin,
   actionMargin: 16,
   iconSize: 24,
   chevronSize: 24
@@ -368,7 +370,7 @@ export const IOSelectionListItemVisualParams: IOSelectionListItemVisualParams =
   {
     paddingVertical: 16,
     paddingHorizontal: IOVisualCostants.appMarginDefault,
-    iconMargin: 8,
+    iconMargin: IOVisualCostants.iconMargin,
     iconSize: 24,
     actionMargin: 8,
     descriptionMargin: 4