make circular badge on jewel for single-digit mention (#2422)

app/components/__snapshots__/badge.test.js.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Badge should match snapshot 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#444",
+        "borderRadius": 20,
+        "height": 20,
+        "padding": 12,
+        "paddingBottom": 3,
+        "paddingTop": 3,
+        "position": "absolute",
+        "right": 30,
+        "top": 2,
+      },
+      Object {
+        "backgroundColor": "#ffffff",
+      },
+      Object {
+        "opacity": 0,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "justifyContent": "center",
+      }
+    }
+  >
+    <Text
+      onLayout={[Function]}
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "fontSize": 14,
+          },
+          Object {
+            "color": "#145dbf",
+            "fontSize": 10,
+          },
+          Object {},
+        ]
+      }
+    >
+      1
+    </Text>
+  </View>
+</View>
+`;

app/components/badge.js

@@ -15,8 +15,8 @@ import {
 export default class Badge extends PureComponent {
     static defaultProps = {
         extraPaddingHorizontal: 10,
-        minHeight: 0,
-        minWidth: 0,
+        minHeight: 20,
+        minWidth: 20,
     };
 
     static propTypes = {
@@ -81,7 +81,7 @@ export default class Badge extends PureComponent {
             } else {
                 width = e.nativeEvent.layout.width + this.props.extraPaddingHorizontal;
             }
-            width = Math.max(width + 10, this.props.minWidth);
+            width = Math.max(this.props.count < 10 ? width : width + 10, this.props.minWidth);
             const borderRadius = width / 2;
             this.setNativeProps({
                 style: {
@@ -105,12 +105,19 @@ export default class Badge extends PureComponent {
             extra.marginBottom = 1;
         }
         return (
-            <Text
-                style={[styles.text, this.props.countStyle, extra]}
-                onLayout={this.onLayout}
+            <View
+                ref='badgeContainer'
+                style={[styles.badge, this.props.style, {opacity: 0}]}
             >
-                {text}
-            </Text>
+                <View style={styles.wrapper}>
+                    <Text
+                        style={[styles.text, this.props.countStyle, extra]}
+                        onLayout={this.onLayout}
+                    >
+                        {text}
+                    </Text>
+                </View>
+            </View>
         );
     };
 
@@ -124,14 +131,7 @@ export default class Badge extends PureComponent {
                 {...this.panResponder.panHandlers}
                 onPress={this.handlePress}
             >
-                <View
-                    ref='badgeContainer'
-                    style={[styles.badge, this.props.style, {opacity: 0}]}
-                >
-                    <View style={styles.wrapper}>
-                        {this.renderText()}
-                    </View>
-                </View>
+                {this.renderText()}
             </TouchableWithoutFeedback>
         );
     }

app/components/badge.test.js

@@ -0,0 +1,27 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {Text, TouchableWithoutFeedback} from 'react-native';
+import {shallow} from 'enzyme';
+
+import Badge from './badge';
+
+describe('Badge', () => {
+    const baseProps = {
+        count: 1,
+        countStyle: {color: '#145dbf', fontSize: 10},
+        style: {backgroundColor: '#ffffff'},
+        onPress: jest.fn(),
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallow(
+            <Badge {...baseProps}/>
+        );
+
+        expect(wrapper.instance().renderText()).toMatchSnapshot();
+        expect(wrapper.find(TouchableWithoutFeedback).exists()).toEqual(true);
+        expect(wrapper.find(Text).first().props().children).toContain('1');
+    });
+});

app/components/sidebars/main/channels_list/channel_item/channel_item.js

@@ -162,8 +162,6 @@ export default class ChannelItem extends PureComponent {
                     style={style.badge}
                     countStyle={style.mention}
                     count={mentions}
-                    minHeight={20}
-                    minWidth={20}
                     onPress={this.onPress}
                 />
             );

app/components/sidebars/main/channels_list/switch_teams_button/switch_teams_button.js

@@ -53,8 +53,6 @@ export default class SwitchTeamsButton extends React.PureComponent {
                 style={styles.badge}
                 countStyle={styles.mention}
                 count={mentionCount}
-                minHeight={20}
-                minWidth={20}
             />
         );
 

app/components/sidebars/main/teams_list/teams_list_item/teams_list_item.js

@@ -62,8 +62,6 @@ export default class TeamsListItem extends React.PureComponent {
                 style={styles.badge}
                 countStyle={styles.mention}
                 count={mentionCount}
-                minHeight={20}
-                minWidth={20}
             />
         );
 

app/screens/channel/channel_nav_bar/channel_drawer_button.js

@@ -113,8 +113,6 @@ class ChannelDrawerButton extends PureComponent {
                     style={style.badge}
                     countStyle={style.mention}
                     count={badgeCount}
-                    minHeight={20}
-                    minWidth={20}
                     onPress={this.handlePress}
                 />
             );