Merge pull request #822 from gympass/EXUX-912

fix: [EXUX-912] Add extra margin to result title and badge container
gympass · May 29, 2024 · ac9d3ad · ac9d3ad
2 parents f94d408 + e1f86a2
commit ac9d3ad
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/packages/yoga/src/Result/native/Result/__snapshots__/index.test.jsx.snap b/packages/yoga/src/Result/native/Result/__snapshots__/index.test.jsx.snap
@@ -533,11 +533,15 @@ exports[`<Result /> should match snapshot 1`] = `
       </View>
     </View>
     <View
+      alignItems="center"
+      flexDirection="row"
+      marginRight="zero"
       style={
         [
           {
             "alignItems": "center",
             "flexDirection": "row",
+            "marginRight": 0,
           },
         ]
       }
@@ -1180,11 +1184,15 @@ exports[`<Result /> should match snapshot without attendence 1`] = `
     }
   >
     <View
+      alignItems="center"
+      flexDirection="row"
+      marginRight="zero"
       style={
         [
           {
             "alignItems": "center",
             "flexDirection": "row",
+            "marginRight": 0,
           },
         ]
       }
@@ -2074,11 +2082,15 @@ exports[`<Result /> should match snapshot without limitLabel prop 1`] = `
       </View>
     </View>
     <View
+      alignItems="center"
+      flexDirection="row"
+      marginRight="zero"
       style={
         [
           {
             "alignItems": "center",
             "flexDirection": "row",
+            "marginRight": 0,
           },
         ]
       }

diff --git a/packages/yoga/src/Result/native/Result/index.jsx b/packages/yoga/src/Result/native/Result/index.jsx
@@ -3,10 +3,11 @@ import React, { isValidElement } from 'react';
 import { arrayOf, string, shape, func, bool, node } from 'prop-types';
 
 import Text from '../../../Text';
+import Box from '../../../Box';
 import Attendances from '../Attendances';
 import Badge from '../Badge';
 
-import { Content, StyledBox, TitleAndBadgeContainer } from './styles';
+import { Content, StyledBox } from './styles';
 
 /**
  * The Result component is used when you have a list to show. It is applied to
@@ -33,7 +34,11 @@ const Result = ({
           color={attendancesColor}
         />
       )}
-      <TitleAndBadgeContainer>
+      <Box
+        flexDirection="row"
+        alignItems="center"
+        marginRight={badgeIcon ? 'small' : 'zero'}
+      >
         <Text.Body1 numberOfLines={1} bold>
           {title}
         </Text.Body1>
@@ -50,7 +55,7 @@ const Result = ({
             h="small"
           />
         )}
-      </TitleAndBadgeContainer>
+      </Box>
       {subTitle && subTitle !== '' && (
         <Text.Body2 numberOfLines={1} color="deep">
           {subTitle}

diff --git a/packages/yoga/src/Result/native/Result/styles.jsx b/packages/yoga/src/Result/native/Result/styles.jsx
@@ -31,8 +31,3 @@ export const Content = styled.View`
     `;
   }}
 `;
-
-export const TitleAndBadgeContainer = styled(Box)`
-  flex-direction: row;
-  align-items: center;
-`;