@pagopa/io-app-design-system 1.28.0 → 1.29.0

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -970,7 +970,13 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
         ]
       }
     >
-      <View>
+      <View
+        style={
+          {
+            "flexShrink": 1,
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           color="black"
@@ -983,6 +989,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               "lineHeight": 21,
             }
           }
+          numberOfLines={1}
           style={
             [
               {
@@ -1000,6 +1007,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
           weight="Regular"
         >
           label
+           con nome molto molto lungo
         </Text>
         <View
           style={
@@ -1114,6 +1122,13 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
           }
         }
       >
+        <View
+          style={
+            {
+              "width": 8,
+            }
+          }
+        />
         <Text
           allowFontScaling={false}
           color="blueIO-500"
@@ -1354,7 +1369,13 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
         ]
       }
     >
-      <View>
+      <View
+        style={
+          {
+            "flexShrink": 1,
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           color="black"
@@ -1367,6 +1388,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               "lineHeight": 21,
             }
           }
+          numberOfLines={1}
           style={
             [
               {
@@ -1384,6 +1406,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
           weight="Regular"
         >
           label
+           con nome molto molto lungo
         </Text>
       </View>
       <View
@@ -1394,6 +1417,13 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
           }
         }
       >
+        <View
+          style={
+            {
+              "width": 8,
+            }
+          }
+        />
         <Text
           allowFontScaling={false}
           color="blueIO-500"
@@ -2702,7 +2732,13 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
         ]
       }
     >
-      <View>
+      <View
+        style={
+          {
+            "flexShrink": 1,
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           color="black"
@@ -2715,6 +2751,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
               "lineHeight": 21,
             }
           }
+          numberOfLines={1}
           style={
             [
               {
@@ -2732,6 +2769,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
           weight="SemiBold"
         >
           label
+           con nome molto molto lungo
         </Text>
         <View
           style={
@@ -2846,9 +2884,16 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
           }
         }
       >
+        <View
+          style={
+            {
+              "width": 8,
+            }
+          }
+        />
         <Text
           allowFontScaling={false}
-          color="blue"
+          color="blueIO-500"
           defaultColor="black"
           defaultWeight="SemiBold"
           font="TitilliumWeb"
@@ -2865,7 +2910,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                 "lineHeight": 25,
               },
               {
-                "color": "#0073E6",
+                "color": "#0B3EE3",
                 "fontFamily": "Titillium Web",
                 "fontStyle": "normal",
                 "fontWeight": "600",
@@ -3086,7 +3131,13 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
         ]
       }
     >
-      <View>
+      <View
+        style={
+          {
+            "flexShrink": 1,
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           color="black"
@@ -3099,6 +3150,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
               "lineHeight": 21,
             }
           }
+          numberOfLines={1}
           style={
             [
               {
@@ -3116,6 +3168,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
           weight="SemiBold"
         >
           label
+           con nome molto molto lungo
         </Text>
       </View>
       <View
@@ -3126,9 +3179,16 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
           }
         }
       >
+        <View
+          style={
+            {
+              "width": 8,
+            }
+          }
+        />
         <Text
           allowFontScaling={false}
-          color="blue"
+          color="blueIO-500"
           defaultColor="black"
           defaultWeight="SemiBold"
           font="TitilliumWeb"
@@ -3145,7 +3205,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
                 "lineHeight": 25,
               },
               {
-                "color": "#0073E6",
+                "color": "#0B3EE3",
                 "fontFamily": "Titillium Web",
                 "fontStyle": "normal",
                 "fontWeight": "600",

package/src/components/radio/RadioButtonLabel.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useState } from "react";
 import { Pressable, View } from "react-native";
+import { useIOTheme } from "../../core";
 import { IOStyles } from "../../core/IOStyles";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
 import { HSpacer } from "../spacer/Spacer";
@@ -34,6 +35,8 @@ export const RadioButtonLabel = ({
   disabled,
   onValueChange
 }: OwnProps) => {
+  const theme = useIOTheme();
+
   const [toggleValue, setToggleValue] = useState(checked ?? false);
 
   const toggleRadioButton = () => {
@@ -64,7 +67,7 @@ export const RadioButtonLabel = ({
           <AnimatedRadio checked={checked ?? toggleValue} />
         </View>
         <HSpacer size={8} />
-        <H6 style={{ flexShrink: 1 }} color={"black"}>
+        <H6 style={{ flexShrink: 1 }} color={theme["textBody-default"]}>
           {label}
         </H6>
       </View>

package/src/components/switch/SwitchLabel.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState } from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
-import { IOColors, useIOExperimentalDesign } from "../../core";
+import { IOColors, useIOExperimentalDesign, useIOTheme } from "../../core";
 import { IOStyles } from "../../core/IOStyles";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
 import { makeFontStyleObject } from "../../utils/fonts";
@@ -48,10 +48,11 @@ export const SwitchLabel = ({
   onValueChange
 }: OwnProps) => {
   const [toggleValue, setToggleValue] = useState(checked ?? false);
+  const theme = useIOTheme();
 
   const { isExperimental } = useIOExperimentalDesign();
   const switchLabelText = (
-    <H6 style={{ flexShrink: 1 }} color={"black"}>
+    <H6 style={{ flexShrink: 1 }} color={theme["textBody-default"]}>
       {label}
     </H6>
   );