[IOAPPFD0-192] Fix rendering issues of NumberPad and CodeInput

example/src/pages/NumberPad.tsx

@@ -7,13 +7,12 @@ import {
   IOStyles,
   VSpacer,
   NumberPad,
-  H3,
   CodeInput,
   ListItemSwitch,
-  IOColors
+  IOColors,
+  LabelSmallAlt
 } from "@pagopa/io-app-design-system";
 import { useNavigation } from "@react-navigation/native";
-import { Screen } from "../components/Screen";
 
 const PIN_LENGTH = 6;
 /**
@@ -43,45 +42,46 @@ export const NumberPadScreen = () => {
   }, [blueBackground, navigation]);
   return (
     <View
-      style={[
-        IOStyles.flex,
-        { paddingVertical: IOVisualCostants.appMarginDefault },
-        {
-          backgroundColor: blueBackground
-            ? IOColors["blueIO-500"]
-            : IOColors.white
-        }
-      ]}
+      style={{
+        flexGrow: 1,
+        paddingVertical: IOVisualCostants.appMarginDefault,
+        backgroundColor: blueBackground
+          ? IOColors["blueIO-500"]
+          : IOColors.white
+      }}
     >
-      <Screen>
-        <ListItemSwitch
-          label="Attiva sfondo blu"
-          value={blueBackground}
-          onSwitchValueChange={() => setBlueBackground(v => !v)}
-        />
+      <ListItemSwitch
+        label="Attiva sfondo blu"
+        value={blueBackground}
+        onSwitchValueChange={() => setBlueBackground(v => !v)}
+      />
+      <View style={IOStyles.alignCenter}>
         <H1>NumberPad + Code Input</H1>
         <H5>{"Value Typed on the NumberPad component"}</H5>
         <VSpacer />
-        <H3 color={blueBackground ? "white" : "black"}>{value}</H3>
-        <VSpacer />
-        <CodeInput
-          value={value}
-          length={PIN_LENGTH}
-          variant={blueBackground ? "light" : "dark"}
-          onValueChange={onValueChange}
-          onValidate={v => v === "123456"}
-        />
-        <VSpacer size={48} />
-        <NumberPad
-          value={value}
-          deleteAccessibilityLabel="Delete"
-          onValueChange={onValueChange}
-          variant={blueBackground ? "dark" : "light"}
-          biometricType="FACE_ID"
-          biometricAccessibilityLabel="Face ID"
-          onBiometricPress={() => Alert.alert("biometric")}
-        />
-      </Screen>
+
+        <LabelSmallAlt color={blueBackground ? "white" : "black"}>
+          {value}
+        </LabelSmallAlt>
+      </View>
+      <VSpacer />
+      <CodeInput
+        value={value}
+        length={PIN_LENGTH}
+        variant={blueBackground ? "light" : "dark"}
+        onValueChange={onValueChange}
+        onValidate={v => v === "123456"}
+      />
+      <VSpacer size={48} />
+      <NumberPad
+        value={value}
+        deleteAccessibilityLabel="Delete"
+        onValueChange={onValueChange}
+        variant={blueBackground ? "dark" : "light"}
+        biometricType="FACE_ID"
+        biometricAccessibilityLabel="Face ID"
+        onBiometricPress={() => Alert.alert("biometric")}
+      />
     </View>
   );
 };

src/components/codeInput/CodeInput.tsx

@@ -9,6 +9,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { IOColors, IOStyles } from "../../core";
 import { triggerHaptic } from "../../functions";
+import { HSpacer } from "../spacer";
 
 type CodeInputProps = {
   value: string;
@@ -30,7 +31,9 @@ const styles = StyleSheet.create({
   dotEmpty: {
     borderColor: IOColors["grey-200"]
   },
-  wrapper: { justifyContent: "center", gap: DOT_SIZE }
+  wrapper: {
+    justifyContent: "center"
+  }
 });
 
 const EmptyDot = () => <View style={[styles.dotShape, styles.dotEmpty]} />;
@@ -111,9 +114,19 @@ export const CodeInput = ({
 
   return (
     <Animated.View style={[IOStyles.row, styles.wrapper, animatedStyle]}>
-      {[...Array(length)].map((_, i) => (
+      {[...Array(length)].map((_, i, arr) => (
         <React.Fragment key={i}>
-          {value[i] ? <FilletDot color={fillColor} /> : <EmptyDot />}
+          {value[i] ? (
+            <>
+              <FilletDot color={fillColor} />
+              {i !== arr.length - 1 && <HSpacer size={DOT_SIZE} />}
+            </>
+          ) : (
+            <>
+              <EmptyDot />
+              {i !== arr.length - 1 && <HSpacer size={DOT_SIZE} />}
+            </>
+          )}
         </React.Fragment>
       ))}
     </Animated.View>

src/components/numberpad/NumberButton.tsx

@@ -13,8 +13,7 @@ import {
   IOColors,
   IONumberPadButtonStyles,
   IOScaleValues,
-  IOSpringValues,
-  useIOExperimentalDesign
+  IOSpringValues
 } from "../../core";
 import { H3 } from "../typography";
 
@@ -45,30 +44,12 @@ const colorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
   }
 };
 
-const legacyColorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
-  light: {
-    background: "grey-50",
-    pressed: "grey-200",
-    foreground: "blue"
-  },
-  dark: {
-    background: "blue",
-    pressed: "blue-600",
-    foreground: "white"
-  }
-};
-
 export const NumberButton = ({
   number,
   variant,
   onPress
 }: NumberButtonProps) => {
-  const { isExperimental } = useIOExperimentalDesign();
-
-  const colors = useMemo(
-    () => (isExperimental ? colorMap[variant] : legacyColorMap[variant]),
-    [variant, isExperimental]
-  );
+  const colors = useMemo(() => colorMap[variant], [variant]);
   const isPressed = useSharedValue(0);
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.basicButton?.pressedState;

src/components/numberpad/NumberPad.tsx

@@ -74,9 +74,12 @@ export const NumberPad = ({
   }) => (
     <View
       style={[
-        IOStyles.flex,
         IOStyles.rowSpaceBetween,
-        { justifyContent: "space-between", alignItems: "center" }
+        {
+          justifyContent: "space-between",
+          alignItems: "center",
+          flexGrow: 1
+        }
       ]}
     >
       {buttons.map(elem => {

src/core/IOSpacing.ts

@@ -28,8 +28,10 @@ export const IOSpacer: ReadonlyArray<IOSpacer> = [
 ] as const;
 
 // Margin values used in the new `<ContentWrapper>` component
-export type IOAppMargin = Extract<IOSpacingScale, 8 | 16 | 24 | 32>;
-export const IOAppMargin: ReadonlyArray<IOAppMargin> = [8, 16, 24, 32] as const;
+export type IOAppMargin = Extract<IOSpacingScale, 8 | 16 | 24 | 32 | 48>;
+export const IOAppMargin: ReadonlyArray<IOAppMargin> = [
+  8, 16, 24, 32, 48
+] as const;
 
 // Values used in the `<Alert>` component
 export type IOAlertSpacing = Extract<IOSpacingScale, 16 | 24>;