Improve code of CheckboxLabel

pagopa · Nov 21, 2024 · 312a614 · 312a614
1 parent ac50c1d
commit 312a614
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/src/components/checkbox/CheckboxLabel.tsx b/src/components/checkbox/CheckboxLabel.tsx
@@ -1,10 +1,14 @@
 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 {
+  IOSelectionTickVisualParams,
+  IOSpacingScale,
+  useIOTheme
+} from "../../core";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
+import { HStack } from "../stack";
 import { H6 } from "../typography/H6";
 import { AnimatedCheckbox } from "./AnimatedCheckbox";
 
@@ -15,6 +19,7 @@ type Props = {
 };
 
 const DISABLED_OPACITY = 0.5;
+const CHECKBOX_MARGIN: IOSpacingScale = 8;
 
 // disabled: the component is no longer touchable
 // onPress:
@@ -66,15 +71,10 @@ export const CheckboxLabel = ({
       // inheritance on Android
       needsOffscreenAlphaCompositing={true}
     >
-      <View
-        style={[
-          IOStyles.row,
-          {
-            alignItems: "center",
-            width: "100%",
-            columnGap: 8 * dynamicFontScale * spacingScaleMultiplier
-          }
-        ]}
+      <HStack
+        allowScaleSpacing
+        style={{ alignItems: "center", width: "100%" }}
+        space={CHECKBOX_MARGIN}
       >
         <View
           pointerEvents="none"
@@ -92,7 +92,7 @@ export const CheckboxLabel = ({
         <H6 style={{ flexShrink: 1 }} color={theme["textBody-default"]}>
           {label}
         </H6>
-      </View>
+      </HStack>
     </Pressable>
   );
 };
diff --git a/src/components/stack/Stack.tsx b/src/components/stack/Stack.tsx
@@ -5,7 +5,7 @@ import { useIOFontDynamicScale } from "../../utils/accessibility";
 
 type AllowedStyleProps = Pick<
   ViewStyle,
-  "alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap"
+  "alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap" | "width"
 >;
 
 type Stack = {