BREAKING: Drawer redesign

example/DrawerItems.js

@@ -56,7 +56,11 @@ class DrawerItems extends React.Component<Props, State> {
             <DrawerItem
               {...props}
               key={props.key}
-              color={props.key === 3 ? Colors.tealA200 : undefined}
+              theme={
+                props.key === 3
+                  ? { colors: { primary: Colors.tealA200 } }
+                  : undefined
+              }
               active={this.state.drawerItemIndex === index}
               onPress={() => this._setDrawerItem(index)}
             />

src/components/DrawerItem.js

@@ -5,7 +5,6 @@ import * as React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import Icon from './Icon';
 import TouchableRipple from './TouchableRipple';
-import { grey300, grey700 } from '../styles/colors';
 import withTheme from '../core/withTheme';
 import type { Theme } from '../types';
 import type { IconSource } from './Icon';
@@ -27,10 +26,6 @@ type Props = {
    * Function to execute on press.
    */
   onPress?: () => mixed,
-  /**
-   * Custom color for the drawer text and icon.
-   */
-  color?: string,
   /**
    * @optional
    */
@@ -52,39 +47,36 @@ type Props = {
  */
 class DrawerItem extends React.Component<Props> {
   render() {
-    const {
-      color: activeColor,
-      icon,
-      label,
-      active,
-      theme,
-      ...props
-    } = this.props;
-    const { colors, dark } = theme;
-    const backgroundColor = active ? (dark ? grey700 : grey300) : 'transparent';
-    const labelColor = active
-      ? activeColor || colors.text
-      : color(colors.text)
-          .alpha(0.54)
+    const { icon, label, active, theme, ...props } = this.props;
+    const { colors, roundness } = theme;
+    const backgroundColor = active
+      ? color(colors.primary)
+          .alpha(0.12)
           .rgb()
-          .string();
-    const iconColor = active
-      ? activeColor || colors.text
+          .string()
+      : 'transparent';
+    const contentColor = active
+      ? colors.primary
       : color(colors.text)
-          .alpha(0.54)
+          .alpha(0.68)
           .rgb()
           .string();
     const fontFamily = theme.fonts.medium;
     const labelMargin = icon ? 32 : 0;
 
     return (
-      <TouchableRipple {...props}>
-        <View style={[styles.wrapper, { backgroundColor }]}>
-          {icon && <Icon source={icon} size={24} color={iconColor} />}
+      <TouchableRipple
+        {...props}
+        style={[styles.touchable, { borderRadius: roundness }]}
+      >
+        <View
+          style={[styles.wrapper, { backgroundColor, borderRadius: roundness }]}
+        >
+          {icon && <Icon source={icon} size={24} color={contentColor} />}
           <Text
             numberOfLines={1}
             style={{
-              color: labelColor,
+              color: contentColor,
               fontFamily,
               marginLeft: labelMargin,
               marginRight: 32,
@@ -99,12 +91,15 @@ class DrawerItem extends React.Component<Props> {
 }
 
 const styles = StyleSheet.create({
+  touchable: {
+    marginHorizontal: 10,
+    marginVertical: 4,
+  },
   wrapper: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 16,
-    height: 48,
+    padding: 8,
+    height: 40,
   },
 });
 

src/components/__tests__/DrawerItem.test.js

@@ -0,0 +1,29 @@
+/* @flow */
+
+import * as React from 'react';
+import renderer from 'react-test-renderer';
+import DrawerItem from '../DrawerItem';
+
+it('renders basic DrawerItem', () => {
+  const tree = renderer
+    .create(<DrawerItem onPress={() => {}} label="Example item" />)
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders DrawerItem with icon', () => {
+  const tree = renderer
+    .create(<DrawerItem icon="info" label="Example item" />)
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders active DrawerItem', () => {
+  const tree = renderer
+    .create(<DrawerItem icon="info" active label="Example item" />)
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/components/__tests__/__snapshots__/DrawerItem.test.js.snap

@@ -0,0 +1,250 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders DrawerItem with icon 1`] = `
+<View
+  accessibilityComponentType={undefined}
+  accessibilityLabel={undefined}
+  accessibilityTraits={undefined}
+  accessible={true}
+  hasTVPreferredFocus={undefined}
+  hitSlop={undefined}
+  isTVSelectable={true}
+  nativeID={undefined}
+  onLayout={undefined}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "marginHorizontal": 10,
+        "marginVertical": 4,
+      },
+      Object {
+        "borderRadius": 4,
+      },
+    ]
+  }
+  testID={undefined}
+  tvParallaxProperties={undefined}
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 40,
+          "padding": 8,
+        },
+        Object {
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={false}
+      ellipsizeMode="tail"
+      pointerEvents="none"
+      style={
+        Array [
+          Object {
+            "color": "rgba(0, 0, 0, 0.68)",
+            "fontSize": 24,
+          },
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Object {
+            "fontFamily": "Material Icons",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+        ]
+      }
+    >
+      
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        Object {
+          "color": "rgba(0, 0, 0, 0.68)",
+          "fontFamily": "HelveticaNeue-Medium",
+          "marginLeft": 32,
+          "marginRight": 32,
+        }
+      }
+    >
+      Example item
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`renders active DrawerItem 1`] = `
+<View
+  accessibilityComponentType={undefined}
+  accessibilityLabel={undefined}
+  accessibilityTraits={undefined}
+  accessible={true}
+  hasTVPreferredFocus={undefined}
+  hitSlop={undefined}
+  isTVSelectable={true}
+  nativeID={undefined}
+  onLayout={undefined}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "marginHorizontal": 10,
+        "marginVertical": 4,
+      },
+      Object {
+        "borderRadius": 4,
+      },
+    ]
+  }
+  testID={undefined}
+  tvParallaxProperties={undefined}
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 40,
+          "padding": 8,
+        },
+        Object {
+          "backgroundColor": "rgba(98, 0, 238, 0.12)",
+          "borderRadius": 4,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={false}
+      ellipsizeMode="tail"
+      pointerEvents="none"
+      style={
+        Array [
+          Object {
+            "color": "#6200ee",
+            "fontSize": 24,
+          },
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Object {
+            "fontFamily": "Material Icons",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+        ]
+      }
+    >
+      
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        Object {
+          "color": "#6200ee",
+          "fontFamily": "HelveticaNeue-Medium",
+          "marginLeft": 32,
+          "marginRight": 32,
+        }
+      }
+    >
+      Example item
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`renders basic DrawerItem 1`] = `
+<View
+  accessibilityComponentType={undefined}
+  accessibilityLabel={undefined}
+  accessibilityTraits={undefined}
+  accessible={true}
+  hasTVPreferredFocus={undefined}
+  hitSlop={undefined}
+  isTVSelectable={true}
+  nativeID={undefined}
+  onLayout={undefined}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "marginHorizontal": 10,
+        "marginVertical": 4,
+      },
+      Object {
+        "borderRadius": 4,
+      },
+    ]
+  }
+  testID={undefined}
+  tvParallaxProperties={undefined}
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 40,
+          "padding": 8,
+        },
+        Object {
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        Object {
+          "color": "rgba(0, 0, 0, 0.68)",
+          "fontFamily": "HelveticaNeue-Medium",
+          "marginLeft": 0,
+          "marginRight": 32,
+        }
+      }
+    >
+      Example item
+    </Text>
+  </View>
+</View>
+`;