fix: show attribute value button in credentials details being cropped (…

…#1395) Signed-off-by: fc-santos <filipesantos@live.ca>
openwallet-foundation · Jan 13, 2025 · 6560986 · 6560986
1 parent 95041b2
commit 6560986
Show file tree

Hide file tree

Showing 4 changed files with 513 additions and 161 deletions.
diff --git a/packages/legacy/core/App/components/record/RecordField.tsx b/packages/legacy/core/App/components/record/RecordField.tsx
@@ -86,6 +86,14 @@ const RecordField: React.FC<RecordFieldProps> = ({
       justifyContent: 'space-between',
       paddingTop: 5,
     },
+    fieldLabel: {
+      flex: 3,
+    },
+    fieldValue: {
+      flex: 1,
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+    },
     valueText: {
       ...ListItems.recordAttributeText,
       paddingVertical: 4,
@@ -95,27 +103,31 @@ const RecordField: React.FC<RecordFieldProps> = ({
   return (
     <View style={styles.container}>
       <View style={styles.valueContainer}>
-        {fieldLabel ? (
-          fieldLabel(field)
-        ) : (
-          <Text style={ListItems.recordAttributeLabel} testID={testIdWithKey('AttributeName')}>
-            {field.label ?? startCase(field.name || '')}
-          </Text>
-        )}
+        <View style={styles.fieldLabel}>
+          {fieldLabel ? (
+            fieldLabel(field)
+          ) : (
+            <Text style={ListItems.recordAttributeLabel} testID={testIdWithKey('AttributeName')}>
+              {field.label ?? startCase(field.name || '')}
+            </Text>
+          )}
+        </View>
 
-        {hideFieldValue ? (
-          <TouchableOpacity
-            accessible={true}
-            accessibilityLabel={shown ? t('Record.Hide') : t('Record.Show')}
-            accessibilityRole="button"
-            testID={testIdWithKey('ShowHide')}
-            activeOpacity={1}
-            onPress={onToggleViewPressed}
-            style={styles.link}
-          >
-            <Text style={ListItems.recordLink}>{shown ? t('Record.Hide') : t('Record.Show')}</Text>
-          </TouchableOpacity>
-        ) : null}
+        <View style={styles.fieldValue}>
+          {hideFieldValue ? (
+            <TouchableOpacity
+              accessible={true}
+              accessibilityLabel={shown ? t('Record.Hide') : t('Record.Show')}
+              accessibilityRole="button"
+              testID={testIdWithKey('ShowHide')}
+              activeOpacity={1}
+              onPress={onToggleViewPressed}
+              style={styles.link}
+            >
+              <Text style={ListItems.recordLink}>{shown ? t('Record.Hide') : t('Record.Show')}</Text>
+            </TouchableOpacity>
+          ) : null}
+        </View>
       </View>
 
       <View style={styles.valueContainer}>

diff --git a/packages/legacy/core/__tests__/components/__snapshots__/RecordField.test.tsx.snap b/packages/legacy/core/__tests__/components/__snapshots__/RecordField.test.tsx.snap
@@ -19,18 +19,35 @@ exports[`RecordField Component Shown binary field should render a binary field 1
       }
     }
   >
-    <Text
+    <View
       style={
         Object {
-          "color": "#FFFFFF",
-          "fontSize": 18,
-          "fontWeight": "bold",
+          "flex": 3,
         }
       }
-      testID="com.ariesbifold:id/AttributeName"
     >
-      Test
-    </Text>
+      <Text
+        style={
+          Object {
+            "color": "#FFFFFF",
+            "fontSize": 18,
+            "fontWeight": "bold",
+          }
+        }
+        testID="com.ariesbifold:id/AttributeName"
+      >
+        Test
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "flex": 1,
+          "flexDirection": "row",
+          "justifyContent": "flex-end",
+        }
+      }
+    />
   </View>
   <View
     style={
@@ -142,18 +159,35 @@ exports[`RecordField Component Shown date field should render a date field 1`] =
       }
     }
   >
-    <Text
+    <View
       style={
         Object {
-          "color": "#FFFFFF",
-          "fontSize": 18,
-          "fontWeight": "bold",
+          "flex": 3,
         }
       }
-      testID="com.ariesbifold:id/AttributeName"
     >
-      Test
-    </Text>
+      <Text
+        style={
+          Object {
+            "color": "#FFFFFF",
+            "fontSize": 18,
+            "fontWeight": "bold",
+          }
+        }
+        testID="com.ariesbifold:id/AttributeName"
+      >
+        Test
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "flex": 1,
+          "flexDirection": "row",
+          "justifyContent": "flex-end",
+        }
+      }
+    />
   </View>
   <View
     style={

diff --git a/packages/legacy/core/__tests__/screens/__snapshots__/Connection.test.tsx.snap b/packages/legacy/core/__tests__/screens/__snapshots__/Connection.test.tsx.snap
@@ -1143,18 +1143,35 @@ exports[`Connection Screen Valid goal code aries.vc.issue extracted, show to off
                 }
               }
             >
-              <Text
+              <View
                 style={
                   Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 18,
-                    "fontWeight": "bold",
+                    "flex": 3,
                   }
                 }
-                testID="com.ariesbifold:id/AttributeName"
               >
-                Student First Name
-              </Text>
+                <Text
+                  style={
+                    Object {
+                      "color": "#FFFFFF",
+                      "fontSize": 18,
+                      "fontWeight": "bold",
+                    }
+                  }
+                  testID="com.ariesbifold:id/AttributeName"
+                >
+                  Student First Name
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "justifyContent": "flex-end",
+                  }
+                }
+              />
             </View>
             <View
               style={
@@ -1226,18 +1243,35 @@ exports[`Connection Screen Valid goal code aries.vc.issue extracted, show to off
                 }
               }
             >
-              <Text
+              <View
                 style={
                   Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 18,
-                    "fontWeight": "bold",
+                    "flex": 3,
                   }
                 }
-                testID="com.ariesbifold:id/AttributeName"
               >
-                Student Last Name
-              </Text>
+                <Text
+                  style={
+                    Object {
+                      "color": "#FFFFFF",
+                      "fontSize": 18,
+                      "fontWeight": "bold",
+                    }
+                  }
+                  testID="com.ariesbifold:id/AttributeName"
+                >
+                  Student Last Name
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "justifyContent": "flex-end",
+                  }
+                }
+              />
             </View>
             <View
               style={
@@ -1309,18 +1343,35 @@ exports[`Connection Screen Valid goal code aries.vc.issue extracted, show to off
                 }
               }
             >
-              <Text
+              <View
                 style={
                   Object {
-                    "color": "#FFFFFF",
-                    "fontSize": 18,
-                    "fontWeight": "bold",
+                    "flex": 3,
                   }
                 }
-                testID="com.ariesbifold:id/AttributeName"
               >
-                Expiry Date
-              </Text>
+                <Text
+                  style={
+                    Object {
+                      "color": "#FFFFFF",
+                      "fontSize": 18,
+                      "fontWeight": "bold",
+                    }
+                  }
+                  testID="com.ariesbifold:id/AttributeName"
+                >
+                  Expiry Date
+                </Text>
+              </View>
+              <View
+                style={
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "justifyContent": "flex-end",
+                  }
+                }
+              />
             </View>
             <View
               style={
@@ -1564,4 +1615,4 @@ exports[`Connection Screen Valid goal code aries.vc.issue extracted, show to off
     />
   </RNCSafeAreaView>
 </View>
-`;
+`;