Repository: callstack/react-native-paper (ts)

Issue:
List.Item height
## Environment

Latest stable version of paper.

## Description

Based on Material Design specs list item height must be:

- With title: 48px
- With title and icon: 56px
- With title and description: 72px

https://material.io/design/components/lists.html#specs

But now `List.Item` component height are:

- With title: 54px
- With title and icon: 72px
- With title and description: 72px

## Reproducible Demo

````
<List.Item
    title="Trello"
    left={props => <List.Icon icon="folder" />}
    description="Project 1, Project 2"
/>
<List.Item
    title="Trello"
    left={props => <List.Icon icon="folder" />}
/>
<List.Item
    title="Trello"
/>
````

![Android Emulator - Pixel_API_25:5554 2019-03-12 13-44-04](https://user-images.githubusercontent.com/427919/54197585-fcfd8100-44cc-11e9-941f-47b44d2c3363.png)




Pull request:
fix: list item height and margins
fixes #914

change margin value in ListIcon and ListItem component
add condition to adjust margin when description prop is passed

### Motivation

Solves the issue with different ListItem height according to Material Design guidelines

### Test plan

Update snapshots during run tests


Patch:
diff --git a/docs/component-docs.config.js b/docs/component-docs.config.js
index 8771e79bf..bd3e2f733 100644
--- a/docs/component-docs.config.js
+++ b/docs/component-docs.config.js
@@ -13,7 +13,7 @@ const assets = [
 ];
 const styles = [path.join(__dirname, 'assets', 'styles.css')];
 const scripts = [path.join(__dirname, 'assets', 'snack.js')];
-const github = 'https://github.com/callstack/react-native-paper/edit/master';
+const github = 'https://github.com/callstack/react-native-paper/edit/master/';
 
 if (!fs.existsSync(dist)) {
   fs.mkdirSync(dist);
diff --git a/src/components/List/ListIcon.js b/src/components/List/ListIcon.js
index b67dced72..83df2333a 100644
--- 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: {
-    margin: 8,
+    marginRight: 16,
     height: 40,
     width: 40,
     alignItems: 'center',
diff --git a/src/components/List/ListItem.js b/src/components/List/ListItem.js
index 51572a612..af825bf32 100644
--- a/src/components/List/ListItem.js
+++ b/src/components/List/ListItem.js
@@ -118,7 +118,12 @@ class ListItem extends React.Component<Props> {
         onPress={onPress}
       >
         <View style={styles.row}>
-          {left ? left({ color: descriptionColor }) : null}
+          {left
+            ? left({
+                color: descriptionColor,
+                style: description ? styles.iconMargin : null,
+              })
+            : null}
           <View style={[styles.item, styles.content]} pointerEvents="none">
             <Text
               ellipsizeMode={titleEllipsizeMode}
@@ -143,7 +148,12 @@ class ListItem extends React.Component<Props> {
               </Text>
             ) : null}
           </View>
-          {right ? right({ color: descriptionColor }) : null}
+          {right
+            ? right({
+                color: descriptionColor,
+                style: description ? styles.iconMargin : null,
+              })
+            : null}
         </View>
       </TouchableRipple>
     );
@@ -163,8 +173,10 @@ const styles = StyleSheet.create({
   description: {
     fontSize: 14,
   },
+  iconMargin: { marginVertical: 8 },
   item: {
-    margin: 8,
+    marginVertical: 6,
+    paddingLeft: 8,
   },
   content: {
     flex: 1,


Test patch:
diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
index 72a14ed88..3c0df9cc4 100644
--- a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
@@ -151,7 +151,8 @@ exports[`renders expanded accordion 1`] = `
         style={
           Array [
             Object {
-              "margin": 8,
+              "marginVertical": 6,
+              "paddingLeft": 8,
             },
             Object {
               "flex": 1,
@@ -232,7 +233,7 @@ exports[`renders list accordion with children 1`] = `
               "alignItems": "center",
               "height": 40,
               "justifyContent": "center",
-              "margin": 8,
+              "marginRight": 16,
               "width": 40,
             },
             undefined,
@@ -403,7 +404,7 @@ exports[`renders list accordion with left items 1`] = `
               "alignItems": "center",
               "height": 40,
               "justifyContent": "center",
-              "margin": 8,
+              "marginRight": 16,
               "width": 40,
             },
             undefined,
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
index ecd5cdf1e..7e1f2933e 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -34,7 +34,8 @@ exports[`renders list item with custom title and description styles 1`] = `
       style={
         Array [
           Object {
-            "margin": 8,
+            "marginVertical": 6,
+            "paddingLeft": 8,
           },
           Object {
             "flex": 1,
@@ -137,7 +138,8 @@ exports[`renders list item with left and right items 1`] = `
       style={
         Array [
           Object {
-            "margin": 8,
+            "marginVertical": 6,
+            "paddingLeft": 8,
           },
           Object {
             "flex": 1,
@@ -205,10 +207,12 @@ exports[`renders list item with left and right items 1`] = `
             "alignItems": "center",
             "height": 40,
             "justifyContent": "center",
-            "margin": 8,
+            "marginRight": 16,
             "width": 40,
           },
-          undefined,
+          Object {
+            "marginVertical": 8,
+          },
         ]
       }
     >
@@ -288,10 +292,10 @@ exports[`renders list item with left item 1`] = `
             "alignItems": "center",
             "height": 40,
             "justifyContent": "center",
-            "margin": 8,
+            "marginRight": 16,
             "width": 40,
           },
-          undefined,
+          null,
         ]
       }
     >
@@ -335,7 +339,8 @@ exports[`renders list item with left item 1`] = `
       style={
         Array [
           Object {
-            "margin": 8,
+            "marginVertical": 6,
+            "paddingLeft": 8,
           },
           Object {
             "flex": 1,
@@ -408,7 +413,8 @@ exports[`renders list item with right item 1`] = `
       style={
         Array [
           Object {
-            "margin": 8,
+            "marginVertical": 6,
+            "paddingLeft": 8,
           },
           Object {
             "flex": 1,
@@ -484,7 +490,8 @@ exports[`renders list item with title and description 1`] = `
       style={
         Array [
           Object {
-            "margin": 8,
+            "marginVertical": 6,
+            "paddingLeft": 8,
           },
           Object {
             "flex": 1,
diff --git a/src/components/__tests__/__snapshots__/ListSection.test.js.snap b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
index 653d84fd4..dc90111e4 100644
--- a/src/components/__tests__/__snapshots__/ListSection.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
@@ -102,10 +102,10 @@ exports[`renders list section with subheader 1`] = `
               "alignItems": "center",
               "height": 40,
               "justifyContent": "center",
-              "margin": 8,
+              "marginRight": 16,
               "width": 40,
             },
-            undefined,
+            null,
           ]
         }
       >
@@ -149,7 +149,8 @@ exports[`renders list section with subheader 1`] = `
         style={
           Array [
             Object {
-              "margin": 8,
+              "marginVertical": 6,
+              "paddingLeft": 8,
             },
             Object {
               "flex": 1,
@@ -222,10 +223,10 @@ exports[`renders list section with subheader 1`] = `
               "alignItems": "center",
               "height": 40,
               "justifyContent": "center",
-              "margin": 8,
+              "marginRight": 16,
               "width": 40,
             },
-            undefined,
+            null,
           ]
         }
       >
@@ -269,7 +270,8 @@ exports[`renders list section with subheader 1`] = `
         style={
           Array [
             Object {
-              "margin": 8,
+              "marginVertical": 6,
+              "paddingLeft": 8,
             },
             Object {
               "flex": 1,
@@ -383,10 +385,10 @@ exports[`renders list section without subheader 1`] = `
               "alignItems": "center",
               "height": 40,
               "justifyContent": "center",
-              "margin": 8,
+              "marginRight": 16,
               "width": 40,
             },
-            undefined,
+            null,
           ]
         }
       >
@@ -430,7 +432,8 @@ exports[`renders list section without subheader 1`] = `
         style={
           Array [
             Object {
-              "margin": 8,
+              "marginVertical": 6,
+              "paddingLeft": 8,
             },
             Object {
               "flex": 1,
@@ -503,10 +506,10 @@ exports[`renders list section without subheader 1`] = `
               "alignItems": "center",
               "height": 40,
               "justifyContent": "center",
-              "margin": 8,
+              "marginRight": 16,
               "width": 40,
             },
-            undefined,
+            null,
           ]
         }
       >
@@ -550,7 +553,8 @@ exports[`renders list section without subheader 1`] = `
         style={
           Array [
             Object {
-              "margin": 8,
+              "marginVertical": 6,
+              "paddingLeft": 8,
             },
             Object {
               "flex": 1,