fix: fix listitem icon spacing (#1017)

callstack · Apr 24, 2019 · 9e30fc9 · 9e30fc9
1 parent 8a9a6a9
commit 9e30fc9
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 18 deletions.
diff --git a/example/src/Examples/ListSectionExample.js b/example/src/Examples/ListSectionExample.js
@@ -29,6 +29,11 @@ class ListSectionExample extends React.Component<Props> {
             left={props => <List.Icon {...props} icon="redeem" />}
             title="List item 2"
           />
+          <List.Item
+            title="List item 3"
+            left={props => <List.Icon {...props} icon="folder" />}
+            right={props => <List.Icon {...props} icon="drag-handle" />}
+          />
         </List.Section>
         <Divider />
         <List.Section>

diff --git a/src/components/List/ListIcon.js b/src/components/List/ListIcon.js
@@ -48,7 +48,7 @@ export default class ListIcon extends React.Component<Props> {
 
 const styles = StyleSheet.create({
   item: {
-    marginRight: 16,
+    margin: 8,
     height: 40,
     width: 40,
     alignItems: 'center',

diff --git a/src/components/List/ListItem.js b/src/components/List/ListItem.js
@@ -121,7 +121,9 @@ class ListItem extends React.Component<Props> {
           {left
             ? left({
                 color: descriptionColor,
-                style: description ? styles.iconMargin : null,
+                style: description
+                  ? styles.iconMarginLeft
+                  : { ...styles.iconMarginLeft, ...styles.marginVerticalNone },
               })
             : null}
           <View style={[styles.item, styles.content]} pointerEvents="none">
@@ -151,7 +153,9 @@ class ListItem extends React.Component<Props> {
           {right
             ? right({
                 color: descriptionColor,
-                style: description ? styles.iconMargin : null,
+                style: description
+                  ? styles.iconMarginRight
+                  : { ...styles.iconMarginRight, ...styles.marginVerticalNone },
               })
             : null}
         </View>
@@ -173,7 +177,9 @@ const styles = StyleSheet.create({
   description: {
     fontSize: 14,
   },
-  iconMargin: { marginVertical: 8 },
+  marginVerticalNone: { marginVertical: 0 },
+  iconMarginLeft: { marginLeft: 0, marginRight: 16 },
+  iconMarginRight: { marginRight: 0 },
   item: {
     marginVertical: 6,
     paddingLeft: 8,

diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
@@ -233,7 +233,7 @@ exports[`renders list accordion with children 1`] = `
               "alignItems": "center",
               "height": 40,
               "justifyContent": "center",
-              "marginRight": 16,
+              "margin": 8,
               "width": 40,
             },
             undefined,
@@ -404,7 +404,7 @@ exports[`renders list accordion with left items 1`] = `
               "alignItems": "center",
               "height": 40,
               "justifyContent": "center",
-              "marginRight": 16,
+              "margin": 8,
               "width": 40,
             },
             undefined,

diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -209,11 +209,11 @@ exports[`renders list item with left and right items 1`] = `
             "alignItems": "center",
             "height": 40,
             "justifyContent": "center",
-            "marginRight": 16,
+            "margin": 8,
             "width": 40,
           },
           Object {
-            "marginVertical": 8,
+            "marginRight": 0,
           },
         ]
       }
@@ -294,10 +294,14 @@ exports[`renders list item with left item 1`] = `
             "alignItems": "center",
             "height": 40,
             "justifyContent": "center",
-            "marginRight": 16,
+            "margin": 8,
             "width": 40,
           },
-          null,
+          Object {
+            "marginLeft": 0,
+            "marginRight": 16,
+            "marginVertical": 0,
+          },
         ]
       }
     >

diff --git a/src/components/__tests__/__snapshots__/ListSection.test.js.snap b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
@@ -114,10 +114,14 @@ exports[`renders list section with subheader 1`] = `
               "alignItems": "center",
               "height": 40,
               "justifyContent": "center",
-              "marginRight": 16,
+              "margin": 8,
               "width": 40,
             },
-            null,
+            Object {
+              "marginLeft": 0,
+              "marginRight": 16,
+              "marginVertical": 0,
+            },
           ]
         }
       >
@@ -235,10 +239,14 @@ exports[`renders list section with subheader 1`] = `
               "alignItems": "center",
               "height": 40,
               "justifyContent": "center",
-              "marginRight": 16,
+              "margin": 8,
               "width": 40,
             },
-            null,
+            Object {
+              "marginLeft": 0,
+              "marginRight": 16,
+              "marginVertical": 0,
+            },
           ]
         }
       >
@@ -409,10 +417,14 @@ exports[`renders list section without subheader 1`] = `
               "alignItems": "center",
               "height": 40,
               "justifyContent": "center",
-              "marginRight": 16,
+              "margin": 8,
               "width": 40,
             },
-            null,
+            Object {
+              "marginLeft": 0,
+              "marginRight": 16,
+              "marginVertical": 0,
+            },
           ]
         }
       >
@@ -530,10 +542,14 @@ exports[`renders list section without subheader 1`] = `
               "alignItems": "center",
               "height": 40,
               "justifyContent": "center",
-              "marginRight": 16,
+              "margin": 8,
               "width": 40,
             },
-            null,
+            Object {
+              "marginLeft": 0,
+              "marginRight": 16,
+              "marginVertical": 0,
+            },
           ]
         }
       >