[FIX] Add margin and check to AssetActionButton text (#4381)

MetaMask · May 24, 2022 · 3fa1c4b · 3fa1c4b
1 parent f82e0fe
commit 3fa1c4b
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 13 deletions.
diff --git a/app/components/UI/AssetActionButton/__snapshots__/index.test.tsx.snap b/app/components/UI/AssetActionButton/__snapshots__/index.test.tsx.snap
@@ -51,12 +51,15 @@ exports[`AssetActionButtons should render correctly 1`] = `
       Object {
         "color": "#037DD6",
         "fontSize": 14,
+        "marginHorizontal": 3,
         "marginTop": 8,
       }
     }
     underline={false}
     upper={false}
-  />
+  >
+    mock text
+  </Text>
 </TouchableOpacity>
 `;
 
@@ -125,12 +128,15 @@ exports[`AssetActionButtons should render type add correctly 1`] = `
       Object {
         "color": "#037DD6",
         "fontSize": 14,
+        "marginHorizontal": 3,
         "marginTop": 8,
       }
     }
     underline={false}
     upper={false}
-  />
+  >
+    mock text
+  </Text>
 </TouchableOpacity>
 `;
 
@@ -199,12 +205,15 @@ exports[`AssetActionButtons should render type information correctly 1`] = `
       Object {
         "color": "#037DD6",
         "fontSize": 14,
+        "marginHorizontal": 3,
         "marginTop": 8,
       }
     }
     underline={false}
     upper={false}
-  />
+  >
+    mock text
+  </Text>
 </TouchableOpacity>
 `;
 
@@ -285,12 +294,15 @@ exports[`AssetActionButtons should render type receive correctly 1`] = `
       Object {
         "color": "#037DD6",
         "fontSize": 14,
+        "marginHorizontal": 3,
         "marginTop": 8,
       }
     }
     underline={false}
     upper={false}
-  />
+  >
+    receive...
+  </Text>
 </TouchableOpacity>
 `;
 
@@ -359,12 +371,15 @@ exports[`AssetActionButtons should render type send correctly 1`] = `
       Object {
         "color": "#037DD6",
         "fontSize": 14,
+        "marginHorizontal": 3,
         "marginTop": 8,
       }
     }
     underline={false}
     upper={false}
-  />
+  >
+    mock text
+  </Text>
 </TouchableOpacity>
 `;
 
@@ -439,11 +454,14 @@ exports[`AssetActionButtons should render type swap correctly 1`] = `
       Object {
         "color": "#037DD6",
         "fontSize": 14,
+        "marginHorizontal": 3,
         "marginTop": 8,
       }
     }
     underline={false}
     upper={false}
-  />
+  >
+    mock text
+  </Text>
 </TouchableOpacity>
 `;
diff --git a/app/components/UI/AssetActionButton/index.js b/app/components/UI/AssetActionButton/index.js
@@ -38,6 +38,7 @@ const createStyles = (colors) =>
     },
     buttonText: {
       marginTop: 8,
+      marginHorizontal: 3,
       color: colors.primary.default,
       fontSize: 14,
     },
@@ -60,6 +61,8 @@ function AssetActionButton({ onPress, icon, label, disabled }) {
   const { colors } = useAppThemeFromContext() || mockTheme;
   const styles = createStyles(colors);
 
+  const maxStringLength = 10;
+
   const getIcon = (type) => {
     switch (type) {
       case 'send': {
@@ -123,7 +126,9 @@ function AssetActionButton({ onPress, icon, label, disabled }) {
         {icon && (typeof icon === 'string' ? getIcon(icon) : icon)}
       </View>
       <Text centered style={styles.buttonText} numberOfLines={1}>
-        {label}
+        {label.length > maxStringLength
+          ? `${label.substring(0, maxStringLength - 3)}...`
+          : label}
       </Text>
     </TouchableOpacity>
   );

diff --git a/app/components/UI/AssetActionButton/index.test.tsx b/app/components/UI/AssetActionButton/index.test.tsx
@@ -3,28 +3,33 @@ import { shallow } from 'enzyme';
 import AssetActionButton from './';
 
 describe('AssetActionButtons', () => {
+  const mockText = 'mock text';
   it('should render correctly', () => {
-    const wrapper = shallow(<AssetActionButton />);
+    const wrapper = shallow(<AssetActionButton label={mockText} />);
     expect(wrapper).toMatchSnapshot();
   });
   it('should render type send correctly', () => {
-    const wrapper = shallow(<AssetActionButton icon="send" />);
+    const wrapper = shallow(<AssetActionButton icon="send" label={mockText} />);
     expect(wrapper).toMatchSnapshot();
   });
   it('should render type receive correctly', () => {
-    const wrapper = shallow(<AssetActionButton icon="receive" />);
+    // String with more than 10 characters
+    const text = 'receive receive';
+    const wrapper = shallow(<AssetActionButton icon="receive" label={text} />);
     expect(wrapper).toMatchSnapshot();
   });
   it('should render type add correctly', () => {
-    const wrapper = shallow(<AssetActionButton icon="add" />);
+    const wrapper = shallow(<AssetActionButton icon="add" label={mockText} />);
     expect(wrapper).toMatchSnapshot();
   });
   it('should render type information correctly', () => {
-    const wrapper = shallow(<AssetActionButton icon="information" />);
+    const wrapper = shallow(
+      <AssetActionButton icon="information" label={mockText} />,
+    );
     expect(wrapper).toMatchSnapshot();
   });
   it('should render type swap correctly', () => {
-    const wrapper = shallow(<AssetActionButton icon="swap" />);
+    const wrapper = shallow(<AssetActionButton icon="swap" label={mockText} />);
     expect(wrapper).toMatchSnapshot();
   });
 });