@pagopa/io-app-design-system 5.4.0 → 5.5.0

package/src/components/alert/AlertEdgeToEdgeWrapper.tsx

@@ -1,7 +1,6 @@
 import React, { ComponentProps } from "react";
 import Animated, { LinearTransition } from "react-native-reanimated";
 import { WithTestID } from "../../utils/types";
-import { IOStyles } from "../../core";
 import { AlertEdgeToEdge } from "./AlertEdgeToEdge";
 
 type AlertEdgeToEdgeWrapperProps = React.PropsWithChildren<
@@ -15,7 +14,7 @@ export const AlertEdgeToEdgeWrapper = ({
 }: AlertEdgeToEdgeWrapperProps) => (
   <>
     {alertProps && <AlertEdgeToEdge {...alertProps} />}
-    <Animated.View layout={LinearTransition} style={IOStyles.flex}>
+    <Animated.View layout={LinearTransition} style={{ flex: 1 }}>
       {children}
     </Animated.View>
   </>

package/src/components/buttons/IconButton.tsx

@@ -8,7 +8,6 @@ import Animated, {
 import {
   IOColors,
   IOIconButtonStyles,
-  IOStyles,
   IOThemeLight,
   hexToRgba,
   useIOTheme
@@ -124,9 +123,8 @@ export const IconButton = ({
     >
       <Animated.View
         style={[
+          IOIconButtonStyles.button,
           IOIconButtonStyles.buttonSizeSmall,
-          IOStyles.alignCenter,
-          IOStyles.centerJustified,
           !disabled && !reducedMotion && scaleAnimatedStyle
         ]}
       >

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -390,15 +390,13 @@ exports[`Test Buttons Components - Experimental Enabled IconButton Snapshot 1`]
   <View
     style={
       [
-        {
-          "height": 24,
-          "width": 24,
-        },
         {
           "alignItems": "center",
+          "justifyContent": "center",
         },
         {
-          "justifyContent": "center",
+          "height": 24,
+          "width": 24,
         },
         {
           "transform": [
@@ -515,7 +513,6 @@ exports[`Test Buttons Components - Experimental Enabled IconButtonContained Snap
       [
         {
           "alignItems": "center",
-          "elevation": 0,
           "justifyContent": "center",
         },
         {
@@ -641,7 +638,6 @@ exports[`Test Buttons Components - Experimental Enabled IconButtonSolid Snapshot
       [
         {
           "alignItems": "center",
-          "elevation": 0,
           "justifyContent": "center",
         },
         {

package/src/components/claimsSelector/__test__/__snapshots__/ClaimsSelector.test.tsx.snap

@@ -254,15 +254,11 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (controlled) 1`] = `
             >
               <View
                 style={
-                  [
-                    {
-                      "flexDirection": "row",
-                    },
-                    {
-                      "columnGap": 12,
-                      "flexShrink": 1,
-                    },
-                  ]
+                  {
+                    "columnGap": 12,
+                    "flexDirection": "row",
+                    "flexShrink": 1,
+                  }
                 }
               >
                 <Text
@@ -781,15 +777,11 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (uncontrolled) 1`] = `
             >
               <View
                 style={
-                  [
-                    {
-                      "flexDirection": "row",
-                    },
-                    {
-                      "columnGap": 12,
-                      "flexShrink": 1,
-                    },
-                  ]
+                  {
+                    "columnGap": 12,
+                    "flexDirection": "row",
+                    "flexShrink": 1,
+                  }
                 }
               >
                 <Text

package/src/components/layout/ModalBSHeader.tsx

@@ -6,7 +6,7 @@ import {
   View,
   findNodeHandle
 } from "react-native";
-import { IOColors, IOStyles, IOVisualCostants } from "../../core";
+import { IOColors, IOVisualCostants } from "../../core";
 import { IconButton } from "../buttons";
 import { H4 } from "../typography";
 
@@ -56,7 +56,7 @@ export const ModalBSHeader = ({
         title
       ) : (
         <View
-          style={IOStyles.flex}
+          style={{ flex: 1 }}
           accessible={true}
           accessibilityRole={"header"}
           accessibilityLabel={typeof title === "string" ? title : undefined}

package/src/components/listitems/ListItemAmount.tsx

@@ -4,7 +4,6 @@ import {
   IOListItemStyles,
   IOListItemVisualParams,
   IOSpacingScale,
-  IOStyles,
   useIOTheme
 } from "../../core";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
@@ -81,7 +80,7 @@ export const ListItemAmount = ({
             size={IOListItemVisualParams.iconSize}
           />
         )}
-        <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
+        <View style={{ flex: 1 }}>{itemInfoTextComponent}</View>
         <H3
           {...valueElementProps}
           color={theme["textBody-default"]}

package/src/components/listitems/ListItemCheckbox.tsx

@@ -7,7 +7,6 @@ import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
   IOSelectionTickVisualParams,
-  IOStyles,
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
@@ -104,16 +103,14 @@ export const ListItemCheckbox = ({
         <Animated.View style={scaleAnimatedStyle}>
           <View style={IOSelectionListItemStyles.listItemInner}>
             <View
-              style={[
-                IOStyles.row,
-                {
-                  flexShrink: 1,
-                  columnGap:
-                    IOSelectionListItemVisualParams.iconMargin *
-                    dynamicFontScale *
-                    spacingScaleMultiplier
-                }
-              ]}
+              style={{
+                flexDirection: "row",
+                flexShrink: 1,
+                columnGap:
+                  IOSelectionListItemVisualParams.iconMargin *
+                  dynamicFontScale *
+                  spacingScaleMultiplier
+              }}
             >
               {icon && !hugeFontEnabled && (
                 <Icon

package/src/components/listitems/ListItemHeader.tsx

@@ -5,7 +5,6 @@ import {
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
   IOSpacingScale,
-  IOStyles,
   IOVisualCostants,
   useIOTheme
 } from "../../core";
@@ -14,8 +13,8 @@ import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { ButtonLink, IconButton } from "../buttons";
 import { IOIcons, Icon } from "../icons";
-import { BodySmall, H6 } from "../typography";
 import { VSpacer } from "../spacer";
+import { BodySmall, H6 } from "../typography";
 
 type ButtonLinkActionProps = {
   type: "buttonLink";
@@ -121,7 +120,7 @@ export const ListItemHeader = ({
             />
           </View>
         )}
-        <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
+        <View style={{ flex: 1 }}>{itemInfoTextComponent}</View>
         {endElement && (
           <View style={{ marginLeft: IOListItemVisualParams.actionMargin }}>
             {listItemAction()}

package/src/components/listitems/ListItemInfo.tsx

@@ -4,7 +4,6 @@ import Animated from "react-native-reanimated";
 import {
   IOListItemStyles,
   IOListItemVisualParams,
-  IOStyles,
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
@@ -175,7 +174,7 @@ export const ListItemInfo = ({
           size={PAYMENT_LOGO_SIZE}
         />
       )}
-      <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
+      <View style={{ flex: 1 }}>{itemInfoTextComponent}</View>
       {endElement && <View>{listItemInfoAction()}</View>}
     </>
   );

package/src/components/listitems/ListItemInfoCopy.tsx

@@ -4,7 +4,6 @@ import Animated from "react-native-reanimated";
 import {
   IOListItemStyles,
   IOListItemVisualParams,
-  IOStyles,
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
@@ -110,7 +109,7 @@ export const ListItemInfoCopy = ({
               size={IOListItemVisualParams.iconSize}
             />
           )}
-          <View style={IOStyles.flex}>{listItemInfoCopyContent}</View>
+          <View style={{ flex: 1 }}>{listItemInfoCopyContent}</View>
           <Icon
             allowFontScaling
             name="copy"

package/src/components/listitems/ListItemNavAlert.tsx

@@ -4,7 +4,6 @@ import Animated from "react-native-reanimated";
 import {
   IOListItemStyles,
   IOListItemVisualParams,
-  IOStyles,
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
@@ -108,7 +107,7 @@ export const ListItemNavAlert = ({
               size={IOListItemVisualParams.iconSize}
             />
           )}
-          <View style={IOStyles.flex}>{listItemNavAlertContent}</View>
+          <View style={{ flex: 1 }}>{listItemNavAlertContent}</View>
           <Icon
             allowFontScaling
             name="chevronRightListItem"

package/src/components/listitems/ListItemRadio.tsx

@@ -7,7 +7,6 @@ import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
   IOSelectionTickVisualParams,
-  IOStyles,
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
@@ -133,13 +132,14 @@ export const ListItemRadio = ({
     >
       <View style={IOSelectionListItemStyles.listItemInner}>
         <View
-          style={[
-            IOStyles.flex,
-            IOStyles.rowSpaceBetween,
-            IOStyles.alignCenter
-          ]}
+          style={{
+            flex: 1,
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center"
+          }}
         >
-          <View style={[IOStyles.row, IOStyles.alignCenter]}>
+          <View style={{ flexDirection: "row", alignItems: "center" }}>
             {loadingProps?.skeletonIcon && <SkeletonIcon />}
             <IOSkeleton shape="rectangle" width={180} height={16} radius={8} />
           </View>

package/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap

@@ -840,15 +840,13 @@ exports[`NumberPad Should match the snapshot 1`] = `
           <View
             style={
               [
-                {
-                  "height": 24,
-                  "width": 24,
-                },
                 {
                   "alignItems": "center",
+                  "justifyContent": "center",
                 },
                 {
-                  "justifyContent": "center",
+                  "height": 24,
+                  "width": 24,
                 },
                 {
                   "transform": [
@@ -1052,15 +1050,13 @@ exports[`NumberPad Should match the snapshot 1`] = `
           <View
             style={
               [
-                {
-                  "height": 24,
-                  "width": 24,
-                },
                 {
                   "alignItems": "center",
+                  "justifyContent": "center",
                 },
                 {
-                  "justifyContent": "center",
+                  "height": 24,
+                  "width": 24,
                 },
                 {
                   "transform": [

package/src/components/otpInput/OTPInput.tsx

@@ -9,7 +9,6 @@ import {
   View
 } from "react-native";
 import Animated from "react-native-reanimated";
-import { IOStyles } from "../../core/IOStyles";
 import { useIOTheme } from "../../core";
 import { triggerHaptic } from "../../functions";
 import { useErrorShakeAnimation } from "../../utils/hooks/useErrorShakeAnimation";
@@ -138,7 +137,7 @@ export const OTPInput = forwardRef<View, Props>(
             setHasFocus(true);
           }}
           ref={ref}
-          style={[IOStyles.row, { justifyContent: "space-around" }]}
+          style={{ flexDirection: "row", justifyContent: "space-around" }}
           accessible={true}
           accessibilityLabel={accessibilityLabel}
           accessibilityHint={accessibilityHint}

package/src/components/radio/RadioButtonLabel.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { ComponentProps, useState } from "react";
 import { Pressable, View } from "react-native";
 import { IOSelectionTickVisualParams, useIOTheme } from "../../core";
-import { IOStyles } from "../../core/IOStyles";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { H6 } from "../typography/H6";
@@ -69,15 +68,13 @@ export const RadioButtonLabel = ({
       testID="AnimatedRadioButton"
     >
       <View
-        style={[
-          IOStyles.row,
-          {
-            alignItems: "flex-start",
-            flexShrink: 1,
-            width: "100%",
-            columnGap: 8 * dynamicFontScale * spacingScaleMultiplier
-          }
-        ]}
+        style={{
+          flexDirection: "row",
+          alignItems: "flex-start",
+          flexShrink: 1,
+          width: "100%",
+          columnGap: 8 * dynamicFontScale * spacingScaleMultiplier
+        }}
       >
         <View
           pointerEvents="none"

package/src/components/stepper/Stepper.tsx

@@ -1,12 +1,6 @@
 import * as React from "react";
 import { ColorValue, View } from "react-native";
-import {
-  IOColors,
-  IOSpacer,
-  IOStyles,
-  IOVisualCostants,
-  useIOTheme
-} from "../../core";
+import { IOColors, IOSpacer, IOVisualCostants, useIOTheme } from "../../core";
 
 type StepperProps = {
   steps: number;
@@ -26,11 +20,12 @@ export const Stepper = ({ steps, currentStep }: StepperProps) => {
   return (
     <View style={{ paddingHorizontal: IOVisualCostants.appMarginDefault }}>
       <View
-        style={[
-          IOStyles.flex,
-          IOStyles.rowSpaceBetween,
-          { gap: STEPPER_SPACE }
-        ]}
+        style={{
+          flex: 1,
+          flexDirection: "row",
+          justifyContent: "space-between",
+          gap: STEPPER_SPACE
+        }}
       >
         {[...Array(steps)].map((_, i) => (
           <View

package/src/core/IOStyles.ts

@@ -1,4 +1,4 @@
-import { Platform, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
 import { IOIconSizeScale } from "../components/icons";
 import { IOColors } from "./IOColors";
 import { IOModuleIDPRadius } from "./IOShapes";
@@ -43,31 +43,6 @@ export const IOVisualCostants: IOVisualCostants = {
 };
 
 export const IOStyles = StyleSheet.create({
-  flex: {
-    flex: 1
-  },
-  selfCenter: {
-    alignSelf: "center"
-  },
-  alignCenter: {
-    alignItems: "center"
-  },
-  horizontalContentPadding: {
-    paddingHorizontal: IOVisualCostants.appMarginDefault
-  },
-  row: {
-    flexDirection: "row"
-  },
-  column: {
-    flexDirection: "column"
-  },
-  rowSpaceBetween: {
-    flexDirection: "row",
-    justifyContent: "space-between"
-  },
-  centerJustified: {
-    justifyContent: "center"
-  },
   // The following styles come from the original
   // NativeBase's `View`. They are moved here to
   // prevent UI regressions.
@@ -85,14 +60,6 @@ export const IOStyles = StyleSheet.create({
     shadowOpacity: 0.5,
     shadowRadius: 37,
     elevation: 20 // Prop supported on Android only
-  },
-  bgWhite: {
-    backgroundColor: IOColors.white
-    // https://github.com/pagopa/io-app/pull/4387
-  },
-  topListBorderBelowTabsStyle: {
-    borderTopWidth: Platform.OS === "android" ? 0.1 : undefined,
-    elevation: 0.1
   }
 });
 
@@ -173,9 +140,7 @@ export const IOIconButtonStyles = StyleSheet.create({
   /* IconButton */
   button: {
     alignItems: "center",
-    justifyContent: "center",
-    // Reset default visual parameters
-    elevation: 0
+    justifyContent: "center"
   },
   buttonSizeSmall: {
     width: iconBtnSizeSmall,