feat: add titleStyle and descriptionStyle props to List.Item (#911)

callstack · Mar 14, 2019 · 30fed6f · 30fed6f
1 parent 2bbc33c
commit 30fed6f
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 4 deletions.
diff --git a/src/components/List/ListItem.js b/src/components/List/ListItem.js
@@ -3,6 +3,10 @@
 import color from 'color';
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
+import type {
+  ViewStyleProp,
+  TextStyleProp,
+} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import TouchableRipple from '../TouchableRipple';
 import Text from '../Typography/Text';
 import { withTheme } from '../../core/theming';
@@ -33,7 +37,18 @@ type Props = $RemoveChildren<typeof TouchableRipple> & {|
    * @optional
    */
   theme: Theme,
-  style?: any,
+  /**
+   * Style that is passed to the wrapping TouchableRipple element.
+   */
+  style?: ViewStyleProp,
+  /**
+   * Style that is passed to Title element.
+   */
+  titleStyle?: TextStyleProp,
+  /**
+   * Style that is passed to Description element.
+   */
+  descriptionStyle?: TextStyleProp,
 |};
 
 /**
@@ -73,6 +88,8 @@ class ListItem extends React.Component<Props> {
       onPress,
       theme,
       style,
+      titleStyle,
+      descriptionStyle,
       ...rest
     } = this.props;
     const titleColor = color(theme.colors.text)
@@ -95,7 +112,7 @@ class ListItem extends React.Component<Props> {
           <View style={[styles.item, styles.content]} pointerEvents="none">
             <Text
               numberOfLines={1}
-              style={[styles.title, { color: titleColor }]}
+              style={[styles.title, { color: titleColor }, titleStyle]}
             >
               {title}
             </Text>
@@ -107,6 +124,7 @@ class ListItem extends React.Component<Props> {
                   {
                     color: descriptionColor,
                   },
+                  descriptionStyle,
                 ]}
               >
                 {description}

diff --git a/src/components/__tests__/ListItem.test.js b/src/components/__tests__/ListItem.test.js
@@ -51,3 +51,18 @@ it('renders list item with left and right items', () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+it('renders list item with custom title and description styles', () => {
+  const tree = renderer
+    .create(
+      <ListItem
+        title="First Item"
+        description="Item description"
+        titleStyle={{ fontSize: 20 }}
+        descriptionStyle={{ color: 'red' }}
+      />
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
@@ -176,6 +176,7 @@ exports[`renders expanded accordion 1`] = `
                 Object {
                   "color": "rgba(0, 0, 0, 0.87)",
                 },
+                undefined,
               ],
             ]
           }

diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -1,5 +1,105 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders list item with custom title and description styles 1`] = `
+<View
+  accessible={true}
+  isTVSelectable={true}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      false,
+      Array [
+        Object {
+          "padding": 8,
+        },
+        undefined,
+      ],
+    ]
+  }
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <View
+      pointerEvents="none"
+      style={
+        Array [
+          Object {
+            "margin": 8,
+          },
+          Object {
+            "flex": 1,
+            "justifyContent": "center",
+          },
+        ]
+      }
+    >
+      <Text
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+              "fontFamily": "Helvetica Neue",
+              "textAlign": "left",
+              "writingDirection": "ltr",
+            },
+            Array [
+              Object {
+                "fontSize": 16,
+              },
+              Object {
+                "color": "rgba(0, 0, 0, 0.87)",
+              },
+              Object {
+                "fontSize": 20,
+              },
+            ],
+          ]
+        }
+      >
+        First Item
+      </Text>
+      <Text
+        numberOfLines={2}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+              "fontFamily": "Helvetica Neue",
+              "textAlign": "left",
+              "writingDirection": "ltr",
+            },
+            Array [
+              Object {
+                "fontSize": 14,
+              },
+              Object {
+                "color": "rgba(0, 0, 0, 0.54)",
+              },
+              Object {
+                "color": "red",
+              },
+            ],
+          ]
+        }
+      >
+        Item description
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`renders list item with left and right items 1`] = `
 <View
   accessible={true}
@@ -63,6 +163,7 @@ exports[`renders list item with left and right items 1`] = `
               Object {
                 "color": "rgba(0, 0, 0, 0.87)",
               },
+              undefined,
             ],
           ]
         }
@@ -86,6 +187,7 @@ exports[`renders list item with left and right items 1`] = `
               Object {
                 "color": "rgba(0, 0, 0, 0.54)",
               },
+              undefined,
             ],
           ]
         }
@@ -257,6 +359,7 @@ exports[`renders list item with left item 1`] = `
               Object {
                 "color": "rgba(0, 0, 0, 0.87)",
               },
+              undefined,
             ],
           ]
         }
@@ -328,6 +431,7 @@ exports[`renders list item with right item 1`] = `
               Object {
                 "color": "rgba(0, 0, 0, 0.87)",
               },
+              undefined,
             ],
           ]
         }
@@ -402,6 +506,7 @@ exports[`renders list item with title and description 1`] = `
               Object {
                 "color": "rgba(0, 0, 0, 0.87)",
               },
+              undefined,
             ],
           ]
         }
@@ -425,6 +530,7 @@ exports[`renders list item with title and description 1`] = `
               Object {
                 "color": "rgba(0, 0, 0, 0.54)",
               },
+              undefined,
             ],
           ]
         }

diff --git a/src/components/__tests__/__snapshots__/ListSection.test.js.snap b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
@@ -170,6 +170,7 @@ exports[`renders list section with subheader 1`] = `
                 Object {
                   "color": "rgba(0, 0, 0, 0.87)",
                 },
+                undefined,
               ],
             ]
           }
@@ -288,6 +289,7 @@ exports[`renders list section with subheader 1`] = `
                 Object {
                   "color": "rgba(0, 0, 0, 0.87)",
                 },
+                undefined,
               ],
             ]
           }
@@ -444,6 +446,7 @@ exports[`renders list section without subheader 1`] = `
                 Object {
                   "color": "rgba(0, 0, 0, 0.87)",
                 },
+                undefined,
               ],
             ]
           }
@@ -562,6 +565,7 @@ exports[`renders list section without subheader 1`] = `
                 Object {
                   "color": "rgba(0, 0, 0, 0.87)",
                 },
+                undefined,
               ],
             ]
           }

diff --git a/typings/components/List.d.ts b/typings/components/List.d.ts
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { StyleProp, ViewStyle, ViewProps, TextProps, TextStyle } from 'react-native';
+import {
+  StyleProp,
+  ViewStyle,
+  ViewProps,
+  TextProps,
+  TextStyle,
+} from 'react-native';
 import { ThemeShape, IconSource } from '../types';
 import { TouchableRipplePropsWithoutChildren } from './TouchableRipple';
 
@@ -29,6 +35,8 @@ export interface ItemProps extends TouchableRipplePropsWithoutChildren {
   description?: React.ReactNode;
   left?: (props: { color: string }) => React.ReactNode;
   right?: (props: { color: string }) => React.ReactNode;
+  titleStyle?: StyleProp<TextStyle>;
+  descriptionStyle?: StyleProp<TextStyle>;
 }
 
 export declare class Item extends React.Component<ItemProps> {}
@@ -43,7 +51,7 @@ export declare class Section extends React.Component<SectionProps> {}
 
 export interface SubheaderProps extends TextProps {
   style?: StyleProp<TextStyle>;
-  theme?: ThemeShape
+  theme?: ThemeShape;
 }
 
 export declare class Subheader extends React.Component<SubheaderProps> {}
-Original file line number
+Diff line change
@@ Expand Up / @@ -176,6 +176,7 @@ exports[`renders expanded accordion 1`] = ` @@
                     Object {
                       "color": "rgba(0, 0, 0, 0.87)",
                     },
+                    undefined,
                   ],
                 ]
               }
@@ Expand Down @@