Merge branch 'master' into typescript/tab-controller-move-to-typescript

* master:
  configure 'max-len'; turn off 'jsx-no-bind' (#1087)
  remove unnecessary view (#1084)
  Counter Icon badge (#1081)
  checkbox variant - outline (#1067)

Author: M-i-k-e-l

.eslintrc.js

@@ -9,9 +9,9 @@ module.exports = {
     'no-mixed-operators': ['off'],
     'no-trailing-spaces': 'off',
     'operator-linebreak': 'off',
-    'max-len': ['warn', {code: 120}],
+    'max-len': ['warn', {code: 120, "ignoreComments": true, "ignoreStrings": true}],
     'react/jsx-no-bind': [
-      'warn',
+      'off',
       {
         ignoreRefs: true,
         allowArrowFunctions: false,

demo/src/assets/icons/bell.png

@@ -5,8 +5,7 @@ const BadgesSpace = 30;
 const plusIcon = require('../../assets/icons/chevronUp.png');
 const minusIcon = require('../../assets/icons/chevronDown.png');
 const star = require('../../assets/icons/star.png');
-const search = require('../../assets/icons/search.png');
-
+const bell = require('../../assets/icons/bell.png');
 
 export default class BadgesScreen extends Component {
   constructor(props) {
@@ -137,6 +136,15 @@ export default class BadgesScreen extends Component {
             </Text>
           </View>
         </View>
+
+        <Text text50 marginB-10 row center marginT-25>
+          Counter Icon Badges
+        </Text>
+        <View row paddingH-15>
+            <Badge marginR-10 withCounterIcon label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.red30} iconStyle={{height: 18, width: 18}}/>
+            <Badge marginR-10 withCounterIcon label={'4'} icon={bell} backgroundColor={Colors.red30} color={Colors.blue30} iconStyle={{height: 18, width: 18}}/>
+        </View>
+
       </ScrollView>
     );
   }

demo/src/assets/icons/[email protected]

@@ -17,6 +17,10 @@ export interface CheckboxProps extends TouchableOpacityProps {
      * The Checkbox color
      */
     color?: string;
+    /**
+     * alternative Checkbox outline style
+     */
+    outline?: boolean;
     /**
      * The size of the checkbox. affect both width and height
      */

demo/src/assets/icons/[email protected]

@@ -4,7 +4,7 @@ import {ImageSourcePropType, ImageStyle, StyleProp, StyleSheet, Text, TextStyle,
 import {View as AnimatableView} from 'react-native-animatable';
 import {extractAccessibilityProps, extractAnimationProps} from '../../commons/modifiers';
 import {asBaseComponent} from '../../commons/new';
-import {BorderRadiuses, Colors, Typography} from '../../style';
+import {BorderRadiuses, Colors, Spacings, Typography} from '../../style';
 import TouchableOpacity from '../touchableOpacity';
 import Image from '../image';
 import View from '../view';
@@ -143,6 +143,15 @@ class Badge extends PureComponent<BadgeProps> {
       height: badgeHeight,
       minWidth: badgeHeight
     };
+    if (icon && label) {
+      style.paddingRight = 6;
+      style.paddingLeft = 4;
+      style.height = Spacings.s5;
+      if (borderWidth) {
+        style.height += borderWidth * 2;
+      }
+      return style;
+    }
 
     const isPimple = label === undefined;
     if (isPimple || icon) {
@@ -213,7 +222,8 @@ class Badge extends PureComponent<BadgeProps> {
   }
 
   renderIcon() {
-    const {icon, iconStyle, iconProps, borderColor} = this.props;
+    const {icon, iconStyle, iconProps, borderColor, label} = this.props;
+    const flex = label ? 0 : 1;
     return (
       <Image
         source={icon!}
@@ -222,7 +232,7 @@ class Badge extends PureComponent<BadgeProps> {
         borderColor={borderColor}
         {...iconProps}
         style={{
-          flex: 1,
+          flex,
           ...iconStyle
         }}
       />
@@ -237,6 +247,7 @@ class Badge extends PureComponent<BadgeProps> {
       containerStyle,
       hitSlop,
       icon,
+      label,
       onPress,
       testId,
       testID,
@@ -264,8 +275,10 @@ class Badge extends PureComponent<BadgeProps> {
           activeOpacity={activeOpacity}
           hitSlop={hitSlop}
           {...animationProps}
+          row
         >
-          {icon ? this.renderIcon() : this.renderLabel()}
+          {icon && this.renderIcon()}
+          {label && this.renderLabel()}
         </Container>
       </View>
     );

demo/src/screens/componentScreens/BadgesScreen.tsx

@@ -15,6 +15,9 @@ const DEFAULT_COLOR = Colors.blue30;
 const DEFAULT_ICON_COLOR = Colors.white;
 const DEFAULT_DISABLED_COLOR = Colors.grey50;
 
+const DEFAULT_BORDER_WIDTH = 2;
+const DEFAULT_BORDER_RADIUS = 8;
+
 export interface CheckboxProps extends TouchableOpacityProps {
   /**
    * The value of the Checkbox. If true the switch will be turned on. Default value is false.
@@ -32,6 +35,10 @@ export interface CheckboxProps extends TouchableOpacityProps {
    * The Checkbox color
    */
   color?: string;
+  /**
+   * alternative Checkbox outline style
+   */
+  outline?: boolean;
   /**
    * The size of the checkbox. affect both width and height
    */
@@ -158,14 +165,24 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     }
   };
 
-  getColor() {
-    const {color, disabled} = this.props;
-    return disabled ? DEFAULT_DISABLED_COLOR : color || DEFAULT_COLOR;
-  }
+  getColor = () => (this.props.disabled ? DEFAULT_DISABLED_COLOR : this.props.color || DEFAULT_COLOR);
+
+  getBackgroundColor = () => (this.props.outline ? 'transparent' : this.getColor());
+
+  getTintColor = () => {
+    const {outline, disabled, iconColor} = this.props;
+    if (outline) {
+      if (disabled) return DEFAULT_DISABLED_COLOR;
+      else return iconColor || DEFAULT_COLOR;
+    } else {
+      if (disabled) return Colors.white;
+      else return iconColor || Colors.white;
+    }
+  };
 
   getBorderStyle() {
     const borderColor = {borderColor: this.getColor()};
-    const borderStyle = [this.styles.container, {borderWidth: 2}, borderColor];
+    const borderStyle = [this.styles.container, {borderWidth: DEFAULT_BORDER_WIDTH}, borderColor];
 
     return borderStyle;
   }
@@ -185,14 +202,17 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
       >
         {
           <Animated.View
-            style={[this.styles.container, {backgroundColor: this.getColor()}, {opacity: this.animationStyle.opacity}]}
+            style={[
+              this.styles.container,
+              {opacity: this.animationStyle.opacity},
+              {backgroundColor: this.getBackgroundColor()}
+            ]}
           >
             <Animated.Image
               style={[
                 this.styles.selectedIcon,
-                color && {tintColor: iconColor},
                 {transform: this.animationStyle.transform},
-                disabled && {tintColor: DEFAULT_ICON_COLOR}
+                {tintColor: this.getTintColor()}
               ]}
               source={selectedIcon || Assets.icons.checkSmall}
               testID={`${testID}.selected`}
@@ -219,13 +239,18 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
 }
 
 function createStyles(props: CheckboxProps) {
-  const {color = DEFAULT_COLOR, iconColor = DEFAULT_ICON_COLOR, size = DEFAULT_SIZE, borderRadius} = props;
+  const {
+    color = DEFAULT_COLOR,
+    iconColor = DEFAULT_ICON_COLOR,
+    size = DEFAULT_SIZE,
+    borderRadius = DEFAULT_BORDER_RADIUS
+  } = props;
 
   return StyleSheet.create({
     container: {
       width: size,
       height: size,
-      borderRadius: borderRadius || 8,
+      borderRadius: borderRadius,
       alignItems: 'center',
       justifyContent: 'center',
       borderColor: color