@factorialco/f0-react-native 0.21.0 → 0.23.0

package/src/components/Tags/AlertTab/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AlertTag Snapshot Critical level 1`] = `
 <View
@@ -9,7 +9,7 @@ exports[`AlertTag Snapshot Critical level 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": undefined,
+        "disabled": true,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -23,7 +23,7 @@ exports[`AlertTag Snapshot Critical level 1`] = `
       }
     }
     accessible={true}
-    className="flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-0.5 bg-f1-background-critical text-f1-foreground-critical"
+    className="overflow-hidden flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-0.5 bg-f1-background-critical text-f1-foreground-critical"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -35,6 +35,18 @@ exports[`AlertTag Snapshot Critical level 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+        undefined,
+      ]
+    }
   >
     <RNSVGSvgView
       align="xMidYMid"
@@ -53,6 +65,9 @@ exports[`AlertTag Snapshot Critical level 1`] = `
             "backgroundColor": "transparent",
             "borderWidth": 0,
           },
+          [
+            {},
+          ],
           {
             "flex": 0,
             "height": "100%",
@@ -104,7 +119,7 @@ exports[`AlertTag Snapshot Ingo level 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": undefined,
+        "disabled": true,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -118,7 +133,7 @@ exports[`AlertTag Snapshot Ingo level 1`] = `
       }
     }
     accessible={true}
-    className="flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-0.5 bg-f1-background-info text-f1-foreground-info"
+    className="overflow-hidden flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-0.5 bg-f1-background-info text-f1-foreground-info"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -130,6 +145,18 @@ exports[`AlertTag Snapshot Ingo level 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+        undefined,
+      ]
+    }
   >
     <RNSVGSvgView
       align="xMidYMid"
@@ -148,6 +175,9 @@ exports[`AlertTag Snapshot Ingo level 1`] = `
             "backgroundColor": "transparent",
             "borderWidth": 0,
           },
+          [
+            {},
+          ],
           {
             "flex": 0,
             "height": "100%",
@@ -202,7 +232,7 @@ exports[`AlertTag Snapshot Warning level 1`] = `
       {
         "busy": undefined,
         "checked": undefined,
-        "disabled": undefined,
+        "disabled": true,
         "expanded": undefined,
         "selected": undefined,
       }
@@ -216,7 +246,7 @@ exports[`AlertTag Snapshot Warning level 1`] = `
       }
     }
     accessible={true}
-    className="flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-0.5 bg-f1-background-warning text-f1-foreground-warning"
+    className="overflow-hidden flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2 pl-0.5 bg-f1-background-warning text-f1-foreground-warning"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -228,6 +258,18 @@ exports[`AlertTag Snapshot Warning level 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+        undefined,
+      ]
+    }
   >
     <RNSVGSvgView
       align="xMidYMid"
@@ -246,6 +288,9 @@ exports[`AlertTag Snapshot Warning level 1`] = `
             "backgroundColor": "transparent",
             "borderWidth": 0,
           },
+          [
+            {},
+          ],
           {
             "flex": 0,
             "height": "100%",

package/src/components/Tags/BaseTag/index.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
-import { Pressable, Text, View } from "react-native";
+import { Text, View } from "react-native";
 import { cn } from "../../../lib/utils";
+import { PressableFeedback } from "../../PressableFeedback";
 
 type Props = {
   additionalAccesibleText?: string;
@@ -30,21 +31,23 @@ export const BaseTag = ({
   classNameText,
 }: Props) => (
   <View className="flex items-start">
-    <Pressable
+    <PressableFeedback
       className={cn(
         "flex flex-row items-center justify-start gap-0.5 rounded-full py-0.5 pr-2",
-        onClick && "cursor-pointer hover:bg-f1-background-hover",
+        onClick && "cursor-pointer",
         !text && "aspect-square w-6 items-center justify-center p-1",
         !left ? "pl-2" : "pl-1",
         classNameContainer,
       )}
       onPress={onClick}
+      variant={onClick ? "both" : "none"}
+      disabled={!onClick}
     >
       {left}
       {!!text && (
         <Text
           className={cn(
-            "line-clamp-1 text-base font-medium text-f1-foreground",
+            "text-f1-foreground line-clamp-1 text-base font-medium",
             classNameText,
           )}
         >
@@ -52,12 +55,12 @@ export const BaseTag = ({
         </Text>
       )}
       {additionalAccesibleText && (
-        <Text className="sr-only text-base font-medium text-f1-foreground">
+        <Text className="text-f1-foreground sr-only text-base font-medium">
           {additionalAccesibleText}
         </Text>
       )}
       {right}
-    </Pressable>
+    </PressableFeedback>
   </View>
 );